@exxatdesignux/ui 0.2.15 → 0.2.17

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,15 +15,17 @@ 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"
 import { QuestionBankAccessBridge, QuestionBankFolderBridge } from "@/components/secondary-panel"
 import { KeyMetrics } from "@/components/key-metrics"
+import { useSidebar } from "@/components/ui/sidebar"
 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 +100,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 +178,34 @@ 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])
+
+  /**
+   * Open the full-page authoring composer (`/question-bank/new`).
+   * Pre-collapses the main sidebar (Placements pattern) so the user sees one
+   * smooth animation into the focused authoring flow. Folder scope, when
+   * present, is forwarded as `?folderId=` so the destination dropdown lands
+   * pre-selected on the right rail.
+   */
+  const { setOpen: setMainSidebarOpen } = useSidebar()
+  const handleNewQuestion = React.useCallback(() => {
+    const folderQuery =
+      navState.scope === "folder" && navState.folderId
+        ? `?folderId=${encodeURIComponent(navState.folderId)}`
+        : ""
+    setMainSidebarOpen(false)
+    window.setTimeout(() => router.push(`/question-bank/new${folderQuery}`), 260)
+  }, [navState.folderId, navState.scope, router, setMainSidebarOpen])
+
   const filteredItems = React.useMemo(
     () => applyQuestionBankHubDisplayFilters(items, folders, navState, landingFilters),
     [items, folders, landingFilters, navState],
@@ -235,7 +268,7 @@ export function QuestionBankClient() {
                     title={dedicatedSearchTitle}
                     questionCount={count}
                     hideNewQuestion
-                    onNewQuestion={() => {}}
+                    onNewQuestion={handleNewQuestion}
                     onExport={() => setExportOpen(true)}
                   />
                   <DedicatedSearchUrlComposer
@@ -331,76 +364,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={handleNewQuestion}
+                  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-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>
+      )}
+    />
   )
 }