fix: adjust search UI

Author: qinluhe

src/@types/translations/en.json

@@ -3044,9 +3044,14 @@
   "memberCount_one": "{{count}} member",
   "memberCount_many": "{{count}} members",
   "memberCount_other": "{{count}} members",
-  "aiMatch": "AI match",
-  "titleMatch": "Title match",
+  "AIsearch": "AI search",
+  "titleOnly": "Title only",
   "namespace": "Namespace",
   "manageNamespaceDescription": "Manage your namespace and homepage",
-  "homepage": "Homepage"
+  "homepage": "Homepage",
+  "recentPages": "Recent pages",
+  "searchResults": "Search results",
+  "noSearchResults": "No search results",
+  "AISearchPlaceholder": "Search or ask a question..",
+  "searchLabel": "Search"
 }

src/components/app/app.hooks.tsx

@@ -403,12 +403,14 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
 
       const views = uniqBy(res, 'view_id');
 
-      setRecentViews(views);
+      setRecentViews(views.filter(item => {
+        return !item.extra?.is_space && findView(outline || [], item.view_id);
+      }));
       return views;
     } catch (e) {
       console.error('Recent views not found');
     }
-  }, [currentWorkspaceId, service]);
+  }, [currentWorkspaceId, service, outline]);
 
   const loadTrash = useCallback(async (currentWorkspaceId: string) => {
 
@@ -647,10 +649,12 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     if (!service || !currentWorkspaceId) return;
     const isDatabase = [ViewLayout.Board, ViewLayout.Grid, ViewLayout.Calendar].includes(view.layout);
     const viewId = view.view_id;
+    const children = view.children || [];
+    const visibleViewIds = [view.view_id, ...(children.map((v) => v.view_id))];
 
     await service.publishView(currentWorkspaceId, viewId, {
       publish_name: publishName,
-      visible_database_view_ids: isDatabase ? view.children?.map((v) => v.view_id) : undefined,
+      visible_database_view_ids: isDatabase ? visibleViewIds : undefined,
     });
     void loadOutline(currentWorkspaceId, false);
   }, [currentWorkspaceId, loadOutline, service]);

src/components/app/search/BestMatch.tsx

@@ -11,16 +11,16 @@ import { useTranslation } from 'react-i18next';
 function BestMatch ({
   onClose,
   searchValue,
-  setLoading,
 }: {
   onClose: () => void;
   searchValue: string;
-  setLoading: (loading: boolean) => void;
 }) {
-  const [views, setViews] = React.useState<View[]>([]);
+  const [views, setViews] = React.useState<View[] | undefined>(undefined);
   const { t } = useTranslation();
   const outline = useAppOutline();
   const service = useService();
+  const [loading, setLoading] = React.useState<boolean>(false);
+
   const currentWorkspaceId = useCurrentWorkspaceId();
   const handleSearch = useCallback(async (searchTerm: string) => {
     if (!outline) return;
@@ -38,15 +38,18 @@ function BestMatch ({
         return findView(outline, id);
       });
 
-      setViews(views.filter(Boolean) as View[]);
+      setViews(views.filter(item => {
+        if (!item) return false;
+        return !item.extra?.is_space;
+      }) as View[]);
       // eslint-disable-next-line
     } catch (e: any) {
       notify.error(e.message);
     }
 
     setLoading(false);
 
-  }, [currentWorkspaceId, outline, service, setLoading]);
+  }, [currentWorkspaceId, outline, service]);
 
   const debounceSearch = useMemo(() => {
     return debounce(handleSearch, 300);
@@ -58,7 +61,8 @@ function BestMatch ({
 
   return <ViewList
     views={views}
-    title={t('commandPalette.bestMatches')}
+    loading={loading}
+    title={t('searchResults')}
     onClose={onClose}
   />;
 }

src/components/app/search/ListItem.tsx

@@ -0,0 +1,147 @@
+import { View } from '@/application/types';
+import { findAncestors } from '@/components/_shared/outline/utils';
+import { RichTooltip } from '@/components/_shared/popover';
+import PageIcon from '@/components/_shared/view-icon/PageIcon';
+import { useAppHandlers, useAppOutline } from '@/components/app/app.hooks';
+import { IconButton, Paper, Tooltip } from '@mui/material';
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ReactComponent as MoreIcon } from '@/assets/more.svg';
+import { ReactComponent as PrivateIcon } from '@/assets/lock.svg';
+
+function ListItem ({
+  selectedView,
+  view,
+  onClick,
+  onClose,
+}: {
+  selectedView: string;
+  view: View;
+  onClick: () => void;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  const outline = useAppOutline();
+  const [open, setOpen] = React.useState<boolean>(false);
+  const toView = useAppHandlers().toView;
+
+  const ancestors = useMemo(() => {
+    if (!outline) return [];
+    return findAncestors(outline, view.view_id)?.slice(0, -1) || [];
+  }, [outline, view.view_id]);
+
+  const renderBreadcrumb = useCallback((view: View) => {
+    const isPrivate = view.is_private && view.extra?.is_space;
+
+    return <Tooltip
+      disableInteractive={true}
+      title={view.name}
+    >
+      <div
+        style={{
+          cursor: view.extra?.is_space ? 'default' : 'pointer',
+        }}
+        onClick={e => {
+          e.stopPropagation();
+          if (view.extra?.is_space) return;
+          void toView(view.view_id);
+          onClose();
+        }}
+        className={`text-text-caption max-w-[250px] overflow-hidden ${view.extra?.is_space ? '' : 'hover:underline'} flex items-center gap-2`}
+      >
+        <span className={'truncate'}>{view.name || t('menuAppHeader.defaultNewPageName')}</span>
+        {isPrivate &&
+          <div className={'h-4 w-4 text-base min-w-4 text-text-title opacity-80'}>
+            <PrivateIcon />
+          </div>
+        }
+      </div>
+    </Tooltip>;
+  }, [onClose, t, toView]);
+
+  const breadcrumbs = useMemo(() => {
+    if (!ancestors) return null;
+    if (ancestors.length <= 3) {
+      return ancestors.map((ancestor, index) => {
+        return <div
+          key={ancestor.view_id}
+          className={'flex items-center gap-2'}
+        >
+          {renderBreadcrumb(ancestor)}
+          {index !== ancestors.length - 1 && <span>{'/'}</span>}
+        </div>;
+      });
+    }
+
+    const first = renderBreadcrumb(ancestors[0]);
+    const last = renderBreadcrumb(ancestors[ancestors.length - 1]);
+
+    return <>
+      {first}
+      <div className={'flex items-center gap-2'}>
+        <span>{'/'}</span>
+        <RichTooltip
+          open={open}
+          placement="bottom"
+          onClose={() => setOpen(false)}
+          content={
+            <Paper className={'p-1'}>
+              {ancestors.slice(1, -1).map((ancestor) => {
+                return <div
+                  key={ancestor.view_id}
+                  className={'flex items-center w-full gap-2 p-1.5'}
+                >
+                  {renderBreadcrumb(ancestor)}
+                </div>;
+              })}
+            </Paper>
+          }
+        >
+          <IconButton
+            onClick={(e) => {
+              e.stopPropagation();
+              setOpen((prev) => !prev);
+            }}
+            size={'small'}
+          >
+            <MoreIcon />
+          </IconButton>
+        </RichTooltip>
+        <span>{'/'}</span>
+        {last}
+      </div>
+    </>;
+
+  }, [ancestors, open, renderBreadcrumb]);
+
+  return (
+    <div
+      data-item-id={view.view_id}
+      style={{
+        backgroundColor: selectedView === view.view_id ? 'var(--fill-list-active)' : undefined,
+      }}
+      onClick={onClick}
+      className={'flex border-t border-line-default w-full p-4 cursor-pointer hover:bg-fill-list-active gap-2'}
+    >
+      <div className={'w-7 h-7 border flex items-center justify-center rounded border-line-border'}>
+        <PageIcon
+          view={view}
+          className={'w-4 h-4 flex items-center justify-center'}
+        />
+      </div>
+      <div className={'flex flex-col py-[3px] gap-2 w-full'}>
+        <div className={'text-base font-medium flex-1 truncate'}>
+          {view.name.trim() || t('menuAppHeader.defaultNewPageName')}
+        </div>
+        {ancestors?.length ?
+          <div className={'text-sm text-text-caption overflow-hidden w-full gap-2 flex items-center'}>
+            {breadcrumbs}
+          </div> : null}
+
+      </div>
+
+    </div>
+  );
+}
+
+export default ListItem;

src/components/app/search/RecentViews.tsx

@@ -1,33 +1,25 @@
-import { useAppRecent } from '@/components/app/app.hooks';
+import { View } from '@/application/types';
 import ViewList from '@/components/app/search/ViewList';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function RecentViews ({
   onClose,
-  setLoading,
+  loading,
+  recentViews,
 }: {
   onClose: () => void;
-  setLoading: (loading: boolean) => void;
+  loading: boolean;
+  recentViews?: View[];
 }) {
-  const {
-    recentViews,
-    loadRecentViews,
-  } = useAppRecent();
-  const { t } = useTranslation();
 
-  useEffect(() => {
-    void (async () => {
-      setLoading(true);
-      await loadRecentViews?.();
-      setLoading(false);
-    })();
-  }, [loadRecentViews, setLoading]);
+  const { t } = useTranslation();
 
   return (
     <ViewList
+      loading={loading}
       views={recentViews}
-      title={t('commandPalette.recentHistory')}
+      title={t('recentPages')}
       onClose={onClose}
     />
   );