u

src/components/vfs/VfsFileExplorer.jsx

@@ -2,18 +2,14 @@ import React, { PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
-import Button from '@mui/material/Button';
 import InputBase from '@mui/material/InputBase';
-import Tooltip from '@mui/material/Tooltip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Chip from '@mui/material/Chip';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import ClearRoundedIcon from '@mui/icons-material/ClearRounded';
-import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
 import NoteAddRoundedIcon from '@mui/icons-material/NoteAddRounded';
 import CloudUploadRoundedIcon from '@mui/icons-material/CloudUploadRounded';
 import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
@@ -28,7 +24,7 @@ import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRigh
 import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
 import ChatBubbleOutlineRoundedIcon from '@mui/icons-material/ChatBubbleOutlineRounded';
 
-import VfsFileIcon, { getCategoryBadge } from './VfsFileIcon';
+import VfsFileIcon from './VfsFileIcon';
 import { formatVfsSize, formatVfsDate } from './vfsUtils';
 
 /**
@@ -336,7 +332,6 @@ export default class VfsFileExplorer extends PureComponent {
   renderFileNode = (file, depth) => {
     const { selectedFileName, onSelectFile } = this.props;
     const isSelected = file.path === selectedFileName;
-    const badge = getCategoryBadge(file.path, file.fileData.mime);
 
     return (
       <Box
@@ -375,29 +370,14 @@ export default class VfsFileExplorer extends PureComponent {
         />
 
         <Box sx={{ minWidth: 0, flexGrow: 1, pr: 1 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-            <Typography
-              variant="body2"
-              fontWeight={isSelected ? 600 : 500}
-              noWrap
-              sx={{ fontFamily: 'monospace', fontSize: '0.82rem' }}
-            >
-              {file.name}
-            </Typography>
-            <Chip
-              label={badge.label}
-              size="small"
-              sx={{
-                height: 17,
-                fontSize: '0.62rem',
-                fontWeight: 600,
-                borderRadius: 1,
-                bgcolor: (theme) =>
-                  theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)',
-                color: badge.color,
-              }}
-            />
-          </Box>
+          <Typography
+            variant="body2"
+            fontWeight={isSelected ? 600 : 500}
+            noWrap
+            sx={{ fontFamily: 'monospace', fontSize: '0.82rem' }}
+          >
+            {file.name}
+          </Typography>
 
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.25, mt: 0.15 }}>
             <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
@@ -417,24 +397,14 @@ export default class VfsFileExplorer extends PureComponent {
           sx={{
             display: 'flex',
             alignItems: 'center',
-            gap: 0.2,
             opacity: isSelected ? 1 : 0.7,
             '&:hover': { opacity: 1 },
           }}
         >
-          <Tooltip title="Herunterladen">
-            <IconButton
-              size="small"
-              onClick={() => this.props.onDownload(file.path)}
-              sx={{ p: 0.5 }}
-            >
-              <DownloadRoundedIcon sx={{ fontSize: 16 }} />
-            </IconButton>
-          </Tooltip>
-
           <IconButton
             size="small"
             onClick={(e) => this.handleOpenMenu(e, file.fileData)}
+            aria-label="Weitere Optionen"
             sx={{ p: 0.5 }}
           >
             <MoreVertRoundedIcon sx={{ fontSize: 16 }} />
@@ -561,62 +531,22 @@ export default class VfsFileExplorer extends PureComponent {
           </Box>
         )}
 
-        {/* Explorer Header / Actions */}
+        {/* Explorer Header / Actions Row */}
         <Box
           sx={{
-            p: 1.5,
+            p: 1.25,
             borderBottom: 1,
             borderColor: 'divider',
             display: 'flex',
-            flexDirection: 'column',
-            gap: 1.25,
+            alignItems: 'center',
+            gap: 0.5,
             flexShrink: 0,
           }}
         >
-          {/* Top Bar with Action Buttons */}
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
-              {loading && <CircularProgress size={16} thickness={4} />}
-            </Box>
-
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, ml: 'auto' }}>
-              <Tooltip title="Aktualisieren">
-                <span>
-                  <IconButton size="small" onClick={onRefresh} disabled={loading} sx={{ p: 0.6 }}>
-                    <RefreshRoundedIcon fontSize="small" />
-                  </IconButton>
-                </span>
-              </Tooltip>
-
-              <Tooltip title="Datei(en) hochladen">
-                <Button
-                  size="small"
-                  variant="outlined"
-                  startIcon={<CloudUploadRoundedIcon />}
-                  onClick={this.handleTriggerUpload}
-                  sx={{ borderRadius: 2, py: 0.3, px: 1, fontSize: '0.75rem' }}
-                >
-                  Upload
-                </Button>
-              </Tooltip>
-
-              <Tooltip title="Neue Datei anlegen">
-                <Button
-                  size="small"
-                  variant="contained"
-                  startIcon={<NoteAddRoundedIcon />}
-                  onClick={onOpenNewDialog}
-                  sx={{ borderRadius: 2, py: 0.3, px: 1, fontSize: '0.75rem' }}
-                >
-                  Neu
-                </Button>
-              </Tooltip>
-            </Box>
-          </Box>
-
           {/* Search Filter Bar */}
           <Box
             sx={(theme) => ({
+              flexGrow: 1,
               display: 'flex',
               alignItems: 'center',
               px: 1,
@@ -638,12 +568,33 @@ export default class VfsFileExplorer extends PureComponent {
               onChange={(e) => onSearchChange(e.target.value)}
               sx={{ fontSize: '0.82rem' }}
             />
+            {loading && <CircularProgress size={14} thickness={4} sx={{ mr: 0.5 }} />}
             {searchQuery && (
               <IconButton size="small" onClick={() => onSearchChange('')} sx={{ p: 0.2 }}>
                 <ClearRoundedIcon sx={{ fontSize: 16 }} />
               </IconButton>
             )}
           </Box>
+
+          {/* Upload Icon Button (no word) */}
+          <IconButton
+            size="small"
+            onClick={this.handleTriggerUpload}
+            aria-label="Datei(en) hochladen"
+            sx={{ p: 0.75 }}
+          >
+            <CloudUploadRoundedIcon fontSize="small" />
+          </IconButton>
+
+          {/* New File Icon Button (no word) */}
+          <IconButton
+            size="small"
+            onClick={onOpenNewDialog}
+            aria-label="Neue Datei anlegen"
+            sx={{ p: 0.75 }}
+          >
+            <NoteAddRoundedIcon fontSize="small" />
+          </IconButton>
         </Box>
 
         {/* Scrollable File List */}