Add thumbs up quick label button to annotation toolbar (#588)

* Add thumbs-up quick annotation button to annotation toolbar

A one-click "👍 Looks good" button joins the existing quick-label
system so users can approve a selection, code block, or diff hunk
without opening the picker. Covers plan, annotate, and plan-diff
modes (all share the same AnnotationToolbar).


* Move thumbs-up button to the right of the zap quick-label button

For provenance purposes, this commit was AI assisted.

Author: backnotprop

packages/ui/components/AnnotationToolbar.tsx

@@ -7,6 +7,13 @@ import { FloatingQuickLabelPicker } from "./FloatingQuickLabelPicker";
 
 type PositionMode = 'center-above' | 'top-right';
 
+const THUMBS_UP_LABEL: QuickLabel = {
+  id: 'thumbs-up',
+  emoji: '👍',
+  text: 'Looks good',
+  color: 'green',
+};
+
 const isEditableElement = (node: EventTarget | Element | null): boolean => {
   if (!(node instanceof Element)) return false;
   if (node.matches('input, textarea, select, [role="textbox"]')) return true;
@@ -217,6 +224,12 @@ export const AnnotationToolbar: React.FC<AnnotationToolbarProps> = ({
               label="Quick label"
               className={showQuickLabels ? "text-amber-500 bg-amber-500/10" : "text-amber-500 hover:bg-amber-500/10"}
             />
+            <ToolbarButton
+              onClick={() => onQuickLabel(THUMBS_UP_LABEL)}
+              icon={<span className="block w-4 h-4 text-sm leading-4 text-center">👍</span>}
+              label="Looks good"
+              className="hover:bg-green-500/10"
+            />
             {showQuickLabels && zapButtonRef.current && (
               <FloatingQuickLabelPicker
                 anchorEl={zapButtonRef.current}