Skip to content

improvement(sidebar): expand sidebar by hovering and clicking the edge#3830

Merged
waleedlatif1 merged 6 commits intostagingfrom
feat/side
Mar 28, 2026
Merged

improvement(sidebar): expand sidebar by hovering and clicking the edge#3830
waleedlatif1 merged 6 commits intostagingfrom
feat/side

Conversation

@waleedlatif1
Copy link
Copy Markdown
Collaborator

Summary

  • Added an invisible hit zone along the sidebar's right edge so users can expand/collapse it without using the button at the top
  • When collapsed: hovering shows an `e-resize` cursor, clicking expands the sidebar
  • When expanded on a workflow page: hovering shows an `ew-resize` cursor, dragging resizes the sidebar
  • Moved the handle outside the `` (which has `overflow-hidden`) into a sibling wrapper `div` with `relative` positioning to prevent clipping

Type of Change

  • Improvement

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)

@cursor
Copy link
Copy Markdown

cursor bot commented Mar 28, 2026

PR Summary

Medium Risk
Medium risk due to changes in global keyboard shortcut matching and sidebar interaction/resize behavior, which could introduce regressions in key handling or pointer/keyboard accessibility.

Overview
Improves sidebar usability by adding an invisible right-edge hit zone: when collapsed it can be clicked/keyboard-activated to expand, and when on workflow pages it preserves drag-to-resize behavior without being clipped by the sidebar’s overflow-hidden.

Adds new global commands/shortcuts for creating a workflow (Mod+Shift+P) and a task (Mod+Shift+K), updates sidebar buttons/tooltips to display these shortcuts, and makes global shortcut matching more reliable on international keyboards by falling back from KeyboardEvent.key to KeyboardEvent.code.

Adjusts the universal search modal horizontal positioning to account for the current --sidebar-width rather than always centering on the viewport.

Written by Cursor Bugbot for commit ba03206. Configure here.

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 28, 2026

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

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped Mar 28, 2026 8:56pm

Request Review

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 28, 2026

Greptile Summary

This PR improves sidebar UX by adding an invisible 8 px hit zone on the sidebar's right edge that allows users to expand (when collapsed) or resize (when expanded on a workflow page) without relying solely on the top button. It also corrects the SearchModal horizontal centering to account for the sidebar width, fixes keyboard-shortcut matching for international keyboard layouts, and adds Mod+Shift+P / Mod+Shift+K shortcuts for creating workflows and tasks.

Confidence Score: 5/5

Safe to merge — no P0 or P1 issues found; all changes are well-reasoned and structurally correct.

The structural overflow-hidden fix is sound, the --sidebar-width CSS variable is reliably maintained throughout the codebase, the search-modal centering formula is mathematically verified, the ARIA/keyboard concerns from the prior review thread are fully addressed, and the codeToKey international-keyboard fallback is correct. No regressions identified.

No files require special attention.

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx Major structural refactor: wraps aside in a div.relative.h-full so the resize/expand handle sits outside overflow-hidden, preventing clipping; adds edge-click expand for collapsed state; wires up new add-workflow/add-task shortcut handlers and keyboard-accessible edge handle.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx Search modal now centers in the content area (right of sidebar) rather than the full viewport by using calc(var(--sidebar-width) / 2 + 50%) — mathematically correct with the existing -translate-x-1/2 class.
apps/sim/app/workspace/[workspaceId]/providers/global-commands-provider.tsx Adds codeToKey() helper and a codeToKey(e.code) fallback in matchesShortcut so shortcuts fire correctly on international keyboard layouts where e.key yields non-ASCII characters.
apps/sim/app/workspace/[workspaceId]/utils/commands-utils.ts Registers two new command IDs (add-workflow → Mod+Shift+P, add-task → Mod+Shift+K) and their definitions; straightforward addition.

Reviews (4): Last reviewed commit: "fix(sidebar): guard add-workflow shortcu..." | Re-trigger Greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

…ift+P to avoid browser close-window conflict
@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Fix All in Cursor

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

@waleedlatif1 waleedlatif1 merged commit edc5023 into staging Mar 28, 2026
12 checks passed
@waleedlatif1 waleedlatif1 deleted the feat/side branch March 28, 2026 21:06
@waleedlatif1 waleedlatif1 restored the feat/side branch March 28, 2026 21:17
@waleedlatif1 waleedlatif1 deleted the feat/side branch March 28, 2026 21:44
TheodoreSpeaks pushed a commit that referenced this pull request Mar 28, 2026
#3830)

* improvement(sidebar): expand sidebar by hovering and clicking the edge

* improvement(sidebar): add keyboard shortcuts for new workflow/task, center search modal, fix edge ARIA

* improvement(sidebar): use Tooltip.Shortcut for inline shortcut display

* fix(sidebar): change new workflow shortcut from Mod+Shift+W to Mod+Shift+P to avoid browser close-window conflict

* fix(hotkeys): fall back to event.code for international keyboard layout compatibility

* fix(sidebar): guard add-workflow shortcut with canEdit and isCreatingWorkflow checks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant