@exxatdesignux/ui 0.2.15 → 0.2.17

package/template/components/question-bank-new-folder-sheet.tsx

@@ -131,7 +131,7 @@ export function QuestionBankNewFolderSheet({
         side="right"
         showCloseButton={false}
         showOverlay={false}
-        className="z-[60] w-80 sm:max-w-80 flex flex-col gap-0 overflow-hidden rounded-xl border border-border p-0 shadow-xl"
+        className="z-[80] w-80 sm:max-w-80 flex flex-col gap-0 overflow-hidden rounded-xl border border-border p-0 shadow-xl"
         style={{ top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100vh - 1rem)" }}
       >
         <Shortcut keys="Enter" disabled={createDisabled} onInvoke={commit} />

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,
@@ -22,7 +21,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
   Shortcut,
 } from "@/components/ui/dropdown-menu"
@@ -30,43 +28,17 @@ 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 +119,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 +139,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 +317,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 +358,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 +405,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 +444,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/question-bank-table.tsx

@@ -6,11 +6,13 @@
 
 import * as React from "react"
 import dynamic from "next/dynamic"
+import { mailtoHref } from "@/lib/mailto"
 import { DataTable, DataTableToolbar } from "@/components/data-table"
 import type { DataListViewType } from "@/lib/data-list-view"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
 import type { ColumnDef } from "@/components/data-table/types"
 import { useTableState } from "@/components/data-table/use-table-state"
+import { useTableStateLifecycle } from "@/lib/table-state-lifecycle"
 import { TablePropertiesDrawerButton } from "@/components/table-properties"
 import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
 import { Button } from "@/components/ui/button"
@@ -281,7 +283,7 @@ function buildQuestionBankColumns(
               <span className="truncate text-sm font-medium text-foreground">{row.author}</span>
               {row.authorEmail ? (
                 <a
-                  href={`mailto:${row.authorEmail}`}
+                  href={mailtoHref(row.authorEmail)}
                   className="truncate text-xs text-muted-foreground transition-colors hover:text-foreground hover:underline"
                   onClick={e => e.stopPropagation()}
                 >
@@ -382,25 +384,26 @@ function HubFolderColumnsPanel({
     setSelectedPath(prev => [...prev.slice(0, depth), item])
   }
 
-  // Auto-select first item at each level (only on first render)
+  // Auto-select first item at each level (only on first render). Intentional
+  // empty deps: we want this to run exactly once on mount; depending on the
+  // referenced values (folders / rows / selectedPath) would re-run on every
+  // edit and keep re-seeding the selection, undoing the user's choice.
   React.useEffect(() => {
-    // Only auto-select if we're at a folder in the path and this is the first render
     if (isFirstRenderRef.current && selectedPath.length > 0) {
       const lastItem = selectedPath[selectedPath.length - 1]
       if (isFolder(lastItem)) {
         const folder = lastItem as QuestionBankFolder
-        // Get the items in this folder
         const subfolders = folders.filter(f => f.parentId === folder.id).sort((a, b) => a.name.localeCompare(b.name))
         const questionsInFolder = rows.filter(r => r.folderId === folder.id)
         const items: HierarchyItem[] = [...subfolders, ...questionsInFolder]
 
-        // If there are items and nothing is selected at the next level, select the first item
         if (items.length > 0 && !selectedPath[selectedPath.length + 1]) {
           setSelectedPath(prev => [...prev, items[0]])
           isFirstRenderRef.current = false
         }
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   // Build columns dynamically based on selected path
@@ -715,6 +718,28 @@ export const QuestionBankTable = React.forwardRef<
     searchLanding ? undefined : urlListSearch,
   )
 
+  // Persist this hub's table lifecycle (sort / search / filters / column
+  // visibility / etc.) to localStorage. See `lib/table-state-lifecycle`.
+  // NOTE: tabId is `"main"` here — the question-bank folder scope is
+  // already URL-driven (`?scope=`, `?folderId=`), so we only persist
+  // table chrome, not navigation.
+  const lifecycleColumnKeys = React.useMemo(
+    () => new Set(columns.map(c => c.key)),
+    [columns],
+  )
+  useTableStateLifecycle({
+    namespace: "question-bank",
+    tabId: "main",
+    tableState,
+    columnKeys: lifecycleColumnKeys,
+    extras: { conditionalRules },
+    onLoadExtras: e => {
+      if (e && Array.isArray(e.conditionalRules)) {
+        setConditionalRules(e.conditionalRules as ConditionalRule[])
+      }
+    },
+  })
+
   const openNewFolderForColumn = React.useCallback((parentId: string | null) => {
     setNewFolderParentId(parentId)
     setCustomizingFolder(null)

package/template/components/rotations-empty-state.tsx

@@ -17,6 +17,9 @@ export function RotationsEmptyState() {
       className="flex flex-1 flex-col items-center justify-center rounded-xl border border-dashed border-border/80 bg-muted/25 px-6 py-12 text-center min-h-[min(420px,calc(100svh-var(--header-height)-6rem))]"
     >
       <div className="mb-6 w-full max-w-[min(100%,280px)] shrink-0">
+        {/* Static SVG hero, above the fold — next/image can't optimize SVGs
+            without `dangerouslyAllowSVG`, and lazy-loading is wrong here. */}
+        {/* eslint-disable-next-line @next/next/no-img-element -- SVG; next/image can't optimize without dangerouslyAllowSVG */}
         <img
           src="/Illustration/Rotation.svg"
           alt=""

package/template/components/secondary-panel.tsx

@@ -9,12 +9,12 @@
  */
 
 import * as React from "react"
-import { cn } from "@/lib/utils"
 import { useSidebar } from "@/components/ui/sidebar"
 import { Tip } from "@/components/ui/tip"
 import { Button } from "@/components/ui/button"
 import { QuestionBankSecondaryNav } from "@/components/question-bank-secondary-nav"
 import { NestedSecondaryPanelShell } from "@/components/templates/nested-secondary-panel-shell"
+import { useSidebarReflowZoom } from "@/hooks/use-sidebar-reflow-zoom"
 import type { QuestionBankItem } from "@/lib/mock/question-bank"
 import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
 
@@ -87,13 +87,33 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
     React.useState<QuestionBankAccessBridge | null>(null)
   const { setOpen } = useSidebar()
 
+  /**
+   * Browser zoom ≥ 200% (or very short viewport) — same `useSidebarReflowZoom`
+   * signal the primary sidebar uses (WCAG 1.4.10). At that scale the 16rem
+   * secondary rail crowds out primary content, so we **auto-collapse it to
+   * the icon variant on entering high zoom**. We don't keep overriding —
+   * users can re-expand once collapsed; the next zoom-out → zoom-in cycle
+   * re-collapses. This matches the pattern users get from clicking the
+   * panel's own "Collapse to icons" button.
+   */
+  const reflowZoom = useSidebarReflowZoom()
+  const wasReflowZoomRef = React.useRef(false)
+  React.useEffect(() => {
+    if (reflowZoom && !wasReflowZoomRef.current) {
+      setSecondaryPanelCompact(true)
+    }
+    wasReflowZoomRef.current = reflowZoom
+  }, [reflowZoom])
+
   const openPanel = React.useCallback(
     (id: string) => {
-      setSecondaryPanelCompact(false)
+      // High zoom → keep the icon rail (auto-collapse rule above). At normal
+      // zoom this stays the legacy behavior (full-width on open).
+      setSecondaryPanelCompact(reflowZoom)
       setActivePanel(id)
       setOpen(false) // collapse main sidebar to icon rail
     },
-    [setOpen],
+    [setOpen, reflowZoom],
   )
 
   const closePanel = React.useCallback((opts?: ClosePanelOptions) => {
@@ -160,7 +180,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