feat: Whiteboard Dot in Liste, Favoriten eingeklappt + Modal bei Klick

This commit is contained in:
2026-07-04 12:49:19 +02:00
parent 31cb7f7411
commit 8425688160
3 changed files with 124 additions and 66 deletions

View File

@@ -265,6 +265,7 @@ export default function Whiteboard({ toast, mobile }) {
// View
const [view, setView] = useState('list');
const [boards, setBoards] = useState([]);
const [unreadIds, setUnreadIds] = useState(new Set());
const [loading, setLoading] = useState(true);
const [current, setCurrent] = useState(null);
const [creating, setCreating] = useState(false);
@@ -379,7 +380,16 @@ export default function Whiteboard({ toast, mobile }) {
// ── Laden / Speichern ────────────────────────────────────────────────────
const loadBoards = useCallback(() => {
setLoading(true);
api('/tools/whiteboard').then(d=>setBoards(d.whiteboards||[])).catch(()=>toast('Fehler','error')).finally(()=>setLoading(false));
Promise.all([
api('/tools/whiteboard'),
api('/tools/whiteboard/unread').catch(() => ({ count: 0 })),
]).then(([d, u]) => {
setBoards(d.whiteboards || []);
// unread count kommt global — wir markieren alle als "möglicherweise unread"
// getGameForUser gibt uns keine IDs, also nutzen wir den globalen count als Indikator
}).catch(() => toast('Fehler', 'error')).finally(() => setLoading(false));
// Einzelne unread IDs vom Backend holen
api('/tools/whiteboard/unread-ids').then(d => setUnreadIds(new Set(d.ids || []))).catch(() => {});
}, []);
const renameBoard = async (id, title) => {
@@ -394,6 +404,7 @@ export default function Whiteboard({ toast, mobile }) {
useEffect(()=>{ loadBoards(); },[loadBoards]);
const openBoard = async (board) => {
setUnreadIds(prev => { const s = new Set(prev); s.delete(board.id); return s; });
try {
const d = await api(`/tools/whiteboard/${board.id}/data`);
const els = JSON.parse(typeof d.elements==='string'?d.elements:JSON.stringify(d.elements||[]));
@@ -684,7 +695,13 @@ export default function Whiteboard({ toast, mobile }) {
{boards.map(b=>(
<div key={b.id} style={{...S.card,display:'flex',alignItems:'center',gap:12,marginBottom:8,cursor:'pointer'}}
onClick={()=>{ if(editingId!==b.id) openBoard(b); }}>
<div style={{fontSize:24}}>🖊</div>
<div style={{fontSize:24,position:'relative',flexShrink:0}}>
🖊
{unreadIds.has(b.id) && (
<span style={{position:'absolute',top:-3,right:-3,width:8,height:8,
borderRadius:'50%',background:'#4ecdc4',boxShadow:'0 0 5px #4ecdc4'}}/>
)}
</div>
<div style={{flex:1,minWidth:0}}>
{editingId===b.id?(
<input autoFocus value={editTitle} onChange={e=>setEditTitle(e.target.value)}