Creilly11235/vertex shell sidebar provider migration

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"

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" />

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>
   );
 }