M2 attachments: image upload + owner-scoped media serving

- Migration 0007: note_attachments (path/mime/size). Upload POST
  /api/notes/<id>/attachments (multipart, png/jpeg/gif/webp, 12MB cap via
  MAX_CONTENT_LENGTH) stored under Config.media_root() (first use of DATA_DIR);
  owner/ACL-scoped GET serves the file (nosniff); DELETE removes row + file.
  Note responses include attachments[].
- Frontend: notes store uploadAttachment (FormData)/deleteAttachment; editor
  image button + paste-to-upload + thumbnail grid with remove; card shows the
  first image as a cover.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm

frontend/src/components/Icon.vue

@@ -15,6 +15,7 @@ const paths: Record<string, string> = {
   plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
   check: '<path d="M20 6 9 17l-5-5"/>',
   checkbox: '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="m9 12 2 2 4-4"/>',
+  image: '<rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
 };
 </script>
 

frontend/src/components/NoteCard.vue

@@ -19,6 +19,14 @@ function cardClass(color: NoteColor): string {
     class="group relative mb-4 break-inside-avoid rounded-xl border p-3 shadow-sm transition hover:shadow-md"
     :class="cardClass(note.color)"
   >
+    <img
+      v-if="note.attachments.length"
+      :src="note.attachments[0].url"
+      alt=""
+      class="mb-2 max-h-48 w-full cursor-pointer rounded-lg object-cover"
+      @click="emit('open', note)"
+    />
+
     <!-- Checklist notes can't nest interactive controls in a <button>, so use a
          focusable div; text notes keep a semantic button. -->
     <template v-if="note.kind === 'list'">
@@ -48,7 +56,9 @@ function cardClass(color: NoteColor): string {
       <p v-if="note.body" class="whitespace-pre-wrap break-words text-sm text-neutral-700 dark:text-neutral-300">
         {{ note.body }}
       </p>
-      <p v-if="!note.title && !note.body" class="text-sm italic text-neutral-400">Empty note</p>
+      <p v-if="!note.title && !note.body && !note.attachments.length" class="text-sm italic text-neutral-400">
+        Empty note
+      </p>
     </button>
 
     <div v-if="note.labels.length" class="mt-2 flex flex-wrap gap-1">

frontend/src/components/NoteEditor.vue

@@ -67,6 +67,38 @@ async function toggleKind() {
   await notes.setKind(props.note.id, "list");
 }
 
+const fileInput = ref<HTMLInputElement | null>(null);
+const uploadError = ref("");
+
+function pickImage() {
+  fileInput.value?.click();
+}
+
+async function uploadFile(file: File) {
+  uploadError.value = "";
+  try {
+    await notes.uploadAttachment(props.note.id, file);
+  } catch (e) {
+    uploadError.value = (e as { error?: string }).error ?? "Could not upload image.";
+  }
+}
+
+async function onFileChange(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (file) await uploadFile(file);
+  input.value = "";
+}
+
+async function onPaste(e: ClipboardEvent) {
+  const item = Array.from(e.clipboardData?.items ?? []).find((i) => i.type.startsWith("image/"));
+  const file = item?.getAsFile();
+  if (file) {
+    e.preventDefault();
+    await uploadFile(file);
+  }
+}
+
 async function close() {
   const changed =
     (title.value.trim() || null) !== (props.note.title ?? null) ||
@@ -94,8 +126,23 @@ async function act(fn: () => Promise<void>) {
       role="dialog"
       aria-modal="true"
       @keydown.esc="close"
+      @paste="onPaste"
     >
       <div class="flex flex-col gap-2 p-4">
+        <div v-if="liveNote.attachments.length" class="flex flex-wrap gap-2">
+          <div v-for="att in liveNote.attachments" :key="att.id" class="group/att relative">
+            <img :src="att.url" alt="" class="h-24 w-24 rounded-lg object-cover" />
+            <button
+              type="button"
+              class="absolute right-1 top-1 rounded-full bg-black/50 px-1.5 text-white opacity-0 transition group-hover/att:opacity-100"
+              aria-label="Remove image"
+              @click="notes.deleteAttachment(note.id, att.id)"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+        <p v-if="uploadError" class="text-xs text-red-600 dark:text-red-400">{{ uploadError }}</p>
         <input
           v-model="title"
           type="text"
@@ -134,6 +181,23 @@ async function act(fn: () => Promise<void>) {
       <div class="flex items-center justify-between gap-2 border-t border-neutral-100 px-3 py-2 dark:border-neutral-800">
         <ColorPicker v-model="color" />
         <div class="flex items-center gap-0.5">
+          <button
+            v-if="!note.trashed"
+            type="button"
+            class="icon-btn"
+            title="Add image"
+            aria-label="Add image"
+            @click="pickImage"
+          >
+            <Icon name="image" />
+          </button>
+          <input
+            ref="fileInput"
+            type="file"
+            accept="image/png,image/jpeg,image/gif,image/webp"
+            class="hidden"
+            @change="onFileChange"
+          />
           <button
             v-if="!note.trashed"
             type="button"

frontend/src/stores/notes.ts

@@ -18,6 +18,12 @@ export interface ChecklistItem {
   position: number;
 }
 
+export interface Attachment {
+  id: string;
+  url: string;
+  mime: string;
+}
+
 export interface Note {
   id: string;
   title: string | null;
@@ -29,6 +35,7 @@ export interface Note {
   trashed: boolean;
   labels: NoteLabel[];
   items: ChecklistItem[];
+  attachments: Attachment[];
   created_at: string | null;
   updated_at: string | null;
 }
@@ -113,6 +120,25 @@ export const useNotesStore = defineStore("notes", () => {
     reconcile(await api.del<Note>(`/api/notes/${id}/items/${itemId}`));
   }
 
+  async function uploadAttachment(id: string, file: File): Promise<void> {
+    const form = new FormData();
+    form.append("file", file);
+    const resp = await fetch(`/api/notes/${id}/attachments`, { method: "POST", credentials: "include", body: form });
+    const data: unknown = await resp.json().catch(() => ({}));
+    if (!resp.ok) {
+      const message =
+        typeof data === "object" && data !== null && "error" in data
+          ? String((data as { error: unknown }).error)
+          : "Upload failed.";
+      throw { error: message, status: resp.status };
+    }
+    reconcile(data as Note);
+  }
+
+  async function deleteAttachment(id: string, attId: string): Promise<void> {
+    reconcile(await api.del<Note>(`/api/notes/${id}/attachments/${attId}`));
+  }
+
   async function trash(id: string): Promise<void> {
     reconcile(await api.post<Note>(`/api/notes/${id}/trash`));
   }
@@ -143,6 +169,8 @@ export const useNotesStore = defineStore("notes", () => {
     addItem,
     updateItem,
     deleteItem,
+    uploadAttachment,
+    deleteAttachment,
     trash,
     restore,
     deleteForever,