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/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"