feat: add comment mode to toolbar by aidenybai · Pull Request #142 · aidenybai/react-grab

aidenybai · 2026-02-02T13:31:38Z

Summary

Add comment button to toolbar that enters prompt mode on next element click
Add pendingCommentMode state to track when comment mode is pending
Extract common toolbar button handlers to reduce code duplication

Changes

New Feature

Comment button in toolbar triggers prompt mode on next element selection
Visual feedback: comment icon highlighted when in comment mode, select icon dimmed

Refactoring (deslop)

Extract stopEventPropagation handler for reuse across toolbar buttons
Extract createFreezeHandlers to consolidate mouse enter/leave freeze logic
Replace nested ternaries with getToolbarIconColor helper function
Fix overflow-hidden → overflow-visible inconsistency in toolbar-content.tsx
Remove unused formatShortcut import

Test plan

Click comment button → toolbar should show comment icon highlighted
Click an element → prompt mode should activate
Verify select and comment buttons have correct visual states
Tooltips should display correctly for both buttons

Note

Medium Risk
Adds a new interaction mode that changes the selection/click/drag flow into prompt mode; risk is mainly behavioral regressions around activation/deactivation and element selection handling.

Overview
Adds a Comment button to the overlay toolbar that toggles a one-shot “comment mode”: clicking it arms the next element click or drag-selection to enter prompt mode (loading cached input) instead of copying, and clicking Comment again exits/deactivates.

Threads isCommentMode/onComment through renderer/types, introduces pendingCommentMode in the core store (reset on deactivate), and updates click/drag handlers to branch into enterPromptMode when armed. UI updates include a new IconComment, shared hover/freeze handlers in the toolbar, centralized icon color logic via getToolbarIconColor, and a design-system scenario for comment mode; the web extension manifest version is bumped to 0.0.7.

^{Written by Cursor Bugbot for commit f2aa1f3. This will update automatically on new commits. Configure here.}

Summary by cubic

Adds a Comment mode to the toolbar. Clicking Comment arms the next element click or drag selection to open prompt mode at that position, loading cached input with clear icon states.

New Features
- Comment button toggles a one-shot comment mode; next element click or drag selection opens prompt at the click/selection position, clicking Comment again cancels and deactivates the overlay.
- Toolbar/renderer accept isCommentMode and onComment; icons highlight/dim based on mode.
- New comment icon component.
Refactors
- Extract shared handlers (stopEventPropagation, createFreezeHandlers) and getToolbarIconColor.
- Add pendingCommentMode in store; reset on deactivate; integrated into core click and drag selection handling.
- Fix overflow class in toolbar-content; remove unused import; add design system props for comment mode; bump web extension manifest to 0.0.7.

^{Written for commit f2aa1f3. Summary will update on new commits.}

vercel · 2026-02-02T13:31:43Z

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

Project	Deployment	Actions	Updated (UTC)
react-grab-website	Ready	Preview, Comment	Feb 2, 2026 2:32pm

- Add comment button to toolbar that enters prompt mode on next element click - Add pendingCommentMode state to store - Add isCommentMode and onComment props to toolbar and renderer - Extract common toolbar button handlers (stopEventPropagation, createFreezeHandlers) - Replace nested ternaries with getToolbarIconColor helper function - Fix overflow class inconsistency in toolbar-content.tsx - Remove unused formatShortcut import

pullfrog

Found several issues with the comment mode implementation: incorrect callback usage in freeze handlers causing wrong hover state tracking, missing condition check that breaks unfreezing behavior, and a UX issue with mode switching. All issues are in toolbar/index.tsx.

^{｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ pullfrog.com ｜ 𝕏}

pullfrog · 2026-02-02T13:34:26Z

packages/react-grab/src/components/toolbar/index.tsx

+  const createFreezeHandlers = (
+    setTooltipVisible: (visible: boolean) => void,
+  ) => ({
+    onMouseEnter: () => {
+      setTooltipVisible(true);
+      props.onSelectHoverChange?.(true);
+      if (!unfreezeUpdatesCallback) {
+        unfreezeUpdatesCallback = freezeUpdates();
+        freezeGlobalAnimations();
+        freezePseudoStates();
+      }
+    },
+    onMouseLeave: () => {
+      setTooltipVisible(false);
+      props.onSelectHoverChange?.(false);
+      if (!props.isActive && !props.isContextMenuOpen) {
+        unfreezeUpdatesCallback?.();
+        unfreezeUpdatesCallback = null;
+        unfreezeGlobalAnimations();
+        unfreezePseudoStates();
+      }
+    },
+  });


Bug: createFreezeHandlers always calls props.onSelectHoverChange regardless of which button uses it. The comment button (line 1087) incorrectly triggers select hover callbacks.

This should accept an optional parameter to control whether to call the hover change callback:

const createFreezeHandlers = ( setTooltipVisible: (visible: boolean) => void, shouldNotifyHoverChange = false, ) => ({ onMouseEnter: () => { setTooltipVisible(true); if (shouldNotifyHoverChange) { props.onSelectHoverChange?.(true); } // ... }, onMouseLeave: () => { setTooltipVisible(false); if (shouldNotifyHoverChange) { props.onSelectHoverChange?.(false); } // ... }, });

Then call it with createFreezeHandlers(setIsSelectTooltipVisible, true) for select button and createFreezeHandlers(setIsCommentTooltipVisible, false) for comment button.

pullfrog · 2026-02-02T13:34:26Z

packages/react-grab/src/components/toolbar/index.tsx

+    onMouseLeave: () => {
+      setTooltipVisible(false);
+      props.onSelectHoverChange?.(false);
+      if (!props.isActive && !props.isContextMenuOpen) {


Bug: Unfreeze condition is incomplete. When hovering over the comment button while in pending comment mode (props.isCommentMode is true), the onMouseLeave will not properly unfreeze because the condition doesn't check !props.isCommentMode.

Should be: if (!props.isActive && !props.isContextMenuOpen && !props.isCommentMode)

pullfrog · 2026-02-02T13:34:26Z

packages/react-grab/src/core/index.tsx

+    const handleComment = () => {
+      if (isActivated()) {
+        deactivateRenderer();
+      } else if (isEnabled()) {
+        actions.setPendingCommentMode(true);
+        toggleActivate();
+      }
+    };


UX consideration: When already in select mode (isActivated() is true) and clicking the comment button, this just deactivates instead of switching to comment mode. This means users need to click comment twice to enter comment mode from select mode.

Consider this alternative behavior:

const handleComment = () => { if (isActivated()) { if (store.pendingCommentMode || isPromptMode()) { // Already in comment mode, deactivate deactivateRenderer(); } else { // In select mode, switch to comment mode actions.setPendingCommentMode(true); } } else if (isEnabled()) { actions.setPendingCommentMode(true); toggleActivate(); } };

This allows toggling between select and comment modes without fully deactivating.

pkg-pr-new · 2026-02-02T13:35:03Z

Open in StackBlitz

@react-grab/cli

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/cli@142

grab

npm i https://pkg.pr.new/aidenybai/react-grab/grab@142

@react-grab/ami

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/ami@142

@react-grab/amp

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/amp@142

@react-grab/claude-code

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/claude-code@142

@react-grab/codex

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/codex@142

@react-grab/cursor

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/cursor@142

@react-grab/droid

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/droid@142

@react-grab/gemini

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/gemini@142

@react-grab/opencode

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/opencode@142

react-grab

npm i https://pkg.pr.new/aidenybai/react-grab@142

@react-grab/relay

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/relay@142

commit: 61ecc7d

vercel · 2026-02-02T13:41:30Z

packages/react-grab/src/components/toolbar/index.tsx

+  };
+
+  const createFreezeHandlers = (
+    setTooltipVisible: (visible: boolean) => void,


createFreezeHandlers function unconditionally calls props.onSelectHoverChange for both select and comment buttons, and lacks isCommentMode check in unfreeze condition

packages/react-grab/src/core/index.tsx

… prompt mode

cubic-dev-ai

1 issue found across 10 files

Prompt for AI agents (all issues)


Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/react-grab/src/core/index.tsx">

<violation number="1" location="packages/react-grab/src/core/index.tsx:1463">
P2: The current implementation deactivates the renderer when clicking the comment button if the tool is already active. This forces users to double-click (deactivate then re-activate) to switch from selection mode to comment mode. 

Consider checking if `pendingCommentMode` is active:
- If yes (already in comment mode), deactivate (toggle off).
- If no (in selection mode), switch to comment mode (set pending flag) without deactivating.

(Note: A similar logic update should likely be applied to `handleToggleActive` to allow switching back to selection mode without deactivating.)</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

packages/react-grab/src/core/index.tsx

cursor · 2026-02-02T13:48:02Z

Bugbot Autofix prepared fixes for 1 of the 1 bugs found in the latest run.

✅ Fixed: Comment mode persists after drag copy with modifier
- Added actions.setPendingCommentMode(false) at the start of handleDragSelection to clear the pending comment mode when a drag selection is initiated.

- Refactor comment mode handling in the toolbar and renderer - Update state management for pendingCommentMode and isCommentMode - Improve element interaction logic for entering comment mode - Ensure proper activation and deactivation of comment mode based on user actions

packages/react-grab/src/core/index.tsx

packages/react-grab/src/components/toolbar/toolbar-content.tsx

- Add isToolbarCommentMode and isToolbarCollapsed props to the design system - Update toolbar content to utilize new props for improved state management - Refactor button rendering logic in toolbar-content.tsx to accommodate comment mode and active states

- Remove premature setPendingCommentMode(false) in handleDragSelection to allow comment mode for drag selections - Add isCommentMode prop to ToolbarContentProps and apply conditional styling to defaultCommentButton

- Remove premature setPendingCommentMode(false) in handleDragSelection to allow comment mode for drag selections - Add isCommentMode prop to ToolbarContentProps and apply conditional styling to defaultCommentButton using getIconColor helper

cursor · 2026-02-02T14:05:09Z

Bugbot Autofix prepared fixes for 2 of the 2 bugs found in the latest run.

✅ Fixed: Comment mode fails for drag selections
- Removed the premature setPendingCommentMode(false) call at the start of handleDragSelection, allowing the pendingCommentMode check to work correctly.
✅ Fixed: Inconsistent default button styling in toolbar-content
- Added isCommentMode prop to ToolbarContentProps and applied getIconColor helper to defaultCommentButton for equivalent conditional styling.

packages/react-grab/src/core/index.tsx

packages/react-grab/src/components/toolbar/toolbar-content.tsx

… helper - Fix comment icon toggle behavior to check isCommentMode() instead of just pendingCommentMode, ensuring visual state matches click behavior - Extract getToolbarIconColor to shared utility to eliminate code duplication between toolbar files

cursor · 2026-02-02T14:18:54Z

Bugbot Autofix prepared fixes for 2 of the 2 bugs found in the latest run.

✅ Fixed: Comment icon state inconsistent with click toggle behavior
- Changed handleComment to check isCommentMode() instead of store.pendingCommentMode, ensuring the toggle behavior matches the visual state of the highlighted icon.
✅ Fixed: Duplicated icon color helper function across files
- Extracted getToolbarIconColor to a shared utility file and updated both toolbar files to import and use it, eliminating code duplication.

cursor

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

^{Bugbot Autofix is ON. A Cloud Agent has been kicked off to fix the reported issue.}

packages/react-grab/src/utils/get-toolbar-icon-color.ts

…nColor

cursor · 2026-02-02T14:32:09Z

Bugbot Autofix prepared fixes for 1 of the 1 bugs found in the latest run.

✅ Fixed: Confusing parameter name in utility function
- Renamed the second parameter from 'isActive' to 'isDimmed' to accurately reflect that it controls dimmed state rather than active state.

* feat: add comment mode to toolbar - Add comment button to toolbar that enters prompt mode on next element click - Add pendingCommentMode state to store - Add isCommentMode and onComment props to toolbar and renderer - Extract common toolbar button handlers (stopEventPropagation, createFreezeHandlers) - Replace nested ternaries with getToolbarIconColor helper function - Fix overflow class inconsistency in toolbar-content.tsx - Remove unused formatShortcut import * chore: update version in manifest.json to 0.0.7 * fix: clear pendingCommentMode on drag selection to prevent unexpected prompt mode * feat: enhance comment mode functionality - Refactor comment mode handling in the toolbar and renderer - Update state management for pendingCommentMode and isCommentMode - Improve element interaction logic for entering comment mode - Ensure proper activation and deactivation of comment mode based on user actions * feat: enhance toolbar functionality with new props - Add isToolbarCommentMode and isToolbarCollapsed props to the design system - Update toolbar content to utilize new props for improved state management - Refactor button rendering logic in toolbar-content.tsx to accommodate comment mode and active states * fix: comment mode drag selection and toolbar button styling - Remove premature setPendingCommentMode(false) in handleDragSelection to allow comment mode for drag selections - Add isCommentMode prop to ToolbarContentProps and apply conditional styling to defaultCommentButton * Fix comment icon state inconsistency and extract duplicate icon color helper - Fix comment icon toggle behavior to check isCommentMode() instead of just pendingCommentMode, ensuring visual state matches click behavior - Extract getToolbarIconColor to shared utility to eliminate code duplication between toolbar files * fix: rename confusing isActive parameter to isDimmed in getToolbarIconColor --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com>

vercel bot deployed to Preview February 2, 2026 13:32 View deployment

aidenybai force-pushed the feat/comment-mode branch from 0f08486 to 6657d9b Compare February 2, 2026 13:33

vercel bot deployed to Preview February 2, 2026 13:33 View deployment

pullfrog bot reviewed Feb 2, 2026

View reviewed changes

vercel bot reviewed Feb 2, 2026

View reviewed changes

cursor bot reviewed Feb 2, 2026

View reviewed changes

packages/react-grab/src/core/index.tsx Show resolved Hide resolved

chore: update version in manifest.json to 0.0.7

8f79066

vercel bot deployed to Preview February 2, 2026 13:45 View deployment

fix: clear pendingCommentMode on drag selection to prevent unexpected…

0ae5555

… prompt mode

cubic-dev-ai bot reviewed Feb 2, 2026

View reviewed changes

packages/react-grab/src/core/index.tsx Show resolved Hide resolved

vercel bot deployed to Preview February 2, 2026 13:48 View deployment

vercel bot deployed to Preview February 2, 2026 13:53 View deployment

vercel bot reviewed Feb 2, 2026

View reviewed changes

packages/react-grab/src/core/index.tsx Outdated Show resolved Hide resolved

cursor bot reviewed Feb 2, 2026

View reviewed changes

packages/react-grab/src/core/index.tsx Outdated Show resolved Hide resolved

packages/react-grab/src/components/toolbar/toolbar-content.tsx Show resolved Hide resolved

aidenybai and others added 2 commits February 2, 2026 06:02

fix: comment mode drag selection and toolbar button styling

e6a7fe0

- Remove premature setPendingCommentMode(false) in handleDragSelection to allow comment mode for drag selections - Add isCommentMode prop to ToolbarContentProps and apply conditional styling to defaultCommentButton

vercel bot deployed to Preview February 2, 2026 14:03 View deployment

vercel bot deployed to Preview February 2, 2026 14:05 View deployment

cursor bot reviewed Feb 2, 2026

View reviewed changes

packages/react-grab/src/core/index.tsx Show resolved Hide resolved

packages/react-grab/src/components/toolbar/toolbar-content.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview February 2, 2026 14:19 View deployment

cursor bot reviewed Feb 2, 2026

View reviewed changes

packages/react-grab/src/utils/get-toolbar-icon-color.ts Show resolved Hide resolved

fix: rename confusing isActive parameter to isDimmed in getToolbarIco…

f2aa1f3

…nColor

vercel bot deployed to Preview February 2, 2026 14:32 View deployment

aidenybai merged commit 9d36505 into main Feb 2, 2026
12 checks passed

Conversation

aidenybai commented Feb 2, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

New Feature

Refactoring (deslop)

Test plan

Summary by cubic

Uh oh!

vercel bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pullfrog bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pullfrog bot Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

pullfrog bot Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

pullfrog bot Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cursor bot commented Feb 2, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot commented Feb 2, 2026

Uh oh!

Uh oh!

Uh oh!

cursor bot commented Feb 2, 2026

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cursor bot commented Feb 2, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

aidenybai commented Feb 2, 2026 •

edited by cursor bot

Loading

vercel bot commented Feb 2, 2026 •

edited

Loading

pullfrog bot left a comment •

edited

Loading

pkg-pr-new bot commented Feb 2, 2026 •

edited

Loading

vercel bot Feb 2, 2026 •

edited

Loading