Fix test bugs: mute filtering, notification toggles, external links, emoji picker

- Fix mute button having no effect in Media Feed (missing filter)
- Fix notification toggle switches overlapping labels (sizing + shrink-0)
- Fix external links not opening in system browser (use Tauri opener plugin)
- Fix trending refresh showing no visual feedback (clear list on force refresh)
- Fix emoji reactions inaccessible behind WebKitGTK context menu (visible + button)
- Add emoji picker to compose box, inline reply, and thread reply
- New shared EmojiPicker component with categorized emoji groups

src/components/feed/ComposeBox.tsx

@@ -6,6 +6,7 @@ import { useFeedStore } from "../../stores/feed";
 import { shortenPubkey } from "../../lib/utils";
 import { open } from "@tauri-apps/plugin-dialog";
 import { readFile } from "@tauri-apps/plugin-fs";
+import { EmojiPicker } from "../shared/EmojiPicker";
 
 const COMPOSE_DRAFT_KEY = "wrystr_compose_draft";
 
@@ -17,6 +18,7 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
   const [publishing, setPublishing] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showEmoji, setShowEmoji] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const { profile, npub } = useUserStore();
@@ -40,20 +42,20 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
   const overLimit = charCount > 4000;
   const canPost = text.trim().length > 0 && !publishing && !uploading;
 
-  // Insert a URL at the current cursor position in the textarea
-  const insertUrl = (url: string) => {
+  // Insert text at the current cursor position in the textarea
+  const insertAtCursor = (str: string) => {
     const ta = textareaRef.current;
     if (ta) {
       const start = ta.selectionStart ?? text.length;
       const end = ta.selectionEnd ?? text.length;
-      const next = text.slice(0, start) + url + text.slice(end);
+      const next = text.slice(0, start) + str + text.slice(end);
       setText(next);
       setTimeout(() => {
-        ta.selectionStart = ta.selectionEnd = start + url.length;
+        ta.selectionStart = ta.selectionEnd = start + str.length;
         ta.focus();
       }, 0);
     } else {
-      setText((t) => t + url);
+      setText((t) => t + str);
     }
   };
 
@@ -63,7 +65,7 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
     setError(null);
     try {
       const url = await uploadImage(file);
-      insertUrl(url);
+      insertAtCursor(url);
     } catch (err) {
       setError(`Image upload failed: ${err}`);
     } finally {
@@ -86,7 +88,7 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
       };
       const mimeType = mimeMap[ext] || "application/octet-stream";
       const url = await uploadBytes(new Uint8Array(bytes), fileName, mimeType);
-      insertUrl(url);
+      insertAtCursor(url);
     } catch (err) {
       setError(`Upload failed: ${err}`);
     } finally {
@@ -238,6 +240,21 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
               )}
             </span>
             <div className="flex items-center gap-3">
+              <div className="relative">
+                <button
+                  onClick={() => setShowEmoji((v) => !v)}
+                  title="Insert emoji"
+                  className="text-text-dim hover:text-text text-[13px] transition-colors"
+                >
+                  ☺
+                </button>
+                {showEmoji && (
+                  <EmojiPicker
+                    onSelect={(emoji) => insertAtCursor(emoji)}
+                    onClose={() => setShowEmoji(false)}
+                  />
+                )}
+              </div>
               <button
                 onClick={handleFilePicker}
                 disabled={uploading}

src/components/feed/NoteCard.tsx

@@ -15,6 +15,7 @@ import { publishReaction, publishReply, publishRepost, getNDK, fetchNoteById } f
 import { NoteContent } from "./NoteContent";
 import { ZapModal } from "../zap/ZapModal";
 import { QuoteModal } from "./QuoteModal";
+import { EmojiPicker } from "../shared/EmojiPicker";
 
 interface NoteCardProps {
   event: NDKEvent;
@@ -77,6 +78,7 @@ export function NoteCard({ event, focused }: NoteCardProps) {
   const replyRef = useRef<HTMLTextAreaElement>(null);
   const [showZap, setShowZap] = useState(false);
   const [showQuote, setShowQuote] = useState(false);
+  const [showReplyEmoji, setShowReplyEmoji] = useState(false);
   const [reposting, setReposting] = useState(false);
   const [reposted, setReposted] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -257,10 +259,9 @@ export function NoteCard({ event, focused }: NoteCardProps) {
               >
                 reply{replyCount !== null && replyCount > 0 ? ` ${replyCount}` : ""}
               </button>
-              <div className="relative">
+              <div className="relative flex items-center gap-1">
                 <button
                   onClick={() => handleReact("❤️")}
-                  onContextMenu={(e) => { e.preventDefault(); if (!liked && !liking) setShowEmojiPicker((v) => !v); }}
                   disabled={liked || liking}
                   className={`text-[11px] transition-colors ${
                     liked ? "text-accent" : "text-text-dim hover:text-accent"
@@ -268,6 +269,15 @@ export function NoteCard({ event, focused }: NoteCardProps) {
                 >
                   {liked ? "♥" : "♡"}{reactionCount !== null && reactionCount > 0 ? ` ${reactionCount}` : liked ? " liked" : " like"}
                 </button>
+                {!liked && !liking && (
+                  <button
+                    onClick={() => setShowEmojiPicker((v) => !v)}
+                    className="text-[10px] text-text-dim hover:text-accent transition-colors opacity-0 group-hover/card:opacity-100"
+                    title="React with emoji"
+                  >
+                    +
+                  </button>
+                )}
                 {showEmojiPicker && (
                   <>
                     <div className="fixed inset-0 z-[9]" onClick={() => setShowEmojiPicker(false)} />
@@ -383,6 +393,31 @@ export function NoteCard({ event, focused }: NoteCardProps) {
               />
               {replyError && <p className="text-danger text-[10px] mb-1">{replyError}</p>}
               <div className="flex items-center justify-end gap-2 mt-1">
+                <div className="relative">
+                  <button
+                    onClick={() => setShowReplyEmoji((v) => !v)}
+                    title="Insert emoji"
+                    className="text-text-dim hover:text-text text-[12px] transition-colors"
+                  >
+                    ☺
+                  </button>
+                  {showReplyEmoji && (
+                    <EmojiPicker
+                      onSelect={(emoji) => {
+                        const ta = replyRef.current;
+                        if (ta) {
+                          const start = ta.selectionStart ?? replyText.length;
+                          const end = ta.selectionEnd ?? replyText.length;
+                          setReplyText(replyText.slice(0, start) + emoji + replyText.slice(end));
+                          setTimeout(() => { ta.selectionStart = ta.selectionEnd = start + emoji.length; ta.focus(); }, 0);
+                        } else {
+                          setReplyText((t) => t + emoji);
+                        }
+                      }}
+                      onClose={() => setShowReplyEmoji(false)}
+                    />
+                  )}
+                </div>
                 <span className="text-text-dim text-[10px]">Ctrl+Enter</span>
                 <button
                   onClick={handleReplySubmit}