Improve collapsible sidebar with animations and footer redesign

- Add Material Design easing (cubic-bezier) for smooth transitions
- Redesign footer with animated "Open" text + square logo
- Add hover overlay with backdrop blur on collapsed sidebar
- Remove tooltips from menu items for cleaner UX
- Center menu icons when collapsed, restore alignment on expand
- Update breadcrumbs to always show project name
- Sync settings layout structure with live layout
- Fix menu item vertical positioning consistency

Author: elias-ba

assets/css/app.css

@@ -301,13 +301,9 @@
       }
     }
 
-    /* Collapsed sidebar styles */
-    .menu-item-collapsed .menu-item-text {
-      display: none;
-    }
-
-    .menu-item-collapsed svg {
-      margin-right: 0;
+    /* Prevent icons from shrinking in flex containers */
+    .menu-item svg {
+      flex-shrink: 0;
     }
 
     /* Hide scrollbar in sidebar to prevent flash during transition */
@@ -340,6 +336,229 @@
     }
   }
 
+  /* Material Design easing for sidebar transitions */
+  #sidebar-panel,
+  #sidebar-panel + div > div:first-child {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* Menu item text - base styles with transition */
+  #sidebar-panel .menu-item-text {
+    transition: max-width 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  /* Logo text transition */
+  #sidebar-panel .sidebar-logo-text {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* Sidebar footer - default state (expanded) */
+  #sidebar-panel .sidebar-footer {
+    .sidebar-logo-text {
+      max-width: 50px;
+      margin-right: 4px;
+      opacity: 1;
+    }
+
+    .sidebar-version-chip {
+      opacity: 0.5;
+      transition-delay: 200ms; /* Appear after menu animation */
+    }
+  }
+
+  /* Keep sidebar expanded when menu is open */
+  #sidebar-panel.sidebar-collapsed.menu-open {
+    width: 192px !important;
+    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.3), 4px 0 8px rgba(0, 0, 0, 0.2);
+
+    &::after {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .menu-item-text {
+      max-width: 150px !important;
+      opacity: 1 !important;
+    }
+
+    /* Reset menu item alignment when menu open */
+    .menu-item {
+      justify-content: flex-start !important;
+    }
+
+    .menu-item svg {
+      margin-right: 0.5rem !important;
+    }
+
+    .project-picker-text,
+    .project-picker-chevron,
+    .user-menu-chevron,
+    .sidebar-expanded-logo {
+      display: block !important;
+    }
+
+    .user-menu-text {
+      display: flex !important;
+    }
+
+    .sidebar-logo-text {
+      max-width: 50px !important;
+      margin-right: 4px !important;
+      opacity: 1 !important;
+    }
+
+    .sidebar-version-chip {
+      opacity: 0.5 !important;
+      transition-delay: 200ms !important;
+    }
+
+    #project-picker-wrapper,
+    #user-menu-wrapper {
+      display: block !important;
+    }
+
+    #project-picker-trigger,
+    #user-menu-trigger {
+      width: 100% !important;
+      gap: 0.5rem !important;
+    }
+  }
+
+  /* Sidebar collapsed state - hide text */
+  #sidebar-panel.sidebar-collapsed {
+    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hide text elements when collapsed - use opacity/width for smooth animation */
+    .menu-item-text {
+      max-width: 0 !important;
+      opacity: 0 !important;
+    }
+
+    /* Center icons when collapsed */
+    .menu-item {
+      justify-content: center;
+    }
+
+    .menu-item svg {
+      margin-right: 0 !important;
+    }
+
+    .project-picker-text,
+    .project-picker-chevron,
+    .user-menu-text,
+    .user-menu-chevron {
+      display: none !important;
+    }
+
+    /* Animate logo text to collapse */
+    .sidebar-logo-text {
+      max-width: 0 !important;
+      margin-right: 0 !important;
+      opacity: 0 !important;
+    }
+
+    /* Hide version chip when collapsed - keep space, just hide content */
+    .sidebar-version-chip {
+      opacity: 0 !important;
+      transition-delay: 0ms !important;
+    }
+
+    /* Center wrappers when collapsed */
+    #project-picker-wrapper,
+    #user-menu-wrapper {
+      display: flex !important;
+      justify-content: center !important;
+    }
+
+    /* Shrink to fit when collapsed */
+    #project-picker-trigger,
+    #user-menu-trigger {
+      width: auto !important;
+      gap: 0 !important;
+    }
+
+    /* Hover expansion - show everything, expand width */
+    /* Overlay when collapsed - matches standardized overlay style */
+    &::after {
+      content: "";
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgb(17 24 39 / 0.6); /* gray-900/60 */
+      backdrop-filter: blur(4px); /* backdrop-blur-sm */
+      pointer-events: none;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), visibility 200ms cubic-bezier(0.4, 0, 0.2, 1);
+      z-index: -1;
+    }
+
+    &:hover {
+      width: 192px !important;
+      box-shadow: 8px 0 24px rgba(0, 0, 0, 0.3), 4px 0 8px rgba(0, 0, 0, 0.2);
+
+      &::after {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* Show all text elements on hover */
+      .menu-item-text {
+        max-width: 150px !important;
+        opacity: 1 !important;
+      }
+
+      /* Reset menu item alignment on hover */
+      .menu-item {
+        justify-content: flex-start !important;
+      }
+
+      .menu-item svg {
+        margin-right: 0.5rem !important;
+      }
+
+      .project-picker-text,
+      .project-picker-chevron,
+      .user-menu-chevron {
+        display: block !important;
+      }
+
+      /* User menu button needs flex display */
+      .user-menu-text {
+        display: flex !important;
+      }
+
+      /* Animate logo text on hover */
+      .sidebar-logo-text {
+        max-width: 50px !important;
+        margin-right: 4px !important;
+        opacity: 1 !important;
+      }
+
+      /* Show version chip on hover - fades in after menu animation */
+      .sidebar-version-chip {
+        opacity: 0.5 !important;
+        transition-delay: 200ms !important;
+      }
+
+      /* Restore wrapper and button layout on hover */
+      #project-picker-wrapper,
+      #user-menu-wrapper {
+        display: block !important;
+      }
+
+      #project-picker-trigger,
+      #user-menu-trigger {
+        width: 100% !important;
+        gap: 0.5rem !important;
+      }
+    }
+  }
+
   /* Alerts and form errors used by phx.new */
   .alert {
     padding: 15px;

assets/js/collaborative-editor/components/Breadcrumbs.tsx

@@ -5,28 +5,34 @@ import { cn } from '../../utils/cn';
 
 export function Breadcrumbs({ children }: { children: React.ReactNode[] }) {
   // Split: Last item is always the title (always visible)
-  // Of the remaining breadcrumbs, show only the last one, hide the rest
-  const { hiddenItems, visibleBreadcrumb, title } = useMemo(() => {
+  // Project name (2nd item) is always visible for context when sidebar is collapsed
+  // Other breadcrumbs go into the dropdown
+  const { hiddenItems, visibleBreadcrumbs, title } = useMemo(() => {
     if (children.length === 0) {
-      return { hiddenItems: [], visibleBreadcrumb: null, title: null };
+      return { hiddenItems: [], visibleBreadcrumbs: [], title: null };
     }
 
-    // Last child is the title
+    // Last child is the title (workflow name)
     const titleItem = children[children.length - 1];
     const breadcrumbs = children.slice(0, -1);
 
-    if (breadcrumbs.length > 1) {
-      // Hide all but the last breadcrumb
+    if (breadcrumbs.length >= 2) {
+      // Structure: [Projects, ProjectName, Workflows, ...]
+      // Hide only "Projects" (index 0) in the dropdown
+      // Show project name (index 1) and everything after as visible
+      const hiddenItems = breadcrumbs.slice(0, 1); // Only "Projects" link in dropdown
+      const visibleBreadcrumbs = breadcrumbs.slice(1); // ProjectName, Workflows, etc.
+
       return {
-        hiddenItems: breadcrumbs.slice(0, -1),
-        visibleBreadcrumb: breadcrumbs[breadcrumbs.length - 1],
+        hiddenItems,
+        visibleBreadcrumbs,
         title: titleItem,
       };
     }
 
     return {
       hiddenItems: [],
-      visibleBreadcrumb: breadcrumbs[0] ?? null,
+      visibleBreadcrumbs: breadcrumbs,
       title: titleItem,
     };
   }, [children]);
@@ -39,28 +45,28 @@ export function Breadcrumbs({ children }: { children: React.ReactNode[] }) {
       result.push(<BreadcrumbDropdown key="dropdown" items={hiddenItems} />);
     }
 
-    // Add visible breadcrumb (if exists)
-    if (visibleBreadcrumb) {
-      // Only show separator if there are hidden items (ellipsis dropdown before this)
-      if (hiddenItems.length > 0) {
+    // Add visible breadcrumbs
+    visibleBreadcrumbs.forEach((breadcrumb, index) => {
+      // Add separator if there's something before this breadcrumb
+      if (hiddenItems.length > 0 || index > 0) {
         result.push(
           <span
-            key="chevron-breadcrumb"
+            key={`chevron-breadcrumb-${index}`}
             className="hero-chevron-right-mini w-5 h-5 text-secondary-500"
           />
         );
       }
       result.push(
-        <li key="visible-breadcrumb" className="flex items-center">
-          {visibleBreadcrumb}
+        <li key={`visible-breadcrumb-${index}`} className="flex items-center">
+          {breadcrumb}
         </li>
       );
-    }
+    });
 
     // Add title (with separator only if there's something before it)
     if (title) {
-      // Show separator if there are hidden items OR a visible breadcrumb
-      if (hiddenItems.length > 0 || visibleBreadcrumb !== null) {
+      // Show separator if there are hidden items OR visible breadcrumbs
+      if (hiddenItems.length > 0 || visibleBreadcrumbs.length > 0) {
         result.push(
           <span
             key="chevron-title"
@@ -76,7 +82,7 @@ export function Breadcrumbs({ children }: { children: React.ReactNode[] }) {
     }
 
     return result;
-  }, [hiddenItems, visibleBreadcrumb, title]);
+  }, [hiddenItems, visibleBreadcrumbs, title]);
 
   return (
     <nav className="flex" aria-label="Breadcrumb">

assets/js/collaborative-editor/components/Header.tsx

@@ -257,7 +257,7 @@ export function Header({
       <EmailVerificationBanner />
 
       <div className="flex-none bg-white shadow-xs border-b border-gray-200 relative z-50">
-        <div className="mx-auto sm:px-6 lg:px-6 py-6 flex items-center h-20 text-sm">
+        <div className="mx-auto sm:px-4 lg:px-4 py-6 flex items-center h-20 text-sm">
           <Breadcrumbs>{children}</Breadcrumbs>
           <ReadOnlyWarning className="ml-3" />
           {projectId && workflowId && (

assets/js/collaborative-editor/components/ide/FullScreenIDE.tsx

@@ -801,7 +801,7 @@ export function FullScreenIDE({
 
       {/* IDE Heading Bar */}
       <div className="flex-none bg-white border-b border-gray-200">
-        <div className="flex items-center justify-between px-6 py-2">
+        <div className="flex items-center justify-between px-4 py-2">
           <div className="flex items-center gap-3 flex-1 min-w-0">
             {/* Job Selector */}
             <div className="shrink-0">