[attachments] inline images support

Author: capcom6

frontend/src/app.css

@@ -94,4 +94,9 @@
   .prose a:hover {
     color: hsl(var(--muted-foreground));
   }
+  .prose img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 0.375rem;
+  }
 }

frontend/src/lib/components/CommentForm.svelte

@@ -1,16 +1,94 @@
 <script lang="ts">
   import { Textarea } from "$lib/components/ui/textarea";
   import { Button } from "$lib/components/ui/button";
+  import { uploadInlineImage } from "$lib/upload-image";
   import { toast } from "$lib/toast";
 
   let {
+    taskId = 0,
     onSubmit = async (_content: string) => {},
   }: {
+    taskId?: number;
     onSubmit: (content: string) => Promise<void>;
   } = $props();
 
   let text = $state("");
   let posting = $state(false);
+  let uploading = $state(false);
+  let textareaEl: HTMLTextAreaElement | undefined = $state();
+  let fileInput: HTMLInputElement | undefined = $state();
+
+  function insertAtCursor(insertion: string) {
+    const el = textareaEl;
+    if (!el) return;
+    const start = el.selectionStart ?? text.length;
+    const end = el.selectionEnd ?? start;
+    const before = text.slice(0, start);
+    const after = text.slice(end);
+    text = before + insertion + after;
+    requestAnimationFrame(() => {
+      const pos = start + insertion.length;
+      el.selectionStart = pos;
+      el.selectionEnd = pos;
+      el.focus();
+    });
+  }
+
+  async function uploadAndInsert(file: File) {
+    if (uploading || !taskId) return;
+    uploading = true;
+    try {
+      const result = await uploadInlineImage(taskId, file);
+      const name = result.fileName.replace(/\.[^.]+$/, "").replace(/[[\]\\]/g, "");
+      insertAtCursor(`![${name}](attachment:${result.attachmentId})`);
+      toast.success("Image uploaded");
+    } catch (e: any) {
+      toast.error(e.message || "Image upload failed");
+    } finally {
+      uploading = false;
+    }
+  }
+
+  function handleImagePick(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) uploadAndInsert(file);
+    input.value = "";
+  }
+
+  function handleImagePaste(e: ClipboardEvent) {
+    if (!taskId) return;
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of items) {
+      if (item.kind === "file" && item.type.startsWith("image/")) {
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) uploadAndInsert(file);
+        return;
+      }
+    }
+  }
+
+  async function handleImageDrop(e: DragEvent) {
+    if (!taskId) return;
+    e.preventDefault();
+    const files = e.dataTransfer?.files;
+    if (!files) return;
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      if (file.type.startsWith("image/")) {
+        await uploadAndInsert(file);
+      } else {
+        toast.error(`"${file.name}" is not an image. Only images can be dropped.`);
+      }
+    }
+  }
+
+  function handleDragOver(e: DragEvent) {
+    if (!taskId) return;
+    e.preventDefault();
+  }
 
   async function handleSubmit() {
     if (!text.trim()) return;
@@ -27,11 +105,53 @@
 </script>
 
 <div>
-  <Textarea
-    bind:value={text}
-    placeholder="Add a comment..."
-    class="mb-2 min-h-20"
-  />
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    ondragover={handleDragOver}
+    ondrop={handleImageDrop}
+  >
+    <Textarea
+      bind:value={text}
+      bind:this={textareaEl}
+      onpaste={handleImagePaste}
+      placeholder="Add a comment..."
+      class="mb-2 min-h-20"
+    />
+  </div>
+  <div class="mb-2 flex items-center gap-2">
+    <button
+      type="button"
+      onclick={() => fileInput?.click()}
+      disabled={uploading || !taskId}
+      class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50"
+      title="Insert image"
+    >
+      {#if uploading}
+        <span class="size-3 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
+        Uploading...
+      {:else}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="size-4"
+        ><path
+            fill-rule="evenodd"
+            d="M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+            clip-rule="evenodd"
+          /></svg
+        >
+        Image
+      {/if}
+    </button>
+    <input
+      type="file"
+      bind:this={fileInput}
+      accept="image/png,image/jpeg,image/gif,image/webp"
+      class="hidden"
+      onchange={handleImagePick}
+    />
+  </div>
   <Button
     onclick={handleSubmit}
     disabled={posting || !text.trim()}

frontend/src/lib/components/CommentList.svelte

@@ -4,6 +4,7 @@
   import { Textarea } from "$lib/components/ui/textarea";
   import { parse } from "marked";
   import { processAutoLinks } from "$lib/autolink";
+  import { resolveAttachmentRefs } from "$lib/resolve-attachment-refs";
   import DOMPurify from "dompurify";
   import type { AutoLinkContext } from "$lib/autolink";
   import type { Comment } from "$lib/types/api";
@@ -13,12 +14,14 @@
   let {
     comments = [] as Comment[],
     currentUserId = 0,
+    attachmentsMap = new Map<number, string>(),
     autoLinkCtx = {} as AutoLinkContext,
     onEdit = async (_commentId: number, _content: string) => {},
     onDelete = async (_commentId: number) => {},
   }: {
     comments: Comment[];
     currentUserId: number;
+    attachmentsMap: Map<number, string>;
     autoLinkCtx: AutoLinkContext;
     onEdit: (commentId: number, content: string) => Promise<void>;
     onDelete: (commentId: number) => Promise<void>;
@@ -44,9 +47,10 @@
   function renderMarkdown(text: string): string {
     if (!text) return "";
     return DOMPurify.sanitize(
-      parse(processAutoLinks(text, autoLinkCtx), {
-        async: false,
-      }) as string,
+      parse(
+        processAutoLinks(resolveAttachmentRefs(text, attachmentsMap), autoLinkCtx),
+        { async: false },
+      ) as string,
     );
   }
 

frontend/src/lib/components/TaskForm.svelte

@@ -6,6 +6,8 @@
   import AssigneeCombobox from "$lib/components/AssigneeCombobox.svelte";
   import * as Card from "$lib/components/ui/card";
   import { PRIORITIES, KINDS, STATUSES, type Project } from "$lib/types/api";
+  import { uploadInlineImage } from "$lib/upload-image";
+  import { toast } from "$lib/toast";
 
   interface TaskFormData {
     project_slug: string;
@@ -20,6 +22,7 @@
 
   interface Props {
     mode?: "create" | "edit";
+    taskId?: number;
     projects?: Project[];
     initialTitle?: string;
     initialDescription?: string;
@@ -37,6 +40,7 @@
 
   let {
     mode = "create",
+    taskId = 0,
     projects = [] as Project[],
     initialTitle = "",
     initialDescription = "",
@@ -74,6 +78,82 @@
 
   let saving = $state(false);
   let error = $state("");
+  let uploading = $state(false);
+  let descriptionTextarea: HTMLTextAreaElement | undefined = $state();
+  let fileInput: HTMLInputElement | undefined = $state();
+
+  function insertAtCursor(text: string) {
+    const el = descriptionTextarea;
+    if (!el) return;
+    const start = el.selectionStart ?? description.length;
+    const end = el.selectionEnd ?? start;
+    const before = description.slice(0, start);
+    const after = description.slice(end);
+    description = before + text + after;
+    requestAnimationFrame(() => {
+      const pos = start + text.length;
+      el.selectionStart = pos;
+      el.selectionEnd = pos;
+      el.focus();
+    });
+  }
+
+  async function uploadAndInsert(file: File) {
+    if (uploading) return;
+    if (!taskId) return;
+    uploading = true;
+    try {
+      const result = await uploadInlineImage(taskId, file);
+      const name = result.fileName.replace(/\.[^.]+$/, "").replace(/[[\]\\]/g, "");
+      insertAtCursor(`![${name}](attachment:${result.attachmentId})`);
+      toast.success("Image uploaded");
+    } catch (e: any) {
+      toast.error(e.message || "Image upload failed");
+    } finally {
+      uploading = false;
+    }
+  }
+
+  function handleImagePick(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) uploadAndInsert(file);
+    input.value = "";
+  }
+
+  function handleImagePaste(e: ClipboardEvent) {
+    if (!taskId) return;
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of items) {
+      if (item.kind === "file" && item.type.startsWith("image/")) {
+        e.preventDefault();
+        const file = item.getAsFile();
+        if (file) uploadAndInsert(file);
+        return;
+      }
+    }
+  }
+
+  async function handleImageDrop(e: DragEvent) {
+    if (!taskId) return;
+    e.preventDefault();
+    const files = e.dataTransfer?.files;
+    if (!files) return;
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      if (file.type.startsWith("image/")) {
+        await uploadAndInsert(file);
+      } else {
+        toast.error(`"${file.name}" is not an image. Only images can be dropped.`);
+      }
+    }
+  }
+
+  function handleDragOver(e: DragEvent) {
+    if (!taskId) return;
+    e.preventDefault();
+  }
 
   async function handleSubmit() {
     if (!title.trim()) {
@@ -154,12 +234,62 @@
       </div>
 
       <div class="space-y-1.5">
-        <label for="description" class="text-sm font-medium">Description</label>
-        <Textarea
-          id="description"
-          bind:value={description}
-          placeholder="Optional description (supports Markdown)"
-          class="min-h-32"
+        <div class="flex items-center justify-between">
+          <label for="description" class="text-sm font-medium"
+            >Description</label
+          >
+          {#if taskId > 0}
+            <button
+              type="button"
+              onclick={() => fileInput?.click()}
+              disabled={uploading}
+              class="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50"
+              title="Insert image"
+            >
+              {#if uploading}
+                <span class="size-3 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
+                Uploading...
+              {:else}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  class="size-4"
+                ><path
+                    fill-rule="evenodd"
+                    d="M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                    clip-rule="evenodd"
+                  /></svg
+                >
+                Image
+              {/if}
+            </button>
+          {:else}
+            <span class="text-xs text-muted-foreground"
+              >Image upload available when editing</span
+            >
+          {/if}
+        </div>
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          ondragover={handleDragOver}
+          ondrop={handleImageDrop}
+        >
+          <Textarea
+            id="description"
+            bind:value={description}
+            bind:this={descriptionTextarea}
+            onpaste={handleImagePaste}
+            placeholder="Optional description (supports Markdown)"
+            class="min-h-32"
+          />
+        </div>
+        <input
+          type="file"
+          bind:this={fileInput}
+          accept="image/png,image/jpeg,image/gif,image/webp"
+          class="hidden"
+          onchange={handleImagePick}
         />
       </div>