@exxatdesignux/ui 0.2.16 → 0.2.18

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

@@ -12,7 +12,12 @@
  */
 
 import * as React from "react"
-import Link from "next/link"
+import {
+  PageBreadcrumbBack,
+  PageBreadcrumbTrail,
+  type PageBreadcrumbBackProps,
+  type PageBreadcrumbTrailItem,
+} from "@/components/page-breadcrumb-trail"
 import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import { Kbd, KbdGroup } from "@/components/ui/kbd"
@@ -25,19 +30,26 @@ import { AskLeoToggle } from "@/components/ask-leo-sidebar"
 import { useModKeyLabel } from "@/hooks/use-mod-key-label"
 import { cn } from "@/lib/utils"
 
-export interface BreadcrumbItem {
-  label: string
-  href?: string
-}
+export type BreadcrumbItem = PageBreadcrumbTrailItem
+export type SiteHeaderBackLink = Pick<PageBreadcrumbBackProps, "label" | "href">
 
 export interface SiteHeaderProps {
-  /** Current page title (last breadcrumb segment) */
+  /** Current page title (last breadcrumb segment in trail mode). */
   title?: string
   /** Full breadcrumb trail — each item can be a link or plain text. Title is appended automatically as the last segment. */
   breadcrumbs?: BreadcrumbItem[]
+  /**
+   * Back-icon variant — parent link only (no `title` segment in the header).
+   * Prefer when the page `<h1>` carries the current title (e.g. New question composer).
+   */
+  back?: SiteHeaderBackLink
 }
 
-export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps) {
+export function SiteHeader({
+  title = "Dashboard",
+  breadcrumbs,
+  back,
+}: SiteHeaderProps) {
   const mod = useModKeyLabel()
   const [isStuck, setIsStuck] = React.useState(false)
 
@@ -51,7 +63,13 @@ export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps
   return (
     <div
       className={cn(
-        "sticky top-0 z-60 transition-colors",
+        // Sticky page chrome sits BELOW every Radix overlay (DropdownMenu /
+        // Popover / Select / Dialog / Sheet / Tooltip / Drawer all render at
+        // z-50). Previously `z-60` here caused the school/product switcher
+        // dropdown to open behind the breadcrumb. `z-30` keeps the header
+        // above page content (charts, tables, scrolled rows) but below
+        // floating overlays.
+        "sticky top-0 z-30 transition-colors",
         isStuck ? "bg-sidebar border-b border-border" : "bg-transparent",
       )}
     >
@@ -78,29 +96,16 @@ export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps
           className="mx-2 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-auto"
         />
 
-        {/* Breadcrumb trail */}
-        <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 min-w-0 overflow-hidden">
-          {breadcrumbs?.map((crumb, i) => (
-            <span key={i} className="flex items-center gap-1.5 shrink-0">
-              {crumb.href ? (
-                <Link
-                  href={crumb.href}
-                  className="font-sans text-sm text-muted-foreground hover:text-interactive-hover-foreground transition-colors tracking-normal"
-                >
-                  {crumb.label}
-                </Link>
-              ) : (
-                <span className="font-sans text-sm text-muted-foreground tracking-normal">
-                  {crumb.label}
-                </span>
-              )}
-              <i className="fa-light fa-chevron-right text-xs text-muted-foreground/50" aria-hidden="true" />
-            </span>
-          ))}
-          <span className="font-sans text-sm font-medium text-foreground tracking-normal truncate">
-            {title}
-          </span>
-        </nav>
+        {back ? (
+          <PageBreadcrumbBack {...back} className="min-w-0 flex-1" />
+        ) : (
+          <PageBreadcrumbTrail
+            variant="header"
+            items={breadcrumbs}
+            currentPage={title}
+            className="flex-1"
+          />
+        )}
 
         <div className="ml-auto shrink-0">
           <AskLeoToggle />

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

@@ -3,45 +3,40 @@
 import Link from "next/link"
 import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
 import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+import { DataRowList } from "@/components/data-views/data-row-list"
 
 export function SitesListView({ rows }: { rows: SiteDirectoryRow[] }) {
-  if (rows.length === 0) {
-    return (
-      <div className="px-4 py-16 text-center lg:px-6">
-        <p className="text-sm text-muted-foreground">No sites match your search.</p>
-      </div>
-    )
-  }
-
   return (
-    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
-      {rows.map(site => (
-        <li key={site.id}>
-          <Link
-            href={site.url}
-            className="block rounded-xl text-inherit no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    <DataRowList<SiteDirectoryRow>
+      rows={rows}
+      getRowId={site => site.id}
+      emptyState="No sites match your search."
+      ariaLabel="Sites"
+      renderRow={site => (
+        <Link
+          href={site.url}
+          className="block rounded-xl text-inherit no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <ListPageBoardCard
+            layout="row"
+            interactive
+            rowContainerClassName="flex flex-row items-center gap-3"
+            leading={
+              <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-brand/10 text-brand">
+                <i className="fa-light fa-hospital text-sm" aria-hidden="true" />
+              </span>
+            }
+            rowEnd={
+              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+            }
           >
-            <ListPageBoardCard
-              layout="row"
-              interactive
-              rowContainerClassName="flex flex-row items-center gap-3"
-              leading={
-                <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-brand/10 text-brand">
-                  <i className="fa-light fa-hospital text-sm" aria-hidden="true" />
-                </span>
-              }
-              rowEnd={
-                <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
-              }
-            >
-              <div className="space-y-0.5">
-                <p className="truncate text-sm font-semibold text-foreground">{site.name}</p>
-                <p className="truncate text-xs text-muted-foreground">{site.id}</p>
-              </div>
-            </ListPageBoardCard>
-          </Link>
-        </li>
-      ))}
-    </ul>
+            <div className="space-y-0.5">
+              <p className="truncate text-sm font-semibold text-foreground">{site.name}</p>
+              <p className="truncate text-xs text-muted-foreground">{site.id}</p>
+            </div>
+          </ListPageBoardCard>
+        </Link>
+      )}
+    />
   )
 }

package/template/components/sites-table.tsx

@@ -200,6 +200,10 @@ export const SitesTable = React.forwardRef<
         tableState.setSheetOpen(true)
       },
     }),
+    // `tableState` is freshly returned each render by useTableState; depending
+    // on it would re-create the imperative handle on every render. Only the
+    // React setter is needed (and is referentially stable).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [tableState.setSheetOpen],
   )
 

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

@@ -151,6 +151,24 @@ 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,
+  }
+
   return (
     <>
       {extraActions}
@@ -185,42 +203,42 @@ 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}
         boardGroupByColumnOptions={boardGroupByColumnOptions}

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

@@ -117,6 +117,9 @@ export interface TablePropertiesDrawerProps {
 
 type SheetPanel = "main" | "table-display" | "filter" | "sort" | "group" | "columns" | "conditional-rules"
 
+/** Properties sheet uses `z-[80]`; default portaled menus are `z-50` and sit underneath. */
+const PROPERTIES_SHEET_PORTAL_Z = "z-[90]"
+
 export function TablePropertiesDrawer({
   open,
   onOpenChange,
@@ -243,14 +246,14 @@ export function TablePropertiesDrawer({
       : "—"
 
   return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
+    <Sheet open={open} onOpenChange={onOpenChange} modal={false}>
       <SheetContent
         side="right"
         showCloseButton={false}
         showOverlay={false}
         // w-[min(20rem,calc(100vw-1rem))]: cap to viewport width - 1rem at narrow/zoomed viewports
         // so the drawer never overflows horizontally. Use 100svh so height is correct on mobile.
-        className="w-[min(20rem,calc(100vw-1rem))] p-0 gap-0 flex flex-col border border-border shadow-xl rounded-xl overflow-hidden"
+        className="z-[80] w-[min(20rem,calc(100vw-1rem))] p-0 gap-0 flex flex-col border border-border shadow-xl rounded-xl overflow-hidden"
         style={{ top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100svh - 1rem)" }}
       >
 
@@ -462,7 +465,7 @@ export function TablePropertiesDrawer({
                         >
                           <SelectValue />
                         </SelectTrigger>
-                        <SelectContent align="end">
+                        <SelectContent align="end" className={PROPERTIES_SHEET_PORTAL_Z}>
                           {boardGroupByColumnOptions.map(o => (
                             <SelectItem key={o.key} value={o.key}>
                               {o.label}
@@ -533,7 +536,7 @@ export function TablePropertiesDrawer({
                             <SelectTrigger size="sm" className="w-[6.5rem] shrink-0" id="board-line-count" aria-label="Line count">
                               <SelectValue />
                             </SelectTrigger>
-                            <SelectContent align="end">
+                            <SelectContent align="end" className={PROPERTIES_SHEET_PORTAL_Z}>
                               <SelectItem value="1">1 line</SelectItem>
                               <SelectItem value="2">2 lines</SelectItem>
                               <SelectItem value="3">3 lines</SelectItem>
@@ -659,7 +662,7 @@ export function TablePropertiesDrawer({
                         {[
                           { icon: "fa-circle-1", text: "Click \"Add filter\" below" },
                           { icon: "fa-circle-2", text: "Choose a field to filter by" },
-                          { icon: "fa-circle-3", text: "Pick a condition and value" },
+                          { icon: "fa-circle-3", text: "Pick at least one value — the grid updates immediately" },
                         ].map(step => (
                           <div key={step.icon} className="flex items-center gap-2 text-xs text-muted-foreground">
                             <i className={`fa-light ${step.icon} text-muted-foreground text-xs shrink-0`} aria-hidden="true" />
@@ -726,7 +729,7 @@ export function TablePropertiesDrawer({
 
                   {/* Add filter + Remove all */}
                   <div className="flex items-center gap-2 pt-2">
-                    <DropdownMenu>
+                    <DropdownMenu modal={false}>
                       <DropdownMenuTrigger asChild>
                         <Button
                           type="button"
@@ -737,11 +740,11 @@ export function TablePropertiesDrawer({
                           Add filter
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start">
+                      <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
                         <DropdownMenuLabel className="text-xs">Filter by field</DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {filterFields.map(f => (
-                          <DropdownMenuItem key={f.key} onClick={() => onAddFilter(f.key)}>
+                          <DropdownMenuItem key={f.key} onSelect={() => onAddFilter(f.key)}>
                             <i className={`fa-light ${f.icon}`} aria-hidden="true" />
                             {f.label}
                           </DropdownMenuItem>
@@ -833,7 +836,7 @@ export function TablePropertiesDrawer({
 
                   {/* Add sort + Remove all */}
                   <div className="flex items-center gap-2 pt-2">
-                    <DropdownMenu>
+                    <DropdownMenu modal={false}>
                       <DropdownMenuTrigger asChild>
                         <Button
                           type="button"
@@ -844,11 +847,11 @@ export function TablePropertiesDrawer({
                           Add sort
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start">
+                      <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
                         <DropdownMenuLabel className="text-xs">Sort by field</DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {sortFieldList.filter(f => !sortRules.some(r => r.fieldKey === f.key)).map(col => (
-                          <DropdownMenuItem key={col.key} onClick={() => onAddSortRule(col.key)}>
+                          <DropdownMenuItem key={col.key} onSelect={() => onAddSortRule(col.key)}>
                             <i className="fa-light fa-arrow-up-arrow-down text-xs" aria-hidden="true" />
                             {col.label}
                           </DropdownMenuItem>
@@ -1052,7 +1055,7 @@ function ConditionalRulesPanel({
       )}
 
       <div className="flex items-center gap-2 pt-2">
-        <DropdownMenu>
+        <DropdownMenu modal={false}>
           <DropdownMenuTrigger asChild>
             <Button
               type="button"
@@ -1063,13 +1066,13 @@ function ConditionalRulesPanel({
               Add rule
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
+          <DropdownMenuContent align="start" className={PROPERTIES_SHEET_PORTAL_Z}>
             <DropdownMenuLabel className="text-xs">Rule for column</DropdownMenuLabel>
             <DropdownMenuSeparator />
             {filterFields.map(f => (
               <DropdownMenuItem
                 key={f.key}
-                onClick={() => onAdd({
+                onSelect={() => onAdd({
                   fieldKey: f.key,
                   operator: f.operators[0],
                   values: [],

package/template/components/team-client.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 /**
- * Team page — primary list template: ListPageTemplate + KeyMetrics + TeamTable (same composition as DataListClient).
+ * Team page — primary list template: ListPageTemplate + KeyMetrics + TeamTable (same composition as PlacementsClient).
  * Imports from `@/components/data-views` for shared list-page + view types.
  */
 

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

@@ -2,11 +2,13 @@
 
 /**
  * TeamListView — full-width rows for team roster (same data as DataTable / board).
+ * Shell from generic `DataRowList`; row body stays team-specific (avatar,
+ * name, role, email, status badge).
  */
 
-import * as React from "react"
 import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
 import { ListPageBoardCard, ListPageBoardCardAvatar } from "@/components/data-views/list-page-board-card"
+import { DataRowList } from "@/components/data-views/data-row-list"
 import {
   TEAM_MEMBER_STATUS_BADGE_CLASS,
   TEAM_MEMBER_STATUS_ICON,
@@ -14,42 +16,6 @@ import {
 } from "@/lib/list-status-badges"
 import type { TeamMember } from "@/lib/mock/team"
 
-function TeamListRow({
-  member,
-  onRowActivate,
-}: {
-  member: TeamMember
-  onRowActivate?: (member: TeamMember) => void
-}) {
-  return (
-    <li>
-      <ListPageBoardCard
-        layout="row"
-        rowContainerClassName="flex flex-row items-center gap-3"
-        onClick={onRowActivate ? () => onRowActivate(member) : undefined}
-        leading={<ListPageBoardCardAvatar initials={member.initials} className="size-9" />}
-        rowEnd={
-          <div className="flex shrink-0 items-center gap-2">
-            <ListHubStatusBadge
-              surface="board"
-              label={TEAM_MEMBER_STATUS_LABEL[member.status]}
-              tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
-              icon={TEAM_MEMBER_STATUS_ICON[member.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="truncate text-sm font-semibold text-foreground">{member.name}</p>
-          <p className="text-xs text-muted-foreground">{member.role}</p>
-          <p className="truncate text-xs text-muted-foreground">{member.email}</p>
-        </div>
-      </ListPageBoardCard>
-    </li>
-  )
-}
-
 export function TeamListView({
   members,
   onRowActivate,
@@ -57,19 +23,37 @@ export function TeamListView({
   members: TeamMember[]
   onRowActivate?: (member: TeamMember) => void
 }) {
-  if (members.length === 0) {
-    return (
-      <div className="px-4 py-16 text-center lg:px-6">
-        <p className="text-sm text-muted-foreground">No team members match your filters.</p>
-      </div>
-    )
-  }
-
   return (
-    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
-      {members.map(m => (
-        <TeamListRow key={m.id} member={m} onRowActivate={onRowActivate} />
-      ))}
-    </ul>
+    <DataRowList<TeamMember>
+      rows={members}
+      getRowId={m => m.id}
+      emptyState="No team members match your filters."
+      ariaLabel="Team members"
+      renderRow={member => (
+        <ListPageBoardCard
+          layout="row"
+          rowContainerClassName="flex flex-row items-center gap-3"
+          onClick={onRowActivate ? () => onRowActivate(member) : undefined}
+          leading={<ListPageBoardCardAvatar initials={member.initials} className="size-9" />}
+          rowEnd={
+            <div className="flex shrink-0 items-center gap-2">
+              <ListHubStatusBadge
+                surface="board"
+                label={TEAM_MEMBER_STATUS_LABEL[member.status]}
+                tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
+                icon={TEAM_MEMBER_STATUS_ICON[member.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="truncate text-sm font-semibold text-foreground">{member.name}</p>
+            <p className="text-xs text-muted-foreground">{member.role}</p>
+            <p className="truncate text-xs text-muted-foreground">{member.email}</p>
+          </div>
+        </ListPageBoardCard>
+      )}
+    />
   )
 }

package/template/components/team-table.tsx

@@ -13,6 +13,7 @@ import {
   TEAM_MEMBER_STATUS_ICON,
   TEAM_MEMBER_STATUS_LABEL,
 } from "@/lib/list-status-badges"
+import { mailtoHref } from "@/lib/mailto"
 import type { TeamMember } from "@/lib/mock/team"
 import { DataTable, DataTableToolbar } from "@/components/data-table"
 import {
@@ -154,7 +155,7 @@ function TeamFinderDetail({
               <i className="fa-light fa-envelope text-[10px]" aria-hidden="true" /> Email
             </dt>
             <dd className="text-[13px]">
-              <a href={`mailto:${member.email}`} className="text-interactive-foreground hover:underline">{member.email}</a>
+              <a href={mailtoHref(member.email)} className="text-interactive-foreground hover:underline">{member.email}</a>
             </dd>
           </div>
           <div className="flex flex-col gap-0.5">
@@ -277,7 +278,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
         operators: ["contains", "not_contains"],
       },
       cell: row => (
-        <a href={`mailto:${row.email}`} className="text-sm text-primary hover:underline truncate block">
+        <a href={mailtoHref(row.email)} className="text-sm text-primary hover:underline truncate block">
           {row.email}
         </a>
       ),
@@ -341,7 +342,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => window.open(`mailto:${row.email}`)}>
+              <DropdownMenuItem onClick={() => window.open(mailtoHref(row.email))}>
                 <i className="fa-light fa-envelope" aria-hidden="true" />
                 Email
               </DropdownMenuItem>
@@ -501,6 +502,10 @@ export const TeamTable = React.forwardRef<
     openPropertiesDrawer: () => {
       tableState.setSheetOpen(true)
     },
+  // `tableState` is freshly returned each render by useTableState; depending on
+  // it would re-create the imperative handle on every render. Only the React
+  // setter is needed (and is referentially stable).
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [tableState.setSheetOpen])
 
   const teamPanelFinderGroups = React.useMemo(

package/template/components/templates/list-page.tsx

@@ -47,7 +47,7 @@ import {
   Shortcut,
 } from "@/components/ui/dropdown-menu"
 import type { DataListViewType } from "@/lib/data-list-view"
-import { DATA_LIST_VIEW_TILES } from "@/lib/data-list-view"
+import { DATA_LIST_VIEW_TILES, dataListViewAddShortcut } from "@/lib/data-list-view"
 import {
   createListPageEditViewHandler,
   type OpenTablePropertiesHandle,
@@ -273,13 +273,16 @@ export function ListPageTemplate({
 
   return (
     <>
-      {!hideViewsToolbar && VIEW_TYPES.slice(0, 9).map((v, i) => (
-        <Shortcut
-          key={v.type}
-          keys={`⌘⇧${i + 1}`}
-          onInvoke={() => addView(v.type)}
-        />
-      ))}
+      {!hideViewsToolbar && VIEW_TYPES.slice(0, 9).map((v, i) => {
+        const keys = dataListViewAddShortcut(i)
+        return keys ? (
+          <Shortcut
+            key={v.type}
+            keys={keys}
+            onInvoke={() => addView(v.type)}
+          />
+        ) : null
+      })}
       {activeTab && !hideViewsToolbar && (
         <>
           <Shortcut keys="F2" onInvoke={() => openRename(activeTab)} />
@@ -480,7 +483,7 @@ export function ListPageTemplate({
               {VIEW_TYPES.map((v, i) => (
                 <DropdownMenuItem
                   key={v.type}
-                  shortcut={i < 9 ? `⌘⇧${i + 1}` : undefined}
+                  shortcut={dataListViewAddShortcut(i)}
                   onSelect={() => addView(v.type)}
                 >
                   <i className={`fa-light ${v.icon}`} aria-hidden="true" />

package/template/components/templates/nested-secondary-panel-shell.tsx

@@ -15,7 +15,7 @@ export interface NestedSecondaryPanelShellProps {
 
 /**
  * Shared chrome for a nested hub rail — full width vs icon rail.
- * Fill uses `--secondary-panel-bg` (soft brand wash on `--background`).
+ * Fill uses `--secondary-panel-bg` — one step lighter than `--sidebar` (elevation 1).
  */
 export function NestedSecondaryPanelShell({
   open,
@@ -34,10 +34,16 @@ export function NestedSecondaryPanelShell({
         "transition-[width,margin,opacity] duration-200 ease-linear",
         open
           ? cn(
-              "shrink-0 m-2 mx-2 rounded-xl ring-1 ring-border shadow-sm relative md:sticky md:top-2 bg-[var(--secondary-panel-bg)]",
+              // Match the primary sidebar: fill the full viewport height
+              // (minus our 0.5rem top + 0.5rem bottom margin from `m-2` →
+              // 1rem on desktop where the panel is `md:sticky md:top-2`;
+              // 2rem on mobile where the panel scrolls inline and we leave
+              // a little more breathing room). No upper cap so tall screens
+              // get a fully-extended rail.
+              "shrink-0 m-2 mx-2 rounded-xl ring-1 ring-sidebar-border shadow-sm relative md:sticky md:top-2 bg-[var(--secondary-panel-bg)]",
               compact
-                ? "w-12 min-w-12 max-w-12 h-[min(calc(100svh-2rem),800px)] md:h-[min(calc(100svh-1rem),800px)]"
-                : "w-64 min-w-64 max-w-64 h-[min(calc(100svh-2rem),800px)] md:h-[min(calc(100svh-1rem),800px)]",
+                ? "w-12 min-w-12 max-w-12 h-[calc(100svh-2rem)] md:h-[calc(100svh-1rem)]"
+                : "w-64 min-w-64 max-w-64 h-[calc(100svh-2rem)] md:h-[calc(100svh-1rem)]",
             )
           : "h-0 min-h-0 shrink overflow-hidden border-0 p-0 m-0 min-w-0 w-0 max-w-0 opacity-0 pointer-events-none",
         className,