TRIAL_DAYS var redan 14 i koden men auth.trialNote (12 sprak), butiksmetadata, juridik-utkast, API-ref, exec-summary och UX-doc sa 7. Nu 14 overallt. Rorde EJ icke-trial 7-dagar (inbjudningslank, backup, S3-lifecycle, grace, retention). Beslut: Johan (battre onboarding).
3.6 KiB
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å.