# Del 4 – UX

Implementerad i `apps/mobile` (Expo/expo-router). Detta dokument beskriver flödena;
skärmarna finns som kod under `src/app/`.

## Designprinciper

Enkelhet trots djup (spec §4): fyra flikar bär allt, avancerat göms bakom naturliga
ingångar. Osäkerhet visas alltid (⚠️-flagga, ~-prefix, intervall). Korrigering är ett
tryck bort. Svenska först. Stora tryckytor (min 48 pt). Grön/varm palett (`src/lib/theme.ts`).

## Onboarding (§6) – `onboarding.tsx`

5 steg, allt frivilligt, progressindikator: (1) primärt mål → (2) kosthållning +
allergier (med löftet "rätter med dina allergener visas aldrig") → (3) kroppsdata för
kalorimål, med icke-medicinsk-disclaimer → (4) hushåll: skapa/gå med via kod/hoppa över →
(5) enkelt vs exakt läge (§5), kombinerbart. Registrering startar 14-dagars trial utan kort.

## Flikarna

**Vad ska vi äta?** (`(tabs)/index.tsx`): "Jag är sugen på"-fält överst, aktiva
högtidstaggar, matlådor-först-sektion (§24), därefter rankade kort med täckningsprocent,
⏳-taggar för varor som räddas, och 💡-rutan "varför detta förslag?". Tryck → receptdetalj.

**Skanna** (`(tabs)/scan.tsx`): rutnät med alla tio skanningstyper (§4.2), fototips
(§10: översikt, hylla för hylla, ljus, flytta skymmande), kvarvarande AI-kvot synlig.
Flöde: foto → uppladdning → analys-spinner → **Granska** (`scan-review/[jobId].tsx`) där
varje fynd kan godkännas/ändras/tas bort och rader kan läggas till; osäkra rader flaggas.
Streckkod öppnar kamerabaserad läsare (`barcode.tsx`) med okänd-produkt-fallback till
förpackningsfoto.

**Min dag** (`(tabs)/my-day.tsx`): kalorier + fyra makron + salt som progressbarer mot
personliga mål, dagens måltider (uppskattningar markerade med ~ och intervall),
logga-knapp → modal med snabb återloggning/manuellt (`log-meal.tsx`).

**Hemma** (`(tabs)/home.tsx`): snabblänkar (inköpslista, matlådor, hushåll, profil),
budgetkort med veckoinköp + svinnvärde, "Använd snart"-kort, lagret grupperat per
förvaringsplats med statustaggar ("2 dagar kvar", "Passerat bäst före – lukta och smaka").

## Nyckelflöden

**Laga-flödet** (kärnan): receptdetalj (`recipe/[id].tsx`) visar säkerhet mot din profil,
portionsskalning, varianter, betyg → "Laga nu" → **Cooking Mode** (`cooking/[id].tsx`,
§41): ett steg i taget i stor text, inbyggda timers med haptik, skärmen hålls vaken →
"Klart" → efterflöde (§23–24): portioner, matlådor, lagerdragning enligt FEFO → allt
loggas och lagret uppdateras.

**Inköpsrundan** (§27): lista sorterad per butiksavdelning, delad i hushållet, summa-
uppskattning, bocka av → "Avsluta köprundan" lägger bockade varor i lagret.

**Minnet** (§32, `memory.tsx`): sektioner per minnestyp med ursprungsmärkning
("Du har berättat" / "Observerat mönster" / "AI-antagande"), knappar Stämmer/Pausa/Radera
per post samt Radera allt.

## Paywall (§45–46, `paywall.tsx`)

Visas vid premiumfunktion utan entitlement och från profilen. Tre planer med
Family markerad som populärast, trial-nedräkning, fair use-texten, gratisnivåns innehåll
ärligt beskrivet, Återställ köp. Copy undviker "obegränsat".

## Community/creator (post-launch)

Creatorprofil med recept/följare/nivå finns som API + enkel vy; publicerings-UX byggs
när `community_publishing` slås på: fritext → AI-strukturering → förhandsgranskning →
inskickat-läge → notis vid publicering med creator-cred ("Skapat av …", forks: "Baserat på …").

## Offline (§44)

React Query-cache persisteras i AsyncStorage: recept, lager, lista och favoriter läses
offline; bockningar synkas när nätet är tillbaka; AI kräver alltid server och sägs så.