feat(core): cache navigation collapsed state (#13315)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Collapsible section state in navigation panels is now managed using a
unified path-based approach, enabling more consistent and centralized
control across desktop and mobile interfaces.
* The collapsed/expanded state of navigation sections and nodes is now
persistently tracked using hierarchical paths, improving reliability
across sessions and devices.
* Internal state management is streamlined, with local state replaced by
a shared service, resulting in more predictable navigation behavior.

* **Chores**
* Removed obsolete types and legacy section management logic for
improved maintainability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -229,7 +229,7 @@ export const RootAppSidebar = memo((): ReactElement => {
         <NavigationPanelTags />
         <NavigationPanelCollections />
         <CollapsibleSection
-          name="others"
+          path={['others']}
           title={t['com.affine.rootAppSidebar.others']()}
           contentStyle={{ padding: '6px 8px 0 8px' }}
         >

packages/frontend/core/src/desktop/components/navigation-panel/layouts/collapsible-section.tsx

@@ -1,8 +1,5 @@
 import { CategoryDivider } from '@affine/core/modules/app-sidebar/views';
-import {
+import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
-  type CollapsibleSectionName,
-  NavigationPanelService,
-} from '@affine/core/modules/navigation-panel';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { useLiveData, useService } from '@toeverything/infra';
 import clsx from 'clsx';
@@ -17,7 +14,7 @@ import {
 import { content, header, root } from './collapsible-section.css';
 
 interface CollapsibleSectionProps extends PropsWithChildren {
-  name: CollapsibleSectionName;
+  path: string[];
   title: string;
   actions?: ReactNode;
 
@@ -33,7 +30,7 @@ interface CollapsibleSectionProps extends PropsWithChildren {
 }
 
 export const CollapsibleSection = ({
-  name,
+  path,
   title,
   actions,
   children,
@@ -48,15 +45,15 @@ export const CollapsibleSection = ({
   contentClassName,
   contentStyle,
 }: CollapsibleSectionProps) => {
-  const section = useService(NavigationPanelService).sections[name];
+  const navigationPanelService = useService(NavigationPanelService);
 
-  const collapsed = useLiveData(section.collapsed$);
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
 
   const setCollapsed = useCallback(
     (v: boolean) => {
-      section.setCollapsed(v);
+      navigationPanelService.setCollapsed(path, v);
     },
-    [section]
+    [navigationPanelService, path]
   );
 
   return (

packages/frontend/core/src/desktop/components/navigation-panel/nodes/collection/index.tsx

@@ -11,6 +11,7 @@ import {
 } from '@affine/core/modules/collection';
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { GlobalContextService } from '@affine/core/modules/global-context';
+import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
@@ -47,6 +48,7 @@ export const NavigationPanelCollectionNode = ({
   operations: additionalOperations,
   canDrop,
   dropEffect,
+  parentPath,
 }: {
   collectionId: string;
 } & GenericNavigationPanelNode) => {
@@ -55,10 +57,21 @@ export const NavigationPanelCollectionNode = ({
     GlobalContextService,
     WorkspaceDialogService,
   });
+  const navigationPanelService = useService(NavigationPanelService);
   const active =
     useLiveData(globalContextService.globalContext.collectionId.$) ===
     collectionId;
-  const [collapsed, setCollapsed] = useState(true);
+  const path = useMemo(
+    () => [...(parentPath ?? []), `collection-${collectionId}`],
+    [parentPath, collectionId]
+  );
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
+  const setCollapsed = useCallback(
+    (value: boolean) => {
+      navigationPanelService.setCollapsed(path, value);
+    },
+    [navigationPanelService, path]
+  );
 
   const collectionService = useService(CollectionService);
   const collection = useLiveData(collectionService.collection$(collectionId));
@@ -160,7 +173,7 @@ export const NavigationPanelCollectionNode = ({
 
   const handleOpenCollapsed = useCallback(() => {
     setCollapsed(false);
-  }, []);
+  }, [setCollapsed]);
 
   const handleEditCollection = useCallback(() => {
     if (!collection) {
@@ -217,15 +230,20 @@ export const NavigationPanelCollectionNode = ({
       dropEffect={handleDropEffectOnCollection}
       data-testid={`navigation-panel-collection-${collectionId}`}
     >
-      <NavigationPanelCollectionNodeChildren collection={collection} />
+      <NavigationPanelCollectionNodeChildren
+        collection={collection}
+        path={path}
+      />
     </NavigationPanelTreeNode>
   );
 };
 
 const NavigationPanelCollectionNodeChildren = ({
   collection,
+  path,
 }: {
   collection: Collection;
+  path: string[];
 }) => {
   const t = useI18n();
   const { collectionService } = useServices({
@@ -264,6 +282,7 @@ const NavigationPanelCollectionNodeChildren = ({
         at: 'navigation-panel:collection:filtered-docs',
         collectionId: collection.id,
       }}
+      parentPath={path}
       operations={
         allowList.has(docId)
           ? [

packages/frontend/core/src/desktop/components/navigation-panel/nodes/doc/index.tsx

@@ -14,6 +14,7 @@ import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import { DocsSearchService } from '@affine/core/modules/docs-search';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { GlobalContextService } from '@affine/core/modules/global-context';
+import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
 import { GuardService } from '@affine/core/modules/permissions';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
@@ -46,6 +47,7 @@ export const NavigationPanelDocNode = ({
   canDrop,
   operations: additionalOperations,
   dropEffect,
+  parentPath,
 }: {
   docId: string;
   isLinked?: boolean;
@@ -67,11 +69,22 @@ export const NavigationPanelDocNode = ({
     FeatureFlagService,
     GuardService,
   });
+  const navigationPanelService = useService(NavigationPanelService);
   const { appSettings } = useAppSettingHelper();
 
   const active =
     useLiveData(globalContextService.globalContext.docId.$) === docId;
-  const [collapsed, setCollapsed] = useState(true);
+  const path = useMemo(
+    () => [...(parentPath ?? []), `doc-${docId}`],
+    [parentPath, docId]
+  );
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
+  const setCollapsed = useCallback(
+    (value: boolean) => {
+      navigationPanelService.setCollapsed(path, value);
+    },
+    [navigationPanelService, path]
+  );
   const isCollapsed = appSettings.showLinkedDocInSidebar ? collapsed : true;
 
   const docRecord = useLiveData(docsService.list.doc$(docId));
@@ -227,7 +240,7 @@ export const NavigationPanelDocNode = ({
         openInfoModal: () => workspaceDialogService.open('doc-info', { docId }),
         openNodeCollapsed: () => setCollapsed(false),
       }),
-      [docId, workspaceDialogService]
+      [docId, setCollapsed, workspaceDialogService]
     )
   );
 
@@ -302,6 +315,7 @@ export const NavigationPanelDocNode = ({
                       at: 'navigation-panel:doc:linked-docs',
                       docId,
                     }}
+                    parentPath={path}
                     isLinked
                   />
                 ))

packages/frontend/core/src/desktop/components/navigation-panel/nodes/folder/index.tsx

@@ -13,6 +13,7 @@ import { usePageHelper } from '@affine/core/blocksuite/block-suite-page-list/uti
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/favorite';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
+import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
 import {
   type FolderNode,
   OrganizeService,
@@ -31,7 +32,7 @@ import {
   RemoveFolderIcon,
   TagsIcon,
 } from '@blocksuite/icons/rc';
-import { useLiveData, useServices } from '@toeverything/infra';
+import { useLiveData, useService, useServices } from '@toeverything/infra';
 import { difference } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
 
@@ -57,6 +58,7 @@ export const NavigationPanelFolderNode = ({
   dropEffect,
   canDrop,
   reorderable,
+  parentPath,
 }: {
   defaultRenaming?: boolean;
   nodeId: string;
@@ -104,6 +106,7 @@ export const NavigationPanelFolderNode = ({
         dropEffect={dropEffect}
         reorderable={reorderable}
         canDrop={canDrop}
+        parentPath={parentPath}
       />
     );
   } else if (type === 'doc') {
@@ -117,6 +120,7 @@ export const NavigationPanelFolderNode = ({
           canDrop={canDrop}
           dropEffect={dropEffect}
           operations={additionalOperations}
+          parentPath={parentPath}
         />
       )
     );
@@ -131,6 +135,7 @@ export const NavigationPanelFolderNode = ({
           reorderable={reorderable}
           dropEffect={dropEffect}
           operations={additionalOperations}
+          parentPath={parentPath}
         />
       )
     );
@@ -145,6 +150,7 @@ export const NavigationPanelFolderNode = ({
           reorderable
           dropEffect={dropEffect}
           operations={additionalOperations}
+          parentPath={parentPath}
         />
       )
     );
@@ -177,6 +183,7 @@ const NavigationPanelFolderNodeFolder = ({
   canDrop,
   dropEffect,
   reorderable,
+  parentPath,
 }: {
   defaultRenaming?: boolean;
   node: FolderNode;
@@ -189,11 +196,22 @@ const NavigationPanelFolderNodeFolder = ({
       FeatureFlagService,
       WorkspaceDialogService,
     });
+  const navigationPanelService = useService(NavigationPanelService);
   const name = useLiveData(node.name$);
   const enableEmojiIcon = useLiveData(
     featureFlagService.flags.enable_emoji_folder_icon.$
   );
-  const [collapsed, setCollapsed] = useState(true);
+  const path = useMemo(
+    () => [...(parentPath ?? []), `folder-${node.id}`],
+    [parentPath, node.id]
+  );
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
+  const setCollapsed = useCallback(
+    (value: boolean) => {
+      navigationPanelService.setCollapsed(path, value);
+    },
+    [navigationPanelService, path]
+  );
   const [newFolderId, setNewFolderId] = useState<string | null>(null);
 
   const { createPage } = usePageHelper(
@@ -575,7 +593,7 @@ const NavigationPanelFolderNodeFolder = ({
       target: 'doc',
     });
     setCollapsed(false);
-  }, [createPage, node]);
+  }, [createPage, node, setCollapsed]);
 
   const handleCreateSubfolder = useCallback(() => {
     const newFolderId = node.createFolder(
@@ -585,7 +603,7 @@ const NavigationPanelFolderNodeFolder = ({
     track.$.navigationPanel.organize.createOrganizeItem({ type: 'folder' });
     setCollapsed(false);
     setNewFolderId(newFolderId);
-  }, [node, t]);
+  }, [node, setCollapsed, t]);
 
   const handleAddToFolder = useCallback(
     (type: 'doc' | 'collection' | 'tag') => {
@@ -628,7 +646,7 @@ const NavigationPanelFolderNodeFolder = ({
         target: type,
       });
     },
-    [children, node, workspaceDialogService]
+    [children, node, setCollapsed, workspaceDialogService]
   );
 
   const folderOperations = useMemo(() => {
@@ -761,14 +779,17 @@ const NavigationPanelFolderNodeFolder = ({
     [t]
   );
 
-  const handleCollapsedChange = useCallback((collapsed: boolean) => {
+  const handleCollapsedChange = useCallback(
-    if (collapsed) {
+    (collapsed: boolean) => {
-      setNewFolderId(null); // reset new folder id to clear the renaming state
+      if (collapsed) {
-      setCollapsed(true);
+        setNewFolderId(null); // reset new folder id to clear the renaming state
-    } else {
+        setCollapsed(true);
-      setCollapsed(false);
+      } else {
-    }
+        setCollapsed(false);
-  }, []);
+      }
+    },
+    [setCollapsed]
+  );
 
   return (
     <NavigationPanelTreeNode
@@ -804,6 +825,7 @@ const NavigationPanelFolderNodeFolder = ({
             at: 'navigation-panel:organize:folder-node',
             nodeId: child.id as string,
           }}
+          parentPath={path}
         />
       ))}
     </NavigationPanelTreeNode>

packages/frontend/core/src/desktop/components/navigation-panel/nodes/tag/index.tsx

@@ -4,14 +4,15 @@ import {
   toast,
 } from '@affine/component';
 import { GlobalContextService } from '@affine/core/modules/global-context';
+import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
 import type { Tag } from '@affine/core/modules/tag';
 import { TagService } from '@affine/core/modules/tag';
 import type { AffineDNDData } from '@affine/core/types/dnd';
 import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
-import { useLiveData, useServices } from '@toeverything/infra';
+import { useLiveData, useService, useServices } from '@toeverything/infra';
 import clsx from 'clsx';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import {
   NavigationPanelTreeNode,
@@ -31,6 +32,7 @@ export const NavigationPanelTagNode = ({
   operations: additionalOperations,
   dropEffect,
   canDrop,
+  parentPath,
 }: {
   tagId: string;
 } & GenericNavigationPanelNode) => {
@@ -39,9 +41,20 @@ export const NavigationPanelTagNode = ({
     TagService,
     GlobalContextService,
   });
+  const navigationPanelService = useService(NavigationPanelService);
   const active =
     useLiveData(globalContextService.globalContext.tagId.$) === tagId;
-  const [collapsed, setCollapsed] = useState(true);
+  const path = useMemo(
+    () => [...(parentPath ?? []), `tag-${tagId}`],
+    [parentPath, tagId]
+  );
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
+  const setCollapsed = useCallback(
+    (value: boolean) => {
+      navigationPanelService.setCollapsed(path, value);
+    },
+    [navigationPanelService, path]
+  );
 
   const tagRecord = useLiveData(tagService.tagList.tagByTagId$(tagId));
   const tagColor = useLiveData(tagRecord?.color$);
@@ -154,7 +167,7 @@ export const NavigationPanelTagNode = ({
       () => ({
         openNodeCollapsed: () => setCollapsed(false),
       }),
-      []
+      [setCollapsed]
     )
   );
 
@@ -188,7 +201,7 @@ export const NavigationPanelTagNode = ({
       dropEffect={handleDropEffectOnTag}
       data-testid={`navigation-panel-tag-${tagId}`}
     >
-      <NavigationPanelTagNodeDocs tag={tagRecord} />
+      <NavigationPanelTagNodeDocs tag={tagRecord} path={path} />
     </NavigationPanelTreeNode>
   );
 };
@@ -198,7 +211,13 @@ export const NavigationPanelTagNode = ({
  * so we split the tag node children into a separate component,
  * so it won't be rendered when the tag node is collapsed.
  */
-export const NavigationPanelTagNodeDocs = ({ tag }: { tag: Tag }) => {
+export const NavigationPanelTagNodeDocs = ({
+  tag,
+  path,
+}: {
+  tag: Tag;
+  path: string[];
+}) => {
   const tagDocIds = useLiveData(tag.pageIds$);
 
   return tagDocIds.map(docId => (
@@ -209,6 +228,7 @@ export const NavigationPanelTagNodeDocs = ({ tag }: { tag: Tag }) => {
       location={{
         at: 'navigation-panel:tags:docs',
       }}
+      parentPath={path}
     />
   ));
 };

packages/frontend/core/src/desktop/components/navigation-panel/nodes/types.ts

@@ -46,4 +46,9 @@ export interface GenericNavigationPanelNode {
    * The drop effect to be used when an element is dropped over the node.
    */
   dropEffect?: NavigationPanelTreeNodeDropEffect;
+  /**
+   * The path segments to the parent node in the navigation tree.
+   * Used to persist the node's collapsed/expanded state in cache storage.
+   */
+  parentPath: string[];
 }

packages/frontend/core/src/desktop/components/navigation-panel/sections/collections/index.tsx

@@ -6,7 +6,7 @@ import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { AddCollectionIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useServices } from '@toeverything/infra';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { CollapsibleSection } from '../../layouts/collapsible-section';
 import { NavigationPanelCollectionNode } from '../../nodes/collection';
@@ -22,10 +22,9 @@ export const NavigationPanelCollections = () => {
       WorkbenchService,
       NavigationPanelService,
     });
-  const navigationPanelSection = navigationPanelService.sections.collections;
   const collections = useLiveData(collectionService.collections$);
   const { openPromptModal } = usePromptModal();
-
+  const path = useMemo(() => ['collections'], []);
   const handleCreateCollection = useCallback(() => {
     openPromptModal({
       title: t['com.affine.editCollection.saveCollection'](),
@@ -49,20 +48,21 @@ export const NavigationPanelCollections = () => {
           type: 'collection',
         });
         workbenchService.workbench.openCollection(id);
-        navigationPanelSection.setCollapsed(false);
+        navigationPanelService.setCollapsed(path, false);
       },
     });
   }, [
     collectionService,
-    navigationPanelSection,
+    navigationPanelService,
     openPromptModal,
+    path,
     t,
     workbenchService.workbench,
   ]);
 
   return (
     <CollapsibleSection
-      name="collections"
+      path={path}
       testId="navigation-panel-collections"
       title={t['com.affine.rootAppSidebar.collections']()}
       actions={
@@ -89,6 +89,7 @@ export const NavigationPanelCollections = () => {
             location={{
               at: 'navigation-panel:collection:list',
             }}
+            parentPath={path}
           />
         ))}
       </NavigationPanelTreeRoot>

packages/frontend/core/src/desktop/components/navigation-panel/sections/favorites/index.tsx

@@ -17,7 +17,7 @@ import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { PlusIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useServices } from '@toeverything/infra';
-import { type MouseEventHandler, useCallback } from 'react';
+import { type MouseEventHandler, useCallback, useMemo } from 'react';
 
 import { CollapsibleSection } from '../../layouts/collapsible-section';
 import { NavigationPanelCollectionNode } from '../../nodes/collection';
@@ -41,7 +41,7 @@ export const NavigationPanelFavorites = () => {
       NavigationPanelService,
     });
 
-  const navigationPanelSection = navigationPanelService.sections.favorites;
+  const path = useMemo(() => ['favorites'], []);
 
   const favorites = useLiveData(favoriteService.favoriteList.sortedList$);
 
@@ -71,10 +71,10 @@ export const NavigationPanelFavorites = () => {
         track.$.navigationPanel.favorites.drop({
           type: data.source.data.entity.type,
         });
-        navigationPanelSection.setCollapsed(false);
+        navigationPanelService.setCollapsed(path, false);
       }
     },
-    [navigationPanelSection, favoriteService.favoriteList]
+    [navigationPanelService, favoriteService.favoriteList, path]
   );
 
   const handleCreateNewFavoriteDoc: MouseEventHandler = useCallback(
@@ -85,9 +85,9 @@ export const NavigationPanelFavorites = () => {
         newDoc.id,
         favoriteService.favoriteList.indexAt('before')
       );
-      navigationPanelSection.setCollapsed(false);
+      navigationPanelService.setCollapsed(path, false);
     },
-    [createPage, navigationPanelSection, favoriteService.favoriteList]
+    [createPage, navigationPanelService, favoriteService.favoriteList, path]
   );
 
   const handleOnChildrenDrop = useCallback(
@@ -162,7 +162,7 @@ export const NavigationPanelFavorites = () => {
 
   return (
     <CollapsibleSection
-      name="favorites"
+      path={path}
       title={t['com.affine.rootAppSidebar.favorites']()}
       headerRef={dropTargetRef}
       testId="navigation-panel-favorites"
@@ -202,6 +202,7 @@ export const NavigationPanelFavorites = () => {
             key={favorite.id}
             favorite={favorite}
             onDrop={handleOnChildrenDrop}
+            parentPath={path}
           />
         ))}
       </NavigationPanelTreeRoot>
@@ -215,11 +216,13 @@ const childLocation = {
 const NavigationPanelFavoriteNode = ({
   favorite,
   onDrop,
+  parentPath,
 }: {
   favorite: {
     id: string;
     type: FavoriteSupportTypeUnion;
   };
+  parentPath: string[];
   onDrop: (
     favorite: {
       id: string;
@@ -242,6 +245,7 @@ const NavigationPanelFavoriteNode = ({
       onDrop={handleOnChildrenDrop}
       dropEffect={favoriteChildrenDropEffect}
       canDrop={favoriteChildrenCanDrop}
+      parentPath={parentPath}
     />
   ) : favorite.type === 'tag' ? (
     <NavigationPanelTagNode
@@ -251,6 +255,7 @@ const NavigationPanelFavoriteNode = ({
       onDrop={handleOnChildrenDrop}
       dropEffect={favoriteChildrenDropEffect}
       canDrop={favoriteChildrenCanDrop}
+      parentPath={parentPath}
     />
   ) : favorite.type === 'folder' ? (
     <NavigationPanelFolderNode
@@ -260,6 +265,7 @@ const NavigationPanelFavoriteNode = ({
       onDrop={handleOnChildrenDrop}
       dropEffect={favoriteChildrenDropEffect}
       canDrop={favoriteChildrenCanDrop}
+      parentPath={parentPath}
     />
   ) : (
     <NavigationPanelCollectionNode
@@ -269,6 +275,7 @@ const NavigationPanelFavoriteNode = ({
       onDrop={handleOnChildrenDrop}
       dropEffect={favoriteChildrenDropEffect}
       canDrop={favoriteChildrenCanDrop}
+      parentPath={parentPath}
     />
   );
 };

packages/frontend/core/src/desktop/components/navigation-panel/sections/migration-favorites/index.tsx

@@ -5,7 +5,7 @@ import { Trans, useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { BroomIcon, HelpIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useServices } from '@toeverything/infra';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { CollapsibleSection } from '../../layouts/collapsible-section';
 import { NavigationPanelCollectionNode } from '../../nodes/collection';
@@ -25,6 +25,7 @@ export const NavigationPanelMigrationFavorites = () => {
   const trashDocs = useLiveData(docsService.list.trashDocs$);
   const migrated = useLiveData(migrationFavoriteItemsAdapter.migrated$);
   const { openConfirmModal } = useConfirmModal();
+  const path = useMemo(() => ['migration-favorites'], []);
 
   const favorites = useLiveData(
     migrationFavoriteItemsAdapter.favorites$.map(favs => {
@@ -99,7 +100,7 @@ export const NavigationPanelMigrationFavorites = () => {
 
   return (
     <CollapsibleSection
-      name="migrationFavorites"
+      path={path}
       className={styles.container}
       title={t['com.affine.rootAppSidebar.migration-data']()}
       actions={
@@ -126,6 +127,7 @@ export const NavigationPanelMigrationFavorites = () => {
           <NavigationPanelMigrationFavoriteNode
             key={favorite.id + ':' + i}
             favorite={favorite}
+            parentPath={path}
           />
         ))}
       </NavigationPanelTreeRoot>
@@ -138,11 +140,13 @@ const childLocation = {
 };
 const NavigationPanelMigrationFavoriteNode = ({
   favorite,
+  parentPath,
 }: {
   favorite: {
     id: string;
     type: 'collection' | 'doc';
   };
+  parentPath: string[];
 }) => {
   return favorite.type === 'doc' ? (
     <NavigationPanelDocNode
@@ -151,6 +155,7 @@ const NavigationPanelMigrationFavoriteNode = ({
       location={childLocation}
       reorderable={false}
       canDrop={false}
+      parentPath={parentPath}
     />
   ) : (
     <NavigationPanelCollectionNode
@@ -159,6 +164,7 @@ const NavigationPanelMigrationFavoriteNode = ({
       location={childLocation}
       reorderable={false}
       canDrop={false}
+      parentPath={parentPath}
     />
   );
 };

packages/frontend/core/src/desktop/components/navigation-panel/sections/organize/index.tsx

@@ -27,10 +27,9 @@ export const NavigationPanelOrganize = () => {
     OrganizeService,
     NavigationPanelService,
   });
-  const navigationPanelSection = navigationPanelService.sections.organize;
+  const path = useMemo(() => ['organize'], []);
-  const collapsed = useLiveData(navigationPanelSection.collapsed$);
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
   const [newFolderId, setNewFolderId] = useState<string | null>(null);
-
   const t = useI18n();
 
   const folderTree = organizeService.folderTree;
@@ -46,9 +45,9 @@ export const NavigationPanelOrganize = () => {
     );
     track.$.navigationPanel.organize.createOrganizeItem({ type: 'folder' });
     setNewFolderId(newFolderId);
-    navigationPanelSection.setCollapsed(false);
+    navigationPanelService.setCollapsed(path, false);
     return newFolderId;
-  }, [navigationPanelSection, rootFolder]);
+  }, [navigationPanelService, path, rootFolder]);
 
   const handleOnChildrenDrop = useCallback(
     (data: DropTargetDropEvent<AffineDNDData>, node?: FolderNode) => {
@@ -105,7 +104,7 @@ export const NavigationPanelOrganize = () => {
 
   return (
     <CollapsibleSection
-      name="organize"
+      path={path}
       title={t['com.affine.rootAppSidebar.organize']()}
       actions={
         <IconButton
@@ -141,6 +140,7 @@ export const NavigationPanelOrganize = () => {
               at: 'navigation-panel:organize:folder-node',
               nodeId: child.id as string,
             }}
+            parentPath={path}
           />
         ))}
       </NavigationPanelTreeRoot>

packages/frontend/core/src/desktop/components/navigation-panel/sections/tags/index.tsx

@@ -5,7 +5,7 @@ import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { AddTagIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useServices } from '@toeverything/infra';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { CollapsibleSection } from '../../layouts/collapsible-section';
 import { NavigationPanelTagNode } from '../../nodes/tag';
@@ -19,8 +19,8 @@ export const NavigationPanelTags = () => {
     TagService,
     NavigationPanelService,
   });
-  const navigationPanelSection = navigationPanelService.sections.tags;
+  const path = useMemo(() => ['tags'], []);
-  const collapsed = useLiveData(navigationPanelSection.collapsed$);
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
   const [creating, setCreating] = useState(false);
   const tags = useLiveData(tagService.tagList.tags$);
 
@@ -30,9 +30,9 @@ export const NavigationPanelTags = () => {
     (name: string) => {
       tagService.tagList.createTag(name, tagService.randomTagColor());
       track.$.navigationPanel.organize.createOrganizeItem({ type: 'tag' });
-      navigationPanelSection.setCollapsed(false);
+      navigationPanelService.setCollapsed(path, false);
     },
-    [navigationPanelSection, tagService]
+    [navigationPanelService, path, tagService]
   );
 
   useEffect(() => {
@@ -45,7 +45,7 @@ export const NavigationPanelTags = () => {
 
   return (
     <CollapsibleSection
-      name="tags"
+      path={path}
       testId="navigation-panel-tags"
       headerClassName={styles.draggedOverHighlight}
       title={t['com.affine.rootAppSidebar.tags']()}
@@ -81,6 +81,7 @@ export const NavigationPanelTags = () => {
             location={{
               at: 'navigation-panel:tags:list',
             }}
+            parentPath={path}
           />
         ))}
       </NavigationPanelTreeRoot>

packages/frontend/core/src/mobile/components/navigation/layouts/collapsible-section.tsx

@@ -1,7 +1,4 @@
-import {
+import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
-  type CollapsibleSectionName,
-  NavigationPanelService,
-} from '@affine/core/modules/navigation-panel';
 import { ToggleRightIcon } from '@blocksuite/icons/rc';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -22,7 +19,7 @@ import {
 } from './collapsible-section.css';
 
 interface CollapsibleSectionProps extends HTMLAttributes<HTMLDivElement> {
-  name: CollapsibleSectionName;
+  path: string[];
   title: string;
   actions?: ReactNode;
   testId?: string;
@@ -76,7 +73,7 @@ const CollapsibleSectionTrigger = forwardRef<
 });
 
 export const CollapsibleSection = ({
-  name,
+  path,
   title,
   actions,
   testId,
@@ -86,12 +83,12 @@ export const CollapsibleSection = ({
   children,
   ...attrs
 }: CollapsibleSectionProps) => {
-  const section = useService(NavigationPanelService).sections[name];
+  const navigationPanelService = useService(NavigationPanelService);
-  const collapsed = useLiveData(section.collapsed$);
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
 
   const setCollapsed = useCallback(
-    (v: boolean) => section.setCollapsed(v),
+    (v: boolean) => navigationPanelService.setCollapsed(path, v),
-    [section]
+    [navigationPanelService, path]
   );
 
   return (

packages/frontend/core/src/mobile/components/navigation/nodes/collection/index.tsx

@@ -6,11 +6,12 @@ import {
 } from '@affine/core/modules/collection';
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { GlobalContextService } from '@affine/core/modules/global-context';
+import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
 import { ShareDocsListService } from '@affine/core/modules/share-doc';
 import { useI18n } from '@affine/i18n';
 import track from '@affine/track';
 import { FilterMinusIcon, ViewLayersIcon } from '@blocksuite/icons/rc';
-import { useLiveData, useServices } from '@toeverything/infra';
+import { useLiveData, useService, useServices } from '@toeverything/infra';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { AddItemPlaceholder } from '../../layouts/add-item-placeholder';
@@ -26,9 +27,11 @@ const CollectionIcon = () => <ViewLayersIcon />;
 export const NavigationPanelCollectionNode = ({
   collectionId,
   operations: additionalOperations,
+  parentPath,
 }: {
   collectionId: string;
   operations?: NodeOperation[];
+  parentPath: string[];
 }) => {
   const t = useI18n();
   const { globalContextService, collectionService, workspaceDialogService } =
@@ -37,17 +40,28 @@ export const NavigationPanelCollectionNode = ({
       CollectionService,
       WorkspaceDialogService,
     });
+  const navigationPanelService = useService(NavigationPanelService);
   const active =
     useLiveData(globalContextService.globalContext.collectionId.$) ===
     collectionId;
-  const [collapsed, setCollapsed] = useState(true);
+  const path = useMemo(
+    () => [...parentPath, `collection-${collectionId}`],
+    [parentPath, collectionId]
+  );
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
+  const setCollapsed = useCallback(
+    (value: boolean) => {
+      navigationPanelService.setCollapsed(path, value);
+    },
+    [navigationPanelService, path]
+  );
 
   const collection = useLiveData(collectionService.collection$(collectionId));
   const name = useLiveData(collection?.name$);
 
   const handleOpenCollapsed = useCallback(() => {
     setCollapsed(false);
-  }, []);
+  }, [setCollapsed]);
 
   const handleEditCollection = useCallback(() => {
     if (!collection) {
@@ -95,6 +109,7 @@ export const NavigationPanelCollectionNode = ({
       <NavigationPanelCollectionNodeChildren
         collection={collection}
         onAddDoc={handleAddDocToCollection}
+        path={path}
       />
     </NavigationPanelTreeNode>
   );
@@ -103,9 +118,11 @@ export const NavigationPanelCollectionNode = ({
 const NavigationPanelCollectionNodeChildren = ({
   collection,
   onAddDoc,
+  path,
 }: {
   collection: Collection;
   onAddDoc?: () => void;
+  path: string[];
 }) => {
   const t = useI18n();
   const { shareDocsListService, collectionService } = useServices({
@@ -147,6 +164,7 @@ const NavigationPanelCollectionNodeChildren = ({
         <NavigationPanelDocNode
           key={docId}
           docId={docId}
+          parentPath={path}
           operations={
             allowList
               ? [

packages/frontend/core/src/mobile/components/navigation/nodes/doc/index.tsx

@@ -7,6 +7,7 @@ import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
 import { DocsSearchService } from '@affine/core/modules/docs-search';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { GlobalContextService } from '@affine/core/modules/global-context';
+import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
 import { useI18n } from '@affine/i18n';
 import {
   LiveData,
@@ -29,10 +30,12 @@ export const NavigationPanelDocNode = ({
   docId,
   isLinked,
   operations: additionalOperations,
+  parentPath,
 }: {
   docId: string;
   isLinked?: boolean;
   operations?: NodeOperation[];
+  parentPath: string[];
 }) => {
   const t = useI18n();
   const {
@@ -48,9 +51,20 @@ export const NavigationPanelDocNode = ({
     DocDisplayMetaService,
     FeatureFlagService,
   });
+  const navigationPanelService = useService(NavigationPanelService);
   const active =
     useLiveData(globalContextService.globalContext.docId.$) === docId;
-  const [collapsed, setCollapsed] = useState(true);
+  const path = useMemo(
+    () => [...parentPath, `doc-${docId}`],
+    [parentPath, docId]
+  );
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
+  const setCollapsed = useCallback(
+    (value: boolean) => {
+      navigationPanelService.setCollapsed(path, value);
+    },
+    [navigationPanelService, path]
+  );
 
   const docRecord = useLiveData(docsService.list.doc$(docId));
   const DocIcon = useLiveData(
@@ -103,7 +117,7 @@ export const NavigationPanelDocNode = ({
       openInfoModal: () => workspaceDialogService.open('doc-info', { docId }),
       openNodeCollapsed: () => setCollapsed(false),
     }),
-    [docId, workspaceDialogService]
+    [docId, setCollapsed, workspaceDialogService]
   );
   const operations = useNavigationPanelDocNodeOperationsMenu(docId, option);
   const { handleAddLinkedPage } = useNavigationPanelDocNodeOperations(
@@ -150,6 +164,7 @@ export const NavigationPanelDocNode = ({
                   key={`${child.docId}-${index}`}
                   docId={child.docId}
                   isLinked
+                  parentPath={path}
                 />
               ))
             : null

packages/frontend/core/src/mobile/components/navigation/nodes/folder/index.tsx

@@ -14,6 +14,7 @@ import type {
 import { WorkspaceDialogService } from '@affine/core/modules/dialogs';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/favorite';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
+import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
 import {
   type FolderNode,
   OrganizeService,
@@ -31,9 +32,9 @@ import {
   RemoveFolderIcon,
   TagsIcon,
 } from '@blocksuite/icons/rc';
-import { useLiveData, useServices } from '@toeverything/infra';
+import { useLiveData, useService, useServices } from '@toeverything/infra';
 import { difference } from 'lodash-es';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { AddItemPlaceholder } from '../../layouts/add-item-placeholder';
 import { NavigationPanelTreeNode } from '../../tree/node';
@@ -46,11 +47,13 @@ import { FavoriteFolderOperation } from './operations';
 export const NavigationPanelFolderNode = ({
   nodeId,
   operations,
+  parentPath,
 }: {
   nodeId: string;
   operations?:
     | NodeOperation[]
     | ((type: string, node: FolderNode) => NodeOperation[]);
+  parentPath: string[];
 }) => {
   const { organizeService } = useServices({
     OrganizeService,
@@ -78,24 +81,34 @@ export const NavigationPanelFolderNode = ({
       <NavigationPanelFolderNodeFolder
         node={node}
         operations={additionalOperations}
+        parentPath={parentPath}
       />
     );
   }
   if (!data) return null;
   if (type === 'doc') {
     return (
-      <NavigationPanelDocNode docId={data} operations={additionalOperations} />
+      <NavigationPanelDocNode
+        docId={data}
+        operations={additionalOperations}
+        parentPath={parentPath}
+      />
     );
   } else if (type === 'collection') {
     return (
       <NavigationPanelCollectionNode
         collectionId={data}
         operations={additionalOperations}
+        parentPath={parentPath}
       />
     );
   } else if (type === 'tag') {
     return (
-      <NavigationPanelTagNode tagId={data} operations={additionalOperations} />
+      <NavigationPanelTagNode
+        tagId={data}
+        operations={additionalOperations}
+        parentPath={parentPath}
+      />
     );
   }
 
@@ -119,9 +132,11 @@ const NavigationPanelFolderIcon: NavigationPanelTreeNodeIcon = ({
 const NavigationPanelFolderNodeFolder = ({
   node,
   operations: additionalOperations,
+  parentPath,
 }: {
   node: FolderNode;
   operations?: NodeOperation[];
+  parentPath: string[];
 }) => {
   const t = useI18n();
   const { workspaceService, featureFlagService, workspaceDialogService } =
@@ -135,7 +150,18 @@ const NavigationPanelFolderNodeFolder = ({
   const enableEmojiIcon = useLiveData(
     featureFlagService.flags.enable_emoji_folder_icon.$
   );
-  const [collapsed, setCollapsed] = useState(true);
+  const navigationPanelService = useService(NavigationPanelService);
+  const path = useMemo(
+    () => [...parentPath, `folder-${node.id}`],
+    [parentPath, node.id]
+  );
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
+  const setCollapsed = useCallback(
+    (value: boolean) => {
+      navigationPanelService.setCollapsed(path, value);
+    },
+    [navigationPanelService, path]
+  );
 
   const { createPage } = usePageHelper(
     workspaceService.workspace.docCollection
@@ -171,7 +197,7 @@ const NavigationPanelFolderNodeFolder = ({
       target: 'doc',
     });
     setCollapsed(false);
-  }, [createPage, node]);
+  }, [createPage, node, setCollapsed]);
 
   const handleCreateSubfolder = useCallback(
     (name: string) => {
@@ -179,7 +205,7 @@ const NavigationPanelFolderNodeFolder = ({
       track.$.navigationPanel.organize.createOrganizeItem({ type: 'folder' });
       setCollapsed(false);
     },
-    [node]
+    [node, setCollapsed]
   );
 
   const handleAddToFolder = useCallback(
@@ -223,7 +249,7 @@ const NavigationPanelFolderNodeFolder = ({
         target: type,
       });
     },
-    [children, node, workspaceDialogService]
+    [children, node, setCollapsed, workspaceDialogService]
   );
 
   const createSubTipRenderer = useCallback(
@@ -388,13 +414,16 @@ const NavigationPanelFolderNodeFolder = ({
     [t]
   );
 
-  const handleCollapsedChange = useCallback((collapsed: boolean) => {
+  const handleCollapsedChange = useCallback(
-    if (collapsed) {
+    (collapsed: boolean) => {
-      setCollapsed(true);
+      if (collapsed) {
-    } else {
+        setCollapsed(true);
-      setCollapsed(false);
+      } else {
-    }
+        setCollapsed(false);
-  }, []);
+      }
+    },
+    [setCollapsed]
+  );
 
   return (
     <NavigationPanelTreeNode
@@ -413,6 +442,7 @@ const NavigationPanelFolderNodeFolder = ({
           key={child.id}
           nodeId={child.id as string}
           operations={childrenOperations}
+          parentPath={path}
         />
       ))}
       <AddItemPlaceholder

packages/frontend/core/src/mobile/components/navigation/nodes/tag/index.tsx

@@ -1,11 +1,12 @@
 import type { NodeOperation } from '@affine/core/desktop/components/navigation-panel';
 import { GlobalContextService } from '@affine/core/modules/global-context';
+import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
 import type { Tag } from '@affine/core/modules/tag';
 import { TagService } from '@affine/core/modules/tag';
 import { useI18n } from '@affine/i18n';
-import { useLiveData, useServices } from '@toeverything/infra';
+import { useLiveData, useService, useServices } from '@toeverything/infra';
 import clsx from 'clsx';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { AddItemPlaceholder } from '../../layouts/add-item-placeholder';
 import { NavigationPanelTreeNode } from '../../tree/node';
@@ -19,18 +20,31 @@ import * as styles from './styles.css';
 export const NavigationPanelTagNode = ({
   tagId,
   operations: additionalOperations,
+  parentPath,
 }: {
   tagId: string;
   operations?: NodeOperation[];
+  parentPath: string[];
 }) => {
   const t = useI18n();
   const { tagService, globalContextService } = useServices({
     TagService,
     GlobalContextService,
   });
+  const navigationPanelService = useService(NavigationPanelService);
   const active =
     useLiveData(globalContextService.globalContext.tagId.$) === tagId;
-  const [collapsed, setCollapsed] = useState(true);
+  const path = useMemo(
+    () => [...parentPath, `tag-${tagId}`],
+    [parentPath, tagId]
+  );
+  const collapsed = useLiveData(navigationPanelService.collapsed$(path));
+  const setCollapsed = useCallback(
+    (value: boolean) => {
+      navigationPanelService.setCollapsed(path, value);
+    },
+    [navigationPanelService, path]
+  );
 
   const tagRecord = useLiveData(tagService.tagList.tagByTagId$(tagId));
   const tagColor = useLiveData(tagRecord?.color$);
@@ -57,7 +71,7 @@ export const NavigationPanelTagNode = ({
     () => ({
       openNodeCollapsed: () => setCollapsed(false),
     }),
-    []
+    [setCollapsed]
   );
   const operations = useNavigationPanelTagNodeOperationsMenu(tagId, option);
   const { handleNewDoc } = useNavigationPanelTagNodeOperations(tagId, option);
@@ -86,7 +100,11 @@ export const NavigationPanelTagNode = ({
       aria-label={tagName}
       data-role="navigation-panel-tag"
     >
-      <NavigationPanelTagNodeDocs tag={tagRecord} onNewDoc={handleNewDoc} />
+      <NavigationPanelTagNodeDocs
+        tag={tagRecord}
+        onNewDoc={handleNewDoc}
+        path={path}
+      />
     </NavigationPanelTreeNode>
   );
 };
@@ -99,9 +117,11 @@ export const NavigationPanelTagNode = ({
 export const NavigationPanelTagNodeDocs = ({
   tag,
   onNewDoc,
+  path,
 }: {
   tag: Tag;
   onNewDoc?: () => void;
+  path: string[];
 }) => {
   const t = useI18n();
   const tagDocIds = useLiveData(tag.pageIds$);
@@ -109,7 +129,7 @@ export const NavigationPanelTagNodeDocs = ({
   return (
     <>
       {tagDocIds.map(docId => (
-        <NavigationPanelDocNode key={docId} docId={docId} />
+        <NavigationPanelDocNode key={docId} docId={docId} parentPath={path} />
       ))}
       <AddItemPlaceholder label={t['New Page']()} onClick={onNewDoc} />
     </>

packages/frontend/core/src/mobile/components/navigation/sections/collections/index.tsx

@@ -7,7 +7,7 @@ import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { AddCollectionIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useServices } from '@toeverything/infra';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { AddItemPlaceholder } from '../../layouts/add-item-placeholder';
 import { CollapsibleSection } from '../../layouts/collapsible-section';
@@ -22,7 +22,7 @@ export const NavigationPanelCollections = () => {
       WorkbenchService,
       NavigationPanelService,
     });
-  const navigationPanelSection = navigationPanelService.sections.collections;
+  const path = useMemo(() => ['collections'], []);
   const collectionMetas = useLiveData(collectionService.collectionMetas$);
   const { openPromptModal } = usePromptModal();
 
@@ -49,12 +49,13 @@ export const NavigationPanelCollections = () => {
           type: 'collection',
         });
         workbenchService.workbench.openCollection(id);
-        navigationPanelSection.setCollapsed(false);
+        navigationPanelService.setCollapsed(path, false);
       },
     });
   }, [
     collectionService,
-    navigationPanelSection,
+    navigationPanelService,
+    path,
     openPromptModal,
     t,
     workbenchService.workbench,
@@ -62,7 +63,7 @@ export const NavigationPanelCollections = () => {
 
   return (
     <CollapsibleSection
-      name="collections"
+      path={path}
       testId="navigation-panel-collections"
       title={t['com.affine.rootAppSidebar.collections']()}
     >
@@ -71,6 +72,7 @@ export const NavigationPanelCollections = () => {
           <NavigationPanelCollectionNode
             key={collection.id}
             collectionId={collection.id}
+            parentPath={path}
           />
         ))}
         <AddItemPlaceholder

packages/frontend/core/src/mobile/components/navigation/sections/favorites/index.tsx

@@ -6,7 +6,7 @@ import { NavigationPanelService } from '@affine/core/modules/navigation-panel';
 import { WorkspaceService } from '@affine/core/modules/workspace';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useServices } from '@toeverything/infra';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { AddItemPlaceholder } from '../../layouts/add-item-placeholder';
 import { CollapsibleSection } from '../../layouts/collapsible-section';
@@ -24,7 +24,7 @@ export const NavigationPanelFavorites = () => {
     });
 
   const t = useI18n();
-  const navigationPanelSection = navigationPanelService.sections.favorites;
+  const path = useMemo(() => ['favorites'], []);
   const favorites = useLiveData(favoriteService.favoriteList.sortedList$);
   const isLoading = useLiveData(favoriteService.favoriteList.isLoading$);
   const { createPage } = usePageHelper(
@@ -38,19 +38,23 @@ export const NavigationPanelFavorites = () => {
       newDoc.id,
       favoriteService.favoriteList.indexAt('before')
     );
-    navigationPanelSection.setCollapsed(false);
+    navigationPanelService.setCollapsed(path, false);
-  }, [createPage, navigationPanelSection, favoriteService.favoriteList]);
+  }, [createPage, favoriteService.favoriteList, navigationPanelService, path]);
 
   return (
     <CollapsibleSection
-      name="favorites"
+      path={path}
       title={t['com.affine.rootAppSidebar.favorites']()}
       testId="navigation-panel-favorites"
       headerTestId="navigation-panel-favorite-category-divider"
     >
       <NavigationPanelTreeRoot placeholder={isLoading ? 'Loading' : null}>
         {favorites.map(favorite => (
-          <FavoriteNode key={favorite.id} favorite={favorite} />
+          <FavoriteNode
+            key={favorite.id}
+            favorite={favorite}
+            parentPath={path}
+          />
         ))}
         <AddItemPlaceholder
           data-testid="navigation-panel-bar-add-favorite-button"
@@ -66,19 +70,24 @@ export const NavigationPanelFavorites = () => {
 
 export const FavoriteNode = ({
   favorite,
+  parentPath,
 }: {
   favorite: {
     id: string;
     type: FavoriteSupportTypeUnion;
   };
+  parentPath: string[];
 }) => {
   return favorite.type === 'doc' ? (
-    <NavigationPanelDocNode docId={favorite.id} />
+    <NavigationPanelDocNode docId={favorite.id} parentPath={parentPath} />
   ) : favorite.type === 'tag' ? (
-    <NavigationPanelTagNode tagId={favorite.id} />
+    <NavigationPanelTagNode tagId={favorite.id} parentPath={parentPath} />
   ) : favorite.type === 'folder' ? (
-    <NavigationPanelFolderNode nodeId={favorite.id} />
+    <NavigationPanelFolderNode nodeId={favorite.id} parentPath={parentPath} />
   ) : (
-    <NavigationPanelCollectionNode collectionId={favorite.id} />
+    <NavigationPanelCollectionNode
+      collectionId={favorite.id}
+      parentPath={parentPath}
+    />
   );
 };

packages/frontend/core/src/mobile/components/navigation/sections/organize/index.tsx

@@ -6,7 +6,7 @@ import { useI18n } from '@affine/i18n';
 import track from '@affine/track';
 import { AddOrganizeIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useServices } from '@toeverything/infra';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemPlaceholder } from '../../layouts/add-item-placeholder';
 import { CollapsibleSection } from '../../layouts/collapsible-section';
@@ -18,7 +18,7 @@ export const NavigationPanelOrganize = () => {
     OrganizeService,
     NavigationPanelService,
   });
-  const navigationPanelSection = navigationPanelService.sections.organize;
+  const path = useMemo(() => ['organize'], []);
   const [openNewFolderDialog, setOpenNewFolderDialog] = useState(false);
 
   const t = useI18n();
@@ -36,15 +36,15 @@ export const NavigationPanelOrganize = () => {
         rootFolder.indexAt('before')
       );
       track.$.navigationPanel.organize.createOrganizeItem({ type: 'folder' });
-      navigationPanelSection.setCollapsed(false);
+      navigationPanelService.setCollapsed(path, false);
       return newFolderId;
     },
-    [navigationPanelSection, rootFolder]
+    [navigationPanelService, path, rootFolder]
   );
 
   return (
     <CollapsibleSection
-      name="organize"
+      path={path}
       title={t['com.affine.rootAppSidebar.organize']()}
     >
       {/* TODO(@CatsJuice): Organize loading UI */}
@@ -53,6 +53,7 @@ export const NavigationPanelOrganize = () => {
           <NavigationPanelFolderNode
             key={child.id}
             nodeId={child.id as string}
+            parentPath={path}
           />
         ))}
         <AddItemPlaceholder

packages/frontend/core/src/mobile/components/navigation/sections/tags/index.tsx

@@ -5,7 +5,7 @@ import { useI18n } from '@affine/i18n';
 import { track } from '@affine/track';
 import { AddTagIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useServices } from '@toeverything/infra';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemPlaceholder } from '../../layouts/add-item-placeholder';
 import { CollapsibleSection } from '../../layouts/collapsible-section';
@@ -25,7 +25,7 @@ export const NavigationPanelTags = () => {
     TagService,
     NavigationPanelService,
   });
-  const navigationPanelSection = navigationPanelService.sections.tags;
+  const path = useMemo(() => ['tags'], []);
   const tags = useLiveData(tagService.tagList.tags$);
   const [showNewTagDialog, setShowNewTagDialog] = useState(false);
 
@@ -36,19 +36,23 @@ export const NavigationPanelTags = () => {
       setShowNewTagDialog(false);
       tagService.tagList.createTag(name, color);
       track.$.navigationPanel.organize.createOrganizeItem({ type: 'tag' });
-      navigationPanelSection.setCollapsed(false);
+      navigationPanelService.setCollapsed(path, false);
     },
-    [navigationPanelSection, tagService]
+    [navigationPanelService, path, tagService]
   );
 
   return (
     <CollapsibleSection
-      name="tags"
+      path={path}
       title={t['com.affine.rootAppSidebar.tags']()}
     >
       <NavigationPanelTreeRoot>
         {tags.map(tag => (
-          <NavigationPanelTagNode key={tag.id} tagId={tag.id} />
+          <NavigationPanelTagNode
+            key={tag.id}
+            tagId={tag.id}
+            parentPath={path}
+          />
         ))}
         <AddItemPlaceholder
           icon={<AddTagIcon />}

packages/frontend/core/src/mobile/views/recent-docs/index.tsx

@@ -24,7 +24,7 @@ export const RecentDocs = ({ max = 5 }: { max?: number }) => {
 
   return (
     <CollapsibleSection
-      name="recent"
+      path={['recent']}
       title="Recent"
       headerClassName={styles.header}
       className={styles.recentSection}

packages/frontend/core/src/modules/navigation-panel/entities/navigation-panel-section.ts

@@ -1,39 +0,0 @@
-import { Entity, LiveData } from '@toeverything/infra';
-import { map } from 'rxjs';
-
-import type { GlobalCache } from '../../storage';
-import type { CollapsibleSectionName } from '../types';
-
-const DEFAULT_COLLAPSABLE_STATE: Record<CollapsibleSectionName, boolean> = {
-  recent: true,
-  favorites: false,
-  organize: false,
-  collections: true,
-  tags: true,
-  favoritesOld: true,
-  migrationFavorites: true,
-  others: false,
-};
-
-export class NavigationPanelSection extends Entity<{
-  name: CollapsibleSectionName;
-}> {
-  name: CollapsibleSectionName = this.props.name;
-  key = `explorer.section.${this.name}`;
-  defaultValue = DEFAULT_COLLAPSABLE_STATE[this.name];
-
-  constructor(private readonly globalCache: GlobalCache) {
-    super();
-  }
-
-  collapsed$ = LiveData.from(
-    this.globalCache
-      .watch<boolean>(this.key)
-      .pipe(map(v => v ?? this.defaultValue)),
-    this.defaultValue
-  );
-
-  setCollapsed(collapsed: boolean) {
-    this.globalCache.set(this.key, collapsed);
-  }
-}

packages/frontend/core/src/modules/navigation-panel/index.ts

@@ -1,15 +1,12 @@
 import { type Framework } from '@toeverything/infra';
 
 import { GlobalCache } from '../storage';
-import { WorkspaceScope } from '../workspace';
+import { WorkspaceScope, WorkspaceService } from '../workspace';
-import { NavigationPanelSection } from './entities/navigation-panel-section';
 import { NavigationPanelService } from './services/navigation-panel';
 export { NavigationPanelService } from './services/navigation-panel';
-export type { CollapsibleSectionName } from './types';
 
 export function configureNavigationPanelModule(framework: Framework) {
   framework
     .scope(WorkspaceScope)
-    .service(NavigationPanelService)
+    .service(NavigationPanelService, [GlobalCache, WorkspaceService]);
-    .entity(NavigationPanelSection, [GlobalCache]);
 }

packages/frontend/core/src/modules/navigation-panel/services/navigation-panel.ts

@@ -1,25 +1,47 @@
-import { Service } from '@toeverything/infra';
+import { LiveData, Service } from '@toeverything/infra';
 
-import { NavigationPanelSection } from '../entities/navigation-panel-section';
+import type { GlobalCache } from '../../storage/providers/global';
-import type { CollapsibleSectionName } from '../types';
+import type { WorkspaceService } from '../../workspace';
 
-const allSectionName: Array<CollapsibleSectionName> = [
+const DEFAULT_COLLAPSABLE_STATE: Record<string, boolean> = {
-  'recent', // mobile only
+  recent: true,
-  'favorites',
+  favorites: false,
-  'organize',
+  organize: false,
-  'collections',
+  collections: true,
-  'tags',
+  tags: true,
-  'favoritesOld',
+  favoritesOld: true,
-  'migrationFavorites',
+  migrationFavorites: true,
-  'others',
+  others: false,
-];
+};
 
 export class NavigationPanelService extends Service {
-  readonly sections = allSectionName.reduce(
+  constructor(
-    (prev, name) =>
+    private readonly globalCache: GlobalCache,
-      Object.assign(prev, {
+    private readonly workspaceService: WorkspaceService
-        [name]: this.framework.createEntity(NavigationPanelSection, { name }),
+  ) {
-      }),
+    super();
-    {} as Record<CollapsibleSectionName, NavigationPanelSection>
+  }
-  );
+
+  private readonly collapsedCache = new Map<string, LiveData<boolean>>();
+
+  collapsed$(path: string[]) {
+    const pathKey = path.join(':');
+    const key = `navigation:${this.workspaceService.workspace.id}:${pathKey}`;
+    const cached$ = this.collapsedCache.get(key);
+    if (!cached$) {
+      const liveData$ = LiveData.from(
+        this.globalCache.watch<boolean>(key),
+        undefined
+      ).map(v => v ?? DEFAULT_COLLAPSABLE_STATE[pathKey] ?? true);
+      this.collapsedCache.set(key, liveData$);
+      return liveData$;
+    }
+    return cached$;
+  }
+
+  setCollapsed(path: string[], collapsed: boolean) {
+    const pathKey = path.join(':');
+    const key = `navigation:${this.workspaceService.workspace.id}:${pathKey}`;
+    this.globalCache.set(key, collapsed);
+  }
 }

packages/frontend/core/src/modules/navigation-panel/types.ts

@@ -1,9 +0,0 @@
-export type CollapsibleSectionName =
-  | 'recent'
-  | 'collections'
-  | 'favorites'
-  | 'tags'
-  | 'organize'
-  | 'favoritesOld'
-  | 'migrationFavorites'
-  | 'others';