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.

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>

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

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}