@exxatdesignux/ui 0.2.18 → 0.2.19

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

@@ -1,7 +1,7 @@
 "use client"
 
 /**
- * Question bank — DataTable + TablePropertiesDrawer + list/board/dashboard (KPI + charts on dashboard).
+ * Question bank — DataTable + TablePropertiesDrawer + connected views via `ListPageConnectedViewBody`.
  */
 
 import * as React from "react"
@@ -10,6 +10,7 @@ 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"
@@ -23,23 +24,11 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Tip } from "@/components/ui/tip"
 import { Skeleton } from "@/components/ui/skeleton"
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { ListPageConnectedViewBody } from "@/components/data-views/list-page-connected-view-body"
+import { ListPageCalendarView } from "@/components/data-views/list-page-calendar-view"
 import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
-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 { defineHubViewRenderers } from "@/lib/hub-connected-view-renderers"
+import { QuestionBankFolderColumnsPanel } from "@/components/question-bank-folder-columns-panel"
 import { QuestionBankBoardView, QUESTION_BANK_BOARD_GROUP_OPTIONS } from "@/components/question-bank-board-view"
 import { QuestionBankListView } from "@/components/question-bank-list-view"
 import {
@@ -60,7 +49,7 @@ 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 } from "@/lib/mock/question-bank-folders"
 import {
   toggleQuestionBankItemFavorite,
   applyQuestionBankHubDisplayFilters,
@@ -328,312 +317,6 @@ function buildQuestionBankColumns(
   return cols
 }
 
-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
-}
-
-type HierarchyItem = QuestionBankFolder | QuestionBankItem
-
-function isFolder(item: HierarchyItem): item is QuestionBankFolder {
-  return 'parentId' in item
-}
-
-function isQuestion(item: HierarchyItem): item is QuestionBankItem {
-  return 'stem' in item
-}
-
-/** **Panel view** — multi-column folder explorer + optional detail column (Finder-style). */
-function HubFolderColumnsPanel({
-  folders,
-  rows,
-  panelRenderDetail,
-  onAddFolder,
-  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]]
-    }
-    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])
-
-  // 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]
-      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
-  }, [])
-
-  // 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 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 })
-        }
-      }
-    }
-
-    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
-
-  return (
-    <ResizablePanelGroup
-      direction="horizontal"
-      className="flex h-full min-h-0 w-full flex-1 overflow-hidden"
-    >
-      {/* Render all columns with handles between them */}
-      {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}
-                </>
-              }
-            />
-
-            {/* 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 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",
-                        // Apply folder background color if it's a folder and not selected, but NOT in the first column
-                        isFolder_ && !isSelected && folder?.colorKey && depth > 0
-                          ? QUESTION_BANK_FOLDER_COLOR_STYLES[folder.colorKey]?.tile
-                          : "",
-                      )}
-                      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-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"
-                      )}>
-                        {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>
-                    </button>
-
-                    {/* Folder actions menu - only for folders */}
-                    {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>
-      ))}
-
-      {/* Details panel — question (summary) or folder (aggregates) */}
-      {(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>
-  )
-}
-
 export type QuestionBankTableHandle = OpenTablePropertiesHandle
 
 export const QuestionBankTable = React.forwardRef<
@@ -650,6 +333,8 @@ export const QuestionBankTable = React.forwardRef<
     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[]>>
@@ -663,6 +348,7 @@ export const QuestionBankTable = React.forwardRef<
     landingFilters,
     view = "table",
     onViewChange,
+    supportedViewTypes = QUESTION_BANK_SUPPORTED_VIEWS,
     folders,
     onFoldersChange,
     onItemsChange,
@@ -849,6 +535,7 @@ export const QuestionBankTable = React.forwardRef<
     onUpdateConditionalRule: updateConditionalRule,
     currentView: view,
     onViewChange,
+    supportedViewTypes,
     lifecycleTabLabel: "Question bank",
     boardGroupByColumnOptions: [...QUESTION_BANK_BOARD_GROUP_OPTIONS],
     renderFilterOptionValue,
@@ -899,172 +586,143 @@ export const QuestionBankTable = React.forwardRef<
     />
   )
 
-  if (view === "table") {
-    return (
-      <div className="pb-6">
-        <DataTable<QuestionBankItem> {...tableProps} />
-      </div>
-    )
-  }
-
-  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>
-    )
-  }
-
-  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>
-    )
-  }
+  const toolbarShell = (body: React.ReactNode) => (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {sharedToolbar}
+      {body}
+    </div>
+  )
 
-  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 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 => [
+          ...prev,
+          {
+            id: `fld-${Date.now()}`,
+            name: newFolder.name,
+            icon: newFolder.icon,
+            colorKey: newFolder.colorKey,
+            parentId: newFolder.parentId,
+          },
+        ])
+      }
+      setNewFolderOpen(false)
+    },
+    [customizingFolder, onFoldersChange],
+  )
 
-  if (view === "panel") {
-    return (
-      <>
-        <div className="flex min-h-0 flex-1 flex-col">
-          {sharedToolbar}
-          <ListPageSplitHubChrome aria-label="Question bank folder columns">
-            <HubFolderColumnsPanel
-              folders={folders}
-              rows={tableState.rows as QuestionBankItem[]}
-              panelRenderDetail={panelRenderDetail}
-              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)
-          }}
-        />
-      </>
-    )
-  }
+  const folderSheet = (
+    <QuestionBankNewFolderSheet
+      open={newFolderOpen}
+      onOpenChange={setNewFolderOpen}
+      parentFolderId={customizingFolder?.parentId ?? newFolderParentId}
+      customizingFolder={customizingFolder}
+      onCreated={handleFolderSheetCreated}
+    />
+  )
 
-  if (view === "tree-panel") {
-    return (
-      <>
-        <div className="flex min-h-0 flex-1 flex-col">
-          {sharedToolbar}
-          <div className="flex min-h-0 flex-1 flex-col">
-            <HubTreePanelView
-              items={tableState.rows as QuestionBankItem[]}
-              folders={folders}
-              onItemsChange={onItemsChange}
-              onFoldersChange={onFoldersChange}
-            />
-          </div>
-        </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)
-          }}
-        />
-      </>
-    )
-  }
+  const rows = tableState.rows as QuestionBankItem[]
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      {sharedToolbar}
-      <QuestionBankDashboardChartsSection rows={tableState.rows as QuestionBankItem[]} />
-    </div>
+    <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(
+          <QuestionBankBoardView
+            rows={rows}
+            groupByColumnKey={questionBankBoardGroupKey}
+            onToggleFavorite={toggleFavorite}
+            onRowActivate={row => tableState.toggleRow(row.id)}
+          />,
+        ),
+        "folder-with-toolbar": toolbarShell(
+          <QuestionBankOsFolderView
+            folders={folders}
+            onFoldersChange={onFoldersChange}
+            questions={rows}
+            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}
+          </>
+        ),
+        "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} />,
+        ),
+      })}
+    />
   )
 })