Dateien nach "frontend/src/tools" hochladen

frontend/src/tools/dateien.jsx

@@ -166,8 +166,8 @@ export default function Dateien({ toast, mobile }) {
   const sq = search.toLowerCase();
   const currentFolders = tab==='own' ? folders.own : folders.shared;
   const currentFiles   = tab==='own' ? data.own    : data.shared;
-  const currentFolders2 = tab==='sharedByMe' ? (folders.sharedByMe||[]) : currentFolders;
+  const currentFolders2 = tab==='sharedByMe' ? (folders.sharedByMe||[]) : (tab==='shared' ? (folders.shared||[]) : folders.own);
-  const currentFiles2   = tab==='sharedByMe' ? (data.sharedByMe||[])   : currentFiles;
+  const currentFiles2   = tab==='sharedByMe' ? (data.sharedByMe||[])   : (tab==='shared' ? data.shared : data.own);
   const filtFolders = sq ? currentFolders2.filter(f=>f.name.toLowerCase().includes(sq)) : currentFolders2;
   const filtFiles   = sq ? currentFiles2.filter(f=>f.originalname.toLowerCase().includes(sq)) : currentFiles2;
 
@@ -193,17 +193,29 @@ export default function Dateien({ toast, mobile }) {
         </div>
       </div>
 
-      {/* Tabs */}
+      {/* Tabs + Ordner-Button */}
       {!currentFolderId && (
-        <div style={{display:'flex',gap:6,marginBottom:12}}>
+        <div style={{display:'flex',gap:6,marginBottom:12,flexWrap:'wrap',alignItems:'center'}}>
-          {[['own','Meine Dateien'],['shared','Geteilt mit mir']].map(([k,l])=>(
+          {[
+            ['own','Meine Dateien', null],
+            ['shared','Geteilt mit mir', data.shared.length + (folders.shared||[]).length],
+            ['sharedByMe','Geteilt von mir', (data.sharedByMe||[]).length + (folders.sharedByMe||[]).length],
+          ].map(([k,l,cnt])=>(
             <button key={k} onClick={()=>{setTab(k);setSearch('');}} style={{
               padding:'5px 14px',borderRadius:20,fontFamily:'monospace',fontSize:11,cursor:'pointer',
               border:`1px solid ${tab===k?'rgba(78,205,196,0.5)':'rgba(255,255,255,0.1)'}`,
               background:tab===k?'rgba(78,205,196,0.12)':'transparent',
               color:tab===k?'#4ecdc4':'rgba(255,255,255,0.5)',
-            }}>{l}</button>
+            }}>{l}{cnt>0?` (${cnt})`:''}</button>
           ))}
+          {tab==='own' && (
+            <button onClick={()=>setNewFolder(true)} style={{
+              marginLeft:'auto', padding:'5px 12px', borderRadius:20, fontFamily:'monospace', fontSize:11,
+              cursor:'pointer', border:'1px solid rgba(255,255,255,0.15)',
+              background:'rgba(255,255,255,0.05)', color:'rgba(255,255,255,0.6)',
+              display:'flex', alignItems:'center', gap:5,
+            }}>📁 + Ordner</button>
+          )}
         </div>
       )}
 
@@ -229,15 +241,16 @@ export default function Dateien({ toast, mobile }) {
         </div>
       )}
 
-      {/* Neuer Ordner */}
+      {/* Neuer Ordner Formular */}
       {newFolder && (
         <div style={{...S.card,marginBottom:10,display:'flex',gap:8,alignItems:'center'}}>
+          <span style={{fontSize:18}}>📁</span>
           <input value={folderName} onChange={e=>setFolderName(e.target.value)}
             onKeyDown={e=>{if(e.key==='Enter')createFolder();if(e.key==='Escape'){setNewFolder(false);setFolderName('');}}}
             placeholder="Ordnername…" autoFocus
             style={{...S.inp,flex:1,fontSize:15}}/>
-          <button onClick={createFolder} style={{background:'transparent',border:'1px solid rgba(78,205,196,0.4)',borderRadius:7,padding:'6px 12px',color:'#4ecdc4',cursor:'pointer',fontFamily:'monospace',fontSize:12}}>✓</button>
+          <button onClick={createFolder} style={S.btn('#4ecdc4')}>✓</button>
-          <button onClick={()=>{setNewFolder(false);setFolderName('');}} style={{background:'transparent',border:'1px solid rgba(255,107,157,0.4)',borderRadius:7,padding:'6px 12px',color:'#ff6b9d',cursor:'pointer',fontFamily:'monospace',fontSize:12}}>✕</button>
+          <button onClick={()=>{setNewFolder(false);setFolderName('');}} style={S.btn('#ff6b9d',true)}>✕</button>
         </div>
       )}