diff --git a/web/src/App.tsx b/web/src/App.tsx index 440fd90..e281b3a 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -282,6 +282,16 @@ export default function App() { return m; }, [visibleFolders]); + const firstOfInitial = useMemo(() => { + const seen = new Set(); + const result = new Set(); + displaySounds.forEach((s, idx) => { + const ch = s.name.charAt(0).toUpperCase(); + if (!seen.has(ch)) { seen.add(ch); result.add(idx); } + }); + return result; + }, [displaySounds]); + const channelsByGuild = useMemo(() => { const groups: Record = {}; channels.forEach(c => { @@ -503,12 +513,13 @@ export default function App() { const isPlaying = lastPlayed === s.name; const isNew = s.isRecent || s.badges?.includes('new'); const initial = s.name.charAt(0).toUpperCase(); + const showInitial = firstOfInitial.has(idx); const folderColor = s.folder ? (folderColorMap[s.folder] || 'var(--accent)') : 'var(--accent)'; return (
{ const card = e.currentTarget; @@ -541,7 +552,7 @@ export default function App() { > {isFav ? 'star' : 'star_border'} - {initial} + {showInitial && {initial}} {s.name} {s.folder && {s.folder}}