@exxatdesignux/ui 0.2.19 → 0.3.0

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

@@ -1,20 +1,27 @@
 "use client"
 
 /**
- * Question bank — DataTable + TablePropertiesDrawer + connected views via `ListPageConnectedViewBody`.
+ * 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 { QUESTION_BANK_SUPPORTED_VIEWS } from "@/lib/question-bank-supported-views"
 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,
@@ -24,13 +31,25 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Tip } from "@/components/ui/tip"
 import { Skeleton } from "@/components/ui/skeleton"
-import { ListPageConnectedViewBody } from "@/components/data-views/list-page-connected-view-body"
-import { ListPageCalendarView } from "@/components/data-views/list-page-calendar-view"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
-import { defineHubViewRenderers } from "@/lib/hub-connected-view-renderers"
-import { QuestionBankFolderColumnsPanel } from "@/components/question-bank-folder-columns-panel"
+import {
+  LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS,
+  LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS,
+  LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
+} 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,
@@ -49,17 +68,19 @@ import {
   type QuestionBankItem,
   type QuestionBankType,
 } from "@/lib/mock/question-bank"
-import type { QuestionBankFolder } 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(
   () =>
@@ -91,6 +112,8 @@ const QuestionBankDashboardChartsSection = dynamic(
   },
 )
 
+// ─── Constants ───────────────────────────────────────────────────────────────
+
 const TYPE_LABEL: Record<QuestionBankType, string> = {
   multiple_choice: "Multiple choice",
   true_false: "True / false",
@@ -103,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],
@@ -128,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 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 columnsToFilterFields(cols: ColumnDef<QuestionBankItem>[]) {
-  return cols.map(columnToFilterFieldDef).filter((x): x is FilterFieldDef => x !== null)
+function uniqueTopics(items: QuestionBankItem[]) {
+  return [...new Set(items.map(i => i.topic))].sort().map(t => ({ value: t, label: t }))
 }
 
 function buildQuestionBankColumns(
@@ -156,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",
@@ -176,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>
@@ -198,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>,
     },
     {
@@ -213,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>,
     },
     {
@@ -228,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",
@@ -257,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 (
@@ -312,168 +277,260 @@ function buildQuestionBankColumns(
         </div>
       ),
     },
-  )
-
-  return cols
+  ]
 }
 
-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
-    /** Aligns Properties view tiles with `ListPageTemplate` `supportedViewTypes`. */
-    supportedViewTypes?: readonly DataListViewType[]
-    folders: QuestionBankFolder[]
-    onFoldersChange: React.Dispatch<React.SetStateAction<QuestionBankFolder[]>>
-    onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
-  }
->(function QuestionBankTable(
-  {
-    items,
-    navState,
-    urlListSearch,
-    searchLanding,
-    landingFilters,
-    view = "table",
-    onViewChange,
-    supportedViewTypes = QUESTION_BANK_SUPPORTED_VIEWS,
-    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],
-  )
+// ─── Folder columns panel (custom multi-column miller view) ─────────────────
 
-  const resolveColumnLabel = React.useCallback(
-    (key: string) => columns.find(c => c.key === key)?.label ?? key,
-    [columns],
-  )
+interface HubFolderColumnsPanelProps {
+  folders: QuestionBankFolder[]
+  rows: QuestionBankItem[]
+  panelRenderDetail: (row: QuestionBankItem) => React.ReactNode
+  onAddFolder: (parentId: string | null) => void
+  onAddQuestion: (parentId: string | null) => void
+  onCustomizeFolder?: (folder: QuestionBankFolder) => void
+}
 
-  const [displayOptions, setDisplayOptions] = React.useState<DataListDisplayOptions>(DEFAULT_DATA_LIST_DISPLAY_OPTIONS)
-  const patchDisplay = React.useCallback((patch: Partial<DataListDisplayOptions>) => {
-    setDisplayOptions(prev => ({ ...prev, ...patch }))
-  }, [])
+type HierarchyItem = QuestionBankFolder | QuestionBankItem
 
-  const [newFolderOpen, setNewFolderOpen] = React.useState(false)
-  const [newFolderParentId, setNewFolderParentId] = React.useState<string | null>(null)
-  const [customizingFolder, setCustomizingFolder] = React.useState<QuestionBankFolder | null>(null)
+function isFolder(item: HierarchyItem): item is QuestionBankFolder {
+  return "parentId" in item
+}
 
-  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))
-  }, [])
+function isQuestion(item: HierarchyItem): item is QuestionBankItem {
+  return "stem" in item
+}
 
-  const tableState = useTableState(
-    tableSourceItems,
-    columns,
-    { key: "updatedAt", dir: "desc" },
-    undefined,
-    searchLanding ? undefined : urlListSearch,
+function HubFolderColumnsPanel({
+  folders,
+  rows,
+  panelRenderDetail,
+  onAddFolder,
+  onAddQuestion,
+  onCustomizeFolder,
+}: HubFolderColumnsPanelProps) {
+  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]]
+    return []
+  })
+
+  const isFirstRenderRef = React.useRef(true)
+
+  const rootFolders = React.useMemo(
+    () => folders.filter(f => f.parentId === null).sort((a, b) => a.name.localeCompare(b.name)),
+    [folders],
   )
 
-  const openNewFolderForColumn = React.useCallback((parentId: string | null) => {
-    setNewFolderParentId(parentId)
-    setCustomizingFolder(null)
-    setNewFolderOpen(true)
-  }, [])
+  const handleSelect = (item: HierarchyItem, depth: number) => {
+    setSelectedPath(prev => [...prev.slice(0, depth), item])
+  }
 
-  const openCustomizeFolderSheet = React.useCallback((folder: QuestionBankFolder) => {
-    setCustomizingFolder(folder)
-    setNewFolderOpen(true)
+  React.useEffect(() => {
+    if (isFirstRenderRef.current && selectedPath.length > 0) {
+      const lastItem = selectedPath[selectedPath.length - 1]
+      if (isFolder(lastItem)) {
+        const folder = lastItem as QuestionBankFolder
+        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
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  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],
-  )
+  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 (let i = 0; i < selectedPath.length; i++) {
+      const item = selectedPath[i]
+      if (isFolder(item)) {
+        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)
+        const items: HierarchyItem[] = [...subfolders, ...questionsInFolder]
+        if (items.length > 0) cols.push({ items, depth: i + 1, parentId: item.id })
+      }
+    }
+    return cols
+  }, [selectedPath, rootFolders, folders, rows])
 
-  React.useImperativeHandle(ref, () => ({
-    openPropertiesDrawer: () => {
-      tableState.setSheetOpen(true)
-    },
-  }), [tableState])
+  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 questionBankBoardGroupKey = QUESTION_BANK_BOARD_GROUP_OPTIONS.some(
-    o => o.key === displayOptions.boardGroupByColumnKey,
+  return (
+    <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} />}
+          <ResizablePanel
+            id={`col-${depth}`}
+            defaultSize={columnIdx === 0 ? 35 : columnIdx === 1 ? 35 : 30}
+            minSize={15}
+            className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}
+          >
+            <ListPageTreeColumnHeader
+              title={
+                depth === 0
+                  ? "Categories"
+                  : selectedPath[depth - 1] && isFolder(selectedPath[depth - 1])
+                    ? (selectedPath[depth - 1] as QuestionBankFolder).name
+                    : "Items"
+              }
+              trailing={
+                <>
+                  <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>
+                        <TooltipTrigger asChild>
+                          <Button
+                            size="icon-sm"
+                            variant="ghost"
+                            onClick={() => onAddFolder(parentId ?? null)}
+                            aria-label="Add folder"
+                          >
+                            <i className="fa-light fa-folder-plus text-xs" aria-hidden="true" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent side="top" sideOffset={4}>
+                          Add folder
+                        </TooltipContent>
+                      </Tooltip>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            size="icon-sm"
+                            variant="ghost"
+                            onClick={() => onAddQuestion(parentId ?? null)}
+                            aria-label="Add question"
+                          >
+                            <i className="fa-light fa-plus text-xs" aria-hidden="true" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent side="top" sideOffset={4}>
+                          Add question
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
+                  ) : null}
+                </>
+              }
+            />
+            <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
+                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">
+                    <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",
+                        isFolder_ && !isSelected && folder?.colorKey && depth > 0
+                          ? QUESTION_BANK_FOLDER_COLOR_STYLES[folder.colorKey]?.tile
+                          : "",
+                      )}
+                      aria-selected={isSelected}
+                      role="option"
+                    >
+                      {isFolder_ ? (
+                        <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" />
+                      )}
+                      <span className={cn("min-w-0 flex-1 truncate leading-tight", isSelected && "font-medium")}>
+                        {isFolder_ ? folder?.name : question?.stem}
+                      </span>
+                      <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>
+                    {isFolder_ && folder && (
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            type="button"
+                            size="icon-xs"
+                            variant="ghost"
+                            aria-label={`Actions for folder ${folder.name}`}
+                            className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                          >
+                            <i className="fa-light fa-ellipsis text-xs" aria-hidden="true" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem onSelect={() => onCustomizeFolder?.(folder)}>
+                            <i className="fa-light fa-wand-magic-sparkles text-xs" aria-hidden="true" />
+                            Customize
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </ResizablePanel>
+        </React.Fragment>
+      ))}
+      {(selectedQuestion || selectedFolderLeaf) && (
+        <>
+          <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />
+          <ResizablePanel id="col-detail" defaultSize={30} minSize={20} className={LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS}>
+            {selectedQuestion ? (
+              <>
+                <ListPageTreeColumnHeader title="Details" className="px-4" />
+                <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
+                  {panelRenderDetail(selectedQuestion)}
+                </div>
+              </>
+            ) : selectedFolderLeaf ? (
+              <div className="min-h-0 flex-1 overflow-hidden">
+                <FolderDetailsShell folder={selectedFolderLeaf} folders={folders} questions={rows} />
+              </div>
+            ) : null}
+          </ResizablePanel>
+        </>
+      )}
+    </ResizablePanelGroup>
   )
-    ? displayOptions.boardGroupByColumnKey
-    : "topic"
+}
 
-  const panelRenderDetail = (row: QuestionBankItem) => (
+// ─── Detail renderer reused by panel + tree-panel ───────────────────────────
+
+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>
@@ -505,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>
             ))}
@@ -521,209 +575,265 @@ 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,
-    supportedViewTypes,
-    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} />}
-    />
-  )
-
-  const toolbarShell = (body: React.ReactNode) => (
-    <div className="flex min-h-0 flex-1 flex-col">
-      {sharedToolbar}
-      {body}
-    </div>
-  )
-
-  const handleFolderSheetCreated = React.useCallback(
-    (newFolder: {
-      name: string
-      icon: string
-      colorKey: QuestionBankFolder["colorKey"]
-      parentId: string | null
-    }) => {
-      if (customizingFolder) {
-        onFoldersChange(prev =>
-          prev.map(f =>
-            f.id === customizingFolder.id
-              ? { ...f, name: newFolder.name, icon: newFolder.icon, colorKey: newFolder.colorKey }
-              : f,
-          ),
-        )
-        setCustomizingFolder(null)
-      } else {
-        onFoldersChange(prev => [
+    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],
+    )
+
+    // ─ 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: `fld-${Date.now()}`,
-            name: newFolder.name,
-            icon: newFolder.icon,
-            colorKey: newFolder.colorKey,
-            parentId: newFolder.parentId,
+            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,
           },
         ])
-      }
-      setNewFolderOpen(false)
-    },
-    [customizingFolder, onFoldersChange],
-  )
-
-  const folderSheet = (
-    <QuestionBankNewFolderSheet
-      open={newFolderOpen}
-      onOpenChange={setNewFolderOpen}
-      parentFolderId={customizingFolder?.parentId ?? newFolderParentId}
-      customizingFolder={customizingFolder}
-      onCreated={handleFolderSheetCreated}
-    />
-  )
-
-  const rows = tableState.rows as QuestionBankItem[]
-
-  return (
-    <ListPageConnectedViewBody
-      view={view}
-      hubLabel="Question bank"
-      renderers={defineHubViewRenderers(QUESTION_BANK_SUPPORTED_VIEWS, {
-        "data-table": (
-          <div className="pb-6">
-            <DataTable<QuestionBankItem> {...tableProps} />
-          </div>
-        ),
-        "list-with-toolbar": toolbarShell(
-          <QuestionBankListView
-            rows={rows}
-            onToggleFavorite={toggleFavorite}
-            onRowActivate={row => tableState.toggleRow(row.id)}
-          />,
-        ),
-        "board-with-toolbar": toolbarShell(
+      },
+      [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],
+    )
+
+    // ─ 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={rows}
-            groupByColumnKey={questionBankBoardGroupKey}
+            rows={state.rows as QuestionBankItem[]}
+            groupByColumnKey={boardGroupKey}
             onToggleFavorite={toggleFavorite}
-            onRowActivate={row => tableState.toggleRow(row.id)}
+            onRowActivate={row => state.toggleRow(row.id)}
           />,
-        ),
-        "folder-with-toolbar": toolbarShell(
+        )
+      },
+      "folder-with-toolbar": ({ state, toolbarShell }) =>
+        toolbarShell(
           <QuestionBankOsFolderView
             folders={folders}
             onFoldersChange={onFoldersChange}
-            questions={rows}
+            questions={state.rows as QuestionBankItem[]}
             onQuestionsChange={onItemsChange}
           />,
         ),
-        "panel-with-toolbar": (
-          <>
-            {toolbarShell(
-              <ListPageSplitHubChrome aria-label="Question bank folder columns">
-                <QuestionBankFolderColumnsPanel
-                  folders={folders}
-                  rows={rows}
-                  panelRenderDetail={panelRenderDetail}
-                  onAddFolder={openNewFolderForColumn}
-                  onAddQuestion={addQuestionInColumn}
-                  onCustomizeFolder={openCustomizeFolderSheet}
-                />
-              </ListPageSplitHubChrome>,
-            )}
-            {folderSheet}
-          </>
-        ),
-        "tree-panel-with-toolbar": (
-          <>
-            {toolbarShell(
-              <div className="flex min-h-0 flex-1 flex-col">
-                <HubTreePanelView
-                  items={rows}
-                  folders={folders}
-                  onItemsChange={onItemsChange}
-                  onFoldersChange={onFoldersChange}
-                />
-              </div>,
-            )}
-            {folderSheet}
-          </>
+      "panel-with-toolbar": ({ state, toolbarShell }) =>
+        toolbarShell(
+          <ListPageSplitHubChrome aria-label="Question bank folder columns">
+            <HubFolderColumnsPanel
+              folders={folders}
+              rows={state.rows as QuestionBankItem[]}
+              panelRenderDetail={questionBankPanelDetail}
+              onAddFolder={openNewFolderForColumn}
+              onAddQuestion={addQuestionInColumn}
+              onCustomizeFolder={openCustomizeFolderSheet}
+            />
+          </ListPageSplitHubChrome>,
         ),
-        "calendar-with-toolbar": toolbarShell(
-          <ListPageCalendarView
-            rows={rows}
-            getRowId={row => row.id}
-            getEventDate={row => row.updatedAt}
-            getEventLabel={row => row.stem}
-            getEventMeta={row => row.topic}
-            emptyMonthLabel="No questions on this day."
-            ariaLabel="Question bank calendar"
-            showSummaryPanel={displayOptions.showCalendarSummaryPanel}
-            calendarMainView={displayOptions.calendarMainView}
-            onCalendarMainViewChange={v => patchDisplay({ calendarMainView: v })}
-            onEventActivate={row => tableState.toggleRow(row.id)}
-          />,
-        ),
-        "dashboard-with-toolbar": toolbarShell(
-          <QuestionBankDashboardChartsSection rows={rows} />,
+      "tree-panel-with-toolbar": ({ state, toolbarShell }) =>
+        toolbarShell(
+          <div className="flex min-h-0 flex-1 flex-col">
+            <HubTreePanelView
+              items={state.rows as QuestionBankItem[]}
+              folders={folders}
+              onItemsChange={onItemsChange}
+              onFoldersChange={onFoldersChange}
+            />
+          </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}
+          parentFolderId={customizingFolder?.parentId ?? newFolderParentId}
+          customizingFolder={customizingFolder}
+          onCreated={(newFolder) => {
+            if (customizingFolder) {
+              onFoldersChange(prev =>
+                prev.map(f =>
+                  f.id === customizingFolder.id
+                    ? { ...f, name: newFolder.name, icon: newFolder.icon, colorKey: newFolder.colorKey }
+                    : f,
+                ),
+              )
+              setCustomizingFolder(null)
+            } else {
+              onFoldersChange(prev => [
+                ...prev,
+                {
+                  id: `fld-${Date.now()}`,
+                  name: newFolder.name,
+                  icon: newFolder.icon,
+                  colorKey: newFolder.colorKey,
+                  parentId: newFolder.parentId,
+                },
+              ])
+            }
+            setNewFolderOpen(false)
+          }}
+        />
+      </>
+    )
+  },
+)
 
 QuestionBankTable.displayName = "QuestionBankTable"