# Flutter Frontend - Användarguide

Detta dokument beskriver hur du använder Flutter-frontenden för Recipe App ur ett användar- och operatörsperspektiv.

## Senaste ändringar (2026-04-25)

**Arkitektur- och UX-förbättringar:**
- Grid-vy för recept: Kolumnval (2/4/6/8) via ikon i AppShell, med Riverpod-provider och SharedPreferences.
- RecipesScreen är nu body-only, ingen egen Scaffold/AppBar.
- AppShell visar grid-ikon endast på /recipes.
- Buggfix: Produktväljaren i pantry/inventarie (ProductPickerField) — bottenark implementeras.
- Kodkvalitet: Inga absoluta Windows-sökvägar.

**Nyheter och förbättringar:**
- **Fas 5: Matplan parity** — Veckovy, portionsjustering per dag, inköpslista och inventariejämförelse mot användarens pantry är nu fullt migrerade och user-scopade.
- **Fas 6a: Receptimport** — Importflöde för recept (fil/URL) är nu robust, med stöd för PDF, bild och ICA-länkar. Prefill av markdown och bild-url fungerar i Flutter.
- **Bildimport** — Backend och Flutter har förbättrats med robust bildhantering, normalisering av URL:er, fallback och diagnostikloggning.
- **User-scope för pantry och matplan** — Alla baslager- och matplansdata är nu per användare (inte globala).
- **UI/UX-förbättringar** — Produktval med bottenark (ProductPickerField), swipe-för-±1 på inventarielistan (SwipeableInventoryTile), och förbättrad felhantering.

## Vad appen är

Flutter-webben för Recipe App är en webbklient byggd med Flutter och körs i Docker med Caddy som proxy. Den är avsedd att ersätta den befintliga Next.js-frontenden och stödja framtida mobilklienter.

## Aktuella användarflöden
- Inloggning med användarnamn och lösenord.
- Receptlista efter inloggning.
- Profil-sida (grundversion).
- Utloggning från recept- och profil-sidor.

## Var man kommer åt appen
- Testmiljö: `https://test.gynther.se`

## Inloggningsdetaljer
- Inloggning förväntar sig användarnamn, inte e-post.
- Exempel på seedad admin-användare i backend: `Nadmin`.
- Lösenordet kontrolleras av servermiljövariabeln (`ADMIN_NADMIN_PASSWORD`).

## Kända begränsningar
- Kvittoimport (Fas 6b) är påbörjad men granskningssteg och bulk-spara återstår.
- Bildimport kräver att containrar är uppdaterade med senaste kod — kontrollera att diagnostikloggar syns vid felsökning.
- Vissa adminfunktioner och avancerad AI-integration är planerade men ej migrerade.

## Felsökning (användarnivå)
1. Om sidan visar gammalt beteende efter deployment: hård uppdatering eller öppna i inkognitoläge.
2. Om inloggning misslyckas: verifiera användarnamn/lösenord (inte e-post).

## Relaterade dokument
- [next_steps_flutter.md](next_steps_flutter.md)
- [teknisk_beskrivning_flutter.md](teknisk_beskrivning_flutter.md)

## Vad appen är

Detta är en Flutter Web frontend för Recipe App, som körs i Docker och exponeras via Caddy. Den är avsedd att bete sig som den befintliga webbfrontenden, men är byggd i Flutter för att stödja framtida Android- och iOS-klienter.

## Aktuella användarflöden
- Inloggning med användarnamn och lösenord.
- Receptlista efter inloggning.
- Profil-sida (grundversion).
- Utloggning från recept- och profil-sidor.

## Var man kommer åt appen
- Testmiljö: `https://test.gynther.se`

## Inloggningsdetaljer
- Inloggning förväntar sig användarnamn, inte e-post.
- Exempel på seedad admin-användare i backend: `Nadmin`.
- Lösenordet kontrolleras av servermiljövariabeln (`ADMIN_NADMIN_PASSWORD`).

## Kända begränsningar
- Kvittoimport (Fas 6b) är påbörjad men granskningssteg och bulk-spara återstår.
- Bildimport kräver att containrar är uppdaterade med senaste kod — kontrollera att diagnostikloggar syns vid felsökning.
- Vissa adminfunktioner och avancerad AI-integration är planerade men ej migrerade.

## Felsökning (användarnivå)
1. Om sidan visar gammalt beteende efter deployment: hård uppdatering eller öppna i inkognitoläge.
2. Om inloggning misslyckas: verifiera användarnamn/lösenord (inte e-post).
3. Om recept inte laddas: rapportera fel i webbläsarkonsolen/nätverksfelen till utvecklingsteamet.

## Förväntningar vid release

Denna frontend är tillgänglig för iterativ testning. Funktionell parity med den nuvarande produktionsfrontenden levereras stegvis.

## Konverteringsvägen och Onboarding
- **CTA (Call-to-Action):** Tydliga och lockande CTAs som "Se vad du kan laga med det du har hemma."
- **Förenkla onboarding:** Gästinloggning eller demo-läge, sociala inloggningar, välkomstguide, och pop-up-tips.
- **Snabb start med exempeldata:** Förifyllt exempeldata och "Snabbstart"-knapp.
- **Fokusera på "Aha!"-momentet:** Omedelbara receptförslag och automatiska inköpslistor.
- **Tydliga instruktioner och feedback:** Instruktioner för varje steg och omedelbar feedback.
- **Användarvänlig design:** Fokus på kärnfunktioner och enkelhet.
- **Möjlighet att hoppa över onboarding:** Knapp för att hoppa över onboarding.

## Testa och iterera
- Gå igenom appen som en ny användare för att identifiera eventuella problem.
- A/B-testa olika CTAs och onboarding-flöden.
- Implementera analytik för att spåra var användare hoppar av och varför.

## Anpassa till målgruppen
- Anpassa marknadsföring och CTAs till målgruppen (t.ex. familjer, matintresserade, meal preppers).
- Var tydlig med appens värdeproposition, t.ex. "Slipp slösa mat – vi visar vad du kan laga med det du har hemma."

---

## Nyheter och förbättringar (2026-04-24)

- **Navigations- och UX-förbättringar:**
  - Tydliga navigationslänkar mellan recept, inventarie, baslager och matplan för att förenkla användarflödet.
  - Efter att ett recept redigerats, navigeras användaren nu automatiskt till receptdetaljer.
  - Efter konsumtion av inventariepost navigeras användaren automatiskt tillbaka till inventarielistan.
  - Efter import av recept navigeras användaren automatiskt till receptlistan.
  - Mjukare scrollning i receptdetaljvyn och förbättrad bakgrundsbildshantering.
- **Kodkvalitet:**
  - Säkerställt att inga absoluta Windows-sökvägar används i koden, för att stödja bygg och drift på Linux/Ubuntu.
