@exxatdesignux/ui 0.2.18 → 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/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,
@@ -169,6 +173,14 @@ export function TablePropertiesDrawerButton({
     onPaginationChange,
   }
 
+  const viewTypeOptions = React.useMemo(
+    () =>
+      supportedViewTypes != null
+        ? dataListViewSelectionTilesForHub(supportedViewTypes)
+        : undefined,
+    [supportedViewTypes],
+  )
+
   return (
     <>
       {extraActions}
@@ -241,6 +253,7 @@ export function TablePropertiesDrawerButton({
         onDisplayOptionsChange={patch => ruleHandlersRef.current.onDisplayOptionsChange(patch)}
         currentView={currentView}
         onViewChange={onViewChange}
+        viewTypeOptions={viewTypeOptions}
         boardGroupByColumnOptions={boardGroupByColumnOptions}
         renderFilterOptionValue={renderFilterOptionValue}
       />

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

@@ -26,7 +26,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import type { DataListDisplayOptions } from "@/lib/data-list-display-options"
+import {
+  CALENDAR_MAIN_VIEW_TILES,
+  type DataListDisplayOptions,
+} from "@/lib/data-list-display-options"
 import { Tip } from "@/components/ui/tip"
 import { ToggleSwitch } from "@/components/ui/toggle-switch"
 import { Button } from "@/components/ui/button"
@@ -95,6 +98,11 @@ export interface TablePropertiesDrawerProps {
   // View type
   currentView?: DataListViewType
   onViewChange?: (view: DataListViewType) => void
+  /**
+   * View-type tiles in Properties — defaults to all `DATA_LIST_VIEW_TILES`.
+   * Pass hub-filtered options (same set as `ListPageTemplate` `supportedViewTypes`).
+   */
+  viewTypeOptions?: readonly { value: DataListViewType; label: string; icon: string }[]
   /** Lifecycle context (e.g. tab filter) — shown in the drawer header */
   lifecycleTabLabel?: string
   /**
@@ -161,6 +169,7 @@ export function TablePropertiesDrawer({
   filterFields = FILTER_FIELDS,
   currentView,
   onViewChange,
+  viewTypeOptions = DATA_LIST_VIEW_TILES,
   lifecycleTabLabel,
   fieldDefinitions,
   resolveColumnLabel: resolveColumnLabelProp,
@@ -200,6 +209,7 @@ export function TablePropertiesDrawer({
 
   const viewSurface = currentView ?? "table"
   const isBoardView = viewSurface === "board"
+  const isCalendarView = viewSurface === "calendar"
   const boardGroupByLabel =
     boardGroupByColumnOptions?.find(o => o.key === displayOptions.boardGroupByColumnKey)?.label
   const viewDisplayLabel = dataListViewLabel(viewSurface)
@@ -222,10 +232,16 @@ export function TablePropertiesDrawer({
     if (viewSurface === "dashboard") {
       return "Charts · KPI metrics"
     }
+    if (viewSurface === "calendar") {
+      return [
+        displayOptions.showCalendarSummaryPanel ? "Summary panel" : "No summary",
+        displayOptions.calendarMainView === "week" ? "Week layout" : "Month layout",
+      ].join(" · ")
+    }
     return [showGridlines ? "Gridlines" : null, pagination ? "Paginated" : null].filter(Boolean).join(" · ") || "Default"
   })()
   const viewDisplayIcon =
-    DATA_LIST_VIEW_TILES.find(t => t.value === viewSurface)?.icon ?? "fa-table"
+    viewTypeOptions.find(t => t.value === viewSurface)?.icon ?? "fa-table"
 
   // ── Sort drag-and-drop ────────────────────────────────────────────────────
   const sortDrag = useDraggableList(sortRules, r => r.id, onSortRulesChange)
@@ -287,7 +303,7 @@ export function TablePropertiesDrawer({
               <div className="px-4 pb-3">
                 <SelectionTileGrid<DataListViewType>
                   sectionLabel="View type"
-                  options={DATA_LIST_VIEW_TILES}
+                  options={viewTypeOptions}
                   columns={4}
                   value={currentView}
                   onValueChange={onViewChange}
@@ -438,6 +454,12 @@ export function TablePropertiesDrawer({
                     </p>
                   ) : null}
 
+                  {isCalendarView ? (
+                    <p className="text-xs text-muted-foreground leading-relaxed">
+                      {dataListViewLabel("calendar")} uses the same filtered rows as table and board. Scroll the main calendar vertically to move between months; use the summary panel for a mini month picker and event list.
+                    </p>
+                  ) : null}
+
                   {isBoardView && boardGroupByColumnOptions && boardGroupByColumnOptions.length > 1 ? (
                     <div className="flex items-center justify-between gap-3 py-2">
                       <div className="flex items-center gap-2.5 min-w-0 flex-1">
@@ -513,7 +535,8 @@ export function TablePropertiesDrawer({
                   <div
                     className={cn(
                       "space-y-3",
-                      (viewSurface === "board" || viewSurface === "table") && "border-t border-border pt-4",
+                      (viewSurface === "board" || viewSurface === "table" || isCalendarView) &&
+                        "border-t border-border pt-4",
                     )}
                   >
                     <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Display options</p>
@@ -621,6 +644,44 @@ export function TablePropertiesDrawer({
                         </>
                       )}
 
+                      {isCalendarView && (
+                        <>
+                          <div className="flex items-center justify-between gap-2 py-2">
+                            <div className="flex items-center gap-2.5 min-w-0 flex-1">
+                              <span className="inline-flex items-center justify-center size-9 rounded-lg bg-secondary border border-border shrink-0">
+                                <i className="fa-light fa-sidebar text-[15px] text-secondary-foreground" aria-hidden="true" />
+                              </span>
+                              <div className="min-w-0">
+                                <p className="text-sm font-medium text-foreground leading-tight">Summary panel</p>
+                                <p className="text-xs text-muted-foreground mt-0.5">
+                                  Mini month, event list, and layout on the left.
+                                </p>
+                              </div>
+                            </div>
+                            <ToggleSwitch
+                              id="toggle-calendar-summary"
+                              checked={displayOptions.showCalendarSummaryPanel}
+                              onChange={v => onDisplayOptionsChange({ showCalendarSummaryPanel: v })}
+                            />
+                          </div>
+                          <div className="pt-2">
+                            <SelectionTileGrid
+                              sectionLabel="Main calendar layout"
+                              options={CALENDAR_MAIN_VIEW_TILES.map(t => ({
+                                value: t.value,
+                                label: t.label,
+                                icon: t.icon,
+                              }))}
+                              columns={2}
+                              value={displayOptions.calendarMainView}
+                              onValueChange={v => onDisplayOptionsChange({ calendarMainView: v })}
+                              interaction="button"
+                              idPrefix="props-calendar-main-view"
+                            />
+                          </div>
+                        </>
+                      )}
+
                       {(viewSurface === "table" || viewSurface === "list") && (
                         <div className="flex items-center justify-between gap-2 py-2">
                           <div className="flex items-center gap-2.5 min-w-0 flex-1">