@exxatdesignux/ui 0.2.15 → 0.2.16

package/template/components/question-bank-client.tsx

@@ -3,6 +3,7 @@
 /**
  * Question bank hub — ListPageTemplate + KeyMetrics + QuestionBankTable (Team / Compliance pattern).
  * URL hash syncs the active view tab; `?scope=` + `folderId=` sync with the secondary nav (`lib/question-bank-nav.ts`).
+ * (Primary sidebar “Library” must not treat that hash as “off-route” — `app-sidebar` `isNavActive` ignores hash for `href` without `#…`.)
  */
 
 import * as React from "react"
@@ -14,6 +15,7 @@ import {
   type DataListViewType,
 } from "@/components/data-views"
 import { QuestionBankPageHeader } from "@/components/question-bank-page-header"
+import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folder-sheet"
 import { CollaborationAccessFlow } from "@/components/collaboration-access-flow"
 import { QuestionBankTable, type QuestionBankTableHandle } from "@/components/question-bank-table"
 import { SecondaryPanelHubTemplate } from "@/components/templates/secondary-panel-hub-template"
@@ -22,7 +24,7 @@ import { KeyMetrics } from "@/components/key-metrics"
 import { useSecondaryPanelHubNav } from "@/hooks/use-secondary-panel-hub-nav"
 import { QUESTION_BANK_ITEMS } from "@/lib/mock/question-bank"
 import { QUESTION_BANK_HEADER_COLLABORATORS } from "@/lib/mock/question-bank-header-collaborators"
-import { DEFAULT_QUESTION_BANK_FOLDERS } from "@/lib/mock/question-bank-folders"
+import { DEFAULT_QUESTION_BANK_FOLDERS, type QuestionBankFolder } from "@/lib/mock/question-bank-folders"
 import { questionBankKpiInsight, questionBankKpiMetrics } from "@/lib/mock/question-bank-kpi"
 import {
   applyQuestionBankHubDisplayFilters,
@@ -97,6 +99,8 @@ export function QuestionBankClient() {
     parseNav: parseQuestionBankNav,
     canonicalHref: questionBankCanonicalNavHref,
     shouldReopenPanel: isQuestionBankDefaultNav,
+    /** Hub/find + list are full-width — layout closes the panel; do not fight it with `openPanel`. */
+    reopenPanelOnPathnames: [QUESTION_BANK_LIBRARY_PATH],
   })
   const isDedicatedSearch = isQuestionBankDedicatedSearchPathname(pathname)
   const isHubFindSurface = pathname === QUESTION_BANK_HUB_FIND_PATH
@@ -173,6 +177,17 @@ export function QuestionBankClient() {
   const [items, setItems] = React.useState(() => QUESTION_BANK_ITEMS.map(q => ({ ...q })))
   const [folders, setFolders] = React.useState(() => DEFAULT_QUESTION_BANK_FOLDERS.map(f => ({ ...f })))
 
+  const [hubFolderCustomizeSheetOpen, setHubFolderCustomizeSheetOpen] = React.useState(false)
+  const [hubFolderCustomizeTarget, setHubFolderCustomizeTarget] = React.useState<QuestionBankFolder | null>(null)
+
+  const openHubScopedFolderCustomize = React.useCallback(() => {
+    if (navState.scope !== "folder" || !navState.folderId) return
+    const f = folders.find(x => x.id === navState.folderId)
+    if (!f) return
+    setHubFolderCustomizeTarget(f)
+    setHubFolderCustomizeSheetOpen(true)
+  }, [folders, navState.folderId, navState.scope])
+
   const filteredItems = React.useMemo(
     () => applyQuestionBankHubDisplayFilters(items, folders, navState, landingFilters),
     [items, folders, landingFilters, navState],
@@ -331,76 +346,103 @@ export function QuestionBankClient() {
       resourceLabel={hubHeader.title}
     >
       {({ collaborators, openInvite }) => (
-        <SecondaryPanelHubTemplate
-          bridges={(
-            <>
-              <QuestionBankFolderBridge
-                folders={folders}
-                onFoldersChange={setFolders}
-                items={items}
-                onItemsChange={setItems}
-              />
-              <QuestionBankAccessBridge openManageAccess={openInvite} />
-            </>
-          )}
-          siteHeader={{
-            title: hubHeader.title,
-            breadcrumbs: hubHeader.breadcrumbs,
-          }}
-        >
-          <ListPageTemplate
-            defaultTabs={DEFAULT_TABS}
-            tabs={tabs}
-            onTabsChange={setTabs}
-            activeTabId={activeTabId}
-            onActiveTabChange={onActiveTabChange}
-            getTabCount={() => count}
-            tablePropertiesRef={tableRef}
-            header={(
-              <QuestionBankPageHeader
-                variant="collaboration"
-                title={hubHeader.title}
-                questionCount={count}
-                collaborators={collaborators}
-                onNewQuestion={() => {}}
-                onExport={() => setExportOpen(true)}
-                onAddCollaborator={openInvite}
-                onCollaboratorsOpen={openInvite}
-                showMetrics={showMetrics}
-                onToggleMetrics={() => setShowMetrics(v => !v)}
-              />
-            )}
-            metrics={(
-              <KeyMetrics
-                variant="flat"
-                metrics={metrics}
-                insight={insight}
-                showHeader={false}
-                metricsSingleRow
-              />
-            )}
-            showMetrics={showMetrics}
-            exportOpen={exportOpen}
-            onExportOpenChange={setExportOpen}
-            exportTotalRows={count}
-            renderContent={(tab, updateTab) => (
-              <QuestionBankTable
-                key={tab.id}
-                ref={tableRef}
-                items={items}
-                navState={navState}
-                urlListSearch={urlToolbarSearchSync}
-                landingFilters={null}
-                searchLanding={false}
-                folders={folders}
-                onFoldersChange={setFolders}
-                onItemsChange={setItems}
-                view={tab.viewType}
-                onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
-              />
+        <>
+          <SecondaryPanelHubTemplate
+            bridges={(
+              <>
+                <QuestionBankFolderBridge
+                  folders={folders}
+                  onFoldersChange={setFolders}
+                  items={items}
+                  onItemsChange={setItems}
+                />
+                <QuestionBankAccessBridge openManageAccess={openInvite} />
+              </>
             )}
+            siteHeader={{
+              title: hubHeader.title,
+              breadcrumbs: hubHeader.breadcrumbs,
+            }}
+          >
+            <ListPageTemplate
+              defaultTabs={DEFAULT_TABS}
+              tabs={tabs}
+              onTabsChange={setTabs}
+              activeTabId={activeTabId}
+              onActiveTabChange={onActiveTabChange}
+              getTabCount={() => count}
+              tablePropertiesRef={tableRef}
+              header={(
+                <QuestionBankPageHeader
+                  variant="collaboration"
+                  title={hubHeader.title}
+                  questionCount={count}
+                  collaborators={collaborators}
+                  onNewQuestion={() => {}}
+                  onExport={() => setExportOpen(true)}
+                  onAddCollaborator={openInvite}
+                  onCollaboratorsOpen={openInvite}
+                  showMetrics={showMetrics}
+                  onToggleMetrics={() => setShowMetrics(v => !v)}
+                  onCustomizeFolder={
+                    navState.scope === "folder" && navState.folderId ? openHubScopedFolderCustomize : undefined
+                  }
+                />
+              )}
+              metrics={(
+                <KeyMetrics
+                  variant="flat"
+                  metrics={metrics}
+                  insight={insight}
+                  showHeader={false}
+                  metricsSingleRow
+                />
+              )}
+              showMetrics={showMetrics}
+              exportOpen={exportOpen}
+              onExportOpenChange={setExportOpen}
+              exportTotalRows={count}
+              renderContent={(tab, updateTab) => (
+                <QuestionBankTable
+                  key={tab.id}
+                  ref={tableRef}
+                  items={items}
+                  navState={navState}
+                  urlListSearch={urlToolbarSearchSync}
+                  landingFilters={null}
+                  searchLanding={false}
+                  folders={folders}
+                  onFoldersChange={setFolders}
+                  onItemsChange={setItems}
+                  view={tab.viewType}
+                  onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+                />
+              )}
+            />
+          </SecondaryPanelHubTemplate>
+          <QuestionBankNewFolderSheet
+            open={hubFolderCustomizeSheetOpen}
+            onOpenChange={open => {
+              setHubFolderCustomizeSheetOpen(open)
+              if (!open) setHubFolderCustomizeTarget(null)
+            }}
+            parentFolderId={hubFolderCustomizeTarget?.parentId ?? null}
+            customizingFolder={hubFolderCustomizeTarget}
+            descriptionText="Update how this folder appears in the bank. Name, color, and icon apply everywhere the folder is shown."
+            onCreated={newFolder => {
+              const target = hubFolderCustomizeTarget
+              if (!target) return
+              setFolders(prev =>
+                prev.map(f =>
+                  f.id === target.id
+                    ? { ...f, name: newFolder.name, icon: newFolder.icon, colorKey: newFolder.colorKey }
+                    : f,
+                ),
+              )
+              setHubFolderCustomizeTarget(null)
+            }}
           />
-        </SecondaryPanelHubTemplate>
+        </>
       )}
     </CollaborationAccessFlow>
   )

package/template/components/question-bank-page-header.tsx

@@ -27,7 +27,7 @@ export interface QuestionBankPageHeaderProps {
   showMetrics?: boolean
   onToggleMetrics?: () => void
   showTitleBlock?: boolean
-  /** `collaboration` adds access line + collaborator stack before CTAs. */
+  /** `collaboration` adds access line + collaborator face row before CTAs. */
   variant?: PageHeaderVariant
   /** Optional role / access row when `variant="collaboration"` (badge + copy). */
   accessInfo?: React.ReactNode
@@ -44,6 +44,11 @@ export interface QuestionBankPageHeaderProps {
   subtitleOverride?: string
   /** Omits the action column (e.g. search landing before first query). */
   hideActions?: boolean
+  /**
+   * When provided, the **More** menu includes **Customize folder** (opens the hub folder sheet).
+   * Wire this when the library is scoped to a folder (`?scope=folder&folderId=…`).
+   */
+  onCustomizeFolder?: () => void
 }
 
 export function QuestionBankPageHeader({
@@ -57,7 +62,7 @@ export function QuestionBankPageHeader({
   variant = "default",
   accessInfo,
   collaborators = QUESTION_BANK_HEADER_COLLABORATORS,
-  collaboratorDisplayLimit = 4,
+  collaboratorDisplayLimit = 3,
   onAddCollaborator = () => {},
   onCollaboratorsOpen,
   collaborationAddLabel = COLLABORATION_HEADER_ADD_LABEL,
@@ -65,6 +70,7 @@ export function QuestionBankPageHeader({
   hideNewQuestion = false,
   subtitleOverride,
   hideActions = false,
+  onCustomizeFolder,
 }: QuestionBankPageHeaderProps) {
   const [moreOpen, setMoreOpen] = React.useState(false)
   const countLine =
@@ -119,6 +125,16 @@ export function QuestionBankPageHeader({
                     {addCollaboratorLabel}
                   </DropdownMenuItem>
                 ) : null}
+                {onCustomizeFolder ? (
+                  <DropdownMenuItem
+                    onSelect={() => {
+                      window.setTimeout(() => onCustomizeFolder(), 0)
+                    }}
+                  >
+                    <i className="fa-light fa-wand-magic-sparkles" aria-hidden="true" />
+                    Customize folder
+                  </DropdownMenuItem>
+                ) : null}
                 <DropdownMenuItem
                   onSelect={() => {
                     window.setTimeout(() => onExport(), 0)

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

@@ -8,7 +8,6 @@
 import * as React from "react"
 import Link from "next/link"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -30,43 +29,19 @@ 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, 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,
+  isQuestionBankNavActive,
   parseQuestionBankNav,
   QUESTION_BANK_FAVORITES_FOLDER_ID,
   QUESTION_BANK_LIBRARY_HUB_PATHS,
-  isQuestionBankSearchNavActive,
   questionBankFavoritesFolderHref,
   questionBankHubScopeHref,
-  questionBankSearchLandingNavHref,
   type QuestionBankNavScope,
 } from "@/lib/question-bank-nav"
-
-function isNavActive(
-  pathname: string,
-  nav: ReturnType<typeof parseQuestionBankNav>,
-  scope: QuestionBankNavScope,
-  folderId?: string | null,
-) {
-  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
-  }
-  return false
-}
+import { QuestionBankFolderTreeBranch } from "@/components/data-views/question-bank-folder-tree-branch"
 
 function NavRow({
   href,
@@ -147,179 +122,6 @@ function IconNavRow({
   )
 }
 
-function PanelFolderBranch({
-  folder,
-  folders,
-  depth,
-  pathname,
-  hubSearchParams,
-  nav,
-  canManageFolders,
-  canManageAccess,
-  onAddSubfolder,
-  onCustomizeFolder,
-  onManageAccess,
-  onDeleteFolder,
-}: {
-  folder: QuestionBankFolder
-  folders: QuestionBankFolder[]
-  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 = 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
-
-  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={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>
-            <button
-              type="button"
-              className="flex size-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              aria-label={`${folder.name} — expand or collapse`}
-            >
-              <i
-                className="fa-light fa-chevron-right text-xs transition-transform duration-150 group-data-[state=open]:rotate-90"
-                aria-hidden
-              />
-            </button>
-          </CollapsibleTrigger>
-        ) : (
-          <div className="size-8 shrink-0" aria-hidden />
-        )}
-        <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 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
-              className={cn("fa-light shrink-0 text-sm", folder.icon, QUESTION_BANK_FOLDER_ICON_COLORS[folder.colorKey])}
-              aria-hidden
-            />
-            <span className="min-w-0 flex-1 truncate leading-tight">{folder.name}</span>
-            {hasSubfolders ? (
-              <span className="shrink-0 text-xs tabular-nums text-muted-foreground">{childFolders.length}</span>
-            ) : 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>
-          {childFolders.map(child => (
-            <PanelFolderBranch
-              key={child.id}
-              folder={child}
-              folders={folders}
-              depth={depth + 1}
-              pathname={pathname}
-              hubSearchParams={hubSearchParams}
-              nav={nav}
-              canManageFolders={canManageFolders}
-              canManageAccess={canManageAccess}
-              onAddSubfolder={onAddSubfolder}
-              onCustomizeFolder={onCustomizeFolder}
-              onManageAccess={onManageAccess}
-              onDeleteFolder={onDeleteFolder}
-            />
-          ))}
-        </CollapsibleContent>
-      ) : null}
-    </Collapsible>
-  )
-}
-
 export function QuestionBankSecondaryNav() {
   const pathname = usePathname()
   const router = useRouter()
@@ -340,7 +142,7 @@ export function QuestionBankSecondaryNav() {
   const canManageFolders = questionBankFolderBridge != null
   const canManageAccess = questionBankAccessBridge != null
 
-  /** Favorites is a primary nav row (with All / My / Search), not under “Folders”. */
+  /** Favorites is a primary nav row (with All / My), not under “Folders”. */
   const folderTreeRoots = React.useMemo(
     () =>
       folders
@@ -518,32 +320,25 @@ export function QuestionBankSecondaryNav() {
           <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")}
+              active={isQuestionBankNavActive(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")}
+              active={isQuestionBankNavActive(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)}
+              active={isQuestionBankNavActive(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>
@@ -566,7 +361,7 @@ export function QuestionBankSecondaryNav() {
                         scope: "folder",
                         folderId: folder.id,
                       })
-                      const active = isNavActive(pathname, nav, "folder", folder.id)
+                      const active = isQuestionBankNavActive(pathname, nav, "folder", folder.id)
                       return (
                         <DropdownMenuItem key={folder.id} asChild>
                           <Link
@@ -613,31 +408,24 @@ export function QuestionBankSecondaryNav() {
         <ul className="space-y-0.5" role="list">
           <NavRow
             href={questionBankHubScopeHref(pathname, searchParams, { scope: "all" })}
-            active={isNavActive(pathname, nav, "all")}
+            active={isQuestionBankNavActive(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")}
+            active={isQuestionBankNavActive(pathname, nav, "my")}
             iconClass="fa-user"
             label="My questions"
           />
           <NavRow
             href={questionBankFavoritesFolderHref(pathname, searchParams)}
-            active={isNavActive(pathname, nav, "folder", QUESTION_BANK_FAVORITES_FOLDER_ID)}
+            active={isQuestionBankNavActive(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">
@@ -659,11 +447,10 @@ export function QuestionBankSecondaryNav() {
             </div>
           </li>
           {folderTreeRoots.map(folder => (
-            <li key={folder.id} className="min-w-0">
-              <PanelFolderBranch
+            <li key={folder.id} className="min-w-0 w-full list-none">
+              <QuestionBankFolderTreeBranch
                 folder={folder}
                 folders={folders}
-                depth={0}
                 pathname={pathname}
                 hubSearchParams={searchParams}
                 nav={nav}

package/template/components/secondary-panel.tsx

@@ -160,7 +160,7 @@ function QuestionBankPanel() {
           className="text-xl font-semibold leading-tight text-sidebar-foreground"
           style={{ fontFamily: "var(--font-heading)" }}
         >
-          Question bank
+          Library
         </h2>
         <Tip label="Collapse to icons" side="bottom">
           <Button

package/template/components/site-header.tsx

@@ -5,10 +5,13 @@
  *
  *  ✓ SidebarTrigger wrapped in Tooltip — icon-only button (WCAG 4.1.2, 1.1.1)
  *  ✓ <header role="banner"> landmark for AT navigation (WCAG 1.3.6)
- *  ✓ No bottom border (per design spec)
+ *  ✓ Sticky at top — when stuck, the rounded breadcrumb sits on the app bg and a
+ *    bottom separator appears to anchor it; transparent at rest so the rounded
+ *    corners blend into the inset card.
  *  ✓ Uses Inter (font-sans) — Ivy Presto is reserved for PageHeader <h1> only
  */
 
+import * as React from "react"
 import Link from "next/link"
 import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
@@ -20,6 +23,7 @@ import {
 } from "@/components/ui/tooltip"
 import { AskLeoToggle } from "@/components/ask-leo-sidebar"
 import { useModKeyLabel } from "@/hooks/use-mod-key-label"
+import { cn } from "@/lib/utils"
 
 export interface BreadcrumbItem {
   label: string
@@ -35,11 +39,25 @@ export interface SiteHeaderProps {
 
 export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps) {
   const mod = useModKeyLabel()
+  const [isStuck, setIsStuck] = React.useState(false)
+
+  React.useEffect(() => {
+    const onScroll = () => setIsStuck(window.scrollY > 0)
+    onScroll()
+    window.addEventListener("scroll", onScroll, { passive: true })
+    return () => window.removeEventListener("scroll", onScroll)
+  }, [])
 
   return (
+    <div
+      className={cn(
+        "sticky top-0 z-60 transition-colors",
+        isStuck ? "bg-sidebar border-b border-border" : "bg-transparent",
+      )}
+    >
     <header
       role="banner"
-      className="flex h-(--header-height) shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
+      className="flex h-(--header-height) shrink-0 items-center gap-2 bg-background rounded-t-xl transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
     >
       <div className="flex w-full items-center gap-1 ps-4 pe-2 lg:gap-2 lg:ps-6 lg:pe-2">
         <Tooltip>
@@ -89,5 +107,6 @@ export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps
         </div>
       </div>
     </header>
+    </div>
   )
 }