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}

src/components/media/MediaFeed.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { fetchGlobalFeed } from "../../lib/nostr";
+import { useMuteStore } from "../../stores/mute";
 import { parseContent, ContentSegment } from "../../lib/parsing";
 import { NoteCard } from "../feed/NoteCard";
 import { SkeletonNoteList } from "../shared/Skeleton";
@@ -23,6 +24,7 @@ export function MediaFeed() {
   const [allNotes, setAllNotes] = useState<NDKEvent[]>([]);
   const [loading, setLoading] = useState(true);
   const [tab, setTab] = useState<MediaTab>("all");
+  const { mutedPubkeys, contentMatchesMutedKeyword } = useMuteStore();
 
   useEffect(() => {
     setLoading(true);
@@ -35,9 +37,10 @@ export function MediaFeed() {
       .finally(() => setLoading(false));
   }, []);
 
-  const filtered = tab === "all"
+  const filtered = (tab === "all"
     ? allNotes
-    : allNotes.filter((n) => hasMediaType(n.content, MEDIA_TYPES[tab]));
+    : allNotes.filter((n) => hasMediaType(n.content, MEDIA_TYPES[tab]))
+  ).filter((n) => !mutedPubkeys.includes(n.pubkey) && !contentMatchesMutedKeyword(n.content));
 
   return (
     <div className="h-full flex flex-col">

src/components/shared/EmojiPicker.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+
+const EMOJI_GROUPS: { label: string; emojis: string[] }[] = [
+  { label: "Frequent", emojis: ["😂", "❤️", "🔥", "👍", "🤙", "⚡", "🫡", "👀", "🙏", "😎", "🎉", "💯"] },
+  { label: "Faces", emojis: ["😀", "😁", "😅", "🤣", "😊", "😇", "🥰", "😍", "🤩", "😘", "😜", "🤔", "😏", "😢", "😤", "🤯", "😱", "🥺", "😴", "🤡"] },
+  { label: "Gestures", emojis: ["👋", "🤝", "👏", "🤟", "✌️", "🤞", "💪", "🙌", "👊", "✊", "🫶", "🫂"] },
+  { label: "Objects", emojis: ["☕", "🍺", "🎵", "📝", "💡", "🔑", "🛠️", "📌", "🏆", "🎯", "🚀", "💎"] },
+  { label: "Symbols", emojis: ["✅", "❌", "⭐", "💜", "💙", "💚", "🧡", "🤍", "🖤", "♾️", "🏴", "🤖"] },
+];
+
+interface EmojiPickerProps {
+  onSelect: (emoji: string) => void;
+  onClose: () => void;
+}
+
+export function EmojiPicker({ onSelect, onClose }: EmojiPickerProps) {
+  const [group, setGroup] = useState(0);
+
+  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">
+        {/* Group tabs */}
+        <div className="flex border-b border-border">
+          {EMOJI_GROUPS.map((g, i) => (
+            <button
+              key={g.label}
+              onClick={() => setGroup(i)}
+              className={`flex-1 px-1 py-1.5 text-[9px] transition-colors ${
+                group === i ? "text-accent border-b border-accent" : "text-text-dim hover:text-text"
+              }`}
+            >
+              {g.label}
+            </button>
+          ))}
+        </div>
+        {/* Emoji grid */}
+        <div className="grid grid-cols-8 gap-0.5 p-2">
+          {EMOJI_GROUPS[group].emojis.map((emoji) => (
+            <button
+              key={emoji}
+              onClick={() => { onSelect(emoji); onClose(); }}
+              className="text-[18px] hover:scale-125 transition-transform p-0.5 text-center"
+            >
+              {emoji}
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}

src/components/shared/SettingsView.tsx

@@ -360,16 +360,16 @@ function NotificationSection() {
       </p>
       <div className="space-y-2">
         {items.map(({ key, label }) => (
-          <label key={key} className="flex items-center gap-2 cursor-pointer group">
+          <label key={key} className="flex items-center gap-3 cursor-pointer group">
             <button
               onClick={() => toggle(key)}
-              className={`w-8 h-4 rounded-full transition-colors relative ${
+              className={`w-9 h-5 rounded-full transition-colors relative shrink-0 ${
                 settings[key] ? "bg-accent" : "bg-border"
               }`}
             >
               <span
-                className={`absolute top-0.5 w-3 h-3 rounded-full bg-white transition-transform ${
-                  settings[key] ? "translate-x-4" : "translate-x-0.5"
+                className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform ${
+                  settings[key] ? "translate-x-4" : "translate-x-0"
                 }`}
               />
             </button>

src/components/thread/ThreadView.tsx

@@ -8,6 +8,7 @@ import { useReactionCount } from "../../hooks/useReactionCount";
 import { useZapCount } from "../../hooks/useZapCount";
 import { fetchReplies, publishReaction, publishReply, publishRepost, getNDK } from "../../lib/nostr";
 import { QuoteModal } from "../feed/QuoteModal";
+import { EmojiPicker } from "../shared/EmojiPicker";
 import { shortenPubkey, timeAgo } from "../../lib/utils";
 import { NoteContent } from "../feed/NoteContent";
 import { NoteCard } from "../feed/NoteCard";
@@ -155,6 +156,7 @@ export function ThreadView() {
   const [replyText, setReplyText] = useState("");
   const [replying, setReplying] = useState(false);
   const [replySent, setReplySent] = useState(false);
+  const [showReplyEmoji, setShowReplyEmoji] = useState(false);
   const replyRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
@@ -216,6 +218,31 @@ export function ThreadView() {
               className="w-full bg-transparent text-text text-[13px] placeholder:text-text-dim resize-none focus:outline-none"
             />
             <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={handleReply}