feat: add navigation path in quick search (#1920)

apps/web/src/components/affine/pinboard/pinboard-render/index.tsx

@@ -2,6 +2,7 @@ import { Input } from '@affine/component';
 import {
   ArrowDownSmallIcon,
   EdgelessIcon,
+  LevelIcon,
   PageIcon,
   PivotsIcon,
 } from '@blocksuite/icons';
@@ -19,17 +20,25 @@ import { OperationButton } from './OperationButton';
 const getIcon = (type: 'root' | 'edgeless' | 'page') => {
   switch (type) {
     case 'root':
-      return <PivotsIcon />;
+      return <PivotsIcon className="mode-icon" />;
     case 'edgeless':
-      return <EdgelessIcon />;
+      return <EdgelessIcon className="mode-icon" />;
     default:
-      return <PageIcon />;
+      return <PageIcon className="mode-icon" />;
   }
 };
 
 export const PinboardRender: PinboardNode['render'] = (
   node,
-  { isOver, onAdd, onDelete, collapsed, setCollapsed, isSelected },
+  {
+    isOver,
+    onAdd,
+    onDelete,
+    collapsed,
+    setCollapsed,
+    isSelected,
+    disableCollapse,
+  },
   renderProps
 ) => {
   const {
@@ -38,6 +47,7 @@ export const PinboardRender: PinboardNode['render'] = (
     currentMeta,
     metas = [],
     blockSuiteWorkspace,
+    asPath,
   } = renderProps!;
   const record = useAtomValue(workspacePreferredModeAtom);
   const { setPageTitle } = usePageMetaHelper(blockSuiteWorkspace);
@@ -60,17 +70,22 @@ export const PinboardRender: PinboardNode['render'] = (
         onMouseLeave={() => setIsHover(false)}
         isOver={isOver || isSelected}
         active={active}
+        disableCollapse={!!disableCollapse}
       >
-        <StyledCollapsedButton
-          collapse={collapsed}
-          show={!!node.children?.length}
-          onClick={e => {
-            e.stopPropagation();
-            setCollapsed(node.id, !collapsed);
-          }}
-        >
-          <ArrowDownSmallIcon />
-        </StyledCollapsedButton>
+        {!disableCollapse && (
+          <StyledCollapsedButton
+            collapse={collapsed}
+            show={!!node.children?.length}
+            onClick={e => {
+              e.stopPropagation();
+              setCollapsed(node.id, !collapsed);
+            }}
+          >
+            <ArrowDownSmallIcon />
+          </StyledCollapsedButton>
+        )}
+
+        {asPath && !isRoot ? <LevelIcon className="path-icon" /> : null}
         {getIcon(isRoot ? 'root' : record[node.id])}
 
         {showRename ? (

apps/web/src/components/affine/pinboard/styles.ts

@@ -32,13 +32,14 @@ export const StyledPinboard = styled('div')<{
   disable?: boolean;
   active?: boolean;
   isOver?: boolean;
-}>(({ disable = false, active = false, theme, isOver }) => {
+  disableCollapse?: boolean;
+}>(({ disableCollapse, disable = false, active = false, theme, isOver }) => {
   return {
     width: '100%',
     height: '32px',
     borderRadius: '8px',
     ...displayFlex('flex-start', 'center'),
-    padding: '0 2px 0 16px',
+    padding: disableCollapse ? '0 5px' : '0 2px 0 16px',
     position: 'relative',
     color: disable
       ? theme.colors.disableColor
@@ -54,7 +55,11 @@ export const StyledPinboard = styled('div')<{
       textAlign: 'left',
       ...textEllipsis(1),
     },
-    '> svg': {
+    '.path-icon': {
+      fontSize: '16px',
+      transform: 'translateY(-4px)',
+    },
+    '.mode-icon': {
       fontSize: '20px',
       marginRight: '8px',
       flexShrink: '0',