Update interaction guidance for checkbox model

src/components/PickItemRow.tsx

@@ -1,34 +1,24 @@
-import { Chip, Stack, Typography } from '@mui/material';
-import { PickItem, PickItemStatus } from '../models/PickItem';
+import { Add } from '@mui/icons-material';
+import { Button, Checkbox, Stack, Typography } from '@mui/material';
+import { PickItem } from '../models/PickItem';
 import { Product } from '../models/Product';
-import { useLongPress } from '../hooks/useLongPress';
-import { useSwipe } from '../hooks/useSwipe';
 
 interface PickItemRowProps {
   item: PickItem;
   product?: Product | null;
   onIncrementUnit: () => void;
   onIncrementBulk: () => void;
-  onSwipeLeft: () => void;
-  onSwipeRight: () => void;
+  onToggleStatus: () => void;
 }
 
-const statusColor: Record<PickItemStatus, 'default' | 'success' | 'warning'> = {
-  pending: 'default',
-  picked: 'success',
-  skipped: 'warning',
-};
-
 export const PickItemRow = ({
   item,
   product,
   onIncrementUnit,
   onIncrementBulk,
-  onSwipeLeft,
-  onSwipeRight,
+  onToggleStatus,
 }: PickItemRowProps) => {
-  const longPressHandlers = useLongPress({ onLongPress: onIncrementBulk, onClick: onIncrementUnit });
-  const swipeHandlers = useSwipe({ onSwipeLeft, onSwipeRight });
+  const isPicked = item.status === 'picked';
 
   return (
     <Stack
@@ -37,16 +27,29 @@ export const PickItemRow = ({
       justifyContent="space-between"
       spacing={1}
       sx={{ p: 1, borderRadius: 1, bgcolor: 'background.paper', boxShadow: 1 }}
-      {...longPressHandlers}
-      {...swipeHandlers}
     >
-      <div>
-        <Typography variant="subtitle1">{product?.name ?? 'Unknown product'}</Typography>
-        <Typography variant="caption" color="text.secondary">
-          {item.quantity_units} units / {item.quantity_bulk} bulk
-        </Typography>
-      </div>
-      <Chip label={item.status} color={statusColor[item.status]} size="small" />
+      <Stack direction="row" alignItems="center" spacing={1} flex={1}>
+        <Checkbox color="success" checked={isPicked} onChange={onToggleStatus} />
+        <Stack spacing={0.5} flex={1}>
+          <Typography
+            variant="subtitle1"
+            sx={{ textDecoration: isPicked ? 'line-through' : 'none', display: 'flex', gap: 0.5, alignItems: 'center' }}
+          >
+            {isPicked ? '✔️' : null} {product?.name ?? 'Unknown product'}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            {item.quantity_units} units / {item.quantity_bulk} bulk
+          </Typography>
+        </Stack>
+      </Stack>
+      <Stack direction="row" spacing={1}>
+        <Button variant="outlined" size="small" startIcon={<Add />} onClick={onIncrementUnit}>
+          Unit
+        </Button>
+        <Button variant="outlined" size="small" startIcon={<Add />} onClick={onIncrementBulk}>
+          Bulk
+        </Button>
+      </Stack>
     </Stack>
   );
 };

src/screens/ActivePickListScreen.tsx

@@ -37,12 +37,11 @@ export const ActivePickListScreen = () => {
     });
   };
 
-  const handleSwipeLeft = async (itemId: string) => {
-    await db.pickItems.update(itemId, { status: 'picked', updated_at: Date.now() });
-  };
-
-  const handleSwipeRight = async (itemId: string) => {
-    await db.pickItems.delete(itemId);
+  const handleToggleStatus = async (itemId: string) => {
+    const existing = await db.pickItems.get(itemId);
+    if (!existing) return;
+    const nextStatus = existing.status === 'picked' ? 'pending' : 'picked';
+    await db.pickItems.update(itemId, { status: nextStatus, updated_at: Date.now() });
   };
 
   const returnToLists = () => {
@@ -70,8 +69,7 @@ export const ActivePickListScreen = () => {
             product={products.find((p) => p.id === item.product_id)}
             onIncrementUnit={() => handleIncrementUnit(item.id)}
             onIncrementBulk={() => handleIncrementBulk(item.id)}
-            onSwipeLeft={() => handleSwipeLeft(item.id)}
-            onSwipeRight={() => handleSwipeRight(item.id)}
+            onToggleStatus={() => handleToggleStatus(item.id)}
           />
         ))}
       </Stack>