frontend/src/App.jsx aktualisiert

frontend/src/App.jsx

@@ -178,63 +178,46 @@ 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:'fixed', inset:0, zIndex:4000, background:'rgba(0,0,0,0.6)' }}
-          <div style={{ position:'absolute', bottom:70, left:0, right:0,
+          onClick={()=>setMenuOpen(false)}>
-            background:'#1a1a1e', border:'1px solid rgba(255,255,255,0.08)',
+          <div style={{ position:'absolute', bottom:`calc(${NAV_H}px + env(safe-area-inset-bottom, 0px))`,
-            borderRadius:'16px 16px 0 0', padding:'12px 0 8px' }}
+            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 */}
+            <div style={{ width:36, height:4, background:'rgba(255,255,255,0.15)', borderRadius:2, margin:'0 auto 10px' }}/>
-            {updateInfo?.hasUpdate && (
+            {updateInfo?.hasUpdate && <MI icon="📦" label={`Update: ${updateInfo.latestVersion}`} onClick={()=>{setMenuOpen(false);onUpdateClick();}} color="#ffe66d"/>}
-              <button onClick={()=>{setMenuOpen(false);onUpdateClick();}} style={{
+            {TOOLS.slice(3).map(t=><MI key={t.id} icon={t.icon} label={t.label} onClick={()=>{setActive(t.id);setMenuOpen(false);}}/>)}
-                width:'100%', padding:'12px 20px', background:'rgba(255,230,109,0.08)',
+            {user?.role==='admin' && <MI icon="⚙" label="Admin" onClick={()=>{setActive('admin');setMenuOpen(false);}}/>}
-                border:'none', borderBottom:'1px solid rgba(255,255,255,0.06)',
+            <div style={{height:1,background:'rgba(255,255,255,0.08)',margin:'4px 0'}}/>
-                display:'flex', alignItems:'center', gap:10, cursor:'pointer',
+            <MI icon="👤" label={user?.username||''} onClick={()=>{}} color="rgba(255,255,255,0.35)"/>
-              }}>
+            <MI icon="🚪" label="Ausloggen" onClick={()=>{onLogout();setMenuOpen(false);}} color="#ff6b9d"/>
-                <span style={{ width:8, height:8, borderRadius:'50%', background:'#ffe66d', boxShadow:'0 0 6px #ffe66d', display:'inline-block', flexShrink:0 }} />
+            <div style={{height:'env(safe-area-inset-bottom, 0px)'}}/>
-                <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>
         </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)',
+        background:'#0d0d0f', borderTop:'1px solid rgba(255,255,255,0.12)' }}>
-        display:'flex', height:64, paddingBottom:'env(safe-area-inset-bottom)' }}>
+        <div style={{ display:'flex', height:NAV_H }}>
           {mainNav.map(item => {
             const isMenu = item.id === '_menu';
             const isActive = isMenu ? menuOpen : active === item.id;
@@ -243,23 +226,24 @@ function BottomNav({ active, setActive, user, updateInfo, onUpdateClick }) {
                 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' }}>
+                  cursor:'pointer', position:'relative', minWidth:0, padding:'0 4px' }}>
                 {isMenu && updateInfo?.hasUpdate && (
-                <span style={{ position:'absolute', top:8, right:'calc(50% - 14px)',
+                  <span style={{ position:'absolute', top:6, right:'calc(50% - 16px)',
-                  width:7, height:7, borderRadius:'50%', background:'#ffe66d',
+                    width:8, height:8, borderRadius:'50%', background:'#ffe66d',
                     boxShadow:'0 0 6px #ffe66d', display:'inline-block' }} />
                 )}
-              <span style={{ fontSize:18, lineHeight:1 }}>{item.icon}</span>
+                <span style={{ fontSize:20, lineHeight:1 }}>{item.icon}</span>
-              <span style={{ fontSize:9, fontFamily:'monospace',
+                <span style={{ fontSize:9, fontFamily:'monospace', letterSpacing:0.3,
-                color: isActive ? '#4ecdc4' : 'rgba(255,255,255,0.4)',
+                  color: isActive ? '#4ecdc4' : 'rgba(255,255,255,0.4)' }}>{item.label}</span>
-                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' }} />
+                    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}/>