@exxatdesignux/ui 0.2.8 → 0.2.10

package/template/components/question-bank-secondary-nav.tsx

@@ -7,34 +7,61 @@
 
 import * as React from "react"
 import Link from "next/link"
-import { usePathname, useSearchParams } from "next/navigation"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Shortcut,
+} from "@/components/ui/dropdown-menu"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
 import { Tip } from "@/components/ui/tip"
 import { cn } from "@/lib/utils"
 import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
 import { QUESTION_BANK_FOLDER_ICON_COLORS } from "@/lib/mock/question-bank-folders"
-import { DEFAULT_QUESTION_BANK_FOLDERS } from "@/lib/mock/question-bank-folders"
+import { DEFAULT_QUESTION_BANK_FOLDERS, newFolderId, collectFolderDescendantIds } from "@/lib/mock/question-bank-folders"
 import { useSecondaryPanel } from "@/components/secondary-panel"
+import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folder-sheet"
 import {
+  isQuestionBankDedicatedSearchPathname,
   parseQuestionBankNav,
-  questionBankNavHref,
+  QUESTION_BANK_FAVORITES_FOLDER_ID,
+  QUESTION_BANK_LIBRARY_HUB_PATHS,
+  isQuestionBankSearchNavActive,
+  questionBankFavoritesFolderHref,
+  questionBankHubScopeHref,
+  questionBankSearchLandingNavHref,
   type QuestionBankNavScope,
 } from "@/lib/question-bank-nav"
 
-function matchesQuery(q: string, ...parts: (string | undefined)[]) {
-  if (!q) return true
-  return parts.some(p => p && p.toLowerCase().includes(q))
-}
-
 function isNavActive(
   pathname: string,
   nav: ReturnType<typeof parseQuestionBankNav>,
   scope: QuestionBankNavScope,
   folderId?: string | null,
 ) {
-  if (pathname !== "/question-bank") return false
-  if (scope === "all") return nav.scope === "all"
-  if (scope === "my") return nav.scope === "my"
+  if (!QUESTION_BANK_LIBRARY_HUB_PATHS.includes(pathname)) return false
+  // Dedicated search shells (list / hub-find) use the “Search” row for All/My — not these rows.
+  if (scope === "all") {
+    if (isQuestionBankDedicatedSearchPathname(pathname)) return false
+    return nav.scope === "all"
+  }
+  if (scope === "my") {
+    if (isQuestionBankDedicatedSearchPathname(pathname)) return false
+    return nav.scope === "my"
+  }
   if (scope === "folder" && folderId) {
     return nav.scope === "folder" && nav.folderId === folderId
   }
@@ -60,6 +87,7 @@ function NavRow({
       <Tip label={label} side="right">
         <Link
           href={href}
+          scroll={false}
           onClick={() => onClick?.()}
           aria-current={active ? "page" : undefined}
           className={cn(
@@ -80,43 +108,99 @@ function NavRow({
   )
 }
 
+/** Icon-rail row — matches primary sidebar collapsed hit target (`size-9`). */
+function IconNavRow({
+  href,
+  active,
+  iconClass,
+  label,
+  onClick,
+}: {
+  href: string
+  active: boolean
+  iconClass: string
+  label: string
+  onClick?: () => void
+}) {
+  return (
+    <li className="flex w-full justify-center" role="none">
+      <Tip label={label} side="right">
+        <Link
+          href={href}
+          scroll={false}
+          onClick={() => onClick?.()}
+          aria-current={active ? "page" : undefined}
+          className={cn(
+            "flex size-9 shrink-0 items-center justify-center rounded-md transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+            active
+              ? "bg-sidebar-accent text-sidebar-accent-foreground"
+              : "text-sidebar-foreground hover:bg-sidebar-accent/50",
+          )}
+        >
+          <span className="text-center text-[15px] leading-none" aria-hidden>
+            <i className={cn(active ? "fa-solid" : "fa-light", iconClass)} aria-hidden />
+          </span>
+        </Link>
+      </Tip>
+    </li>
+  )
+}
+
 function PanelFolderBranch({
   folder,
   folders,
-  query,
   depth,
   pathname,
+  hubSearchParams,
   nav,
+  canManageFolders,
+  canManageAccess,
+  onAddSubfolder,
+  onCustomizeFolder,
+  onManageAccess,
+  onDeleteFolder,
 }: {
   folder: QuestionBankFolder
   folders: QuestionBankFolder[]
-  query: string
   depth: number
   pathname: string
+  hubSearchParams: URLSearchParams
   nav: ReturnType<typeof parseQuestionBankNav>
+  canManageFolders: boolean
+  canManageAccess: boolean
+  onAddSubfolder: (parentId: string) => void
+  onCustomizeFolder: (folder: QuestionBankFolder) => void
+  onManageAccess: () => void
+  onDeleteFolder: (folder: QuestionBankFolder) => void
 }) {
-  const childFolders = folders
-    .filter(f => f.parentId === folder.id)
-    .sort((a, b) => a.name.localeCompare(b.name))
-
-  const visibleFolders = React.useMemo(
-    () => childFolders.filter(f => matchesQuery(query, f.name)),
-    [childFolders, query],
+  const childFolders = React.useMemo(
+    () =>
+      folders
+        .filter(f => f.parentId === folder.id)
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [folders, folder.id],
   )
 
   const hasSubfolders = childFolders.length > 0
   const indent = depth * 10
 
-  if (query && !matchesQuery(query, folder.name) && visibleFolders.length === 0) {
-    return null
-  }
-
-  const folderHref = questionBankNavHref({ scope: "folder", folderId: folder.id })
+  const folderHref = questionBankHubScopeHref(pathname, hubSearchParams, {
+    scope: "folder",
+    folderId: folder.id,
+  })
   const folderActive = isNavActive(pathname, nav, "folder", folder.id)
 
   return (
     <Collapsible defaultOpen={depth < 1} className="group">
-      <div className="flex min-w-0 items-center rounded-md hover:bg-sidebar-accent/40">
+      <div
+        className={cn(
+          "group/row flex min-w-0 items-center rounded-md px-2 transition-colors",
+          folderActive
+            ? "bg-sidebar-accent text-sidebar-accent-foreground"
+            : "hover:bg-sidebar-accent/50",
+        )}
+      >
         <div style={{ width: indent }} className="shrink-0" aria-hidden />
         {hasSubfolders ? (
           <CollapsibleTrigger asChild>
@@ -137,13 +221,12 @@ function PanelFolderBranch({
         <Tip label={folder.name} side="right">
           <Link
             href={folderHref}
+            scroll={false}
             aria-current={folderActive ? "page" : undefined}
             className={cn(
-              "flex min-w-0 flex-1 items-center gap-2 py-1.5 pr-2 text-left text-sm transition-colors",
-              "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-              folderActive
-                ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
-                : "text-sidebar-foreground hover:bg-sidebar-accent/50",
+              "flex min-w-0 flex-1 items-center gap-2 py-1.5 text-left text-sm transition-colors",
+              "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+              folderActive ? "font-medium" : "text-sidebar-foreground",
             )}
           >
             <i
@@ -156,18 +239,79 @@ function PanelFolderBranch({
             ) : null}
           </Link>
         </Tip>
+        {canManageFolders ? (
+          <DropdownMenu>
+            <Tip label={`Folder actions for ${folder.name}`} side="right">
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  size="icon-xs"
+                  variant="ghost"
+                  aria-label={`Folder actions for ${folder.name}`}
+                  className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-within/row:opacity-100"
+                  onClick={event => event.stopPropagation()}
+                >
+                  <i className="fa-light fa-ellipsis text-xs" aria-hidden="true" />
+                </Button>
+              </DropdownMenuTrigger>
+            </Tip>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onAddSubfolder(folder.id), 0)
+                }}
+              >
+                <i className="fa-light fa-plus text-xs" aria-hidden="true" />
+                Add folder
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onCustomizeFolder(folder), 0)
+                }}
+              >
+                <i className="fa-light fa-wand-magic-sparkles text-xs" aria-hidden="true" />
+                Customize
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                disabled={!canManageAccess}
+                onSelect={() => {
+                  window.setTimeout(() => onManageAccess(), 0)
+                }}
+              >
+                <i className="fa-light fa-user-gear text-xs" aria-hidden="true" />
+                Manage access
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                variant="destructive"
+                onSelect={() => {
+                  window.setTimeout(() => onDeleteFolder(folder), 0)
+                }}
+              >
+                <i className="fa-light fa-trash text-xs" aria-hidden="true" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
       </div>
       {hasSubfolders ? (
         <CollapsibleContent>
-          {visibleFolders.map(child => (
+          {childFolders.map(child => (
             <PanelFolderBranch
               key={child.id}
               folder={child}
               folders={folders}
-              query={query}
               depth={depth + 1}
               pathname={pathname}
+              hubSearchParams={hubSearchParams}
               nav={nav}
+              canManageFolders={canManageFolders}
+              canManageAccess={canManageAccess}
+              onAddSubfolder={onAddSubfolder}
+              onCustomizeFolder={onCustomizeFolder}
+              onManageAccess={onManageAccess}
+              onDeleteFolder={onDeleteFolder}
             />
           ))}
         </CollapsibleContent>
@@ -176,51 +320,365 @@ function PanelFolderBranch({
   )
 }
 
-export function QuestionBankSecondaryNav({ query }: { query: string }) {
+export function QuestionBankSecondaryNav() {
   const pathname = usePathname()
+  const router = useRouter()
   const searchParams = useSearchParams()
   const searchParamsKey = searchParams.toString()
-  const { openPanel } = useSecondaryPanel()
+  const { openPanel, questionBankFolderBridge, questionBankAccessBridge, secondaryPanelCompact } =
+    useSecondaryPanel()
+  const [newFolderOpen, setNewFolderOpen] = React.useState(false)
+  const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
+  const [customizingFolder, setCustomizingFolder] = React.useState<QuestionBankFolder | null>(null)
+  const [deleteFolder, setDeleteFolder] = React.useState<QuestionBankFolder | null>(null)
   const nav = React.useMemo(
     () => parseQuestionBankNav(new URLSearchParams(searchParamsKey)),
     [searchParamsKey],
   )
 
-  const folders = DEFAULT_QUESTION_BANK_FOLDERS
-  const q = query.trim().toLowerCase()
+  const folders = questionBankFolderBridge?.folders ?? DEFAULT_QUESTION_BANK_FOLDERS
+  const canManageFolders = questionBankFolderBridge != null
+  const canManageAccess = questionBankAccessBridge != null
 
-  const roots = React.useMemo(
-    () => folders.filter(f => f.parentId === null).sort((a, b) => a.name.localeCompare(b.name)),
+  /** Favorites is a primary nav row (with All / My / Search), not under “Folders”. */
+  const folderTreeRoots = React.useMemo(
+    () =>
+      folders
+        .filter(f => f.parentId === null && f.id !== QUESTION_BANK_FAVORITES_FOLDER_ID)
+        .sort((a, b) => a.name.localeCompare(b.name)),
     [folders],
   )
 
+  const openTopLevelFolder = React.useCallback(() => {
+    setCustomizingFolder(null)
+    setNewFolderParentId(nav.scope === "folder" ? nav.folderId : null)
+    setNewFolderOpen(true)
+  }, [nav.folderId, nav.scope])
+
+  const openSubfolder = React.useCallback((parentId: string) => {
+    setCustomizingFolder(null)
+    setNewFolderParentId(parentId)
+    setNewFolderOpen(true)
+  }, [])
+
+  const openCustomizeFolder = React.useCallback((folder: QuestionBankFolder) => {
+    setCustomizingFolder(folder)
+    setNewFolderParentId(folder.parentId)
+    setNewFolderOpen(true)
+  }, [])
+
+  const openManageAccess = React.useCallback(() => {
+    questionBankAccessBridge?.openManageAccess()
+  }, [questionBankAccessBridge])
+
+  const openDeleteFolder = React.useCallback((folder: QuestionBankFolder) => {
+    setDeleteFolder(folder)
+  }, [])
+
+  const commitDeleteFolder = React.useCallback(() => {
+    if (!deleteFolder || !questionBankFolderBridge) return
+    const victim = deleteFolder
+    const parent = victim.parentId
+    const desc = collectFolderDescendantIds(folders, victim.id)
+    const remaining = folders.filter(f => !desc.has(f.id))
+    if (remaining.length === 0) {
+      setDeleteFolder(null)
+      return
+    }
+    const parentStillExists = parent !== null && remaining.some(f => f.id === parent)
+    const fallbackRoot = remaining.find(f => f.parentId === null)?.id
+    const reassignTarget =
+      parentStillExists ? parent : (fallbackRoot ?? remaining[0]!.id)
+
+    questionBankFolderBridge.onFoldersChange(remaining)
+    questionBankFolderBridge.onItemsChange(prev =>
+      prev.map(item => (desc.has(item.folderId) ? { ...item, folderId: reassignTarget } : item)),
+    )
+
+    if (nav.scope === "folder" && nav.folderId && desc.has(nav.folderId)) {
+      router.replace(
+        questionBankHubScopeHref(
+          pathname,
+          new URLSearchParams(searchParamsKey),
+          parentStillExists
+            ? { scope: "folder", folderId: parent! }
+            : { scope: "all" },
+        ),
+      )
+    }
+
+    setDeleteFolder(null)
+  }, [deleteFolder, folders, nav.folderId, nav.scope, pathname, questionBankFolderBridge, router, searchParamsKey])
+
+  const sheetParentId = customizingFolder?.parentId ?? newFolderParentId
+
+  const flattenedFolderLinks = React.useMemo(() => {
+    const out: QuestionBankFolder[] = []
+    const walk = (folder: QuestionBankFolder) => {
+      out.push(folder)
+      folders
+        .filter(c => c.parentId === folder.id)
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .forEach(walk)
+    }
+    folderTreeRoots.forEach(walk)
+    return out
+  }, [folderTreeRoots, folders])
+
+  const hubNavModals = (
+    <>
+      <QuestionBankNewFolderSheet
+        open={newFolderOpen}
+        onOpenChange={open => {
+          setNewFolderOpen(open)
+          if (!open) {
+            setCustomizingFolder(null)
+            setNewFolderParentId(null)
+          }
+        }}
+        parentFolderId={sheetParentId}
+        customizingFolder={customizingFolder}
+        descriptionText={
+          customizingFolder
+            ? "Update the folder name, color, and icon shown in the navigation and folder views."
+            : sheetParentId
+              ? "The folder is created inside the folder selected in the navigation."
+              : "Add a top-level folder to the question bank."
+        }
+        onCreated={folder => {
+          if (customizingFolder) {
+            questionBankFolderBridge?.onFoldersChange(prev =>
+              prev.map(item =>
+                item.id === customizingFolder.id
+                  ? {
+                      ...item,
+                      name: folder.name,
+                      icon: folder.icon,
+                      colorKey: folder.colorKey,
+                    }
+                  : item,
+              ),
+            )
+          } else {
+            questionBankFolderBridge?.onFoldersChange(prev => [...prev, { ...folder, id: newFolderId() }])
+          }
+          setNewFolderOpen(false)
+          setCustomizingFolder(null)
+          setNewFolderParentId(null)
+        }}
+      />
+      {deleteFolder ? <Shortcut keys="Enter" onInvoke={commitDeleteFolder} /> : null}
+      <Dialog open={deleteFolder != null} onOpenChange={open => !open && setDeleteFolder(null)}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Delete folder?</DialogTitle>
+            <DialogDescription>
+              {deleteFolder
+                ? `${deleteFolder.name} and its subfolders will be removed. Questions inside move to the parent folder (or the first top-level folder).`
+                : null}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button type="button" variant="outline" size="sm" onClick={() => setDeleteFolder(null)}>
+              Cancel
+              <KbdGroup className="ml-1.5">
+                <Kbd variant="bare">Esc</Kbd>
+              </KbdGroup>
+            </Button>
+            <Button type="button" variant="destructive" size="sm" onClick={commitDeleteFolder}>
+              Delete
+              <KbdGroup className="ml-1.5">
+                <Kbd variant="bare">⏎</Kbd>
+              </KbdGroup>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+
+  if (secondaryPanelCompact) {
+    return (
+      <>
+        <nav className="flex min-h-0 flex-1 flex-col" role="navigation" aria-label="Question bank">
+          <div className="flex flex-col items-center border-b border-sidebar-border/60 px-1 py-2">
+            <Tip label="Show labels" side="right">
+              <Button
+                type="button"
+                size="icon"
+                variant="ghost"
+                className="size-9 shrink-0"
+                aria-label="Show labels"
+                onClick={() => openPanel("question-bank")}
+              >
+                <i className="fa-light fa-angles-right text-[15px]" aria-hidden="true" />
+              </Button>
+            </Tip>
+          </div>
+          <ul className="flex flex-1 flex-col items-center gap-1 overflow-y-auto px-1 py-2" role="list">
+            <IconNavRow
+              href={questionBankHubScopeHref(pathname, searchParams, { scope: "all" })}
+              active={isNavActive(pathname, nav, "all")}
+              iconClass="fa-table-list"
+              label="All questions"
+              onClick={() => openPanel("question-bank")}
+            />
+            <IconNavRow
+              href={questionBankHubScopeHref(pathname, searchParams, { scope: "my" })}
+              active={isNavActive(pathname, nav, "my")}
+              iconClass="fa-user"
+              label="My questions"
+              onClick={() => openPanel("question-bank")}
+            />
+            <IconNavRow
+              href={questionBankFavoritesFolderHref(pathname, searchParams)}
+              active={isNavActive(pathname, nav, "folder", QUESTION_BANK_FAVORITES_FOLDER_ID)}
+              iconClass="fa-star"
+              label="Favorites"
+              onClick={() => openPanel("question-bank")}
+            />
+            <IconNavRow
+              href={questionBankSearchLandingNavHref(nav, searchParams)}
+              active={isQuestionBankSearchNavActive(pathname, nav)}
+              iconClass="fa-magnifying-glass"
+              label="Search"
+              onClick={() => openPanel("question-bank")}
+            />
+            <li className="flex w-full justify-center pt-1" role="none">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    size="icon"
+                    variant="ghost"
+                    className="size-9 shrink-0 text-sidebar-foreground"
+                    aria-label="Folders"
+                  >
+                    <i className="fa-light fa-folder-tree text-[15px]" aria-hidden="true" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent side="right" align="start" className="max-h-72 overflow-y-auto">
+                  {flattenedFolderLinks.length === 0 ? (
+                    <div className="px-2 py-1.5 text-xs text-muted-foreground">No folders</div>
+                  ) : (
+                    flattenedFolderLinks.map(folder => {
+                      const href = questionBankHubScopeHref(pathname, searchParams, {
+                        scope: "folder",
+                        folderId: folder.id,
+                      })
+                      const active = isNavActive(pathname, nav, "folder", folder.id)
+                      return (
+                        <DropdownMenuItem key={folder.id} asChild>
+                          <Link
+                            href={href}
+                            scroll={false}
+                            className={cn(active && "bg-accent")}
+                            onClick={() => openPanel("question-bank")}
+                          >
+                            {folder.name}
+                          </Link>
+                        </DropdownMenuItem>
+                      )
+                    })
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </li>
+          </ul>
+          {canManageFolders ? (
+            <div className="flex flex-col items-center border-t border-sidebar-border/60 px-1 py-2">
+              <Tip label="Add folder" side="right">
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="ghost"
+                  className="size-9 shrink-0 text-muted-foreground"
+                  aria-label="Add folder"
+                  onClick={openTopLevelFolder}
+                >
+                  <i className="fa-light fa-plus text-[15px]" aria-hidden="true" />
+                </Button>
+              </Tip>
+            </div>
+          ) : null}
+        </nav>
+        {hubNavModals}
+      </>
+    )
+  }
+
   return (
-    <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4" role="navigation" aria-label="Question bank">
-      <ul className="space-y-0.5" role="list">
-        <NavRow
-          href={questionBankNavHref({ scope: "all" })}
-          active={isNavActive(pathname, nav, "all")}
-          iconClass="fa-table-list"
-          label="All questions"
-          onClick={() => openPanel("question-bank")}
-        />
-        <NavRow
-          href={questionBankNavHref({ scope: "my" })}
-          active={isNavActive(pathname, nav, "my")}
-          iconClass="fa-user"
-          label="My questions"
-        />
-        <li role="presentation" className="select-none">
-          <span className="block px-2 pt-3 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
-            Folders
-          </span>
-        </li>
-        {roots.map(folder => (
-          <li key={folder.id} className="min-w-0">
-            <PanelFolderBranch folder={folder} folders={folders} query={q} depth={0} pathname={pathname} nav={nav} />
+    <>
+      <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-4" role="navigation" aria-label="Question bank">
+        <ul className="space-y-0.5" role="list">
+          <NavRow
+            href={questionBankHubScopeHref(pathname, searchParams, { scope: "all" })}
+            active={isNavActive(pathname, nav, "all")}
+            iconClass="fa-table-list"
+            label="All questions"
+            onClick={() => openPanel("question-bank")}
+          />
+          <NavRow
+            href={questionBankHubScopeHref(pathname, searchParams, { scope: "my" })}
+            active={isNavActive(pathname, nav, "my")}
+            iconClass="fa-user"
+            label="My questions"
+          />
+          <NavRow
+            href={questionBankFavoritesFolderHref(pathname, searchParams)}
+            active={isNavActive(pathname, nav, "folder", QUESTION_BANK_FAVORITES_FOLDER_ID)}
+            iconClass="fa-star"
+            label="Favorites"
+            onClick={() => openPanel("question-bank")}
+          />
+          <NavRow
+            href={questionBankSearchLandingNavHref(nav, searchParams)}
+            active={isQuestionBankSearchNavActive(pathname, nav)}
+            iconClass="fa-magnifying-glass"
+            label="Search"
+            onClick={() => openPanel("question-bank")}
+          />
+          <li role="presentation" className="select-none">
+            <div className="flex items-center justify-between gap-2 px-2 pt-3 pb-1">
+              <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/70">
+                Folders
+              </span>
+              <Tip label="Add folder" side="right">
+                <Button
+                  type="button"
+                  size="icon-xs"
+                  variant="ghost"
+                  className="text-muted-foreground"
+                  aria-label="Add folder"
+                  disabled={!canManageFolders}
+                  onClick={openTopLevelFolder}
+                >
+                  <i className="fa-light fa-plus" aria-hidden="true" />
+                </Button>
+              </Tip>
+            </div>
           </li>
-        ))}
-      </ul>
-    </div>
+          {folderTreeRoots.map(folder => (
+            <li key={folder.id} className="min-w-0">
+              <PanelFolderBranch
+                folder={folder}
+                folders={folders}
+                depth={0}
+                pathname={pathname}
+                hubSearchParams={searchParams}
+                nav={nav}
+                canManageFolders={canManageFolders}
+                canManageAccess={canManageAccess}
+                onAddSubfolder={openSubfolder}
+                onCustomizeFolder={openCustomizeFolder}
+                onManageAccess={openManageAccess}
+                onDeleteFolder={openDeleteFolder}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+      {hubNavModals}
+    </>
   )
 }