u

src/components/tiles/CategoryTile.jsx

@@ -5,9 +5,6 @@ import IconButton from '@mui/material/IconButton';
 import Switch from '@mui/material/Switch';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import AccountTreeIcon from '@mui/icons-material/AccountTree';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import SettingsIcon from '@mui/icons-material/Settings';
 import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
@@ -20,7 +17,7 @@ import { tileBaseSx } from 'dashgui/tiles';
  * Icons are pinned to exact thirds (left / center / right) so they stay
  * evenly spread regardless of icon size or button padding.
  */
-function TopBand({ onSettingsClick, settingsTab, terminalCount }) {
+function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick }) {
   const isTerminalMode = settingsTab >= 0 && settingsTab < terminalCount;
   const isPhotoMode = settingsTab === -2;
 
@@ -76,14 +73,16 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount }) {
         )}
       </IconButton>
       <IconButton
-        className="droppable-handle"
-        aria-label="In Unterkategorie ablegen"
+        aria-label="Kategorie verschieben"
         disableRipple
+        onClick={(e) => {
+          e.stopPropagation();
+          onPlacementClick?.();
+        }}
         sx={{
           ...handleSx,
           right: 0,
-          cursor: 'grab',
-          '&:active': { cursor: 'grabbing' },
+          cursor: 'pointer',
         }}
       >
         <AccountTreeIcon sx={{ fontSize: 36 }} />
@@ -156,83 +155,6 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
   );
 }
 
-/**
- * Bottom row (1/3): split into two sub-rows (each 1/6 of tile).
- *   Upper: click zone → navigate into category.
- *   Lower: gray band — left chevron | delete | right chevron.
- */
-function BottomRow({ onOpen, editBand }) {
-  return (
-    <Box
-      sx={{
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: '33.33%',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      {/* Upper half: click-through to open category */}
-      <Box
-        role="button"
-        tabIndex={0}
-        onClick={onOpen}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            onOpen?.();
-          }
-        }}
-        sx={{
-          flex: 1,
-          cursor: 'pointer',
-          '&:hover': { bgcolor: 'action.hover' },
-        }}
-      />
-
-      {/* Lower half: reorder & delete */}
-      <Box
-        sx={{
-          height: '50%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          px: 0.5,
-          bgcolor: 'grey.400',
-        }}
-      >
-        <IconButton
-          className="sortable-handle-btn"
-          size="small"
-          aria-label="Nach links verschieben"
-          disabled={!editBand.canLeft}
-          onClick={editBand.onMoveLeft}
-        >
-          <ChevronLeftIcon sx={{ fontSize: 18 }} />
-        </IconButton>
-        <IconButton
-          className="sortable-handle-btn"
-          size="small"
-          aria-label="Löschen"
-          onClick={editBand.onDelete}
-        >
-          <DeleteOutlinedIcon sx={{ fontSize: 18 }} />
-        </IconButton>
-        <IconButton
-          className="sortable-handle-btn"
-          size="small"
-          aria-label="Nach rechts verschieben"
-          disabled={!editBand.canRight}
-          onClick={editBand.onMoveRight}
-        >
-          <ChevronRightIcon sx={{ fontSize: 18 }} />
-        </IconButton>
-      </Box>
-    </Box>
-  );
-}
 
 /**
  * Renders a ThumbHash preview and the full thumbnail as backdrop for a category tile.
@@ -373,13 +295,13 @@ export class CategoryTile extends Component {
       fullHash,
       onClick,
       nameInput,
-      editBand,
-      onOpen,
       terminals,
       categoryPosterminalIds,
       onTerminalToggle,
       onPhotoUpload,
       onPhotoDelete,
+      onPlacementClick,
+      onOpen,
       ...rest
     } = this.props;
     const { settingsTab } = this.state;
@@ -396,6 +318,7 @@ export class CategoryTile extends Component {
           onSettingsClick={this.handleSettingsToggle}
           settingsTab={settingsTab}
           terminalCount={terminals?.length || 0}
+          onPlacementClick={onPlacementClick}
         />
         <Box
           onClick={this.handleMiddleBandClick}
@@ -417,7 +340,30 @@ export class CategoryTile extends Component {
             fullHash={fullHash}
           />
         </Box>
-        <BottomRow onOpen={onOpen} editBand={editBand} />
+        {/* Lower third: clickable in edit mode to open/navigate into category */}
+        <Box
+          role="button"
+          tabIndex={0}
+          aria-label="Kategorie öffnen"
+          onClick={onOpen || onClick}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              (onOpen || onClick)?.();
+            }
+          }}
+          sx={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: '33.33%',
+            cursor: 'pointer',
+            '&:hover': {
+              bgcolor: 'action.hover',
+            },
+          }}
+        />
       </>
     ) : (
       this.renderLabel()