@exxatdesignux/ui 0.2.18 → 0.3.0

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

@@ -1,19 +1,27 @@
 "use client"
 
 /**
- * Question bank — DataTable + TablePropertiesDrawer + list/board/dashboard (KPI + charts on dashboard).
+ * Question bank — thin wrapper around the centralized `<HubTable>`. Owns column defs,
+ * folder/panel/tree-panel custom views, the new-folder + customize-folder sheet, and
+ * forwards URL search via `HubTable.syncedSearchFromUrl`.
+ *
+ * Single dataset rule: `HubTable` runs one `useTableState(tableSourceItems, columns, …)`.
+ * Every non-table renderer (list, board, folder, panel, tree-panel, dashboard) reads
+ * `state.rows` — the same filtered/sorted/searched bag as the grid.
  */
 
 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 { TablePropertiesDrawerButton } from "@/components/table-properties"
-import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
+import {
+  HubTable,
+  type HubTableHandle,
+  type HubTableRenderers,
+  type HubTableRendererArgs,
+} from "@/components/data-views"
+import { QUESTION_BANK_SUPPORTED_VIEWS } from "@/lib/question-bank-supported-views"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -41,7 +49,7 @@ import {
 } from "@/components/data-views/list-page-split-hub-tokens"
 import { ListPageTreeColumnHeader } from "@/components/data-views/list-page-tree-column-header"
 import { QuestionBankBoardView, QUESTION_BANK_BOARD_GROUP_OPTIONS } from "@/components/question-bank-board-view"
-import { QuestionBankListView } from "@/components/question-bank-list-view"
+import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
 import {
   QuestionBankFavoriteButton,
   QUESTION_BANK_FAVORITE_HOVER_GROUP,
@@ -60,17 +68,19 @@ import {
   type QuestionBankItem,
   type QuestionBankType,
 } from "@/lib/mock/question-bank"
-import { type QuestionBankFolder, QUESTION_BANK_FOLDER_COLOR_STYLES, QUESTION_BANK_FOLDER_ICON_COLORS } from "@/lib/mock/question-bank-folders"
+import {
+  type QuestionBankFolder,
+  QUESTION_BANK_FOLDER_COLOR_STYLES,
+  QUESTION_BANK_FOLDER_ICON_COLORS,
+} from "@/lib/mock/question-bank-folders"
 import {
   toggleQuestionBankItemFavorite,
   applyQuestionBankHubDisplayFilters,
   type QuestionBankLandingFilterState,
   type QuestionBankNavState,
 } from "@/lib/question-bank-nav"
-import {
-  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
-  type DataListDisplayOptions,
-} from "@/lib/data-list-display-options"
+
+// ─── Dynamic dashboard charts section ────────────────────────────────────────
 
 const QuestionBankDashboardChartsSection = dynamic(
   () =>
@@ -102,6 +112,8 @@ const QuestionBankDashboardChartsSection = dynamic(
   },
 )
 
+// ─── Constants ───────────────────────────────────────────────────────────────
+
 const TYPE_LABEL: Record<QuestionBankType, string> = {
   multiple_choice: "Multiple choice",
   true_false: "True / false",
@@ -114,21 +126,6 @@ const DIFFICULTY_LABEL: Record<QuestionBankDifficulty, string> = {
   hard: "Hard",
 }
 
-function newQuestionBankItemId() {
-  return `q-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`
-}
-
-/** Folder id to use when adding a question from the root column (`parentId` null). */
-function defaultFolderIdForColumnParent(parentId: string | null, folders: QuestionBankFolder[]): string | null {
-  if (parentId !== null) return parentId
-  const roots = [...folders].filter(f => f.parentId === null).sort((a, b) => a.name.localeCompare(b.name))
-  return roots[0]?.id ?? null
-}
-
-function uniqueTopics(items: QuestionBankItem[]) {
-  return [...new Set(items.map(i => i.topic))].sort().map(t => ({ value: t, label: t }))
-}
-
 const TYPE_FILTER_OPTS = (Object.keys(TYPE_LABEL) as QuestionBankType[]).map(k => ({
   value: k,
   label: TYPE_LABEL[k],
@@ -139,26 +136,18 @@ const DIFFICULTY_FILTER_OPTS = (Object.keys(DIFFICULTY_LABEL) as QuestionBankDif
   label: DIFFICULTY_LABEL[k],
 }))
 
-function columnToFilterFieldDef(c: ColumnDef<QuestionBankItem>): FilterFieldDef | null {
-  if (!c.filter) return null
-  const f = c.filter
-  const defaultOps: FilterOperator[] =
-    f.type === "select" || f.type === "date"
-      ? ["is", "is_not"]
-      : ["contains", "not_contains"]
-  return {
-    key: c.key,
-    label: c.label,
-    icon: f.icon ?? "fa-filter",
-    type: f.type,
-    operators: (f.operators ?? defaultOps) as FilterOperator[],
-    options: f.options,
-    ...(f.textMask ? { textMask: f.textMask } : {}),
-  }
+function newQuestionBankItemId() {
+  return `q-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`
 }
 
-function columnsToFilterFields(cols: ColumnDef<QuestionBankItem>[]) {
-  return cols.map(columnToFilterFieldDef).filter((x): x is FilterFieldDef => x !== null)
+function defaultFolderIdForColumnParent(parentId: string | null, folders: QuestionBankFolder[]): string | null {
+  if (parentId !== null) return parentId
+  const roots = [...folders].filter(f => f.parentId === null).sort((a, b) => a.name.localeCompare(b.name))
+  return roots[0]?.id ?? null
+}
+
+function uniqueTopics(items: QuestionBankItem[]) {
+  return [...new Set(items.map(i => i.topic))].sort().map(t => ({ value: t, label: t }))
 }
 
 function buildQuestionBankColumns(
@@ -167,18 +156,8 @@ function buildQuestionBankColumns(
 ): ColumnDef<QuestionBankItem>[] {
   const topicOpts = uniqueTopics(items)
   const { onToggleFavorite } = opts
-
-  const COLUMN_SELECT: ColumnDef<QuestionBankItem> = {
-    key: "select",
-    label: "",
-    width: 40,
-    minWidth: 40,
-    defaultPin: "left",
-    lockPin: true,
-  }
-
-  const cols: ColumnDef<QuestionBankItem>[] = [COLUMN_SELECT]
-  cols.push(
+  return [
+    { key: "select", label: "", width: 40, minWidth: 40, defaultPin: "left", lockPin: true },
     {
       key: "stem",
       label: "Question",
@@ -187,14 +166,10 @@ function buildQuestionBankColumns(
       sortable: true,
       sortKey: "stem",
       defaultPin: "left",
-      filter: {
-        type: "text",
-        icon: "fa-file-lines",
-        operators: ["contains", "not_contains"],
-      },
+      filter: { type: "text", icon: "fa-file-lines", operators: ["contains", "not_contains"] },
       cell: row => (
         <div className={cn(QUESTION_BANK_FAVORITE_HOVER_GROUP, "flex min-w-0 items-start gap-2")}>
-          <div className="flex min-w-0 flex-1 flex-col gap-0.5 pr-1">
+          <div className="flex min-w-0 flex-1 flex-col gap-0.5 pe-1">
             <span className="line-clamp-2 text-sm font-medium text-foreground">{row.stem}</span>
             <span className="font-mono text-xs text-muted-foreground">{row.questionId}</span>
           </div>
@@ -209,12 +184,7 @@ function buildQuestionBankColumns(
       minWidth: 120,
       sortable: true,
       sortKey: "topic",
-      filter: {
-        type: "select",
-        icon: "fa-layer-group",
-        operators: ["is", "is_not"],
-        options: topicOpts,
-      },
+      filter: { type: "select", icon: "fa-layer-group", operators: ["is", "is_not"], options: topicOpts },
       cell: row => <span className="text-sm text-foreground/90">{row.topic}</span>,
     },
     {
@@ -224,12 +194,7 @@ function buildQuestionBankColumns(
       minWidth: 120,
       sortable: true,
       sortKey: "type",
-      filter: {
-        type: "select",
-        icon: "fa-list-check",
-        operators: ["is", "is_not"],
-        options: TYPE_FILTER_OPTS,
-      },
+      filter: { type: "select", icon: "fa-list-check", operators: ["is", "is_not"], options: TYPE_FILTER_OPTS },
       cell: row => <span className="text-sm text-foreground/90">{TYPE_LABEL[row.type]}</span>,
     },
     {
@@ -239,15 +204,8 @@ function buildQuestionBankColumns(
       minWidth: 96,
       sortable: true,
       sortKey: "difficulty",
-      filter: {
-        type: "select",
-        icon: "fa-signal",
-        operators: ["is", "is_not"],
-        options: DIFFICULTY_FILTER_OPTS,
-      },
-      cell: row => (
-        <span className="text-sm text-foreground/90">{DIFFICULTY_LABEL[row.difficulty]}</span>
-      ),
+      filter: { type: "select", icon: "fa-signal", operators: ["is", "is_not"], options: DIFFICULTY_FILTER_OPTS },
+      cell: row => <span className="text-sm text-foreground/90">{DIFFICULTY_LABEL[row.difficulty]}</span>,
     },
     {
       key: "updatedAt",
@@ -268,11 +226,7 @@ function buildQuestionBankColumns(
       minWidth: 200,
       sortable: true,
       sortKey: "author",
-      filter: {
-        type: "text",
-        icon: "fa-user",
-        operators: ["contains", "not_contains"],
-      },
+      filter: { type: "text", icon: "fa-user", operators: ["contains", "not_contains"] },
       cell: row => {
         const initials = initialsFromDisplayName(row.author)
         return (
@@ -323,11 +277,11 @@ function buildQuestionBankColumns(
         </div>
       ),
     },
-  )
-
-  return cols
+  ]
 }
 
+// ─── Folder columns panel (custom multi-column miller view) ─────────────────
+
 interface HubFolderColumnsPanelProps {
   folders: QuestionBankFolder[]
   rows: QuestionBankItem[]
@@ -340,14 +294,13 @@ interface HubFolderColumnsPanelProps {
 type HierarchyItem = QuestionBankFolder | QuestionBankItem
 
 function isFolder(item: HierarchyItem): item is QuestionBankFolder {
-  return 'parentId' in item
+  return "parentId" in item
 }
 
 function isQuestion(item: HierarchyItem): item is QuestionBankItem {
-  return 'stem' in item
+  return "stem" in item
 }
 
-/** **Panel view** — multi-column folder explorer + optional detail column (Finder-style). */
 function HubFolderColumnsPanel({
   folders,
   rows,
@@ -356,37 +309,25 @@ function HubFolderColumnsPanel({
   onAddQuestion,
   onCustomizeFolder,
 }: HubFolderColumnsPanelProps) {
-  // Track the selected path through the hierarchy
-  // Initialize with first folder selected by default
   const [selectedPath, setSelectedPath] = React.useState<HierarchyItem[]>(() => {
     const rootFolders = folders
       .filter(f => f.parentId === null)
       .sort((a, b) => a.name.localeCompare(b.name))
-    if (rootFolders.length > 0) {
-      return [rootFolders[0]]
-    }
+    if (rootFolders.length > 0) return [rootFolders[0]]
     return []
   })
 
-  // Track if this is the first render for auto-selection
   const isFirstRenderRef = React.useRef(true)
 
-  // Get root items (top-level folders)
-  const rootFolders = React.useMemo(() => {
-    return folders
-      .filter(f => f.parentId === null)
-      .sort((a, b) => a.name.localeCompare(b.name))
-  }, [folders])
+  const rootFolders = React.useMemo(
+    () => folders.filter(f => f.parentId === null).sort((a, b) => a.name.localeCompare(b.name)),
+    [folders],
+  )
 
-  // Handle selection at any depth
   const handleSelect = (item: HierarchyItem, depth: number) => {
     setSelectedPath(prev => [...prev.slice(0, depth), item])
   }
 
-  // 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(() => {
     if (isFirstRenderRef.current && selectedPath.length > 0) {
       const lastItem = selectedPath[selectedPath.length - 1]
@@ -395,7 +336,6 @@ function HubFolderColumnsPanel({
         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 (items.length > 0 && !selectedPath[selectedPath.length + 1]) {
           setSelectedPath(prev => [...prev, items[0]])
           isFirstRenderRef.current = false
@@ -405,53 +345,31 @@ function HubFolderColumnsPanel({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // Build columns dynamically based on selected path
   const columns: Array<{ items: HierarchyItem[]; depth: number; parentId?: string | null }> = React.useMemo(() => {
     const cols: Array<{ items: HierarchyItem[]; depth: number; parentId?: string | null }> = [
       { items: rootFolders, depth: 0, parentId: null },
     ]
-
-    // For each selected folder in the path, add a column with its children
     for (let i = 0; i < selectedPath.length; i++) {
       const item = selectedPath[i]
       if (isFolder(item)) {
-        // Get subfolders
-        const subfolders = folders
-          .filter(f => f.parentId === item.id)
-          .sort((a, b) => a.name.localeCompare(b.name))
-
-        // Get questions in this folder
+        const subfolders = folders.filter(f => f.parentId === item.id).sort((a, b) => a.name.localeCompare(b.name))
         const questionsInFolder = rows.filter(r => r.folderId === item.id)
-
-        // Combine folders and questions
         const items: HierarchyItem[] = [...subfolders, ...questionsInFolder]
-
-        if (items.length > 0) {
-          cols.push({ items, depth: i + 1, parentId: item.id })
-        }
+        if (items.length > 0) cols.push({ items, depth: i + 1, parentId: item.id })
       }
     }
-
     return cols
   }, [selectedPath, rootFolders, folders, rows])
 
   const selectedLeaf = selectedPath.length > 0 ? selectedPath.at(-1)! : null
-  const selectedQuestion =
-    selectedLeaf && isQuestion(selectedLeaf) ? (selectedLeaf as QuestionBankItem) : null
-  const selectedFolderLeaf =
-    selectedLeaf && isFolder(selectedLeaf) ? (selectedLeaf as QuestionBankFolder) : null
+  const selectedQuestion = selectedLeaf && isQuestion(selectedLeaf) ? (selectedLeaf as QuestionBankItem) : null
+  const selectedFolderLeaf = selectedLeaf && isFolder(selectedLeaf) ? (selectedLeaf as QuestionBankFolder) : null
 
   return (
-    <ResizablePanelGroup
-      direction="horizontal"
-      className="flex h-full min-h-0 w-full flex-1 overflow-hidden"
-    >
-      {/* Render all columns with handles between them */}
+    <ResizablePanelGroup direction="horizontal" className="flex h-full min-h-0 w-full flex-1 overflow-hidden">
       {columns.map(({ items, depth, parentId }, columnIdx) => (
         <React.Fragment key={`col-${depth}`}>
-          {columnIdx > 0 && (
-            <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />
-          )}
+          {columnIdx > 0 && <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />}
           <ResizablePanel
             id={`col-${depth}`}
             defaultSize={columnIdx === 0 ? 35 : columnIdx === 1 ? 35 : 30}
@@ -468,9 +386,7 @@ function HubFolderColumnsPanel({
               }
               trailing={
                 <>
-                  <span className="shrink-0 text-xs font-medium text-muted-foreground tabular-nums">
-                    {items.length}
-                  </span>
+                  <span className="shrink-0 text-xs font-medium text-muted-foreground tabular-nums">{items.length}</span>
                   {depth < columns.length - 1 && items.length > 0 ? (
                     <div className="flex shrink-0 items-center gap-0.5">
                       <Tooltip>
@@ -508,38 +424,23 @@ function HubFolderColumnsPanel({
                 </>
               }
             />
-
-            {/* Scrollable Items List */}
             <div className="min-h-0 flex-1 overflow-y-auto py-1">
               {items.map(item => {
                 const isSelected = selectedPath[depth]?.id === item.id
                 const isFolder_ = isFolder(item)
                 const folder = isFolder_ ? item : null
                 const question = isQuestion(item) ? item : null
-
-                // Get count for folders
-                const subfolderCount = isFolder_
-                  ? folders.filter(f => f.parentId === item.id).length
-                  : 0
-                const questionCount = isFolder_
-                  ? rows.filter(r => r.folderId === item.id).length
-                  : 0
+                const subfolderCount = isFolder_ ? folders.filter(f => f.parentId === item.id).length : 0
+                const questionCount = isFolder_ ? rows.filter(r => r.folderId === item.id).length : 0
                 const itemCount = subfolderCount + questionCount
-
                 return (
-                  <div
-                    key={item.id}
-                    className="group flex items-center hover:bg-muted/50"
-                  >
+                  <div key={item.id} className="group flex items-center hover:bg-muted/50">
                     <button
                       onClick={() => handleSelect(item, depth)}
                       className={cn(
                         "flex flex-1 items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-75",
                         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-                        isSelected
-                          ? "bg-accent text-accent-foreground"
-                          : "text-foreground",
-                        // Apply folder background color if it's a folder and not selected, but NOT in the first column
+                        isSelected ? "bg-accent text-accent-foreground" : "text-foreground",
                         isFolder_ && !isSelected && folder?.colorKey && depth > 0
                           ? QUESTION_BANK_FOLDER_COLOR_STYLES[folder.colorKey]?.tile
                           : "",
@@ -547,36 +448,34 @@ function HubFolderColumnsPanel({
                       aria-selected={isSelected}
                       role="option"
                     >
-                      {/* Icon - show for folders and questions */}
                       {isFolder_ ? (
-                        <i className={cn(
-                          "fa-folder text-sm shrink-0",
-                          isSelected ? "fa-solid" : "fa-light",
-                          // Apply folder color from customization (for both selected and unselected)
-                          folder?.colorKey && QUESTION_BANK_FOLDER_ICON_COLORS[folder.colorKey]
-                        )} aria-hidden="true" />
+                        <i
+                          className={cn(
+                            "fa-folder text-sm shrink-0",
+                            isSelected ? "fa-solid" : "fa-light",
+                            folder?.colorKey && QUESTION_BANK_FOLDER_ICON_COLORS[folder.colorKey],
+                          )}
+                          aria-hidden="true"
+                        />
                       ) : (
                         <i className={cn("fa-file text-sm shrink-0", isSelected ? "fa-solid" : "fa-light")} aria-hidden="true" />
                       )}
-
-                      {/* Name */}
-                      <span className={cn(
-                        "min-w-0 flex-1 truncate leading-tight",
-                        isSelected && "font-medium"
-                      )}>
+                      <span className={cn("min-w-0 flex-1 truncate leading-tight", isSelected && "font-medium")}>
                         {isFolder_ ? folder?.name : question?.stem}
                       </span>
-
-                      {/* Count or metadata */}
-                      <span className={cn(
-                        "shrink-0 tabular-nums text-xs ml-auto",
-                        isSelected ? "text-accent-foreground/70" : "text-muted-foreground",
-                      )}>
-                        {isFolder_ ? itemCount : (question?.type === 'multiple_choice' ? 'MCQ' : question?.difficulty?.charAt(0).toUpperCase())}
+                      <span
+                        className={cn(
+                          "shrink-0 tabular-nums text-xs ms-auto",
+                          isSelected ? "text-accent-foreground/70" : "text-muted-foreground",
+                        )}
+                      >
+                        {isFolder_
+                          ? itemCount
+                          : question?.type === "multiple_choice"
+                            ? "MCQ"
+                            : question?.difficulty?.charAt(0).toUpperCase()}
                       </span>
                     </button>
-
-                    {/* Folder actions menu - only for folders */}
                     {isFolder_ && folder && (
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
@@ -605,8 +504,6 @@ function HubFolderColumnsPanel({
           </ResizablePanel>
         </React.Fragment>
       ))}
-
-      {/* Details panel — question (summary) or folder (aggregates) */}
       {(selectedQuestion || selectedFolderLeaf) && (
         <>
           <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />
@@ -620,11 +517,7 @@ function HubFolderColumnsPanel({
               </>
             ) : selectedFolderLeaf ? (
               <div className="min-h-0 flex-1 overflow-hidden">
-                <FolderDetailsShell
-                  folder={selectedFolderLeaf}
-                  folders={folders}
-                  questions={rows}
-                />
+                <FolderDetailsShell folder={selectedFolderLeaf} folders={folders} questions={rows} />
               </div>
             ) : null}
           </ResizablePanel>
@@ -634,160 +527,10 @@ function HubFolderColumnsPanel({
   )
 }
 
-export type QuestionBankTableHandle = OpenTablePropertiesHandle
-
-export const QuestionBankTable = React.forwardRef<
-  QuestionBankTableHandle,
-  {
-    items: QuestionBankItem[]
-    /** When set, table / board / tree rows are limited to this nav scope (secondary sidebar). */
-    navState?: QuestionBankNavState
-    /** URL toolbar search binding (`?q=`) — omit on search landing so hub `q` does not pre-fill the grid search. */
-    urlListSearch?: string
-    /** When true, dedicated search shell: hub landing row filters; table toolbar search stays independent of URL `q`. */
-    searchLanding?: boolean
-    /** Applied with nav filters before `useTableState` when {@link searchLanding} is true. */
-    landingFilters?: QuestionBankLandingFilterState | null
-    view?: DataListViewType
-    onViewChange?: (v: DataListViewType) => void
-    folders: QuestionBankFolder[]
-    onFoldersChange: React.Dispatch<React.SetStateAction<QuestionBankFolder[]>>
-    onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
-  }
->(function QuestionBankTable(
-  {
-    items,
-    navState,
-    urlListSearch,
-    searchLanding,
-    landingFilters,
-    view = "table",
-    onViewChange,
-    folders,
-    onFoldersChange,
-    onItemsChange,
-  },
-  ref,
-) {
-  const tableSourceItems = React.useMemo(() => {
-    const nav = navState ?? { scope: "all" as const, folderId: null }
-    const landing = searchLanding ? (landingFilters ?? null) : null
-    return applyQuestionBankHubDisplayFilters(items, folders, nav, landing)
-  }, [items, folders, navState, searchLanding, landingFilters])
-
-  const toggleFavorite = React.useCallback(
-    (row: QuestionBankItem) => {
-      onItemsChange(prev => prev.map(r => (r.id === row.id ? toggleQuestionBankItemFavorite(r) : r)))
-    },
-    [onItemsChange],
-  )
-
-  const columns = React.useMemo(
-    () => buildQuestionBankColumns(tableSourceItems, { onToggleFavorite: toggleFavorite }),
-    [tableSourceItems, toggleFavorite],
-  )
-  const filterFields = React.useMemo(() => columnsToFilterFields(columns), [columns])
-  const fieldDefinitionsForDrawer = React.useMemo(
-    () =>
-      columns
-        .filter(c => c.key !== "select" && c.key !== "favorite" && c.key !== "actions")
-        .map(c => ({ key: c.key, label: c.label, sortable: !!(c.sortable && (c.sortKey ?? c.key)) })),
-    [columns],
-  )
-
-  const resolveColumnLabel = React.useCallback(
-    (key: string) => columns.find(c => c.key === key)?.label ?? key,
-    [columns],
-  )
-
-  const [displayOptions, setDisplayOptions] = React.useState<DataListDisplayOptions>(DEFAULT_DATA_LIST_DISPLAY_OPTIONS)
-  const patchDisplay = React.useCallback((patch: Partial<DataListDisplayOptions>) => {
-    setDisplayOptions(prev => ({ ...prev, ...patch }))
-  }, [])
-
-  const [newFolderOpen, setNewFolderOpen] = React.useState(false)
-  const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
-  const [customizingFolder, setCustomizingFolder] = React.useState<QuestionBankFolder | null>(null)
-
-  const [conditionalRules, setConditionalRules] = React.useState<ConditionalRule[]>([])
-  const addConditionalRule = React.useCallback((rule: Omit<ConditionalRule, "id">) => {
-    setConditionalRules(prev => [...prev, { ...rule, id: `cr-${Date.now()}` }])
-  }, [])
-  const removeConditionalRule = React.useCallback((id: string) => {
-    setConditionalRules(prev => prev.filter(r => r.id !== id))
-  }, [])
-  const updateConditionalRule = React.useCallback((id: string, patch: Partial<ConditionalRule>) => {
-    setConditionalRules(prev => prev.map(r => r.id === id ? { ...r, ...patch } : r))
-  }, [])
-
-  const tableState = useTableState(
-    tableSourceItems,
-    columns,
-    { key: "updatedAt", dir: "desc" },
-    undefined,
-    searchLanding ? undefined : urlListSearch,
-  )
-
-  const openNewFolderForColumn = React.useCallback((parentId: string | null) => {
-    setNewFolderParentId(parentId)
-    setCustomizingFolder(null)
-    setNewFolderOpen(true)
-  }, [])
-
-  const openCustomizeFolderSheet = React.useCallback((folder: QuestionBankFolder) => {
-    setCustomizingFolder(folder)
-    setNewFolderOpen(true)
-  }, [])
-
-  const addQuestionInColumn = React.useCallback(
-    (parentId: string | null) => {
-      const folderId = defaultFolderIdForColumnParent(parentId, folders)
-      if (!folderId) return
-      const today = new Date()
-      const y = today.getFullYear()
-      const m = String(today.getMonth() + 1).padStart(2, "0")
-      const d = String(today.getDate()).padStart(2, "0")
-      onItemsChange(prev => [
-        ...prev,
-        {
-          id: newQuestionBankItemId(),
-          questionId: newQuestionBankQuestionId(),
-          stem: "New question",
-          topic: "General",
-          type: "short_answer",
-          difficulty: "medium",
-          author: "Demo user",
-          authorEmail: "demo.user@demo.exxat.io",
-          updatedAt: `${y}-${m}-${d}`,
-          folderId,
-        },
-      ])
-    },
-    [folders, onItemsChange],
-  )
-
-  const renderFilterOptionValue = React.useCallback(
-    (fieldKey: string, value: string): React.ReactNode => {
-      const col = columns.find(c => c.key === fieldKey)
-      const opt = col?.filter?.options?.find(o => o.value === value)
-      return <span className="text-foreground">{opt?.label ?? value}</span>
-    },
-    [columns],
-  )
-
-  React.useImperativeHandle(ref, () => ({
-    openPropertiesDrawer: () => {
-      tableState.setSheetOpen(true)
-    },
-  }), [tableState])
-
-  const questionBankBoardGroupKey = QUESTION_BANK_BOARD_GROUP_OPTIONS.some(
-    o => o.key === displayOptions.boardGroupByColumnKey,
-  )
-    ? displayOptions.boardGroupByColumnKey
-    : "topic"
+// ─── Detail renderer reused by panel + tree-panel ───────────────────────────
 
-  const panelRenderDetail = (row: QuestionBankItem) => (
+function questionBankPanelDetail(row: QuestionBankItem) {
+  return (
     <div className="flex min-w-0 flex-col gap-4">
       <div>
         <h3 className="text-sm font-semibold text-foreground mb-2">Question</h3>
@@ -819,14 +562,11 @@ export const QuestionBankTable = React.forwardRef<
                 <span className="text-xs font-medium text-muted-foreground mt-0.5 shrink-0">
                   {String.fromCharCode(65 + idx)}.
                 </span>
-                <span className={cn(
-                  "text-sm",
-                  option.isCorrect ? "text-foreground font-medium" : "text-foreground/80"
-                )}>
+                <span className={cn("text-sm", option.isCorrect ? "text-foreground font-medium" : "text-foreground/80")}>
                   {option.text}
                 </span>
                 {option.isCorrect && (
-                  <i className="fa-light fa-check text-emerald-600 text-sm ml-auto shrink-0" aria-hidden="true" />
+                  <i className="fa-light fa-check text-emerald-600 text-sm ms-auto shrink-0" aria-hidden="true" />
                 )}
               </div>
             ))}
@@ -835,190 +575,232 @@ export const QuestionBankTable = React.forwardRef<
       )}
     </div>
   )
+}
 
-  const drawerToolbarProps = {
-    totalRows: tableSourceItems.length,
-    filterFields,
-    fieldDefinitions: fieldDefinitionsForDrawer,
-    resolveColumnLabel,
-    displayOptions,
-    onDisplayOptionsChange: patchDisplay,
-    conditionalRules,
-    onAddConditionalRule: addConditionalRule,
-    onRemoveConditionalRule: removeConditionalRule,
-    onUpdateConditionalRule: updateConditionalRule,
-    currentView: view,
-    onViewChange,
-    lifecycleTabLabel: "Question bank",
-    boardGroupByColumnOptions: [...QUESTION_BANK_BOARD_GROUP_OPTIONS],
-    renderFilterOptionValue,
-  }
+// ─── Public component ───────────────────────────────────────────────────────
+
+export type QuestionBankTableHandle = HubTableHandle
+
+export interface QuestionBankTableProps {
+  items: QuestionBankItem[]
+  /** When set, table / board / tree rows are limited to this nav scope (secondary sidebar). */
+  navState?: QuestionBankNavState
+  /** URL toolbar search binding (`?q=`) — omit on search landing so hub `q` does not pre-fill the grid search. */
+  urlListSearch?: string
+  /** When true, dedicated search shell: hub landing row filters; table toolbar search stays independent of URL `q`. */
+  searchLanding?: boolean
+  /** Applied with nav filters before `useTableState` when {@link searchLanding} is true. */
+  landingFilters?: QuestionBankLandingFilterState | null
+  view?: DataListViewType
+  onViewChange?: (v: DataListViewType) => void
+  folders: QuestionBankFolder[]
+  onFoldersChange: React.Dispatch<React.SetStateAction<QuestionBankFolder[]>>
+  onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
+}
 
-  const tableProps = {
-    data: tableSourceItems,
-    columns,
-    getRowId: (row: QuestionBankItem) => row.id,
-    getRowSelectionLabel: (row: QuestionBankItem) => row.stem,
-    selectable: true,
-    searchable: displayOptions.showToolbarSearch,
-    showColumnHeaders: displayOptions.showColumnLabels,
-    groupable: true,
-    defaultSort: { key: "updatedAt", dir: "desc" as const },
-    emptyState: <p className="text-sm text-muted-foreground">No questions in the bank.</p>,
-    conditionalRules,
-    state: tableState,
-    renderFilterOptionValue,
-    toolbarSlot: (s: ReturnType<typeof useTableState<QuestionBankItem>>) => (
-      <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />
-    ),
-    bulkActionsSlot: (selected: Set<string | number>) => {
-      const n = selected.size
-      if (n === 0) return null
-      return (
-        <>
-          <span className="sr-only">{n} selected</span>
-          <Tip label="Export selection (demo)">
-            <Button size="sm" variant="outline" type="button">
-              <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-              Export
-            </Button>
-          </Tip>
-        </>
-      )
+export const QuestionBankTable = React.forwardRef<QuestionBankTableHandle, QuestionBankTableProps>(
+  function QuestionBankTable(
+    {
+      items,
+      navState,
+      urlListSearch,
+      searchLanding,
+      landingFilters,
+      view = "table",
+      onViewChange,
+      folders,
+      onFoldersChange,
+      onItemsChange,
     },
-  }
-
-  const sharedToolbar = (
-    <DataTableToolbar
-      state={tableState}
-      columns={columns}
-      searchable={displayOptions.showToolbarSearch}
-      searchAriaLabel="Search questions"
-      renderFilterOptionValue={renderFilterOptionValue}
-      toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
-    />
-  )
-
-  if (view === "table") {
-    return (
-      <div className="pb-6">
-        <DataTable<QuestionBankItem> {...tableProps} />
-      </div>
+    ref,
+  ) {
+    const tableSourceItems = React.useMemo(() => {
+      const nav = navState ?? { scope: "all" as const, folderId: null }
+      const landing = searchLanding ? (landingFilters ?? null) : null
+      return applyQuestionBankHubDisplayFilters(items, folders, nav, landing)
+    }, [items, folders, navState, searchLanding, landingFilters])
+
+    const toggleFavorite = React.useCallback(
+      (row: QuestionBankItem) => {
+        onItemsChange(prev => prev.map(r => (r.id === row.id ? toggleQuestionBankItemFavorite(r) : r)))
+      },
+      [onItemsChange],
     )
-  }
 
-  if (view === "list") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <QuestionBankListView
-          rows={tableState.rows as QuestionBankItem[]}
-          onToggleFavorite={toggleFavorite}
-          onRowActivate={row => tableState.toggleRow(row.id)}
-        />
-      </div>
+    const columns = React.useMemo(
+      () => buildQuestionBankColumns(tableSourceItems, { onToggleFavorite: toggleFavorite }),
+      [tableSourceItems, toggleFavorite],
     )
-  }
 
-  if (view === "board") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <QuestionBankBoardView
-          rows={tableState.rows as QuestionBankItem[]}
-          groupByColumnKey={questionBankBoardGroupKey}
-          onToggleFavorite={toggleFavorite}
-          onRowActivate={row => tableState.toggleRow(row.id)}
-        />
-      </div>
+    // ─ New-folder / customize-folder modal state (shared by panel + tree-panel) ────
+    const [newFolderOpen, setNewFolderOpen] = React.useState(false)
+    const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
+    const [customizingFolder, setCustomizingFolder] = React.useState<QuestionBankFolder | null>(null)
+
+    const openNewFolderForColumn = React.useCallback((parentId: string | null) => {
+      setNewFolderParentId(parentId)
+      setCustomizingFolder(null)
+      setNewFolderOpen(true)
+    }, [])
+
+    const openCustomizeFolderSheet = React.useCallback((folder: QuestionBankFolder) => {
+      setCustomizingFolder(folder)
+      setNewFolderOpen(true)
+    }, [])
+
+    const addQuestionInColumn = React.useCallback(
+      (parentId: string | null) => {
+        const folderId = defaultFolderIdForColumnParent(parentId, folders)
+        if (!folderId) return
+        const today = new Date()
+        const y = today.getFullYear()
+        const m = String(today.getMonth() + 1).padStart(2, "0")
+        const d = String(today.getDate()).padStart(2, "0")
+        onItemsChange(prev => [
+          ...prev,
+          {
+            id: newQuestionBankItemId(),
+            questionId: newQuestionBankQuestionId(),
+            stem: "New question",
+            topic: "General",
+            type: "short_answer",
+            difficulty: "medium",
+            author: "Demo user",
+            authorEmail: "demo.user@demo.exxat.io",
+            updatedAt: `${y}-${m}-${d}`,
+            folderId,
+          },
+        ])
+      },
+      [folders, onItemsChange],
     )
-  }
 
-  if (view === "folder") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <QuestionBankOsFolderView
-          folders={folders}
-          onFoldersChange={onFoldersChange}
-          questions={tableState.rows as QuestionBankItem[]}
-          onQuestionsChange={onItemsChange}
-        />
-      </div>
+    const renderFilterOptionValue = React.useCallback(
+      (fieldKey: string, value: string): React.ReactNode => {
+        const col = columns.find(c => c.key === fieldKey)
+        const opt = col?.filter?.options?.find(o => o.value === value)
+        return <span className="text-foreground">{opt?.label ?? value}</span>
+      },
+      [columns],
     )
-  }
 
-  if (view === "panel") {
-    return (
-      <>
-        <div className="flex min-h-0 flex-1 flex-col">
-          {sharedToolbar}
+    // ─ Renderers ──────────────────────────────────────────────────────────────
+    const renderers: HubTableRenderers<QuestionBankItem> = {
+      "board-with-toolbar": ({ state, toolbarShell, displayOptions }) => {
+        const boardGroupKey = QUESTION_BANK_BOARD_GROUP_OPTIONS.some(
+          o => o.key === displayOptions.boardGroupByColumnKey,
+        )
+          ? displayOptions.boardGroupByColumnKey
+          : "topic"
+        return toolbarShell(
+          <QuestionBankBoardView
+            rows={state.rows as QuestionBankItem[]}
+            groupByColumnKey={boardGroupKey}
+            onToggleFavorite={toggleFavorite}
+            onRowActivate={row => state.toggleRow(row.id)}
+          />,
+        )
+      },
+      "folder-with-toolbar": ({ state, toolbarShell }) =>
+        toolbarShell(
+          <QuestionBankOsFolderView
+            folders={folders}
+            onFoldersChange={onFoldersChange}
+            questions={state.rows as QuestionBankItem[]}
+            onQuestionsChange={onItemsChange}
+          />,
+        ),
+      "panel-with-toolbar": ({ state, toolbarShell }) =>
+        toolbarShell(
           <ListPageSplitHubChrome aria-label="Question bank folder columns">
             <HubFolderColumnsPanel
               folders={folders}
-              rows={tableState.rows as QuestionBankItem[]}
-              panelRenderDetail={panelRenderDetail}
+              rows={state.rows as QuestionBankItem[]}
+              panelRenderDetail={questionBankPanelDetail}
               onAddFolder={openNewFolderForColumn}
               onAddQuestion={addQuestionInColumn}
               onCustomizeFolder={openCustomizeFolderSheet}
             />
-          </ListPageSplitHubChrome>
-        </div>
-        <QuestionBankNewFolderSheet
-          open={newFolderOpen}
-          onOpenChange={setNewFolderOpen}
-          parentFolderId={customizingFolder?.parentId ?? newFolderParentId}
-          customizingFolder={customizingFolder}
-          onCreated={(newFolder) => {
-            if (customizingFolder) {
-              // Update existing folder
-              onFoldersChange(prev =>
-                prev.map(f =>
-                  f.id === customizingFolder.id
-                    ? {
-                        ...f,
-                        name: newFolder.name,
-                        icon: newFolder.icon,
-                        colorKey: newFolder.colorKey,
-                      }
-                    : f,
-                ),
-              )
-              setCustomizingFolder(null)
-            } else {
-              // Create new folder
-              onFoldersChange(prev => [
-                ...prev,
-                {
-                  id: `fld-${Date.now()}`,
-                  name: newFolder.name,
-                  icon: newFolder.icon,
-                  colorKey: newFolder.colorKey,
-                  parentId: newFolder.parentId,
-                },
-              ])
-            }
-            setNewFolderOpen(false)
-          }}
-        />
-      </>
-    )
-  }
-
-  if (view === "tree-panel") {
-    return (
-      <>
-        <div className="flex min-h-0 flex-1 flex-col">
-          {sharedToolbar}
+          </ListPageSplitHubChrome>,
+        ),
+      "tree-panel-with-toolbar": ({ state, toolbarShell }) =>
+        toolbarShell(
           <div className="flex min-h-0 flex-1 flex-col">
             <HubTreePanelView
-              items={tableState.rows as QuestionBankItem[]}
+              items={state.rows as QuestionBankItem[]}
               folders={folders}
               onItemsChange={onItemsChange}
               onFoldersChange={onFoldersChange}
             />
-          </div>
+          </div>,
+        ),
+      "dashboard-with-toolbar": ({ state, toolbar }) => (
+        <div className="flex min-h-0 flex-1 flex-col">
+          {toolbar}
+          <QuestionBankDashboardChartsSection rows={state.rows as QuestionBankItem[]} />
         </div>
+      ),
+    }
+
+    return (
+      <>
+        <HubTable<QuestionBankItem>
+          rows={tableSourceItems}
+          columns={columns}
+          view={view}
+          onViewChange={onViewChange}
+          supportedViewTypes={QUESTION_BANK_SUPPORTED_VIEWS}
+          hubLabel="Question bank"
+          lifecycleTabLabel="Question bank"
+          searchAriaLabel="Search questions"
+          getRowId={row => row.id}
+          getRowSelectionLabel={row => row.stem}
+          defaultSort={{ key: "updatedAt", dir: "desc" }}
+          emptyState={<p className="text-sm text-muted-foreground">No questions in the bank.</p>}
+          boardGroupByColumnOptions={[...QUESTION_BANK_BOARD_GROUP_OPTIONS]}
+          renderFilterOptionValue={renderFilterOptionValue}
+          syncedSearchFromUrl={searchLanding ? undefined : urlListSearch}
+          listAriaLabel="Questions"
+          listEmptyState="No questions match your filters."
+          renderListRow={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"
+              rowEnd={
+                <div className="flex shrink-0 items-center gap-1">
+                  <QuestionBankFavoriteButton row={row} onToggleFavorite={toggleFavorite} />
+                  <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>
+          )}
+          bulkActionsSlot={selected => {
+            if (selected.size === 0) return null
+            return (
+              <>
+                <span className="sr-only">{selected.size} selected</span>
+                <Tip label="Export selection (demo)">
+                  <Button size="sm" variant="outline" type="button">
+                    <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+                    Export
+                  </Button>
+                </Tip>
+              </>
+            )
+          }}
+          renderers={renderers}
+          handleRef={ref}
+        />
         <QuestionBankNewFolderSheet
           open={newFolderOpen}
           onOpenChange={setNewFolderOpen}
@@ -1026,22 +808,15 @@ export const QuestionBankTable = React.forwardRef<
           customizingFolder={customizingFolder}
           onCreated={(newFolder) => {
             if (customizingFolder) {
-              // Update existing folder
               onFoldersChange(prev =>
                 prev.map(f =>
                   f.id === customizingFolder.id
-                    ? {
-                        ...f,
-                        name: newFolder.name,
-                        icon: newFolder.icon,
-                        colorKey: newFolder.colorKey,
-                      }
+                    ? { ...f, name: newFolder.name, icon: newFolder.icon, colorKey: newFolder.colorKey }
                     : f,
                 ),
               )
               setCustomizingFolder(null)
             } else {
-              // Create new folder
               onFoldersChange(prev => [
                 ...prev,
                 {
@@ -1058,14 +833,7 @@ export const QuestionBankTable = React.forwardRef<
         />
       </>
     )
-  }
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      {sharedToolbar}
-      <QuestionBankDashboardChartsSection rows={tableState.rows as QuestionBankItem[]} />
-    </div>
-  )
-})
+  },
+)
 
 QuestionBankTable.displayName = "QuestionBankTable"