Appearance

useSidebarFolderTree Composable ​

File Information ​

  • Path: app/composables/core/layouts/useSidebarFolderTree.ts
  • Purpose: Hierarchical folder tree state and lazy-loading for the sidebar; expand/collapse, child loading, and sync with current folder route
  • Type: Core Composable (Layout)

Overview ​

useSidebarFolderTree provides the logic for the sidebar folder tree: normalized folder list, expanded state, lazy-loaded children via TanStack Query (shared cache with folder details page), and highlighting of the currently opened folder and its parent. State is provided/injected so a single tree instance is shared across the recursive tree component.

Parameters ​

  • props: { folders: Folder[]; level: number }
    • folders: Root or child folder list for this level
    • level: Nesting level (0 for root)

Return Type ​

Returns UseSidebarFolderTreeReturn (see ~/types), including:

  • treeState: Reactive state (expanded, children, loading, rootSignature, openedFolderId, openedParentFolderId)
  • level, folders: Computed from props
  • isExpanded(folderId), isLoading(folderId), getChildren(folderId)
  • isOpened(folderId), isParentOfOpened(folderId) (route-based)
  • hasChildren(folder), shouldRenderNested(folder)
  • loadChildren(folderId), toggle(folder)

Usage ​

Used by the SidebarFolderTree component. The folder details page emits current-folder on the Mitt bus (and updates useSidebarCurrentFolder) so the tree can expand ancestors and highlight the current folder.

typescript
const { folders, toggle, isExpanded, loadChildren, ... } = useSidebarFolderTree({ folders: rootFolders, level: 0 })