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

36
web/src/App.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
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 { getCookie, setCookie } from './cookies';
@ -461,39 +461,7 @@ export default function App() {
}}
>Zu Kategorie</button>
{/* Custom Badge Picker */}
<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>
{/* Custom Emoji Feature entfernt */}
<button
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;
z-index: 20000;
}
.emoji-picker {
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 entfernt */
.emoji-picker button:hover { filter: brightness(1.2); }
.select-item {
width: 100%; text-align: left; padding: 10px 12px; color: #e7e7ee;