feat: enhance public sharing (#1057)

* fix tree nodes sort

* remove comment mark in shares

* remove clickoutside hook for now

* feat: search in shared pages

* fix user-select

* use Link

* render page icons

apps/client/src/features/search/components/search-control.module.css

@@ -0,0 +1,44 @@
+.root {
+    height: 34px;
+    padding-left: var(--mantine-spacing-sm);
+    padding-right: 4px;
+    border-radius: var(--mantine-radius-md);
+    color: var(--mantine-color-placeholder);
+    border: 1px solid;
+
+    @mixin light {
+        border-color: var(--mantine-color-gray-3);
+        background-color: var(--mantine-color-white);
+    }
+
+    @mixin dark {
+        border-color: var(--mantine-color-dark-4);
+        background-color: var(--mantine-color-dark-6);
+    }
+
+    @mixin rtl {
+        padding-left: 4px;
+        padding-right: var(--mantine-spacing-sm);
+    }
+}
+
+.shortcut {
+    font-size: 11px;
+    line-height: 1;
+    padding: 4px 7px;
+    border-radius: var(--mantine-radius-sm);
+    border: 1px solid;
+    font-weight: bold;
+
+    @mixin light {
+        color: var(--mantine-color-gray-7);
+        border-color: var(--mantine-color-gray-2);
+        background-color: var(--mantine-color-gray-0);
+    }
+
+    @mixin dark {
+        color: var(--mantine-color-dark-0);
+        border-color: var(--mantine-color-dark-7);
+        background-color: var(--mantine-color-dark-7);
+    }
+}

apps/client/src/features/search/components/search-control.tsx

@@ -0,0 +1,56 @@
+import { IconSearch } from "@tabler/icons-react";
+import cx from "clsx";
+import {
+  ActionIcon,
+  BoxProps,
+  ElementProps,
+  Group,
+  rem,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import classes from "./search-control.module.css";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+interface SearchControlProps extends BoxProps, ElementProps<"button"> {}
+
+export function SearchControl({ className, ...others }: SearchControlProps) {
+  const { t } = useTranslation();
+
+  return (
+    <UnstyledButton {...others} className={cx(classes.root, className)}>
+      <Group gap="xs" wrap="nowrap">
+        <IconSearch style={{ width: rem(15), height: rem(15) }} stroke={1.5} />
+        <Text fz="sm" c="dimmed" pr={80}>
+          {t("Search")}
+        </Text>
+        <Text fw={700} className={classes.shortcut}>
+          Ctrl + K
+        </Text>
+      </Group>
+    </UnstyledButton>
+  );
+}
+
+interface SearchMobileControlProps {
+  onSearch: () => void;
+}
+
+export function SearchMobileControl({ onSearch }: SearchMobileControlProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip label={t("Search")} withArrow>
+      <ActionIcon
+        variant="default"
+        style={{ border: "none" }}
+        onClick={onSearch}
+        size="sm"
+      >
+        <IconSearch size={20} stroke={2} />
+      </ActionIcon>
+    </Tooltip>
+  );
+}

apps/client/src/features/search/constants.ts

@@ -0,0 +1,7 @@
+import { createSpotlight } from '@mantine/spotlight';
+
+export const [searchSpotlightStore, searchSpotlight] = createSpotlight();
+
+export const [shareSearchSpotlightStore, shareSearchSpotlight] =
+  createSpotlight();
+

apps/client/src/features/search/queries/search-query.ts

@@ -1,6 +1,7 @@
 import { useQuery, UseQueryResult } from "@tanstack/react-query";
 import {
   searchPage,
+  searchShare,
   searchSuggestions,
 } from "@/features/search/services/search-service";
 import {
@@ -30,3 +31,13 @@ export function useSearchSuggestionsQuery(
     enabled: !!params.query,
   });
 }
+
+export function useShareSearchQuery(
+  params: IPageSearchParams,
+): UseQueryResult<IPageSearch[], Error> {
+  return useQuery({
+    queryKey: ["share-search", params],
+    queryFn: () => searchShare(params),
+    enabled: !!params.query,
+  });
+}

apps/client/src/features/search/search-spotlight.tsx

@@ -2,36 +2,36 @@ import { Group, Center, Text } from "@mantine/core";
 import { Spotlight } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { useDebouncedValue } from "@mantine/hooks";
 import { usePageSearchQuery } from "@/features/search/queries/search-query";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { getPageIcon } from "@/lib";
 import { useTranslation } from "react-i18next";
+import { searchSpotlightStore } from "./constants";
 
 interface SearchSpotlightProps {
   spaceId?: string;
 }
 export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const [query, setQuery] = useState("");
   const [debouncedSearchQuery] = useDebouncedValue(query, 300);
 
-  const {
-    data: searchResults,
-    isLoading,
-    error,
-  } = usePageSearchQuery({ query: debouncedSearchQuery, spaceId });
+  const { data: searchResults } = usePageSearchQuery({
+    query: debouncedSearchQuery,
+    spaceId,
+  });
 
   const pages = (
     searchResults && searchResults.length > 0 ? searchResults : []
   ).map((page) => (
     <Spotlight.Action
       key={page.id}
-      onClick={() =>
-        navigate(buildPageUrl(page.space.slug, page.slugId, page.title))
-      }
+      component={Link}
+      //@ts-ignore
+      to={buildPageUrl(page.space.slug, page.slugId, page.title)}
+      style={{ userSelect: "none" }}
     >
       <Group wrap="nowrap" w="100%">
         <Center>{getPageIcon(page?.icon)}</Center>
@@ -54,6 +54,7 @@ export function SearchSpotlight({ spaceId }: SearchSpotlightProps) {
   return (
     <>
       <Spotlight.Root
+        store={searchSpotlightStore}
         query={query}
         onQueryChange={setQuery}
         scrollable

apps/client/src/features/search/services/search-service.ts

@@ -19,3 +19,10 @@ export async function searchSuggestions(
   const req = await api.post<ISuggestionResult>("/search/suggest", params);
   return req.data;
 }
+
+export async function searchShare(
+  params: IPageSearchParams,
+): Promise<IPageSearch[]> {
+  const req = await api.post<IPageSearch[]>("/search/share-search", params);
+  return req.data;
+}

apps/client/src/features/search/share-search-spotlight.tsx

@@ -0,0 +1,87 @@
+import { Group, Center, Text } from "@mantine/core";
+import { Spotlight } from "@mantine/spotlight";
+import { IconSearch } from "@tabler/icons-react";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { useDebouncedValue } from "@mantine/hooks";
+import { useShareSearchQuery } from "@/features/search/queries/search-query";
+import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
+import { getPageIcon } from "@/lib";
+import { useTranslation } from "react-i18next";
+import { shareSearchSpotlightStore } from "@/features/search/constants.ts";
+
+interface ShareSearchSpotlightProps {
+  shareId?: string;
+}
+export function ShareSearchSpotlight({ shareId }: ShareSearchSpotlightProps) {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState("");
+  const [debouncedSearchQuery] = useDebouncedValue(query, 300);
+
+  const { data: searchResults } = useShareSearchQuery({
+    query: debouncedSearchQuery,
+    shareId,
+  });
+
+  const pages = (
+    searchResults && searchResults.length > 0 ? searchResults : []
+  ).map((page) => (
+    <Spotlight.Action
+      key={page.id}
+      component={Link}
+      //@ts-ignore
+      to={buildSharedPageUrl({
+        shareId: shareId,
+        pageTitle: page.title,
+        pageSlugId: page.slugId,
+      })}
+      style={{ userSelect: "none" }}
+    >
+      <Group wrap="nowrap" w="100%">
+        <Center>{getPageIcon(page?.icon)}</Center>
+
+        <div style={{ flex: 1 }}>
+          <Text>{page.title}</Text>
+
+          {page?.highlight && (
+            <Text
+              opacity={0.6}
+              size="xs"
+              dangerouslySetInnerHTML={{ __html: page.highlight }}
+            />
+          )}
+        </div>
+      </Group>
+    </Spotlight.Action>
+  ));
+
+  return (
+    <>
+      <Spotlight.Root
+        store={shareSearchSpotlightStore}
+        query={query}
+        onQueryChange={setQuery}
+        scrollable
+        overlayProps={{
+          backgroundOpacity: 0.55,
+        }}
+      >
+        <Spotlight.Search
+          placeholder={t("Search...")}
+          leftSection={<IconSearch size={20} stroke={1.5} />}
+        />
+        <Spotlight.ActionsList>
+          {query.length === 0 && pages.length === 0 && (
+            <Spotlight.Empty>{t("Start typing to search...")}</Spotlight.Empty>
+          )}
+
+          {query.length > 0 && pages.length === 0 && (
+            <Spotlight.Empty>{t("No results found...")}</Spotlight.Empty>
+          )}
+
+          {pages.length > 0 && pages}
+        </Spotlight.ActionsList>
+      </Spotlight.Root>
+    </>
+  );
+}

apps/client/src/features/search/types/search.types.ts

@@ -35,4 +35,5 @@ export interface ISuggestionResult {
 export interface IPageSearchParams {
   query: string;
   spaceId?: string;
+  shareId?: string;
 }