Redesign pick lists for reuse

src/screens/StartPickListScreen.tsx

@@ -10,18 +10,27 @@ export const StartPickListScreen = () => {
   const db = useDatabase();
   const navigate = useNavigate();
   const [areaId, setAreaId] = useState('');
+  const [notes, setNotes] = useState('');
 
   const start = async () => {
     if (!areaId) return;
     const pickListId = uuidv4();
-    await db.pickLists.add({ id: pickListId, area_id: areaId, created_at: Date.now() });
+    await db.pickLists.add({
+      id: pickListId,
+      area_id: areaId,
+      created_at: Date.now(),
+      notes: notes.trim() || undefined,
+    });
     navigate(`/pick-lists/${pickListId}`);
   };
 
   return (
     <Container sx={{ py: 4 }}>
       <Typography variant="h5" gutterBottom>
-        Start Pick List
+        Create Pick List
+      </Typography>
+      <Typography variant="body2" color="text.secondary" gutterBottom>
+        Pick lists are reusable. Create one for each store area and update it anytime you restock.
       </Typography>
       <Stack spacing={2}>
         <TextField
@@ -37,8 +46,15 @@ export const StartPickListScreen = () => {
             </MenuItem>
           ))}
         </TextField>
+        <TextField
+          label="Notes (optional)"
+          value={notes}
+          onChange={(event) => setNotes(event.target.value)}
+          multiline
+          minRows={2}
+        />
         <Button variant="contained" disabled={!areaId} onClick={start}>
-          Start
+          Save Pick List
         </Button>
       </Stack>
     </Container>