u

src/components/tiles/CategoryTile.jsx

@@ -8,6 +8,7 @@ import AccountTreeIcon from '@mui/icons-material/AccountTree';
 import SettingsIcon from '@mui/icons-material/Settings';
 import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import ThumbHashImage from '../article/ThumbHashImage';
 import { thumb } from '../../api';
 import { tileBaseSx } from 'dashgui/tiles';
@@ -20,6 +21,7 @@ import { tileBaseSx } from 'dashgui/tiles';
 function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick }) {
   const isTerminalMode = settingsTab >= 0 && settingsTab < terminalCount;
   const isPhotoMode = settingsTab === -2;
+  const isDeleteMode = settingsTab === -3;
 
   const handleSx = {
     position: 'absolute',
@@ -61,13 +63,19 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
           ...handleSx,
           left: '50%',
           transform: 'translate(-50%, -50%)',
-          color: isTerminalMode || isPhotoMode ? 'primary.main' : 'common.white',
+          color: isDeleteMode
+            ? 'error.main'
+            : isTerminalMode || isPhotoMode
+            ? 'primary.main'
+            : 'common.white',
         }}
       >
         {isTerminalMode ? (
           <PointOfSaleIcon sx={{ fontSize: 28 }} />
         ) : isPhotoMode ? (
           <PhotoCameraIcon sx={{ fontSize: 28 }} />
+        ) : isDeleteMode ? (
+          <DeleteOutlinedIcon sx={{ fontSize: 28 }} />
         ) : (
           <SettingsIcon sx={{ fontSize: 28 }} />
         )}
@@ -94,7 +102,8 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
 /**
  * Middle row (1/3): gray band — TextField or terminal toggle.
  */
-function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds, onTerminalToggle, onPhotoUpload, onPhotoDelete, fullHash }) {
+function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds, onTerminalToggle, fullHash }) {
+  const isActionTab = settingsTab === -2 || settingsTab === -3;
   const fillSx = {
     width: '100%',
     height: '100%',
@@ -103,6 +112,13 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
     justifyContent: 'center',
     bgcolor: 'grey.300',
     px: 1,
+    ...(isActionTab
+      ? {
+          '&:hover': {
+            bgcolor: settingsTab === -3 ? 'rgba(211, 47, 47, 0.12)' : 'grey.400',
+          },
+        }
+      : {}),
   };
 
   // Show terminal-specific toggle when on a terminal tab
@@ -139,9 +155,27 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
           <Typography
             variant="caption"
             noWrap
-            sx={{ maxWidth: 80, color: 'text.secondary' }}
+            sx={{ maxWidth: 100, color: 'text.secondary' }}
           >
-            {fullHash ? 'Löschen' : 'Hochladen'}
+            {fullHash ? 'Bild löschen' : 'Hochladen'}
+          </Typography>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Show category deletion UI when on delete tab
+  if (settingsTab === -3) {
+    return (
+      <Box sx={fillSx}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <DeleteOutlinedIcon sx={{ fontSize: 20, color: 'error.main' }} />
+          <Typography
+            variant="caption"
+            noWrap
+            sx={{ maxWidth: 120, color: 'error.main', fontWeight: 600 }}
+          >
+            Kategorie löschen
           </Typography>
         </Box>
       </Box>
@@ -218,7 +252,7 @@ class CategoryBackdrop extends PureComponent {
  *               lower half = gray band with chevrons + delete
  */
 export class CategoryTile extends Component {
-  state = { settingsTab: -1 }; // -1 = rename, -2 = photo, 0..n-1 = terminal index
+  state = { settingsTab: -1 }; // -1 = rename, -2 = photo, -3 = delete, 0..n-1 = terminal index
 
   handleClick = () => {
     this.props.onClick?.();
@@ -235,22 +269,33 @@ export class CategoryTile extends Component {
     const { terminals } = this.props;
     const terminalCount = terminals?.length || 0;
     this.setState((prev) => {
-      const next = prev.settingsTab + 1;
-      // Cycle: photo (-2) → rename (-1) → terminal 0 → ... → terminal n-1 → photo (-2)
-      const nextTab = next >= terminalCount ? -2 : next;
+      let nextTab;
+      if (prev.settingsTab === -1) {
+        nextTab = terminalCount > 0 ? 0 : -2;
+      } else if (prev.settingsTab >= 0 && prev.settingsTab < terminalCount - 1) {
+        nextTab = prev.settingsTab + 1;
+      } else if (prev.settingsTab === terminalCount - 1 || prev.settingsTab >= 0) {
+        nextTab = -2;
+      } else if (prev.settingsTab === -2) {
+        nextTab = -3;
+      } else {
+        nextTab = -1;
+      }
       return { settingsTab: nextTab };
     });
   };
 
   handleMiddleBandClick = () => {
     const { settingsTab } = this.state;
-    const { onPhotoUpload, onPhotoDelete, fullHash } = this.props;
+    const { onPhotoUpload, onPhotoDelete, fullHash, onDelete } = this.props;
     if (settingsTab === -2) {
       if (fullHash) {
         onPhotoDelete?.();
       } else {
         onPhotoUpload?.();
       }
+    } else if (settingsTab === -3) {
+      onDelete?.();
     }
   };
 
@@ -302,6 +347,7 @@ export class CategoryTile extends Component {
       onPhotoDelete,
       onPlacementClick,
       onOpen,
+      onDelete,
       ...rest
     } = this.props;
     const { settingsTab } = this.state;
@@ -328,7 +374,7 @@ export class CategoryTile extends Component {
             bottom: '33.33%',
             left: 0,
             right: 0,
-            cursor: settingsTab === -2 ? 'pointer' : 'default',
+            cursor: settingsTab === -2 || settingsTab === -3 ? 'pointer' : 'default',
           }}
         >
           <MiddleBand