improvement(ui): sidebar

[waleedlatif1]

Summary

• Simplified sidebar logo/collapse toggle: replaced separate expand button with a single Link that shows Wordmark when expanded and Sim icon + expand arrow on hover when collapsed
• Improved skeleton loading state with icon + text placeholders
• Updated workflow color swatch to use rounded-sm and 2.5px border
• Adjusted workspace header padding for tighter alignment
• Added bottom padding to settings sidebar sections

Type of Change

• Improvement (non-breaking change that improves existing functionality)

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 28, 2026 10:05pm

[cursor]

PR Summary

Low Risk
Low risk UI-only changes to sidebar layout/interaction; main risk is minor UX regression around the collapsed logo link now toggling expand behavior.

Overview
Refines the workspace sidebar UI/UX: the collapsed-state header now uses a single home Link that also expands the sidebar on click (with hover affordance), and spacing/padding is tightened in the workspace header and settings sidebar.

Updates loading and icon visuals for consistency, including richer sidebar skeleton rows (icon + text), adjusted workflow color swatch sizing/border, and rounded corner tweaks on collapsed sidebar menu triggers.

^{Written by Cursor Bugbot for commit a8edee2. Configure here.}

[greptile-apps]

Greptile Summary

This PR contains a set of focused, non-breaking UI refinements to the workspace sidebar. The headline change consolidates the separate logo <Link> and "expand" <button> into a single <Link> that renders the wordmark when expanded and the Sim icon (with a hover-reveal expand arrow) when collapsed. Supporting changes include a more faithful skeleton-loading state (icon + text placeholders instead of a single bar), normalised Tailwind tokens across components (rounded-sm, rounded-lg in place of arbitrary pixel values), a 1-pixel alignment tweak to the workspace header button padding, and a bottom-padding fix for the settings sidebar sections.

• Logo/collapse unification (sidebar.tsx lines 1210-1246): handleExpandSidebar is correctly memoised; onClick={isCollapsed ? handleExpandSidebar : undefined} means the expanded link navigates normally while the collapsed link expands the panel. The tooltip correctly uses showCollapsedTooltips (the delayed flag) rather than isCollapsed, preventing the tooltip from flashing during the transition animation.
• Skeleton improvement: Two separate <Skeleton> nodes (icon-sized + full-width) now visually match a real sidebar row better than the previous single full-height bar.
• Style normalisations: rounded-[3px] → rounded-sm, rounded-[8px] → rounded-lg, arbitrary pixel padding swapped for equivalent Tailwind tokens — all consistent with the project's styling conventions.
• Settings sidebar pb-2: Prevents the last settings item from butting directly against the panel edge.

Confidence Score: 5/5

Safe to merge — all changes are visual/UX refinements with no logic regressions.

No P0 or P1 issues found. Previous review concerns (two-click UX, stale gap-2) have been addressed. The refactored logo/expand element is logically sound: expand path correctly prevents navigation, expanded path navigates normally, tooltip timing uses the delayed showCollapsedTooltips flag, and the handleExpandSidebar callback is correctly memoised. All remaining observations are cosmetic.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx	Consolidated logo/collapse elements into a single Link that adapts content based on isCollapsed; added handleExpandSidebar callback; improved SidebarItemSkeleton with two separate icon/text placeholders; minor Tailwind class normalisations.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx	Normalised WorkflowColorSwatch size from 14px to 16px and switched to standard Tailwind border-radius token; changed button corner rounding from rounded-[8px] to rounded-lg (equivalent 8px).
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx	Added pb-2 bottom padding to the settings-sections container so content doesn't clip at the bottom of the panel.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx	Tightened workspace-button left padding by 1 px (pl-1.5 → pl-[5px]) to align with the adjusted outer container padding.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User clicks logo/collapse area] --> B{isCollapsed?}
    B -- Yes --> C[handleExpandSidebar called]
    C --> D[e.preventDefault — navigation blocked]
    D --> E[toggleCollapsed — sidebar expands]
    E --> F[showCollapsedTooltips set to false immediately]
    B -- No --> G[Link navigates to /workspace/workspaceId/home]

    H[User clicks collapse button] --> I[toggleCollapsed — sidebar collapses]
    I --> J[Wait 200ms]
    J --> K[showCollapsedTooltips set to true — tooltip enabled]

Loading

_{Reviews (2): Last reviewed commit: "fix(sidebar): remove no-op gap-2 from si..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR