feat: add quick label selection mode for one-click annotations

[grubmanItay]

Description

Follow-up to #268 — implements the "quick label selection mode" suggested by @backnotprop.

---

⚡ New Mode: Quick Label

Adds a 4th editor mode alongside Markup, Comment, and Redline. When active:

• Drag-select text → floating label picker appears immediately (no toolbar intermediary)
• Click a label → annotation created instantly
• Alt+1..8 → apply label via keyboard
• Escape / click outside → dismiss picker, remove highlight

Works with both input methods (Select and Pinpoint), including code blocks.

---

How It Works

Input Method	Behavior
Select (drag)	Highlight text → label picker appears above selection
Pinpoint (click)	Click element → label picker appears above it
Code blocks	Both input methods show picker anchored to the block

Mode persists across sessions via cookie storage (same as other modes).

---

Files Changed

File	Change
packages/ui/types.ts	Add 'quickLabel' to EditorMode union
packages/ui/utils/editorMode.ts	Recognize new mode in persistence
packages/ui/components/QuickLabelDropdown.tsx	NEW — extracted shared dropdown component
packages/ui/components/FloatingQuickLabelPicker.tsx	NEW — portal-rendered floating picker with positioning, keyboard shortcuts, click-outside dismiss
packages/ui/components/AnnotationToolbar.tsx	Import shared QuickLabelDropdown
packages/ui/components/Viewer.tsx	quickLabel branch in CREATE handler + pinpoint handler + state management
packages/ui/components/AnnotationToolstrip.tsx	New "Label" button (⚡) + warning color entry
packages/ui/components/KeyboardShortcuts.tsx	Updated shortcut hint

[backnotprop]

@grubmanItay really enjoying this feature. Great job.

I'm changing up some of the quick label orders. I'm happy to meet with you to discuss. We're also going to start a discussion.

#278

[backnotprop]

I'm gonna fix all these merge conflicts by the way.

[backnotprop]

I added label tips because it's helpful for additional context in the feedback that the agent gets.

[backnotprop]

The positioning bug from the code review has been fixed — FloatingQuickLabelPicker was fully rewritten with correct conditional translateY(-100%) flipping (68a9bb8). Merge conflicts also resolved (54d167d).

[backnotprop]

Code review

Found 1 issue:

1. Duplicate annotation on digit keypress when quick label picker is opened from toolbar -- When the picker is launched via the zap button in AnnotationToolbar, two independent window.addEventListener('keydown') handlers are active simultaneously. AnnotationToolbar's handler fires because showQuickLabels === true (line 119) and calls onQuickLabel. FloatingQuickLabelPicker's handler also fires (line 78) and calls onSelect, which chains to onQuickLabel again. preventDefault() does not prevent other window-level listeners from receiving the event -- only stopImmediatePropagation() would. The result is the label callback being invoked twice per keypress, creating a duplicate annotation.

   Fix: either skip digit handling in AnnotationToolbar when showQuickLabels is true (let the picker own it), or have the picker call stopImmediatePropagation().

   plannotator/packages/ui/components/AnnotationToolbar.tsx

   Lines 117 to 127 in 54d167d

   	// Quick label by digit — Alt+N always works, bare digit when picker is open
   	const isDigit = (e.code >= 'Digit1' && e.code <= 'Digit9') || e.code === 'Digit0';
   	if (isDigit && !e.ctrlKey && !e.metaKey && (e.altKey || showQuickLabels)) {
   	e.preventDefault();
   	const digit = parseInt(e.code.slice(5), 10);
   	const index = digit === 0 ? 9 : digit - 1;
   	if (index < quickLabels.length) {
   	onQuickLabel?.(quickLabels[index]);
   	}
   	return;
   	}

   plannotator/packages/ui/components/FloatingQuickLabelPicker.tsx

   Lines 76 to 85 in 54d167d

   	// Accept bare digit or Alt+digit — picker is open so digits mean labels
   	const isDigit = (e.code >= 'Digit1' && e.code <= 'Digit9') || e.code === 'Digit0';
   	if (isDigit && !e.ctrlKey && !e.metaKey) {
   	e.preventDefault();
   	const digit = parseInt(e.code.slice(5), 10);
   	const index = digit === 0 ? 9 : digit - 1;
   	if (index < quickLabels.length) {
   	onSelect(quickLabels[index]);
   	}
   	}

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}