## Beskrivelse Når brukeren trykker på en aktiv handleliste i oversikten «Mine handlelister», skal hun komme inn på selve listen (for eksempel «Fredagshandel»). Der skal hun se og redigere varene på lappen. ## Foreslått løsning - Ny side `pages/shoppingList/ShoppingListPage.tsx` med CSS, bygget fra Figma («Active shopping list») - Notatblokk med listenavn, dato, listenummer og «X av Y krysset av» - Varerader med avkrysning, antall (−/+), notat, pris og fjern-knapp - Avkryssede varer blir stående, men streket over - «Legg til vare» nederst på lappen - Oppsummering til høyre: antall varer, krysset av, billigst hos, spart mot dyreste og estimert sum - Knappene «Start handletur», «Finn flere varer» og «Del lappen» - Bruker felles komponenter (`noteItem`, `checkbox`, `quantityStepper`, `button`) og variabler fra `theme.css`, slik at siden følger lys og mørk modus - Starter med midlertidige data og kobles til GraphQL (`shoppingList(id)`) etterpå ## Akseptansekriterier - [x] Siden følger Figma-designet - [x] Varer kan krysses av, og antallet kan endres - [x] Oppsummeringen regnes ut fra varene - [x] Fungerer i lys og mørk modus - [x] Responsiv: oppsummeringen legger seg under listen på mobil - [x] Semantisk HTML og tastaturnavigering ## Design/mockup Figma: «Active shopping list» (FIG. 8 – Notatblokken) ## Avhengigheter - Rute fra oversikten «Mine handlelister» (Tara), for eksempel `/lists/:id` - Backend-mutasjoner for å krysse av, endre antall og fjerne varer