Image upload in replies, multi-image articles, UX fixes

Add image support to InlineReplyBox (paste, file picker), paste-to-upload in article editor, multi-select for article image toolbar. Fix emoji picker opening off-screen (right-align), enlarge emoji/attach buttons, make note card names clickable to open profile.
2026-05-06 20:29:12 -07:00 · 2026-03-24 16:04:30 +01:00
parent f4e7c2d7cd
commit 4e04ad38c3
6 changed files with 180 additions and 22 deletions
--- a/src/components/article/ArticleEditor.tsx
+++ b/src/components/article/ArticleEditor.tsx
@@ -6,7 +6,7 @@ import { MarkdownToolbar, handleEditorKeyDown } from "./MarkdownToolbar";
 import { useDraftStore, type ArticleDraft } from "../../stores/drafts";
 import { open } from "@tauri-apps/plugin-dialog";
 import { readFile } from "@tauri-apps/plugin-fs";
-import { uploadBytes } from "../../lib/upload";
+import { uploadBytes, uploadImage } from "../../lib/upload";
 import { getCurrentWindow } from "@tauri-apps/api/window";

 export function ArticleEditor() {
@@ -162,6 +162,56 @@ export function ArticleEditor() {
    }
  };

+  const handleArticlePaste = async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const fileFromFiles = Array.from(e.clipboardData.files).find((f) => f.type.startsWith("image/"));
+    if (fileFromFiles) {
+      e.preventDefault();
+      setUploading(true);
+      setError(null);
+      try {
+        const url = await uploadImage(fileFromFiles);
+        const ta = textareaRef.current;
+        if (ta) {
+          const start = ta.selectionStart ?? content.length;
+          const end = ta.selectionEnd ?? content.length;
+          const md = `![image](${url})`;
+          setContent(content.slice(0, start) + md + content.slice(end));
+          setTimeout(() => { ta.selectionStart = ta.selectionEnd = start + md.length; ta.focus(); }, 0);
+        }
+      } catch (err) {
+        setError(`Image upload failed: ${err}`);
+      } finally {
+        setUploading(false);
+      }
+      return;
+    }
+    const items = Array.from(e.clipboardData.items ?? []);
+    const imageItem = items.find((item) => item.type.startsWith("image/"));
+    if (imageItem) {
+      const file = imageItem.getAsFile();
+      if (file) {
+        e.preventDefault();
+        setUploading(true);
+        setError(null);
+        try {
+          const url = await uploadImage(file);
+          const ta = textareaRef.current;
+          if (ta) {
+            const start = ta.selectionStart ?? content.length;
+            const end = ta.selectionEnd ?? content.length;
+            const md = `![image](${url})`;
+            setContent(content.slice(0, start) + md + content.slice(end));
+            setTimeout(() => { ta.selectionStart = ta.selectionEnd = start + md.length; ta.focus(); }, 0);
+          }
+        } catch (err) {
+          setError(`Image upload failed: ${err}`);
+        } finally {
+          setUploading(false);
+        }
+      }
+    }
+  };
+
  // If no active draft, show the draft list
  if (!activeDraftId) {
    return <DraftListView onNewDraft={handleNewDraft} />;
@@ -356,6 +406,7 @@ export function ArticleEditor() {
              value={content}
              onChange={(e) => setContent(e.target.value)}
              onKeyDown={(e) => handleEditorKeyDown(e, textareaRef, content, setContent)}
+              onPaste={handleArticlePaste}
              placeholder="Write your article in Markdown…"
              className="w-full h-full min-h-[400px] bg-transparent text-text text-[14px] leading-relaxed placeholder:text-text-dim resize-none focus:outline-none font-mono"
            />
--- a/src/components/article/MarkdownToolbar.tsx
+++ b/src/components/article/MarkdownToolbar.tsx
@@ -141,27 +141,29 @@ export function MarkdownToolbar({ textareaRef, content, setContent, setUploading
  const handleImageUpload = async () => {
    try {
      const selected = await open({
-        multiple: false,
+        multiple: true,
        filters: [
          { name: "Images", extensions: ["jpg", "jpeg", "png", "gif", "webp", "svg"] },
        ],
      });
      if (!selected) return;
-      const filePath = typeof selected === "string" ? selected : selected;
+      const paths = Array.isArray(selected) ? selected : [selected];
      setUploading?.(true);
      setError?.(null);
      try {
-        const bytes = await readFile(filePath);
-        const fileName = filePath.split(/[\\/]/).pop() || "image.png";
-        const ext = fileName.split(".").pop()?.toLowerCase() || "png";
-        const mimeMap: Record<string, string> = {
-          jpg: "image/jpeg", jpeg: "image/jpeg", png: "image/png", gif: "image/gif",
-          webp: "image/webp", svg: "image/svg+xml",
-        };
-        const url = await uploadBytes(new Uint8Array(bytes), fileName, mimeMap[ext] || "image/png");
-        const textarea = textareaRef.current;
-        if (textarea) {
-          applyMarkdown(textarea, "image", content, setContent, `![${fileName}](${url})`);
+        for (const filePath of paths) {
+          const bytes = await readFile(filePath);
+          const fileName = filePath.split(/[\\/]/).pop() || "image.png";
+          const ext = fileName.split(".").pop()?.toLowerCase() || "png";
+          const mimeMap: Record<string, string> = {
+            jpg: "image/jpeg", jpeg: "image/jpeg", png: "image/png", gif: "image/gif",
+            webp: "image/webp", svg: "image/svg+xml",
+          };
+          const url = await uploadBytes(new Uint8Array(bytes), fileName, mimeMap[ext] || "image/png");
+          const textarea = textareaRef.current;
+          if (textarea) {
+            applyMarkdown(textarea, "image", content, setContent, `![${fileName}](${url})`);
+          }
        }
      } finally {
        setUploading?.(false);
--- a/src/components/feed/ComposeBox.tsx
+++ b/src/components/feed/ComposeBox.tsx
@@ -244,7 +244,7 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
                <button
                  onClick={() => setShowEmoji((v) => !v)}
                  title="Insert emoji"
-                  className="text-text-dim hover:text-text text-[13px] transition-colors"
+                  className="text-text-dim hover:text-text text-[16px] transition-colors"
                >
                  ☺
                </button>
@@ -259,7 +259,7 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
                onClick={handleFilePicker}
                disabled={uploading}
                title="Attach image or video"
-                className="text-text-dim hover:text-text text-[13px] transition-colors disabled:opacity-30"
+                className="text-text-dim hover:text-text text-[16px] transition-colors disabled:opacity-30"
              >
                +
              </button>
--- a/src/components/feed/InlineReplyBox.tsx
+++ b/src/components/feed/InlineReplyBox.tsx
@@ -1,8 +1,11 @@
 import { useState, useRef } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { publishReply } from "../../lib/nostr";
+import { uploadImage, uploadBytes } from "../../lib/upload";
 import { useReplyCount } from "../../hooks/useReplyCount";
 import { EmojiPicker } from "../shared/EmojiPicker";
+import { open } from "@tauri-apps/plugin-dialog";
+import { readFile } from "@tauri-apps/plugin-fs";

 interface InlineReplyBoxProps {
  event: NDKEvent;
@@ -16,9 +19,95 @@ export function InlineReplyBox({ event, name, rootEvent }: InlineReplyBoxProps)
  const [replyError, setReplyError] = useState<string | null>(null);
  const [replySent, setReplySent] = useState(false);
  const [showReplyEmoji, setShowReplyEmoji] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
  const replyRef = useRef<HTMLTextAreaElement>(null);
  const [, adjustReplyCount] = useReplyCount(event.id);

+  const insertAtCursor = (str: string) => {
+    const ta = replyRef.current;
+    if (ta) {
+      const start = ta.selectionStart ?? replyText.length;
+      const end = ta.selectionEnd ?? replyText.length;
+      setReplyText(replyText.slice(0, start) + str + replyText.slice(end));
+      setTimeout(() => { ta.selectionStart = ta.selectionEnd = start + str.length; ta.focus(); }, 0);
+    } else {
+      setReplyText((t) => t + str);
+    }
+  };
+
+  const handleImageUpload = async (file: File) => {
+    setUploading(true);
+    setUploadError(null);
+    try {
+      const url = await uploadImage(file);
+      insertAtCursor(url);
+    } catch (err) {
+      setUploadError(`Upload failed: ${err}`);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handlePaste = async (e: React.ClipboardEvent<HTMLTextAreaElement>) => {
+    const fileFromFiles = Array.from(e.clipboardData.files).find((f) => f.type.startsWith("image/"));
+    if (fileFromFiles) {
+      e.preventDefault();
+      handleImageUpload(fileFromFiles);
+      return;
+    }
+    const items = Array.from(e.clipboardData.items ?? []);
+    const imageItem = items.find((item) => item.type.startsWith("image/"));
+    if (imageItem) {
+      const file = imageItem.getAsFile();
+      if (file) {
+        e.preventDefault();
+        handleImageUpload(file);
+        return;
+      }
+    }
+    const pastedText = e.clipboardData.getData("text/plain");
+    if (pastedText && /\.(jpg|jpeg|png|gif|webp|svg|mp4|webm|mov)$/i.test(pastedText.trim()) && /^(\/|[A-Z]:\\)/.test(pastedText.trim())) {
+      e.preventDefault();
+      setUploading(true);
+      setUploadError(null);
+      try {
+        const bytes = await readFile(pastedText.trim());
+        const fileName = pastedText.trim().split(/[\\/]/).pop() || "file";
+        const ext = fileName.split(".").pop()?.toLowerCase() || "";
+        const mimeMap: Record<string, string> = { jpg: "image/jpeg", jpeg: "image/jpeg", png: "image/png", gif: "image/gif", webp: "image/webp" };
+        const url = await uploadBytes(new Uint8Array(bytes), fileName, mimeMap[ext] || "application/octet-stream");
+        insertAtCursor(url);
+      } catch (err) {
+        setUploadError(`Upload failed: ${err}`);
+      } finally {
+        setUploading(false);
+      }
+    }
+  };
+
+  const handleFilePicker = async () => {
+    try {
+      const selected = await open({
+        multiple: false,
+        filters: [{ name: "Media", extensions: ["jpg", "jpeg", "png", "gif", "webp", "svg", "mp4", "webm", "mov"] }],
+      });
+      if (!selected) return;
+      setUploading(true);
+      setUploadError(null);
+      const bytes = await readFile(selected);
+      const fileName = selected.split(/[\\/]/).pop() || "file";
+      const ext = fileName.split(".").pop()?.toLowerCase() || "";
+      const mimeMap: Record<string, string> = { jpg: "image/jpeg", jpeg: "image/jpeg", png: "image/png", gif: "image/gif", webp: "image/webp", mp4: "video/mp4", webm: "video/webm", mov: "video/quicktime" };
+      const url = await uploadBytes(new Uint8Array(bytes), fileName, mimeMap[ext] || "application/octet-stream");
+      insertAtCursor(url);
+    } catch (err) {
+      setUploadError(`Upload failed: ${err}`);
+    } finally {
+      setUploading(false);
+    }
+  };
+
  const handleReplySubmit = async () => {
    if (!replyText.trim() || replying) return;
    setReplying(true);
@@ -51,18 +140,34 @@ export function InlineReplyBox({ event, name, rootEvent }: InlineReplyBoxProps)
        value={replyText}
        onChange={(e) => setReplyText(e.target.value)}
        onKeyDown={handleReplyKeyDown}
+        onPaste={handlePaste}
        placeholder={`Reply to ${name}…`}
        rows={2}
        className="w-full bg-transparent text-text text-[12px] placeholder:text-text-dim resize-none focus:outline-none"
        autoFocus
      />
      {replyError && <p className="text-danger text-[10px] mb-1">{replyError}</p>}
+      {uploadError && <p className="text-danger text-[10px] mb-1">{uploadError}</p>}
      <div className="flex items-center justify-end gap-2 mt-1">
+        {uploading && (
+          <span className="inline-flex items-center gap-1 text-text-dim text-[10px]">
+            <span className="w-3 h-3 border border-accent border-t-transparent rounded-full animate-spin" />
+            uploading…
+          </span>
+        )}
+        <button
+          onClick={handleFilePicker}
+          disabled={uploading}
+          title="Attach image or video"
+          className="text-text-dim hover:text-text text-[16px] transition-colors disabled:opacity-30"
+        >
+          +
+        </button>
        <div className="relative">
          <button
            onClick={() => setShowReplyEmoji((v) => !v)}
            title="Insert emoji"
-            className="text-text-dim hover:text-text text-[12px] transition-colors"
+            className="text-text-dim hover:text-text text-[16px] transition-colors"
          >
            ☺
          </button>
@@ -86,7 +191,7 @@ export function InlineReplyBox({ event, name, rootEvent }: InlineReplyBoxProps)
        <span className="text-text-dim text-[10px]">Ctrl+Enter</span>
        <button
          onClick={handleReplySubmit}
-          disabled={!replyText.trim() || replying}
+          disabled={!replyText.trim() || replying || uploading}
          className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
        >
          {replySent ? "replied ✓" : replying ? "posting…" : "reply"}
--- a/src/components/feed/NoteCard.tsx
+++ b/src/components/feed/NoteCard.tsx
@@ -83,10 +83,10 @@ export function NoteCard({ event, focused, onReplyInThread }: NoteCardProps) {
        {/* Content */}
        <div className="min-w-0 flex-1">
          <div className="flex items-baseline gap-2 mb-0.5">
-            <span
-              className="text-text font-medium truncate text-[13px] cursor-pointer hover:text-accent transition-colors"
+            <button
+              className="text-text font-medium truncate text-[13px] cursor-pointer hover:text-accent transition-colors text-left"
              onClick={() => openProfile(event.pubkey)}
-            >{name}</span>
+            >{name}</button>
            {nip05 && (
              <span className={`text-[10px] truncate max-w-40 ${verified === "valid" ? "text-success" : "text-text-dim"}`}>
                {verified === "valid" ? "✓ " : ""}{nip05}
--- a/src/components/shared/EmojiPicker.tsx
+++ b/src/components/shared/EmojiPicker.tsx
@@ -19,7 +19,7 @@ export function EmojiPicker({ onSelect, onClose }: EmojiPickerProps) {
  return (
    <>
      <div className="fixed inset-0 z-[9]" onClick={onClose} />
-      <div className="absolute bottom-7 left-0 bg-bg-raised border border-border shadow-lg z-10 w-64">
+      <div className="absolute bottom-7 right-0 bg-bg-raised border border-border shadow-lg z-10 w-64">
        {/* Group tabs */}
        <div className="flex border-b border-border">
          {EMOJI_GROUPS.map((g, i) => (