feat(apollo-vertex): migrate sidebar and shell to match MRS patterns

apps/apollo-vertex/app/_components/preview-full-screen.tsx

@@ -31,7 +31,7 @@ export function PreviewFullScreen({
         style={{ height }}
       >
         {!isOpen && (
-          <div className="[&_.h-screen]:!h-full h-full">{children}</div>
+          <div className="[&_.h-screen]:!h-full [&_.min-h-svh]:!min-h-full h-full">{children}</div>
         )}
         <DialogTrigger asChild>
           <Button
@@ -59,7 +59,7 @@ export function PreviewFullScreen({
             <Minimize2 className="size-4" />
           </Button>
         </DialogClose>
-        <div className="[&_.h-screen]:!h-full h-full">{children}</div>
+        <div className="[&_.h-screen]:!h-full [&_.min-h-svh]:!min-h-full h-full">{children}</div>
       </DialogContent>
     </Dialog>
   );

apps/apollo-vertex/app/components/sidebar/page.mdx

@@ -1,12 +1,13 @@
+import { SidebarExampleTemplate } from '@/templates/SidebarTemplateDynamic';
+import { PreviewFullScreen } from '@/app/_components/preview-full-screen';
+
 # Sidebar
 
 A composable, themeable and customizable sidebar component.
 
-<div className="p-4 border rounded-lg mt-4">
-  <p className="text-sm text-muted-foreground">
-    The Sidebar component is a complex layout component. See the usage example below for implementation details.
-  </p>
-</div>
+<PreviewFullScreen title="Sidebar preview" height={500}>
+    <SidebarExampleTemplate />
+</PreviewFullScreen>
 
 ## Installation
 
@@ -42,19 +43,28 @@ import {
 
 ## Features
 
-- **Collapsible** - Can collapse to icons only
-- **Composable** - Build your own sidebar structure
-- **Themeable** - Supports dark mode and custom themes
-- **Responsive** - Works well on mobile and desktop
-- **Keyboard accessible** - Full keyboard navigation support
+- **Collapsible** - Can collapse to icons only with `collapsible="icon"`
+- **Composable** - Build your own sidebar structure with provided primitives
+- **Themeable** - Supports dark mode and custom themes via CSS variables
+- **Responsive** - Renders as a sheet on mobile, fixed sidebar on desktop
+- **Keyboard accessible** - Toggle with `⌘B`, full keyboard navigation support
 
 ## Components
 
 - `SidebarProvider` - Provides context for sidebar state
 - `Sidebar` - The main sidebar container
 - `SidebarHeader` - Header section of the sidebar
-- `SidebarContent` - Main content area
+- `SidebarContent` - Main scrollable content area
 - `SidebarFooter` - Footer section
 - `SidebarGroup` - Groups related items
+- `SidebarGroupLabel` - Label for a group
+- `SidebarGroupContent` - Content wrapper for a group
 - `SidebarMenu` - Navigation menu
+- `SidebarMenuButton` - Clickable menu button with tooltip support
 - `SidebarMenuItem` - Individual menu items
+- `SidebarMenuSub` - Sub-menu container for nested navigation
+- `SidebarMenuSubButton` - Sub-menu item button
+- `SidebarMenuSubItem` - Sub-menu item wrapper
+- `SidebarInset` - Main content area adjacent to the sidebar
+- `SidebarTrigger` - Button to toggle sidebar open/closed
+- `SidebarRail` - Narrow rail for hover-to-expand interaction

apps/apollo-vertex/app/patterns/shell/page.mdx

@@ -19,6 +19,10 @@ Use the `variant="minimal"` prop to render a horizontal header layout instead of
 
 ## Features
 
+- **Collapsible Sidebar**: Icon-only collapsed mode with smooth spring animations, built on the shadcn sidebar primitives
+- **Sub-Navigation**: Collapsible menu items with nested sub-items that auto-expand when active
+- **Collapsed Menu Handling**: Clicking a collapsible item while collapsed expands the sidebar and opens the submenu
+- **Custom Logo**: Support for company logos with separate light/dark mode variants
 - **Optional OAuth2 Authentication**: Plug-and-play authorization code flow with PKCE
 - **Theme Toggle**: Built-in light/dark mode support
 - **Language Toggle**: Built-in language switcher for internationalization
@@ -40,7 +44,15 @@ import { ApolloShell } from '@/components/ui/shell';
 
 const navItems = [
   { path: '/dashboard', label: 'dashboard', icon: Home },
-  { path: '/settings', label: 'settings', icon: Settings },
+  {
+    path: '/settings',
+    label: 'settings',
+    icon: Settings,
+    subItems: [
+      { path: '/settings', label: 'settings' },
+      { path: '/settings/appearance', label: 'appearance' },
+    ],
+  },
 ];
 
 function App() {

apps/apollo-vertex/locales/en.json

@@ -105,6 +105,7 @@
   "turkish": "Turkish",
   "type_a_message": "Type a message...",
   "user_email_placeholder": "user@company.com",
+  "user_profile": "Profile and settings",
   "view": "View",
   "view_customer": "View customer",
   "view_payment_details": "View payment details",

apps/apollo-vertex/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/apollo-vertex/registry.json

@@ -506,6 +506,10 @@
         {
           "path": "registry/collapsible/collapsible.tsx",
           "type": "registry:ui"
+        },
+        {
+          "path": "registry/collapsible/collapsible.css",
+          "type": "registry:ui"
         }
       ]
     },
@@ -953,7 +957,6 @@
       "description": "Provides UiPath authentication and renders children only when authenticated.",
       "dependencies": [
         "lucide-react",
-        "framer-motion",
         "react-i18next",
         "i18next",
         "jwt-decode",
@@ -962,14 +965,16 @@
         "@tanstack/react-router",
         "pkce-challenge",
         "sonner",
-        "@mantine/hooks@^9.0.0"
+        "framer-motion"
       ],
       "registryDependencies": [
         "button",
         "tooltip",
         "avatar",
         "dropdown-menu",
-        "spinner"
+        "skeleton",
+        "sidebar",
+        "collapsible"
       ],
       "files": [
         { "path": "registry/shell/shell.tsx", "type": "registry:ui" },
@@ -1004,14 +1009,6 @@
         { "path": "lib/i18n.ts", "type": "registry:lib" },
         { "path": "lib/auth.ts", "type": "registry:lib" },
         { "path": "lib/react-i18next.d.ts", "type": "registry:lib" },
-        {
-          "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"
@@ -1024,10 +1021,6 @@
           "path": "registry/shell/shell-text.tsx",
           "type": "registry:ui"
         },
-        {
-          "path": "registry/shell/shell-theme-toggle.tsx",
-          "type": "registry:ui"
-        },
         {
           "path": "registry/shell/shell-theme-provider.tsx",
           "type": "registry:ui"
@@ -1055,6 +1048,10 @@
         {
           "path": "registry/shell/shell-user-profile-menu-items.tsx",
           "type": "registry:ui"
+        },
+        {
+          "path": "registry/shell/shell-animations.ts",
+          "type": "registry:ui"
         }
       ]
     },
@@ -1139,6 +1136,7 @@
       "dependencies": [
         "@radix-ui/react-slot",
         "class-variance-authority",
+        "framer-motion",
         "lucide-react",
         "react-i18next"
       ],

apps/apollo-vertex/registry/collapsible/collapsible.css

@@ -0,0 +1,25 @@
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@utility animate-collapsible-down {
+  animation: collapsible-down 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@utility animate-collapsible-up {
+  animation: collapsible-up 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}

apps/apollo-vertex/registry/collapsible/collapsible.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { cn } from "@/lib/utils";
+import "./collapsible.css";
 
 function Collapsible({
   ...props
@@ -20,11 +22,16 @@ function CollapsibleTrigger({
 }
 
 function CollapsibleContent({
+  className,
   ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
   return (
     <CollapsiblePrimitive.CollapsibleContent
       data-slot="collapsible-content"
+      className={cn(
+        "overflow-hidden transition-all duration-200 data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+        className,
+      )}
       {...props}
     />
   );

apps/apollo-vertex/registry/shell/shell-animations.ts

@@ -26,3 +26,9 @@ export const scaleVariants = {
   animate: { opacity: 1, scale: 1 },
   exit: { opacity: 0, scale: 0.8 },
 };
+
+export const edgeFadeVariants = {
+  initial: { opacity: 0, scaleX: 0 },
+  animate: { opacity: 1, scaleX: 1 },
+  exit: { opacity: 0, scaleX: 0 },
+};

apps/apollo-vertex/registry/shell/shell-company-logo.tsx

@@ -8,21 +8,34 @@ interface CompanyLogoIconProps {
 
 export const CompanyLogoIcon = ({ companyLogo }: CompanyLogoIconProps) => {
   if (!companyLogo) {
-    return <Box className="w-4 h-4 text-background" />;
+    return <Box className="w-4 h-4 text-white" />;
   }
 
+  // Non-custom logos (e.g. UiPath) have the background baked into the SVG —
+  // render them full-size so they fill the container. Custom logos are small
+  // marks displayed over a CSS background.
+  const sizeClass = companyLogo.isCustom
+    ? "w-4 h-auto"
+    : "h-8 w-8 object-contain";
+
   return (
     <>
       <img
         src={companyLogo.url}
         alt={companyLogo.alt}
-        className={cn("w-4 h-auto", companyLogo.darkUrl ? "dark:hidden" : "")}
+        className={cn(sizeClass, companyLogo.darkUrl && "dark:hidden")}
+        onError={(e) => {
+          e.currentTarget.style.display = "none";
+        }}
       />
       {companyLogo.darkUrl && (
         <img
           src={companyLogo.darkUrl}
           alt={companyLogo.alt}
-          className="w-4 h-auto hidden dark:block"
+          className={cn(sizeClass, "hidden dark:block")}
+          onError={(e) => {
+            e.currentTarget.style.display = "none";
+          }}
         />
       )}
     </>