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: creilly11235

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

@@ -1,5 +1,5 @@
 import { SidebarExampleTemplate } from '@/templates/SidebarTemplateDynamic';
-import { PreviewFullScreen } from '@/app/components/preview-full-screen';
+import { PreviewFullScreen } from '@/app/_components/preview-full-screen';
 
 # Sidebar
 

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

@@ -506,6 +506,10 @@
         {
           "path": "registry/collapsible/collapsible.tsx",
           "type": "registry:ui"
+        },
+        {
+          "path": "registry/collapsible/collapsible.css",
+          "type": "registry:ui"
         }
       ]
     },
@@ -947,14 +951,15 @@
         "@tanstack/react-query",
         "@tanstack/react-router",
         "pkce-challenge",
-        "sonner"
+        "sonner",
+        "framer-motion"
       ],
       "registryDependencies": [
         "button",
         "tooltip",
         "avatar",
         "dropdown-menu",
-        "spinner",
+        "skeleton",
         "sidebar",
         "collapsible"
       ],
@@ -1003,10 +1008,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"
@@ -1034,6 +1035,10 @@
         {
           "path": "registry/shell/shell-user-profile-menu-items.tsx",
           "type": "registry:ui"
+        },
+        {
+          "path": "registry/shell/shell-animations.ts",
+          "type": "registry:ui"
         }
       ]
     },
@@ -1118,6 +1123,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 },
+};