@exxatdesignux/ui 0.2.9 → 0.2.11

package/template/app/(app)/layout.tsx

@@ -10,7 +10,7 @@ import { SystemBannerSlot } from "@/components/system-banner-slot"
 import { CommandMenu } from "@/components/command-menu"
 import { CommandMenuProvider } from "@/contexts/command-menu-context"
 import { buildCommandMenuConfig } from "@/lib/command-menu-config"
-import { getCommandMenuSearchDataGroups } from "@/lib/command-menu-search-data"
+import { COMMAND_MENU_SEARCH_DATA_GROUPS } from "@/lib/command-menu-search-data"
 
 /**
  * Shared app layout:
@@ -21,14 +21,17 @@ import { getCommandMenuSearchDataGroups } from "@/lib/command-menu-search-data"
  * via SystemBannerProvider) — no hardcoded copy here.
  */
 export default function AppLayout({ children }: { children: React.ReactNode }) {
+  const commandMenuConfig = React.useMemo(
+    () => buildCommandMenuConfig({ dataGroups: COMMAND_MENU_SEARCH_DATA_GROUPS }),
+    [],
+  )
+
   return (
     <DashboardViewProvider>
     <ChartVariantProvider>
     <AskLeoProvider>
     <SystemBannerProvider>
-    <CommandMenuProvider
-      value={buildCommandMenuConfig({ dataGroups: getCommandMenuSearchDataGroups() })}
-    >
+    <CommandMenuProvider value={commandMenuConfig}>
 
     <SidebarShell wrapperClassName="flex min-h-svh flex-col">
       {/* ⌘K command palette */}

package/template/app/(app)/question-bank/find/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from "react"
+
+import { QuestionBankClient } from "@/components/question-bank-client"
+
+/** Discovery hub composer results — same hub chrome as the library, distinct from `/question-bank/list`. */
+export default function QuestionBankHubFindPage() {
+  return (
+    <Suspense fallback={null}>
+      <QuestionBankClient />
+    </Suspense>
+  )
+}

package/template/app/(app)/question-bank/layout.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { usePathname } from "next/navigation"
+
+import { useSecondaryPanel } from "@/components/secondary-panel"
+import { QUESTION_BANK_ENTRY_PATH } from "@/lib/question-bank-nav"
+
+/**
+ * Keeps the nested secondary panel open across library / list / find navigations.
+ * The discovery hub (`/question-bank`) is full-width — no secondary bar there.
+ */
+export default function QuestionBankLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+  const { openPanel, closePanel, activePanel } = useSecondaryPanel()
+  const closePanelRef = React.useRef(closePanel)
+  const openPanelRef = React.useRef(openPanel)
+  closePanelRef.current = closePanel
+  openPanelRef.current = openPanel
+
+  /** Leaving `/question-bank/*` entirely — close nested panel without forcing primary sidebar open (⌘B / cookie). */
+  React.useEffect(() => {
+    return () => {
+      closePanelRef.current({ mainSidebar: "leave" })
+    }
+  }, [])
+
+  /** Only react to route changes — refs carry latest open/close. */
+  React.useEffect(() => {
+    const isDiscoveryHubRoot =
+      pathname === QUESTION_BANK_ENTRY_PATH || pathname === `${QUESTION_BANK_ENTRY_PATH}/`
+
+    if (isDiscoveryHubRoot) {
+      closePanelRef.current({ mainSidebar: "leave" })
+      return undefined
+    }
+
+    if (activePanel !== "question-bank") {
+      openPanelRef.current("question-bank")
+    }
+    return undefined
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- pathname + activePanel drive when to ensure panel id
+  }, [pathname, activePanel])
+
+  return children
+}

package/template/app/(app)/question-bank/library/page.tsx

@@ -0,0 +1,11 @@
+import { Suspense } from "react"
+
+import { QuestionBankClient } from "@/components/question-bank-client"
+
+export default function QuestionBankLibraryPage() {
+  return (
+    <Suspense fallback={null}>
+      <QuestionBankClient />
+    </Suspense>
+  )
+}

package/template/app/(app)/question-bank/list/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from "react"
+
+import { QuestionBankClient } from "@/components/question-bank-client"
+
+/** Question bank list surface — same hub as `/question-bank/library`, optimized for `?q=` search landings. */
+export default function QuestionBankListPage() {
+  return (
+    <Suspense fallback={null}>
+      <QuestionBankClient />
+    </Suspense>
+  )
+}

package/template/app/(app)/question-bank/page.tsx

@@ -1,10 +1,11 @@
 import { Suspense } from "react"
-import { QuestionBankClient } from "@/components/question-bank-client"
 
-export default function QuestionBankPage() {
+import { QuestionBankHubClient } from "@/components/question-bank-hub-client"
+
+export default function QuestionBankHubPage() {
   return (
     <Suspense fallback={null}>
-      <QuestionBankClient />
+      <QuestionBankHubClient />
     </Suspense>
   )
 }

package/template/app/globals.css

@@ -10,9 +10,8 @@
 
 @import "tailwindcss";
 @import "tw-animate-css";
-@import "shadcn/tailwind.css";
 
-/* Ensure Tailwind scans the shared UI package for utility classes */
+/* Ensure Tailwind scans the shared UI package for utility classes (repo-relative — stable with pnpm + Turbopack). */
 @source "../node_modules/@exxatdesignux/ui/src";
 
 /* RTL layout direction support */

package/template/components/app-sidebar.tsx

@@ -85,6 +85,7 @@ 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 {
@@ -93,11 +94,42 @@ function navUrlPath(url: string): string {
   return i === -1 ? url : url.slice(0, i)
 }
 
-function isNavActive(pathname: string, url: string): boolean {
+/** Hash segment from a nav `href` (no `#`). `null` when the URL has no `#`. */
+function navUrlFragment(url: string): string | null {
+  if (!url.includes("#")) return null
+  return url.slice(url.indexOf("#") + 1)
+}
+
+function normalizedLocationHash(locationHash: string): string {
+  if (!locationHash) return ""
+  return locationHash.startsWith("#") ? locationHash.slice(1) : locationHash
+}
+
+/**
+ * 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 `#`).
+ */
+function isNavActive(pathname: string, url: string, locationHash = ""): boolean {
   const pathOnly = navUrlPath(url)
+  const frag = navUrlFragment(url)
+  const h = normalizedLocationHash(locationHash)
+
   if (!pathOnly || pathOnly === "#") return false
-  if (pathOnly === "/") return pathname === "/"
-  if (pathname === pathOnly) return true
+
+  if (frag !== null) {
+    if (pathOnly === "/") return pathname === "/" && h === frag
+    if (pathOnly === "/library") {
+      return pathname.startsWith("/library/") && h === frag
+    }
+    if (pathOnly.startsWith("/library/")) {
+      return pathname === pathOnly && h === frag
+    }
+    return pathname === pathOnly && h === frag
+  }
+
+  if (pathOnly === "/") return pathname === "/" && h === ""
+  if (pathname === pathOnly) return h === ""
   // Design system library — active on hub and detail routes.
   if (pathOnly === "/library") {
     return pathname.startsWith("/library/")
@@ -116,11 +148,11 @@ function isCollapsibleChildActive(
   locationHash: string
 ): boolean {
   const children = parent.children
-  if (!children?.length) return isNavActive(pathname, child.url)
+  if (!children?.length) return isNavActive(pathname, child.url, locationHash)
 
   const hasHashChild = children.some(c => c.url.includes("#"))
   if (hasHashChild) {
-    const h = locationHash.startsWith("#") ? locationHash.slice(1) : locationHash
+    const h = normalizedLocationHash(locationHash)
     const childHash = child.url.includes("#") ? child.url.split("#")[1] : ""
     if (parent.primaryHubChildKey && child.key === parent.primaryHubChildKey) {
       return h === ""
@@ -131,7 +163,7 @@ function isCollapsibleChildActive(
     return false
   }
 
-  if (!isNavActive(pathname, child.url)) return false
+  if (!isNavActive(pathname, child.url, locationHash)) return false
 
   const urls = children.map(c => c.url)
   const allSameUrl = urls.length > 1 && urls.every(u => u === urls[0])
@@ -204,12 +236,12 @@ function SidebarNavChildLink({
  */
 function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: string }) {
   const locationHash     = useLocationHash()
-  const isActive         = isNavActive(pathname, item.url)
+  const isActive         = isNavActive(pathname, item.url, locationHash)
   const isAnyChildActive =
     item.children?.some(c => isCollapsibleChildActive(pathname, item, c, locationHash)) ?? false
   const { state, isMobile } = useSidebar()
   const { openPanel } = useSecondaryPanel()
-  const [open, setOpen]  = React.useState(isAnyChildActive)
+  const [open, setOpen] = React.useState(false)
   const [flyoutOpen, setFlyoutOpen] = React.useState(false)
   const flyoutTitleId = React.useId()
   const iconRailCollapsed = state === "collapsed" && !isMobile
@@ -368,7 +400,8 @@ function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: s
 }
 
 function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: string }) {
-  const { openPanel } = useSecondaryPanel()
+  const { openPanel, closePanel } = useSecondaryPanel()
+  const locationHash = useLocationHash()
   return (
     <>
       {items.map(item => {
@@ -379,7 +412,7 @@ function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: str
           return <CollapsibleNavItem key={item.key} item={item} pathname={pathname} />
         }
 
-        const isActive = isNavActive(pathname, item.url)
+        const isActive = isNavActive(pathname, item.url, locationHash)
         const itemPath = navUrlPath(item.url)
         return (
           <SidebarMenuItem key={item.key}>
@@ -400,7 +433,11 @@ function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: str
                     !item.url.includes("#")
                   ) {
                     e.preventDefault()
-                    openPanel(item.secondaryPanel)
+                    if (itemPath === QUESTION_BANK_ENTRY_PATH) {
+                      closePanel({ mainSidebar: "leave" })
+                    } else {
+                      openPanel(item.secondaryPanel)
+                    }
                   }
                 }}
               >
@@ -465,6 +502,7 @@ function SidebarNavSecondaryItems({
   pathname: string
 }) {
   const mod = useModKeyLabel()
+  const locationHash = useLocationHash()
   return (
     <>
       {items.map((item) => {
@@ -473,7 +511,7 @@ function SidebarNavSecondaryItems({
           !item.opensCommandMenu &&
           Boolean(pathOnly) &&
           pathOnly !== "#" &&
-          isNavActive(pathname, item.url)
+          isNavActive(pathname, item.url, locationHash)
 
         return (
           <SidebarMenuItem key={item.key}>
@@ -767,7 +805,7 @@ function ProductLogoButton() {
         </TooltipContent>
       </Tooltip>
 
-      <DropdownMenuContent className="w-52" align="start" side="right" sideOffset={8}>
+      <DropdownMenuContent align="start" side="right" sideOffset={8}>
         <DropdownMenuLabel className="text-xs text-muted-foreground">
           Switch product
         </DropdownMenuLabel>

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

@@ -6,6 +6,7 @@
  */
 
 import * as React from "react"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -29,20 +30,80 @@ export interface AskLeoComposerProps {
   /** Called with trimmed message after send (composer clears afterward). */
   onSubmit?: (message: string) => void
   placeholder?: string
-  className?: string
+  /**
+   * When non-empty and the field is empty (single-line / collapsed), cycles these as an overlaid hint
+   * with a soft crossfade. Native `placeholder` is suppressed while the overlay shows.
+   */
+  animatedPlaceholders?: string[]
+  /** Milliseconds between animated placeholder phrases. Default 4200. */
+  animatedPlaceholderIntervalMs?: number
+  /**
+   * When `2`, animated hints can wrap to two lines instead of a single truncated line (e.g. example hub queries).
+   * Default `1` matches the original pill composer behavior.
+   */
+  animatedPlaceholderMaxLines?: 1 | 2
+  /**
+   * `attachments` — plus menu + file picker (default). `ai-mark` — Leo-style icon only (e.g. question bank hub).
+   */
+  leadingSlot?: "attachments" | "ai-mark"
+  /** Accessible name for the textarea (paired with `htmlFor`). */
+  inputLabel?: string
+  /** `aria-label` on the submit control when the field has text. */
+  submitButtonAriaLabel?: string
+  /**
+   * `send` — paper plane (chat / Ask Leo). `search` — magnifying glass (question bank hub + dedicated search).
+   */
+  submitAppearance?: "send" | "search"
   /** Lets the parent swap pill vs card chrome when the field grows (multiline / long text). */
   onExpandedChange?: (expanded: boolean) => void
+  className?: string
 }
 
 export const AskLeoComposer = React.forwardRef<HTMLTextAreaElement, AskLeoComposerProps>(
   function AskLeoComposer(
-    { value, onChange, onSubmit, placeholder = "Ask Leo anything…", className, onExpandedChange },
+    {
+      value,
+      onChange,
+      onSubmit,
+      placeholder = "Ask Leo anything…",
+      className,
+      onExpandedChange,
+      animatedPlaceholders,
+      animatedPlaceholderIntervalMs = 4200,
+      animatedPlaceholderMaxLines = 1,
+      leadingSlot = "attachments",
+      inputLabel = "Message to Leo",
+      submitButtonAriaLabel = "Send message",
+      submitAppearance = "send",
+    },
     forwardedRef,
   ) {
     const [isExpanded, setIsExpanded] = React.useState(false)
+    const reduceMotion = useReducedMotion()
     const fieldId = React.useId()
+    const phrases = React.useMemo(
+      () => (animatedPlaceholders ?? []).map(s => s.trim()).filter(Boolean),
+      [animatedPlaceholders],
+    )
+    const [phraseIndex, setPhraseIndex] = React.useState(0)
+    const showAnimatedPlaceholder = phrases.length > 0 && !value.trim() && !isExpanded
+
+    React.useEffect(() => {
+      if (!showAnimatedPlaceholder) return
+      const id = window.setInterval(() => {
+        setPhraseIndex(i => (i + 1) % phrases.length)
+      }, animatedPlaceholderIntervalMs)
+      return () => window.clearInterval(id)
+    }, [showAnimatedPlaceholder, phrases.length, animatedPlaceholderIntervalMs])
+
+    React.useEffect(() => {
+      if (!showAnimatedPlaceholder) setPhraseIndex(0)
+    }, [showAnimatedPlaceholder])
 
+    const reportedExpandedRef = React.useRef<boolean | undefined>(undefined)
     React.useEffect(() => {
+      if (reportedExpandedRef.current === isExpanded) return
+      reportedExpandedRef.current = isExpanded
       onExpandedChange?.(isExpanded)
     }, [isExpanded, onExpandedChange])
     const innerRef = React.useRef<HTMLTextAreaElement>(null)
@@ -92,13 +153,15 @@ export const AskLeoComposer = React.forwardRef<HTMLTextAreaElement, AskLeoCompos
       <div className={cn("min-w-0 w-full", className)}>
         <form onSubmit={handleSubmit} className="group/composer min-w-0 w-full" noValidate>
           <label htmlFor={fieldId} className="sr-only">
-            Message to Leo
+            {inputLabel}
           </label>
-          <input ref={fileInputRef} type="file" multiple className="sr-only" onChange={() => {}} />
+          {leadingSlot === "attachments" ? (
+            <input ref={fileInputRef} type="file" multiple className="sr-only" onChange={() => {}} />
+          ) : null}
 
           <div
             className={cn(
-              "min-w-0 w-full cursor-text overflow-hidden border border-border/80 bg-card transition-[border-radius,padding] duration-200 ease-out",
+              "min-w-0 w-full cursor-text overflow-hidden border border-[color:var(--control-border)] bg-card transition-[border-radius,padding] duration-200 ease-out",
               isExpanded
                 ? "rounded-2xl px-2 py-2 shadow-none grid [grid-template-columns:minmax(0,1fr)] [grid-template-rows:auto_1fr_auto] [grid-template-areas:'header'_'primary'_'footer']"
                 : "rounded-full px-1 py-0.5 shadow-none grid [grid-template-columns:auto_minmax(0,1fr)_auto] [grid-template-rows:minmax(0,auto)] [grid-template-areas:'header_header_header'_'leading_primary_trailing'_'._footer_.']",
@@ -111,65 +174,119 @@ export const AskLeoComposer = React.forwardRef<HTMLTextAreaElement, AskLeoCompos
               })}
               style={{ gridArea: "primary" }}
             >
-              <div className="max-h-52 min-h-0 min-w-0 flex-1 overflow-y-auto">
+              <div className="relative max-h-52 min-h-0 min-w-0 flex-1 overflow-y-auto">
                 <Textarea
                   id={fieldId}
                   ref={setTextareaRef}
                   value={value}
                   onChange={handleTextareaChange}
                   onKeyDown={handleKeyDown}
-                  placeholder={placeholder}
+                  placeholder={showAnimatedPlaceholder ? " " : placeholder}
                   autoComplete="off"
                   className={cn(
-                    "min-h-0 min-w-0 w-full max-w-full resize-none rounded-none border-0 bg-transparent p-0 text-sm leading-5 text-foreground shadow-none placeholder:text-foreground/55 focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 md:text-sm dark:placeholder:text-foreground/50",
+                    "min-h-0 min-w-0 w-full max-w-full resize-none rounded-none border-0 bg-transparent p-0 text-sm leading-5 text-foreground shadow-none placeholder:text-muted-foreground focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 md:text-sm dark:bg-transparent",
                     !isExpanded && "min-h-[1.25rem] py-0",
+                    showAnimatedPlaceholder && "placeholder:text-transparent",
                   )}
                   rows={1}
                 />
+                {showAnimatedPlaceholder ? (
+                  <div
+                    className={cn(
+                      "pointer-events-none absolute inset-x-0 top-0 flex overflow-hidden",
+                      animatedPlaceholderMaxLines === 2
+                        ? "min-h-[2.5rem] items-start"
+                        : "min-h-[1.25rem] items-center",
+                    )}
+                    aria-hidden="true"
+                  >
+                    <AnimatePresence mode="wait" initial={false}>
+                      <motion.span
+                        key={phraseIndex}
+                        initial={{ opacity: 0, y: reduceMotion ? 0 : 3 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: reduceMotion ? 0 : -3 }}
+                        transition={{ duration: reduceMotion ? 0 : 0.32, ease: [0.22, 1, 0.36, 1] }}
+                        className={cn(
+                          "block w-full text-start text-sm leading-5 text-muted-foreground",
+                          animatedPlaceholderMaxLines === 2
+                            ? "line-clamp-2 whitespace-normal break-words"
+                            : "truncate",
+                        )}
+                      >
+                        {phrases[phraseIndex]}
+                      </motion.span>
+                    </AnimatePresence>
+                  </div>
+                ) : null}
               </div>
             </div>
 
             <div className={cn("flex shrink-0 items-center", { hidden: isExpanded })} style={{ gridArea: "leading" }}>
-              <DropdownMenu>
+              {leadingSlot === "ai-mark" ? (
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        className="size-8 shrink-0 rounded-full hover:bg-accent"
-                        aria-label="Add attachments"
-                      >
-                        <i className="fa-light fa-plus text-base text-muted-foreground" aria-hidden="true" />
-                      </Button>
-                    </DropdownMenuTrigger>
+                    <span
+                      tabIndex={0}
+                      role="img"
+                      aria-label="AI search"
+                      className="flex size-8 shrink-0 items-center justify-center rounded-full text-brand outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
+                    >
+                      <i
+                        className="fa-light fa-star-christmas text-base text-[color:var(--brand-color-dark)] dark:text-[color:var(--brand-color-light)]"
+                        aria-hidden="true"
+                      />
+                    </span>
                   </TooltipTrigger>
-                  <TooltipContent side="top" sideOffset={6} className="max-w-xs text-xs">
-                    Add photos, files, and more
+                  <TooltipContent side="top" sideOffset={6} className="text-xs">
+                    AI search
                   </TooltipContent>
                 </Tooltip>
+              ) : (
+                <DropdownMenu>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="size-8 shrink-0 rounded-full hover:bg-accent"
+                          aria-label="Add attachments"
+                        >
+                          <i className="fa-light fa-plus text-base text-muted-foreground" aria-hidden="true" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent side="top" sideOffset={6} className="max-w-xs text-xs">
+                      Add photos, files, and more
+                    </TooltipContent>
+                  </Tooltip>
 
-                <DropdownMenuContent align="start" className="max-w-xs rounded-2xl p-1.5">
-                  <DropdownMenuGroup className="space-y-1">
-                    <DropdownMenuItem
-                      className="flex items-center gap-2 rounded-md"
-                      onClick={() => fileInputRef.current?.click()}
-                    >
-                      <i className="fa-light fa-paperclip w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
-                      Add photos &amp; files
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className="flex items-center gap-2 rounded-md" onClick={() => {}}>
-                      <i className="fa-light fa-robot w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
-                      Agent mode
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className="flex items-center gap-2 rounded-md" onClick={() => {}}>
-                      <i className="fa-light fa-magnifying-glass w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
-                      Deep Research
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
+                  <DropdownMenuContent align="start" className="max-w-xs rounded-2xl p-1.5">
+                    <DropdownMenuGroup className="space-y-1">
+                      <DropdownMenuItem
+                        className="flex items-center gap-2 rounded-md"
+                        onClick={() => fileInputRef.current?.click()}
+                      >
+                        <i className="fa-light fa-paperclip w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
+                        Add photos &amp; files
+                      </DropdownMenuItem>
+                      <DropdownMenuItem className="flex items-center gap-2 rounded-md" onClick={() => {}}>
+                        <i className="fa-light fa-robot w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
+                        Agent mode
+                      </DropdownMenuItem>
+                      <DropdownMenuItem className="flex items-center gap-2 rounded-md" onClick={() => {}}>
+                        <i
+                          className="fa-light fa-magnifying-glass w-4 shrink-0 text-center opacity-60"
+                          aria-hidden="true"
+                        />
+                        Deep Research
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
             </div>
 
             <div
@@ -197,12 +314,23 @@ export const AskLeoComposer = React.forwardRef<HTMLTextAreaElement, AskLeoCompos
                 {value.trim() ? (
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Button type="submit" size="icon" className="size-8 shrink-0 rounded-full" aria-label="Send message">
-                        <i className="fa-light fa-paper-plane-top text-base" aria-hidden="true" />
+                      <Button
+                        type="submit"
+                        size="icon"
+                        className="size-8 shrink-0 rounded-full"
+                        aria-label={submitButtonAriaLabel}
+                      >
+                        <i
+                          className={cn(
+                            "text-base",
+                            submitAppearance === "search" ? "fa-light fa-magnifying-glass" : "fa-light fa-paper-plane-top",
+                          )}
+                          aria-hidden="true"
+                        />
                       </Button>
                     </TooltipTrigger>
                     <TooltipContent side="top" sideOffset={6} className="text-xs">
-                      Send message
+                      {submitButtonAriaLabel}
                     </TooltipContent>
                   </Tooltip>
                 ) : null}

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

@@ -7,6 +7,7 @@
  */
 
 import * as React from "react"
+import dynamic from "next/dynamic"
 import { usePathname } from "next/navigation"
 import { AnimatePresence, motion } from "motion/react"
 import { cn } from "@/lib/utils"
@@ -24,7 +25,14 @@ import { useSidebar } from "@/components/ui/sidebar"
 import { StatusBadge } from "@/components/ui/status-badge"
 import { AiThinkingOverlay } from "@/components/ui/ai-thinking-surface"
 import { LeoTypingDots } from "@/components/leo-typing-dots"
-import { LeoIcon } from "@/components/ui/leo-icon"
+
+const LeoIcon = dynamic(
+  () => import("@/components/ui/leo-icon").then(m => m.LeoIcon),
+  {
+    ssr: false,
+    loading: () => <div className="size-20" aria-hidden="true" />,
+  },
+)
 import { useAltKeyLabel, useModKeyLabel } from "@/hooks/use-mod-key-label"
 import { ASK_LEO_GENERIC_SUGGESTIONS, getAskLeoRouteContext } from "@/lib/ask-leo-route-context"
 import { isEditableTarget } from "@/lib/editable-target"

package/template/components/chart-area-interactive.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 
 import { useIsMobile } from "@/hooks/use-mobile"
+import { formatDateUS } from "@/lib/date-filter"
 import {
   Card,
   CardAction,
@@ -247,24 +248,13 @@ export function ChartAreaInteractive() {
               axisLine={false}
               tickMargin={8}
               minTickGap={32}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                return date.toLocaleDateString("en-US", {
-                  month: "short",
-                  day: "numeric",
-                })
-              }}
+              tickFormatter={(value) => formatDateUS(String(value))}
             />
             <ChartTooltip
               cursor={false}
               content={
                 <ChartTooltipContent
-                  labelFormatter={(value) => {
-                    return new Date(value).toLocaleDateString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                    })
-                  }}
+                  labelFormatter={(value) => formatDateUS(String(value))}
                   indicator="dot"
                 />
               }