@exxatdesignux/ui 0.2.16 → 0.2.17

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

@@ -8,10 +8,8 @@ import { OsFolderGlyph } from "@/components/data-views/os-folder-glyph"
 import { AskLeoComposer } from "@/components/ask-leo-composer"
 import { useAskLeo, useAskLeoPageContext } from "@/components/ask-leo-sidebar"
 import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
-import { Button } from "@/components/ui/button"
 import { Shortcut } from "@/components/ui/dropdown-menu"
-import { Kbd, KbdGroup } from "@/components/ui/kbd"
-import { Tip } from "@/components/ui/tip"
+import { useSidebar } from "@/components/ui/sidebar"
 import { useAltKeyLabel, useModKeyLabel } from "@/hooks/use-mod-key-label"
 import {
   DEFAULT_QUESTION_BANK_FOLDERS,
@@ -27,8 +25,10 @@ import {
 } from "@/lib/question-bank-nav"
 import { cn } from "@/lib/utils"
 
-const NEW_QUESTION_PROMPT =
-  "Help me create a new assessment question. Start by asking for topic, item type, difficulty, and learning objective, then draft the stem, answer choices, and rationale."
+const NEW_QUESTION_AUTHORING_PATH = "/question-bank/new"
+
+const DRAFT_WITH_LEO_PROMPT =
+  "Help me draft a new assessment question. Ask me for the topic, item type (NBME single best answer / NCLEX SATA / vignette / EMQ / T/F / short answer), Bloom level, and discipline, then propose stem, lead-in, answer options, and rationale I can paste into the authoring composer."
 
 const TEMPLATE_PROMPT =
   "Walk me through choosing a question template (MCQ, OSCE, short answer, true/false) and produce a starter item with stem, options, rationale, and tags."
@@ -140,7 +140,8 @@ function formatRelativeDate(iso: string): string {
 
 export function QuestionBankHubClient() {
   const router = useRouter()
-  const { openWithPrompt, toggle } = useAskLeo()
+  const { openWithPrompt } = useAskLeo()
+  const { setOpen: setMainSidebarOpen } = useSidebar()
   const mod = useModKeyLabel()
   const alt = useAltKeyLabel()
 
@@ -160,8 +161,19 @@ export function QuestionBankHubClient() {
     [openWithPrompt],
   )
 
+  /**
+   * Navigate to the full-page authoring composer (`/question-bank/new`).
+   * Mirrors the Placements "New placement" pre-collapse: animates the sidebar
+   * closed first so the user sees one smooth transition into the focused flow
+   * (the route also mounts `SidebarAutoCollapse` to lock it shut while there).
+   */
   const openCreateQuestion = React.useCallback(() => {
-    openWithPrompt(NEW_QUESTION_PROMPT)
+    setMainSidebarOpen(false)
+    window.setTimeout(() => router.push(NEW_QUESTION_AUTHORING_PATH), 260)
+  }, [router, setMainSidebarOpen])
+
+  const openDraftWithLeo = React.useCallback(() => {
+    openWithPrompt(DRAFT_WITH_LEO_PROMPT)
   }, [openWithPrompt])
 
   const onHubComposerSubmit = React.useCallback(
@@ -183,25 +195,25 @@ export function QuestionBankHubClient() {
     () => [
       {
         id: "scratch",
-        label: "From scratch",
+        label: "Start from scratch",
         description: "Start with an empty editor and build the item by hand.",
-        icon: "fa-pen-to-square",
+        icon: "fa-plus",
         iconTint: "bg-brand/15 text-brand",
         onClick: openCreateQuestion,
         shortcutKeys: createShortcut,
       },
       {
         id: "ask-leo",
-        label: "Draft with Ask Leo",
+        label: "Draft with Leo",
         description: "Describe the outcome and let Leo propose stem, options, and rationale.",
         icon: "fa-star-christmas",
         iconTint: "bg-brand/15 text-brand",
         badge: "AI",
-        onClick: openCreateQuestion,
+        onClick: openDraftWithLeo,
       },
       {
         id: "template",
-        label: "From a template",
+        label: "From template",
         description: "Pick MCQ, OSCE, short answer or true/false — Leo fills the scaffold.",
         icon: "fa-clone",
         iconTint: "bg-sky-500/15 text-sky-700 dark:text-sky-300",
@@ -209,14 +221,14 @@ export function QuestionBankHubClient() {
       },
       {
         id: "import",
-        label: "Import in bulk",
+        label: "Import",
         description: "Bring in CSV, QTI, or paste from another tool — Leo will map the columns.",
         icon: "fa-file-import",
         iconTint: "bg-muted text-muted-foreground",
         onClick: () => sendLeoSuggestion(IMPORT_PROMPT),
       },
     ],
-    [openCreateQuestion, sendLeoSuggestion, createShortcut],
+    [openCreateQuestion, openDraftWithLeo, sendLeoSuggestion, createShortcut],
   )
 
   return (
@@ -225,50 +237,101 @@ export function QuestionBankHubClient() {
         breadcrumbs: [{ label: "Dashboard", href: "/dashboard" }],
         title: "Question hub",
       }}
-      maxWidthClassName="max-w-5xl"
+      maxWidthClassName="max-w-none"
       contentClassName="px-4 py-8 md:px-6 md:py-10"
     >
       <Shortcut keys={createShortcut} onInvoke={openCreateQuestion} />
       {/* ⌘⌥K (Ask Leo toggle) is bound globally in AskLeoProvider — do not double-bind here. */}
 
       <div className="flex min-h-0 flex-1 flex-col gap-10">
-        <header>
+        <header className="mx-auto w-full max-w-5xl">
           <h1 className="text-2xl font-semibold tracking-tight text-foreground md:text-3xl" style={{ fontFamily: "var(--font-heading)" }}>
             Question hub
           </h1>
         </header>
 
-        <div className="min-w-0">
-          <p className="sr-only">
-            Example searches rotate in the field. Type your own request in plain language, then press Enter to open
-            the library with that AI search applied to the question list. This control does not open Ask Leo.
-          </p>
-          <div
-            className={cn(
-              "min-w-0 max-w-full border border-[color:var(--control-border)] bg-card shadow-sm transition-[border-radius,padding,box-shadow] duration-200 ease-out",
-              hubComposerExpanded ? "rounded-2xl p-1.5 shadow-md" : "rounded-full px-1 py-1",
-            )}
-          >
-            <AskLeoComposer
-              value={hubComposerValue}
-              onChange={setHubComposerValue}
-              onSubmit={onHubComposerSubmit}
-              onExpandedChange={setHubComposerExpanded}
-              animatedPlaceholders={[...HUB_COMPOSER_PLACEHOLDERS]}
-              animatedPlaceholderIntervalMs={4800}
-              animatedPlaceholderMaxLines={2}
-              leadingSlot="ai-mark"
-              inputLabel="AI search"
-              submitAppearance="search"
-              submitButtonAriaLabel="Run AI search"
-              placeholder="Search the bank…"
-              className="[&_form>div]:rounded-none [&_form>div]:border-0 [&_form>div]:bg-transparent [&_form>div]:shadow-none"
-            />
+        <section
+          aria-label="Search and create questions"
+          className="-mx-4 overflow-hidden px-4 py-6 md:-mx-6 md:px-6"
+          style={{
+            background: [
+              "radial-gradient(ellipse 118% 70% at 50% 100%, oklch(from var(--brand-color) l c h / 0.11) 0%, transparent 60%)",
+              "linear-gradient(180deg, var(--key-metrics-flat-grad-top) 0%, var(--key-metrics-flat-grad-mid) 48%, var(--background) 100%)",
+            ].join(", "),
+            boxShadow: "0 18px 42px -26px color-mix(in oklch, var(--brand-color) 10%, transparent)",
+          }}
+        >
+          <div className="mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 md:px-6">
+            <div className="min-w-0">
+              <p className="sr-only">
+                Example searches rotate in the field. Type your own request in plain language, then press Enter to open
+                the library with that AI search applied to the question list. This control does not open Ask Leo.
+              </p>
+              <div
+                className={cn(
+                  "min-w-0 max-w-full border border-[color:var(--control-border)] bg-card shadow-sm transition-[border-radius,padding,box-shadow] duration-200 ease-out",
+                  hubComposerExpanded ? "rounded-2xl p-1.5 shadow-md" : "rounded-full px-1 py-1",
+                )}
+              >
+                <AskLeoComposer
+                  value={hubComposerValue}
+                  onChange={setHubComposerValue}
+                  onSubmit={onHubComposerSubmit}
+                  onExpandedChange={setHubComposerExpanded}
+                  animatedPlaceholders={[...HUB_COMPOSER_PLACEHOLDERS]}
+                  animatedPlaceholderIntervalMs={4800}
+                  animatedPlaceholderMaxLines={2}
+                  leadingSlot="ai-mark"
+                  inputLabel="AI search"
+                  submitAppearance="search"
+                  submitButtonAriaLabel="Run AI search"
+                  placeholder="Search the bank…"
+                  className="[&_form>div]:rounded-none [&_form>div]:border-0 [&_form>div]:bg-transparent [&_form>div]:shadow-none"
+                />
+              </div>
+            </div>
+
+            {/* Create a question */}
+            <section aria-labelledby="qb-create" className="space-y-3">
+              <h2 id="qb-create" className="text-base font-semibold tracking-tight text-foreground">
+                Create a question
+              </h2>
+              <div className="flex flex-wrap items-center gap-2">
+                {createTiles.map(tile => (
+                  <button
+                    key={tile.id}
+                    type="button"
+                    onClick={tile.onClick}
+                    className={cn(
+                      "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-xs font-medium text-foreground transition",
+                      "hover:border-interactive-hover hover:bg-interactive-hover/30 hover:shadow-sm",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    )}
+                  >
+                    <i
+                      className={cn(
+                        tile.badge === "AI" ? "fa-duotone fa-solid" : "fa-light",
+                        tile.icon,
+                        "text-xs",
+                        tile.badge === "AI" ? "text-brand" : "text-muted-foreground",
+                      )}
+                      aria-hidden="true"
+                    />
+                    {tile.label}
+                    {tile.badge === "AI" && (
+                      <span className="rounded-full bg-brand/10 px-1.5 py-px text-[9px] font-bold uppercase tracking-wider text-brand">
+                        AI
+                      </span>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </section>
           </div>
-        </div>
+        </section>
 
         {recents.length > 0 && (
-          <section aria-labelledby="qb-recent" className="space-y-4">
+          <section aria-labelledby="qb-recent" className="mx-auto w-full max-w-5xl space-y-4">
             <div className="flex items-baseline justify-between gap-3">
               <h2 id="qb-recent" className="text-base font-semibold tracking-tight text-foreground">
                 Continue where you left off
@@ -305,7 +368,7 @@ export function QuestionBankHubClient() {
           </section>
         )}
 
-        <section aria-labelledby="qb-browse" className="space-y-4">
+        <section aria-labelledby="qb-browse" className="mx-auto w-full max-w-5xl space-y-4">
           <div className="flex items-baseline justify-between gap-3">
             <h2 id="qb-browse" className="text-base font-semibold tracking-tight text-foreground">
               Browse the library
@@ -360,76 +423,6 @@ export function QuestionBankHubClient() {
           </div>
         </section>
 
-        <section aria-labelledby="qb-create" className="space-y-4">
-          <div className="flex flex-wrap items-baseline justify-between gap-3">
-            <h2 id="qb-create" className="text-base font-semibold tracking-tight text-foreground">
-              Create a question
-            </h2>
-            <Tip
-              label={(
-                <span className="inline-flex items-center gap-1.5">
-                  Ask Leo
-                  <KbdGroup>
-                    <Kbd>{mod}</Kbd>
-                    <Kbd>{alt}</Kbd>
-                    <Kbd>K</Kbd>
-                  </KbdGroup>
-                </span>
-              )}
-            >
-              <Button type="button" variant="ghost" size="sm" onClick={toggle}>
-                <i className="fa-duotone fa-solid fa-star-christmas text-brand" aria-hidden="true" />
-                Open Ask Leo
-              </Button>
-            </Tip>
-          </div>
-
-          <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4" role="list">
-            {createTiles.map(tile => (
-              <li key={tile.id}>
-                <button
-                  type="button"
-                  onClick={tile.onClick}
-                  className="group flex h-full w-full flex-col items-start gap-3 rounded-xl border border-border bg-card p-4 text-left transition hover:border-interactive-hover hover:bg-interactive-hover/30 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                >
-                  <span className="flex w-full items-center justify-between">
-                    <span
-                      className={cn(
-                        "inline-flex h-10 w-10 items-center justify-center rounded-lg",
-                        tile.iconTint,
-                      )}
-                      aria-hidden="true"
-                    >
-                      <i
-                        className={cn(
-                          tile.badge === "AI" ? "fa-duotone fa-solid" : "fa-light",
-                          tile.icon,
-                          "text-lg",
-                        )}
-                      />
-                    </span>
-                    {tile.badge === "AI" && (
-                      <span className="inline-flex items-center rounded-full bg-brand/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-brand">
-                        AI
-                      </span>
-                    )}
-                  </span>
-                  <span className="space-y-1">
-                    <span className="block text-sm font-semibold text-foreground">{tile.label}</span>
-                    <span className="block text-xs leading-relaxed text-muted-foreground">
-                      {tile.description}
-                    </span>
-                  </span>
-                  {tile.shortcutKeys && (
-                    <KbdGroup className="mt-auto">
-                      <Kbd variant="bare">{tile.shortcutKeys}</Kbd>
-                    </KbdGroup>
-                  )}
-                </button>
-              </li>
-            ))}
-          </ul>
-        </section>
       </div>
     </PrimaryPageTemplate>
   )

package/template/components/question-bank-list-view.tsx

@@ -2,48 +2,13 @@
 
 import type { QuestionBankItem } from "@/lib/mock/question-bank"
 import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+import { DataRowList } from "@/components/data-views/data-row-list"
 import { formatDateUS } from "@/lib/date-filter"
 import {
   QuestionBankFavoriteButton,
   QUESTION_BANK_FAVORITE_HOVER_GROUP,
 } from "@/components/question-bank-favorite-button"
 
-function QuestionBankListRow({
-  row,
-  onToggleFavorite,
-  onRowActivate,
-}: {
-  row: QuestionBankItem
-  onToggleFavorite: (row: QuestionBankItem) => void
-  onRowActivate?: (row: QuestionBankItem) => void
-}) {
-  return (
-    <li>
-      <ListPageBoardCard
-        className={QUESTION_BANK_FAVORITE_HOVER_GROUP}
-        layout="row"
-        rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
-        onClick={onRowActivate ? () => onRowActivate(row) : undefined}
-        rowEnd={(
-          <div className="flex shrink-0 items-center gap-1">
-            <QuestionBankFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
-            <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
-          </div>
-        )}
-      >
-        <div className="space-y-0.5">
-          <p className="line-clamp-2 text-sm font-semibold text-foreground">{row.stem}</p>
-          <p className="font-mono text-xs text-muted-foreground">{row.questionId}</p>
-          <p className="text-xs text-muted-foreground">
-            {row.topic} · Updated {formatDateUS(row.updatedAt)}
-          </p>
-          <p className="text-xs text-muted-foreground">{row.author}</p>
-        </div>
-      </ListPageBoardCard>
-    </li>
-  )
-}
-
 export function QuestionBankListView({
   rows,
   onToggleFavorite,
@@ -54,24 +19,35 @@ export function QuestionBankListView({
   /** When set (e.g. table selection), clicking a row toggles the same selection as the grid. */
   onRowActivate?: (row: QuestionBankItem) => void
 }) {
-  if (rows.length === 0) {
-    return (
-      <div className="px-4 py-16 text-center lg:px-6">
-        <p className="text-sm text-muted-foreground">No questions match your filters.</p>
-      </div>
-    )
-  }
-
   return (
-    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
-      {rows.map(row => (
-        <QuestionBankListRow
-          key={row.id}
-          row={row}
-          onToggleFavorite={onToggleFavorite}
-          onRowActivate={onRowActivate}
-        />
-      ))}
-    </ul>
+    <DataRowList<QuestionBankItem>
+      rows={rows}
+      getRowId={row => row.id}
+      emptyState="No questions match your filters."
+      ariaLabel="Questions"
+      renderRow={row => (
+        <ListPageBoardCard
+          className={QUESTION_BANK_FAVORITE_HOVER_GROUP}
+          layout="row"
+          rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
+          onClick={onRowActivate ? () => onRowActivate(row) : undefined}
+          rowEnd={
+            <div className="flex shrink-0 items-center gap-1">
+              <QuestionBankFavoriteButton row={row} onToggleFavorite={onToggleFavorite} />
+              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+            </div>
+          }
+        >
+          <div className="space-y-0.5">
+            <p className="line-clamp-2 text-sm font-semibold text-foreground">{row.stem}</p>
+            <p className="font-mono text-xs text-muted-foreground">{row.questionId}</p>
+            <p className="text-xs text-muted-foreground">
+              {row.topic} · Updated {formatDateUS(row.updatedAt)}
+            </p>
+            <p className="text-xs text-muted-foreground">{row.author}</p>
+          </div>
+        </ListPageBoardCard>
+      )}
+    />
   )
 }

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-secondary-nav.tsx

@@ -21,7 +21,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
   Shortcut,
 } from "@/components/ui/dropdown-menu"
@@ -36,10 +35,8 @@ import {
   isQuestionBankNavActive,
   parseQuestionBankNav,
   QUESTION_BANK_FAVORITES_FOLDER_ID,
-  QUESTION_BANK_LIBRARY_HUB_PATHS,
   questionBankFavoritesFolderHref,
   questionBankHubScopeHref,
-  type QuestionBankNavScope,
 } from "@/lib/question-bank-nav"
 import { QuestionBankFolderTreeBranch } from "@/components/data-views/question-bank-folder-tree-branch"
 

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) => {