Files
Cibello-app/docs/04-ux.md
T
Claude 88876a24b7 fix(subscriptions): trial 14 dagar konsekvent i UI/docs/legal/butik
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).
2026-08-17 17:04:00 +00:00

3.6 KiB
Raw Blame History

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 (§2324): 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 (§4546, 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å.