From 8a57a44f025d7639cedb58c92b5d9d2522a03b26 Mon Sep 17 00:00:00 2001
From: Dicken <dicken@noreply.localhost>
Date: Mon, 25 May 2026 15:35:16 +0200
Subject: [PATCH] frontend/src/App.jsx aktualisiert

---
 frontend/src/App.jsx | 125 +++++++++++++++++++------------------------
 1 file changed, 55 insertions(+), 70 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e01ad9e..ed89251 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -178,88 +178,72 @@ function Sidebar({ active, setActive, user, onLogout, updateInfo, onUpdateClick
 }
 
 // ── Mobile Bottom Navigation ──────────────────────────────────────────────────
-function BottomNav({ active, setActive, user, updateInfo, onUpdateClick }) {
+function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClick }) {
   const [menuOpen, setMenuOpen] = useState(false);
+  const NAV_H = 56;
   const mainNav = [
     { id:'dashboard', icon:'⬡', label:'Home' },
-    ...TOOLS.slice(0,3).map(t => ({ id:t.id, icon:t.icon, label:t.label.length>8?t.label.slice(0,7)+'…':t.label })),
+    ...TOOLS.slice(0,3).map(t => ({ id:t.id, icon:t.icon, label:t.label.length>7?t.label.slice(0,6)+'…':t.label })),
     { id:'_menu', icon:'⋯', label:'Mehr' },
   ];
-
+  const MI = ({icon,label,onClick,color='#fff'}) => (
+    <button onClick={onClick} style={{ width:'100%', padding:'14px 20px', background:'transparent',
+      border:'none', borderBottom:'1px solid rgba(255,255,255,0.05)',
+      display:'flex', alignItems:'center', gap:14, cursor:'pointer' }}>
+      <span style={{fontSize:20}}>{icon}</span>
+      <span style={{color,fontFamily:'monospace',fontSize:14}}>{label}</span>
+    </button>
+  );
   return (
     <>
-      {/* Menu Overlay */}
       {menuOpen && (
-        <div style={{ position:'fixed', inset:0, zIndex:4000 }} onClick={()=>setMenuOpen(false)}>
-          <div style={{ position:'absolute', bottom:70, left:0, right:0,
-            background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.08)',
-            borderRadius:'16px 16px 0 0', padding:'12px 0 8px' }}
+        <div style={{ position:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)' }}
+          onClick={()=>setMenuOpen(false)}>
+          <div style={{ position:'absolute', bottom:`calc(${NAV_H}px + env(safe-area-inset-bottom, 0px))`,
+            left:0, right:0, background:'#1a1a1e',
+            borderTop:'1px solid rgba(255,255,255,0.1)',
+            borderRadius:'16px 16px 0 0', paddingTop:8 }}
             onClick={e=>e.stopPropagation()}>
-            {/* Update badge */}
-            {updateInfo?.hasUpdate && (
-              <button onClick={()=>{setMenuOpen(false);onUpdateClick();}} style={{
-                width:'100%', padding:'12px 20px', background:'rgba(255,230,109,0.08)',
-                border:'none', borderBottom:'1px solid rgba(255,255,255,0.06)',
-                display:'flex', alignItems:'center', gap:10, cursor:'pointer',
-              }}>
-                <span style={{ width:8, height:8, borderRadius:'50%', background:'#ffe66d', boxShadow:'0 0 6px #ffe66d', display:'inline-block', flexShrink:0 }} />
-                <span style={{ color:'#ffe66d', fontSize:13, fontFamily:'monospace' }}>Update verfügbar – {updateInfo.latestVersion}</span>
-              </button>
-            )}
-            {/* Extra tools */}
-            {TOOLS.slice(3).map(t => (
-              <button key={t.id} onClick={()=>{setActive(t.id);setMenuOpen(false);}} style={{
-                width:'100%', padding:'13px 20px', background:'transparent',
-                border:'none', borderBottom:'1px solid rgba(255,255,255,0.04)',
-                display:'flex', alignItems:'center', gap:12, cursor:'pointer',
-              }}>
-                <span style={{ fontSize:18 }}>{t.icon}</span>
-                <span style={{ color:'#fff', fontFamily:'monospace', fontSize:13 }}>{t.label}</span>
-              </button>
-            ))}
-            {user?.role==='admin' && (
-              <button onClick={()=>{setActive('admin');setMenuOpen(false);}} style={{
-                width:'100%', padding:'13px 20px', background:'transparent',
-                border:'none', borderBottom:'1px solid rgba(255,255,255,0.04)',
-                display:'flex', alignItems:'center', gap:12, cursor:'pointer',
-              }}>
-                <span style={{ fontSize:18 }}>⚙</span>
-                <span style={{ color:'#fff', fontFamily:'monospace', fontSize:13 }}>Admin</span>
-              </button>
-            )}
+            <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)', borderRadius:2, margin:'0 auto 10px' }}/>
+            {updateInfo?.hasUpdate && <MI icon="📦" label={`Update: ${updateInfo.latestVersion}`} onClick={()=>{setMenuOpen(false);onUpdateClick();}} color="#ffe66d"/>}
+            {TOOLS.slice(3).map(t=><MI key={t.id} icon={t.icon} label={t.label} onClick={()=>{setActive(t.id);setMenuOpen(false);}}/>)}
+            {user?.role==='admin' && <MI icon="⚙" label="Admin" onClick={()=>{setActive('admin');setMenuOpen(false);}}/>}
+            <div style={{height:1,background:'rgba(255,255,255,0.08)',margin:'4px 0'}}/>
+            <MI icon="👤" label={user?.username||''} onClick={()=>{}} color="rgba(255,255,255,0.35)"/>
+            <MI icon="🚪" label="Ausloggen" onClick={()=>{onLogout();setMenuOpen(false);}} color="#ff6b9d"/>
+            <div style={{height:'env(safe-area-inset-bottom, 0px)'}}/>
           </div>
         </div>
       )}
-
-      {/* Bottom Bar */}
       <nav style={{ position:'fixed', bottom:0, left:0, right:0, zIndex:3000,
-        background:'#0d0d0f', borderTop:'1px solid rgba(255,255,255,0.08)',
-        display:'flex', height:64, paddingBottom:'env(safe-area-inset-bottom)' }}>
-        {mainNav.map(item => {
-          const isMenu = item.id === '_menu';
-          const isActive = isMenu ? menuOpen : active === item.id;
-          return (
-            <button key={item.id}
-              onClick={() => isMenu ? setMenuOpen(v=>!v) : (setActive(item.id), setMenuOpen(false))}
-              style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center',
-                justifyContent:'center', gap:3, background:'transparent', border:'none',
-                cursor:'pointer', position:'relative' }}>
-              {isMenu && updateInfo?.hasUpdate && (
-                <span style={{ position:'absolute', top:8, right:'calc(50% - 14px)',
-                  width:7, height:7, borderRadius:'50%', background:'#ffe66d',
-                  boxShadow:'0 0 6px #ffe66d', display:'inline-block' }} />
-              )}
-              <span style={{ fontSize:18, lineHeight:1 }}>{item.icon}</span>
-              <span style={{ fontSize:9, fontFamily:'monospace',
-                color: isActive ? '#4ecdc4' : 'rgba(255,255,255,0.4)',
-                letterSpacing:0.5 }}>{item.label}</span>
-              {isActive && !isMenu && (
-                <span style={{ position:'absolute', top:0, left:'50%', transform:'translateX(-50%)',
-                  width:24, height:2, background:'#4ecdc4', borderRadius:'0 0 2px 2px' }} />
-              )}
-            </button>
-          );
-        })}
+        background:'#0d0d0f', borderTop:'1px solid rgba(255,255,255,0.12)' }}>
+        <div style={{ display:'flex', height:NAV_H }}>
+          {mainNav.map(item => {
+            const isMenu = item.id === '_menu';
+            const isActive = isMenu ? menuOpen : active === item.id;
+            return (
+              <button key={item.id}
+                onClick={()=>isMenu?setMenuOpen(v=>!v):(setActive(item.id),setMenuOpen(false))}
+                style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center',
+                  justifyContent:'center', gap:3, background:'transparent', border:'none',
+                  cursor:'pointer', position:'relative', minWidth:0, padding:'0 4px' }}>
+                {isMenu && updateInfo?.hasUpdate && (
+                  <span style={{ position:'absolute', top:6, right:'calc(50% - 16px)',
+                    width:8, height:8, borderRadius:'50%', background:'#ffe66d',
+                    boxShadow:'0 0 6px #ffe66d', display:'inline-block' }} />
+                )}
+                <span style={{ fontSize:20, lineHeight:1 }}>{item.icon}</span>
+                <span style={{ fontSize:9, fontFamily:'monospace', letterSpacing:0.3,
+                  color: isActive ? '#4ecdc4' : 'rgba(255,255,255,0.4)' }}>{item.label}</span>
+                {isActive && !isMenu && (
+                  <span style={{ position:'absolute', top:0, left:'50%', transform:'translateX(-50%)',
+                    width:24, height:2, background:'#4ecdc4', borderRadius:'0 0 3px 3px' }} />
+                )}
+              </button>
+            );
+          })}
+        </div>
+        <div style={{ height:'env(safe-area-inset-bottom, 0px)', background:'#0d0d0f' }}/>
       </nav>
     </>
   );
@@ -534,7 +518,7 @@ export default function App() {
   const activeTool = TOOLS.find(t=>t.id===active);
 
   // Mobile padding bottom für fixed nav
-  const mainStyle = { flex:1, overflowY:'auto', ...(mobile ? { paddingBottom:64 } : {}) };
+  const mainStyle = { flex:1, overflowY:'auto', ...(mobile ? { paddingBottom:'calc(56px + env(safe-area-inset-bottom, 0px))' } : {}) };
 
   return(
     <>
@@ -562,6 +546,7 @@ export default function App() {
       </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}/>