From 9cf1b6d26c3d2187250b6cbf8c4eea2d4eaca4c5 Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Sat, 9 Aug 2025 22:00:57 +0200
Subject: [PATCH] =?UTF-8?q?Nightly:=20Emoji-Picker=20auf=20Twemoji=20umges?=
 =?UTF-8?q?tellt=20(SVG=20via=20CDN)=20=20zuverl=C3=A4ssige=20Darstellung?=
 =?UTF-8?q?=20statt=20fehlender=20System-Emoji?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx    | 10 +++++++++-
 web/src/styles.css |  3 ++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 4b126e1..a9f4615 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -38,6 +38,12 @@ export default function App() {
       '😀😁😂🤣😅😊🙂😉😍😘😜🤪🤗🤔🤩🥳😎😴🤤','😇🥰🥺😡🤬😱😭🙈🙉🙊💀👻🤖🎃','👍👎👏🙌🙏🤝💪🔥✨💥🎉🎊','❤️🧡💛💚💙💜🖤🤍🤎💖💘💝','⭐🌟🌈☀️🌙⚡❄️☔🌊🍀','🎵🎶🎧🎤🎸🥁🎹🎺🎻','🍕🍔🍟🌭🌮🍣🍺🍻🍷🥂','🐶🐱🐼🐸🦄🐧🐢🦖🐙','🚀🛸✈️🚁🚗🏎️🚓🚒','🏆🥇🥈🥉🎯🎮🎲🧩']
     return groups.join('').split('');
   }, []);
+
+  function emojiToTwemojiUrl(emoji: string): string {
+    const codePoints = Array.from(emoji).map(ch => ch.codePointAt(0)!.toString(16)).join('-');
+    // twemoji svg assets
+    return `https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/${codePoints}.svg`;
+  }
   const [showBroccoli, setShowBroccoli] = useState<boolean>(false);
   const [flashMap, setFlashMap] = useState<Record<string, boolean>>({});
   const selectedCount = useMemo(() => Object.values(selectedSet).filter(Boolean).length, [selectedSet]);
@@ -477,7 +483,9 @@ export default function App() {
                                   const resp = await fetchSounds(query, activeFolder === '__favs__' ? '__all__' : activeFolder, activeCategoryId || undefined);
                                   setSounds(resp.items); setTotal(resp.total); setFolders(resp.folders);
                                 }catch(err:any){ setError(err?.message||'Badge-Update fehlgeschlagen'); setInfo(null); }
-                              }}>{e}</button>
+                              }}>
+                                <img alt={e} src={emojiToTwemojiUrl(e)} />
+                              </button>
                             ))}
                           </div>,
                           document.body
diff --git a/web/src/styles.css b/web/src/styles.css
index 34185e1..89df455 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -455,7 +455,8 @@ header p {
   z-index: 300000;
   font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", system-ui, sans-serif;
 }
-.emoji-picker button { background: transparent; border: 0; font-size: 1.35rem; line-height: 1.35rem; cursor: pointer; font-family: inherit; }
+.emoji-picker button { background: transparent; border: 0; width: 2rem; height: 2rem; cursor: pointer; font-family: inherit; display: grid; place-items: center; }
+.emoji-picker img { width: 1.6rem; height: 1.6rem; }
 .emoji-picker button:hover { filter: brightness(1.2); }
 .select-item {
   width: 100%; text-align: left; padding: 10px 12px; color: #e7e7ee;