From d623a59c870eb3dea673a33518e5e7a44e24e4f3 Mon Sep 17 00:00:00 2001
From: byGalax <dennis@landmann.dev>
Date: Sat, 16 May 2026 19:46:00 +0200
Subject: [PATCH] =?UTF-8?q?feat(P4A.T3):=20annotator=20toolbar=20=E2=80=94?=
 =?UTF-8?q?=20tool/color/width/undo/redo=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../desktop/src/components/ImageAnnotator.tsx | 131 ++++++++++++++++--
 1 file changed, 120 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/src/components/ImageAnnotator.tsx b/apps/desktop/src/components/ImageAnnotator.tsx
index c8c505a..a42abfc 100644
--- a/apps/desktop/src/components/ImageAnnotator.tsx
+++ b/apps/desktop/src/components/ImageAnnotator.tsx
@@ -34,15 +34,13 @@ export function ImageAnnotator({ file, onCancel, onSave }: Props) {
   // tool/color/width are read by Task 2 (drawing engine) and Task 3 (toolbar).
   // Defaults shown here are intentional so T2's pointer handlers work
   // immediately with sensible behavior before T3's UI is wired.
-  const [tool, _setTool] = useState<AnnotatorTool>('pen');
-  const [color, _setColor] = useState<AnnotatorColor>('#ef4444');
-  const [width, _setWidth] = useState<AnnotatorWidth>(4);
+  const [tool, setTool] = useState<AnnotatorTool>('pen');
+  const [color, setColor] = useState<AnnotatorColor>('#ef4444');
+  const [width, setWidth] = useState<AnnotatorWidth>(4);
 
   const draftRef = useRef<AnnotatorOp | null>(null);
   const [draftTick, setDraftTick] = useState(0);
 
-  void _setTool; void _setColor; void _setWidth; void redoStack;
-
   useEffect(() => {
     const url = URL.createObjectURL(file);
     const img = new Image();
@@ -236,13 +234,113 @@ export function ImageAnnotator({ file, onCancel, onSave }: Props) {
         )}
       </div>
 
-      <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-line/40 bg-surface-2 px-4 py-3">
-        <div className="text-xs text-fg-muted">
-          {ops.length === 0
-            ? t('app:annotator.no_changes', { defaultValue: 'Keine Änderungen' })
-            : ops.length + ' ' + t('app:annotator.changes', { defaultValue: 'Änderungen' })}
+      <footer className="flex shrink-0 flex-wrap items-center gap-4 border-t border-line/40 bg-surface-2 px-4 py-3">
+        <div className="flex items-center gap-1">
+          {(['pen', 'highlighter', 'arrow', 'rect', 'circle', 'text'] as AnnotatorTool[]).map((id) => {
+            const label = t('app:annotator.tool.' + id, {
+              defaultValue:
+                id === 'pen' ? 'Stift'
+                : id === 'highlighter' ? 'Marker'
+                : id === 'arrow' ? 'Pfeil'
+                : id === 'rect' ? 'Rechteck'
+                : id === 'circle' ? 'Kreis'
+                : 'Text',
+            });
+            const active = tool === id;
+            return (
+              <button
+                key={id}
+                type="button"
+                onClick={() => setTool(id)}
+                aria-pressed={active}
+                title={label}
+                className={
+                  'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-xs font-semibold transition ' +
+                  (active
+                    ? 'bg-accent/20 text-accent ring-2 ring-accent/40'
+                    : 'bg-surface-3 text-fg-muted hover:bg-surface hover:text-fg')
+                }
+              >
+                {toolGlyph(id)}
+              </button>
+            );
+          })}
         </div>
-        <div className="flex items-center gap-2">
+
+        <div className="h-6 w-px bg-line/40" aria-hidden />
+
+        <div className="flex items-center gap-1">
+          {(['#ef4444', '#3b82f6', '#22c55e', '#facc15', '#a855f7', '#ffffff'] as AnnotatorColor[]).map((c) => {
+            const active = color === c;
+            return (
+              <button
+                key={c}
+                type="button"
+                onClick={() => setColor(c)}
+                aria-pressed={active}
+                aria-label={c}
+                className={
+                  'h-6 w-6 cursor-pointer rounded-full border-2 transition ' +
+                  (active ? 'border-fg scale-110' : 'border-line/40 hover:scale-105')
+                }
+                style={{ backgroundColor: c }}
+              />
+            );
+          })}
+        </div>
+
+        <div className="h-6 w-px bg-line/40" aria-hidden />
+
+        <div className="flex items-center gap-1">
+          {([2, 4, 8] as AnnotatorWidth[]).map((w) => {
+            const active = width === w;
+            return (
+              <button
+                key={w}
+                type="button"
+                onClick={() => setWidth(w)}
+                aria-pressed={active}
+                title={w + 'px'}
+                className={
+                  'flex h-8 w-8 cursor-pointer items-center justify-center rounded-md transition ' +
+                  (active
+                    ? 'bg-accent/20 ring-2 ring-accent/40'
+                    : 'bg-surface-3 hover:bg-surface')
+                }
+              >
+                <div
+                  className="rounded-full bg-fg"
+                  style={{ width: w + 2 + 'px', height: w + 2 + 'px' }}
+                />
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="h-6 w-px bg-line/40" aria-hidden />
+
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={handleUndo}
+            disabled={ops.length === 0}
+            title={t('app:annotator.undo', { defaultValue: 'Rückgängig (Ctrl+Z)' })}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-surface-3 text-fg-muted transition hover:bg-surface hover:text-fg disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            ↶
+          </button>
+          <button
+            type="button"
+            onClick={handleRedo}
+            disabled={redoStack.length === 0}
+            title={t('app:annotator.redo', { defaultValue: 'Wiederholen (Ctrl+Y)' })}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-surface-3 text-fg-muted transition hover:bg-surface hover:text-fg disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            ↷
+          </button>
+        </div>
+
+        <div className="ml-auto flex items-center gap-2">
           <button
             type="button"
             onClick={handleReset}
@@ -265,6 +363,17 @@ export function ImageAnnotator({ file, onCancel, onSave }: Props) {
   );
 }
 
+function toolGlyph(t: AnnotatorTool): string {
+  switch (t) {
+    case 'pen': return '✎';
+    case 'highlighter': return '🖍';
+    case 'arrow': return '↗';
+    case 'rect': return '▭';
+    case 'circle': return '◯';
+    case 'text': return 'T';
+  }
+}
+
 function renderOp(ctx: CanvasRenderingContext2D, op: AnnotatorOp): void {
   ctx.save();
   ctx.lineCap = 'round';