M6 1900: any-file attachments + audio memos (broaden beyond images)

A note can now carry any file, not just images — PDFs, documents, audio
memos, etc. "Dump anything" capture.

Backend:
- note_attachments.filename (migration 0019) records the original name for
  download + display.
- Upload drops the image-only mime gate: accepts any type, derives the
  storage extension from the filename, and enforces a DB-backed per-file
  cap — new setting max_attachment_mb (default 25, rule 25). App body
  ceiling raised 12→64 MB (also lifts the import-zip / sync-push limits);
  the per-file cap is the effective attachment limit.
- Serve sets Content-Disposition: images inline, everything else downloads
  with its original (header-sanitized) filename.
- Import (native + Keep Takeout) now brings in ANY attachment, not just
  images — completing the Keep audio-memo gap; preserves filename + sha256.
- Attachment metadata (delta feed + REST) carries filename.

Frontend:
- Editor renders attachments by kind: images inline (thumbnail), audio via
  an inline <audio> player, any other file as a download chip (paperclip +
  filename + size). File picker accepts any type; "Attach a file".
- Card previews the first image; non-image files show as compact chips.

Tests (DB-free): _safe_filename, _attachment_ext, _header_filename.

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

@@ -26,6 +26,7 @@ const paths: Record<string, string> = {
   download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',
   upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>',
   device: '<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>',
+  paperclip: '<path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/>',
   copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
 };
 </script>

frontend/src/components/NoteCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, ref, watch } from "vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
 import { useNotesStore } from "../stores/notes";
 import {
   LABEL_CHIP_CLASSES,
@@ -24,6 +24,10 @@ const emit = defineEmits<{
 }>();
 const notes = useNotesStore();
 
+// The card previews the first image inline; non-image files show as compact chips.
+const firstImage = computed(() => props.note.attachments.find((a) => a.mime.startsWith("image/")));
+const otherAttachments = computed(() => props.note.attachments.filter((a) => !a.mime.startsWith("image/")));
+
 const root = ref<HTMLElement | null>(null);
 
 // --- Drag-to-reorder. Native HTML5 DnD, gated behind an explicit grip handle so
@@ -139,14 +143,24 @@ onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown))
     </button>
 
     <img
-      v-if="note.attachments.length"
-      :src="note.attachments[0].url"
+      v-if="firstImage"
+      :src="firstImage.url"
       alt=""
       loading="lazy"
       decoding="async"
       class="mb-2 max-h-48 w-full cursor-pointer rounded-lg object-cover"
       @click="emit('open', note)"
     />
+    <div v-if="otherAttachments.length" class="mb-2 flex flex-wrap gap-1">
+      <span
+        v-for="att in otherAttachments"
+        :key="att.id"
+        class="inline-flex max-w-full items-center gap-1 rounded-md bg-black/5 px-1.5 py-0.5 text-xs text-neutral-500 dark:bg-white/10 dark:text-neutral-400"
+      >
+        <Icon name="paperclip" />
+        <span class="max-w-[140px] truncate">{{ att.filename || "file" }}</span>
+      </span>
+    </div>
 
     <!-- Checklist notes can't nest interactive controls in a <button>, so use a
          focusable div; text notes keep a semantic button. -->

frontend/src/components/NoteEditor.vue

@@ -423,9 +423,20 @@ async function toggleKind() {
 }
 
 // ---- attachments ----
-function pickImage() {
+function pickFile() {
   fileInput.value?.click();
 }
+function attKind(mime: string): "image" | "audio" | "file" {
+  if (mime.startsWith("image/")) return "image";
+  if (mime.startsWith("audio/")) return "audio";
+  return "file";
+}
+function fmtSize(bytes?: number): string {
+  if (!bytes) return "";
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
 async function uploadFile(file: File) {
   const id = await ensureDraft();
   if (!id) return;
@@ -433,7 +444,7 @@ async function uploadFile(file: File) {
   try {
     await notes.uploadAttachment(id, file);
   } catch (e) {
-    uploadError.value = (e as { error?: string }).error ?? "Could not upload image.";
+    uploadError.value = (e as { error?: string }).error ?? "Could not upload file.";
   }
 }
 async function onFileChange(e: Event) {
@@ -541,18 +552,55 @@ defineExpose({ open });
       @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="" loading="lazy" decoding="async" 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(liveNote.id, att.id)"
+        <div v-if="liveNote.attachments.length" class="flex flex-wrap items-center gap-2">
+          <template v-for="att in liveNote.attachments" :key="att.id">
+            <!-- Image → inline thumbnail -->
+            <div v-if="attKind(att.mime) === 'image'" class="group/att relative">
+              <img :src="att.url" alt="" loading="lazy" decoding="async" 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 attachment"
+                @click="notes.deleteAttachment(liveNote.id, att.id)"
+              >
+                ×
+              </button>
+            </div>
+            <!-- Audio → inline player -->
+            <div
+              v-else-if="attKind(att.mime) === 'audio'"
+              class="flex items-center gap-2 rounded-lg border border-neutral-200 px-2 py-1 dark:border-neutral-700"
             >
-              ×
-            </button>
-          </div>
+              <audio controls :src="att.url" class="h-8 max-w-[220px]"></audio>
+              <button
+                type="button"
+                class="text-neutral-400 hover:text-red-500"
+                aria-label="Remove attachment"
+                @click="notes.deleteAttachment(liveNote.id, att.id)"
+              >
+                ×
+              </button>
+            </div>
+            <!-- Any other file → download chip -->
+            <a
+              v-else
+              :href="att.url"
+              download
+              class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-xs hover:bg-neutral-50 dark:border-neutral-700 dark:hover:bg-neutral-800"
+            >
+              <Icon name="paperclip" />
+              <span class="max-w-[160px] truncate">{{ att.filename || "file" }}</span>
+              <span v-if="att.size" class="text-neutral-400">{{ fmtSize(att.size) }}</span>
+              <button
+                type="button"
+                class="ml-1 text-neutral-400 hover:text-red-500"
+                aria-label="Remove attachment"
+                @click.prevent.stop="notes.deleteAttachment(liveNote.id, att.id)"
+              >
+                ×
+              </button>
+            </a>
+          </template>
         </div>
         <p v-if="uploadError" class="text-xs text-red-600 dark:text-red-400">{{ uploadError }}</p>
 
@@ -710,19 +758,13 @@ defineExpose({ open });
             v-if="richEnabled && !liveNote.trashed"
             type="button"
             class="icon-btn"
-            title="Add image"
-            aria-label="Add image"
-            @click="pickImage"
+            title="Attach a file"
+            aria-label="Attach a file"
+            @click="pickFile"
           >
-            <Icon name="image" />
+            <Icon name="paperclip" />
           </button>
-          <input
-            ref="fileInput"
-            type="file"
-            accept="image/png,image/jpeg,image/gif,image/webp"
-            class="hidden"
-            @change="onFileChange"
-          />
+          <input ref="fileInput" type="file" class="hidden" @change="onFileChange" />
           <button
             v-if="!liveNote.trashed"
             type="button"