@exxatdesignux/ui 0.2.6 → 0.2.8

package/template/components/list-hub-status-badge.tsx

@@ -17,14 +17,21 @@ export const LIST_HUB_STATUS_BADGE_TABLE_SHELL =
 export const LIST_HUB_STATUS_BADGE_BOARD_SHELL =
   "inline-flex h-6 items-center gap-1 border-0 px-2 py-1 text-xs font-medium leading-none shadow-none"
 
+/**
+ * Inspector / split-pane detail headers — uniform 24px chip height next to status badges.
+ * Reuse on sibling `Badge`s so rows align with `ListHubStatusBadge` `surface="detail"`.
+ */
+export const LIST_HUB_INSPECTOR_CHIP_SHELL =
+  "inline-flex h-6 min-h-6 shrink-0 items-center gap-1.5 px-2 py-0 text-xs font-medium leading-none"
+
 export interface ListHubStatusBadgeProps {
   label: string
   /** Tails from `*_STATUS_BADGE_CLASS` in `@/lib/list-status-badges` */
   tintClassName: string
   /** Font Awesome icon class suffix, e.g. `fa-circle-check` (paired with `fa-light` here). */
   icon: string
-  /** `table` — DataTable cells and list rows; `board` — `ListPageBoardCardBadgeRow`. */
-  surface?: "table" | "board"
+  /** `table` — grid cells; `board` — kanban cards; `detail` — hub inspector / tree detail column. */
+  surface?: "table" | "board" | "detail"
   className?: string
 }
 
@@ -35,11 +42,18 @@ export function ListHubStatusBadge({
   surface = "table",
   className,
 }: ListHubStatusBadgeProps) {
+  const shell =
+    surface === "board"
+      ? LIST_HUB_STATUS_BADGE_BOARD_SHELL
+      : surface === "detail"
+        ? LIST_HUB_INSPECTOR_CHIP_SHELL
+        : LIST_HUB_STATUS_BADGE_TABLE_SHELL
+
   return (
     <Badge
       variant="outline"
       className={cn(
-        surface === "board" ? LIST_HUB_STATUS_BADGE_BOARD_SHELL : LIST_HUB_STATUS_BADGE_TABLE_SHELL,
+        shell,
         tintClassName,
         className,
       )}

package/template/components/placements-page-header.tsx

@@ -17,23 +17,29 @@ import { useAltKeyLabel, useModKeyLabel } from "@/hooks/use-mod-key-label"
 import { isEditableTarget } from "@/lib/editable-target"
 
 export interface PlacementsPageHeaderProps {
+  /** Main heading in the page header */
+  title?: string
+  /** Primary button label */
+  primaryCtaLabel?: string
   /** Shown under the page title */
   subtitle?: string
   onNewPlacement: () => void
   onExport: () => void
   showMetrics: boolean
   onToggleMetrics: () => void
-  /** When false, “Placements” + subtitle are hidden visually (Display options). */
+  /** When false, title + subtitle are hidden visually (Display options). */
   showTitleBlock?: boolean
   className?: string
 }
 
 /**
- * Placements list shell header — title, primary CTA, overflow menu (export, metrics).
- * Reusable for any placements route that needs the same chrome.
+ * List hub shell header — title, primary CTA, overflow menu (export, metrics).
+ * Reusable for any route that needs the same chrome.
  */
 export function PlacementsPageHeader({
-  subtitle = "24 records · Last updated now",
+  title = "Sample records",
+  primaryCtaLabel = "New row",
+  subtitle = "24 demo rows · Last updated now",
   onNewPlacement,
   onExport,
   showMetrics,
@@ -76,17 +82,17 @@ export function PlacementsPageHeader({
       <Shortcut keys="⌘⇧E" onInvoke={onExport} />
       <Shortcut keys="⌘⌥H" onInvoke={onToggleMetrics} />
     <PageHeader
-      title="Placements"
+      title={title}
       subtitle={subtitle}
       className={className}
       showTitleBlock={showTitleBlock}
       actions={
-        <div className="flex items-center gap-2" role="group" aria-label="Placement actions">
+        <div className="flex items-center gap-2" role="group" aria-label="Primary list actions">
           <Tip
             side="bottom"
             label={
               <>
-                <span>New placement</span>
+                <span>{primaryCtaLabel}</span>
                 <KbdGroup>
                   <Kbd>{mod}</Kbd>
                   <Kbd>{alt}</Kbd>
@@ -97,7 +103,7 @@ export function PlacementsPageHeader({
           >
             <Button size="lg" onClick={onNewPlacement}>
               <i className="fa-light fa-plus" aria-hidden="true" />
-              New placement
+              {primaryCtaLabel}
             </Button>
           </Tip>
           <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>

package/template/components/placements-table-columns.tsx

@@ -621,19 +621,19 @@ export function getPlacementColumnsForLifecycle(tab: PlacementLifecycleTabId): C
 export function emptyCopyForPlacementLifecycleTab(tab: PlacementLifecycleTabId): string {
   switch (tab) {
     case "upcoming":
-      return "No upcoming placements match your filters."
+      return "No rows in this segment match your filters."
     case "ongoing":
-      return "No ongoing placements match your filters."
+      return "No rows in this segment match your filters."
     case "completed":
-      return "No completed placements match your filters."
+      return "No rows in this segment match your filters."
     default:
-      return "No placements match your filters."
+      return "No rows match your filters."
   }
 }
 
 export const placementLifecycleDrawerLabels: Record<PlacementLifecycleTabId, string> = {
-  all: "Lifecycle: All placements",
-  upcoming: "Lifecycle: Upcoming",
-  ongoing: "Lifecycle: Ongoing",
-  completed: "Lifecycle: Completed",
+  all: "Segment: All rows",
+  upcoming: "Segment: Due soon",
+  ongoing: "Segment: In progress",
+  completed: "Segment: Done",
 }

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

@@ -2,20 +2,31 @@
 
 /**
  * Question bank hub — ListPageTemplate + KeyMetrics + QuestionBankTable (Team / Compliance pattern).
+ * URL hash syncs the active view tab; `?scope=` + `folderId=` sync with the secondary nav (`lib/question-bank-nav.ts`).
  */
 
 import * as React from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import {
   ListPageTemplate,
   type ViewTab,
   dataListViewIcon,
   type DataListViewType,
 } from "@/components/data-views"
+import { QuestionBankPanelActivator } from "@/components/question-bank-panel-activator"
 import { QuestionBankPageHeader } from "@/components/question-bank-page-header"
 import { QuestionBankTable, type QuestionBankTableHandle } from "@/components/question-bank-table"
+import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
+import { useSecondaryPanel } from "@/components/secondary-panel"
 import { KeyMetrics } from "@/components/key-metrics"
 import { QUESTION_BANK_ITEMS } from "@/lib/mock/question-bank"
+import { DEFAULT_QUESTION_BANK_FOLDERS } from "@/lib/mock/question-bank-folders"
 import { questionBankKpiInsight, questionBankKpiMetrics } from "@/lib/mock/question-bank-kpi"
+import {
+  filterQuestionBankItemsByNav,
+  parseQuestionBankNav,
+  questionBankHubHeaderModel,
+} from "@/lib/question-bank-nav"
 
 const DEFAULT_TABS: ViewTab[] = [
   {
@@ -25,54 +36,160 @@ const DEFAULT_TABS: ViewTab[] = [
     icon: "fa-table",
     filterId: "all",
   },
+  {
+    id: "panel-view",
+    label: "Panel",
+    viewType: "panel",
+    icon: "fa-columns",
+    filterId: "all",
+  },
+  {
+    id: "tree-panel",
+    label: "Tree",
+    viewType: "tree-panel",
+    icon: "fa-sitemap",
+    filterId: "all",
+  },
 ]
 
+function questionBankQueryPrefixFromSearchString(qs: string) {
+  return qs ? `?${qs}` : ""
+}
+
 export function QuestionBankClient() {
+  const pathname = usePathname()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { openPanel } = useSecondaryPanel()
+  const [tabs, setTabs] = React.useState<ViewTab[]>(DEFAULT_TABS)
+  const [activeTabId, setActiveTabId] = React.useState(DEFAULT_TABS[0].id)
+
+  const tabIds = React.useMemo(() => new Set(tabs.map(t => t.id)), [tabs])
+
+  /** String key — `useSearchParams()` identity can stay stable when only the query changes. */
+  const searchParamsKey = searchParams.toString()
+  const navState = React.useMemo(
+    () => parseQuestionBankNav(new URLSearchParams(searchParamsKey)),
+    [searchParamsKey],
+  )
+
+  /** “All questions” hub — keep secondary nav open when scope clears (breadcrumb, All questions link). */
+  React.useEffect(() => {
+    if (pathname !== "/question-bank") return
+    if (navState.scope !== "all") return
+    openPanel("question-bank")
+  }, [pathname, navState.scope, openPanel])
+
+  React.useEffect(() => {
+    if (pathname !== "/question-bank") return
+    const prefix = questionBankQueryPrefixFromSearchString(searchParamsKey)
+    const apply = () => {
+      const raw = typeof window !== "undefined" ? window.location.hash.slice(1) : ""
+      let nextId = "questions"
+      if (raw === "panel-view" || raw === "tree-panel") {
+        nextId = raw
+      } else if (raw && tabIds.has(raw)) {
+        nextId = raw
+      }
+      setActiveTabId(nextId)
+      if (nextId === "questions" && raw && raw !== "questions") {
+        router.replace(`/question-bank${prefix}`, { scroll: false })
+      }
+    }
+    apply()
+    window.addEventListener("hashchange", apply)
+    return () => window.removeEventListener("hashchange", apply)
+  }, [pathname, router, tabIds, searchParamsKey])
+
+  const onActiveTabChange = React.useCallback(
+    (id: string) => {
+      setActiveTabId(id)
+      if (pathname !== "/question-bank") return
+      const prefix = questionBankQueryPrefixFromSearchString(searchParamsKey)
+      if (id === "questions") {
+        router.replace(`/question-bank${prefix}`, { scroll: false })
+      } else {
+        router.replace(`/question-bank${prefix}#${id}`, { scroll: false })
+      }
+    },
+    [pathname, router, searchParamsKey],
+  )
+
   const [exportOpen, setExportOpen] = React.useState(false)
   const [showMetrics, setShowMetrics] = React.useState(true)
   const tableRef = React.useRef<QuestionBankTableHandle>(null)
-  const count = QUESTION_BANK_ITEMS.length
+  const [items, setItems] = React.useState(() => QUESTION_BANK_ITEMS.map(q => ({ ...q })))
+  const [folders, setFolders] = React.useState(() => DEFAULT_QUESTION_BANK_FOLDERS.map(f => ({ ...f })))
 
-  const metrics = React.useMemo(() => questionBankKpiMetrics(QUESTION_BANK_ITEMS), [])
-  const insight = React.useMemo(() => questionBankKpiInsight(QUESTION_BANK_ITEMS), [])
+  const filteredItems = React.useMemo(
+    () => filterQuestionBankItemsByNav(items, folders, navState),
+    [items, folders, navState],
+  )
+
+  const count = filteredItems.length
+
+  const metrics = React.useMemo(() => questionBankKpiMetrics(filteredItems), [filteredItems])
+  const insight = React.useMemo(() => questionBankKpiInsight(filteredItems), [filteredItems])
+
+  const hubHeader = React.useMemo(
+    () => questionBankHubHeaderModel(folders, navState),
+    [folders, navState],
+  )
 
   return (
-    <ListPageTemplate
-      defaultTabs={DEFAULT_TABS}
-      getTabCount={() => count}
-      tablePropertiesRef={tableRef}
-      header={(
-        <QuestionBankPageHeader
-          variant="collaboration"
-          questionCount={count}
-          onNewQuestion={() => {}}
-          onExport={() => setExportOpen(true)}
-          showMetrics={showMetrics}
-          onToggleMetrics={() => setShowMetrics(v => !v)}
-        />
-      )}
-      metrics={(
-        <KeyMetrics
-          variant="flat"
-          metrics={metrics}
-          insight={insight}
-          showHeader={false}
-          metricsSingleRow
-        />
-      )}
-      showMetrics={showMetrics}
-      exportOpen={exportOpen}
-      onExportOpenChange={setExportOpen}
-      exportTotalRows={count}
-      renderContent={(tab, updateTab) => (
-        <QuestionBankTable
-          key={tab.id}
-          ref={tableRef}
-          items={QUESTION_BANK_ITEMS}
-          view={tab.viewType}
-          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
-        />
-      )}
-    />
+    <PrimaryPageTemplate
+      beforeSiteHeader={<QuestionBankPanelActivator />}
+      siteHeader={{
+        title: hubHeader.title,
+        breadcrumbs: hubHeader.breadcrumbs,
+      }}
+    >
+      <ListPageTemplate
+        defaultTabs={DEFAULT_TABS}
+        tabs={tabs}
+        onTabsChange={setTabs}
+        activeTabId={activeTabId}
+        onActiveTabChange={onActiveTabChange}
+        getTabCount={() => count}
+        tablePropertiesRef={tableRef}
+        header={(
+          <QuestionBankPageHeader
+            variant="collaboration"
+            title={hubHeader.title}
+            questionCount={count}
+            onNewQuestion={() => {}}
+            onExport={() => setExportOpen(true)}
+            showMetrics={showMetrics}
+            onToggleMetrics={() => setShowMetrics(v => !v)}
+          />
+        )}
+        metrics={(
+          <KeyMetrics
+            variant="flat"
+            metrics={metrics}
+            insight={insight}
+            showHeader={false}
+            metricsSingleRow
+          />
+        )}
+        showMetrics={showMetrics}
+        exportOpen={exportOpen}
+        onExportOpenChange={setExportOpen}
+        exportTotalRows={count}
+        renderContent={(tab, updateTab) => (
+          <QuestionBankTable
+            key={tab.id}
+            ref={tableRef}
+            items={items}
+            navState={navState}
+            folders={folders}
+            onFoldersChange={setFolders}
+            onItemsChange={setItems}
+            view={tab.viewType}
+            onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+          />
+        )}
+      />
+    </PrimaryPageTemplate>
   )
 }

package/template/components/question-bank-new-folder-sheet.tsx

@@ -0,0 +1,248 @@
+"use client"
+
+/**
+ * Shared “new folder” floating sheet (same shell as Export) — used by OS folder grid and column panel.
+ */
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Shortcut } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
+import { Tip } from "@/components/ui/tip"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import { cn } from "@/lib/utils"
+import {
+  QUESTION_BANK_FOLDER_COLOR_STYLES,
+  QUESTION_BANK_FOLDER_ICON_OPTIONS,
+  type QuestionBankFolderColorKey,
+} from "@/lib/mock/question-bank-folders"
+import { OsFolderGlyph } from "@/components/data-views/os-folder-glyph"
+
+const COLOR_OPTIONS: QuestionBankFolderColorKey[] = [
+  "brand",
+  "success",
+  "warning",
+  "destructive",
+  "muted",
+  "chart1",
+  "chart2",
+  "chart3",
+]
+
+function FolderTilePreview({
+  name,
+  colorKey,
+  icon,
+  className,
+}: {
+  name: string
+  colorKey: QuestionBankFolderColorKey
+  icon: string
+  className?: string
+}) {
+  const display = name.trim() || "Untitled"
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center gap-4 rounded-2xl border border-border/80 bg-muted/20 p-6 shadow-sm",
+        className,
+      )}
+    >
+      <OsFolderGlyph
+        colorKey={colorKey}
+        icon={icon}
+        size="lg"
+        decorative={false}
+        label={`Folder preview: ${display}`}
+      />
+      <p className="line-clamp-2 min-h-[2.5rem] w-full text-center text-sm font-medium text-foreground">
+        {display}
+      </p>
+    </div>
+  )
+}
+
+export interface QuestionBankNewFolderSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Parent folder id for the new folder (`null` = top level). */
+  parentFolderId: string | null
+  /** Replaces default helper copy under the title. */
+  descriptionText?: string
+  /** When provided, the sheet is in "customize" mode with these initial values. */
+  customizingFolder?: {
+    name: string
+    icon: string
+    colorKey: QuestionBankFolderColorKey
+    parentId: string | null
+  } | null
+  onCreated: (folder: {
+    name: string
+    icon: string
+    colorKey: QuestionBankFolderColorKey
+    parentId: string | null
+  }) => void
+}
+
+export function QuestionBankNewFolderSheet({
+  open,
+  onOpenChange,
+  parentFolderId,
+  customizingFolder,
+  descriptionText = "Name, color, and icon update the preview. The folder is created in the location shown in the breadcrumb above the grid.",
+  onCreated,
+}: QuestionBankNewFolderSheetProps) {
+  const [draft, setDraft] = React.useState<{
+    name: string
+    colorKey: QuestionBankFolderColorKey
+    icon: string
+  }>({ name: "Untitled", colorKey: "brand", icon: "fa-folder" })
+
+  React.useEffect(() => {
+    if (open) {
+      if (customizingFolder) {
+        setDraft({ name: customizingFolder.name, colorKey: customizingFolder.colorKey, icon: customizingFolder.icon })
+      } else {
+        setDraft({ name: "Untitled", colorKey: "brand", icon: "fa-folder" })
+      }
+    }
+  }, [open, customizingFolder])
+
+  const createDisabled = !draft.name.trim()
+
+  function commit() {
+    const v = draft.name.trim()
+    if (!v) return
+    onCreated({
+      name: v,
+      icon: draft.icon,
+      colorKey: draft.colorKey,
+      parentId: parentFolderId,
+    })
+    onOpenChange(false)
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        data-slot="new-folder-drawer"
+        side="right"
+        showCloseButton={false}
+        showOverlay={false}
+        className="z-[60] flex w-full max-w-md flex-col gap-0 overflow-hidden rounded-xl border border-border p-0 shadow-xl sm:max-w-md"
+        style={{ top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100vh - 1rem)" }}
+      >
+        {open ? (
+          <>
+            <Shortcut keys="Enter" onInvoke={() => !createDisabled && commit()} />
+            <Shortcut keys="Esc" onInvoke={() => onOpenChange(false)} />
+
+            <div className="flex items-center justify-between gap-3 px-4 pt-5 pb-6">
+              <SheetTitle className="text-base font-semibold leading-tight">
+                {customizingFolder ? "Customize Folder" : "New folder"}
+              </SheetTitle>
+              <Tip label="Close" side="bottom">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="Close"
+                  onClick={() => onOpenChange(false)}
+                >
+                  <i className="fa-light fa-xmark text-[13px]" aria-hidden="true" />
+                </Button>
+              </Tip>
+            </div>
+
+            <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-4 pb-4 pt-2">
+              <div className="flex flex-col items-center gap-4">
+                <FolderTilePreview
+                  name={draft.name}
+                  colorKey={draft.colorKey}
+                  icon={draft.icon}
+                  className="w-full max-w-[280px]"
+                />
+                <div className="w-full max-w-[280px] space-y-2">
+                  <Label htmlFor="new-folder-name-shared">Folder name</Label>
+                  <Input
+                    id="new-folder-name-shared"
+                    value={draft.name}
+                    onChange={e => setDraft(d => ({ ...d, name: e.target.value }))}
+                    autoComplete="off"
+                    aria-describedby="new-folder-panel-desc new-folder-name-hint-shared"
+                    aria-invalid={createDisabled}
+                  />
+                  <p id="new-folder-name-hint-shared" className="text-sm text-muted-foreground">
+                    Shown under the folder icon in the grid or column.
+                  </p>
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium text-muted-foreground">Color</p>
+                <div className="flex flex-wrap gap-2">
+                  {COLOR_OPTIONS.map(c => (
+                    <button
+                      key={c}
+                      type="button"
+                      aria-label={`Color ${c}`}
+                      aria-pressed={draft.colorKey === c}
+                      className={cn(
+                        "size-10 rounded-xl border-2 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        QUESTION_BANK_FOLDER_COLOR_STYLES[c].tile,
+                        draft.colorKey === c
+                          ? "ring-2 ring-ring"
+                          : "border-transparent opacity-85 hover:opacity-100",
+                      )}
+                      onClick={() => setDraft(d => ({ ...d, colorKey: c }))}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium text-muted-foreground">Icon</p>
+                <div className="grid max-h-48 grid-cols-5 gap-2 overflow-y-auto rounded-xl border border-border p-3">
+                  {QUESTION_BANK_FOLDER_ICON_OPTIONS.map(ic => (
+                    <button
+                      key={ic}
+                      type="button"
+                      aria-label={`Icon ${ic.replace(/^fa-/, "").replace(/-/g, " ")}`}
+                      aria-pressed={draft.icon === ic}
+                      className={cn(
+                        "flex size-10 items-center justify-center rounded-lg border text-sm transition-colors",
+                        draft.icon === ic
+                          ? "border-brand bg-brand/10 text-brand"
+                          : "border-transparent hover:bg-muted",
+                      )}
+                      onClick={() => setDraft(d => ({ ...d, icon: ic }))}
+                    >
+                      <i className={cn("fa-light", ic)} aria-hidden="true" />
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-auto flex flex-row flex-wrap justify-end gap-2 border-t border-border px-4 py-4">
+              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+                Cancel
+                <KbdGroup className="ms-1.5">
+                  <Kbd variant="bare">Esc</Kbd>
+                </KbdGroup>
+              </Button>
+              <Button type="button" disabled={createDisabled} onClick={commit}>
+                {customizingFolder ? "Update folder" : "Create folder"}
+                <KbdGroup className="ms-1.5">
+                  <Kbd variant="bare">⏎</Kbd>
+                </KbdGroup>
+              </Button>
+            </div>
+          </>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  )
+}