Appearance

SidebarFolderTree Component ​

File Information ​

  • Path: app/components/global/SidebarFolderTree.vue
  • Purpose: Recursive folder tree in the sidebar; expand/collapse, lazy-loaded children, and highlight for current folder and parent
  • Type: Global component

Overview ​

SidebarFolderTree renders a hierarchical list of folders in the left sidebar. It uses useSidebarFolderTree for state: expanded nodes, lazy-loaded children (via TanStack Query, shared with folder details page), and highlighting of the currently opened folder and its direct parent. The component recurses to render nested levels; state is provided/injected so a single tree instance is shared.

Props ​

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

Composables ​

  • useSidebarFolderTree — Tree state, toggle, loadChildren, isExpanded, isOpened, isParentOfOpened, shouldRenderNested, etc.

Behavior ​

  • Clicking a folder row navigates to the folder details page.
  • Chevron toggles expand/collapse; children are loaded on first expand (shared cache with folder details).
  • Current route folder and its parent are highlighted via isOpened and isParentOfOpened.
  • Folder details page emits current-folder on the Mitt bus and updates useSidebarCurrentFolder, so the tree expands ancestors and highlights correctly even when the tree mounts after the page.