root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nightly: Emoji-Picker auf Twemoji umgestellt (SVG via CDN) zuverlässige Darstellung statt fehlender System-Emoji

Browse source
This commit is contained in:
vibe-bot 2025-08-09 22:00:57 +02:00
parent 64ae191d96
commit 9cf1b6d26c
2 changed files with 11 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/App.tsx
View file

@ -38,6 +38,12 @@ export default function App() {
'😀😁😂🤣😅😊🙂😉😍😘😜🤪🤗🤔🤩🥳😎😴🤤','😇🥰🥺😡🤬😱😭🙈🙉🙊💀👻🤖🎃','👍👎👏🙌🙏🤝💪🔥✨💥🎉🎊','❤️🧡💛💚💙💜🖤🤍🤎💖💘💝','⭐🌟🌈☀️🌙⚡❄️☔🌊🍀','🎵🎶🎧🎤🎸🥁🎹🎺🎻','🍕🍔🍟🌭🌮🍣🍺🍻🍷🥂','🐶🐱🐼🐸🦄🐧🐢🦖🐙','🚀🛸✈️🚁🚗🏎️🚓🚒','🏆🥇🥈🥉🎯🎮🎲🧩'] '😀😁😂🤣😅😊🙂😉😍😘😜🤪🤗🤔🤩🥳😎😴🤤','😇🥰🥺😡🤬😱😭🙈🙉🙊💀👻🤖🎃','👍👎👏🙌🙏🤝💪🔥✨💥🎉🎊','❤️🧡💛💚💙💜🖤🤍🤎💖💘💝','⭐🌟🌈☀️🌙⚡❄️☔🌊🍀','🎵🎶🎧🎤🎸🥁🎹🎺🎻','🍕🍔🍟🌭🌮🍣🍺🍻🍷🥂','🐶🐱🐼🐸🦄🐧🐢🦖🐙','🚀🛸✈️🚁🚗🏎️🚓🚒','🏆🥇🥈🥉🎯🎮🎲🧩']
return groups.join('').split(''); 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 [showBroccoli, setShowBroccoli] = useState<boolean>(false);
const [flashMap, setFlashMap] = useState<Record<string, boolean>>({}); const [flashMap, setFlashMap] = useState<Record<string, boolean>>({});
const selectedCount = useMemo(() => Object.values(selectedSet).filter(Boolean).length, [selectedSet]); 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); const resp = await fetchSounds(query, activeFolder === '__favs__' ? '__all__' : activeFolder, activeCategoryId || undefined);
setSounds(resp.items); setTotal(resp.total); setFolders(resp.folders); setSounds(resp.items); setTotal(resp.total); setFolders(resp.folders);
}catch(err:any){ setError(err?.message||'Badge-Update fehlgeschlagen'); setInfo(null); } }catch(err:any){ setError(err?.message||'Badge-Update fehlgeschlagen'); setInfo(null); }
}}>{e}</button> }}>
<img alt={e} src={emojiToTwemojiUrl(e)} />
</button>
))} ))}
</div>, </div>,
document.body document.body

3
web/src/styles.css
View file

@ -455,7 +455,8 @@ header p {
z-index: 300000; z-index: 300000;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", system-ui, sans-serif; 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); } .emoji-picker button:hover { filter: brightness(1.2); }
.select-item { .select-item {
width: 100%; text-align: left; padding: 10px 12px; color: #e7e7ee; width: 100%; text-align: left; padding: 10px 12px; color: #e7e7ee;