Use icon buttons for pick item actions

src/components/PickItemRow.tsx

@@ -1,5 +1,5 @@
-import { Add, Delete } from '@mui/icons-material';
+import { Add, Delete, Remove, SwapHoriz } from '@mui/icons-material';
-import { Button, Checkbox, IconButton, Stack, Typography } from '@mui/material';
+import { Checkbox, IconButton, Stack, Typography } from '@mui/material';
 import { PickItem } from '../models/PickItem';
 import { Product } from '../models/Product';
 
@@ -7,6 +7,7 @@ interface PickItemRowProps {
   item: PickItem;
   product?: Product | null;
   onIncrementQuantity: () => void;
+  onDecrementQuantity: () => void;
   onToggleCarton: () => void;
   onStatusChange: (status: PickItem['status']) => void;
   onDelete: () => void;
@@ -16,6 +17,7 @@ export const PickItemRow = ({
   item,
   product,
   onIncrementQuantity,
+  onDecrementQuantity,
   onToggleCarton,
   onStatusChange,
   onDelete,
@@ -54,16 +56,27 @@ export const PickItemRow = ({
       </Stack>
 
       <Stack direction="row" spacing={1} alignItems="center">
-        <Button
+        <IconButton
-          variant={item.is_carton ? 'contained' : 'outlined'}
+          aria-label={`Toggle packaging type (currently ${item.is_carton ? 'carton' : 'unit'})`}
-          size="small"
+          color={item.is_carton ? 'primary' : 'default'}
           onClick={onToggleCarton}
         >
-          {item.is_carton ? 'Carton' : 'Unit'}
+          <SwapHoriz />
-        </Button>
+        </IconButton>
-        <Button variant="contained" size="small" startIcon={<Add />} onClick={onIncrementQuantity}>
+        <IconButton
-          Add 1
+          aria-label="Decrease quantity"
-        </Button>
+          color="primary"
+          onClick={onDecrementQuantity}
+        >
+          <Remove />
+        </IconButton>
+        <IconButton
+          aria-label="Increase quantity"
+          color="primary"
+          onClick={onIncrementQuantity}
+        >
+          <Add />
+        </IconButton>
         <IconButton color="error" onClick={onDelete} aria-label="Delete item">
           <Delete />
         </IconButton>

src/screens/ActivePickListScreen.tsx

@@ -29,6 +29,18 @@ export const ActivePickListScreen = () => {
     });
   };
 
+  const handleDecrementQuantity = async (itemId: string) => {
+    const existing = await db.pickItems.get(itemId);
+    if (!existing) return;
+
+    const nextQuantity = Math.max(1, (existing.quantity || 1) - 1);
+
+    await db.pickItems.update(itemId, {
+      quantity: nextQuantity,
+      updated_at: Date.now(),
+    });
+  };
+
   const handleToggleCarton = async (itemId: string) => {
     const existing = await db.pickItems.get(itemId);
     if (!existing) return;
@@ -73,6 +85,7 @@ export const ActivePickListScreen = () => {
             item={item}
             product={products.find((p) => p.id === item.product_id)}
             onIncrementQuantity={() => handleIncrementQuantity(item.id)}
+            onDecrementQuantity={() => handleDecrementQuantity(item.id)}
             onToggleCarton={() => handleToggleCarton(item.id)}
             onStatusChange={(status) => handleStatusChange(item.id, status)}
             onDelete={() => handleDeleteItem(item.id)}