Shoot sketches

components/shoot-log/TakeImageGallery.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useRef, useState, useCallback } from "react";
-import { Upload, X, Loader2, ImageIcon, ZoomIn } from "lucide-react";
+import { Upload, X, Loader2, ImageIcon, ZoomIn, Pencil } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { TakeAttachmentData } from "./TakeEditorPanel";
+import { SketchPad } from "./SketchPad";
 
 // ─── Lightbox ─────────────────────────────────────────────────────────────────
 
@@ -89,6 +90,7 @@ export function TakeImageGallery({ takeId, attachments, onChange }: Props) {
   const [uploading, setUploading] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
   const [dragOver, setDragOver] = useState(false);
+  const [showSketch, setShowSketch] = useState(false);
 
   const imageAttachments = attachments.filter((a) => a.fileType === "IMAGE");
 
@@ -238,6 +240,16 @@ export function TakeImageGallery({ takeId, attachments, onChange }: Props) {
         </div>
       )}
 
+      {/* Sketch button */}
+      <button
+        type="button"
+        onClick={() => setShowSketch(true)}
+        className="flex items-center gap-2 px-3 py-2 rounded-lg border border-zinc-700 hover:border-zinc-500 text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
+      >
+        <Pencil className="h-3.5 w-3.5" />
+        Add Sketch
+      </button>
+
       {imageAttachments.length === 0 && !uploading && (
         <div className="flex items-center gap-2 text-zinc-600 text-xs py-2">
           <ImageIcon className="h-4 w-4" />
@@ -245,6 +257,15 @@ export function TakeImageGallery({ takeId, attachments, onChange }: Props) {
         </div>
       )}
 
+      {/* Sketch pad */}
+      {showSketch && (
+        <SketchPad
+          takeId={takeId}
+          onSaved={(attachment) => onChange([...attachments, attachment])}
+          onClose={() => setShowSketch(false)}
+        />
+      )}
+
       {/* Lightbox */}
       {lightboxIndex !== null && (
         <Lightbox