feat(apollo-vertex): polish shell/sidebar with framer-motion animations and self-contained CSS

Convert sidebar width animation from CSS transitions to framer-motion spring
physics matching MRS exactly. Make shell components self-contained by moving
collapsible CSS to co-located file, swap hand-rolled buttons for vertex Button
component, add asymmetric text fade variants via AnimatePresence, fix z-index
stacking in docs preview, fix minimal header logo background, and switch locale
loading state from spinner to skeleton.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

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

@@ -19,7 +19,7 @@ Use the `variant="minimal"` prop to render a horizontal header layout instead of
 
 ## Features
 
-- **Collapsible Sidebar**: Icon-only collapsed mode with smooth CSS transitions, built on the shadcn sidebar primitives
+- **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

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/public/UiPath.svg

@@ -496,6 +496,10 @@
         {
           "path": "registry/collapsible/collapsible.tsx",
           "type": "registry:ui"
+        },
+        {
+          "path": "registry/collapsible/collapsible.css",
+          "type": "registry:ui"
         }
       ]
     },
@@ -937,14 +941,15 @@
         "@tanstack/react-query",
         "@tanstack/react-router",
         "pkce-challenge",
-        "sonner"
+        "sonner",
+        "framer-motion"
       ],
       "registryDependencies": [
         "button",
         "tooltip",
         "avatar",
         "dropdown-menu",
-        "spinner",
+        "skeleton",
         "sidebar",
         "collapsible"
       ],
@@ -993,10 +998,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"
@@ -1024,6 +1025,10 @@
         {
           "path": "registry/shell/shell-user-profile-menu-items.tsx",
           "type": "registry:ui"
+        },
+        {
+          "path": "registry/shell/shell-animations.ts",
+          "type": "registry:ui"
         }
       ]
     },
@@ -1108,6 +1113,7 @@
       "dependencies": [
         "@radix-ui/react-slot",
         "class-variance-authority",
+        "framer-motion",
         "lucide-react",
         "react-i18next"
       ],

apps/apollo-vertex/public/UiPath_dark.svg

@@ -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.json

@@ -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/collapsible/collapsible.css

@@ -0,0 +1,34 @@
+export const sidebarSpring = {
+  type: "spring",
+  stiffness: 400,
+  damping: 30,
+  mass: 0.5,
+} as const;
+
+export const fastFadeTransition = {
+  duration: 0.15,
+  ease: [0.25, 0.46, 0.45, 0.94],
+} as const;
+
+export const textFadeVariants = {
+  initial: { opacity: 0, x: -10 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0 },
+};
+
+export const iconHoverScale = {
+  scale: 1.05,
+  transition: { duration: 0.2 },
+};
+
+export const scaleVariants = {
+  initial: { opacity: 0, scale: 0.8 },
+  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/collapsible/collapsible.tsx

@@ -8,24 +8,34 @@ interface CompanyLogoIconProps {
 
 export const CompanyLogoIcon = ({ companyLogo }: CompanyLogoIconProps) => {
   if (!companyLogo) {
-    return <Box className="w-5 h-5 text-sidebar-foreground" />;
+    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(
-          "h-8 w-8 object-contain",
-          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="h-8 w-8 object-contain hidden dark:block"
+          className={cn(sizeClass, "hidden dark:block")}
+          onError={(e) => {
+            e.currentTarget.style.display = "none";
+          }}
         />
       )}
     </>