From a8db5fcedd77204b32b3207e917ec418a8fa2de5 Mon Sep 17 00:00:00 2001
From: Colin Reilly <colin.reilly@gmail.com>
Date: Thu, 23 Apr 2026 18:24:02 -0700
Subject: [PATCH] feat(apollo-vertex): migrate shell to shadcn SidebarProvider
 with sub-nav support

---
 apps/apollo-vertex/registry.json              |   7 +-
 .../registry/shell/shell-company.tsx          |  11 +-
 .../registry/shell/shell-layout.tsx           |  54 ++-
 .../registry/shell/shell-nav-item.tsx         |  89 -----
 .../registry/shell/shell-sidebar.tsx          | 324 +++++++++++++++---
 apps/apollo-vertex/registry/shell/shell.tsx   |   6 +
 6 files changed, 327 insertions(+), 164 deletions(-)
 delete mode 100644 apps/apollo-vertex/registry/shell/shell-nav-item.tsx

diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json
index 0ded5c26f..ecbe09444 100644
--- a/apps/apollo-vertex/registry.json
+++ b/apps/apollo-vertex/registry.json
@@ -984,7 +984,8 @@
         "avatar",
         "dropdown-menu",
         "skeleton",
-        "sidebar"
+        "sidebar",
+        "collapsible"
       ],
       "files": [
         { "path": "registry/shell/shell.tsx", "type": "registry:ui" },
@@ -1019,10 +1020,6 @@
           "path": "registry/shell/shell-animations.ts",
           "type": "registry:ui"
         },
-        {
-          "path": "registry/shell/shell-nav-item.tsx",
-          "type": "registry:ui"
-        },
         {
           "path": "registry/shell/shell-minimal-company.tsx",
           "type": "registry:ui"
diff --git a/apps/apollo-vertex/registry/shell/shell-company.tsx b/apps/apollo-vertex/registry/shell/shell-company.tsx
index 7a75a92b5..c3508e90e 100644
--- a/apps/apollo-vertex/registry/shell/shell-company.tsx
+++ b/apps/apollo-vertex/registry/shell/shell-company.tsx
@@ -4,6 +4,7 @@ import { PanelLeft } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
+import { useSidebar } from "@/components/ui/sidebar";
 import {
   Tooltip,
   TooltipContent,
@@ -24,8 +25,6 @@ interface CompanyProps {
   companyName: string;
   productName: string;
   companyLogo?: CompanyLogo;
-  isCollapsed: boolean;
-  toggleCollapse: () => void;
   sidebarHovered?: boolean;
 }
 
@@ -105,11 +104,11 @@ export const Company = ({
   companyName,
   productName,
   companyLogo,
-  isCollapsed,
-  toggleCollapse,
   sidebarHovered = false,
 }: CompanyProps) => {
   const { t } = useTranslation();
+  const { state, toggleSidebar } = useSidebar();
+  const isCollapsed = state === "collapsed";
 
   const isCustomLogo = companyLogo?.isCustom ?? false;
   const logoBgClass = isCustomLogo
@@ -135,7 +134,7 @@ export const Company = ({
           <CollapsedLogo
             companyLogo={companyLogo}
             sidebarHovered={sidebarHovered}
-            onExpand={toggleCollapse}
+            onExpand={toggleSidebar}
           />
         ) : (
           iconElement
@@ -188,7 +187,7 @@ export const Company = ({
                   <Button
                     variant="ghost"
                     size="icon-sm"
-                    onClick={toggleCollapse}
+                    onClick={toggleSidebar}
                     className="ml-auto shrink-0 text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground cursor-pointer"
                   >
                     <PanelLeft className="w-4 h-4" />
diff --git a/apps/apollo-vertex/registry/shell/shell-layout.tsx b/apps/apollo-vertex/registry/shell/shell-layout.tsx
index d0056767b..bdd2216b5 100644
--- a/apps/apollo-vertex/registry/shell/shell-layout.tsx
+++ b/apps/apollo-vertex/registry/shell/shell-layout.tsx
@@ -1,8 +1,22 @@
-import type { PropsWithChildren } from "react";
+import { useLocalStorage } from "@mantine/hooks";
+import { type CSSProperties, type PropsWithChildren, useId } from "react";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
 import type { CompanyLogo, ShellNavItem } from "./shell";
-import { Sidebar } from "./shell-sidebar";
+import { SIDEBAR_COLLAPSED_KEY } from "./shell-constants";
+import { ShellSidebar } from "./shell-sidebar";
 import { useTheme } from "./shell-theme-provider";
 
+/* oxlint-disable typescript-eslint(no-unsafe-type-assertion) -- CSS custom properties not in React.CSSProperties */
+const SIDEBAR_WIDTHS = {
+  "--sidebar-width": "280px",
+  "--sidebar-width-icon": "4rem",
+} as CSSProperties;
+/* oxlint-enable typescript-eslint(no-unsafe-type-assertion) */
+
 const GRADIENT_BLUR = "blur(149.643px)";
 
 interface ShellLayoutProps {
@@ -14,6 +28,8 @@ interface ShellLayoutProps {
 }
 
 function DarkGradientBackground() {
+  const filterId = useId();
+
   return (
     <div className="absolute inset-0 overflow-hidden pointer-events-none">
       {/* Base directional wash */}
@@ -74,7 +90,7 @@ function DarkGradientBackground() {
         className="absolute inset-0 w-full h-full opacity-[0.04]"
       >
         <defs>
-          <filter id="noise-dark">
+          <filter id={filterId}>
             <feTurbulence
               type="fractalNoise"
               baseFrequency="0.65"
@@ -84,7 +100,7 @@ function DarkGradientBackground() {
             <feColorMatrix type="saturate" values="0" />
           </filter>
         </defs>
-        <rect width="100%" height="100%" filter="url(#noise-dark)" />
+        <rect width="100%" height="100%" filter={`url(#${filterId})`} />
       </svg>
     </div>
   );
@@ -150,7 +166,7 @@ function LightGradientBackground() {
 
 function GradientBackground() {
   const theme = useTheme();
-  if (theme.theme === "dark") {
+  if (theme.resolvedTheme === "dark") {
     return <DarkGradientBackground />;
   }
   return <LightGradientBackground />;
@@ -164,12 +180,17 @@ export function ShellLayout({
   companyLogo,
   navItems,
 }: PropsWithChildren<ShellLayoutProps>) {
+  const [isCollapsed, setIsCollapsed] = useLocalStorage<boolean>({
+    key: SIDEBAR_COLLAPSED_KEY,
+    defaultValue: false,
+  });
+
   if (variant === "minimal") {
     return (
       <div className="h-screen overflow-hidden flex flex-col bg-background dark:bg-sidebar">
         <main className="flex-1 flex flex-col overflow-hidden relative">
           <GradientBackground />
-          <Sidebar
+          <ShellSidebar
             companyName={companyName}
             variant={variant}
             productName={productName}
@@ -185,20 +206,27 @@ export function ShellLayout({
   }
 
   return (
-    <div className="h-screen overflow-hidden flex bg-background dark:bg-sidebar relative">
+    <SidebarProvider
+      open={!isCollapsed}
+      onOpenChange={(open) => setIsCollapsed(!open)}
+      style={SIDEBAR_WIDTHS}
+      className="relative isolate h-screen overflow-hidden bg-background dark:bg-sidebar"
+    >
       <GradientBackground />
-      <Sidebar
+      <ShellSidebar
         companyName={companyName}
-        variant={variant}
         productName={productName}
         companyLogo={companyLogo}
         navItems={navItems}
       />
-      <main className="flex-1 flex flex-col overflow-hidden relative">
-        <div className="flex-1 overflow-y-auto custom-scrollbar">
+      <SidebarInset className="relative flex-1 flex flex-col overflow-hidden rounded-none m-0 ml-0 shadow-none bg-transparent">
+        <header className="flex items-center h-12 px-4 md:hidden">
+          <SidebarTrigger />
+        </header>
+        <div className="relative flex-1 flex flex-col overflow-y-auto custom-scrollbar">
           {children}
         </div>
-      </main>
-    </div>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }
diff --git a/apps/apollo-vertex/registry/shell/shell-nav-item.tsx b/apps/apollo-vertex/registry/shell/shell-nav-item.tsx
deleted file mode 100644
index ad22ad73b..000000000
--- a/apps/apollo-vertex/registry/shell/shell-nav-item.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Link, useLocation } from "@tanstack/react-router";
-import { useLocalStorage } from "@mantine/hooks";
-import { AnimatePresence, motion } from "framer-motion";
-import type { LucideIcon } from "lucide-react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import {
-  fastFadeTransition,
-  iconHoverScale,
-  textFadeVariants,
-} from "./shell-animations";
-import { SIDEBAR_COLLAPSED_KEY } from "./shell-constants";
-import { Text } from "./shell-text";
-import type { TranslationKey } from "./shell-translation-key";
-
-interface NavItemProps {
-  to: string;
-  icon: LucideIcon;
-  label: TranslationKey;
-}
-
-export const NavItem = ({ to, icon: Icon, label }: NavItemProps) => {
-  const [isCollapsed] = useLocalStorage<boolean>({
-    key: SIDEBAR_COLLAPSED_KEY,
-    defaultValue: false,
-  });
-  const { pathname } = useLocation();
-  const isActive = pathname === to || pathname.startsWith(`${to}/`);
-
-  const linkContent = (
-    <Link
-      to={to}
-      className={cn(
-        "flex items-center rounded-md transition-colors duration-200",
-        "h-8 text-sm font-medium",
-        isCollapsed ? "w-8 justify-center" : "pr-3",
-        isActive
-          ? "text-primary-700 dark:text-primary-400 font-semibold bg-[oklch(0.96_0.015_218)] dark:bg-primary-900/30"
-          : "text-sidebar-foreground/85 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
-      )}
-    >
-      <motion.span
-        className="w-8 h-8 flex items-center justify-center shrink-0"
-        {...(isCollapsed ? { whileHover: iconHoverScale } : {})}
-      >
-        <Icon className="w-4 h-4" />
-      </motion.span>
-      <AnimatePresence initial={false}>
-        {!isCollapsed && (
-          <motion.span
-            key="nav-text"
-            className="truncate whitespace-nowrap pl-2"
-            variants={{
-              initial: textFadeVariants.initial,
-              animate: textFadeVariants.animate,
-              exit: textFadeVariants.exit,
-            }}
-            initial="initial"
-            animate="animate"
-            exit="exit"
-            transition={fastFadeTransition}
-          >
-            <Text value={label} />
-          </motion.span>
-        )}
-      </AnimatePresence>
-    </Link>
-  );
-
-  if (isCollapsed) {
-    return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
-          <TooltipContent side="right" sideOffset={8}>
-            <Text value={label} />
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  }
-
-  return linkContent;
-};
diff --git a/apps/apollo-vertex/registry/shell/shell-sidebar.tsx b/apps/apollo-vertex/registry/shell/shell-sidebar.tsx
index 2fff7d172..d3a17ed94 100644
--- a/apps/apollo-vertex/registry/shell/shell-sidebar.tsx
+++ b/apps/apollo-vertex/registry/shell/shell-sidebar.tsx
@@ -1,16 +1,43 @@
-import { useLocalStorage } from "@mantine/hooks";
-import { motion } from "framer-motion";
+import { Link, useLocation } from "@tanstack/react-router";
+import { AnimatePresence, motion } from "framer-motion";
+import { ChevronDown } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
 import { cn } from "@/lib/utils";
 import type { CompanyLogo, ShellNavItem } from "./shell";
-import { sidebarSpring } from "./shell-animations";
+import { fastFadeTransition, textFadeVariants } from "./shell-animations";
 import { Company } from "./shell-company";
-import { SIDEBAR_COLLAPSED_KEY } from "./shell-constants";
 import { MinimalCompany } from "./shell-minimal-company";
 import { MinimalNavItem } from "./shell-minimal-nav-item";
-import { NavItem } from "./shell-nav-item";
+import { Text } from "./shell-text";
 import { UserProfile } from "./shell-user-profile";
 
-interface SidebarProps {
+const activeNavClass =
+  "text-sidebar-foreground/85 hover:text-sidebar-foreground data-[active=true]:text-primary-700 dark:data-[active=true]:text-primary-400 data-[active=true]:font-semibold data-[active=true]:bg-primary-100/40 dark:data-[active=true]:bg-primary-900/30";
+const navButtonClass = `font-medium ${activeNavClass}`;
+const subButtonClass = activeNavClass;
+
+interface ShellSidebarProps {
   companyName: string;
   productName: string;
   variant?: "minimal";
@@ -18,21 +45,13 @@ interface SidebarProps {
   navItems: ShellNavItem[];
 }
 
-export const Sidebar = ({
+export const ShellSidebar = ({
   companyName,
   productName,
   variant,
   companyLogo,
   navItems,
-}: SidebarProps) => {
-  const [isCollapsed, setIsCollapsed] = useLocalStorage<boolean>({
-    key: SIDEBAR_COLLAPSED_KEY,
-    defaultValue: false,
-  });
-  const toggleCollapse = () => setIsCollapsed((prev) => !prev);
-
-  const sidebarWidth = isCollapsed ? "w-16" : "w-[280px]";
-
+}: ShellSidebarProps) => {
   if (variant === "minimal") {
     return (
       <header className="relative flex items-center justify-between px-4 sm:px-6 lg:px-8 py-6 transition-[padding] duration-300 ease-in-out">
@@ -66,41 +85,244 @@ export const Sidebar = ({
   }
 
   return (
-    <motion.aside
-      className={cn(
-        sidebarWidth,
-        "relative flex flex-col bg-[oklch(0.99_0_0)]/70 backdrop-blur-xl dark:bg-sidebar/75 dark:backdrop-blur-xl will-change-[width] overflow-hidden px-4 pt-6 pb-4",
-      )}
-      animate={{
-        width: isCollapsed ? 64 : 280,
-      }}
-      transition={sidebarSpring}
+    <SidebarNav
+      companyName={companyName}
+      productName={productName}
+      companyLogo={companyLogo}
+      navItems={navItems}
+    />
+  );
+};
+
+interface SidebarNavProps {
+  companyName: string;
+  productName: string;
+  companyLogo?: CompanyLogo;
+  navItems: ShellNavItem[];
+}
+
+function SidebarNav({
+  companyName,
+  productName,
+  companyLogo,
+  navItems,
+}: SidebarNavProps) {
+  const { t } = useTranslation();
+  const { state, toggleSidebar } = useSidebar();
+  const { pathname } = useLocation();
+  const isCollapsed = state === "collapsed";
+  const [sidebarHovered, setSidebarHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    if (isCollapsed) setSidebarHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setSidebarHovered(false);
+  };
+
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(() => {
+    const expanded = new Set<string>();
+    for (const item of navItems) {
+      if (item.subItems?.some((sub) => pathname.startsWith(sub.path))) {
+        expanded.add(item.path);
+      }
+    }
+    return expanded;
+  });
+
+  useEffect(() => {
+    const expanded = new Set<string>();
+    for (const item of navItems) {
+      if (item.subItems?.some((sub) => pathname.startsWith(sub.path))) {
+        expanded.add(item.path);
+      }
+    }
+    setExpandedItems(expanded);
+  }, [pathname, navItems]);
+
+  const handleMenuClick = (path: string) => {
+    if (isCollapsed) {
+      toggleSidebar();
+      setExpandedItems((prev) => new Set(prev).add(path));
+    } else {
+      setExpandedItems((prev) => {
+        const next = new Set(prev);
+        if (next.has(path)) {
+          next.delete(path);
+        } else {
+          next.add(path);
+        }
+        return next;
+      });
+    }
+  };
+
+  const isActive = (path: string) => {
+    if (path === "/") {
+      return pathname === "/";
+    }
+    return pathname === path || pathname.startsWith(`${path}/`);
+  };
+
+  const isParentActive = (item: ShellNavItem) => {
+    return item.subItems?.some((sub) => isActive(sub.path)) ?? false;
+  };
+
+  const getTooltipText = (label: ShellNavItem["label"]): string => {
+    if (typeof label === "string") return t(label);
+    return t(label.i18nKey, label.values);
+  };
+
+  return (
+    <Sidebar
+      collapsible="icon"
+      variant="sidebar"
+      className="border-0 bg-transparent [&_[data-slot=sidebar-container]]:border-0 [&_[data-slot=sidebar-inner]]:bg-[oklch(0.99_0_0)]/70 [&_[data-slot=sidebar-inner]]:backdrop-blur-xl dark:[&_[data-slot=sidebar-inner]]:bg-sidebar/75 [&_[data-slot=sidebar-inner]]:overflow-hidden"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
-      <Company
-        companyName={companyName}
-        productName={productName}
-        companyLogo={companyLogo}
-        isCollapsed={isCollapsed}
-        toggleCollapse={toggleCollapse}
-      />
-      <nav className="flex-1 mt-10 space-y-1 pb-3">
-        {navItems.map((item) => (
-          <NavItem
-            key={item.path}
-            to={item.path}
-            icon={item.icon}
-            label={item.label}
-          />
-        ))}
-      </nav>
-      <div
-        className={cn(
-          "mt-auto py-1.5",
-          isCollapsed ? "flex flex-col items-center" : "",
-        )}
-      >
+      <SidebarHeader className="pt-6 px-4 pb-0">
+        <Company
+          companyName={companyName}
+          productName={productName}
+          companyLogo={companyLogo}
+          sidebarHovered={sidebarHovered}
+        />
+      </SidebarHeader>
+
+      <SidebarContent className="px-4 pt-0 pb-3 mt-10">
+        <SidebarGroup className="p-0">
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navItems.map((item) => {
+                const Icon = item.icon;
+                const active = isActive(item.path);
+                const parentActive = isParentActive(item);
+                const isExpanded = expandedItems.has(item.path);
+
+                if (item.subItems && item.subItems.length > 0) {
+                  const showParentActive = isCollapsed && parentActive;
+
+                  return (
+                    <Collapsible
+                      key={item.path}
+                      open={isExpanded && !isCollapsed}
+                      onOpenChange={() => handleMenuClick(item.path)}
+                      className="group/collapsible"
+                    >
+                      <SidebarMenuItem>
+                        <CollapsibleTrigger asChild>
+                          <SidebarMenuButton
+                            tooltip={getTooltipText(item.label)}
+                            isActive={showParentActive}
+                            className={navButtonClass}
+                          >
+                            <Icon />
+                            <AnimatePresence initial={false}>
+                              {!isCollapsed && (
+                                <motion.span
+                                  key="text"
+                                  variants={textFadeVariants}
+                                  initial="initial"
+                                  animate="animate"
+                                  exit="exit"
+                                  transition={fastFadeTransition}
+                                  className="whitespace-nowrap truncate"
+                                >
+                                  <Text value={item.label} />
+                                </motion.span>
+                              )}
+                            </AnimatePresence>
+                            <AnimatePresence initial={false}>
+                              {!isCollapsed && (
+                                <motion.div
+                                  key="chevron"
+                                  variants={textFadeVariants}
+                                  initial="initial"
+                                  animate="animate"
+                                  exit="exit"
+                                  transition={fastFadeTransition}
+                                  className="ml-auto"
+                                >
+                                  <ChevronDown
+                                    className={cn(
+                                      "size-4 transition-transform duration-200",
+                                      isExpanded && "rotate-180",
+                                    )}
+                                  />
+                                </motion.div>
+                              )}
+                            </AnimatePresence>
+                          </SidebarMenuButton>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                          <SidebarMenuSub className="ml-4 mr-0 mt-1 gap-0.5 pl-3 pr-0">
+                            {item.subItems.map((subItem) => {
+                              const subActive = isActive(subItem.path);
+                              return (
+                                <SidebarMenuSubItem key={subItem.path}>
+                                  <SidebarMenuSubButton
+                                    asChild
+                                    isActive={subActive}
+                                    className={cn(
+                                      "cursor-pointer whitespace-nowrap",
+                                      subButtonClass,
+                                    )}
+                                  >
+                                    <Link to={subItem.path}>
+                                      <Text value={subItem.label} />
+                                    </Link>
+                                  </SidebarMenuSubButton>
+                                </SidebarMenuSubItem>
+                              );
+                            })}
+                          </SidebarMenuSub>
+                        </CollapsibleContent>
+                      </SidebarMenuItem>
+                    </Collapsible>
+                  );
+                }
+
+                return (
+                  <SidebarMenuItem key={item.path}>
+                    <SidebarMenuButton
+                      tooltip={getTooltipText(item.label)}
+                      isActive={active}
+                      asChild
+                      className={navButtonClass}
+                    >
+                      <Link to={item.path}>
+                        <Icon />
+                        <AnimatePresence initial={false}>
+                          {!isCollapsed && (
+                            <motion.span
+                              key="text"
+                              variants={textFadeVariants}
+                              initial="initial"
+                              animate="animate"
+                              exit="exit"
+                              transition={fastFadeTransition}
+                              className="whitespace-nowrap truncate"
+                            >
+                              <Text value={item.label} />
+                            </motion.span>
+                          )}
+                        </AnimatePresence>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="p-4 pt-0">
         <UserProfile isCollapsed={isCollapsed} />
-      </div>
+      </SidebarFooter>
+
       <div
         className="absolute inset-0 pointer-events-none"
         style={{
@@ -108,6 +330,6 @@ export const Sidebar = ({
             "inset -1px 0 0 0 color-mix(in srgb, var(--color-border) 50%, transparent)",
         }}
       />
-    </motion.aside>
+    </Sidebar>
   );
-};
+}
diff --git a/apps/apollo-vertex/registry/shell/shell.tsx b/apps/apollo-vertex/registry/shell/shell.tsx
index 53d3f15d9..b01d6392d 100644
--- a/apps/apollo-vertex/registry/shell/shell.tsx
+++ b/apps/apollo-vertex/registry/shell/shell.tsx
@@ -15,10 +15,16 @@ export interface CompanyLogo {
   isCustom?: boolean;
 }
 
+export interface ShellSubNavItem {
+  path: string;
+  label: TranslationKey;
+}
+
 export interface ShellNavItem {
   path: string;
   label: TranslationKey;
   icon: LucideIcon;
+  subItems?: ShellSubNavItem[];
 }
 
 export interface ApolloShellProps extends PropsWithChildren {