feat: support file and image attachments (#98)

* upload & view attachments to particles

* allow download of attachments

js/src/features/compose/recording-overlay.tsx

@@ -1,7 +1,12 @@
 import { useEffect, useRef, useState } from "react";
+import { Paperclip } from "lucide-react";
 import type { RecordingMode } from "@/hooks/use-recording-mode";
 import { AudioLevelBars } from "@/components/audio/audio-level-bars";
 import { useAudioSource } from "@/components/audio/use-audio-source";
+import { AttachmentStrip } from "@/features/compose/attachment-strip";
+import type { PendingAttachment } from "@/features/compose/attachment-strip";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 
 interface RecordingOverlayProps {
   step: "recording" | "reviewing";
@@ -10,6 +15,16 @@ interface RecordingOverlayProps {
   reviewBlob: Blob | null;
   error: string | null;
   onClose: () => void;
+  attachments: PendingAttachment[];
+  onRemoveAttachment: (id: string) => void;
+  onAddFiles: () => void;
+  isDragging: boolean;
+  dropZoneProps: {
+    onDragOver: (e: React.DragEvent) => void;
+    onDragEnter: (e: React.DragEvent) => void;
+    onDragLeave: (e: React.DragEvent) => void;
+    onDrop: (e: React.DragEvent) => void;
+  };
 }
 
 function RecordingTimer() {
@@ -99,6 +114,11 @@ export function RecordingOverlay({
   reviewBlob,
   error,
   onClose,
+  attachments,
+  onRemoveAttachment,
+  onAddFiles,
+  isDragging,
+  dropZoneProps,
 }: RecordingOverlayProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const recordingAudioSource = useAudioSource(mediaStream ?? null);
@@ -122,7 +142,13 @@ export function RecordingOverlay({
   const isLoading = isRecording && !mediaStream;
 
   return (
-    <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/90">
+    <div
+      className={cn(
+        "absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/90",
+        isReviewing && isDragging && "ring-2 ring-inset ring-white/30",
+      )}
+      {...(isReviewing ? dropZoneProps : {})}
+    >
       {/* Loading state */}
       {isLoading && (
         <div className="z-10 flex flex-col items-center gap-2">
@@ -191,19 +217,45 @@ export function RecordingOverlay({
       )}
 
       {isReviewing && (
-        <div className="absolute bottom-8 z-10 flex items-center gap-4 text-sm text-white/50">
-          <span>
-            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-              Enter
-            </kbd>{" "}
-            next
-          </span>
-          <span>
-            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
-              Q
-            </kbd>{" "}
-            cancel
-          </span>
+        <div className="absolute bottom-8 z-10 flex flex-col items-center gap-3">
+          {attachments.length > 0 && (
+            <div className="px-4">
+              <AttachmentStrip
+                attachments={attachments}
+                onRemove={onRemoveAttachment}
+                onAddClick={onAddFiles}
+              />
+            </div>
+          )}
+          <div className="flex items-center gap-4 text-sm text-white/50">
+            <span>
+              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+                Enter
+              </kbd>{" "}
+              next
+            </span>
+            <span>
+              <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
+                Q
+              </kbd>{" "}
+              cancel
+            </span>
+            <span>
+              <Button
+                variant="ghost"
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onAddFiles();
+                }}
+                title="Attach files"
+              >
+                <Paperclip className="size-4" />
+                attach
+              </Button>
+            </span>
+
+          </div>
         </div>
       )}