@exxatdesignux/ui 0.2.19 → 0.3.0

package/template/components/rotations-empty-state.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+/**
+ * Rotations hub — main canvas when no rotation detail is selected.
+ * Pairs with SecondaryPanel (nested sidebar); CTA reopens the panel if closed.
+ */
+
+import { Button } from "@/components/ui/button"
+import { useSecondaryPanel } from "@/components/sidebar"
+
+export function RotationsEmptyState() {
+  const { openPanel } = useSecondaryPanel()
+
+  return (
+    <section
+      aria-labelledby="rotations-empty-title"
+      className="flex flex-1 flex-col items-center justify-center rounded-xl border border-dashed border-border/80 bg-muted/25 px-6 py-12 text-center min-h-[min(420px,calc(100svh-var(--header-height)-6rem))]"
+    >
+      <div className="mb-6 w-full max-w-[min(100%,280px)] shrink-0">
+        {/* Static SVG hero, above the fold — next/image can't optimize SVGs
+            without `dangerouslyAllowSVG`, and lazy-loading is wrong here. */}
+        {/* eslint-disable-next-line @next/next/no-img-element -- SVG; next/image can't optimize without dangerouslyAllowSVG */}
+        <img
+          src="/Illustration/Rotation.svg"
+          alt=""
+          width={622}
+          height={559}
+          decoding="async"
+          className="h-auto w-full select-none"
+        />
+      </div>
+      <h2
+        id="rotations-empty-title"
+        className="font-heading text-xl font-semibold tracking-tight text-foreground sm:text-2xl"
+      >
+        Select a rotation
+      </h2>
+      <p className="mt-2 max-w-md text-sm leading-relaxed text-muted-foreground">
+        Use the rotations panel next to the sidebar to browse cycles, open a rotation for
+        details, or review schedules and assigned students.
+      </p>
+      <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+        <Button type="button" size="lg" onClick={() => openPanel("rotations")}>
+          <i className="fa-light fa-sidebar text-[15px]" aria-hidden="true" />
+          Open rotations panel
+        </Button>
+      </div>
+    </section>
+  )
+}

package/template/components/rotations-panel-activator.tsx

@@ -0,0 +1,8 @@
+"use client"
+
+import { useAutoPanel } from "@/components/sidebar"
+
+export function RotationsPanelActivator() {
+  useAutoPanel("rotations")
+  return null
+}

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,7 +529,6 @@ 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."
             >
@@ -623,7 +622,7 @@ export function SettingsAppearanceCard() {
                             side="top"
                           >
                             <span
-                              className="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-foreground"
+                              className="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-foreground"
                               aria-label="Active product"
                             >
                               <i
@@ -863,6 +862,6 @@ export function SettingsAppearanceCard() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </>
+    </section>
   )
 }

package/template/components/settings-client.tsx

@@ -39,19 +39,6 @@ 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",
@@ -376,32 +363,8 @@ 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("")
@@ -440,27 +403,20 @@ export function SettingsClient() {
   }
 
   return (
-    <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">
+    <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">
         <section id="account" className="scroll-mt-20">
           <header className="mb-6 space-y-1">
             <h2 className="text-lg font-semibold text-foreground">Account</h2>
@@ -578,6 +534,6 @@ export function SettingsClient() {
           </div>
         </section>
       </div>
-    </FocusedWorkflowSidebarSections>
+    </div>
   )
 }

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

@@ -5,7 +5,7 @@ import { Label } from "@/components/ui/label"
 import { cn } from "@/lib/utils"
 
 /**
- * Settings row — inline (label left, control right on lg+) or stacked (label above).
+ * Two-column settings row: label + helper on the left, controls on the right.
  */
 export function SettingsFormRow({
   label,
@@ -13,27 +13,22 @@ 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 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",
+        "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",
         className,
       )}
     >
-      <div className="space-y-1 text-start lg:pt-1">
+      <div className="space-y-1 lg:pt-1 text-start">
         <Label htmlFor={htmlFor} className="text-sm font-medium text-foreground">
           {label}
         </Label>

package/template/components/{app-sidebar-dynamic.tsx → sidebar/app-sidebar-dynamic.tsx}

@@ -7,7 +7,7 @@
  * Radix ID mismatch is suppressed at the CollapsibleContent level instead.
  */
 import type { ComponentProps } from "react"
-import { AppSidebar } from "@/components/app-sidebar"
+import { AppSidebar } from "./app-sidebar"
 import type { Sidebar } from "@/components/ui/sidebar"
 
 export function AppSidebarDynamic(props: ComponentProps<typeof Sidebar>) {

package/template/components/{app-sidebar.tsx → sidebar/app-sidebar.tsx}

@@ -67,8 +67,8 @@ import { useModKeyLabel } from "@/hooks/use-mod-key-label"
 import { useLocationHash } from "@/hooks/use-location-hash"
 import { useSidebarReflowZoom } from "@/hooks/use-sidebar-reflow-zoom"
 import { useProduct, type Product } from "@/contexts/product-context"
-import { NavUser } from "@/components/nav-user"
-import { useSecondaryPanel } from "@/components/secondary-panel"
+import { NavUser } from "./nav-user"
+import { useSecondaryPanel } from "./secondary-panel"
 import { ExxatProductLogo, ExxatProductMark } from "@/components/exxat-product-logo"
 import { motionHeaderEnter } from "@/lib/motion-ui"
 import { customProductBrandConfig, productBrandLabel } from "@/lib/product-brand"
@@ -105,22 +105,11 @@ function normalizedLocationHash(locationHash: string): string {
   return locationHash.startsWith("#") ? locationHash.slice(1) : locationHash
 }
 
-/**
- * Paths where a sibling sidebar row uses `#fragment` on the same pathname
- * (e.g. Settings vs Tokens & themes). The plain-path row must not stay active
- * when the hash belongs to that sibling.
- */
-const NAV_EXCLUSIVE_HASH_BY_PATH: Readonly<Record<string, readonly string[]>> = {
-  "/settings": ["appearance"],
-  "/help": ["more"],
-}
-
 /**
  * Whether `pathname` (+ optional `location.hash`) matches a sidebar `href`.
  * When several links share the same path (e.g. `/settings`), disambiguate with `#fragment`
  * in each `href` — those rows use the `frag !== null` branch below.
- * For `href` without `#…`, an in-page hash (e.g. QB view tabs) does not clear the match,
- * except when the hash is reserved for a hash-sibling row on that path.
+ * For `href` without `#…`, an in-page hash (e.g. QB view tabs) does not clear the match.
  */
 function isNavActive(pathname: string, url: string, locationHash = ""): boolean {
   const pathOnly = navUrlPath(url)
@@ -142,13 +131,7 @@ function isNavActive(pathname: string, url: string, locationHash = ""): boolean
 
   if (pathOnly === "/") return pathname === "/" && h === ""
   /** Exact path match — ignore `location.hash` when the nav `href` has no `#…` fragment (QB view tabs use hash). */
-  if (pathname === pathOnly) {
-    if (h !== "") {
-      const exclusive = NAV_EXCLUSIVE_HASH_BY_PATH[pathOnly]
-      if (exclusive?.includes(h)) return false
-    }
-    return true
-  }
+  if (pathname === pathOnly) return true
   // Design system library — active on hub and detail routes.
   if (pathOnly === "/library") {
     return pathname.startsWith("/library/")
@@ -440,7 +423,7 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
                 </span>
                 <span>{item.title}</span>
                 <i
-                  className="fa-light fa-chevron-right ml-auto text-xs text-current transition-transform duration-200 ease-out group-data-[state=open]/collapsible:rotate-90 motion-reduce:transition-none"
+                  className="fa-light fa-chevron-right ms-auto text-xs text-current transition-transform duration-200 ease-out group-data-[state=open]/collapsible:rotate-90 motion-reduce:transition-none"
                   aria-hidden="true"
                 />
               </SidebarMenuButton>
@@ -844,58 +827,60 @@ function ProductLogoButton() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <SidebarMenuButton
-          size="lg"
-          tooltip={iconRail ? current.label : undefined}
-          className={cn(
-            "py-2 text-sidebar-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
-            expandedOrMobile &&
-              "h-auto min-h-12 !overflow-visible items-center [&>span:last-child]:!overflow-visible [&>span:last-child]:!whitespace-normal [&>span:last-child]:text-clip",
-            "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center",
-            iconRail &&
-              "group-data-[collapsible=icon]:!size-9 group-data-[collapsible=icon]:!min-h-9 group-data-[collapsible=icon]:!max-h-9 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:overflow-visible",
-          )}
-          aria-label={`Current product: ${current.label}. Switch product`}
-          suppressHydrationWarning
-        >
-          {iconRail ? (
-            // Match the school selector footprint in the icon rail (32px frame,
-            // 28px mark — same visual weight as the avatar with inset padding).
-            <span className="flex size-8 shrink-0 items-center justify-center">
-              <ExxatProductMark product={current.id} className="size-7" />
-            </span>
-          ) : (
-            <span className="flex min-h-0 min-w-0 flex-1 items-stretch gap-2">
-              <span
-                className="flex min-h-0 min-w-0 flex-1 items-center justify-start overflow-visible"
-                aria-hidden="true"
-              >
-                <ExxatProductLogo
-                  product={current.id}
-                  variant="mutedSuffix"
-                  className="w-auto max-w-[min(100%,280px)] object-left object-contain"
-                />
-              </span>
-              <span
-                className="flex w-6 shrink-0 items-center justify-center self-stretch text-muted-foreground"
-                aria-hidden="true"
-              >
-                <i
-                  className="fa-light fa-chevron-down block text-xs leading-none"
-                  aria-hidden="true"
-                />
-              </span>
-            </span>
-          )}
-        </SidebarMenuButton>
-      </DropdownMenuTrigger>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className={cn(
+                "py-2 text-sidebar-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+                expandedOrMobile &&
+                  "h-auto min-h-12 !overflow-visible items-center [&>span:last-child]:!overflow-visible [&>span:last-child]:!whitespace-normal [&>span:last-child]:text-clip",
+                "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center",
+                iconRail &&
+                  "group-data-[collapsible=icon]:!size-9 group-data-[collapsible=icon]:!min-h-9 group-data-[collapsible=icon]:!max-h-9 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:overflow-visible",
+              )}
+              aria-label={`Current product: ${current.label}. Switch product`}
+              suppressHydrationWarning
+            >
+              {iconRail ? (
+                // Match the school selector footprint in the icon rail (32px frame,
+                // 28px mark — same visual weight as the avatar with inset padding).
+                <span className="flex size-8 shrink-0 items-center justify-center">
+                  <ExxatProductMark product={current.id} className="size-7" />
+                </span>
+              ) : (
+                <span className="flex min-h-0 min-w-0 flex-1 items-stretch gap-2">
+                  <span
+                    className="flex min-h-0 min-w-0 flex-1 items-center justify-start overflow-visible"
+                    aria-hidden="true"
+                  >
+                    <ExxatProductLogo
+                      product={current.id}
+                      variant="mutedSuffix"
+                      className="w-auto max-w-[min(100%,280px)] object-left object-contain"
+                    />
+                  </span>
+                  <span
+                    className="flex w-6 shrink-0 items-center justify-center self-stretch text-muted-foreground"
+                    aria-hidden="true"
+                  >
+                    <i
+                      className="fa-light fa-chevron-down block text-xs leading-none"
+                      aria-hidden="true"
+                    />
+                  </span>
+                </span>
+              )}
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile}>
+          {current.label}
+        </TooltipContent>
+      </Tooltip>
 
-      <DropdownMenuContent
-        align="start"
-        side={iconRail ? "right" : "bottom"}
-        sideOffset={iconRail ? 8 : 4}
-      >
+      <DropdownMenuContent align="start" side="right" sideOffset={8}>
         <DropdownMenuLabel className="text-xs text-muted-foreground">
           Switch product
         </DropdownMenuLabel>
@@ -913,7 +898,7 @@ function ProductLogoButton() {
               className="w-auto shrink-0 max-w-[min(100%,260px)]"
             />
             {p.id === product && (
-              <i className="fa-solid fa-check ml-auto text-brand text-xs" aria-hidden="true" />
+              <i className="fa-solid fa-check ms-auto text-brand text-xs" aria-hidden="true" />
             )}
           </DropdownMenuItem>
         ))}

package/template/components/sidebar/index.ts

@@ -0,0 +1,16 @@
+// Barrel re-export for the sidebar shell.
+// Consumers SHOULD import via `@/components/sidebar`; per-file paths still
+// work as escape hatch (e.g. `@/components/sidebar/secondary-panel`).
+//
+// See apps/web/docs/components-audit-2026-05.md §2.3.
+export * from "./app-sidebar"
+export * from "./app-sidebar-dynamic"
+export * from "./sidebar-shell"
+export * from "./sidebar-auto-collapse"
+export * from "./sidebar-auto-open"
+export * from "./nav-main"
+export * from "./nav-secondary"
+export * from "./nav-documents"
+export * from "./nav-user"
+export * from "./secondary-nav"
+export * from "./secondary-panel"

package/template/components/{secondary-nav.tsx → sidebar/secondary-nav.tsx}

@@ -293,7 +293,7 @@ export function SecondaryNavPanel({
             title={section.action.label}
             onClick={section.action.onClick}
             className={cn(
-              "inline-flex size-6 items-center justify-center rounded-md -mr-1",
+              "inline-flex size-6 items-center justify-center rounded-md -me-1",
               "text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover-strong",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             )}
@@ -318,7 +318,7 @@ export function SecondaryNavPanel({
               placeholder={section.searchPlaceholder ?? "Search"}
               aria-label={`Search ${section.label}`}
               className={cn(
-                "w-full h-7 pl-7 pr-2 rounded-md text-xs bg-background border border-border",
+                "w-full h-7 ps-7 pe-2 rounded-md text-xs bg-background border border-border",
                 "placeholder:text-muted-foreground/70",
                 "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
               )}

package/template/components/{secondary-panel.tsx → sidebar/secondary-panel.tsx}

@@ -4,14 +4,16 @@
  * 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}. Panel bodies live in
- * `components/secondary-panels/` + {@link SECONDARY_PANELS}; hub nav stays domain-specific.
+ * Chrome uses {@link NestedSecondaryPanelShell}. Question bank body stays in
+ * `question-bank-secondary-nav.tsx` (domain-specific), not duplicated here.
  */
 
 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"
@@ -109,7 +111,10 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
       // zoom this stays the legacy behavior (full-width on open).
       setSecondaryPanelCompact(reflowZoom)
       setActivePanel(id)
-      setOpen(false) // collapse main sidebar to icon rail
+      // `persist: false` — collapsing the rail to make room for the secondary
+      // panel is an incidental layout side-effect; the user's saved
+      // expanded/collapsed preference (cookie) must not be overwritten by it.
+      setOpen(false, { persist: false }) // collapse main sidebar to icon rail
     },
     [setOpen, reflowZoom],
   )
@@ -120,9 +125,9 @@ export function SecondaryPanelProvider({ children }: { children: React.ReactNode
     const mainSidebar = opts?.mainSidebar ?? "leave"
     if (mainSidebar === "leave") return
     if (mainSidebar === "collapse") {
-      setOpen(false)
+      setOpen(false, { persist: false })
     } else {
-      setOpen(true) // expand main sidebar back
+      setOpen(true, { persist: false }) // expand main sidebar back
     }
   }, [setOpen])
 
@@ -164,9 +169,47 @@ 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 ? SECONDARY_PANELS[activePanel] : null
+  const PanelContent = activePanel ? PANELS[activePanel] : null
 
   return (
     <NestedSecondaryPanelShell open={Boolean(activePanel)} compact={secondaryPanelCompact}>

package/template/components/{sidebar-auto-collapse.tsx → sidebar/sidebar-auto-collapse.tsx}

@@ -7,6 +7,10 @@ import { useSidebar } from "@/components/ui/sidebar"
  * Collapses the sidebar on mount. Restores previous state on unmount.
  * Used on the new-placement page so the sidebar collapses when entering
  * and reverts to whatever it was when leaving.
+ *
+ * Both transitions pass `{ persist: false }` so the visual collapse never
+ * overwrites the user's saved sidebar preference (the `sidebar_state_v2`
+ * cookie). Only an explicit toggle (⌘B / sidebar button) persists.
  */
 export function SidebarAutoCollapse() {
   const { open, setOpen } = useSidebar()
@@ -14,8 +18,8 @@ export function SidebarAutoCollapse() {
 
   useEffect(() => {
     prevOpen.current = open
-    setOpen(false)
-    return () => { setOpen(prevOpen.current) }
+    setOpen(false, { persist: false })
+    return () => { setOpen(prevOpen.current, { persist: false }) }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 

package/template/components/{sidebar-shell.tsx → sidebar/sidebar-shell.tsx}

@@ -2,7 +2,7 @@
 
 /**
  * SidebarShell — SidebarProvider with layout-aware widths.
- * Desktop expanded/collapsed is persisted in the `sidebar_state` cookie by `@exxatdesignux/ui`
+ * Desktop expanded/collapsed is persisted in the `sidebar_state_v2` cookie by `@exxatdesignux/ui`
  * `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.
  */

package/template/components/site-header.tsx

@@ -107,7 +107,7 @@ export function SiteHeader({
           />
         )}
 
-        <div className="ml-auto shrink-0">
+        <div className="ms-auto shrink-0">
           <AskLeoToggle />
         </div>
       </div>