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/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>