@exxatdesignux/ui 0.1.0 → 0.2.7

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/page-header.tsx

@@ -1,22 +1,60 @@
+"use client"
+
 /**
  * PageHeader — Full-width content area header
  *
  * Sits at the top of a page's main content, BELOW the breadcrumb/topbar.
  * Uses Ivy Presto (Adobe Fonts) for the title via font-heading CSS variable.
  *
+ * **Variant `collaboration`** — optional access line + stacked collaborator faces
+ * and an invite control ahead of the primary `actions` slot (Question bank pattern).
+ *
  * WCAG 2.1 AA:
  *  ✓ <h1> landmark — one per page (WCAG 1.3.1)
  *  ✓ Sufficient colour contrast ≥ 4.5:1 on title + subtitle (SC 1.4.3)
+ *  ✓ Face stack: `role="group"` + aggregate `aria-label`; each face has a `Tooltip` name
  */
 
 import * as React from "react"
 import { cn } from "@/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+export type PageHeaderVariant = "default" | "collaboration"
+
+export interface PageHeaderCollaborator {
+  id: string
+  name: string
+  imageUrl?: string | null
+  initials?: string
+}
 
 export interface PageHeaderProps {
   /** Primary page title — rendered as <h1> in Ivy Presto serif */
   title: string
-  /** Short descriptor or date shown below the title */
+  /** Short descriptor or date shown below the title (and below `accessInfo` when set) */
   subtitle?: string
+  /** Layout preset — `collaboration` enables access line + face stack + invite ahead of `actions`. */
+  variant?: PageHeaderVariant
+  /**
+   * Role / access copy or badges — rendered between the title and subtitle when
+   * `variant="collaboration"` (e.g. lock icon + “Editors can modify”).
+   */
+  accessInfo?: React.ReactNode
+  /** People with access — shown as an overlapping face stack when `variant="collaboration"`. */
+  collaborators?: PageHeaderCollaborator[]
+  /** Max faces before a `+N` chip — default 4 */
+  collaboratorDisplayLimit?: number
+  /** Outline control beside the stack — e.g. open share / invite dialog */
+  onAddCollaborator?: () => void
+  /** Accessible name for the invite control — default “Invite people” */
+  addCollaboratorLabel?: string
   /** Optional slot for right-aligned actions (buttons, selectors, etc.) */
   actions?: React.ReactNode
   /** Extra className for the outer wrapper */
@@ -25,32 +63,136 @@ export interface PageHeaderProps {
   showTitleBlock?: boolean
 }
 
-export function PageHeader({ title, subtitle, actions, className, showTitleBlock = true }: PageHeaderProps) {
+function PageHeaderCollaborationFaces({
+  people,
+  limit,
+  addLabel,
+  onAdd,
+}: {
+  people: PageHeaderCollaborator[]
+  limit: number
+  addLabel: string
+  onAdd?: () => void
+}) {
+  const visible = people.slice(0, limit)
+  const overflow = Math.max(0, people.length - visible.length)
+  const names = people.map(p => p.name).join(", ")
+
+  return (
+    <div
+      role="group"
+      aria-label={names ? `People with access: ${names}` : "People with access"}
+      className="flex shrink-0 items-center gap-2 sm:gap-2.5"
+    >
+      {visible.length > 0 && (
+        <div className="flex -space-x-2 ps-0.5">
+          {visible.map((c, index) => (
+            <Tooltip key={c.id}>
+              <TooltipTrigger asChild>
+                <Avatar
+                  size="sm"
+                  shape="circle"
+                  className="relative ring-2 ring-background"
+                  style={{ zIndex: 10 + index }}
+                >
+                  {c.imageUrl ? (
+                    <AvatarImage src={c.imageUrl} alt="" referrerPolicy="no-referrer" />
+                  ) : null}
+                  <AvatarFallback className="text-xs font-semibold">
+                    {(c.initials ?? c.name.slice(0, 2)).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">{c.name}</TooltipContent>
+            </Tooltip>
+          ))}
+          {overflow > 0 && (
+            <div
+              className="relative z-30 flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium tabular-nums text-muted-foreground ring-2 ring-background sm:size-7"
+              aria-label={`${overflow} more people with access`}
+            >
+              +{overflow}
+            </div>
+          )}
+        </div>
+      )}
+      {onAdd ? (
+        <Tip side="bottom" label={addLabel}>
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            className="size-8 min-h-8 min-w-8 shrink-0 rounded-full border-dashed"
+            aria-label={addLabel}
+            onClick={onAdd}
+          >
+            <i className="fa-light fa-user-plus text-sm" aria-hidden="true" />
+          </Button>
+        </Tip>
+      ) : null}
+    </div>
+  )
+}
+
+export function PageHeader({
+  title,
+  subtitle,
+  variant = "default",
+  accessInfo,
+  collaborators,
+  collaboratorDisplayLimit = 4,
+  onAddCollaborator,
+  addCollaboratorLabel = "Invite people",
+  actions,
+  className,
+  showTitleBlock = true,
+}: PageHeaderProps) {
+  const isCollaboration = variant === "collaboration"
+  const showAccess = Boolean(isCollaboration && accessInfo)
+  const showFaceRail =
+    isCollaboration &&
+    ((collaborators && collaborators.length > 0) || Boolean(onAddCollaborator))
+  const showActionsColumn = Boolean(actions) || showFaceRail
+
   return (
     <div
       className={cn(
         "flex flex-col gap-1 px-4 pt-2 pb-4 lg:px-6",
         "sm:flex-row sm:items-end sm:gap-4",
         showTitleBlock ? "sm:justify-between" : "sm:justify-end",
-        className
+        className,
       )}
     >
       {/* Title block — hidden visually when showTitleBlock is false; keep h1 for a11y */}
-      <div className={cn("flex flex-col gap-0.5", !showTitleBlock && "sr-only")}>
+      <div className={cn("flex min-w-0 flex-col gap-0.5", !showTitleBlock && "sr-only")}>
         <h1
           className="text-2xl font-semibold tracking-tight leading-tight text-foreground"
           style={{ fontFamily: "var(--font-heading)" }}
         >
           {title}
         </h1>
+        {showAccess && (
+          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-muted-foreground">
+            {accessInfo}
+          </div>
+        )}
         {subtitle && (
           <p className="text-sm text-muted-foreground leading-none">{subtitle}</p>
         )}
       </div>
 
-      {/* Right-side actions — e.g. date picker, CTA buttons */}
-      {actions && (
-        <div className="flex items-center gap-2 shrink-0">{actions}</div>
+      {showActionsColumn && (
+        <div className="flex flex-wrap items-center gap-2 sm:gap-3 shrink-0 sm:ms-auto sm:justify-end">
+          {showFaceRail ? (
+            <PageHeaderCollaborationFaces
+              people={collaborators ?? []}
+              limit={collaboratorDisplayLimit}
+              addLabel={addCollaboratorLabel}
+              onAdd={onAddCollaborator}
+            />
+          ) : null}
+          {actions}
+        </div>
       )}
     </div>
   )

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,53 +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
-          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>
   )
 }