Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

improvement: compact hover-expand UX for canvas toolbar toggles#672

Merged
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom
improvement/compact-hover-expand-toolbar-togglesbreaking-brake/cc-wf-studio:improvement/compact-hover-expand-toolbar-togglesCopy head branch name to clipboard
Mar 22, 2026
Merged

improvement: compact hover-expand UX for canvas toolbar toggles#672
breaking-brake merged 1 commit intomainbreaking-brake/cc-wf-studio:mainfrom
improvement/compact-hover-expand-toolbar-togglesbreaking-brake/cc-wf-studio:improvement/compact-hover-expand-toolbar-togglesCopy head branch name to clipboard

Conversation

@breaking-brake
Copy link
Copy Markdown
Owner

@breaking-brake breaking-brake commented Mar 22, 2026 •
edited by coderabbitai Bot
Loading

Summary

Make all 4 canvas toolbar toggles compact by default (28x28 icon buttons), expanding to full toggle controls on hover with smooth CSS transitions.

What Changed

Before

  • ScrollModeToggle and InteractionModeToggle always displayed as full-width toggles (~82px each)
  • Edge Animation and Highlight were simple icon buttons with no toggle switch
  • Toolbar took significant horizontal space

After

  • All 4 toggles display as uniform 28x28 compact icon buttons when not hovered
  • On hover, each toggle smoothly expands to show [Off Icon] [Switch] [On Icon] layout
  • Edge Animation icon changed from Activity to ChevronsLeftRightEllipsis (visually represents flow along edges)
  • Edge Animation off-state shows diagonal slash overlay on icon
  • Hover state highlights border with var(--vscode-focusBorder) for clear interaction feedback
  • Empty tooltip rendering fixed in StyledTooltipItem

Changes

  • src/webview/src/components/ScrollModeToggle.tsx - Added hover-expand behavior with CSS transitions
  • src/webview/src/components/InteractionModeToggle.tsx - Added hover-expand behavior with CSS transitions
  • src/webview/src/components/EdgeAnimationToggle.tsx - New component extracted from CanvasToolbar
  • src/webview/src/components/HighlightToggle.tsx - New component extracted from CanvasToolbar
  • src/webview/src/components/CanvasToolbar.tsx - Simplified to use new toggle components
  • src/webview/src/components/common/StyledTooltip.tsx - Fix empty tooltip rendering

Testing

  • Manual E2E testing completed

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Added hover-expandable toolbar controls that collapse to compact icons and expand to full controls on interaction.
    • Improved keyboard navigation and accessibility support for all toolbar buttons.
    • Enhanced animations that respect user's reduced-motion preferences.

  • Refactor

    • Reorganized toolbar components for better modularity and maintainability.
    • Optimized tooltip rendering behavior.

@breaking-brake @claude
improvement: compact hover-expand UX for canvas toolbar toggles
d5c63c5 
- All 4 toolbar toggles show as 28x28 compact icons by default
- Hover expands to full toggle with switch and both mode icons
- Extract EdgeAnimationToggle and HighlightToggle as separate components
- Change edge animation icon to ChevronsLeftRightEllipsis with off-state slash overlay
- Add focus border highlight on hover for all toggles
- Fix empty tooltip rendering in StyledTooltipItem

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Mar 22, 2026 •
edited
Loading

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Toolbar components refactored to extract toggle controls into separate, reusable components with a consistent hover-expanding UI pattern. New EdgeAnimationToggle and HighlightToggle components replace inline implementations in CanvasToolbar. Existing InteractionModeToggle and ScrollModeToggle updated with the same expandable pattern. StyledTooltipItem now conditionally renders content.

Changes

Cohort / File(s) Summary
New Toggle Components
src/webview/src/components/EdgeAnimationToggle.tsx, src/webview/src/components/HighlightToggle.tsx		 Two new components implementing toggle controls for edge animation and group node highlighting with hover-triggered expansion from compact icon buttons to full width layouts with Radix switches. Both use localized text via useTranslation() and respect reduced-motion preferences.
Refactored Toggle Controls
src/webview/src/components/InteractionModeToggle.tsx, src/webview/src/components/ScrollModeToggle.tsx		 Both components reworked to adopt the hover-expanding pattern: collapse to 28x28 icon-only buttons at rest, expand to full-width controls on hover. Includes updated transition handling, conditional tooltip behavior, and refactored click/keyboard event handling with propagation control.
CanvasToolbar Refactoring
src/webview/src/components/CanvasToolbar.tsx		 Removes inline edge-animation and highlight button implementations (including icons, state wiring, tooltips, and animations). Now renders new EdgeAnimationToggle and HighlightToggle components with appropriate props wiring.
Tooltip Conditional Rendering
src/webview/src/components/common/StyledTooltip.tsx		 Updated StyledTooltipItem to conditionally mount tooltip portal/content only when content prop is truthy, preventing unnecessary DOM nodes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

Possibly related PRs

Poem

🐰 Hop-hop, the toolbar evolves with care,
Toggle buttons expand into the air!
Extract, refactor, reuse the view—
Hover-reveals what toggles do! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The pull request title 'improvement: compact hover-expand UX for canvas toolbar toggles' directly and specifically summarizes the main change: refactoring canvas toolbar toggles to use a compact hover-expand design pattern.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch improvement/compact-hover-expand-toolbar-toggles

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@breaking-brake breaking-brake merged commit 73b40c9 into main Mar 22, 2026
3 of 4 checks passed
@breaking-brake breaking-brake deleted the improvement/compact-hover-expand-toolbar-toggles branch March 22, 2026 05:32
@breaking-brake breaking-brake mentioned this pull request Mar 22, 2026
Merged
braking-brake-semantic-release Bot pushed a commit that referenced this pull request Mar 22, 2026
@github-actions
chore(release): 3.30.2 [skip ci]
446731c 
## [3.30.2](v3.30.1...v3.30.2) (2026-03-22)

### Bug Fixes

* rename MCP tool list_available_commands to list_available_agents ([#668](#668)) ([e99e624](e99e624))

### Improvements

* add Classic/Freehand scroll mode toggle to canvas ([#669](#669)) ([5a5e326](5a5e326))
* compact hover-expand UX for canvas toolbar toggles ([#672](#672)) ([73b40c9](73b40c9))
@braking-brake-semantic-release
Copy link
Copy Markdown

braking-brake-semantic-release Bot commented Mar 22, 2026

🎉 This PR is included in version 3.30.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

This was referenced Mar 23, 2026
Merged
Merged
Merged
@coderabbitai coderabbitai Bot mentioned this pull request Apr 2, 2026
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

released

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@breaking-brake
Morty Proxy This is a proxified and sanitized view of the page, visit original site.