fix(sidebar): collapsed sidebar shows single icons with hover dropdown menus

[waleedlatif1]

Summary

• When sidebar is collapsed, tasks show a single Blimp icon and workflows show a single color-square icon instead of cluttering individual items
• Hovering opens a dropdown menu listing all tasks/workflows (with nested folder submenus for workflows)
• Clicking the Blimp navigates to Home, clicking the workflow icon creates a new workflow
• Fixed pre-hydration layout shift via blocking script + CSS (data-sidebar-collapsed attribute)
• Extracted groupWorkflowsByFolder and compareByOrder to shared sidebar/utils.ts
• Added useHoverMenu hook for hover-triggered dropdown state with timer-based close delay
• Extracted CollapsedSidebarMenu component to eliminate dropdown duplication

Type of Change

• Bug fix
• New feature

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 14, 2026 10:19pm

[cursor]

PR Summary

Medium Risk
Medium risk due to substantial conditional rendering changes in the workspace sidebar and new hover-driven dropdown behavior that could affect navigation/accessibility in collapsed mode. Also adds pre-hydration DOM attribute/CSS to alter initial layout, which can impact perceived UI state across routes.

Overview
Improves the collapsed sidebar UX by replacing the full Tasks/Workflows lists with single icons that open hover-triggered dropdown menus (including nested folder/workflow submenus) and adds reusable CollapsedSidebarMenu/CollapsedFolderItems plus a useHoverMenu hook to manage delayed-close hover state.

Reduces collapsed-mode clutter by hiding/removing certain elements via new sidebar-collapse-* classes, and prevents pre-hydration layout/opacity flash by setting html[data-sidebar-collapsed] from the blocking layout script (and clearing it when expanded). Also extracts workflow sorting/grouping helpers into shared sidebar/utils.ts and uses them in WorkflowList/Sidebar.

Additionally, opening the resource panel from Home now auto-collapses the sidebar for more available width.

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

[greptile-apps]

Greptile Summary

This PR improves the collapsed sidebar UX by replacing the cluttered per-item display with a single icon per section (Blimp for tasks, color-square for workflows) that reveals a hover dropdown. It also fixes the pre-hydration layout shift via a blocking script + CSS attribute, extracts shared utilities into sidebar/utils.ts, introduces the useHoverMenu hook, and promotes CollapsedSidebarMenu / CollapsedFolderItems into their own component file.

Key changes:

• use-hover-menu.ts — well-constructed hook with proper timer cleanup and both open/close cases handled in onOpenChange (fixing the prior touch/keyboard accessibility gap).
• collapsed-sidebar-menu.tsx — clean component extraction; the DropdownMenuTrigger button is an icon-only control but is missing an aria-label, unlike every other icon-only button in the sidebar (collapse, expand, task/workflow options, etc.). The component should accept a label prop so callers can provide e.g. "Tasks" or "Workflows".
• sidebar.tsx — collapsed task dropdown renders tasks.map(...) (all tasks), while the expanded view paginates to visibleTaskCount (5) with a "See more" button. For workspaces with many tasks this creates an unwieldy dropdown.
• utils.ts — correct extraction of compareByOrder and groupWorkflowsByFolder now shared between sidebar.tsx and workflow-list.tsx.
• Pre-hydration CSS/script — data-sidebar-collapsed attribute is set by the blocking script in layout.tsx and removed by a useEffect in Sidebar on expansion; mirrors the established [data-collapsed] pattern cleanly.

Confidence Score: 3/5

• Safe to merge with minor accessibility and UX consistency issues to address.
• The core logic (hover menu, pre-hydration blocking, component extraction, utility sharing) is sound and addresses a real UX problem. Two issues hold it back from a higher score: the new icon-only trigger buttons lack aria-labels (breaking the sidebar's consistent accessibility pattern), and the collapsed task dropdown skips the visibleTaskCount pagination applied in the expanded view, which could produce very long lists for busy workspaces.
• collapsed-sidebar-menu.tsx (missing aria-label on trigger button), sidebar.tsx (task dropdown pagination)

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-hover-menu.ts	New hook encapsulating hover-triggered dropdown state with timer-based close delay. Timer is properly cleaned up on unmount. Logic is sound and well-structured.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx	New components for collapsed sidebar menus. Both open/close cases in onOpenChange are handled correctly for touch/keyboard. The trigger button is missing an aria-label, inconsistent with the rest of the sidebar's accessibility patterns.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx	Sidebar refactored to show icon menus when collapsed. useFolders is correctly called unconditionally to support the collapsed folder tree. Collapsed task dropdown renders all tasks without the visibleTaskCount pagination present in the expanded view.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts	Shared utilities compareByOrder and groupWorkflowsByFolder correctly extracted from workflow-list.tsx. Clean refactor with no logic changes.
apps/sim/app/_styles/globals.css	Pre-hydration CSS rules mirror the existing [data-collapsed] rules, consistent with the established approach. The broad span selector matches what was already in place before this PR.
apps/sim/app/layout.tsx	Blocking script correctly sets data-sidebar-collapsed on the html element before hydration when collapsed; React removes the attribute via useEffect in sidebar.tsx when expanded.
apps/sim/app/workspace/[workspaceId]/home/home.tsx	Auto-collapse of the sidebar on resource panel open is intentional (documented with a comment) and uses useSidebarStore.getState() correctly inside a useCallback.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx	Clean refactor replacing inline groupWorkflowsByFolder and compareByOrder with imports from the shared utils.ts. No functional changes.

Sequence Diagram

sequenceDiagram
    participant User
    participant BlockingScript as Blocking Script (layout.tsx)
    participant HTML as html element
    participant Sidebar as Sidebar (React)
    participant HoverMenu as useHoverMenu
    participant Dropdown as CollapsedSidebarMenu

    Note over BlockingScript,HTML: Pre-hydration
    BlockingScript->>HTML: setAttribute('data-sidebar-collapsed') if isCollapsed
    HTML-->>Sidebar: CSS hides spans/text via [data-sidebar-collapsed]

    Note over Sidebar,Dropdown: After hydration
    Sidebar->>HTML: removeAttribute('data-sidebar-collapsed') on expand
    Sidebar->>HoverMenu: tasksHover = useHoverMenu()
    Sidebar->>HoverMenu: workflowsHover = useHoverMenu()

    User->>Dropdown: onMouseEnter trigger div
    Dropdown->>HoverMenu: open() → cancelClose + setIsOpen(true)
    HoverMenu-->>Dropdown: isOpen = true → dropdown shows

    User->>Dropdown: onMouseLeave trigger div
    Dropdown->>HoverMenu: scheduleClose() → 150ms timer

    User->>Dropdown: onMouseEnter content
    Dropdown->>HoverMenu: cancelClose() → timer cleared

    User->>Dropdown: onMouseLeave content
    Dropdown->>HoverMenu: scheduleClose() → 150ms timer
    HoverMenu-->>Dropdown: setIsOpen(false) → dropdown closes

Loading

_{Last reviewed commit: cbd33eb}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}