@exxatdesignux/ui 0.2.17 → 0.2.19

package/template/components/list-hub-table.tsx

@@ -0,0 +1,336 @@
+"use client"
+
+/**
+ * List hub table — `DataTable` + `useTableState`; table | list | board | calendar | dashboard
+ * share `tableState.rows` (centralized dataset).
+ */
+
+import * as React from "react"
+import type { ListHubRecord } from "@/lib/mock/list-hub-directory"
+import { DataTable, DataTableToolbar } from "@/components/data-table"
+import { useTableState } from "@/components/data-table/use-table-state"
+import type { ColumnDef } from "@/components/data-table/types"
+import type { DataListViewType } from "@/lib/data-list-view"
+import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
+import { LIST_HUB_SUPPORTED_VIEWS } from "@/lib/list-hub-supported-views"
+import { TablePropertiesDrawerButton } from "@/components/table-properties"
+import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
+import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
+import { ListPageConnectedViewBody } from "@/components/data-views/list-page-connected-view-body"
+import { defineHubViewRenderers } from "@/lib/hub-connected-view-renderers"
+import { ListPageCalendarView } from "@/components/data-views/list-page-calendar-view"
+import { ListHubCardGrid } from "@/components/list-hub-board-view"
+import { ListHubListView } from "@/components/list-hub-list-view"
+import {
+  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
+  type DataListDisplayOptions,
+} from "@/lib/data-list-display-options"
+
+function columnToFilterFieldDef(c: ColumnDef<ListHubRecord>): 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 columnsToFilterFields(cols: ColumnDef<ListHubRecord>[]) {
+  return cols.map(columnToFilterFieldDef).filter((x): x is FilterFieldDef => x !== null)
+}
+
+function buildListHubColumns(): ColumnDef<ListHubRecord>[] {
+  return [
+    {
+      key: "select",
+      label: "",
+      width: 40,
+      minWidth: 40,
+      defaultPin: "left",
+      lockPin: true,
+    },
+    {
+      key: "title",
+      label: "Title",
+      width: 280,
+      minWidth: 160,
+      sortable: true,
+      sortKey: "title",
+      filter: {
+        type: "text",
+        icon: "fa-file-lines",
+        operators: ["contains", "not_contains"],
+      },
+      cell: row => <span className="truncate text-sm font-medium text-foreground">{row.title}</span>,
+    },
+    {
+      key: "id",
+      label: "ID",
+      width: 120,
+      minWidth: 100,
+      sortable: true,
+      sortKey: "id",
+      filter: {
+        type: "text",
+        icon: "fa-hashtag",
+        operators: ["contains", "not_contains"],
+      },
+      cell: row => <span className="font-mono text-sm tabular-nums text-foreground/90">{row.id}</span>,
+    },
+    {
+      key: "eventDate",
+      label: "Event date",
+      width: 140,
+      minWidth: 120,
+      sortable: true,
+      sortKey: "eventDate",
+      filter: {
+        type: "date",
+        icon: "fa-calendar-days",
+        operators: ["is", "is_not"],
+      },
+      cell: row => <span className="text-sm tabular-nums text-foreground">{row.eventDate}</span>,
+    },
+    {
+      key: "category",
+      label: "Category",
+      width: 140,
+      minWidth: 100,
+      sortable: true,
+      sortKey: "category",
+      filter: {
+        type: "text",
+        icon: "fa-tag",
+        operators: ["contains", "not_contains"],
+      },
+      cell: row => <span className="text-sm text-muted-foreground">{row.category}</span>,
+    },
+    {
+      key: "actions",
+      label: "",
+      width: 48,
+      minWidth: 48,
+      defaultPin: "right",
+      lockPin: true,
+      cell: () => null,
+    },
+  ]
+}
+
+export type ListHubTableHandle = OpenTablePropertiesHandle
+
+export const ListHubTable = React.forwardRef<
+  ListHubTableHandle,
+  {
+    rows: ListHubRecord[]
+    view?: DataListViewType
+    onViewChange?: (v: DataListViewType) => void
+    /** Aligns Properties view tiles with `ListPageTemplate` `supportedViewTypes`. */
+    supportedViewTypes?: readonly DataListViewType[]
+  }
+>(function ListHubTable(
+  { rows, view = "board", onViewChange, supportedViewTypes = LIST_HUB_SUPPORTED_VIEWS },
+  ref,
+) {
+  const columns = React.useMemo(() => buildListHubColumns(), [])
+  const filterFields = React.useMemo(() => columnsToFilterFields(columns), [columns])
+  const fieldDefinitionsForDrawer = React.useMemo(
+    () =>
+      columns
+        .filter(c => c.key !== "select" && 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 [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<ListHubRecord>(rows, columns, { key: "title", dir: "asc" })
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      openPropertiesDrawer: () => {
+        tableState.setSheetOpen(true)
+      },
+    }),
+    [tableState.setSheetOpen],
+  )
+
+  const panelGroupsBuilder = (filtered: ListHubRecord[]): FinderGroup[] => [
+    { id: "all", label: `All records (${filtered.length})`, count: filtered.length },
+  ]
+
+  const panelRenderListRow = (row: ListHubRecord) => (
+    <div className="min-w-0 flex-1">
+      <p className="truncate text-sm font-medium text-foreground">{row.title}</p>
+      <p className="truncate text-xs text-muted-foreground">{row.category}</p>
+    </div>
+  )
+
+  const panelRenderDetail = (row: ListHubRecord) => (
+    <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4">
+      <div>
+        <h3 className="mb-1 text-sm font-semibold text-foreground">{row.title}</h3>
+        <p className="text-xs text-muted-foreground">{row.category}</p>
+      </div>
+      <dl className="grid gap-2 text-sm">
+        <div>
+          <dt className="text-xs font-medium text-muted-foreground">ID</dt>
+          <dd className="font-mono tabular-nums">{row.id}</dd>
+        </div>
+        <div>
+          <dt className="text-xs font-medium text-muted-foreground">Event date</dt>
+          <dd className="tabular-nums">{row.eventDate}</dd>
+        </div>
+      </dl>
+    </div>
+  )
+
+  const drawerToolbarProps = {
+    state: tableState,
+    totalRows: rows.length,
+    filterFields,
+    fieldDefinitions: fieldDefinitionsForDrawer,
+    resolveColumnLabel,
+    displayOptions,
+    onDisplayOptionsChange: patchDisplay,
+    conditionalRules,
+    onAddConditionalRule: addConditionalRule,
+    onRemoveConditionalRule: removeConditionalRule,
+    onUpdateConditionalRule: updateConditionalRule,
+    currentView: view,
+    onViewChange,
+    supportedViewTypes,
+    lifecycleTabLabel: "List hub",
+  }
+
+  const tableProps = {
+    data: rows,
+    columns,
+    getRowId: (row: ListHubRecord) => row.id,
+    getRowSelectionLabel: (row: ListHubRecord) => row.title,
+    selectable: true,
+    searchable: displayOptions.showToolbarSearch,
+    showColumnHeaders: displayOptions.showColumnLabels,
+    groupable: true,
+    defaultSort: { key: "title", dir: "asc" as const },
+    emptyState: <p className="text-sm text-muted-foreground">No records match your filters.</p>,
+    conditionalRules,
+    state: tableState,
+    toolbarSlot: (s: ReturnType<typeof useTableState<ListHubRecord>>) => (
+      <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>
+        </>
+      )
+    },
+  }
+
+  const sharedToolbar = (
+    <DataTableToolbar
+      state={tableState}
+      columns={columns}
+      searchable={displayOptions.showToolbarSearch}
+      searchAriaLabel="Search records"
+      toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
+    />
+  )
+
+  const toolbarShell = (body: React.ReactNode) => (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {sharedToolbar}
+      {body}
+    </div>
+  )
+
+  return (
+    <ListPageConnectedViewBody
+      view={view}
+      hubLabel="List hub"
+      renderers={defineHubViewRenderers(LIST_HUB_SUPPORTED_VIEWS, {
+        "data-table": (
+          <div className="pb-6">
+            <DataTable<ListHubRecord> {...tableProps} />
+          </div>
+        ),
+        "list-with-toolbar": toolbarShell(<ListHubListView rows={tableState.rows} />),
+        "board-with-toolbar": toolbarShell(<ListHubCardGrid rows={tableState.rows} />),
+        "calendar-with-toolbar": toolbarShell(
+          <ListPageCalendarView
+            rows={tableState.rows}
+            getRowId={row => row.id}
+            getEventDate={row => row.eventDate}
+            getEventLabel={row => row.title}
+            getEventMeta={row => row.category}
+            emptyMonthLabel="No events on this day."
+            ariaLabel="List hub calendar"
+            showSummaryPanel={displayOptions.showCalendarSummaryPanel}
+            calendarMainView={displayOptions.calendarMainView}
+            onCalendarMainViewChange={v => patchDisplay({ calendarMainView: v })}
+          />,
+        ),
+        "panel-with-toolbar": toolbarShell(
+          <ListPageSplitHubChrome aria-label="List hub panel view">
+            <FinderPanelView<ListHubRecord>
+              embedded
+              groupsColumnTitle="Records"
+              groups={panelGroupsBuilder(tableState.rows)}
+              rows={tableState.rows}
+              getRowId={row => row.id}
+              getRowGroupId={() => "all"}
+              autoSaveId="list-hub-panel-view"
+              renderListRow={panelRenderListRow}
+              renderDetail={panelRenderDetail}
+              emptyList={<p className="text-sm text-muted-foreground">No records found.</p>}
+            />
+          </ListPageSplitHubChrome>
+        ),
+      })}
+    />
+  )
+})
+
+ListHubTable.displayName = "ListHubTable"

package/template/components/new-question-composer.tsx

@@ -7,21 +7,10 @@
  *
  *   ├─ PageHeader (title + actions; parent trail is in `SiteHeader`)
  *   │     · "New question" + "V1 · Last updated …" subtitle
- *   │     · single primary CTA — Save as draft (⏎)
- *   │     · ⋯ overflow menu (⌘⌥M) for inspector toggle + discard
- *   ├─ 2-column layout (lg+): page scrolls as one; inspector card `sticky` on lg+
- *   │     ┌─ Builder (left, no card chrome)
- *   │     │     · Question prompt        (h1-style Textarea — type-aware)
- *   │     │     · Answer block — varies by question type
- *   │     │     · Explanation / rubric / model answer
- *   │     │     · References             (repeatable list)
- *   │     └─ Inspector (right, bg-card panel)
- *   │           · Question format        (SelectionTileGrid → compact)
- *   │           · Location               (folder SelectionTileGrid)
- *   │           · Difficulty / Bloom / NBME (chips)
- *   │           · Tags                   (Input + Badge list)
- *   │       Sidebar-style collapse (⌘⌥]) — collapsed rail mimics
- *   │       `NestedSecondaryPanelShell` icon mode.
+ *   │     · Save question (⏎) + Save as draft + ⋯ discard (⌘⌥M)
+ *   └─ Single column (`FocusedWorkflowPageTemplate` — see `docs/focused-workflow-page-pattern.md`)
+ *         · Details — format, folder, difficulty, Bloom, NBME, tags
+ *         · Question prompt, answer block, explanation, references
  *
  * Composes existing primitives — `PageHeader`, `Form`/`FormField`,
  * `Input`, `Textarea`, `Checkbox`, `Badge`, `Button`, `Tip`, `Kbd`,
@@ -776,11 +765,9 @@ export function NewQuestionComposer({
   const router = useRouter()
   const [submitting, setSubmitting] = React.useState(false)
   const [tagDraft, setTagDraft] = React.useState("")
-  const [inspectorOpen, setInspectorOpen] = React.useState(true)
   const [moreOpen, setMoreOpen] = React.useState(false)
-  /** Question-type chooser visibility — collapses into a single
-      "selected type" tile once the author picks the first time so the
-      inspector stays compact for the rest of the authoring flow. */
+  const [inspectorOpen, setInspectorOpen] = React.useState(true)
+  /** Question-type chooser — collapses to a compact row after first pick. */
   const [typeChooserOpen, setTypeChooserOpen] = React.useState(true)
   /** Local folder list — extended in-place when the author adds one
       from the location picker so the new entry is selectable without
@@ -1102,11 +1089,6 @@ export function NewQuestionComposer({
             disabled={submitting}
             onInvoke={() => setMoreOpen(o => !o)}
           />
-          <Shortcut
-            keys="⌘⌥]"
-            disabled={submitting}
-            onInvoke={() => setInspectorOpen(o => !o)}
-          />
 
           <form
             onSubmit={form.handleSubmit(values => persist({ ...values, status: "in_review" }, "publish"))}

package/template/components/product-switcher.tsx

@@ -52,6 +52,7 @@ export function ProductSwitcher() {
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
+              tooltip={iconRail ? current.label : undefined}
               className={cn(
                 "items-start py-2 text-sidebar-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
                 expandedOrMobile &&
@@ -64,10 +65,9 @@ export function ProductSwitcher() {
               suppressHydrationWarning
             >
               {iconRail ? (
-                // Collapsed icon-rail product mark must read as a peer of the
-                // school selector, without a white cutout patch on the rail.
+                // Collapsed icon-rail product mark — same frame as school avatar.
                 <span className="flex size-8 shrink-0 items-center justify-center">
-                  <ExxatProductMark product={current.id} className="size-8" cutoutColor="var(--sidebar)" />
+                  <ExxatProductMark product={current.id} className="size-7" />
                 </span>
               ) : (
                 <>
@@ -92,8 +92,8 @@ export function ProductSwitcher() {
 
           <DropdownMenuContent
             align="start"
-            side="bottom"
-            sideOffset={4}
+            side={iconRail ? "right" : "bottom"}
+            sideOffset={iconRail ? 8 : 4}
           >
             <DropdownMenuLabel className="text-xs text-muted-foreground">
               Switch product

package/template/components/product-wordmark.tsx

@@ -16,9 +16,8 @@
  *   recolored with the brand's gradient / fill. The SVG geometry stays
  *   constant so existing layouts keep working.
  *
- * `variant="mutedSuffix"` (used by the product switcher / sidebar): in **dark**
- * mode only, the suffix tints to `--muted-foreground` so the wordmark recedes
- * into the rail. Light mode keeps the brand color for recognition.
+ * `variant="mutedSuffix"` (sidebar / switcher): prefix recedes in dark mode;
+ * suffix always uses `wordmarkColor` (Exxat pink) for brand recognition.
  */
 
 import * as React from "react"
@@ -50,7 +49,6 @@ export function ProductWordmark({
 }: ProductWordmarkProps) {
   const prefix = config.prefix ?? "Exxat"
   const { suffix, brandColor, wordmarkColor } = config
-  const mutedSuffix = variant === "mutedSuffix"
   const suffixColor = wordmarkColor ?? brandColor
 
   return (
@@ -100,14 +98,13 @@ export function ProductWordmark({
           // that read as a logo; pushing to 700/800 makes the letterforms
           // visually heavier than the brand asset.
           "ms-[0.18em] font-semibold tracking-[-0.03em]",
-          // mutedSuffix: dark mode recedes to muted; light mode keeps brand.
-          mutedSuffix && "dark:!text-[var(--muted-foreground)]",
         )}
         style={{
           // Ivy Presto Text from Adobe Fonts. Upright (NOT italic) — matches
           // the official Exxat wordmark. Fallback chain ends in `serif` so
           // FOUT still renders a serif that reads as a logo rather than Inter.
           fontFamily: "var(--font-heading), 'ivypresto-text', Georgia, serif",
+          // `wordmarkColor` (Exxat pink) in light and dark — never muted to grey.
           color: suffixColor,
         }}
       >
@@ -155,7 +152,7 @@ function useBrowserPaintReady() {
  * Fills:
  *  - Outer circle: `markGradient` if provided, else flat `brandColor`.
  *  - Inner shadow plate: `markShadow` (defaults to `brandColor`).
- *  - Cut-out "E" strokes: white by default; callers can override on tinted rails.
+ *  - Cut-out "E" strokes: always white in product chrome (sidebar / switcher).
  */
 export function ProductMark({ config, className, cutoutColor = "white" }: ProductMarkProps) {
   const ready = useBrowserPaintReady()

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

@@ -27,6 +27,7 @@ import { QUESTION_BANK_ITEMS } from "@/lib/mock/question-bank"
 import { QUESTION_BANK_HEADER_COLLABORATORS } from "@/lib/mock/question-bank-header-collaborators"
 import { DEFAULT_QUESTION_BANK_FOLDERS, type QuestionBankFolder } from "@/lib/mock/question-bank-folders"
 import { questionBankKpiInsight, questionBankKpiMetrics } from "@/lib/mock/question-bank-kpi"
+import { QUESTION_BANK_SUPPORTED_VIEWS } from "@/lib/question-bank-supported-views"
 import {
   applyQuestionBankHubDisplayFilters,
   isQuestionBankDefaultNav,
@@ -122,7 +123,6 @@ export function QuestionBankClient() {
 
   // Stable Set of tab ids — defaults are constant so this only updates if tabs change.
   const tabIds = React.useMemo(() => new Set(tabs.map(t => t.id)), [tabs])
-
   // Keep the latest pathname / searchParamsKey / tabIds available to the (stable) hashchange
   // listener via refs, so we don't re-subscribe a window listener on every URL change.
   const navRef = React.useRef({ pathname, searchParamsKey, tabIds, hubBasePath })
@@ -314,6 +314,7 @@ export function QuestionBankClient() {
                   onFoldersChange={setFolders}
                   onItemsChange={setItems}
                   view={tab.viewType}
+                  supportedViewTypes={QUESTION_BANK_SUPPORTED_VIEWS}
                   onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
                 />
               )}
@@ -417,6 +418,7 @@ export function QuestionBankClient() {
                 />
               )}
               showMetrics={showMetrics}
+              supportedViewTypes={QUESTION_BANK_SUPPORTED_VIEWS}
               exportOpen={exportOpen}
               onExportOpenChange={setExportOpen}
               exportTotalRows={count}
@@ -433,6 +435,7 @@ export function QuestionBankClient() {
                   onFoldersChange={setFolders}
                   onItemsChange={setItems}
                   view={tab.viewType}
+                  supportedViewTypes={QUESTION_BANK_SUPPORTED_VIEWS}
                   onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
                 />
               )}

package/template/components/question-bank-folder-columns-panel.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+import { ListPageFolderColumnsPanel } from "@/components/data-views/list-page-folder-columns-panel"
+import { FolderDetailsShell } from "@/components/folder-details-shell"
+import type { QuestionBankItem } from "@/lib/mock/question-bank"
+import {
+  type QuestionBankFolder,
+  QUESTION_BANK_FOLDER_COLOR_STYLES,
+  QUESTION_BANK_FOLDER_ICON_COLORS,
+} from "@/lib/mock/question-bank-folders"
+
+function isQuestionBankFolder(
+  item: QuestionBankFolder | QuestionBankItem,
+): item is QuestionBankFolder {
+  return "parentId" in item && !("stem" in item)
+}
+
+export interface QuestionBankFolderColumnsPanelProps {
+  folders: QuestionBankFolder[]
+  rows: QuestionBankItem[]
+  panelRenderDetail: (row: QuestionBankItem) => React.ReactNode
+  onAddFolder: (parentId: string | null) => void
+  onAddQuestion: (parentId: string | null) => void
+  onCustomizeFolder?: (folder: QuestionBankFolder) => void
+}
+
+/** Question bank **panel** view — Miller columns over folders + questions. */
+export function QuestionBankFolderColumnsPanel({
+  folders,
+  rows,
+  panelRenderDetail,
+  onAddFolder,
+  onAddQuestion,
+  onCustomizeFolder,
+}: QuestionBankFolderColumnsPanelProps) {
+  return (
+    <ListPageFolderColumnsPanel<QuestionBankFolder, QuestionBankItem>
+      folders={folders}
+      items={rows}
+      isFolder={isQuestionBankFolder}
+      getFolderParentId={f => f.parentId}
+      getFolderName={f => f.name}
+      getItemFolderId={i => i.folderId}
+      getItemLabel={i => i.stem}
+      renderItemDetail={panelRenderDetail}
+      onAddFolder={onAddFolder}
+      onAddItem={onAddQuestion}
+      addItemAriaLabel="Add question"
+      renderFolderDetail={(folder, { folders: allFolders, items }) => (
+        <FolderDetailsShell folder={folder} folders={allFolders} questions={items} />
+      )}
+      renderFolderRowClassName={(folder, { isSelected, depth }) =>
+        !isSelected && folder.colorKey && depth > 0
+          ? QUESTION_BANK_FOLDER_COLOR_STYLES[folder.colorKey]?.tile
+          : undefined
+      }
+      renderFolderIcon={(folder, { isSelected }) => (
+        <i
+          className={cn(
+            "fa-folder shrink-0 text-sm",
+            isSelected ? "fa-solid" : "fa-light",
+            folder.colorKey && QUESTION_BANK_FOLDER_ICON_COLORS[folder.colorKey],
+          )}
+          aria-hidden="true"
+        />
+      )}
+      renderItemMeta={(item, { isSelected }) =>
+        item.type === "multiple_choice"
+          ? "MCQ"
+          : item.difficulty?.charAt(0).toUpperCase() ?? ""
+      }
+      renderFolderActions={folder => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              size="icon-xs"
+              variant="ghost"
+              aria-label={`Actions for folder ${folder.name}`}
+              className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+            >
+              <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>
+      )}
+    />
+  )
+}

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

@@ -254,11 +254,8 @@ export function QuestionBankHubClient() {
           aria-label="Search and create questions"
           className="-mx-4 overflow-hidden px-4 py-6 md:-mx-6 md:px-6"
           style={{
-            background: [
-              "radial-gradient(ellipse 118% 70% at 50% 100%, oklch(from var(--brand-color) l c h / 0.11) 0%, transparent 60%)",
-              "linear-gradient(180deg, var(--key-metrics-flat-grad-top) 0%, var(--key-metrics-flat-grad-mid) 48%, var(--background) 100%)",
-            ].join(", "),
-            boxShadow: "0 18px 42px -26px color-mix(in oklch, var(--brand-color) 10%, transparent)",
+            background: "var(--key-metrics-flat-band-radial)",
+            boxShadow: "var(--key-metrics-flat-band-shadow)",
           }}
         >
           <div className="mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 md:px-6">