@exxatdesignux/ui 0.2.17 → 0.2.19

package/template/lib/table-state-lifecycle.ts

@@ -26,7 +26,7 @@ import type { RowHeight } from "@/lib/row-height"
 import type { DataListDisplayOptions } from "@/lib/data-list-display-options"
 import type { ActiveFilter, ConditionalRule, SortRule } from "@/components/table-properties/types"
 import type { ViewTab } from "@/components/templates/list-page"
-import type { DataListViewType } from "@/lib/data-list-view"
+import { DATA_LIST_VIEW_TILES, type DataListViewType } from "@/lib/data-list-view"
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Storage key + debounce config
@@ -139,7 +139,7 @@ export interface TableStatePersistSlice {
 // Parsers + validators
 // ─────────────────────────────────────────────────────────────────────────────
 
-const VIEW_TYPES: DataListViewType[] = ["table", "list", "board", "dashboard"]
+const VIEW_TYPES: DataListViewType[] = DATA_LIST_VIEW_TILES.map(t => t.value)
 
 function isViewType(v: unknown): v is DataListViewType {
   return typeof v === "string" && (VIEW_TYPES as string[]).includes(v)
@@ -229,7 +229,19 @@ function filterRecordKeys<T extends Record<string, unknown>>(obj: T, keys: Set<s
   return out
 }
 
-export function applyLifecyclePersisted(
+function sanitizeActiveFilters(
+  filters: ActiveFilter[],
+  columnKeys: Set<string>,
+): ActiveFilter[] {
+  return filters.filter(f => columnKeys.has(f.fieldKey))
+}
+
+function sanitizeSortRules(rules: SortRule[], columnKeys: Set<string>): SortRule[] {
+  return rules.filter(r => columnKeys.has(r.fieldKey))
+}
+
+/** Column layout only — keeps in-memory search / filters when the column set changes. */
+export function applyLifecycleColumnLayout(
   ts: TableStatePersistSlice,
   p: PersistedLifecycleV1,
   columnKeys: Set<string>,
@@ -241,11 +253,6 @@ export function applyLifecyclePersisted(
   const colWrap = filterRecordKeys(p.colWrap, columnKeys) as Record<string, boolean>
   const colMenuSearch = filterRecordKeys(p.colMenuSearch, columnKeys) as Record<string, string>
 
-  ts.setSortRules(p.sortRules)
-  ts.setSearch(p.search)
-  ts.setActiveFilters(p.activeFilters)
-  ts.setFilterConnectors(p.filterConnectors)
-  ts.setGroupBy(p.groupBy)
   ts.setColOrder(colOrder)
   ts.setHiddenCols(hidden)
   ts.setColWidths(colWidths)
@@ -254,6 +261,20 @@ export function applyLifecyclePersisted(
   ts.setColMenuSearch(colMenuSearch)
   ts.setRowHeight(p.rowHeight)
   ts.setShowGridlines(p.showGridlines)
+}
+
+export function applyLifecyclePersisted(
+  ts: TableStatePersistSlice,
+  p: PersistedLifecycleV1,
+  columnKeys: Set<string>,
+): void {
+  applyLifecycleColumnLayout(ts, p, columnKeys)
+
+  ts.setSortRules(sanitizeSortRules(p.sortRules, columnKeys))
+  ts.setSearch(p.search)
+  ts.setActiveFilters(sanitizeActiveFilters(p.activeFilters, columnKeys))
+  ts.setFilterConnectors(p.filterConnectors)
+  ts.setGroupBy(p.groupBy != null && columnKeys.has(p.groupBy) ? p.groupBy : null)
   ts.setFilterBarVisible(p.filterBarVisible)
   ts.setSearchOpen(p.searchOpen)
 }
@@ -427,20 +448,46 @@ export function useTableStateLifecycle<TExtras extends Record<string, unknown> |
     onLoadExtrasRef.current = onLoadExtras
   })
 
+  const columnKeysFingerprint = React.useMemo(
+    () => [...columnKeys].sort().join("\0"),
+    [columnKeys],
+  )
+
+  const loadedScopeRef = React.useRef<string | null>(null)
+  const appliedColumnFingerprintRef = React.useRef<string | null>(null)
+
   // ── Load ────────────────────────────────────────────────────────────────
   // useLayoutEffect so the rehydrated state paints in the first frame after
   // mount instead of flashing the unhydrated defaults first.
   React.useLayoutEffect(() => {
+    // Wait until column defs exist — applying persisted sort/filters against an
+    // empty key set would sanitize everything away and look like Properties broke.
+    if (columnKeys.size === 0) return
+
+    const scope = `${namespace}:${tabId}`
     const raw = loadLifecycleFromStorage(namespace, tabId)
+
+    if (loadedScopeRef.current !== scope) {
+      loadedScopeRef.current = scope
+      appliedColumnFingerprintRef.current = columnKeysFingerprint
+      if (!raw) return
+      applyLifecyclePersisted(tableState, raw, columnKeys)
+      const e = readLifecycleExtras<Record<string, unknown>>(raw)
+      onLoadExtrasRef.current?.(e as TExtras | Record<string, unknown> | undefined)
+      return
+    }
+
+    if (appliedColumnFingerprintRef.current === columnKeysFingerprint) return
+    appliedColumnFingerprintRef.current = columnKeysFingerprint
     if (!raw) return
-    applyLifecyclePersisted(tableState, raw, columnKeys)
-    const e = readLifecycleExtras<Record<string, unknown>>(raw)
-    onLoadExtrasRef.current?.(e as TExtras | Record<string, unknown> | undefined)
+    // Column defs changed (e.g. hub scope / dynamic filter options) — re-merge
+    // layout only; do not wipe in-memory filters the user set in Properties.
+    applyLifecycleColumnLayout(tableState, raw, columnKeys)
     // `tableState` is freshly returned each render; depending on it would
     // re-apply persisted state on every keystroke and undo edits. Depend only
-    // on the load scope (namespace + tabId + column set).
+    // on the load scope (namespace + tabId + column fingerprint).
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [namespace, tabId, columnKeys])
+  }, [namespace, tabId, columnKeysFingerprint])
 
   // ── Save ────────────────────────────────────────────────────────────────
   // Serialise + debounce on every persisted slice change. Don't depend on

package/template/app/(app)/data-list/[id]/page.tsx

@@ -1,44 +0,0 @@
-import Link from "next/link"
-import { notFound } from "next/navigation"
-import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
-import { Button } from "@/components/ui/button"
-import { getPlacementById } from "@/lib/mock/placements"
-
-export default async function RecordDetailPage({
-  params,
-}: {
-  params: Promise<{ id: string }>
-}) {
-  const { id } = await params
-  const row = getPlacementById(Number(id))
-  if (!row) notFound()
-
-  return (
-    <PrimaryPageTemplate
-      siteHeader={{
-        title: "Record",
-        breadcrumbs: [{ label: "List hub", href: "/data-list" }],
-      }}
-      maxWidthClassName="max-w-2xl"
-      contentClassName="px-4 lg:px-6 py-6"
-      bodyClassName="overflow-y-auto"
-    >
-      <p className="text-sm text-muted-foreground mb-6">
-        Demo read-only detail — replace with your domain route and data fetch.
-      </p>
-      <dl className="grid gap-3 text-sm sm:grid-cols-[minmax(0,10rem)_1fr]">
-        <dt className="text-muted-foreground">Primary label</dt>
-        <dd className="font-medium text-foreground">{row.student}</dd>
-        <dt className="text-muted-foreground">Status</dt>
-        <dd>{row.status}</dd>
-        <dt className="text-muted-foreground">Site</dt>
-        <dd>{row.site}</dd>
-        <dt className="text-muted-foreground">Program</dt>
-        <dd>{row.program}</dd>
-      </dl>
-      <Button asChild variant="outline" className="mt-8">
-        <Link href="/data-list">Back to list</Link>
-      </Button>
-    </PrimaryPageTemplate>
-  )
-}

package/template/app/(app)/data-list/new/page.tsx

@@ -1,34 +0,0 @@
-import Link from "next/link"
-import { NewPlacementForm } from "@/components/new-placement-form"
-import { SidebarAutoCollapse } from "@/components/sidebar-auto-collapse"
-import { PrimaryPageTemplate } from "@/components/templates/primary-page-template"
-
-export default function NewRecordPage() {
-  return (
-    <PrimaryPageTemplate
-      beforeSiteHeader={<SidebarAutoCollapse />}
-      bodyClassName="overflow-y-auto"
-      maxWidthClassName="max-w-3xl"
-      contentClassName="px-8 pt-10 pb-32"
-    >
-      <Link
-        href="/data-list"
-        className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-interactive-hover-foreground transition-colors mb-5 group"
-        aria-label="Back to list hub"
-      >
-        <i className="fa-light fa-arrow-left text-xs transition-transform group-hover:-translate-x-0.5" aria-hidden="true" />
-        Back
-      </Link>
-      <h1
-        className="text-[2.25rem] font-semibold tracking-tight leading-none text-foreground mb-2"
-        style={{ fontFamily: "var(--font-heading)" }}
-      >
-        New record
-      </h1>
-      <p className="text-sm text-muted-foreground mb-8">
-        Multi-step wizard shell (demo fields) — swap the form for your product flow.
-      </p>
-      <NewPlacementForm />
-    </PrimaryPageTemplate>
-  )
-}

package/template/components/compliance-board-view.tsx

@@ -1,142 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { initialsFromDisplayName } from "@/lib/initials-from-name"
-import {
-  COMPLIANCE_STATUS_BADGE_CLASS,
-  COMPLIANCE_STATUS_ICON,
-  COMPLIANCE_STATUS_LABEL,
-} from "@/lib/list-status-badges"
-import type { ComplianceItem } from "@/lib/mock/compliance"
-import { BoardCardTwoLineBlock } from "@/components/data-views/board-card-primitives"
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
-import {
-  ListPageBoardCard,
-  ListPageBoardCardAvatar,
-  ListPageBoardCardBadgeRow,
-  ListPageBoardCardBody,
-  ListPageBoardCardHeader,
-  ListPageBoardCardTitleRow,
-} from "@/components/data-views/list-page-board-card"
-import {
-  ListPageBoardTemplate,
-  type ListPageBoardColumnDef,
-} from "@/components/data-views/list-page-board-template"
-
-const NEUTRAL_COUNT_BADGE = "bg-muted/90 text-foreground"
-
-const STATUS_BOARD_COLUMNS: ListPageBoardColumnDef<ComplianceItem>[] = [
-  {
-    id: "compliant",
-    label: "Compliant",
-    description: "On track",
-    filter: r => r.status === "compliant",
-  },
-  {
-    id: "due_soon",
-    label: "Due soon",
-    description: "Within window",
-    filter: r => r.status === "due_soon",
-  },
-  {
-    id: "overdue",
-    label: "Overdue",
-    description: "Action required",
-    filter: r => r.status === "overdue",
-  },
-  {
-    id: "pending",
-    label: "Pending",
-    description: "Not started",
-    filter: r => r.status === "pending",
-  },
-]
-
-function categoryBoardColumns(rows: ComplianceItem[]): {
-  columns: ListPageBoardColumnDef<ComplianceItem>[]
-  badgeMap: Record<string, string>
-} {
-  const labels = [...new Set(rows.map(r => r.category))].sort((a, b) => a.localeCompare(b))
-  const columns: ListPageBoardColumnDef<ComplianceItem>[] = labels.map(label => ({
-    id: `category:${label}`,
-    label,
-    filter: (r: ComplianceItem) => r.category === label,
-  }))
-  const badgeMap = Object.fromEntries(labels.map(l => [`category:${l}`, NEUTRAL_COUNT_BADGE]))
-  return { columns, badgeMap }
-}
-
-function useComplianceBoardModel(rows: ComplianceItem[], groupByColumnKey: string) {
-  return React.useMemo(() => {
-    if (groupByColumnKey === "category") {
-      const { columns, badgeMap } = categoryBoardColumns(rows)
-      return { columns, badgeMap }
-    }
-    return {
-      columns: STATUS_BOARD_COLUMNS,
-      badgeMap: COMPLIANCE_STATUS_BADGE_CLASS as Record<string, string>,
-    }
-  }, [rows, groupByColumnKey])
-}
-
-function ComplianceBoardCard({
-  row,
-  onRowActivate,
-}: {
-  row: ComplianceItem
-  onRowActivate?: (row: ComplianceItem) => void
-}) {
-  const ownerInitials = initialsFromDisplayName(row.owner)
-  return (
-    <ListPageBoardCard className="w-full" onClick={onRowActivate ? () => onRowActivate(row) : undefined}>
-      <ListPageBoardCardHeader>
-        <ListPageBoardCardTitleRow
-          title={row.title}
-          titleClassName="line-clamp-2"
-          trailing={<ListPageBoardCardAvatar initials={ownerInitials} />}
-        />
-        <ListPageBoardCardBadgeRow>
-          <ListHubStatusBadge
-            surface="board"
-            label={COMPLIANCE_STATUS_LABEL[row.status]}
-            tintClassName={COMPLIANCE_STATUS_BADGE_CLASS[row.status]}
-            icon={COMPLIANCE_STATUS_ICON[row.status]}
-          />
-        </ListPageBoardCardBadgeRow>
-        <ListPageBoardCardBody>
-          <BoardCardTwoLineBlock iconClass="fa-tag" line1={row.category} line2={`Due ${row.dueDate}`} />
-          <BoardCardTwoLineBlock iconClass="fa-user" line1={row.owner} line2="Owner" />
-        </ListPageBoardCardBody>
-      </ListPageBoardCardHeader>
-    </ListPageBoardCard>
-  )
-}
-
-export const COMPLIANCE_BOARD_GROUP_OPTIONS = [
-  { key: "status", label: "Status" },
-  { key: "category", label: "Category" },
-] as const
-
-export function ComplianceBoardView({
-  rows,
-  groupByColumnKey,
-  onRowActivate,
-}: {
-  rows: ComplianceItem[]
-  groupByColumnKey: string
-  onRowActivate?: (row: ComplianceItem) => void
-}) {
-  const key = groupByColumnKey === "category" ? "category" : "status"
-  const { columns, badgeMap } = useComplianceBoardModel(rows, key)
-
-  return (
-    <ListPageBoardTemplate
-      columns={columns}
-      rows={rows}
-      getRowKey={r => r.id}
-      columnCountBadgeClassName={badgeMap}
-      emptyColumnLabel="No items"
-      renderCard={row => <ComplianceBoardCard row={row} onRowActivate={onRowActivate} />}
-    />
-  )
-}

package/template/components/compliance-client.tsx

@@ -1,92 +0,0 @@
-"use client"
-
-/**
- * Compliance list page — `ListPageTemplate` + `ComplianceTable`; view types from `@/components/data-views`.
- */
-
-import * as React from "react"
-import {
-  ListPageTemplate,
-  type ViewTab,
-  dataListViewIcon,
-  type DataListViewType,
-} from "@/components/data-views"
-import { CompliancePageHeader } from "@/components/compliance-page-header"
-import { ComplianceTable, type ComplianceTableHandle } from "@/components/compliance-table"
-import { KeyMetrics } from "@/components/key-metrics"
-import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
-import { COMPLIANCE_ITEMS } from "@/lib/mock/compliance"
-import { complianceKpiInsight, complianceKpiMetrics } from "@/lib/mock/compliance-kpi"
-
-const DEFAULT_TABS: ViewTab[] = [
-  {
-    id: "obligations",
-    label: "Obligations",
-    viewType: "table",
-    icon: "fa-table",
-    filterId: "all",
-  },
-]
-
-export function ComplianceClient() {
-  const [exportOpen, setExportOpen] = React.useState(false)
-  const [showMetrics, setShowMetrics] = React.useState(true)
-  const tableRef = React.useRef<ComplianceTableHandle>(null)
-  const count = COMPLIANCE_ITEMS.length
-
-  const metrics = React.useMemo(() => complianceKpiMetrics(COMPLIANCE_ITEMS), [])
-  const insight = React.useMemo(() => complianceKpiInsight(COMPLIANCE_ITEMS), [])
-
-  useAskLeoPageContext(
-    React.useMemo(
-      () => ({
-        title: "Compliance",
-        description: `${count} obligations tracked on this hub.`,
-        suggestions: [
-          "What’s due this week?",
-          "Summarize open items by student",
-        ],
-      }),
-      [count],
-    ),
-  )
-
-  return (
-    <ListPageTemplate
-      defaultTabs={DEFAULT_TABS}
-      getTabCount={() => count}
-      tablePropertiesRef={tableRef}
-      header={
-        <CompliancePageHeader
-          itemCount={count}
-          onAddReview={() => {}}
-          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) => (
-        <ComplianceTable
-          key={tab.id}
-          ref={tableRef}
-          items={COMPLIANCE_ITEMS}
-          view={tab.viewType}
-          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
-        />
-      )}
-    />
-  )
-}

package/template/components/compliance-list-view.tsx

@@ -1,54 +0,0 @@
-"use client"
-
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
-import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
-import { DataRowList } from "@/components/data-views/data-row-list"
-import {
-  COMPLIANCE_STATUS_BADGE_CLASS,
-  COMPLIANCE_STATUS_ICON,
-  COMPLIANCE_STATUS_LABEL,
-} from "@/lib/list-status-badges"
-import type { ComplianceItem } from "@/lib/mock/compliance"
-
-export function ComplianceListView({
-  rows,
-  onRowActivate,
-}: {
-  rows: ComplianceItem[]
-  onRowActivate?: (row: ComplianceItem) => void
-}) {
-  return (
-    <DataRowList<ComplianceItem>
-      rows={rows}
-      getRowId={row => row.id}
-      emptyState="No compliance items match your filters."
-      ariaLabel="Compliance items"
-      renderRow={row => (
-        <ListPageBoardCard
-          layout="row"
-          rowContainerClassName="flex w-full flex-col gap-1 sm:flex-row sm:items-center sm:gap-4"
-          onClick={onRowActivate ? () => onRowActivate(row) : undefined}
-          rowEnd={
-            <div className="flex shrink-0 items-center gap-2">
-              <ListHubStatusBadge
-                surface="board"
-                label={COMPLIANCE_STATUS_LABEL[row.status]}
-                tintClassName={COMPLIANCE_STATUS_BADGE_CLASS[row.status]}
-                icon={COMPLIANCE_STATUS_ICON[row.status]}
-              />
-              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
-            </div>
-          }
-        >
-          <div className="space-y-0.5">
-            <p className="text-sm font-semibold text-foreground">{row.title}</p>
-            <p className="text-xs text-muted-foreground">
-              {row.category} · Due {row.dueDate}
-            </p>
-            <p className="text-xs text-muted-foreground">Owner: {row.owner}</p>
-          </div>
-        </ListPageBoardCard>
-      )}
-    />
-  )
-}

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

@@ -1,89 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/components/ui/button"
-import { PageHeader } from "@/components/page-header"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Tip } from "@/components/ui/tip"
-
-export interface CompliancePageHeaderProps {
-  itemCount: number
-  onAddReview: () => void
-  onExport: () => void
-  showMetrics: boolean
-  onToggleMetrics: () => void
-  showTitleBlock?: boolean
-}
-
-export function CompliancePageHeader({
-  itemCount,
-  onAddReview,
-  onExport,
-  showMetrics,
-  onToggleMetrics,
-  showTitleBlock = true,
-}: CompliancePageHeaderProps) {
-  const [moreOpen, setMoreOpen] = React.useState(false)
-  const countLine = `${itemCount} ${itemCount === 1 ? "item" : "items"} · Last updated now`
-
-  return (
-    <PageHeader
-      title="Compliance"
-      subtitle={countLine}
-      showTitleBlock={showTitleBlock}
-      actions={(
-        <div className="flex items-center gap-2" role="group" aria-label="Compliance actions">
-          <Tip side="bottom" label="Schedule a review (demo)">
-            <Button type="button" size="lg" onClick={onAddReview}>
-              <i className="fa-light fa-calendar-check" aria-hidden="true" />
-              New review
-            </Button>
-          </Tip>
-          <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
-            <Tip side="bottom" label="More actions">
-              <DropdownMenuTrigger asChild>
-                <Button
-                  type="button"
-                  size="lg"
-                  variant="outline"
-                  className="aspect-square px-0"
-                  aria-label="More actions"
-                >
-                  <i className="fa-light fa-ellipsis text-base" aria-hidden="true" />
-                </Button>
-              </DropdownMenuTrigger>
-            </Tip>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem
-                onSelect={() => {
-                  window.setTimeout(() => onExport(), 0)
-                }}
-              >
-                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-                Export
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onSelect={() => {
-                  window.setTimeout(() => onToggleMetrics(), 0)
-                }}
-              >
-                <i
-                  className={`fa-light ${showMetrics ? "fa-eye-slash" : "fa-eye"}`}
-                  aria-hidden="true"
-                />
-                {showMetrics ? "Hide metric section" : "Show metric section"}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      )}
-    />
-  )
-}