@exxatdesignux/ui 0.2.8 → 0.2.10

package/template/components/secondary-panel.tsx

@@ -1,11 +1,11 @@
 "use client"
 
 /**
- * SecondaryPanel — nested sidebar panel that appears between the icon-rail
- * sidebar and the main content. When active, the main sidebar collapses to
- * icon-only mode; when dismissed, the sidebar expands back.
+ * 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`).
  *
- * Pattern: VS Code / Figma icon-rail + detail panel.
+ * Chrome uses {@link NestedSecondaryPanelShell}. Question bank body stays in
+ * `question-bank-secondary-nav.tsx` (domain-specific), not duplicated here.
  */
 
 import * as React from "react"
@@ -13,30 +13,65 @@ import { cn } from "@/lib/utils"
 import { useSidebar } from "@/components/ui/sidebar"
 import { Tip } from "@/components/ui/tip"
 import { Button } from "@/components/ui/button"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/components/ui/input-group"
 import { QuestionBankSecondaryNav } from "@/components/question-bank-secondary-nav"
+import { NestedSecondaryPanelShell } from "@/components/templates/nested-secondary-panel-shell"
+import type { QuestionBankItem } from "@/lib/mock/question-bank"
+import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
+
+export type QuestionBankFolderBridge = {
+  folders: QuestionBankFolder[]
+  onFoldersChange: React.Dispatch<React.SetStateAction<QuestionBankFolder[]>>
+  items: QuestionBankItem[]
+  onItemsChange: React.Dispatch<React.SetStateAction<QuestionBankItem[]>>
+}
+
+export type QuestionBankAccessBridge = {
+  openManageAccess: () => void
+}
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Context
 // ─────────────────────────────────────────────────────────────────────────────
 
+export type ClosePanelOptions = {
+  /**
+   * Main app sidebar after the secondary panel closes.
+   * - `leave` (default): only clear the active panel — preserves expanded/collapsed primary rail (⌘B, cookie).
+   * - `expand`: full primary rail — use only when product explicitly restores the wide rail after dismiss.
+   * - `collapse`: icon rail — matches routes that keep the primary rail compact with the panel closed.
+   */
+  mainSidebar?: "expand" | "collapse" | "leave"
+}
+
 interface SecondaryPanelContextValue {
   /** Currently active panel id, or null if none */
   activePanel: string | null
-  /** Open a panel by id */
+  /** Open a panel by id (always exits compact / full-width). */
   openPanel: (id: string) => void
-  /** Close the panel */
-  closePanel: () => void
+  /** Close the panel (programmatic / route cleanup). */
+  closePanel: (opts?: ClosePanelOptions) => void
+  /** Icon-only nested rail while the panel stays “open”. Cleared by {@link openPanel} / {@link closePanel}. */
+  secondaryPanelCompact: boolean
+  /** Narrow icon rail (primary-sidebar-style); keeps {@link activePanel} mounted. */
+  collapseActiveSecondaryPanel: () => void
+  /** Question bank folder tree shared with the secondary nav while the hub is mounted. */
+  questionBankFolderBridge: QuestionBankFolderBridge | null
+  setQuestionBankFolderBridge: (bridge: QuestionBankFolderBridge | null) => void
+  /** Opens the hub collaborators sheet from the secondary nav. */
+  questionBankAccessBridge: QuestionBankAccessBridge | null
+  setQuestionBankAccessBridge: (bridge: QuestionBankAccessBridge | null) => void
 }
 
 const SecondaryPanelContext = React.createContext<SecondaryPanelContextValue>({
   activePanel: null,
   openPanel: () => {},
   closePanel: () => {},
+  secondaryPanelCompact: false,
+  collapseActiveSecondaryPanel: () => {},
+  questionBankFolderBridge: null,
+  setQuestionBankFolderBridge: () => {},
+  questionBankAccessBridge: null,
+  setQuestionBankAccessBridge: () => {},
 })
 
 export function useSecondaryPanel() {
@@ -45,25 +80,59 @@ export function useSecondaryPanel() {
 
 export function SecondaryPanelProvider({ children }: { children: React.ReactNode }) {
   const [activePanel, setActivePanel] = React.useState<string | null>(null)
+  const [secondaryPanelCompact, setSecondaryPanelCompact] = React.useState(false)
+  const [questionBankFolderBridge, setQuestionBankFolderBridge] =
+    React.useState<QuestionBankFolderBridge | null>(null)
+  const [questionBankAccessBridge, setQuestionBankAccessBridge] =
+    React.useState<QuestionBankAccessBridge | null>(null)
   const { setOpen } = useSidebar()
 
-  const openPanel = React.useCallback((id: string) => {
-    setActivePanel(id)
-    setOpen(false) // collapse main sidebar to icon rail
-  }, [setOpen])
+  const openPanel = React.useCallback(
+    (id: string) => {
+      setSecondaryPanelCompact(false)
+      setActivePanel(id)
+      setOpen(false) // collapse main sidebar to icon rail
+    },
+    [setOpen],
+  )
 
-  const closePanel = React.useCallback(() => {
+  const closePanel = React.useCallback((opts?: ClosePanelOptions) => {
+    setSecondaryPanelCompact(false)
     setActivePanel(null)
-    setOpen(true) // expand main sidebar back
+    const mainSidebar = opts?.mainSidebar ?? "leave"
+    if (mainSidebar === "leave") return
+    if (mainSidebar === "collapse") {
+      setOpen(false)
+    } else {
+      setOpen(true) // expand main sidebar back
+    }
   }, [setOpen])
 
+  const collapseActiveSecondaryPanel = React.useCallback(() => {
+    setSecondaryPanelCompact(true)
+  }, [])
+
   const value = React.useMemo(
     () => ({
       activePanel,
       openPanel,
       closePanel,
+      secondaryPanelCompact,
+      collapseActiveSecondaryPanel,
+      questionBankFolderBridge,
+      setQuestionBankFolderBridge,
+      questionBankAccessBridge,
+      setQuestionBankAccessBridge,
     }),
-    [activePanel, openPanel, closePanel],
+    [
+      activePanel,
+      openPanel,
+      closePanel,
+      secondaryPanelCompact,
+      collapseActiveSecondaryPanel,
+      questionBankFolderBridge,
+      questionBankAccessBridge,
+    ],
   )
 
   return (
@@ -78,8 +147,11 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
 // ─────────────────────────────────────────────────────────────────────────────
 
 function QuestionBankPanel() {
-  const { closePanel } = useSecondaryPanel()
-  const [query, setQuery] = React.useState("")
+  const { collapseActiveSecondaryPanel, secondaryPanelCompact } = useSecondaryPanel()
+
+  if (secondaryPanelCompact) {
+    return <QuestionBankSecondaryNav />
+  }
 
   return (
     <>
@@ -90,34 +162,19 @@ function QuestionBankPanel() {
         >
           Question bank
         </h2>
-        <Tip label="Close panel" side="bottom">
+        <Tip label="Use icon-only navigation" side="bottom">
           <Button
             type="button"
             size="icon"
             variant="ghost"
-            onClick={closePanel}
-            aria-label="Close panel"
+            onClick={() => collapseActiveSecondaryPanel()}
+            aria-label="Use icon-only navigation"
           >
-            <i className="fa-light fa-xmark" aria-hidden="true" />
+            <i className="fa-light fa-angles-left" aria-hidden="true" />
           </Button>
         </Tip>
       </div>
-      <div className="px-4 pb-2">
-        <InputGroup className="h-8 min-h-8">
-          <InputGroupAddon>
-            <i className="fa-light fa-magnifying-glass size-4 text-[13px]" aria-hidden="true" />
-          </InputGroupAddon>
-          <InputGroupInput
-            type="search"
-            value={query}
-            onChange={e => setQuery(e.target.value)}
-            placeholder="Search"
-            aria-label="Search"
-            className="text-sm pe-3"
-          />
-        </InputGroup>
-      </div>
-      <QuestionBankSecondaryNav query={query} />
+      <QuestionBankSecondaryNav />
     </>
   )
 }
@@ -128,31 +185,13 @@ const PANELS: Record<string, React.FC> = {
 }
 
 export function SecondaryPanel() {
-  const { activePanel } = useSecondaryPanel()
+  const { activePanel, secondaryPanelCompact } = useSecondaryPanel()
   const PanelContent = activePanel ? PANELS[activePanel] : null
 
   return (
-    <nav
-      aria-label="Secondary navigation"
-      data-state={activePanel ? "open" : "closed"}
-      className={cn(
-        "flex flex-col overflow-hidden",
-        "transition-[width,margin,opacity] duration-200 ease-linear",
-        activePanel
-          ? "w-64 shrink-0 m-2 mx-2 rounded-xl ring-1 ring-sidebar-border shadow-sm relative h-[min(calc(100svh-2rem),800px)] md:sticky md:top-2 md:h-[min(calc(100svh-1rem),800px)]"
-          : "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",
-      )}
-      style={activePanel ? { backgroundColor: "var(--secondary-panel-bg, #FAFBFF)" } : undefined}
-    >
-      <div
-        className={cn(
-          "flex flex-1 flex-col overflow-y-auto",
-          activePanel ? "min-w-0" : "hidden min-w-0 w-0 p-0",
-        )}
-      >
-        {PanelContent ? <PanelContent /> : null}
-      </div>
-    </nav>
+    <NestedSecondaryPanelShell open={Boolean(activePanel)} compact={secondaryPanelCompact}>
+      {PanelContent ? <PanelContent /> : null}
+    </NestedSecondaryPanelShell>
   )
 }
 
@@ -171,3 +210,31 @@ export function useAutoPanel(panelId: string) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [panelId])
 }
+
+/** Sync hub folder state into the question bank secondary nav while the route is mounted. */
+export function QuestionBankFolderBridge({
+  folders,
+  onFoldersChange,
+  items,
+  onItemsChange,
+}: QuestionBankFolderBridge) {
+  const { setQuestionBankFolderBridge } = useSecondaryPanel()
+
+  React.useEffect(() => {
+    setQuestionBankFolderBridge({ folders, onFoldersChange, items, onItemsChange })
+    return () => setQuestionBankFolderBridge(null)
+  }, [folders, onFoldersChange, items, onItemsChange, setQuestionBankFolderBridge])
+
+  return null
+}
+
+export function QuestionBankAccessBridge({ openManageAccess }: QuestionBankAccessBridge) {
+  const { setQuestionBankAccessBridge } = useSecondaryPanel()
+
+  React.useEffect(() => {
+    setQuestionBankAccessBridge({ openManageAccess })
+    return () => setQuestionBankAccessBridge(null)
+  }, [openManageAccess, setQuestionBankAccessBridge])
+
+  return null
+}

package/template/components/settings-client.tsx

@@ -430,7 +430,9 @@ export function SettingsClient() {
           </p>
         </section>
 
-        <SettingsAppearanceCard />
+        <section id="appearance" className="scroll-mt-20">
+          <SettingsAppearanceCard />
+        </section>
 
         <section id="input-formats" className="scroll-mt-20">
           <header className="mb-6 space-y-1">

package/template/components/sidebar-shell.tsx

@@ -2,6 +2,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).
  */
 
 import * as React from "react"

package/template/components/sites-all-client.tsx

@@ -63,7 +63,7 @@ function SitesPageHeader({
                 </Button>
               </DropdownMenuTrigger>
             </Tip>
-            <DropdownMenuContent align="end" className="w-52">
+            <DropdownMenuContent align="end">
               <DropdownMenuItem
                 onSelect={() => {
                   window.setTimeout(() => onExport(), 0)

package/template/components/sites-table.tsx

@@ -137,7 +137,7 @@ function buildSitesColumns(): ColumnDef<SiteDirectoryRow>[] {
                 <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuContent align="end">
               <DropdownMenuItem asChild>
                 <Link href={row.url} className="flex cursor-pointer items-center gap-2">
                   <i className="fa-light fa-arrow-up-right-from-square" aria-hidden="true" />

package/template/components/system-banner-slot.tsx

@@ -23,8 +23,9 @@ export function SystemBannerSlot() {
   //   collapsed: gap = icon + spacing(4), inset ms-2 → match packages/ui sidebar gap + 0.5rem.
   // Below md: px-2 matches SidebarInset horizontal inset (high zoom / narrow viewports).
   // md+: left padding follows the sidebar gap so the banner aligns with the main content area.
+  // `z-20` keeps the slot (and promo glow) above the fixed sidebar rail (`z-10`) so paint order does not flatten the shadow.
   return (
-    <div className="shrink-0 px-2 pt-1.5 transition-[padding] duration-200 ease-linear md:ps-[var(--sidebar-width)] md:pe-2 md:pt-2 md:group-data-[state=collapsed]/sidebar-wrapper:ps-[calc(var(--sidebar-width-icon)+1rem+0.5rem)]">
+    <div className="relative z-20 shrink-0 px-2 pt-1.5 transition-[padding] duration-200 ease-linear md:ps-[var(--sidebar-width)] md:pe-2 md:pt-2 md:group-data-[state=collapsed]/sidebar-wrapper:ps-[calc(var(--sidebar-width-icon)+1rem+0.5rem)]">
       <SystemBanner
         variant={config.variant}
         emphasis={config.emphasis}

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

@@ -737,7 +737,7 @@ export function TablePropertiesDrawer({
                           Add filter
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start" className="w-48">
+                      <DropdownMenuContent align="start">
                         <DropdownMenuLabel className="text-xs">Filter by field</DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {filterFields.map(f => (
@@ -844,7 +844,7 @@ export function TablePropertiesDrawer({
                           Add sort
                         </Button>
                       </DropdownMenuTrigger>
-                      <DropdownMenuContent align="start" className="w-48">
+                      <DropdownMenuContent align="start">
                         <DropdownMenuLabel className="text-xs">Sort by field</DropdownMenuLabel>
                         <DropdownMenuSeparator />
                         {sortFieldList.filter(f => !sortRules.some(r => r.fieldKey === f.key)).map(col => (
@@ -1063,7 +1063,7 @@ function ConditionalRulesPanel({
               Add rule
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="w-48">
+          <DropdownMenuContent align="start">
             <DropdownMenuLabel className="text-xs">Rule for column</DropdownMenuLabel>
             <DropdownMenuSeparator />
             {filterFields.map(f => (

package/template/components/table-properties/sort-card.tsx

@@ -38,7 +38,7 @@ export function DrawerSortCard(props: DrawerSortCardProps) {
             onClick={onToggleDir}
             className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors mt-0.5"
           >
-            <i className={`fa-light ${rule.direction === "asc" ? "fa-arrow-up-az" : "fa-arrow-down-az"} text-xs`} aria-hidden="true" />
+            <i className={`fa-light ${rule.direction === "asc" ? "fa-arrow-up-a-z" : "fa-arrow-down-a-z"} text-xs`} aria-hidden="true" />
             {rule.direction === "asc" ? "Ascending" : "Descending"}
             <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
           </button>

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

@@ -62,7 +62,7 @@ export function TeamPageHeader({
                 </Button>
               </DropdownMenuTrigger>
             </Tip>
-            <DropdownMenuContent align="end" className="w-52">
+            <DropdownMenuContent align="end">
               <DropdownMenuItem
                 onSelect={() => {
                   window.setTimeout(() => onExport(), 0)

package/template/components/team-table.tsx

@@ -25,7 +25,7 @@ import {
   saveTeamDashboardLayout,
 } from "@/components/data-view-dashboard-charts-team"
 import { KEY_METRICS_KPI_COUNT_DEFAULT } from "@/lib/dashboard-layout-merge"
-import type { ChartType, DashboardLayout } from "@/components/data-view-dashboard-charts"
+import type { ChartType, DashboardLayout } from "@/lib/data-view-dashboard-placements-layout"
 import { TeamListView } from "@/components/team-list-view"
 import { TeamBoardView, TEAM_BOARD_GROUP_OPTIONS } from "@/components/team-board-view"
 import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
@@ -340,7 +340,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
                 <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-40">
+            <DropdownMenuContent align="end">
               <DropdownMenuItem onClick={() => window.open(`mailto:${row.email}`)}>
                 <i className="fa-light fa-envelope" aria-hidden="true" />
                 Email
@@ -503,6 +503,11 @@ export const TeamTable = React.forwardRef<
     },
   }), [tableState.setSheetOpen])
 
+  const teamPanelFinderGroups = React.useMemo(
+    () => buildTeamStatusGroups(tableState.rows),
+    [tableState.rows],
+  )
+
   const teamBoardGroupKey = TEAM_BOARD_GROUP_OPTIONS.some(
     o => o.key === displayOptions.boardGroupByColumnKey,
   )
@@ -596,7 +601,6 @@ export const TeamTable = React.forwardRef<
   }
 
   if (view === "panel") {
-    const groups = React.useMemo(() => buildTeamStatusGroups(tableState.rows), [tableState.rows])
     return (
       <div className="flex min-h-0 flex-1 flex-col">
         {sharedToolbar}
@@ -604,7 +608,7 @@ export const TeamTable = React.forwardRef<
           <FinderPanelView<TeamMember>
             embedded
             groupsColumnTitle="Status"
-            groups={groups}
+            groups={teamPanelFinderGroups}
             rows={tableState.rows}
             getRowId={r => r.id}
             getRowGroupId={r => r.status}

package/template/components/templates/dedicated-search-landing-template.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+
+import { ListPageViewFrame } from "@/components/data-views"
+
+export interface DedicatedSearchLandingTemplateProps {
+  /** Page title — string or rich node (e.g. styled heading). */
+  title: React.ReactNode
+  /** Primary search control (typically {@link DedicatedSearchUrlComposer}). */
+  composer: React.ReactNode
+  /** Optional block below composer (e.g. {@link DedicatedSearchRecents}). */
+  trailing?: React.ReactNode
+  /** Forwarded to {@link ListPageViewFrame}. */
+  maxWidthClassName?: string
+  frameClassName?: string
+  gutterClassName?: string
+}
+
+const DEFAULT_GUTTER =
+  "mx-auto flex min-h-[min(72vh,36rem)] w-full min-w-0 flex-col justify-center gap-0 px-6 py-8 sm:px-8 sm:py-10 md:px-12 md:py-12 lg:px-16"
+
+/**
+ * Centered dedicated-search landing — empty `?q=` shell (hero title + composer + optional trailing).
+ */
+export function DedicatedSearchLandingTemplate({
+  title,
+  composer,
+  trailing,
+  maxWidthClassName = "max-w-5xl",
+  frameClassName = "min-w-0",
+  gutterClassName = DEFAULT_GUTTER,
+}: DedicatedSearchLandingTemplateProps) {
+  return (
+    <ListPageViewFrame
+      maxWidthClassName={maxWidthClassName}
+      className={frameClassName}
+      gutterClassName={gutterClassName}
+    >
+      <header className="min-w-0">
+        {typeof title === "string" ? (
+          <h1
+            className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl"
+            style={{ fontFamily: "var(--font-heading)" }}
+          >
+            {title}
+          </h1>
+        ) : (
+          title
+        )}
+      </header>
+
+      <div className="min-w-0 mt-6 sm:mt-8">{composer}</div>
+
+      {trailing ? <div className="min-w-0 mt-10 sm:mt-12 md:mt-14 lg:mt-16">{trailing}</div> : null}
+    </ListPageViewFrame>
+  )
+}

package/template/components/templates/dedicated-search-results-template.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+
+/** Apply to the hub content wrapper when showing results (list surface under composer). */
+export const DEDICATED_SEARCH_RESULTS_OUTER_CONTENT_CLASSNAME =
+  "border-t border-border/40 bg-gradient-to-b from-muted/25 via-background to-background"
+
+export interface DedicatedSearchResultsHeaderChromeProps {
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * Muted strip wrapping page chrome + composer on the results branch (below site header).
+ */
+export function DedicatedSearchResultsHeaderChrome({ children, className }: DedicatedSearchResultsHeaderChromeProps) {
+  return <div className={cn("border-b border-border/50 bg-muted/15", className)}>{children}</div>
+}