Restructure project to root layout

src/components/PickItemRow.tsx

@@ -0,0 +1,52 @@
+import { Chip, Stack, Typography } from '@mui/material';
+import { PickItem, PickItemStatus } 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;
+}
+
+const statusColor: Record<PickItemStatus, 'default' | 'success' | 'warning'> = {
+  pending: 'default',
+  picked: 'success',
+  skipped: 'warning',
+};
+
+export const PickItemRow = ({
+  item,
+  product,
+  onIncrementUnit,
+  onIncrementBulk,
+  onSwipeLeft,
+  onSwipeRight,
+}: PickItemRowProps) => {
+  const longPressHandlers = useLongPress({ onLongPress: onIncrementBulk, onClick: onIncrementUnit });
+  const swipeHandlers = useSwipe({ onSwipeLeft, onSwipeRight });
+
+  return (
+    <Stack
+      direction="row"
+      alignItems="center"
+      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>
+  );
+};