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

Nightly: Custom-Emoji-Feature entfernt (UI + Styles), nur 'Badges entfernen' bleibt

Browse source
This commit is contained in:
vibe-bot 2025-08-09 22:55:11 +02:00
parent 9bb402edd3
commit 23b90b5923
3 changed files with 4 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/index.html
View file

@ -6,7 +6,7 @@
<title>Soundboard</title> <title>Soundboard</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<link rel="preload" href="https://fonts.gstatic.com/s/notoemoji/v41/emoji.ttf" as="font" type="font/ttf" crossorigin>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</head> </head>

36
web/src/App.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react'; import React, { useEffect, useMemo, useRef, useState } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { fetchChannels, fetchSounds, playSound, setVolumeLive, getVolume, adminStatus, adminLogin, adminLogout, adminDelete, adminRename, playUrl, fetchCategories, createCategory, assignCategories, assignBadges, clearBadges, updateCategory, deleteCategory, partyStart, partyStop } from './api'; import { fetchChannels, fetchSounds, playSound, setVolumeLive, getVolume, adminStatus, adminLogin, adminLogout, adminDelete, adminRename, playUrl, fetchCategories, createCategory, assignCategories, clearBadges, updateCategory, deleteCategory, partyStart, partyStop } from './api';
import type { VoiceChannelInfo, Sound, Category } from './types'; import type { VoiceChannelInfo, Sound, Category } from './types';
import { getCookie, setCookie } from './cookies'; import { getCookie, setCookie } from './cookies';
@ -461,39 +461,7 @@ export default function App() {
}} }}
>Zu Kategorie</button> >Zu Kategorie</button>
{/* Custom Badge Picker */} {/* Custom Emoji Feature entfernt */}
<div style={{ position:'relative' }}>
<button
ref={emojiTriggerRef}
className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300"
onClick={()=> {
try{
const r = emojiTriggerRef.current?.getBoundingClientRect();
if(r){ setEmojiPos({ left: r.left, top: r.bottom + 8 }); }
}catch{}
setShowEmojiPicker(v=>!v);
}}
>Custom Emoji</button>
{showEmojiPicker && typeof document !== 'undefined' && ReactDOM.createPortal(
<div ref={emojiPickerRef as any} className="emoji-picker" style={{ position:'fixed', left: emojiPos.left, top: emojiPos.top, zIndex: 300000 }}>
{EMOJIS.map((e, i)=> (
<button key={i} onClick={async ()=>{
try{
const files = Object.entries(selectedSet).filter(([,v])=>v).map(([k])=>k);
await assignBadges(files, [e], []);
setShowEmojiPicker(false);
setInfo('Badge gesetzt'); setError(null);
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); }
}}>
<img alt={e} src={emojiToTwemojiUrl(e)} />
</button>
))}
</div>,
document.body
)}
</div>
<button <button
className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300" className="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300"

10
web/src/styles.css
View file

@ -442,15 +442,7 @@ header p {
max-height: 280px; overflow-y: auto; max-height: 280px; overflow-y: auto;
z-index: 20000; z-index: 20000;
} }
.emoji-picker { /* Emoji-Picker entfernt */
display: grid; grid-template-columns: repeat(10, 2rem); gap: .25rem; padding: .5rem;
max-height: 260px; overflow: auto; background: #0f1530; border:1px solid rgba(255,255,255,.28); border-radius: 12px;
box-shadow: 0 24px 48px rgba(0,0,0,.6);
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; 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;