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

{title}

{children}

); } // ── Login ───────────────────────────────────────────────────────────────────── function Login({ onLogin }) { const mobile = useIsMobile(); 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:'12px 14px' }} autoCapitalize="none" />

))} {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, indent=false }) => ( ); return (

⚒

DICKENDOCK

v1.0.0

{/* Apps Sektion mit Unterpunkten */} {appsOpen && 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, label, onClick, color='#fff'}) => ( ); const Sheet = ({open, onClose, children}) => !open ? null : (

e.stopPropagation()}>

{children}

); const mainNav = [ { id:'dashboard', icon:'⬡', label:'Home' }, { id:'_apps', icon:'◫', label:'Apps' }, ...(user?.role==='admin' ? [{ id:'admin', icon:'⚙', label:'Admin' }] : []), { id:'_mehr', icon:'⋯', label:'Mehr' }, ]; return ( <> {/* Apps Sheet */} setAppsOpen(false)}>

APPS

{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>
);

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>
  );

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)}/>}
    </>
  );
}