u

src/components/tiles/CategoryTile.jsx

@@ -9,6 +9,7 @@ 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 DeleteForeverOutlinedIcon from '@mui/icons-material/DeleteForeverOutlined';
 import { getThumbHashDataUrl, isImageLoaded, markImageLoaded } from '../article/ThumbHashImage';
 import { thumb } from '../../api';
 import { tileBaseSx } from 'dashgui/tiles';
@@ -28,6 +29,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
   const isTerminalMode = settingsTab >= 0 && settingsTab < terminalCount;
   const isPhotoMode = settingsTab === -2;
   const isDeleteMode = settingsTab === -3;
+  const isRecursiveDeleteMode = settingsTab === -4;
 
   const handleSx = {
     position: 'absolute',
@@ -69,7 +71,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
           ...handleSx,
           left: '50%',
           transform: 'translate(-50%, -50%)',
-          color: isDeleteMode
+          color: isDeleteMode || isRecursiveDeleteMode
             ? 'error.main'
             : isTerminalMode || isPhotoMode
               ? 'primary.main'
@@ -82,6 +84,8 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
           <PhotoCameraIcon sx={{ fontSize: 28 }} />
         ) : isDeleteMode ? (
           <DeleteOutlinedIcon sx={{ fontSize: 28 }} />
+        ) : isRecursiveDeleteMode ? (
+          <DeleteForeverOutlinedIcon sx={{ fontSize: 28 }} />
         ) : (
           <SettingsIcon sx={{ fontSize: 28 }} />
         )}
@@ -109,7 +113,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
  * Middle row (1/3): gray band — TextField or terminal toggle.
  */
 function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds, onTerminalToggle, fullHash }) {
-  const isActionTab = settingsTab === -2 || settingsTab === -3;
+  const isActionTab = settingsTab === -2 || settingsTab === -3 || settingsTab === -4;
   const fillSx = {
     width: '100%',
     height: '100%',
@@ -121,7 +125,7 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
     ...(isActionTab
       ? {
         '&:hover': {
-          bgcolor: settingsTab === -3 ? RED_TINT : 'grey.400',
+          bgcolor: (settingsTab === -3 || settingsTab === -4) ? RED_TINT : 'grey.400',
         },
       }
       : {}),
@@ -188,6 +192,24 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
     );
   }
 
+  // Show recursive category deletion UI when on recursive delete tab
+  if (settingsTab === -4) {
+    return (
+      <Box sx={fillSx}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <DeleteForeverOutlinedIcon sx={{ fontSize: 20, color: 'error.main' }} />
+          <Typography
+            variant="caption"
+            noWrap
+            sx={{ maxWidth: 120, color: 'error.main', fontWeight: 600 }}
+          >
+            Rekursiv löschen
+          </Typography>
+        </Box>
+      </Box>
+    );
+  }
+
   return (
     <Box sx={fillSx}>
       {nameInput}
@@ -277,7 +299,7 @@ class CategoryBackdrop extends PureComponent {
  *               lower half = gray band with chevrons + delete
  */
 export class CategoryTile extends Component {
-  state = { settingsTab: -1 }; // -1 = rename, -2 = photo, -3 = delete, 0..n-1 = terminal index
+  state = { settingsTab: -1 }; // -1 = rename, -2 = photo, -3 = delete, -4 = delete recursive, 0..n-1 = terminal index
 
   handleClick = () => {
     this.props.onClick?.();
@@ -303,6 +325,8 @@ export class CategoryTile extends Component {
         nextTab = -2;
       } else if (prev.settingsTab === -2) {
         nextTab = -3;
+      } else if (prev.settingsTab === -3) {
+        nextTab = -4;
       } else {
         nextTab = -1;
       }
@@ -312,7 +336,7 @@ export class CategoryTile extends Component {
 
   handleMiddleBandClick = () => {
     const { settingsTab } = this.state;
-    const { onPhotoUpload, onPhotoDelete, fullHash, onDelete } = this.props;
+    const { onPhotoUpload, onPhotoDelete, fullHash, onDelete, onDeleteRecursive } = this.props;
     if (settingsTab === -2) {
       if (fullHash) {
         onPhotoDelete?.();
@@ -321,6 +345,8 @@ export class CategoryTile extends Component {
       }
     } else if (settingsTab === -3) {
       onDelete?.();
+    } else if (settingsTab === -4) {
+      onDeleteRecursive?.();
     }
   };
 
@@ -373,6 +399,7 @@ export class CategoryTile extends Component {
       onPlacementClick,
       onOpen,
       onDelete,
+      onDeleteRecursive,
       ...rest
     } = this.props;
     const { settingsTab } = this.state;
@@ -399,7 +426,10 @@ export class CategoryTile extends Component {
             bottom: '33.33%',
             left: 0,
             right: 0,
-            cursor: settingsTab === -2 || settingsTab === -3 ? 'pointer' : 'default',
+            cursor:
+              settingsTab === -2 || settingsTab === -3 || settingsTab === -4
+                ? 'pointer'
+                : 'default',
           }}
         >
           <MiddleBand