@exxatdesignux/ui 0.2.17 → 0.2.19

package/template/components/secondary-panel/nav-link-rows.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import Link from "next/link"
+import { Tip } from "@/components/ui/tip"
+import { cn } from "@/lib/utils"
+
+export function SecondaryPanelNavRow({
+  href,
+  active,
+  iconClass,
+  label,
+  onClick,
+}: {
+  href: string
+  active: boolean
+  iconClass: string
+  label: string
+  onClick?: () => void
+}) {
+  return (
+    <li className="min-w-0">
+      <Tip label={label} side="right">
+        <Link
+          href={href}
+          scroll={false}
+          onClick={() => onClick?.()}
+          aria-current={active ? "page" : undefined}
+          className={cn(
+            "flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+            active
+              ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+              : "text-sidebar-foreground hover:bg-sidebar-accent/50",
+          )}
+        >
+          <span className="size-4 shrink-0 text-center text-[13px] leading-none" aria-hidden>
+            <i className={cn(active ? "fa-solid" : "fa-light", iconClass)} aria-hidden />
+          </span>
+          <span className="min-w-0 flex-1 truncate">{label}</span>
+        </Link>
+      </Tip>
+    </li>
+  )
+}
+
+/** Icon-rail row — matches primary sidebar collapsed hit target (`size-9`). */
+export function SecondaryPanelIconNavRow({
+  href,
+  active,
+  iconClass,
+  label,
+  onClick,
+}: {
+  href: string
+  active: boolean
+  iconClass: string
+  label: string
+  onClick?: () => void
+}) {
+  return (
+    <li className="flex w-full justify-center" role="none">
+      <Tip label={label} side="right">
+        <Link
+          href={href}
+          scroll={false}
+          onClick={() => onClick?.()}
+          aria-current={active ? "page" : undefined}
+          className={cn(
+            "flex size-9 shrink-0 items-center justify-center rounded-md transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+            active
+              ? "bg-sidebar-accent text-sidebar-accent-foreground"
+              : "text-sidebar-foreground hover:bg-sidebar-accent/50",
+          )}
+        >
+          <span className="text-center text-[15px] leading-none" aria-hidden>
+            <i className={cn(active ? "fa-solid" : "fa-light", iconClass)} aria-hidden />
+          </span>
+        </Link>
+      </Tip>
+    </li>
+  )
+}

package/template/components/secondary-panel.tsx

@@ -4,16 +4,14 @@
  * SecondaryPanel — nested rail between the primary icon sidebar and content.
  * Full width shows hub scope nav; **compact** matches the primary sidebar icon rail (`w-12`).
  *
- * Chrome uses {@link NestedSecondaryPanelShell}. Question bank body stays in
- * `question-bank-secondary-nav.tsx` (domain-specific), not duplicated here.
+ * Chrome uses {@link NestedSecondaryPanelShell}. Panel bodies live in
+ * `components/secondary-panels/` + {@link SECONDARY_PANELS}; hub nav stays domain-specific.
  */
 
 import * as React from "react"
 import { useSidebar } from "@/components/ui/sidebar"
-import { Tip } from "@/components/ui/tip"
-import { Button } from "@/components/ui/button"
-import { QuestionBankSecondaryNav } from "@/components/question-bank-secondary-nav"
 import { NestedSecondaryPanelShell } from "@/components/templates/nested-secondary-panel-shell"
+import { SECONDARY_PANELS } from "@/components/secondary-panels/registry"
 import { useSidebarReflowZoom } from "@/hooks/use-sidebar-reflow-zoom"
 import type { QuestionBankItem } from "@/lib/mock/question-bank"
 import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
@@ -166,47 +164,9 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
 // SecondaryPanel — the actual rendered panel
 // ─────────────────────────────────────────────────────────────────────────────
 
-function QuestionBankPanel() {
-  const { collapseActiveSecondaryPanel, secondaryPanelCompact } = useSecondaryPanel()
-
-  if (secondaryPanelCompact) {
-    return <QuestionBankSecondaryNav />
-  }
-
-  return (
-    <>
-      <div className="flex items-center justify-between gap-2 px-4 pt-4 pb-2">
-        <h2
-          className="text-xl font-semibold leading-tight text-sidebar-foreground"
-          style={{ fontFamily: "var(--font-heading)" }}
-        >
-          Library
-        </h2>
-        <Tip label="Collapse to icons" side="bottom">
-          <Button
-            type="button"
-            size="icon"
-            variant="ghost"
-            onClick={() => collapseActiveSecondaryPanel()}
-            aria-label="Collapse to icons"
-          >
-            <i className="fa-light fa-angles-left" aria-hidden="true" />
-          </Button>
-        </Tip>
-      </div>
-      <QuestionBankSecondaryNav />
-    </>
-  )
-}
-
-/** Register panel components by id when a route opts into `secondaryPanel` in nav. */
-const PANELS: Record<string, React.FC> = {
-  "question-bank": QuestionBankPanel,
-}
-
 export function SecondaryPanel() {
   const { activePanel, secondaryPanelCompact } = useSecondaryPanel()
-  const PanelContent = activePanel ? PANELS[activePanel] : null
+  const PanelContent = activePanel ? SECONDARY_PANELS[activePanel] : null
 
   return (
     <NestedSecondaryPanelShell open={Boolean(activePanel)} compact={secondaryPanelCompact}>

package/template/components/secondary-panels/list-hub-panel.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import { ListHubSecondaryNav } from "@/components/list-hub-secondary-nav"
+import { useSecondaryPanel } from "@/components/secondary-panel"
+
+export function ListHubPanel() {
+  const { collapseActiveSecondaryPanel, secondaryPanelCompact } = useSecondaryPanel()
+
+  if (secondaryPanelCompact) {
+    return <ListHubSecondaryNav />
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-2 px-4 pt-4 pb-2">
+        <h2
+          className="text-xl font-semibold leading-tight text-sidebar-foreground"
+          style={{ fontFamily: "var(--font-heading)" }}
+        >
+          Directory
+        </h2>
+        <Tip label="Collapse to icons" side="bottom">
+          <Button
+            type="button"
+            size="icon"
+            variant="ghost"
+            onClick={() => collapseActiveSecondaryPanel()}
+            aria-label="Collapse to icons"
+          >
+            <i className="fa-light fa-angles-left" aria-hidden="true" />
+          </Button>
+        </Tip>
+      </div>
+      <ListHubSecondaryNav />
+    </>
+  )
+}

package/template/components/secondary-panels/question-bank-panel.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import { QuestionBankSecondaryNav } from "@/components/question-bank-secondary-nav"
+import { useSecondaryPanel } from "@/components/secondary-panel"
+
+export function QuestionBankPanel() {
+  const { collapseActiveSecondaryPanel, secondaryPanelCompact } = useSecondaryPanel()
+
+  if (secondaryPanelCompact) {
+    return <QuestionBankSecondaryNav />
+  }
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-2 px-4 pt-4 pb-2">
+        <h2
+          className="text-xl font-semibold leading-tight text-sidebar-foreground"
+          style={{ fontFamily: "var(--font-heading)" }}
+        >
+          Library
+        </h2>
+        <Tip label="Collapse to icons" side="bottom">
+          <Button
+            type="button"
+            size="icon"
+            variant="ghost"
+            onClick={() => collapseActiveSecondaryPanel()}
+            aria-label="Collapse to icons"
+          >
+            <i className="fa-light fa-angles-left" aria-hidden="true" />
+          </Button>
+        </Tip>
+      </div>
+      <QuestionBankSecondaryNav />
+    </>
+  )
+}

package/template/components/secondary-panels/registry.tsx

@@ -0,0 +1,15 @@
+import type * as React from "react"
+
+import { ListHubPanel } from "@/components/secondary-panels/list-hub-panel"
+import { QuestionBankPanel } from "@/components/secondary-panels/question-bank-panel"
+
+/**
+ * Secondary panel bodies keyed by `NavLinkItem.secondaryPanel` / `useAutoPanel(panelId)`.
+ * Add a new entry here + nav `secondaryPanel` id + route layout — do not extend Question bank files.
+ */
+export const SECONDARY_PANELS: Record<string, React.FC> = {
+  "question-bank": QuestionBankPanel,
+  "list-hub": ListHubPanel,
+}
+
+export type SecondaryPanelId = keyof typeof SECONDARY_PANELS

package/template/components/settings-appearance-card.tsx

@@ -518,7 +518,7 @@ export function SettingsAppearanceCard() {
   )
 
   return (
-    <section id="appearance" className="scroll-mt-20">
+    <>
       <header className="mb-8 space-y-1">
         <h2 className="text-lg font-semibold text-foreground">Appearance &amp; display</h2>
         <p className="text-sm text-muted-foreground">Saved in this browser.</p>
@@ -529,6 +529,7 @@ export function SettingsAppearanceCard() {
         ) : (
           <FieldGroup className="gap-8">
             <SettingsFormRow
+              layout="stacked"
               label="Products"
               description="Recolour the brand mark + wordmark for each product. Switch the active product from the sidebar."
             >
@@ -862,6 +863,6 @@ export function SettingsAppearanceCard() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </section>
+    </>
   )
 }

package/template/components/settings-client.tsx

@@ -39,6 +39,19 @@ import { SettingsAppearanceCard } from "@/components/settings-appearance-card"
 import { SettingsFormRow } from "@/components/settings-form-row"
 import { FieldGroup } from "@/components/ui/field"
 import { FilterTextValueInput } from "@/components/data-table/filter-text-value-input"
+import {
+  FocusedWorkflowSidebarSections,
+  type FocusedWorkflowSidebarSection,
+} from "@/components/templates/focused-workflow-layouts"
+import { PageHeader } from "@/components/page-header"
+
+const SETTINGS_SECTIONS: readonly FocusedWorkflowSidebarSection[] = [
+  { id: "account", label: "Account" },
+  { id: "appearance", label: "Appearance" },
+  { id: "input-formats", label: "Input formats" },
+  { id: "banner", label: "System banner" },
+  { id: "tours", label: "Guided tours" },
+]
 
 const SYSTEM_BANNER_VARIANTS: SystemBannerVariant[] = [
   "info",
@@ -363,8 +376,32 @@ function buildFlowStatuses() {
   }))
 }
 
+function sectionIdFromHash(hash: string): string {
+  const id = hash.startsWith("#") ? hash.slice(1) : hash
+  if (id && SETTINGS_SECTIONS.some(s => s.id === id)) return id
+  return SETTINGS_SECTIONS[0]!.id
+}
+
 export function SettingsClient() {
   const router = useRouter()
+  const [activeSection, setActiveSection] = React.useState(() =>
+    typeof window !== "undefined" ? sectionIdFromHash(window.location.hash) : SETTINGS_SECTIONS[0]!.id,
+  )
+
+  React.useEffect(() => {
+    const syncFromHash = () => {
+      const id = sectionIdFromHash(window.location.hash)
+      setActiveSection(id)
+      if (window.location.hash) {
+        requestAnimationFrame(() => {
+          document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" })
+        })
+      }
+    }
+    syncFromHash()
+    window.addEventListener("hashchange", syncFromHash)
+    return () => window.removeEventListener("hashchange", syncFromHash)
+  }, [])
 
   const [demoPhone, setDemoPhone] = React.useState("")
   const [demoZip, setDemoZip] = React.useState("")
@@ -403,20 +440,27 @@ export function SettingsClient() {
   }
 
   return (
-    <div className="flex w-full min-w-0 flex-col">
-      <div>
-        <h1
-          className="text-2xl font-semibold tracking-tight leading-tight text-foreground"
-          style={{ fontFamily: "var(--font-heading)" }}
-        >
-          Settings
-        </h1>
-        <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
-          Preferences and tools for this workspace. Display options apply on this device and are stored in your browser.
-        </p>
-      </div>
-
-      <div className="mt-10 flex flex-col gap-20">
+    <FocusedWorkflowSidebarSections
+      sections={SETTINGS_SECTIONS}
+      activeSectionId={activeSection}
+      onSectionSelect={id => {
+        setActiveSection(id)
+        const nextHash = `#${id}`
+        if (window.location.hash !== nextHash) {
+          window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}${nextHash}`)
+        }
+        document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" })
+      }}
+      navLabel="Settings sections"
+      header={
+        <PageHeader
+          title="Settings"
+          subtitle="Preferences and tools for this workspace. Display options apply on this device and are stored in your browser."
+          className="px-0 pt-0 pb-0 lg:px-0"
+        />
+      }
+    >
+      <div className="flex flex-col gap-20">
         <section id="account" className="scroll-mt-20">
           <header className="mb-6 space-y-1">
             <h2 className="text-lg font-semibold text-foreground">Account</h2>
@@ -534,6 +578,6 @@ export function SettingsClient() {
           </div>
         </section>
       </div>
-    </div>
+    </FocusedWorkflowSidebarSections>
   )
 }

package/template/components/settings-form-row.tsx

@@ -5,7 +5,7 @@ import { Label } from "@/components/ui/label"
 import { cn } from "@/lib/utils"
 
 /**
- * Two-column settings row: label + helper on the left, controls on the right.
+ * Settings row — inline (label left, control right on lg+) or stacked (label above).
  */
 export function SettingsFormRow({
   label,
@@ -13,22 +13,27 @@ export function SettingsFormRow({
   htmlFor,
   children,
   className,
+  layout = "inline",
 }: {
   label: string
   description?: string
   htmlFor?: string
   children: React.ReactNode
   className?: string
+  /** `stacked` — label block above full-width controls (wide panels, product lists). */
+  layout?: "inline" | "stacked"
 }) {
   return (
     <div
       className={cn(
-        "grid grid-cols-1 gap-3 sm:gap-4 lg:grid-cols-[minmax(0,220px)_minmax(0,1fr)] lg:gap-10 lg:items-start",
-        "border-b border-border/70 pb-8 last:border-0 last:pb-0",
+        "grid grid-cols-1 gap-3 sm:gap-4 border-b border-border/70 pb-8 last:border-0 last:pb-0",
+        layout === "inline" &&
+          "lg:grid-cols-[minmax(0,220px)_minmax(0,1fr)] lg:gap-10 lg:items-start",
+        layout === "stacked" && "gap-4",
         className,
       )}
     >
-      <div className="space-y-1 lg:pt-1 text-start">
+      <div className="space-y-1 text-start lg:pt-1">
         <Label htmlFor={htmlFor} className="text-sm font-medium text-foreground">
           {label}
         </Label>

package/template/components/sidebar-shell.tsx

@@ -3,7 +3,8 @@
 /**
  * SidebarShell — SidebarProvider with layout-aware widths.
  * Desktop expanded/collapsed is persisted in the `sidebar_state` cookie by `@exxatdesignux/ui`
- * `SidebarProvider` (read on mount + write on toggle).
+ * `SidebarProvider` (read on mount + write on toggle). `(app)/layout` passes
+ * `defaultOpen` from the same cookie on the server so SSR matches the first client paint.
  */
 
 import * as React from "react"

package/template/components/table-properties/drawer-button.tsx

@@ -23,6 +23,7 @@ import { TablePropertiesDrawer } from "./drawer"
 import type { ActiveFilter, ConditionalRule, FilterFieldDef, SortRule } from "./types"
 import type { RowHeight } from "@/lib/row-height"
 import type { DataListViewType } from "@/lib/data-list-view"
+import { dataListViewSelectionTilesForHub } from "@/lib/data-list-view-registry"
 import type { DataListDisplayOptions } from "@/lib/data-list-display-options"
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -96,6 +97,8 @@ export interface TablePropertiesDrawerButtonProps {
   /** View type shown in the drawer header tile grid. */
   currentView?: DataListViewType
   onViewChange?: (v: DataListViewType) => void
+  /** When set, Properties view tiles match `ListPageTemplate` `supportedViewTypes`. */
+  supportedViewTypes?: readonly DataListViewType[]
   /** Shown below the "Properties" title in the drawer header (e.g. "Team", "Compliance"). */
   lifecycleTabLabel?: string
   /**
@@ -129,6 +132,7 @@ export function TablePropertiesDrawerButton({
   onPaginationChange,
   currentView,
   onViewChange,
+  supportedViewTypes,
   lifecycleTabLabel,
   boardGroupByColumnOptions,
   extraActions,
@@ -151,6 +155,32 @@ export function TablePropertiesDrawerButton({
     sortKey,
   } = state
 
+  // Sheet is portaled; keep latest handlers so sort/filter/conditional edits are not lost.
+  const stateRef = React.useRef(state)
+  stateRef.current = state
+  const ruleHandlersRef = React.useRef({
+    onAddConditionalRule,
+    onRemoveConditionalRule,
+    onUpdateConditionalRule,
+    onDisplayOptionsChange,
+    onPaginationChange,
+  })
+  ruleHandlersRef.current = {
+    onAddConditionalRule,
+    onRemoveConditionalRule,
+    onUpdateConditionalRule,
+    onDisplayOptionsChange,
+    onPaginationChange,
+  }
+
+  const viewTypeOptions = React.useMemo(
+    () =>
+      supportedViewTypes != null
+        ? dataListViewSelectionTilesForHub(supportedViewTypes)
+        : undefined,
+    [supportedViewTypes],
+  )
+
   return (
     <>
       {extraActions}
@@ -185,44 +215,45 @@ export function TablePropertiesDrawerButton({
         rowHeight={rowHeight}
         onRowHeightChange={setRowHeight}
         pagination={pagination}
-        onPaginationChange={onPaginationChange ?? (() => {})}
+        onPaginationChange={v => ruleHandlersRef.current.onPaginationChange?.(v)}
         activeFilters={activeFilters}
-        onAddFilter={fieldKey => addFilter(fieldKey, true)}
-        onUpdateFilter={updateFilter}
-        onRemoveFilter={removeFilter}
-        getFilterConnector={getConnector}
-        onToggleFilterConnector={toggleConnector}
+        onAddFilter={fieldKey => stateRef.current.addFilter(fieldKey, true)}
+        onUpdateFilter={(id, patch) => stateRef.current.updateFilter(id, patch)}
+        onRemoveFilter={id => stateRef.current.removeFilter(id)}
+        getFilterConnector={leftId => stateRef.current.getConnector(leftId)}
+        onToggleFilterConnector={leftId => stateRef.current.toggleConnector(leftId)}
         filterBarVisible={filterBarVisible}
-        onFilterBarVisibleChange={setFilterBarVisible}
+        onFilterBarVisibleChange={v => stateRef.current.setFilterBarVisible(v)}
         drawerExpandedFilters={drawerExpandedFilters}
-        onDrawerExpandedFiltersChange={setDrawerExpandedFilters}
+        onDrawerExpandedFiltersChange={stateRef.current.setDrawerExpandedFilters}
         totalRows={totalRows}
         filteredRows={rows.length}
         sortRules={sortRules}
-        onSortRulesChange={setSortRules}
-        onAddSortRule={addSortRule}
-        onRemoveSortRule={removeSortRule}
-        onToggleSortDir={toggleSortDir}
+        onSortRulesChange={rules => stateRef.current.setSortRules(rules)}
+        onAddSortRule={fieldKey => stateRef.current.addSortRule(fieldKey)}
+        onRemoveSortRule={id => stateRef.current.removeSortRule(id)}
+        onToggleSortDir={id => stateRef.current.toggleSortDir(id)}
         colOrder={colOrder}
-        onColOrderChange={setColOrder}
+        onColOrderChange={order => stateRef.current.setColOrder(order)}
         hiddenCols={hiddenCols}
-        onToggleColVisibility={toggleColVisibility}
-        onMoveCol={moveCol}
+        onToggleColVisibility={key => stateRef.current.toggleColVisibility(key)}
+        onMoveCol={(key, dir) => stateRef.current.moveCol(key, dir)}
         groupBy={groupBy}
-        onGroupByChange={setGroupBy}
+        onGroupByChange={key => stateRef.current.setGroupBy(key)}
         primarySortKey={sortKey}
         conditionalRules={conditionalRules}
-        onAddConditionalRule={onAddConditionalRule}
-        onRemoveConditionalRule={onRemoveConditionalRule}
-        onUpdateConditionalRule={onUpdateConditionalRule}
+        onAddConditionalRule={rule => ruleHandlersRef.current.onAddConditionalRule(rule)}
+        onRemoveConditionalRule={id => ruleHandlersRef.current.onRemoveConditionalRule(id)}
+        onUpdateConditionalRule={(id, patch) => ruleHandlersRef.current.onUpdateConditionalRule(id, patch)}
         filterFields={filterFields}
         lifecycleTabLabel={lifecycleTabLabel}
         fieldDefinitions={fieldDefinitions}
         resolveColumnLabel={resolveColumnLabel}
         displayOptions={displayOptions}
-        onDisplayOptionsChange={onDisplayOptionsChange}
+        onDisplayOptionsChange={patch => ruleHandlersRef.current.onDisplayOptionsChange(patch)}
         currentView={currentView}
         onViewChange={onViewChange}
+        viewTypeOptions={viewTypeOptions}
         boardGroupByColumnOptions={boardGroupByColumnOptions}
         renderFilterOptionValue={renderFilterOptionValue}
       />