feat: implementere oversikt for aktiv-shopping lister (#62)

[taraa]

Beskrivelse

Implementerer oversikt over aktive handlelister basert på Figma-designet.

Closes #62

Implementert funksjonalitet

• Opprettet ShoppingListsPage og ShoppingListCard.
• Lagt til TypeScript-typer for handlelister.
• Viser listenavn, produkter, antall varer, totalpris og hvilken liste som er i bruk.
• Implementert fire handlelister per rad på desktop, med automatisk plassering på nye rader.
• Lagt til ... når en handleliste inneholder mer enn fire varelinjer.
• Implementert notatblokkdesign med rosa marg, teip og håndskrift.
• Lagt til rutete bakgrunn og fanene «Aktive / Tidligere».
• Tilpasset designet til prosjektets lys- og mørkmodus.
• Bruker foreløpig mockdata frem til GraphQL-integrasjonen er klar.

Skjermbilder

Darkmode

Lightmode

Mobilvisning

Testing

• npm run build fullført uten feil.
• Testet visuelt i lys og mørk modus.
• Testet visning av fire handlelister per rad.
• Testet ... ved mer enn fire varelinjer.
• Teste responsiv layout på mobil og nettbrett.

Gjenstående funksjonalitet og relaterte issues

#58 – Detaljside for aktiv handleliste

Handlelistekortene navigerer til /lists/:id, men detaljsiden er ikke koblet til ennå. Dette må integreres med eksisterende arbeid i #58.

#63 – GraphQL-integrasjon

Handle

[ingrihka]

Ser bra ut!