@exxatdesignux/ui 0.2.15 → 0.2.17

package/template/components/app-sidebar.tsx

@@ -52,6 +52,7 @@ import {
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { StatusBadge } from "@/components/ui/status-badge"
+import { Separator } from "@/components/ui/separator"
 import {
   Tooltip,
   TooltipContent,
@@ -70,6 +71,7 @@ import { NavUser } from "@/components/nav-user"
 import { useSecondaryPanel } from "@/components/secondary-panel"
 import { ExxatProductLogo, ExxatProductMark } from "@/components/exxat-product-logo"
 import { motionHeaderEnter } from "@/lib/motion-ui"
+import { customProductBrandConfig, productBrandLabel } from "@/lib/product-brand"
 import {
   NAV_DOCUMENTS,
   NAV_DOCUMENTS_LABEL,
@@ -85,8 +87,6 @@ import {
   type NavSchool,
   type NavProgram,
 } from "@/lib/mock/navigation"
-import { QUESTION_BANK_ENTRY_PATH } from "@/lib/question-bank-nav"
-
 /** Path segment of a nav URL (strip `#fragment` for matching). */
 function navUrlPath(url: string): string {
   if (!url || url === "#") return ""
@@ -108,7 +108,8 @@ function normalizedLocationHash(locationHash: string): string {
 /**
  * Whether `pathname` (+ optional `location.hash`) matches a sidebar `href`.
  * When several links share the same path (e.g. `/settings`), disambiguate with `#fragment`
- * and require an empty hash for the “default” row (`/settings` with no `#`).
+ * 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.
  */
 function isNavActive(pathname: string, url: string, locationHash = ""): boolean {
   const pathOnly = navUrlPath(url)
@@ -129,7 +130,8 @@ function isNavActive(pathname: string, url: string, locationHash = ""): boolean
   }
 
   if (pathOnly === "/") return pathname === "/" && h === ""
-  if (pathname === pathOnly) return h === ""
+  /** Exact path match — ignore `location.hash` when the nav `href` has no `#…` fragment (QB view tabs use hash). */
+  if (pathname === pathOnly) return true
   // Design system library — active on hub and detail routes.
   if (pathOnly === "/library") {
     return pathname.startsWith("/library/")
@@ -165,6 +167,16 @@ function isCollapsibleChildActive(
 
   if (!isNavActive(pathname, child.url, locationHash)) return false
 
+  /** Hub entry (`/question-bank`) must not stay “active” on `/question-bank/library` etc. */
+  if (parent.primaryHubChildKey && child.key === parent.primaryHubChildKey) {
+    const hubPath = navUrlPath(parent.url)
+    if (hubPath) {
+      const normalized =
+        pathname.length > 1 && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname
+      if (normalized !== hubPath) return false
+    }
+  }
+
   const urls = children.map(c => c.url)
   const allSameUrl = urls.length > 1 && urls.every(u => u === urls[0])
   if (allSameUrl) {
@@ -176,6 +188,33 @@ function isCollapsibleChildActive(
   return true
 }
 
+/**
+ * “Selected” styling on a collapsible **parent** row in the **expanded** sidebar.
+ *
+ * Rule: when any descendant child is the current destination, the parent stays
+ * visually NEUTRAL — the active child carries `data-active` on its own. The
+ * parent is only highlighted when no child matches but the parent URL still
+ * matches (edge case: route that isn't represented in the sub-list).
+ *
+ * Note: this is for the expanded view only. The collapsed icon rail uses
+ * `iconRailActive = isAnyChildActive` because the parent icon is the only
+ * visible affordance there (see `CollapsibleNavItem`).
+ */
+function isCollapsibleParentMenuButtonActive(
+  pathname: string,
+  item: NavLinkItem,
+  locationHash: string,
+): boolean {
+  const children = item.children
+  if (!children?.length) return isNavActive(pathname, item.url, locationHash)
+
+  const anyChildActive = children.some(c =>
+    isCollapsibleChildActive(pathname, item, c, locationHash),
+  )
+  if (anyChildActive) return false
+  return isNavActive(pathname, item.url, locationHash)
+}
+
 /** Accessible suffix for sidebar badges (badge is rendered outside the link node). */
 function badgeAccessibleSuffix(badge: number | string): string {
   if (typeof badge === "number") return `${badge} items`
@@ -183,30 +222,40 @@ function badgeAccessibleSuffix(badge: number | string): string {
 }
 
 /** Child row for expandable nav items — shared by inline sub-menu and collapsed-rail popover. */
-function SidebarNavChildLink({
-  parent,
-  child,
-  pathname,
-  locationHash,
-  onNavigate,
-  linkClassName,
-}: {
-  parent: NavLinkItem
-  child: NavLinkItem
-  pathname: string
-  locationHash: string
-  onNavigate?: () => void
-  /** Popover uses surface tokens; inline sub-menu uses `SidebarMenuSubButton`. */
-  linkClassName?: string
-}) {
+const SidebarNavChildLink = React.forwardRef<
+  HTMLAnchorElement,
+  {
+    parent: NavLinkItem
+    child: NavLinkItem
+    pathname: string
+    locationHash: string
+    onNavigate?: () => void
+    /** Popover uses surface tokens; inline sub-menu uses `SidebarMenuSubButton`. */
+    linkClassName?: string
+  } & Omit<React.ComponentPropsWithoutRef<typeof Link>, "href">
+>(function SidebarNavChildLink(
+  {
+    parent,
+    child,
+    pathname,
+    locationHash,
+    onNavigate,
+    linkClassName,
+    className: incomingClassName,
+    onClick,
+    ...linkRest
+  },
+  ref,
+) {
   const { openPanel } = useSecondaryPanel()
   const childActive = isCollapsibleChildActive(pathname, parent, child, locationHash)
   const childPath = navUrlPath(child.url)
 
   return (
     <Link
+      ref={ref}
       href={child.url}
-      className={cn("flex min-w-0 items-center gap-2", linkClassName)}
+      className={cn("flex min-w-0 items-center gap-2", linkClassName, incomingClassName)}
       aria-current={childActive ? "page" : undefined}
       onClick={e => {
         onNavigate?.()
@@ -218,15 +267,18 @@ function SidebarNavChildLink({
           e.preventDefault()
           openPanel(parent.secondaryPanel)
         }
+        onClick?.(e)
       }}
+      {...linkRest}
     >
       <span className="size-4 shrink-0 inline-flex items-center justify-center" aria-hidden="true">
-        {child.icon}
+        {childActive && child.iconActive ? child.iconActive : child.icon}
       </span>
       <span className="min-w-0 flex-1 truncate">{child.title}</span>
     </Link>
   )
-}
+})
+SidebarNavChildLink.displayName = "SidebarNavChildLink"
 
 /**
  * CollapsibleNavItem — isolated component so each collapsible has its own
@@ -235,19 +287,26 @@ function SidebarNavChildLink({
  * server (SSR) vs the client (router not yet available).
  */
 function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: string }) {
-  const locationHash     = useLocationHash()
-  const isActive         = isNavActive(pathname, item.url, locationHash)
+  const locationHash = useLocationHash()
   const isAnyChildActive =
     item.children?.some(c => isCollapsibleChildActive(pathname, item, c, locationHash)) ?? false
+  const parentMenuButtonActive = isCollapsibleParentMenuButtonActive(pathname, item, locationHash)
   const { state, isMobile } = useSidebar()
-  const { openPanel } = useSecondaryPanel()
   const [open, setOpen] = React.useState(false)
   const [flyoutOpen, setFlyoutOpen] = React.useState(false)
   const flyoutTitleId = React.useId()
   const iconRailCollapsed = state === "collapsed" && !isMobile
-  const showActiveStyle = isActive || isAnyChildActive
+  // In the icon rail the parent icon is the ONLY visible thing for this item
+  // (no sub-list, no labels) — so it must reflect "I'm somewhere inside this
+  // section" by lighting up on any descendant route (e.g. `/question-bank/library`),
+  // not only on the parent URL itself. In the expanded view we keep the
+  // parent neutral and let the active child row carry `data-active` (see
+  // `isCollapsibleParentMenuButtonActive`).
+  const iconRailActive = isAnyChildActive
   const triggerIcon =
-    showActiveStyle && item.iconActive ? item.iconActive : item.icon
+    (iconRailCollapsed ? iconRailActive : parentMenuButtonActive) && item.iconActive
+      ? item.iconActive
+      : item.icon
 
   React.useEffect(() => {
     setOpen(isAnyChildActive)
@@ -267,23 +326,22 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
           open={flyoutOpen}
           onOpenChange={next => {
             setFlyoutOpen(next)
-            if (next && item.secondaryPanel) {
-              openPanel(item.secondaryPanel)
-            }
           }}
         >
           <Tooltip>
             <TooltipTrigger asChild>
               <PopoverTrigger asChild>
                 <SidebarMenuButton
-                  isActive={showActiveStyle}
+                  isActive={iconRailActive}
+                  aria-current={iconRailActive ? "page" : undefined}
                   aria-haspopup="dialog"
                   aria-label={`${item.title} — open subpages`}
                 >
                   <span
+                    key={iconRailActive ? "active" : "idle"}
                     className={cn(
                       "size-4 shrink-0 flex items-center justify-center",
-                      showActiveStyle &&
+                      iconRailActive &&
                         "[animation:sidebar-icon-pop_380ms_cubic-bezier(0.34,1.56,0.64,1)_both]",
                     )}
                     aria-hidden="true"
@@ -341,22 +399,22 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
       open={open}
       onOpenChange={next => {
         setOpen(next)
-        if (next && item.secondaryPanel) {
-          openPanel(item.secondaryPanel)
-        }
       }}
       asChild
     >
-      <SidebarMenuItem>
+      {/* `group/collapsible` lets descendant utilities react to the
+          Radix `data-state` (e.g. chevron rotate, content slide). Radix's
+          asChild merges the data-state onto this `<SidebarMenuItem>`. */}
+      <SidebarMenuItem className="group/collapsible">
         <Tooltip>
           <TooltipTrigger asChild>
             <CollapsibleTrigger asChild>
-              <SidebarMenuButton isActive={showActiveStyle}>
+              <SidebarMenuButton isActive={parentMenuButtonActive}>
                 <span
-                  key={showActiveStyle ? "active" : "idle"}
+                  key={parentMenuButtonActive ? "active" : "idle"}
                   className={cn(
                     "size-4 shrink-0 flex items-center justify-center",
-                    showActiveStyle &&
+                    parentMenuButtonActive &&
                       "[animation:sidebar-icon-pop_380ms_cubic-bezier(0.34,1.56,0.64,1)_both]",
                   )}
                   aria-hidden="true"
@@ -365,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 group-data-[state=open]/collapsible:rotate-90"
+                  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"
                   aria-hidden="true"
                 />
               </SidebarMenuButton>
@@ -375,7 +433,11 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
             {item.title}
           </TooltipContent>
         </Tooltip>
-        <CollapsibleContent className="group-data-[collapsible=icon]:hidden">
+        {/* Slide the children open/closed using Radix's
+            `--radix-collapsible-content-height` CSS variable. `overflow-hidden`
+            is required so the height clip is visible during the animation.
+            Keyframes defined in `app/globals.css` (`collapsible-down/up`). */}
+        <CollapsibleContent className="overflow-hidden group-data-[collapsible=icon]:hidden data-[state=open]:[animation:collapsible-down_200ms_ease-out] data-[state=closed]:[animation:collapsible-up_200ms_ease-out] motion-reduce:animate-none">
           <SidebarMenuSub>
             {item.children.map(child => {
               const childActive = isCollapsibleChildActive(pathname, item, child, locationHash)
@@ -400,7 +462,7 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
 }
 
 function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: string }) {
-  const { openPanel, closePanel } = useSecondaryPanel()
+  const { openPanel } = useSecondaryPanel()
   const locationHash = useLocationHash()
   return (
     <>
@@ -426,6 +488,12 @@ function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: str
                     : undefined
                 }
                 onClick={e => {
+                  // Reopen the panel when the user clicks a panel-driving row
+                  // while ALREADY on its route — Next.js `<Link>` does not
+                  // navigate to the same URL, so without this the panel could
+                  // stay closed (e.g. after the user collapsed it manually).
+                  // On first click (different route), default navigation runs
+                  // and the route's `useAutoPanel` opens the panel itself.
                   if (
                     item.secondaryPanel &&
                     itemPath &&
@@ -433,11 +501,7 @@ function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: str
                     !item.url.includes("#")
                   ) {
                     e.preventDefault()
-                    if (itemPath === QUESTION_BANK_ENTRY_PATH) {
-                      closePanel({ mainSidebar: "leave" })
-                    } else {
-                      openPanel(item.secondaryPanel)
-                    }
+                    openPanel(item.secondaryPanel)
                   }
                 }}
               >
@@ -738,14 +802,26 @@ function TeamSwitcher() {
 // ─────────────────────────────────────────────────────────────────────────────
 
 const PRODUCTS: { id: Product; label: string }[] = [
-  { id: "exxat-one",   label: "Exxat One"   },
-  { id: "exxat-prism", label: "Exxat Prism" },
+  { id: "exxat-one",        label: "Exxat One"        },
+  { id: "exxat-prism",      label: "Exxat Prism"      },
+  { id: "exxat-assessment", label: "Exxat Assessment" },
+  { id: "exxat-custom",     label: "Custom product"   },
 ]
 
 function ProductLogoButton() {
-  const { product, setProduct } = useProduct()
+  const { product, setProduct, customProductBrand, hiddenProductIds } = useProduct()
   const { state, isMobile } = useSidebar()
-  const current = PRODUCTS.find(p => p.id === product) ?? PRODUCTS[0]
+  const products = React.useMemo(
+    () => PRODUCTS.flatMap(p => {
+      if (hiddenProductIds.includes(p.id)) return []
+      if (p.id !== "exxat-custom") return [p]
+      return customProductBrand
+        ? [{ ...p, label: productBrandLabel(customProductBrandConfig(customProductBrand)) }]
+        : []
+    }),
+    [customProductBrand, hiddenProductIds],
+  )
+  const current = products.find(p => p.id === product) ?? products[0]
   const iconRail = state === "collapsed" && !isMobile
   const expandedOrMobile = state === "expanded" || isMobile
 
@@ -768,11 +844,10 @@ function ProductLogoButton() {
               suppressHydrationWarning
             >
               {iconRail ? (
+                // Match the school selector footprint in the icon rail; the
+                // inner mark cutout uses the rail surface instead of a white fill.
                 <span className="flex size-8 shrink-0 items-center justify-center">
-                  <ExxatProductMark
-                    product={current.id}
-                    className="size-7 max-h-none"
-                  />
+                  <ExxatProductMark product={current.id} className="size-8" cutoutColor="var(--sidebar)" />
                 </span>
               ) : (
                 <span className="flex min-h-0 min-w-0 flex-1 items-stretch gap-2">
@@ -783,7 +858,7 @@ function ProductLogoButton() {
                     <ExxatProductLogo
                       product={current.id}
                       variant="mutedSuffix"
-                      className="h-7 w-auto max-w-[min(100%,260px)] object-left object-contain"
+                      className="w-auto max-w-[min(100%,280px)] object-left object-contain"
                     />
                   </span>
                   <span
@@ -810,7 +885,7 @@ function ProductLogoButton() {
           Switch product
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        {PRODUCTS.map(p => (
+        {products.map(p => (
           <DropdownMenuItem
             key={p.id}
             onClick={() => setProduct(p.id)}
@@ -820,7 +895,7 @@ function ProductLogoButton() {
             <ExxatProductLogo
               product={p.id}
               variant="mutedSuffix"
-              className="h-7 w-auto shrink-0 max-w-[min(100%,200px)]"
+              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" />
@@ -901,6 +976,13 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                   <ProductLogoButton />
                 </SidebarMenuItem>
               </SidebarMenu>
+              <div className="flex w-full justify-center px-2">
+                <Separator
+                  orientation="horizontal"
+                  decorative
+                  className="my-1.5 h-px w-full max-w-none shrink-0 bg-sidebar-border group-data-[collapsible=icon]:w-8"
+                />
+              </div>
               <TeamSwitcher />
             </SidebarHeaderStack>
           </SidebarHeader>

package/template/components/ask-leo-sidebar.tsx

@@ -188,8 +188,6 @@ export function AskLeoSidebar() {
   const routeContext = React.useMemo(() => getAskLeoRouteContext(pathname), [pathname])
   const isThinking = threadMessages.some((m) => m.pending)
 
-  const pageTitle = pageContext?.title ?? routeContext.title
-  const pageDescription = pageContext?.description ?? routeContext.description
   const suggestions =
     pageContext?.suggestions && pageContext.suggestions.length > 0
       ? pageContext.suggestions
@@ -286,8 +284,7 @@ export function AskLeoSidebar() {
       style={
         open
           ? {
-              background:
-                "linear-gradient(180deg, color-mix(in oklch, var(--brand-color) 4%, var(--background)) 0%, color-mix(in oklch, var(--brand-color) 8%, var(--background)) 100%)",
+              background: "var(--leo-surface-gradient)",
             }
           : undefined
       }