e.target===e.currentTarget&&onClose()}>

{title}

{children}

); } // ── Login ───────────────────────────────────────────────────────────────────── function Login({ onLogin }) { const [u,setU]=useState(''); const [p,setP]=useState(''); const [err,setErr]=useState(''); const [busy,setBusy]=useState(false); const go = async () => { setErr(''); setBusy(true); try { const d=await api('/auth/login',{body:{username:u,password:p}}); localStorage.setItem('sk_token',d.token); onLogin(d.user); } catch(e) { setErr(e.message); } finally { setBusy(false); } }; return (

⚒

DICKENDOCK

{[['BENUTZERNAME',u,setU,'text'],['PASSWORT',p,setP,'password']].map(([l,v,s,t])=>(

{l} s(e.target.value)} onKeyDown={e=>e.key==='Enter'&&go()} style={{ ...S.inp, fontSize:16, padding:'13px 14px', borderRadius:10, border:'1px solid rgba(255,255,255,0.12)' }} autoCapitalize="none" autoCorrect="off" />

))} {err &&

✕ {err}

}

); } // ── Update Modal ────────────────────────────────────────────────────────────── function UpdateModal({ data, onClose }) { return (

Installiert: {data.currentVersion} {' → '}{data.latestVersion}

{(data.releases||[]).map((r,i)=>(

{r.name||r.version} {r.publishedAt?new Date(r.publishedAt).toLocaleDateString('de-DE'):''}

{r.body}

))}

Update: docker compose up -d --build

); } // ── Desktop Sidebar ─────────────────────────────────────────────────────────── function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick }) { const [appsOpen, setAppsOpen] = useState(true); const NavBtn = ({ item, sub=false }) => { const ic = active===item.id ? '#4ecdc4' : 'rgba(255,255,255,0.55)'; return ( ); }; return (

⚒

DICKENDOCK

v1.0.0

{/* Apps Sektion mit Gruppenüberschriften */} {appsOpen && getGroupedTools().map(([group, tools]) => (

{group.toUpperCase()}
{tools.map(t => )}
))} {user?.role==='admin' && }
{updateInfo?.hasUpdate && ( )}

{user?.username}

); } // ── Mobile Bottom Navigation ────────────────────────────────────────────────── function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClick }) { const [menuOpen, setMenuOpen] = useState(false); const [appsOpen, setAppsOpen] = useState(false); const NAV_H = 56; const MI = ({Icon, icon, label, onClick, color='rgba(255,255,255,0.85)'}) => { const Ic = Icon; return ( ); }; const Sheet = ({open, onClose, children}) => !open ? null : (

e.stopPropagation()}>
{children}

); const mainNav = [ { id:'dashboard', Icon:HomeIcon, label:'Home' }, { id:'_apps', Icon:AppsIcon, label:'Apps' }, ...(user?.role==='admin' ? [{ id:'admin', Icon:AdminIcon, label:'Admin' }] : []), { id:'_mehr', Icon:MoreIcon, label:'Mehr' }, ]; return ( <> {/* Apps Sheet mit Gruppenüberschriften */} setAppsOpen(false)}>
{getGroupedTools().map(([group, tools]) => (

{group.toUpperCase()}
{tools.map(t => ( { setActive(t.id); setAppsOpen(false); }} /> ))}
))}
{/* Mehr Sheet */} setMenuOpen(false)}> {updateInfo?.hasUpdate && {setMenuOpen(false);onUpdateClick();}} color="#ffe66d"/>}
{}} color="rgba(255,255,255,0.35)"/> {onLogout();setMenuOpen(false);}} color="#ff6b9d"/> {/* Bottom Bar */}

{mainNav.map(item => { const isApps = item.id === '_apps'; const isMehr = item.id === '_mehr'; const isActive = isApps ? appsOpen : isMehr ? menuOpen : active === item.id; return ( ); })}

); } // ── Dashboard Widgets ───────────────────────────────────────────────────────── function QuickLinks({ toast, mobile }) { const [links, setLinks] = useState([]); const [editMode, setEdit] = useState(false); const [showForm, setForm] = useState(false); const [form, setF] = useState({ title:'', url:'', icon:'🔗' }); const [editId, setEditId] = useState(null); useEffect(() => { api('/dashboard/links').then(setLinks).catch(() => {}); }, []); const save = async () => { if (!form.title.trim() || !form.url.trim()) { toast('Titel und URL erforderlich', 'error'); return; } let url = form.url.trim(); if (!/^https?:\/\//i.test(url)) url = 'https://' + url; try { if (editId) { const u = await api(`/dashboard/links/${editId}`, { method:'PUT', body:{...form, url} }); setLinks(p => p.map(l => l.id===editId ? u : l)); } else { const n = await api('/dashboard/links', { body:{...form, url} }); setLinks(p => [...p, n]); } toast(editId ? 'Aktualisiert' : 'Gespeichert'); setF({ title:'', url:'', icon:'🔗' }); setForm(false); setEditId(null); } catch(e) { toast(e.message, 'error'); } }; const del = async id => { try { await api(`/dashboard/links/${id}`, { method:'DELETE' }); setLinks(p => p.filter(l => l.id!==id)); toast('Gelöscht'); } catch(e) { toast(e.message, 'error'); } }; return (

SCHNELLZUGRIFF

{editMode && }

{/* Link-Grid */} {links.length === 0 && !editMode ?
Tippe auf "✎" um Links hinzuzufügen.
:
{links.map(l => (
{editMode && (

)} e.preventDefault() : undefined} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:4, padding:'10px 14px', background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:10, textDecoration:'none', minWidth:60, cursor:editMode ? 'default' : 'pointer' }}> {l.icon} {l.title}
))}
} {/* Formular */} {showForm && (
{/* Icon-Picker */}

ICON

{ICONS.map(ic => ( ))}

TITEL setF(f => ({...f, title:e.target.value}))} style={{ ...S.inp, fontSize:16 }} placeholder="Mein Link" />

URL setF(f => ({...f, url:e.target.value}))} onKeyDown={e => e.key==='Enter' && save()} style={{ ...S.inp, fontSize:16 }} placeholder="https://…" inputMode="url" autoCapitalize="none" />

)}
); } function TodoList({ toast }) { const [items, setItems] = useState([]); const [text, setText] = useState(''); useEffect(() => { api('/dashboard/todos').then(setItems).catch(() => {}); }, []); const add = async () => { if (!text.trim()) return; try { const n = await api('/dashboard/todos', { body:{ text:text.trim() } }); setItems(p => [...p, n]); setText(''); } catch(e) { toast(e.message, 'error'); } }; const toggle = async item => { try { const u = await api(`/dashboard/todos/${item.id}`, { method:'PUT', body:{ done:!item.done } }); setItems(p => p.map(i => i.id===item.id ? u : i)); } catch(e) { toast(e.message, 'error'); } }; const del = async id => { try { await api(`/dashboard/todos/${id}`, { method:'DELETE' }); setItems(p => p.filter(i => i.id!==id)); } catch(e) { toast(e.message, 'error'); } }; const open = items.filter(i => !i.done); const done = items.filter(i => i.done); return (

TO-DO

setText(e.target.value)} onKeyDown={e => e.key==='Enter' && add()} style={{ ...S.inp, flex:1, fontSize:16 }} placeholder="Neue Aufgabe…" />

{open.length === 0 && done.length === 0 && (
Noch keine Aufgaben.
)} {open.map(item => (

))} {done.length > 0 && ( <>
ERLEDIGT
{done.map(item => (
{item.text}
))} )}

); } function Notepad({ toast }) { const [content, setContent] = useState(''); const [saved, setSaved] = useState(true); const [saveTime, setSaveTime] = useState(null); const tmr = useRef(null); useEffect(() => { api('/dashboard/note').then(d => { setContent(d.content || ''); setSaveTime(d.updated_at); }).catch(() => {}); }, []); const change = val => { setContent(val); setSaved(false); clearTimeout(tmr.current); tmr.current = setTimeout(async () => { try { const r = await api('/dashboard/note', { method:'PUT', body:{ content:val } }); setSaved(true); setSaveTime(r.updated_at); } catch(e) { toast(e.message, 'error'); } }, 900); }; return (

NOTIZEN

{saved ? (saveTime ? `✓ ${new Date(saveTime).toLocaleTimeString('de-DE', { hour:'2-digit', minute:'2-digit' })}` : '✓') : '…'}

change(e.target.value)} placeholder="Notizen, IPs, Zugangsdaten…" style={{ ...S.inp, width:'100%', minHeight:140, resize:'vertical', lineHeight:1.7, padding:'10px 12px', fontSize:14 }} /> </div> ); } function Dashboard({ toast, mobile }) { return ( <div style={{ padding: mobile ? '14px 12px 90px' : '36px 44px', maxWidth:1100 }}> <div style={{ marginBottom:16 }}> <h1 style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:mobile ? 17 : 22, margin:0 }}>Dashboard</h1> <p style={{ color:'rgba(255,255,255,0.25)', fontFamily:'monospace', fontSize:10, marginTop:3 }}> {new Date().toLocaleDateString('de-DE', { weekday:'long', day:'numeric', month:'long' })} </p> </div> <QuickLinks toast={toast} mobile={mobile} /> <TodoList toast={toast} /> <Notepad toast={toast} /> </div> ); } // ── Admin Panel ─────────────────────────────────────────────────────────────── // Sec muss außerhalb von AdminPanel definiert sein damit Inputs den Fokus behalten const Sec = ({title, children}) => ( <div style={{...S.card, marginBottom:12}}> <div style={S.head}>{title}</div> {children} </div> ); // Field außerhalb definiert → Tastatur bleibt beim Tippen erhalten const Field = ({ label, type='text', value, onChange, placeholder='', autoCapitalize='off' }) => ( <div style={{ marginBottom:12 }}> <label style={{ ...S.head, display:'block', marginBottom:4 }}>{label}</label> <input type={type} value={value} onChange={onChange} placeholder={placeholder} autoCapitalize={autoCapitalize} style={{ ...S.inp, fontSize:16, padding:'11px 12px' }} /> </div> ); function AdminPanel({ toast, mobile }) { const [pw, setPw] = useState({ current:'', newPw:'', confirm:'' }); const [un, setUn] = useState({ newUsername:'', unPw:'' }); const [file, setFile] = useState(null); const [busy, setBusy] = useState({ pw:false, un:false, restore:false }); const set = (key, val) => setBusy(b => ({...b, [key]:val})); const changePw = async () => { if (pw.newPw !== pw.confirm) { toast('Passwörter stimmen nicht überein', 'error'); return; } if (pw.newPw.length < 8) { toast('Mindestens 8 Zeichen', 'error'); return; } set('pw', true); try { await api('/auth/change-password', { body:{ currentPassword:pw.current, newPassword:pw.newPw } }); toast('Passwort geändert'); setPw({ current:'', newPw:'', confirm:'' }); } catch(e) { toast(e.message, 'error'); } finally { set('pw', false); } }; const changeUn = async () => { if (!un.newUsername.trim()) { toast('Benutzername eingeben', 'error'); return; } set('un', true); try { await api('/auth/change-username', { body:{ newUsername:un.newUsername.trim(), password:un.unPw } }); toast('Benutzername geändert – bitte neu einloggen'); setUn({ newUsername:'', unPw:'' }); setTimeout(() => { localStorage.removeItem('sk_token'); window.location.reload(); }, 1800); } catch(e) { toast(e.message, 'error'); } finally { set('un', false); } }; const backup = async () => { try { const blob = await api('/admin/backup'); const a = Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: `dickendock-backup-${new Date().toISOString().split('T')[0]}.db` }); a.click(); URL.revokeObjectURL(a.href); toast('Backup heruntergeladen'); } catch(e) { toast(e.message, 'error'); } }; const restore = async () => { if (!file) { toast('Datei auswählen', 'error'); return; } if (!window.confirm('⚠️ Aktuelle Datenbank wird ersetzt. Fortfahren?')) return; set('restore', true); try { const f = new FormData(); f.append('database', file); await api('/admin/restore', { method:'POST', body:f, isFile:true }); toast('Wiederhergestellt'); setFile(null); } catch(e) { toast(e.message, 'error'); } finally { set('restore', false); } }; return ( <div style={{ padding: mobile ? '14px 12px 90px' : '36px 44px', maxWidth:560 }}> <h1 style={{ color:'#fff', fontFamily:"'Space Mono',monospace", fontSize:mobile ? 17 : 22, marginBottom:18 }}>Admin</h1> <Sec title="BENUTZERNAME ÄNDERN"> <Field label="NEUER BENUTZERNAME" value={un.newUsername} onChange={e=>setUn(p=>({...p,newUsername:e.target.value}))} /> <Field label="PASSWORT ZUR BESTÄTIGUNG" type="password" value={un.unPw} onChange={e=>setUn(p=>({...p,unPw:e.target.value}))} /> <button onClick={changeUn} disabled={busy.un} style={{ ...S.btn('#4ecdc4'), width:'100%', textAlign:'center', padding:'11px 0' }}> {busy.un ? '…' : '✓ Benutzername ändern'} </button> </Sec> <Sec title="PASSWORT ÄNDERN"> <Field label="AKTUELLES PASSWORT" type="password" value={pw.current} onChange={e=>setPw(p=>({...p,current:e.target.value}))} /> <Field label="NEUES PASSWORT" type="password" value={pw.newPw} onChange={e=>setPw(p=>({...p,newPw:e.target.value}))} /> <Field label="BESTÄTIGEN" type="password" value={pw.confirm} onChange={e=>setPw(p=>({...p,confirm:e.target.value}))} /> <button onClick={changePw} disabled={busy.pw} style={{ ...S.btn('#4ecdc4'), width:'100%', textAlign:'center', padding:'11px 0' }}> {busy.pw ? '…' : '✓ Passwort ändern'} </button> </Sec> <Sec title="DATENBANK"> <p style={{ color:'rgba(255,255,255,0.3)', fontSize:12, fontFamily:'monospace', marginBottom:12, lineHeight:1.6 }}> Vollständige SQLite-Datenbank sichern oder wiederherstellen. </p> <button onClick={backup} style={{ ...S.btn('#ffe66d'), width:'100%', textAlign:'center', padding:'11px 0', marginBottom:12 }}> ↓ Backup herunterladen </button> <label style={{ ...S.head, display:'block', marginBottom:4 }}>SICHERUNG EINSPIELEN (.db)</label> <div style={{ display:'flex', gap:8 }}> <input type="file" accept=".db" onChange={e => setFile(e.target.files[0])} style={{ ...S.inp, flex:1, padding:'9px 10px', cursor:'pointer', fontSize:13 }} /> <button onClick={restore} disabled={busy.restore || !file} style={{ ...S.btn('#ff6b9d'), opacity: busy.restore || !file ? 0.4 : 1, padding:'0 14px', flexShrink:0 }}> {busy.restore ? '…' : '↑'} </button> </div> {file && <div style={{ color:'rgba(255,255,255,0.25)', fontSize:10, fontFamily:'monospace', marginTop:5 }}>{file.name}</div>} </Sec> </div> ); } // ── App Shell ───────────────────────────────────────────────────────────────── export default function App() { const mobile = useIsMobile(); const [user,setUser]=useState(null); const [active,setActive]=useState('dashboard'); const [toastMsg,setToastMsg]=useState({msg:'',type:'success'}); const [updateInfo,setUpdateInfo]=useState(null); const [showUpd,setShowUpd]=useState(false); useEffect(()=>{ const token=localStorage.getItem('sk_token'); if(!token)return; try{const p=JSON.parse(atob(token.split('.')[1])); if(p.exp*1000>Date.now())setUser({id:p.id,username:p.username,role:p.role}); else localStorage.removeItem('sk_token'); }catch{localStorage.removeItem('sk_token');} },[]); useEffect(()=>{ if(!user)return; const check=()=>api('/system/update-check').then(setUpdateInfo).catch(()=>{}); check(); const t=setInterval(check,5*60*1000); return()=>clearInterval(t); },[user]); const toast=useCallback((msg,type='success')=>{ setToastMsg({msg,type}); setTimeout(()=>setToastMsg({msg:'',type:'success'}),3500); },[]); if(!user) return <Login onLogin={u=>setUser(u)}/>; const activeTool = TOOLS.find(t=>t.id===active); // Mobile padding bottom für fixed nav const mainStyle = { flex:1, overflowY:'auto', ...(mobile ? { paddingBottom:'calc(56px + env(safe-area-inset-bottom, 0px))' } : {}) }; return( <> <style>{` @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); *{margin:0;padding:0;box-sizing:border-box;} body{background:#111114;-webkit-tap-highlight-color:transparent;} input,textarea,select{-webkit-appearance:none;appearance:none;} input[type=number]::-webkit-inner-spin-button{opacity:0.25;} @keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} ::-webkit-scrollbar{width:3px;}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px;} select option,textarea{background:#111114;} `}</style> <div style={{display:'flex',minHeight:'100vh',background:'#111114'}}> {!mobile && ( <Sidebar active={active} setActive={setActive} user={user} onLogout={()=>{localStorage.removeItem('sk_token');setUser(null);}} updateInfo={updateInfo} onUpdateClick={()=>setShowUpd(true)}/> )} <main style={mainStyle}> {active==='dashboard' && <Dashboard toast={toast} mobile={mobile}/>} {active==='admin' && user?.role==='admin' && <AdminPanel toast={toast} mobile={mobile}/>} {activeTool && <activeTool.component toast={toast} mobile={mobile}/>} </main> </div> {mobile && ( <BottomNav active={active} setActive={setActive} user={user} onLogout={()=>{localStorage.removeItem('sk_token');setUser(null);}} updateInfo={updateInfo} onUpdateClick={()=>setShowUpd(true)}/> )} <Toast msg={toastMsg.msg} type={toastMsg.type}/> {showUpd&&updateInfo&&<UpdateModal data={updateInfo} onClose={()=>setShowUpd(false)}/>} </> ); }