diff --git a/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-Bold.ttf b/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-Bold.ttf
new file mode 100644
index 00000000..52aadc6d
Binary files /dev/null and b/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-Bold.ttf differ
diff --git a/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-Medium.ttf b/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-Medium.ttf
new file mode 100644
index 00000000..d6deb87a
Binary files /dev/null and b/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-Medium.ttf differ
diff --git a/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-Regular.ttf b/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-Regular.ttf
new file mode 100644
index 00000000..dfa34c09
Binary files /dev/null and b/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-Regular.ttf differ
diff --git a/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-SemiBold.ttf b/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-SemiBold.ttf
new file mode 100644
index 00000000..b25bad31
Binary files /dev/null and b/apps/mobile-flutter/assets/google_fonts/BeVietnamPro-SemiBold.ttf differ
diff --git a/apps/mobile-flutter/assets/google_fonts/Lora-Italic.ttf b/apps/mobile-flutter/assets/google_fonts/Lora-Italic.ttf
new file mode 100644
index 00000000..b2314c7b
Binary files /dev/null and b/apps/mobile-flutter/assets/google_fonts/Lora-Italic.ttf differ
diff --git a/apps/mobile-flutter/assets/google_fonts/Lora-Medium.ttf b/apps/mobile-flutter/assets/google_fonts/Lora-Medium.ttf
new file mode 100644
index 00000000..913c1dd9
Binary files /dev/null and b/apps/mobile-flutter/assets/google_fonts/Lora-Medium.ttf differ
diff --git a/apps/mobile-flutter/assets/google_fonts/Lora-Regular.ttf b/apps/mobile-flutter/assets/google_fonts/Lora-Regular.ttf
new file mode 100644
index 00000000..bd2b7cb7
Binary files /dev/null and b/apps/mobile-flutter/assets/google_fonts/Lora-Regular.ttf differ
diff --git a/apps/mobile-flutter/assets/l10n/en.json b/apps/mobile-flutter/assets/l10n/en.json
index 489080cb..b8cbf3a7 100644
--- a/apps/mobile-flutter/assets/l10n/en.json
+++ b/apps/mobile-flutter/assets/l10n/en.json
@@ -6,7 +6,7 @@
"finish": "Finish",
"save": "Save",
"cancel": "Cancel",
- "loading": "Loading...",
+ "loading": "Loading…",
"error": "Something went wrong",
"retry": "Try again",
"search": "Search",
@@ -18,7 +18,8 @@
"notFound": "Page not found",
"notSignedIn": "Not signed in.",
"increase": "Increase",
- "decrease": "Decrease"
+ "decrease": "Decrease",
+ "copied": "Link copied"
},
"nav": {
"logging": "Logging",
@@ -53,6 +54,11 @@
"openMenu": "Open menu",
"closeMenu": "Close menu"
},
+ "tabBar": {
+ "today": "Today",
+ "log": "Log",
+ "patterns": "Patterns"
+ },
"mainSidebar": {
"navigationLabel": "Main navigation",
"sectionLabel": "Main",
@@ -95,14 +101,38 @@
"nutrition": {
"eyebrow": "Pattern analysis",
"title": "Nutrition",
- "subtitle": "Review long-term macro and micronutrient patterns, with confidence labels when the food data is incomplete.",
+ "subtitle": "Review long-term macro and micronutrient patterns.",
"loading": "Loading nutrition overview…",
"range": {
"label": "Nutrition range",
- "7d": "7 days",
- "30d": "30 days",
+ "1d": "Today",
+ "7d": "7d",
+ "30d": "30d",
"90d": "90 days"
},
+ "nutrientGroups": {
+ "vitamins": "Vitamins",
+ "minerals": "Minerals"
+ },
+ "cell": {
+ "limited": "limited",
+ "noTarget": "no target"
+ },
+ "suggestedFoods": {
+ "button": "Suggested foods",
+ "title": "Foods to close your gaps",
+ "subtitle": "Ideas for the nutrients you're lowest on over this timeframe — for variety and coverage, not prescriptions.",
+ "short": "{value}% short",
+ "refresh": "Don't have these?"
+ },
+ "sources": {
+ "caption": "Targets from WHO/FAO · Vietnam RDA · NASEM DRI",
+ "title": "Where targets come from",
+ "intro": "Daily targets are drawn from internationally recognized reference intakes, matched to your profile (age, sex, and region).",
+ "whoFao": "WHO/FAO — Vitamin and Mineral Requirements in Human Nutrition, 2nd ed. (2004)",
+ "vietnamRda": "Vietnam Ministry of Health — Recommended Dietary Allowances (2016)",
+ "nasem": "NASEM — Dietary Reference Intakes (1997–2019)"
+ },
"summary": {
"label": "Nutrition summary",
"mostConsistent": "Most consistent",
@@ -111,10 +141,8 @@
"macroConsistency": "Macro consistency",
"confidentOnly": "Only confident gaps are flagged",
"coverageHint": "Nutrients with thin coverage",
- "averageConfidence": "Avg confidence: {value}",
"weakest": "Weakest",
"none": "None yet",
- "trustLine": "{days} logged days · {confidence} avg confidence · {range} view",
"verdict": {
"label": "Pattern verdict",
"attention": "{nutrients} need attention",
@@ -148,7 +176,6 @@
"card": {
"average": "Average",
"target": "Target",
- "targetProgress": "Target progress",
"context": "Context",
"noData": "No data",
"noTargetClaim": "No target claim",
@@ -156,6 +183,9 @@
"expand": "View trend",
"collapse": "Hide trend"
},
+ "detail": {
+ "averageVsTarget": "Average vs target"
+ },
"confidence": {
"normal": "Good confidence",
"limitedData": "Limited data",
@@ -469,8 +499,7 @@
"quiet": "A quiet stretch. Keep logging to sharpen the pattern.",
"gathering": "Gathering your pattern.",
"gatheringSub": "{days} complete days so far — keep going and the picture sharpens.",
- "trustLine": "{days} complete days · {confidence}% avg confidence",
- "trustLineNoConfidence": "{days} complete days",
+ "trustLine": "{days} complete days",
"partialNote": {
"one": "· {} partial day set aside",
"other": "· {} partial days set aside"
@@ -534,7 +563,9 @@
"saveError": "Couldn't save this step. Please try again.",
"setup": {
"title": "Setting up your account",
- "subtitle": "Personalizing your targets — this'll just take a moment."
+ "subtitle": "Personalizing your targets — this'll just take a moment.",
+ "targetReadyLabel": "Your daily target",
+ "perDay": "kcal/day"
},
"origin": {
"title": "Where are you from?",
@@ -548,12 +579,14 @@
"noCountries": "No countries found",
"fallbackNote": "Leave one or both empty if you want. The AI will fall back to your photo and meal text only.",
"preferredLanguage": "Preferred language",
- "preferredLanguageHint": "Choose your language for the app interface"
+ "preferredLanguageHint": "Choose your language for the app interface",
+ "commonCountries": "Common"
},
"bodyMetrics": {
"title": "Your body metrics",
"subtitle": "We use these to calculate your daily calorie and macro targets.",
"biologicalSex": "Biological sex",
+ "sexPlaceholder": "Select…",
"male": "Male",
"female": "Female",
"weight": "Weight",
@@ -594,7 +627,11 @@
"fat": "Fat",
"macroSummary": "Daily targets",
"kcal": "kcal",
- "grams": "g"
+ "grams": "g",
+ "aboutYou": "About you",
+ "aboutYouHint": "These stay optional, but once you fill them in, Nhẩm can compute more tailored targets locally.",
+ "unlockTitle": "Fill the basics to unlock targets.",
+ "unlockHint": "Once sex, weight, height, age, and activity are filled, this becomes your live calorie target and macro planner."
},
"cooking": {
"title": "Your cooking habits",
@@ -647,7 +684,6 @@
"noAccount": "Don't have an account?",
"signUpLink": "Sign up",
"forgotPassword": "Forgot password?",
- "error": "Invalid email or password",
"success": "Signed in successfully",
"emailPlaceholder": "you@example.com",
"passwordPlaceholder": "Enter your password",
@@ -662,9 +698,7 @@
"submit": "Create Account",
"hasAccount": "Already have an account?",
"signInLink": "Sign in",
- "success": "Check your email to confirm your account",
"successSignedIn": "Account created. Welcome!",
- "error": "Could not create account",
"emailPlaceholder": "you@example.com",
"passwordPlaceholder": "Create a password",
"emailError": "Enter a valid email address",
@@ -677,16 +711,57 @@
"signUpSubtitle": "Start tracking Vietnamese meals with AI-powered nutrition analysis.",
"signInTab": "Sign in",
"signUpTab": "Sign up",
+ "continueWithApple": "Continue with Apple",
+ "appleError": "Apple sign-in failed. Please try again.",
"continueWithGoogle": "Continue with Google",
"orContinueWithEmail": "or continue with email",
"googleError": "Google sign-in failed. Please try again."
},
+ "forgot": {
+ "title": "Reset your password",
+ "description": "Enter the email you signed up with and we'll send a reset link.",
+ "email": "Email",
+ "emailPlaceholder": "you@example.com",
+ "emailError": "Enter a valid email address",
+ "submit": "Send reset link",
+ "back": "Back to sign in",
+ "sentTitle": "Check your email",
+ "sentDescription": "We sent a password reset link to",
+ "backToSignIn": "Back to sign in"
+ },
"otp": {
"title": "Check your email",
"subtitle": "We sent a verification code to {email}",
"submit": "Verify",
"resend": "Resend code",
"error": "Invalid code"
+ },
+ "welcome": {
+ "tagline": "Track Vietnamese meals",
+ "taglineHighlight": "without the guesswork",
+ "demoMeal": "2 mực kho mặn + 1 chén cơm + canh chua",
+ "demoResult": "{kcal} kcal",
+ "continueWithEmail": "Continue with email",
+ "terms": "By continuing you agree to our terms and privacy policy."
+ },
+ "confirm": {
+ "title": "Check your email",
+ "description": "We sent a confirmation link to",
+ "hint": "Tap the link to finish creating your account.",
+ "resend": "Resend email",
+ "resendIn": "Resend in {seconds}s",
+ "resent": "Email sent again",
+ "back": "Back"
+ },
+ "pending": {
+ "finishing": "Finishing sign-in…"
+ },
+ "errors": {
+ "invalidCredentials": "That email and password don't match — try again or reset your password.",
+ "emailNotConfirmed": "That email hasn't been confirmed yet — check your inbox for the link.",
+ "network": "Couldn't reach the server — check your connection and try again.",
+ "rateLimited": "Too many attempts — give it a moment, then try again.",
+ "generic": "Something went wrong — please try again."
}
},
"landing": {
@@ -715,7 +790,7 @@
"analysis": "AI nutrition analysis",
"highConfidence": "High confidence",
"totalCalories": "Total calories",
- "inputPlaceholder": "Describe your meal...",
+ "inputPlaceholder": "Describe your meal…",
"smartContext": "Smart context",
"smartContextText": "Uses your region, cooking habits, and meal text to tighten estimates."
}
@@ -833,10 +908,19 @@
},
"dashboard": {
"title": "Dashboard",
+ "greeting": {
+ "morning": "Good morning",
+ "afternoon": "Good afternoon",
+ "evening": "Good evening",
+ "night": "Good evening"
+ },
"today": "Today",
"thisWeek": "This Week",
"caloriesConsumed": "Calories consumed",
"caloriesRemaining": "Calories remaining",
+ "caloriesOverTarget": "Over target",
+ "left": "left",
+ "over": "over",
"protein": "Protein",
"carbs": "Carbs",
"fat": "Fat",
@@ -891,7 +975,9 @@
"logWeight": "Log weight",
"update": "Update",
"editHint": "Editing today's entry — saves overwrite the previous value.",
- "saveFailed": "Failed to save weight"
+ "saveFailed": "Failed to save weight",
+ "netChange": "Net change",
+ "steady": "Steady"
},
"adherenceHeatmap": {
"onTrack": "{percent}% on track",
@@ -912,35 +998,40 @@
},
"caloriesLogged": "kcal logged",
"mealReceiptsHint": "Your meal receipts will show up here",
- "progressStatus": {
- "insufficient": {
- "label": "Tracking started",
- "detail": "Log tomorrow to see your trend."
- },
- "on_pace": {
- "label": "On pace",
- "detail": "Your current pace is matching the plan."
- },
- "ahead": {
- "label": "Ahead of plan",
- "detail": "Progress is moving faster than expected."
- },
- "behind": {
- "label": "Needs attention",
- "detail": "The trend is softer than the plan right now."
- },
- "stable": {
- "label": "Stable",
- "detail": "Your weight is staying within a quiet maintenance band."
- }
- }
+ "firstRunQuestion": "What did you eat today?",
+ "firstRunHint": "Describe your first meal — Nhẩm estimates the rest.",
+ "firstRunChips": {
+ "morning1": "1 tô phở bò + quẩy",
+ "morning2": "2 trứng ốp la + bánh mì",
+ "morning3": "1 ly cà phê sữa đá",
+ "midday1": "1 dĩa cơm tấm sườn",
+ "midday2": "1 tô bún chả",
+ "midday3": "1 chén cơm + thịt kho",
+ "evening1": "2 mực kho + 1 chén cơm",
+ "evening2": "1 tô canh chua cá lóc",
+ "evening3": "1 tô bún bò Huế"
+ },
+ "yesterday": "Yesterday"
},
"logging": {
"title": "What did you eat?",
- "placeholder": "Describe your meal...",
+ "placeholder": "Describe your meal…",
+ "composerPlaceholder": "Add a meal…",
+ "modeSelector": {
+ "title": "How do you want to log?",
+ "button": "Mode",
+ "soon": "Soon",
+ "comingSoon": "Cheat meal mode is coming soon",
+ "normal": "Normal",
+ "normalDesc": "Describe a meal in your own words",
+ "cheat": "Cheat meal",
+ "cheatDesc": "Log a treat without the breakdown",
+ "manual": "Manual",
+ "manualDesc": "Search foods, enter exact grams"
+ },
"submit": "Analyze",
"stopAnalyzing": "Stop analyzing",
- "analyzing": "Analyzing your meal...",
+ "analyzing": "Analyzing your meal…",
"breakfast": "Breakfast",
"brunch": "Brunch",
"lunch": "Lunch",
@@ -949,11 +1040,13 @@
"mealSlot": "Meal type",
"confirm": "Save meal",
"discard": "Discard",
+ "remove": "Remove",
+ "mealRemoved": "Meal removed",
+ "undo": "Undo",
"edit": "Edit",
"nutritionSummary": "Nutrition summary",
"ingredients": "Ingredients",
"calories": "Calories",
- "confidence": "Confidence",
"high": "High",
"medium": "Medium",
"low": "Low",
@@ -965,7 +1058,10 @@
"todaysMeals": "Today's meals",
"emptyState": {
"title": "What did you eat?",
- "subtitle": "Describe your meal and get a macro breakdown."
+ "title2": "What's on your plate?",
+ "title3": "What did you have?",
+ "title4": "Ready to log a meal?",
+ "title5": "What's for this meal?"
},
"feedArea": {
"savedMeal": "Meal saved",
@@ -985,12 +1081,17 @@
}
},
"streaming": {
- "connecting": "Connecting...",
- "decomposing": "Breaking down your meal...",
- "matching": "Matching ingredients...",
- "estimating": "Estimating nutrition...",
- "assembling": "Putting it all together...",
- "analyzing": "Analyzing..."
+ "connecting": "Connecting…",
+ "decomposing": "Breaking down your meal…",
+ "matching": "Matching ingredients…",
+ "estimating": "Estimating nutrition…",
+ "assembling": "Putting it all together…",
+ "analyzing": "Analyzing…",
+ "stillWorking": "Still working on it — almost there."
+ },
+ "failedAttempt": {
+ "message": "We couldn't read this one. Your note is safe — give it another try.",
+ "tryAgain": "Try again"
},
"mealEntry": {
"edit": "Edit",
@@ -1032,6 +1133,7 @@
"subtitle": "Search foods, enter exact grams — no AI",
"searchPlaceholder": "Search foods...",
"recentFoods": "Recent foods",
+ "recentsHint": "Search to add foods",
"selected": "Selected",
"noResults": "No foods found",
"searching": "Searching...",
@@ -1122,6 +1224,21 @@
},
"settings": {
"title": "Settings",
+ "account": {
+ "title": "Account",
+ "exportTitle": "Export my data",
+ "exportError": "Could not export your data. Please try again.",
+ "signOut": "Sign out",
+ "signOutConfirmTitle": "Sign out of Nhẩm?",
+ "cancel": "Cancel",
+ "delete": "Delete account",
+ "deleteScreenTitle": "Delete account",
+ "deleteConsequence": "This removes your profile, every meal you've logged, and your weight history. There is no undo.",
+ "deleteConfirmLabel": "Type {word} to confirm",
+ "deleteConfirmWord": "DELETE",
+ "deleteConfirmAction": "Delete my account",
+ "deleteError": "Could not delete your account. Please try again."
+ },
"profile": "Profile",
"preferences": "Preferences",
"bodyMetrics": "Body Metrics",
@@ -1154,7 +1271,22 @@
"regionalSubtitle": "Country of origin and current residence",
"cookingSubtitle": "Oil usage, rice, sugar, protein, and broth defaults",
"saveError": "Failed to save settings. Please try again.",
- "invalidError": "Some entries are invalid — please review your body metrics."
+ "invalidError": "Some entries are invalid — please review your body metrics.",
+ "retry": "Try again",
+ "incompleteHint": "Nothing saved yet — fill in weight, height, and age first."
+ },
+ "rows": {
+ "goalPace": "Goal & pace",
+ "cooking": "Cooking habits",
+ "region": "Region & language",
+ "notSet": "Not set",
+ "pacePerWeek": "{pace} {unit}/wk"
+ },
+ "about": {
+ "title": "About",
+ "version": "Version",
+ "privacy": "Privacy policy",
+ "terms": "Terms of service"
}
},
"errors": {
@@ -1166,6 +1298,7 @@
},
"validation": {
"bodyMetrics": {
+ "sexRequired": "Please select your biological sex.",
"weightRequired": "Please enter your weight.",
"weightMin": "Weight must be at least 30 kg.",
"weightMax": "Weight must be at most 300 kg.",
diff --git a/apps/mobile-flutter/assets/l10n/vi.json b/apps/mobile-flutter/assets/l10n/vi.json
index 649d25a3..77a2df23 100644
--- a/apps/mobile-flutter/assets/l10n/vi.json
+++ b/apps/mobile-flutter/assets/l10n/vi.json
@@ -6,7 +6,7 @@
"finish": "Hoàn tất",
"save": "Lưu",
"cancel": "Hủy",
- "loading": "Đang tải...",
+ "loading": "Đang tải…",
"error": "Đã xảy ra lỗi",
"retry": "Thử lại",
"search": "Tìm kiếm",
@@ -18,7 +18,8 @@
"notFound": "Không tìm thấy trang",
"notSignedIn": "Chưa đăng nhập.",
"increase": "Tăng",
- "decrease": "Giảm"
+ "decrease": "Giảm",
+ "copied": "Đã sao chép liên kết"
},
"nav": {
"logging": "Ghi nhận",
@@ -53,6 +54,11 @@
"openMenu": "Mở menu",
"closeMenu": "Đóng menu"
},
+ "tabBar": {
+ "today": "Hôm nay",
+ "log": "Ghi món",
+ "patterns": "Xu hướng"
+ },
"mainSidebar": {
"navigationLabel": "Điều hướng chính",
"sectionLabel": "Chính",
@@ -95,14 +101,38 @@
"nutrition": {
"eyebrow": "Phân tích xu hướng",
"title": "Dinh dưỡng",
- "subtitle": "Nhìn lại xu hướng macro và vi chất dài hạn, kèm nhãn độ tin cậy khi dữ liệu món ăn còn thiếu.",
+ "subtitle": "Nhìn lại xu hướng macro và vi chất dài hạn.",
"loading": "Đang tải tổng quan dinh dưỡng…",
"range": {
"label": "Khoảng thời gian dinh dưỡng",
- "7d": "7 ngày",
- "30d": "30 ngày",
+ "1d": "Hôm nay",
+ "7d": "7n",
+ "30d": "30n",
"90d": "90 ngày"
},
+ "nutrientGroups": {
+ "vitamins": "Vitamin",
+ "minerals": "Khoáng chất"
+ },
+ "cell": {
+ "limited": "hạn chế",
+ "noTarget": "chưa có"
+ },
+ "suggestedFoods": {
+ "button": "Gợi ý món ăn",
+ "title": "Món ăn lấp đầy thiếu hụt",
+ "subtitle": "Gợi ý cho các chất bạn đang thiếu nhất trong khoảng thời gian này — để đa dạng và đầy đủ, không phải chỉ định y khoa.",
+ "short": "thiếu {value}%",
+ "refresh": "Không có sẵn?"
+ },
+ "sources": {
+ "caption": "Mục tiêu theo WHO/FAO · RDA Việt Nam · NASEM DRI",
+ "title": "Nguồn của mục tiêu",
+ "intro": "Mục tiêu hằng ngày dựa trên các mức tham chiếu được công nhận quốc tế, điều chỉnh theo hồ sơ của bạn (tuổi, giới tính và khu vực).",
+ "whoFao": "WHO/FAO — Nhu cầu Vitamin và Khoáng chất trong Dinh dưỡng, tái bản lần 2 (2004)",
+ "vietnamRda": "Bộ Y tế Việt Nam — Nhu cầu Dinh dưỡng Khuyến nghị (2016)",
+ "nasem": "NASEM — Dietary Reference Intakes (1997–2019)"
+ },
"summary": {
"label": "Tóm tắt dinh dưỡng",
"mostConsistent": "Ổn định nhất",
@@ -111,10 +141,8 @@
"macroConsistency": "Độ ổn định macro",
"confidentOnly": "Chỉ đánh dấu khi đủ tin cậy",
"coverageHint": "Vi chất có độ phủ mỏng",
- "averageConfidence": "Độ tin cậy TB: {value}",
"weakest": "Yếu nhất",
"none": "Chưa có",
- "trustLine": "{days} ngày có bữa ăn · độ tin cậy TB {confidence} · chế độ xem {range}",
"verdict": {
"label": "Kết luận xu hướng",
"attention": "{nutrients} cần chú ý",
@@ -148,7 +176,6 @@
"card": {
"average": "Trung bình",
"target": "Mục tiêu",
- "targetProgress": "Tiến độ mục tiêu",
"context": "Ngữ cảnh",
"noData": "Chưa có dữ liệu",
"noTargetClaim": "Chưa kết luận theo mục tiêu",
@@ -156,6 +183,9 @@
"expand": "Xem xu hướng",
"collapse": "Ẩn xu hướng"
},
+ "detail": {
+ "averageVsTarget": "Trung bình so với mục tiêu"
+ },
"confidence": {
"normal": "Độ tin cậy tốt",
"limitedData": "Dữ liệu hạn chế",
@@ -469,9 +499,9 @@
"quiet": "Một giai đoạn yên ả. Tiếp tục ghi nhận để hoàn thiện xu hướng.",
"gathering": "Vẫn đang gom dần xu hướng của bạn.",
"gatheringSub": "Đã có {days} ngày đủ bữa — cứ tiếp tục, bức tranh sẽ rõ dần.",
- "trustLine": "{days} ngày đủ bữa · độ tin cậy TB {confidence}%",
- "trustLineNoConfidence": "{days} ngày đủ bữa",
+ "trustLine": "{days} ngày đủ bữa",
"partialNote": {
+ "one": "· tạm bỏ qua {} ngày ghi thiếu",
"other": "· tạm bỏ qua {} ngày ghi thiếu"
},
"period7d": "7 ngày qua",
@@ -533,7 +563,9 @@
"saveError": "Không thể lưu bước này. Vui lòng thử lại.",
"setup": {
"title": "Đang thiết lập tài khoản của bạn",
- "subtitle": "Đang cá nhân hoá mục tiêu của bạn — chỉ mất một chút thôi."
+ "subtitle": "Đang cá nhân hoá mục tiêu của bạn — chỉ mất một chút thôi.",
+ "targetReadyLabel": "Mục tiêu mỗi ngày của bạn",
+ "perDay": "kcal/ngày"
},
"origin": {
"title": "Bạn đến từ đâu?",
@@ -547,12 +579,14 @@
"noCountries": "Không tìm thấy quốc gia",
"fallbackNote": "Bỏ trống nếu muốn. AI sẽ chỉ dựa vào ảnh và mô tả bữa ăn của bạn.",
"preferredLanguage": "Ngôn ngữ ưa thích",
- "preferredLanguageHint": "Chọn ngôn ngữ hiển thị cho ứng dụng"
+ "preferredLanguageHint": "Chọn ngôn ngữ hiển thị cho ứng dụng",
+ "commonCountries": "Phổ biến"
},
"bodyMetrics": {
"title": "Chỉ số cơ thể",
"subtitle": "Chúng tôi dùng thông tin này để tính mục tiêu calo và dinh dưỡng hàng ngày.",
"biologicalSex": "Giới tính sinh học",
+ "sexPlaceholder": "Chọn…",
"male": "Nam",
"female": "Nữ",
"weight": "Cân nặng",
@@ -593,7 +627,11 @@
"fat": "Chất béo",
"macroSummary": "Mục tiêu hàng ngày",
"kcal": "kcal",
- "grams": "g"
+ "grams": "g",
+ "aboutYou": "Về bạn",
+ "aboutYouHint": "Những mục này không bắt buộc, nhưng khi bạn điền vào, Nhẩm có thể tính mục tiêu phù hợp hơn ngay trên máy.",
+ "unlockTitle": "Điền thông tin cơ bản để mở khóa mục tiêu.",
+ "unlockHint": "Khi đã điền giới tính, cân nặng, chiều cao, tuổi và mức vận động, đây sẽ thành mục tiêu calo và bảng macro của bạn."
},
"cooking": {
"title": "Thói quen nấu ăn",
@@ -646,7 +684,6 @@
"noAccount": "Chưa có tài khoản?",
"signUpLink": "Đăng ký",
"forgotPassword": "Quên mật khẩu?",
- "error": "Email hoặc mật khẩu không đúng",
"success": "Đăng nhập thành công",
"emailPlaceholder": "ban@example.com",
"passwordPlaceholder": "Nhập mật khẩu",
@@ -661,9 +698,7 @@
"submit": "Tạo tài khoản",
"hasAccount": "Đã có tài khoản?",
"signInLink": "Đăng nhập",
- "success": "Kiểm tra email để xác nhận tài khoản",
"successSignedIn": "Đã tạo tài khoản. Chào mừng!",
- "error": "Không thể tạo tài khoản",
"emailPlaceholder": "ban@example.com",
"passwordPlaceholder": "Tạo mật khẩu",
"emailError": "Nhập địa chỉ email hợp lệ",
@@ -676,16 +711,57 @@
"signUpSubtitle": "Bắt đầu theo dõi bữa ăn Việt với phân tích dinh dưỡng bằng AI.",
"signInTab": "Đăng nhập",
"signUpTab": "Đăng ký",
+ "continueWithApple": "Tiếp tục với Apple",
+ "appleError": "Đăng nhập bằng Apple thất bại. Vui lòng thử lại.",
"continueWithGoogle": "Tiếp tục với Google",
"orContinueWithEmail": "hoặc tiếp tục với email",
"googleError": "Đăng nhập bằng Google thất bại. Vui lòng thử lại."
},
+ "forgot": {
+ "title": "Đặt lại mật khẩu",
+ "description": "Nhập email bạn đã đăng ký, chúng tôi sẽ gửi liên kết đặt lại.",
+ "email": "Email",
+ "emailPlaceholder": "ban@example.com",
+ "emailError": "Nhập địa chỉ email hợp lệ",
+ "submit": "Gửi liên kết",
+ "back": "Quay lại đăng nhập",
+ "sentTitle": "Kiểm tra email",
+ "sentDescription": "Chúng tôi đã gửi liên kết đặt lại mật khẩu đến",
+ "backToSignIn": "Quay lại đăng nhập"
+ },
"otp": {
"title": "Kiểm tra email",
"subtitle": "Chúng tôi đã gửi mã xác nhận đến {email}",
"submit": "Xác nhận",
"resend": "Gửi lại mã",
"error": "Mã không hợp lệ"
+ },
+ "welcome": {
+ "tagline": "Theo dõi bữa ăn Việt",
+ "taglineHighlight": "không cần phỏng đoán",
+ "demoMeal": "2 mực kho mặn + 1 chén cơm + canh chua",
+ "demoResult": "{kcal} kcal",
+ "continueWithEmail": "Tiếp tục với email",
+ "terms": "Khi tiếp tục, bạn đồng ý với điều khoản và chính sách bảo mật của chúng tôi."
+ },
+ "confirm": {
+ "title": "Kiểm tra email của bạn",
+ "description": "Chúng tôi đã gửi liên kết xác nhận đến",
+ "hint": "Nhấn vào liên kết để hoàn tất tạo tài khoản.",
+ "resend": "Gửi lại email",
+ "resendIn": "Gửi lại sau {seconds}s",
+ "resent": "Đã gửi lại email",
+ "back": "Quay lại"
+ },
+ "pending": {
+ "finishing": "Đang hoàn tất đăng nhập…"
+ },
+ "errors": {
+ "invalidCredentials": "Email và mật khẩu không khớp — thử lại hoặc đặt lại mật khẩu nhé.",
+ "emailNotConfirmed": "Email này chưa được xác nhận — kiểm tra hộp thư để tìm liên kết nhé.",
+ "network": "Không kết nối được máy chủ — kiểm tra mạng rồi thử lại nhé.",
+ "rateLimited": "Bạn thao tác hơi nhanh — đợi một chút rồi thử lại nhé.",
+ "generic": "Đã có lỗi xảy ra — bạn thử lại nhé."
}
},
"landing": {
@@ -714,7 +790,7 @@
"analysis": "Phân tích dinh dưỡng bằng AI",
"highConfidence": "Độ tin cậy cao",
"totalCalories": "Tổng calo",
- "inputPlaceholder": "Mô tả bữa ăn của bạn...",
+ "inputPlaceholder": "Mô tả bữa ăn của bạn…",
"smartContext": "Ngữ cảnh thông minh",
"smartContextText": "Dùng vùng miền, thói quen nấu ăn và mô tả bữa ăn để siết chặt ước tính."
}
@@ -832,10 +908,19 @@
},
"dashboard": {
"title": "Tổng quan",
+ "greeting": {
+ "morning": "Chào buổi sáng",
+ "afternoon": "Chào buổi chiều",
+ "evening": "Chào buổi tối",
+ "night": "Chào buổi tối"
+ },
"today": "Hôm nay",
"thisWeek": "Tuần này",
"caloriesConsumed": "Calo đã nạp",
"caloriesRemaining": "Calo còn lại",
+ "caloriesOverTarget": "Vượt mục tiêu",
+ "left": "còn lại",
+ "over": "vượt",
"protein": "Đạm",
"carbs": "Carb",
"fat": "Chất béo",
@@ -890,7 +975,9 @@
"logWeight": "Ghi cân nặng",
"update": "Cập nhật",
"editHint": "Đang sửa số liệu hôm nay — lần lưu sau sẽ ghi đè giá trị trước.",
- "saveFailed": "Không thể lưu cân nặng"
+ "saveFailed": "Không thể lưu cân nặng",
+ "netChange": "Thay đổi",
+ "steady": "Ổn định"
},
"adherenceHeatmap": {
"onTrack": "{percent}% đúng mục tiêu",
@@ -911,35 +998,40 @@
},
"caloriesLogged": "kcal đã ghi",
"mealReceiptsHint": "Những bữa ăn sẽ hiển thị ở đây",
- "progressStatus": {
- "insufficient": {
- "label": "Đã bắt đầu theo dõi",
- "detail": "Ghi cân nặng vào ngày mai để thấy xu hướng."
- },
- "on_pace": {
- "label": "Đúng kế hoạch",
- "detail": "Tốc độ hiện tại của bạn phù hợp với kế hoạch."
- },
- "ahead": {
- "label": "Vượt kế hoạch",
- "detail": "Tiến độ nhanh hơn dự kiến."
- },
- "behind": {
- "label": "Cần chú ý",
- "detail": "Xu hướng hiện tại yếu hơn kế hoạch."
- },
- "stable": {
- "label": "Ổn định",
- "detail": "Cân nặng của bạn đang ổn định ở mức duy trì."
- }
- }
+ "firstRunQuestion": "Hôm nay bạn đã ăn gì?",
+ "firstRunHint": "Mô tả bữa đầu tiên — Nhẩm lo phần còn lại.",
+ "firstRunChips": {
+ "morning1": "1 tô phở bò + quẩy",
+ "morning2": "2 trứng ốp la + bánh mì",
+ "morning3": "1 ly cà phê sữa đá",
+ "midday1": "1 dĩa cơm tấm sườn",
+ "midday2": "1 tô bún chả",
+ "midday3": "1 chén cơm + thịt kho",
+ "evening1": "2 mực kho + 1 chén cơm",
+ "evening2": "1 tô canh chua cá lóc",
+ "evening3": "1 tô bún bò Huế"
+ },
+ "yesterday": "Hôm qua"
},
"logging": {
"title": "Bạn đã ăn gì?",
- "placeholder": "Mô tả bữa ăn...",
+ "placeholder": "Mô tả bữa ăn…",
+ "composerPlaceholder": "Thêm món ăn…",
+ "modeSelector": {
+ "title": "Bạn muốn ghi thế nào?",
+ "button": "Chế độ",
+ "soon": "Sắp có",
+ "comingSoon": "Chế độ bữa xả sắp ra mắt",
+ "normal": "Bình thường",
+ "normalDesc": "Mô tả bữa ăn bằng lời của bạn",
+ "cheat": "Bữa xả",
+ "cheatDesc": "Ghi nhanh bữa xả, không cần phân tích",
+ "manual": "Thủ công",
+ "manualDesc": "Tìm món, nhập gram chính xác"
+ },
"submit": "Phân tích",
"stopAnalyzing": "Dừng phân tích",
- "analyzing": "Đang phân tích bữa ăn...",
+ "analyzing": "Đang phân tích bữa ăn…",
"breakfast": "Sáng",
"brunch": "Sáng muộn",
"lunch": "Trưa",
@@ -948,11 +1040,13 @@
"mealSlot": "Bữa ăn",
"confirm": "Lưu bữa ăn",
"discard": "Bỏ",
+ "remove": "Xóa",
+ "mealRemoved": "Đã xóa bữa ăn",
+ "undo": "Hoàn tác",
"edit": "Sửa",
"nutritionSummary": "Tóm tắt dinh dưỡng",
"ingredients": "Nguyên liệu",
"calories": "Calo",
- "confidence": "Độ tin cậy",
"high": "Cao",
"medium": "Trung bình",
"low": "Thấp",
@@ -964,7 +1058,10 @@
"todaysMeals": "Bữa ăn hôm nay",
"emptyState": {
"title": "Bạn đã ăn gì?",
- "subtitle": "Mô tả bữa ăn để nhận phân tích macro."
+ "title2": "Hôm nay ăn gì?",
+ "title3": "Bữa này có món gì?",
+ "title4": "Ghi lại bữa ăn nhé?",
+ "title5": "Bạn vừa ăn gì?"
},
"feedArea": {
"savedMeal": "Đã lưu bữa ăn",
@@ -984,12 +1081,17 @@
}
},
"streaming": {
- "connecting": "Đang kết nối...",
- "decomposing": "Đang tách bữa ăn của bạn...",
- "matching": "Đang khớp nguyên liệu...",
- "estimating": "Đang ước tính dinh dưỡng...",
- "assembling": "Đang tổng hợp kết quả...",
- "analyzing": "Đang phân tích..."
+ "connecting": "Đang kết nối…",
+ "decomposing": "Đang tách bữa ăn của bạn…",
+ "matching": "Đang khớp nguyên liệu…",
+ "estimating": "Đang ước tính dinh dưỡng…",
+ "assembling": "Đang tổng hợp kết quả…",
+ "analyzing": "Đang phân tích…",
+ "stillWorking": "Vẫn đang xử lý — sắp xong rồi."
+ },
+ "failedAttempt": {
+ "message": "Chưa đọc được món này. Ghi chú của bạn vẫn còn — thử lại nhé.",
+ "tryAgain": "Thử lại"
},
"mealEntry": {
"edit": "Sửa",
@@ -1031,6 +1133,7 @@
"subtitle": "Tìm món, nhập chính xác số gam — không dùng AI",
"searchPlaceholder": "Tìm món ăn...",
"recentFoods": "Món gần đây",
+ "recentsHint": "Tìm món để thêm",
"selected": "Đã chọn",
"noResults": "Không tìm thấy món nào",
"searching": "Đang tìm...",
@@ -1121,6 +1224,21 @@
},
"settings": {
"title": "Cài đặt",
+ "account": {
+ "title": "Tài khoản",
+ "exportTitle": "Xuất dữ liệu của tôi",
+ "exportError": "Không thể xuất dữ liệu. Vui lòng thử lại.",
+ "signOut": "Đăng xuất",
+ "signOutConfirmTitle": "Đăng xuất khỏi Nhẩm?",
+ "cancel": "Hủy",
+ "delete": "Xóa tài khoản",
+ "deleteScreenTitle": "Xóa tài khoản",
+ "deleteConsequence": "Thao tác này xóa hồ sơ, mọi bữa ăn bạn đã ghi, và lịch sử cân nặng của bạn. Không thể hoàn tác.",
+ "deleteConfirmLabel": "Nhập {word} để xác nhận",
+ "deleteConfirmWord": "XOA",
+ "deleteConfirmAction": "Xóa tài khoản của tôi",
+ "deleteError": "Không thể xóa tài khoản. Vui lòng thử lại."
+ },
"profile": "Hồ sơ",
"preferences": "Tùy chỉnh",
"bodyMetrics": "Chỉ số cơ thể",
@@ -1153,7 +1271,22 @@
"regionalSubtitle": "Quê quán và nơi ở hiện tại",
"cookingSubtitle": "Thiết lập dầu mỡ, cơm, đường, đạm và nước dùng mặc định",
"saveError": "Không thể lưu cài đặt. Vui lòng thử lại.",
- "invalidError": "Một số giá trị không hợp lệ — vui lòng kiểm tra lại chỉ số cơ thể."
+ "invalidError": "Một số giá trị không hợp lệ — vui lòng kiểm tra lại chỉ số cơ thể.",
+ "retry": "Thử lại",
+ "incompleteHint": "Chưa lưu được gì — hãy điền cân nặng, chiều cao và tuổi trước nhé."
+ },
+ "rows": {
+ "goalPace": "Mục tiêu & tốc độ",
+ "cooking": "Thói quen nấu nướng",
+ "region": "Khu vực & ngôn ngữ",
+ "notSet": "Chưa thiết lập",
+ "pacePerWeek": "{pace} {unit}/tuần"
+ },
+ "about": {
+ "title": "Giới thiệu",
+ "version": "Phiên bản",
+ "privacy": "Chính sách bảo mật",
+ "terms": "Điều khoản dịch vụ"
}
},
"errors": {
@@ -1165,6 +1298,7 @@
},
"validation": {
"bodyMetrics": {
+ "sexRequired": "Vui lòng chọn giới tính sinh học.",
"weightRequired": "Vui lòng nhập cân nặng.",
"weightMin": "Cân nặng phải từ 30 kg trở lên.",
"weightMax": "Cân nặng phải từ 300 kg trở xuống.",
diff --git a/apps/mobile-flutter/ios/Runner.xcodeproj/project.pbxproj b/apps/mobile-flutter/ios/Runner.xcodeproj/project.pbxproj
index d818373d..f69dc6a5 100644
--- a/apps/mobile-flutter/ios/Runner.xcodeproj/project.pbxproj
+++ b/apps/mobile-flutter/ios/Runner.xcodeproj/project.pbxproj
@@ -491,6 +491,7 @@
"$(inherited)",
"@executable_path/Frameworks",
);
+ CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
PRODUCT_BUNDLE_IDENTIFIER = com.khoivo.nham;
PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
@@ -673,6 +674,7 @@
"$(inherited)",
"@executable_path/Frameworks",
);
+ CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
PRODUCT_BUNDLE_IDENTIFIER = com.khoivo.nham;
PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
@@ -695,6 +697,7 @@
"$(inherited)",
"@executable_path/Frameworks",
);
+ CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
PRODUCT_BUNDLE_IDENTIFIER = com.khoivo.nham;
PRODUCT_NAME = "$(TARGET_NAME)";
SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h";
diff --git a/apps/mobile-flutter/ios/Runner/Base.lproj/LaunchScreen.storyboard b/apps/mobile-flutter/ios/Runner/Base.lproj/LaunchScreen.storyboard
index f2e259c7..7b11df06 100644
--- a/apps/mobile-flutter/ios/Runner/Base.lproj/LaunchScreen.storyboard
+++ b/apps/mobile-flutter/ios/Runner/Base.lproj/LaunchScreen.storyboard
@@ -19,7 +19,7 @@
-
+
diff --git a/apps/mobile-flutter/ios/Runner/Runner.entitlements b/apps/mobile-flutter/ios/Runner/Runner.entitlements
new file mode 100644
index 00000000..a812db50
--- /dev/null
+++ b/apps/mobile-flutter/ios/Runner/Runner.entitlements
@@ -0,0 +1,10 @@
+
+
+
+
+ com.apple.developer.applesignin
+
+ Default
+
+
+
diff --git a/apps/mobile-flutter/lib/data/api_client.dart b/apps/mobile-flutter/lib/data/api_client.dart
index eaa63aa7..05fedae6 100644
--- a/apps/mobile-flutter/lib/data/api_client.dart
+++ b/apps/mobile-flutter/lib/data/api_client.dart
@@ -15,11 +15,14 @@ import 'dart:convert';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:http/http.dart' as http;
+import 'package:supabase_flutter/supabase_flutter.dart' show Session;
import '../models/streaming.dart';
import '../services/supabase_service.dart';
import 'env.dart';
+const _authRefreshSkew = Duration(minutes: 5);
+
/// Client-side mirror of the server `ApiError` envelope.
///
/// Re-implemented (not imported) exactly as the RN client does, because the
@@ -40,7 +43,8 @@ class ApiError implements Exception {
]);
@override
- String toString() => 'ApiError($code, $status, retryable=$retryable): $message';
+ String toString() =>
+ 'ApiError($code, $status, retryable=$retryable): $message';
}
/// Parse a `Retry-After` header: numeric seconds first, else HTTP-date delta.
@@ -96,33 +100,45 @@ class StreamAnalyzeInput {
});
Map toJson() => {
- 'message': message,
- 'loggedDate': loggedDate,
- 'timezoneOffset': timezoneOffset,
- if (locale != null) 'locale': locale,
- };
+ 'message': message,
+ 'loggedDate': loggedDate,
+ 'timezoneOffset': timezoneOffset,
+ if (locale != null) 'locale': locale,
+ };
}
class ApiClient {
ApiClient({http.Client? httpClient})
- : _http = httpClient ?? http.Client(),
- _baseUrl = Env.apiBaseUrl;
+ : _http = httpClient ?? http.Client(),
+ _baseUrl = Env.apiBaseUrl;
final http.Client _http;
final String _baseUrl;
+ bool _expiresSoon(Session session) {
+ final expiresAt = session.expiresAt;
+ if (expiresAt == null) return false;
+ final expiry = DateTime.fromMillisecondsSinceEpoch(expiresAt * 1000);
+ return DateTime.now().add(_authRefreshSkew).isAfter(expiry);
+ }
+
/// Bearer header from the current Supabase session token, or empty when
/// signed out. Mirrors `authHeaders()` in the RN client.
Future> _authHeaders() async {
- final token = SupabaseService.client.auth.currentSession?.accessToken;
+ final auth = SupabaseService.client.auth;
+ var session = auth.currentSession;
+ if (session != null && _expiresSoon(session)) {
+ try {
+ session = (await auth.refreshSession()).session ?? auth.currentSession;
+ } catch (_) {
+ session = auth.currentSession;
+ }
+ }
+ final token = session?.accessToken;
return token != null ? {'Authorization': 'Bearer $token'} : {};
}
- Future _request(
- String method,
- String path, [
- Object? body,
- ]) async {
+ Future _request(String method, String path, [Object? body]) async {
final headers = await _authHeaders();
if (body != null) {
headers['Content-Type'] = 'application/json';
@@ -158,6 +174,16 @@ class ApiClient {
/// DELETE.
Future delete(String path) => _request('DELETE', path);
+ /// Permanently delete the signed-in user's account and all their data
+ /// (`DELETE /api/v1/account`). The server removes the Supabase auth user,
+ /// which cascades to every app row. There is no undo.
+ Future deleteAccount() => delete('/api/v1/account');
+
+ /// Fetch a complete JSON snapshot of the user's data
+ /// (`GET /api/v1/account`): profile, meals (with items), and weights.
+ Future> exportMyData() =>
+ get>('/api/v1/account');
+
/// Fire-and-forget ping to wake a scale-to-zero backend on launch. Failures
/// are swallowed (offline / unreachable is fine). Mirrors `warmupApi()`.
Future warmup() async {
@@ -182,9 +208,10 @@ class ApiClient {
headers['Content-Type'] = 'application/json';
headers['Accept'] = 'text/event-stream';
- final req = http.Request('POST', Uri.parse('$_baseUrl/api/analyze-meal'))
- ..headers.addAll(headers)
- ..body = jsonEncode(input.toJson());
+ final req =
+ http.Request('POST', Uri.parse('$_baseUrl/api/analyze-meal'))
+ ..headers.addAll(headers)
+ ..body = jsonEncode(input.toJson());
http.StreamedResponse streamed;
try {
diff --git a/apps/mobile-flutter/lib/features/auth/providers/auth_form_controller.dart b/apps/mobile-flutter/lib/features/auth/providers/auth_form_controller.dart
index 8567226e..80cd6a4c 100644
--- a/apps/mobile-flutter/lib/features/auth/providers/auth_form_controller.dart
+++ b/apps/mobile-flutter/lib/features/auth/providers/auth_form_controller.dart
@@ -1,6 +1,11 @@
+import 'dart:convert';
+import 'dart:math';
+
+import 'package:crypto/crypto.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import '../../../data/session_provider.dart';
@@ -13,14 +18,39 @@ const String kAuthRedirect = 'nham://auth-callback';
/// Which auth action is currently in flight. Lets the UI spin only the button
/// that was tapped while still disabling the others — replacing the old single
/// `busy` bool that made one tap spin every control.
-enum AuthAction { email, google }
+enum AuthAction { email, google, apple }
+
+/// Maps a Supabase [AuthException] to warm, localized copy — the raw English
+/// `e.message` never reaches the UI. Wrong-password and no-account are
+/// deliberately indistinguishable (Supabase anti-enumeration returns the same
+/// `invalid_credentials` for both), so they share one neutral line.
+String authErrorMessage(AuthException e) {
+ if (e is AuthRetryableFetchException) return tr('auth.errors.network');
+ switch (e.code) {
+ case 'invalid_credentials':
+ return tr('auth.errors.invalidCredentials');
+ case 'email_not_confirmed':
+ return tr('auth.errors.emailNotConfirmed');
+ case 'over_request_rate_limit':
+ case 'over_email_send_rate_limit':
+ return tr('auth.errors.rateLimited');
+ default:
+ if (e.statusCode == '429') return tr('auth.errors.rateLimited');
+ return tr('auth.errors.generic');
+ }
+}
/// Immutable view-state for an auth screen, mirroring the RN screens'
/// `busy` / `error` / `notice` `useState` triplet — except `busy` is now an
/// `AuthAction?` so the email and Google buttons own independent spinners.
@immutable
class AuthFormState {
- const AuthFormState({this.action, this.error, this.notice});
+ const AuthFormState({
+ this.action,
+ this.error,
+ this.notice,
+ this.pendingEmail,
+ });
/// The in-flight action (email or Google), or `null` when idle.
final AuthAction? action;
@@ -31,6 +61,10 @@ class AuthFormState {
/// `notice` — success notice (sage), used by sign-up's confirm-email path.
final String? notice;
+ /// The address a confirmation email was sent to. Non-null drives the
+ /// "Check your email" cross-fade state (replacing the old vanishing toast).
+ final String? pendingEmail;
+
/// Any request in flight — disables inputs and the tab toggle.
bool get busy => action != null;
@@ -40,18 +74,24 @@ class AuthFormState {
/// Whether Google is the in-flight action (drives the Google button spinner).
bool get googleBusy => action == AuthAction.google;
+ /// Whether Apple is the in-flight action (drives the Apple button state).
+ bool get appleBusy => action == AuthAction.apple;
+
AuthFormState copyWith({
AuthAction? action,
String? error,
String? notice,
+ String? pendingEmail,
bool clearAction = false,
bool clearError = false,
bool clearNotice = false,
+ bool clearPendingEmail = false,
}) {
return AuthFormState(
action: clearAction ? null : (action ?? this.action),
error: clearError ? null : (error ?? this.error),
notice: clearNotice ? null : (notice ?? this.notice),
+ pendingEmail: clearPendingEmail ? null : (pendingEmail ?? this.pendingEmail),
);
}
}
@@ -73,49 +113,60 @@ class AuthFormController extends StateNotifier {
}) async {
state = state.copyWith(action: AuthAction.email, clearError: true);
try {
- await _ref.read(authControllerProvider).signInWithPassword(
- email: email.trim(),
- password: password,
- );
+ await _ref
+ .read(authControllerProvider)
+ .signInWithPassword(email: email.trim(), password: password);
// Success: the sessionProvider stream fires and the router redirect
// routes into the app (RN did `router.replace('/logging')`).
state = state.copyWith(clearAction: true);
} on AuthException catch (e) {
- state = state.copyWith(clearAction: true, error: e.message);
- } catch (e) {
- state = state.copyWith(clearAction: true, error: e.toString());
+ if (e.code == 'email_not_confirmed') {
+ // The account exists but was never confirmed — surface the real
+ // confirm-email state (with its resend affordance) instead of a
+ // dead-end error line.
+ state = state.copyWith(clearAction: true, pendingEmail: email.trim());
+ return;
+ }
+ state = state.copyWith(clearAction: true, error: authErrorMessage(e));
+ } catch (_) {
+ state = state.copyWith(
+ clearAction: true,
+ error: tr('auth.errors.generic'),
+ );
}
}
/// RN `signUp`: trims email, calls `signUp`. If a session comes back the
/// router routes in; otherwise show the "check your email" notice.
- Future signUp({
- required String email,
- required String password,
- }) async {
+ Future signUp({required String email, required String password}) async {
state = state.copyWith(
action: AuthAction.email,
clearError: true,
clearNotice: true,
);
try {
- final res = await _ref.read(authControllerProvider).signUpWithPassword(
- email: email.trim(),
- password: password,
- );
+ final res = await _ref
+ .read(authControllerProvider)
+ .signUpWithPassword(email: email.trim(), password: password);
if (res.session != null) {
// Signed in immediately — router redirect takes over.
state = state.copyWith(clearAction: true);
return;
}
+ // No session: a confirmation email is on its way. Hold the address so the
+ // UI can cross-fade to a real "Check your email" state (not a toast that
+ // vanishes before the user reads it).
state = state.copyWith(
clearAction: true,
- notice: tr('auth.signUp.success'),
+ pendingEmail: email.trim(),
);
} on AuthException catch (e) {
- state = state.copyWith(clearAction: true, error: e.message);
- } catch (e) {
- state = state.copyWith(clearAction: true, error: e.toString());
+ state = state.copyWith(clearAction: true, error: authErrorMessage(e));
+ } catch (_) {
+ state = state.copyWith(
+ clearAction: true,
+ error: tr('auth.errors.generic'),
+ );
}
}
@@ -138,12 +189,12 @@ class AuthFormController extends StateNotifier {
);
// The browser hands off; supabase_flutter's deep-link observer completes
// the PKCE exchange on the nham://auth-callback return, onAuthStateChange
- // fires, and the router redirect routes in. Clear the spinner now — the
- // app is backgrounded in the browser and shouldn't sit spinning if the
- // user cancels and returns.
- state = state.copyWith(clearAction: true);
+ // fires, and the router redirect routes in. Keep the `google` action set
+ // so the UI can hold a "Finishing sign-in…" state across the Safari
+ // app-switch; the UI's lifecycle listener clears it if the user cancels
+ // and resumes still signed-out.
} on AuthException catch (e) {
- state = state.copyWith(clearAction: true, error: e.message);
+ state = state.copyWith(clearAction: true, error: authErrorMessage(e));
} catch (_) {
state = state.copyWith(
clearAction: true,
@@ -152,6 +203,111 @@ class AuthFormController extends StateNotifier {
}
}
+ /// Native Sign in with Apple. Required by App Store Guideline 4.8 whenever a
+ /// third-party social login (Google) is offered. Uses the native credential
+ /// sheet, then hands Supabase the identity token + raw nonce so it verifies
+ /// the Apple-signed hashed nonce embedded in the token.
+ Future signInWithApple() async {
+ state = state.copyWith(
+ action: AuthAction.apple,
+ clearError: true,
+ clearNotice: true,
+ );
+ try {
+ final rawNonce = _generateRawNonce();
+ final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();
+ final credential = await SignInWithApple.getAppleIDCredential(
+ scopes: const [
+ AppleIDAuthorizationScopes.email,
+ AppleIDAuthorizationScopes.fullName,
+ ],
+ nonce: hashedNonce,
+ );
+ final idToken = credential.identityToken;
+ if (idToken == null) {
+ state = state.copyWith(
+ clearAction: true,
+ error: tr('auth.dialog.appleError'),
+ );
+ return;
+ }
+ await _auth.signInWithIdToken(
+ provider: OAuthProvider.apple,
+ idToken: idToken,
+ nonce: rawNonce,
+ );
+ // Success: onAuthStateChange fires and the router redirect routes in.
+ state = state.copyWith(clearAction: true);
+ } on SignInWithAppleAuthorizationException catch (e) {
+ // User cancelled the sheet → no error surfaced, just clear the spinner.
+ if (e.code == AuthorizationErrorCode.canceled) {
+ state = state.copyWith(clearAction: true);
+ return;
+ }
+ state = state.copyWith(
+ clearAction: true,
+ error: tr('auth.dialog.appleError'),
+ );
+ } on AuthException catch (e) {
+ state = state.copyWith(clearAction: true, error: authErrorMessage(e));
+ } catch (_) {
+ state = state.copyWith(
+ clearAction: true,
+ error: tr('auth.dialog.appleError'),
+ );
+ }
+ }
+
+ /// A cryptographically-random nonce. Its SHA-256 is sent to Apple; the raw
+ /// value is sent to Supabase, which checks the two match to prevent replay.
+ String _generateRawNonce([int length = 32]) {
+ const charset =
+ '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-._';
+ final random = Random.secure();
+ return List.generate(
+ length,
+ (_) => charset[random.nextInt(charset.length)],
+ ).join();
+ }
+
+ /// Re-send the sign-up confirmation email to the pending address. Drives the
+ /// "Resend email" affordance on the confirm-email state; the UI owns the
+ /// cooldown so a tap can't spam Supabase's own rate limit.
+ Future resendConfirmation() async {
+ final email = state.pendingEmail;
+ if (email == null) return;
+ state = state.copyWith(action: AuthAction.email, clearError: true);
+ try {
+ await _auth.resend(type: OtpType.signup, email: email);
+ state = state.copyWith(
+ clearAction: true,
+ notice: tr('auth.confirm.resent'),
+ );
+ } on AuthException catch (e) {
+ state = state.copyWith(clearAction: true, error: authErrorMessage(e));
+ } catch (e) {
+ state = state.copyWith(
+ clearAction: true,
+ error: tr('auth.errors.generic'),
+ );
+ }
+ }
+
+ /// Drop the in-flight action (e.g. the OAuth browser round-trip was
+ /// cancelled and the app resumed still signed-out).
+ void resetAction() {
+ if (state.action != null) state = state.copyWith(clearAction: true);
+ }
+
+ /// Leave the confirm-email state (the "Back" affordance).
+ void clearPendingEmail() {
+ state = state.copyWith(
+ clearPendingEmail: true,
+ clearError: true,
+ clearNotice: true,
+ );
+ }
+
/// Clear any surfaced error/notice (e.g. when the user edits a field).
void clearMessages() {
if (state.error != null || state.notice != null) {
@@ -160,15 +316,10 @@ class AuthFormController extends StateNotifier {
}
}
-/// Sign-in screen controller.
+/// The auth controller. The welcome → email → confirm-email path is one flow,
+/// so a single instance backs the whole surface (the old split sign-in/sign-up
+/// providers collapsed with the split UI).
final signInControllerProvider =
StateNotifierProvider.autoDispose(
- AuthFormController.new,
-);
-
-/// Sign-up screen controller (separate instance so its `notice` state is
-/// independent of sign-in).
-final signUpControllerProvider =
- StateNotifierProvider.autoDispose(
- AuthFormController.new,
-);
+ AuthFormController.new,
+ );
diff --git a/apps/mobile-flutter/lib/features/auth/screens/forgot_password_screen.dart b/apps/mobile-flutter/lib/features/auth/screens/forgot_password_screen.dart
new file mode 100644
index 00000000..e45b753f
--- /dev/null
+++ b/apps/mobile-flutter/lib/features/auth/screens/forgot_password_screen.dart
@@ -0,0 +1,225 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+
+import '../../../data/env.dart';
+import '../../../services/supabase_service.dart';
+import '../../../shared/widgets/nham_primitives.dart';
+import '../../../theme/nham_colors.dart';
+import '../../../theme/nham_typography.dart';
+import '../widgets/auth_submit_button.dart';
+import '../widgets/auth_text_field.dart';
+
+/// Forgot-password flow. There was no password recovery at all before this.
+///
+/// Sends a reset email whose link routes through the web `/auth/callback` to the
+/// web `/reset-password` page (the same flow the web app uses), then holds on a
+/// persistent "check your email" state. Mobile reuses the web reset surface so
+/// no in-app deep-link recovery handling is needed.
+class ForgotPasswordScreen extends StatefulWidget {
+ const ForgotPasswordScreen({super.key});
+
+ @override
+ State createState() => _ForgotPasswordScreenState();
+}
+
+class _ForgotPasswordScreenState extends State {
+ final _email = TextEditingController();
+ String? _emailError;
+ bool _busy = false;
+ bool _sent = false;
+
+ @override
+ void dispose() {
+ _email.dispose();
+ super.dispose();
+ }
+
+ Future _submit() async {
+ final email = _email.text.trim();
+ final ok = RegExp(r'^[^@\s]+@[^@\s]+\.[^@\s]+$').hasMatch(email);
+ if (!ok) {
+ setState(() => _emailError = tr('auth.forgot.emailError'));
+ return;
+ }
+ setState(() {
+ _emailError = null;
+ _busy = true;
+ });
+ final locale = context.locale.languageCode;
+ final redirect =
+ '${Env.apiBaseUrl}/auth/callback?next=${Uri.encodeComponent('/$locale/reset-password')}';
+ try {
+ // Anti-enumeration: Supabase returns success regardless, so we always
+ // advance to the "check your email" state.
+ await SupabaseService.client.auth.resetPasswordForEmail(
+ email,
+ redirectTo: redirect,
+ );
+ } catch (_) {
+ // Swallow — still show the neutral confirmation.
+ }
+ if (!mounted) return;
+ setState(() {
+ _busy = false;
+ _sent = true;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Screen(
+ bottom: false,
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: [
+ _BackHeader(onBack: () => Navigator.of(context).maybePop()),
+ Expanded(
+ child: SingleChildScrollView(
+ padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 24),
+ child: ConstrainedBox(
+ constraints: const BoxConstraints(maxWidth: 420),
+ child: _sent ? _sentBody() : _formBody(),
+ ),
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+
+ Widget _formBody() {
+ return Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: [
+ Text(
+ tr('auth.forgot.title'),
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.serifRegular(
+ fontSize: NhamFontSize.h3,
+ ).copyWith(color: NhamColors.text),
+ ),
+ const SizedBox(height: 8),
+ Text(
+ tr('auth.forgot.description'),
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.sansRegular(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.textMuted, height: 1.5),
+ ),
+ const SizedBox(height: 20),
+ AuthTextField(
+ controller: _email,
+ label: tr('auth.forgot.email'),
+ placeholder: tr('auth.forgot.emailPlaceholder'),
+ keyboardType: TextInputType.emailAddress,
+ textInputAction: TextInputAction.done,
+ autofillHints: const [AutofillHints.email],
+ enabled: !_busy,
+ errorText: _emailError,
+ onSubmitted: (_) => _submit(),
+ onChanged: (_) {
+ if (_emailError != null) setState(() => _emailError = null);
+ },
+ ),
+ const SizedBox(height: 16),
+ AuthSubmitButton(
+ label: tr('auth.forgot.submit'),
+ busy: _busy,
+ loading: _busy,
+ onPressed: _submit,
+ ),
+ ],
+ );
+ }
+
+ Widget _sentBody() {
+ return Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: [
+ Center(
+ child: Container(
+ width: 48,
+ height: 48,
+ decoration: const BoxDecoration(
+ color: Color(0x26C9A87C), // accent @ 15%
+ shape: BoxShape.circle,
+ ),
+ child: const Icon(
+ LucideIcons.mailCheck,
+ size: 20,
+ color: Color(0xFFA88B63),
+ ),
+ ),
+ ),
+ const SizedBox(height: 16),
+ Text(
+ tr('auth.forgot.sentTitle'),
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.serifRegular(
+ fontSize: NhamFontSize.h3,
+ ).copyWith(color: NhamColors.text),
+ ),
+ const SizedBox(height: 8),
+ Text(
+ tr('auth.forgot.sentDescription'),
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.sansRegular(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.textMuted, height: 1.5),
+ ),
+ const SizedBox(height: 4),
+ Text(
+ _email.text.trim(),
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.serifRegular(
+ fontSize: 16,
+ ).copyWith(color: NhamColors.text),
+ ),
+ const SizedBox(height: 24),
+ AuthSubmitButton(
+ label: tr('auth.forgot.backToSignIn'),
+ busy: false,
+ loading: false,
+ onPressed: () => Navigator.of(context).maybePop(),
+ ),
+ ],
+ );
+ }
+}
+
+class _BackHeader extends StatelessWidget {
+ const _BackHeader({required this.onBack});
+ final VoidCallback onBack;
+
+ @override
+ Widget build(BuildContext context) {
+ return Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+ child: Align(
+ alignment: Alignment.centerLeft,
+ child: GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTap: onBack,
+ child: Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ const Icon(
+ LucideIcons.arrowLeft,
+ size: 16,
+ color: NhamColors.textMuted,
+ ),
+ const SizedBox(width: 6),
+ Text(
+ tr('auth.forgot.back'),
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.textMuted),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
diff --git a/apps/mobile-flutter/lib/features/auth/screens/sign_in_screen.dart b/apps/mobile-flutter/lib/features/auth/screens/sign_in_screen.dart
index 63dc8945..e7f74b2a 100644
--- a/apps/mobile-flutter/lib/features/auth/screens/sign_in_screen.dart
+++ b/apps/mobile-flutter/lib/features/auth/screens/sign_in_screen.dart
@@ -5,9 +5,9 @@ import '../widgets/auth_page.dart';
/// The sign-in route.
///
-/// A flat full-page auth surface (header, in-place Sign in / Sign up toggle,
-/// Google button, divider, form, footer) on the cream surface. Opens on the
-/// sign-in tab; the toggle/footer switches to sign-up in place (no route change).
+/// Lands on the pre-auth welcome screen (wordmark, typing demo, three social/
+/// email options). "Continue with email" cross-fades to a single email path;
+/// sign-up cross-fades to a "Check your email" state. No top tab split.
class SignInScreen extends StatelessWidget {
const SignInScreen({super.key});
@@ -15,7 +15,7 @@ class SignInScreen extends StatelessWidget {
Widget build(BuildContext context) {
return const Scaffold(
backgroundColor: NhamColors.surface,
- body: AuthPage(initialSignIn: true),
+ body: AuthPage(),
);
}
}
diff --git a/apps/mobile-flutter/lib/features/auth/screens/sign_up_screen.dart b/apps/mobile-flutter/lib/features/auth/screens/sign_up_screen.dart
index a64767c7..38a2cef4 100644
--- a/apps/mobile-flutter/lib/features/auth/screens/sign_up_screen.dart
+++ b/apps/mobile-flutter/lib/features/auth/screens/sign_up_screen.dart
@@ -5,9 +5,8 @@ import '../widgets/auth_page.dart';
/// The sign-up route.
///
-/// A flat full-page auth surface (header, in-place Sign in / Sign up toggle,
-/// Google button, divider, form, footer) on the cream surface. Opens on the
-/// sign-up tab; the toggle/footer switches to sign-in in place (no route change).
+/// Renders the same pre-auth welcome surface as `/sign-in` — the sign-in/sign-up
+/// split is collapsed into one path, so both routes land on the welcome screen.
class SignUpScreen extends StatelessWidget {
const SignUpScreen({super.key});
@@ -15,7 +14,7 @@ class SignUpScreen extends StatelessWidget {
Widget build(BuildContext context) {
return const Scaffold(
backgroundColor: NhamColors.surface,
- body: AuthPage(initialSignIn: false),
+ body: AuthPage(),
);
}
}
diff --git a/apps/mobile-flutter/lib/features/auth/widgets/apple_button.dart b/apps/mobile-flutter/lib/features/auth/widgets/apple_button.dart
new file mode 100644
index 00000000..cabf1fe1
--- /dev/null
+++ b/apps/mobile-flutter/lib/features/auth/widgets/apple_button.dart
@@ -0,0 +1,83 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+import '../../../theme/nham_colors.dart';
+import '../../../theme/nham_theme.dart';
+import '../../../theme/nham_typography.dart';
+
+/// "Continue with Apple" — a custom button matching the Google / email buttons.
+///
+/// Built to be identical in font, size and shape to the other auth buttons; the
+/// ONLY thing it keeps from Apple's styling is the colour (black fill, white
+/// logo + label). The mark is Apple's genuine logo glyph (U+F8FF) rendered from
+/// the iOS system font — not a hand-traced path — so it stays authentic.
+///
+/// Note: this is a hand-rolled button rather than the system
+/// `SignInWithAppleButton`, so it intentionally diverges from Apple's HIG
+/// "use the provided button" guidance in favour of a unified button stack.
+class AppleButton extends StatefulWidget {
+ const AppleButton({super.key, required this.onPressed, required this.busy});
+
+ final VoidCallback onPressed;
+
+ /// Any auth request is in flight — dims + blocks the button.
+ final bool busy;
+
+ @override
+ State createState() => _AppleButtonState();
+}
+
+class _AppleButtonState extends State {
+ bool _pressed = false;
+
+ // Apple's button black, and a slightly lighter shade for the pressed state.
+ static const Color _black = Color(0xFF000000);
+ static const Color _blackPressed = Color(0xFF1C1C1E);
+
+ @override
+ Widget build(BuildContext context) {
+ return Opacity(
+ opacity: widget.busy ? 0.6 : 1.0,
+ child: GestureDetector(
+ onTapDown:
+ widget.busy ? null : (_) => setState(() => _pressed = true),
+ onTapUp: widget.busy ? null : (_) => setState(() => _pressed = false),
+ onTapCancel:
+ widget.busy ? null : () => setState(() => _pressed = false),
+ onTap: widget.busy ? null : widget.onPressed,
+ child: AnimatedContainer(
+ duration: const Duration(milliseconds: 200),
+ padding: const EdgeInsets.symmetric(
+ horizontal: NhamSpacing.sp4,
+ vertical: NhamSpacing.sp3,
+ ),
+ decoration: BoxDecoration(
+ color: _pressed ? _blackPressed : _black,
+ borderRadius: BorderRadius.circular(NhamRadii.buttonXl),
+ ),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ // Apple's genuine logo glyph from the iOS system font.
+ const Text(
+ '\u{F8FF}',
+ style: TextStyle(
+ fontFamily: '.SF Pro Text',
+ fontSize: 19,
+ height: 1,
+ color: Colors.white,
+ ),
+ ),
+ const SizedBox(width: 8),
+ Text(
+ tr('auth.dialog.continueWithApple'),
+ style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.md)
+ .copyWith(color: NhamColors.elev, letterSpacing: -0.2),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
diff --git a/apps/mobile-flutter/lib/features/auth/widgets/auth_page.dart b/apps/mobile-flutter/lib/features/auth/widgets/auth_page.dart
index 2841b5bb..a091bf64 100644
--- a/apps/mobile-flutter/lib/features/auth/widgets/auth_page.dart
+++ b/apps/mobile-flutter/lib/features/auth/widgets/auth_page.dart
@@ -1,242 +1,335 @@
import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../../services/supabase_service.dart';
import '../../../theme/nham_colors.dart';
import '../../../theme/nham_theme.dart';
import '../../../theme/nham_typography.dart';
import '../providers/auth_form_controller.dart';
+import 'apple_button.dart';
import 'auth_divider.dart';
+import 'confirm_email_view.dart';
+import '../../../shared/widgets/top_toast.dart';
+import 'email_auth_form.dart';
import 'google_button.dart';
-import 'sign_in_form.dart';
-import 'sign_up_form.dart';
+import 'welcome_demo.dart';
-/// The auth surface as a full-bleed page.
+/// Which face of the auth surface is showing.
+enum _AuthMode { welcome, email }
+
+/// The auth surface as a full-bleed page on the cream surface.
///
-/// Ported from web `components/auth/auth-dialog.tsx`, but rendered as a flat
-/// page on the cream surface rather than a modal: no dimmed/blurred backdrop and
-/// no floating card. It keeps the same content (header, Google button +
-/// divider, form, footer) and cross-fades between the Sign in / Sign up forms;
-/// the footer link is the only tab switch (the top toggle was removed).
+/// Replaces the old "login wall titled Welcome back". It now lands on a real
+/// pre-auth **welcome screen**: the Lora wordmark, a typing demo resolving into
+/// a point result, then three stacked social/email options. "Continue with
+/// email" cross-fades to a single email path (no sign-in/sign-up tab split). A
+/// successful sign-up cross-fades again to a real "Check your email" state with
+/// a resend-cooldown, instead of a SnackBar that vanishes before it's read.
class AuthPage extends ConsumerStatefulWidget {
- const AuthPage({super.key, this.initialSignIn = true});
-
- /// Which tab opens first. `/sign-in` → true, `/sign-up` → false.
- final bool initialSignIn;
+ const AuthPage({super.key});
@override
ConsumerState createState() => _AuthPageState();
}
class _AuthPageState extends ConsumerState {
- late bool _signIn = widget.initialSignIn;
+ _AuthMode _mode = _AuthMode.welcome;
+
+ /// Drives the face-switch slide direction: true = advancing (welcome → email),
+ /// false = going back. Lets the transition read as forward/back navigation.
+ bool _forward = true;
+
+ // The welcome + email surfaces share one controller (single path).
+ static final _provider = signInControllerProvider;
+
+ AuthFormController get _controller => ref.read(_provider.notifier);
+
+ AppLifecycleListener? _lifecycle;
+
+ @override
+ void initState() {
+ super.initState();
+ // OAuth hands off to Safari; on return the deep-link observer completes the
+ // PKCE exchange. If the app resumes still signed-out, the user cancelled —
+ // drop the "Finishing sign-in…" pending state so it doesn't hang.
+ _lifecycle = AppLifecycleListener(
+ onResume: () {
+ final state = ref.read(_provider);
+ if (state.googleBusy &&
+ SupabaseService.client.auth.currentSession == null) {
+ _controller.clearMessages();
+ // Clear the in-flight action so the overlay drops.
+ ref.read(_provider.notifier).resetAction();
+ }
+ },
+ );
+ }
- void _setTab(bool signIn) {
- if (_signIn == signIn) return;
- setState(() => _signIn = signIn);
+ @override
+ void dispose() {
+ _lifecycle?.dispose();
+ super.dispose();
}
void _toast(String message) {
- final messenger = ScaffoldMessenger.maybeOf(context);
- if (messenger == null) return;
- messenger
- ..clearSnackBars()
- ..showSnackBar(
- SnackBar(
- behavior: SnackBarBehavior.floating,
- backgroundColor: NhamColors.cardCream,
- elevation: 4,
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(NhamRadii.buttonXl),
- side: const BorderSide(color: NhamColors.border),
- ),
- content: Text(
- message,
- style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.sm)
- .copyWith(color: NhamColors.text),
- ),
- ),
- );
+ showTopToast(context, message, variant: TopToastVariant.error);
}
@override
Widget build(BuildContext context) {
- final provider =
- _signIn ? signInControllerProvider : signUpControllerProvider;
- final state = ref.watch(provider);
-
- return SafeArea(
- child: Center(
- child: SingleChildScrollView(
- // Page gutter (32) + maxWidth 420 → a 356px content column, matching
- // the old card's px-8 inner width so spacing/line lengths are 1:1.
- padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 32),
- child: ConstrainedBox(
- constraints: const BoxConstraints(maxWidth: 420),
- child: Column(
- mainAxisSize: MainAxisSize.min,
- crossAxisAlignment: CrossAxisAlignment.stretch,
- children: [
- _header(),
- _googleBlock(state, ref.read(provider.notifier).signInWithGoogle),
- _formBlock(state),
- ],
- ),
- ),
- ),
- ),
- );
- }
+ final state = ref.watch(_provider);
+ final showConfirm = state.pendingEmail != null;
- // pb-2, centered.
- Widget _header() {
- return Padding(
- padding: const EdgeInsets.only(bottom: 8),
- child: Column(
- children: [
- Text(
- _signIn
- ? tr('auth.dialog.signInTitle')
- : tr('auth.dialog.signUpTitle'),
- textAlign: TextAlign.center,
- // Lora w400, 24px (text-2xl), #2C2416.
- style: NhamTextStyles.serifRegular(fontSize: NhamFontSize.h3)
- .copyWith(color: NhamColors.text),
- ),
- const SizedBox(height: 4), // mb-1
- Text(
- _signIn
- ? tr('auth.dialog.signInSubtitle')
- : tr('auth.dialog.signUpSubtitle'),
- textAlign: TextAlign.center,
- // text-sm #8B7355 DM Sans.
- style: NhamTextStyles.sansRegular(fontSize: NhamFontSize.sm)
- .copyWith(color: NhamColors.textMuted),
- ),
- ],
- ),
- );
- }
+ // Errors raised while the email form is on screen render inline there.
+ // Anything else (OAuth on the welcome face, a failed resend on the
+ // confirm face) would otherwise be invisible — toast those.
+ ref.listen(_provider, (prev, next) {
+ final err = next.error;
+ final emailFormShowing =
+ _mode == _AuthMode.email && next.pendingEmail == null;
+ if (err != null && err != prev?.error && !emailFormShowing) {
+ _toast(err);
+ _controller.clearMessages();
+ }
+ });
+
+ // Which face: confirm-email > email form > welcome. The key also tells the
+ // switcher's transitionBuilder which child is incoming vs outgoing.
+ final Key currentKey = showConfirm
+ ? const ValueKey('confirm')
+ : _mode == _AuthMode.email
+ ? const ValueKey('email')
+ : const ValueKey('welcome');
- // space-y-3, pt-4.
- Widget _googleBlock(AuthFormState state, VoidCallback onGoogle) {
- return Padding(
- padding: const EdgeInsets.only(top: 16),
- child: Column(
- children: [
- GoogleButton(
- busy: state.busy,
- loading: state.googleBusy,
- onPressed: onGoogle,
+ final Widget face;
+ if (showConfirm) {
+ face = ConfirmEmailView(provider: _provider, onNotice: _toast);
+ } else if (_mode == _AuthMode.email) {
+ face = EmailAuthForm(
+ provider: _provider,
+ onBack: () => setState(() {
+ _forward = false;
+ _mode = _AuthMode.welcome;
+ }),
+ );
+ } else {
+ face = _welcome(state);
+ }
+
+ // Each face is a full-screen, opaque page so switching reads as an
+ // iOS-style full-page push (not a content cross-fade). The opaque fill lets
+ // the incoming page cover the outgoing one as it slides across.
+ final Widget page = ColoredBox(
+ key: currentKey,
+ color: NhamColors.surface,
+ child: SafeArea(
+ child: Center(
+ child: SingleChildScrollView(
+ padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 32),
+ child: ConstrainedBox(
+ constraints: const BoxConstraints(maxWidth: 420),
+ child: face,
+ ),
),
- const SizedBox(height: 12), // space-y-3
- const AuthDivider(),
- ],
+ ),
),
);
- }
- // pt-4.
- Widget _formBlock(AuthFormState state) {
- return Padding(
- padding: const EdgeInsets.only(top: 16),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.stretch,
- children: [
- // Tab-switch cross-fade + 10px horizontal slide, 150ms, mode 'wait'.
- AnimatedSwitcher(
- duration: const Duration(milliseconds: 150),
- switchInCurve: Curves.easeOut,
- switchOutCurve: Curves.easeIn,
+ return Stack(
+ children: [
+ Positioned.fill(
+ child: AnimatedSwitcher(
+ duration: const Duration(milliseconds: 340),
transitionBuilder: (child, animation) {
- final incomingSignIn = (child.key == const ValueKey('sign-in'));
- // sign-in enters from x:-10, sign-up from x:+10.
- final beginDx = incomingSignIn ? -10.0 : 10.0;
- return FadeTransition(
- opacity: animation,
- child: AnimatedBuilder(
- animation: animation,
- builder: (context, c) => Transform.translate(
- offset: Offset(beginDx * (1 - animation.value), 0),
- child: c,
- ),
- child: child,
- ),
+ // Incoming slides a full width in from the lead side; outgoing
+ // parallax-slides a little the opposite way, beneath it. Direction
+ // flips on "back" via [_forward].
+ final incoming = child.key == currentKey;
+ final dir = _forward ? 1.0 : -1.0;
+ final curved = CurvedAnimation(
+ parent: animation,
+ curve: Curves.easeOutCubic,
+ );
+ final begin = incoming ? Offset(dir, 0) : Offset(-dir * 0.25, 0);
+ return SlideTransition(
+ position: Tween(begin: begin, end: Offset.zero)
+ .animate(curved),
+ child: child,
);
},
- child: _signIn
- ? SignInForm(key: const ValueKey('sign-in'), onError: _toast)
- : SignUpForm(
- key: const ValueKey('sign-up'),
- onError: _toast,
- onNotice: _toast,
- ),
+ layoutBuilder: (currentChild, previousChildren) => Stack(
+ children: [
+ ...previousChildren,
+ if (currentChild != null) currentChild,
+ ],
+ ),
+ child: page,
),
- const SizedBox(height: 20), // mt-5
- _footer(state),
- ],
- ),
+ ),
+ // OAuth app-switch: a calm "Finishing sign-in…" hold so the surface
+ // never sits blank or spins indefinitely after Safari returns.
+ if (state.googleBusy) const _FinishingOverlay(),
+ ],
);
}
- Widget _footer(AuthFormState state) {
- final prompt = _signIn
- ? tr('auth.signIn.noAccount')
- : tr('auth.signUp.hasAccount');
- final action =
- _signIn ? tr('auth.signIn.signUpLink') : tr('auth.signUp.signInLink');
- return Row(
- mainAxisAlignment: MainAxisAlignment.center,
+ Widget _welcome(AuthFormState state) {
+ final showApple =
+ defaultTargetPlatform == TargetPlatform.iOS ||
+ defaultTargetPlatform == TargetPlatform.macOS;
+ return Column(
+ key: const ValueKey('welcome'),
+ mainAxisSize: MainAxisSize.min,
+ crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
- Text(
- '$prompt ',
- style: NhamTextStyles.sansRegular(fontSize: NhamFontSize.sm)
- .copyWith(color: NhamColors.textMuted),
+ // Wordmark.
+ Center(
+ child: Text(
+ 'Nhẩm',
+ style: NhamTextStyles.serifRegular(
+ fontSize: 28,
+ ).copyWith(color: NhamColors.text),
+ ),
),
- // Inert while a request is in flight — same guard as the tab toggle.
- Opacity(
- opacity: state.busy ? 0.6 : 1.0,
- child: IgnorePointer(
- ignoring: state.busy,
- child: _FooterLink(label: action, onTap: () => _setTab(!_signIn)),
+ const SizedBox(height: 14),
+ // Tagline — sentence, with the second clause italic-tan.
+ Text.rich(
+ TextSpan(
+ children: [
+ TextSpan(text: '${tr('auth.welcome.tagline')} '),
+ TextSpan(
+ text: tr('auth.welcome.taglineHighlight'),
+ style: NhamTextStyles.serifItalic(
+ fontSize: NhamFontSize.h3,
+ ).copyWith(color: NhamColors.accent),
+ ),
+ ],
),
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.serifRegular(
+ fontSize: NhamFontSize.h3,
+ height: NhamLeading.snug,
+ ).copyWith(color: NhamColors.text),
+ ),
+ const SizedBox(height: 28),
+ const WelcomeDemo(),
+ const SizedBox(height: 28),
+ if (showApple) ...[
+ AppleButton(busy: state.busy, onPressed: _controller.signInWithApple),
+ const SizedBox(height: 12),
+ ],
+ GoogleButton(
+ busy: state.busy,
+ loading: state.googleBusy,
+ onPressed: _controller.signInWithGoogle,
+ ),
+ const SizedBox(height: 12),
+ const AuthDivider(),
+ const SizedBox(height: 12),
+ _EmailEntryButton(
+ busy: state.busy,
+ onPressed: () => setState(() {
+ _forward = true;
+ _mode = _AuthMode.email;
+ }),
+ ),
+ const SizedBox(height: 18),
+ Text(
+ tr('auth.welcome.terms'),
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.sansRegular(
+ fontSize: NhamFontSize.xs,
+ height: NhamLeading.normal,
+ ).copyWith(color: NhamColors.textMuted),
),
],
);
}
}
-/// Inline tab-switch link: `font-semibold text-[#C9A87C]
-/// hover:text-[#A88B63] transition-colors`.
-class _FooterLink extends StatefulWidget {
- const _FooterLink({required this.label, required this.onTap});
+/// "Continue with email" — a ghost button matching the Google button shape but
+/// without a logo, so the three options read as one stack.
+class _EmailEntryButton extends StatefulWidget {
+ const _EmailEntryButton({required this.onPressed, required this.busy});
- final String label;
- final VoidCallback onTap;
+ final VoidCallback onPressed;
+ final bool busy;
@override
- State<_FooterLink> createState() => _FooterLinkState();
+ State<_EmailEntryButton> createState() => _EmailEntryButtonState();
}
-class _FooterLinkState extends State<_FooterLink> {
+class _EmailEntryButtonState extends State<_EmailEntryButton> {
bool _pressed = false;
- // Web hover color is #A88B63 (distinct from the accentDark token #B89968).
- static const Color _hover = Color(0xFFA88B63);
+ @override
+ Widget build(BuildContext context) {
+ final fill = _pressed ? NhamColors.cardCream : NhamColors.elev;
+ return Opacity(
+ opacity: widget.busy ? 0.6 : 1.0,
+ child: GestureDetector(
+ onTapDown: widget.busy ? null : (_) => setState(() => _pressed = true),
+ onTapUp: widget.busy ? null : (_) => setState(() => _pressed = false),
+ onTapCancel:
+ widget.busy ? null : () => setState(() => _pressed = false),
+ onTap: widget.busy ? null : widget.onPressed,
+ child: AnimatedContainer(
+ duration: const Duration(milliseconds: 200),
+ padding: const EdgeInsets.symmetric(
+ horizontal: NhamSpacing.sp4,
+ vertical: NhamSpacing.sp3,
+ ),
+ decoration: BoxDecoration(
+ color: fill,
+ borderRadius: BorderRadius.circular(NhamRadii.buttonXl),
+ border: Border.all(color: NhamColors.border),
+ ),
+ alignment: Alignment.center,
+ child: Text(
+ tr('auth.welcome.continueWithEmail'),
+ style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.md)
+ .copyWith(color: NhamColors.text, letterSpacing: -0.2),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+/// A calm full-bleed "Finishing sign-in…" hold shown while the OAuth browser
+/// round-trip completes after Safari returns.
+class _FinishingOverlay extends StatelessWidget {
+ const _FinishingOverlay();
@override
Widget build(BuildContext context) {
- return GestureDetector(
- behavior: HitTestBehavior.opaque,
- onTapDown: (_) => setState(() => _pressed = true),
- onTapUp: (_) => setState(() => _pressed = false),
- onTapCancel: () => setState(() => _pressed = false),
- onTap: widget.onTap,
- child: AnimatedDefaultTextStyle(
- duration: const Duration(milliseconds: 200), // transition-colors
- style: NhamTextStyles.sansSemiBold(fontSize: NhamFontSize.sm)
- .copyWith(color: _pressed ? _hover : NhamColors.accent),
- child: Text(widget.label),
+ return Positioned.fill(
+ child: ColoredBox(
+ color: NhamColors.surface80,
+ child: Center(
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ const SizedBox(
+ width: 22,
+ height: 22,
+ child: CircularProgressIndicator(
+ strokeWidth: 2,
+ color: NhamColors.accent,
+ ),
+ ),
+ const SizedBox(height: 16),
+ Text(
+ tr('auth.pending.finishing'),
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.textMuted),
+ ),
+ ],
+ ),
+ ),
),
);
}
diff --git a/apps/mobile-flutter/lib/features/auth/widgets/auth_submit_button.dart b/apps/mobile-flutter/lib/features/auth/widgets/auth_submit_button.dart
index 270b0c34..c88aaaff 100644
--- a/apps/mobile-flutter/lib/features/auth/widgets/auth_submit_button.dart
+++ b/apps/mobile-flutter/lib/features/auth/widgets/auth_submit_button.dart
@@ -79,7 +79,7 @@ class _AuthSubmitButtonState extends State {
],
Text(
widget.label,
- style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.sm)
+ style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.md)
.copyWith(color: NhamColors.elev, letterSpacing: -0.2),
),
],
diff --git a/apps/mobile-flutter/lib/features/auth/widgets/auth_text_field.dart b/apps/mobile-flutter/lib/features/auth/widgets/auth_text_field.dart
index 3999bfdf..080d36d3 100644
--- a/apps/mobile-flutter/lib/features/auth/widgets/auth_text_field.dart
+++ b/apps/mobile-flutter/lib/features/auth/widgets/auth_text_field.dart
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../../theme/nham_colors.dart';
import '../../../theme/nham_theme.dart';
@@ -104,7 +105,7 @@ class _AuthTextFieldState extends State {
// Label.
Text(
widget.label,
- style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.xs)
+ style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.detail)
.copyWith(color: NhamColors.text, letterSpacing: NhamTracking.wide),
),
const SizedBox(height: 6), // space-y-1.5
@@ -138,13 +139,13 @@ class _AuthTextFieldState extends State {
autocorrect: false,
enableSuggestions: !isPassword,
cursorColor: NhamColors.text,
- style: NhamTextStyles.sansRegular(fontSize: NhamFontSize.sm)
+ style: NhamTextStyles.sansRegular(fontSize: NhamFontSize.md)
.copyWith(color: NhamColors.text),
decoration: InputDecoration(
isDense: true,
hintText: widget.placeholder,
hintStyle:
- NhamTextStyles.sansRegular(fontSize: NhamFontSize.sm)
+ NhamTextStyles.sansRegular(fontSize: NhamFontSize.md)
.copyWith(color: _placeholder),
filled: false,
border: InputBorder.none,
@@ -172,7 +173,7 @@ class _AuthTextFieldState extends State {
const SizedBox(height: 6), // space-y-1.5
Text(
widget.errorText!,
- style: NhamTextStyles.sansRegular(fontSize: NhamFontSize.xs)
+ style: NhamTextStyles.sansRegular(fontSize: NhamFontSize.detail)
.copyWith(color: _red500),
),
],
@@ -209,7 +210,7 @@ class _RevealToggleState extends State<_RevealToggle> {
onTapCancel: () => setState(() => _pressed = false),
onTap: widget.onTap,
child: Icon(
- widget.revealed ? Icons.visibility_off_outlined : Icons.visibility_outlined,
+ widget.revealed ? LucideIcons.eyeOff : LucideIcons.eye,
size: 16,
color: color,
),
diff --git a/apps/mobile-flutter/lib/features/auth/widgets/confirm_email_view.dart b/apps/mobile-flutter/lib/features/auth/widgets/confirm_email_view.dart
new file mode 100644
index 00000000..d308cbc6
--- /dev/null
+++ b/apps/mobile-flutter/lib/features/auth/widgets/confirm_email_view.dart
@@ -0,0 +1,192 @@
+import 'dart:async';
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+
+import '../../../theme/nham_colors.dart';
+import '../../../theme/nham_theme.dart';
+import '../../../theme/nham_typography.dart';
+import '../providers/auth_form_controller.dart';
+
+/// The post-sign-up "Check your email" state.
+///
+/// Replaces the SnackBar that vanished before the user could read it: a real
+/// surface that names the address the confirmation went to, with a resend
+/// affordance gated by a 30s cooldown so the tap can't spam Supabase's rate
+/// limit. "Back" returns to the welcome screen.
+class ConfirmEmailView extends ConsumerStatefulWidget {
+ const ConfirmEmailView({
+ super.key,
+ required this.provider,
+ required this.onNotice,
+ });
+
+ final AutoDisposeStateNotifierProvider
+ provider;
+ final void Function(String message) onNotice;
+
+ @override
+ ConsumerState createState() => _ConfirmEmailViewState();
+}
+
+class _ConfirmEmailViewState extends ConsumerState {
+ static const _cooldownSeconds = 30;
+ int _remaining = _cooldownSeconds;
+ Timer? _timer;
+ bool _wasBusy = false;
+
+ @override
+ void initState() {
+ super.initState();
+ _startCooldown();
+ }
+
+ void _startCooldown() {
+ _remaining = _cooldownSeconds;
+ _timer?.cancel();
+ _timer = Timer.periodic(const Duration(seconds: 1), (t) {
+ if (!mounted) return;
+ if (_remaining <= 1) {
+ t.cancel();
+ setState(() => _remaining = 0);
+ } else {
+ setState(() => _remaining--);
+ }
+ });
+ }
+
+ @override
+ void dispose() {
+ _timer?.cancel();
+ super.dispose();
+ }
+
+ AuthFormController get _controller => ref.read(widget.provider.notifier);
+
+ void _resend() {
+ if (_remaining > 0) return;
+ _controller.resendConfirmation();
+ _startCooldown();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ final state = ref.watch(widget.provider);
+ final busy = state.busy;
+ final email = state.pendingEmail ?? '';
+
+ if (_wasBusy && !busy && state.notice != null) {
+ final msg = state.notice!;
+ WidgetsBinding.instance.addPostFrameCallback((_) {
+ widget.onNotice(msg);
+ _controller.clearMessages();
+ });
+ }
+ _wasBusy = busy;
+
+ final canResend = _remaining == 0 && !busy;
+
+ return Column(
+ key: const ValueKey('confirm-view'),
+ mainAxisSize: MainAxisSize.min,
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: [
+ Center(
+ child: Container(
+ width: 56,
+ height: 56,
+ decoration: const BoxDecoration(
+ color: NhamColors.accentSelectedFill,
+ shape: BoxShape.circle,
+ ),
+ child: const Icon(
+ LucideIcons.mail,
+ size: 24,
+ color: NhamColors.accent,
+ ),
+ ),
+ ),
+ const SizedBox(height: 20),
+ Text(
+ tr('auth.confirm.title'),
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.serifRegular(
+ fontSize: NhamFontSize.h3,
+ ).copyWith(color: NhamColors.text),
+ ),
+ const SizedBox(height: 8),
+ Text(
+ tr('auth.confirm.description'),
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.sansRegular(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.textMuted),
+ ),
+ const SizedBox(height: 2),
+ Text(
+ email,
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.sansSemiBold(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.text),
+ ),
+ const SizedBox(height: 12),
+ Text(
+ tr('auth.confirm.hint'),
+ textAlign: TextAlign.center,
+ style: NhamTextStyles.sansRegular(
+ fontSize: NhamFontSize.xs,
+ height: NhamLeading.normal,
+ ).copyWith(color: NhamColors.textMuted),
+ ),
+ const SizedBox(height: 24),
+ // Resend (cooldown-gated).
+ GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTap: canResend ? _resend : null,
+ child: Container(
+ padding: const EdgeInsets.symmetric(
+ horizontal: NhamSpacing.sp4,
+ vertical: NhamSpacing.sp3,
+ ),
+ decoration: BoxDecoration(
+ color: NhamColors.elev,
+ borderRadius: BorderRadius.circular(NhamRadii.buttonXl),
+ border: Border.all(color: NhamColors.border),
+ ),
+ alignment: Alignment.center,
+ child: Text(
+ canResend
+ ? tr('auth.confirm.resend')
+ : tr(
+ 'auth.confirm.resendIn',
+ namedArgs: {'seconds': '$_remaining'},
+ ),
+ style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.md)
+ .copyWith(
+ color: canResend
+ ? NhamColors.text
+ : NhamColors.textMuted,
+ ),
+ ),
+ ),
+ ),
+ const SizedBox(height: 12),
+ Center(
+ child: GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTap: busy ? null : _controller.clearPendingEmail,
+ child: Text(
+ tr('auth.confirm.back'),
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.textMuted),
+ ),
+ ),
+ ),
+ ],
+ );
+ }
+}
diff --git a/apps/mobile-flutter/lib/features/auth/widgets/email_auth_form.dart b/apps/mobile-flutter/lib/features/auth/widgets/email_auth_form.dart
new file mode 100644
index 00000000..f1c0114b
--- /dev/null
+++ b/apps/mobile-flutter/lib/features/auth/widgets/email_auth_form.dart
@@ -0,0 +1,228 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+
+import '../../../theme/nham_colors.dart';
+import '../../../theme/nham_typography.dart';
+import '../providers/auth_form_controller.dart';
+import '../screens/forgot_password_screen.dart';
+import 'auth_submit_button.dart';
+import 'auth_text_field.dart';
+
+/// The single email path, reached from the welcome screen's "Continue with
+/// email". One form, no top tabs: a primary action signs the user in, and a
+/// quiet toggle below flips it to account-creation in place — collapsing the
+/// old sign-in/sign-up split into one screen.
+class EmailAuthForm extends ConsumerStatefulWidget {
+ const EmailAuthForm({
+ super.key,
+ required this.provider,
+ required this.onBack,
+ });
+
+ final AutoDisposeStateNotifierProvider
+ provider;
+ final VoidCallback onBack;
+
+ @override
+ ConsumerState createState() => _EmailAuthFormState();
+}
+
+class _EmailAuthFormState extends ConsumerState {
+ final _email = TextEditingController();
+ final _password = TextEditingController();
+ String? _emailError;
+ String? _passwordError;
+ bool _createMode = false;
+
+ @override
+ void dispose() {
+ _email.dispose();
+ _password.dispose();
+ super.dispose();
+ }
+
+ AuthFormController get _controller => ref.read(widget.provider.notifier);
+
+ bool _validate() {
+ final email = _email.text.trim();
+ final emailOk = RegExp(r'^[^@\s]+@[^@\s]+\.[^@\s]+$').hasMatch(email);
+ final passOk = _password.text.length >= 6;
+ setState(() {
+ _emailError = emailOk ? null : tr('auth.signIn.emailError');
+ _passwordError = passOk ? null : tr('auth.signIn.passwordError');
+ });
+ return emailOk && passOk;
+ }
+
+ void _submit() {
+ if (!_validate()) return;
+ if (_createMode) {
+ _controller.signUp(email: _email.text, password: _password.text);
+ } else {
+ _controller.signInWithEmail(email: _email.text, password: _password.text);
+ }
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ final state = ref.watch(widget.provider);
+ final busy = state.busy;
+
+ return Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: [
+ // Back to the welcome screen.
+ Align(
+ alignment: Alignment.centerLeft,
+ child: GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTap: busy ? null : widget.onBack,
+ child: Padding(
+ padding: const EdgeInsets.only(bottom: 8),
+ child: Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ const Icon(
+ LucideIcons.arrowLeft,
+ size: 16,
+ color: NhamColors.textMuted,
+ ),
+ const SizedBox(width: 6),
+ Text(
+ tr('auth.confirm.back'),
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.textMuted),
+ ),
+ ],
+ ),
+ ),
+ ),
+ ),
+ Text(
+ _createMode
+ ? tr('auth.dialog.signUpTitle')
+ : tr('auth.dialog.signInTitle'),
+ style: NhamTextStyles.serifRegular(
+ fontSize: NhamFontSize.h3,
+ ).copyWith(color: NhamColors.text),
+ ),
+ const SizedBox(height: 16),
+ AuthTextField(
+ controller: _email,
+ label: tr('auth.signIn.email'),
+ placeholder: tr('auth.signIn.emailPlaceholder'),
+ keyboardType: TextInputType.emailAddress,
+ textInputAction: TextInputAction.next,
+ autofillHints: const [AutofillHints.email],
+ enabled: !busy,
+ errorText: _emailError,
+ onChanged: (_) {
+ if (_emailError != null) setState(() => _emailError = null);
+ _controller.clearMessages();
+ },
+ ),
+ const SizedBox(height: 16),
+ AuthTextField(
+ controller: _password,
+ label: tr('auth.signIn.password'),
+ placeholder: _createMode
+ ? tr('auth.signUp.passwordPlaceholder')
+ : tr('auth.signIn.passwordPlaceholder'),
+ obscureText: true,
+ textInputAction: TextInputAction.done,
+ autofillHints: _createMode
+ ? const [AutofillHints.newPassword]
+ : const [AutofillHints.password],
+ onSubmitted: (_) => _submit(),
+ enabled: !busy,
+ errorText: _passwordError,
+ onChanged: (_) {
+ if (_passwordError != null) setState(() => _passwordError = null);
+ _controller.clearMessages();
+ },
+ ),
+ if (!_createMode) ...[
+ const SizedBox(height: 8),
+ Align(
+ alignment: Alignment.centerRight,
+ child: GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTap: busy
+ ? null
+ : () => Navigator.of(context).push(
+ MaterialPageRoute(
+ builder: (_) => const ForgotPasswordScreen(),
+ ),
+ ),
+ child: Text(
+ tr('auth.signIn.forgotPassword'),
+ style: NhamTextStyles.sansRegular(
+ fontSize: 12,
+ ).copyWith(color: NhamColors.textMuted),
+ ),
+ ),
+ ),
+ ],
+ // Inline auth error — stays put (unlike a toast) and the fields keep
+ // their values so the user can correct and retry in place.
+ if (state.error != null) ...[
+ const SizedBox(height: 12),
+ Text(
+ state.error!,
+ style: NhamTextStyles.sansRegular(
+ fontSize: NhamFontSize.sm,
+ height: NhamLeading.normal,
+ ).copyWith(color: NhamColors.danger),
+ ),
+ ],
+ const SizedBox(height: 16),
+ AuthSubmitButton(
+ label: _createMode
+ ? tr('auth.signUp.submit')
+ : tr('auth.signIn.submit'),
+ busy: busy,
+ loading: state.emailBusy,
+ onPressed: _submit,
+ ),
+ const SizedBox(height: 20),
+ Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Text(
+ _createMode
+ ? '${tr('auth.signUp.hasAccount')} '
+ : '${tr('auth.signIn.noAccount')} ',
+ style: NhamTextStyles.sansRegular(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.textMuted),
+ ),
+ Opacity(
+ opacity: busy ? 0.6 : 1.0,
+ child: IgnorePointer(
+ ignoring: busy,
+ child: GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTap: () {
+ _controller.clearMessages();
+ setState(() => _createMode = !_createMode);
+ },
+ child: Text(
+ _createMode
+ ? tr('auth.signUp.signInLink')
+ : tr('auth.signIn.signUpLink'),
+ style: NhamTextStyles.sansSemiBold(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.accent),
+ ),
+ ),
+ ),
+ ),
+ ],
+ ),
+ ],
+ );
+ }
+}
diff --git a/apps/mobile-flutter/lib/features/auth/widgets/google_button.dart b/apps/mobile-flutter/lib/features/auth/widgets/google_button.dart
index f187beb0..dbf1a25f 100644
--- a/apps/mobile-flutter/lib/features/auth/widgets/google_button.dart
+++ b/apps/mobile-flutter/lib/features/auth/widgets/google_button.dart
@@ -79,7 +79,7 @@ class _GoogleButtonState extends State {
const SizedBox(width: 10), // gap-2.5
Text(
tr('auth.dialog.continueWithGoogle'),
- style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.sm)
+ style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.md)
.copyWith(color: NhamColors.text, letterSpacing: -0.2),
),
],
diff --git a/apps/mobile-flutter/lib/features/auth/widgets/sign_in_form.dart b/apps/mobile-flutter/lib/features/auth/widgets/sign_in_form.dart
deleted file mode 100644
index 471c580c..00000000
--- a/apps/mobile-flutter/lib/features/auth/widgets/sign_in_form.dart
+++ /dev/null
@@ -1,119 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-
-import '../providers/auth_form_controller.dart';
-import 'auth_submit_button.dart';
-import 'auth_text_field.dart';
-
-/// In-dialog sign-in form.
-///
-/// Matches web `components/auth/sign-in-form.tsx`: a `space-y-4` (16px) stack of
-/// email + password fields and the espresso submit button. Validation is
-/// per-field (zod: email format, password min 6) surfacing inline red messages;
-/// Supabase errors arrive via a transient toast (handled by the controller's
-/// caller).
-class SignInForm extends ConsumerStatefulWidget {
- const SignInForm({super.key, required this.onError});
-
- /// Surfaces a Supabase error message as a transient toast.
- final void Function(String message) onError;
-
- @override
- ConsumerState createState() => _SignInFormState();
-}
-
-class _SignInFormState extends ConsumerState {
- final _email = TextEditingController();
- final _password = TextEditingController();
- String? _emailError;
- String? _passwordError;
- bool _wasBusy = false;
-
- @override
- void dispose() {
- _email.dispose();
- _password.dispose();
- super.dispose();
- }
-
- AuthFormController get _controller =>
- ref.read(signInControllerProvider.notifier);
-
- // zod: z.email() + z.string().min(6).
- bool _validate() {
- final email = _email.text.trim();
- final emailOk = RegExp(r'^[^@\s]+@[^@\s]+\.[^@\s]+$').hasMatch(email);
- final passOk = _password.text.length >= 6;
- setState(() {
- _emailError = emailOk ? null : tr('auth.signIn.emailError');
- _passwordError = passOk ? null : tr('auth.signIn.passwordError');
- });
- return emailOk && passOk;
- }
-
- void _submit() {
- if (!_validate()) return;
- _controller.signInWithEmail(
- email: _email.text,
- password: _password.text,
- );
- }
-
- @override
- Widget build(BuildContext context) {
- final state = ref.watch(signInControllerProvider);
- final busy = state.busy;
-
- // Surface a Supabase error as a toast once the request settles.
- if (_wasBusy && !busy && state.error != null) {
- final msg = state.error!;
- WidgetsBinding.instance.addPostFrameCallback((_) {
- widget.onError(msg);
- _controller.clearMessages();
- });
- }
- _wasBusy = busy;
-
- return Column(
- crossAxisAlignment: CrossAxisAlignment.stretch,
- children: [
- AuthTextField(
- controller: _email,
- label: tr('auth.signIn.email'),
- placeholder: tr('auth.signIn.emailPlaceholder'),
- keyboardType: TextInputType.emailAddress,
- textInputAction: TextInputAction.next,
- autofillHints: const [AutofillHints.email],
- enabled: !busy,
- errorText: _emailError,
- onChanged: (_) {
- if (_emailError != null) setState(() => _emailError = null);
- },
- ),
- const SizedBox(height: 16), // space-y-4
- AuthTextField(
- controller: _password,
- label: tr('auth.signIn.password'),
- placeholder: tr('auth.signIn.passwordPlaceholder'),
- obscureText: true,
- textInputAction: TextInputAction.done,
- autofillHints: const [AutofillHints.password],
- onSubmitted: (_) => _submit(),
- enabled: !busy,
- errorText: _passwordError,
- onChanged: (_) {
- if (_passwordError != null) setState(() => _passwordError = null);
- },
- ),
- const SizedBox(height: 16), // space-y-4
- AuthSubmitButton(
- label: tr('auth.signIn.submit'),
- busy: busy,
- loading: state.emailBusy,
- onPressed: _submit,
- ),
- ],
- );
- }
-}
diff --git a/apps/mobile-flutter/lib/features/auth/widgets/sign_up_form.dart b/apps/mobile-flutter/lib/features/auth/widgets/sign_up_form.dart
deleted file mode 100644
index fbb67734..00000000
--- a/apps/mobile-flutter/lib/features/auth/widgets/sign_up_form.dart
+++ /dev/null
@@ -1,122 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
-
-import '../providers/auth_form_controller.dart';
-import 'auth_submit_button.dart';
-import 'auth_text_field.dart';
-
-/// In-dialog sign-up form.
-///
-/// Matches web `components/auth/sign-up-form.tsx`: a `space-y-4` (16px) stack of
-/// email + password fields and the espresso submit button. Validation is
-/// per-field (zod: email format, password min 6). Both the Supabase error and
-/// the "check your email" success are delivered as transient toasts (web uses
-/// sonner) rather than inline paragraphs.
-class SignUpForm extends ConsumerStatefulWidget {
- const SignUpForm({super.key, required this.onError, required this.onNotice});
-
- final void Function(String message) onError;
- final void Function(String message) onNotice;
-
- @override
- ConsumerState createState() => _SignUpFormState();
-}
-
-class _SignUpFormState extends ConsumerState {
- final _email = TextEditingController();
- final _password = TextEditingController();
- String? _emailError;
- String? _passwordError;
- bool _wasBusy = false;
-
- @override
- void dispose() {
- _email.dispose();
- _password.dispose();
- super.dispose();
- }
-
- AuthFormController get _controller =>
- ref.read(signUpControllerProvider.notifier);
-
- bool _validate() {
- final email = _email.text.trim();
- final emailOk = RegExp(r'^[^@\s]+@[^@\s]+\.[^@\s]+$').hasMatch(email);
- final passOk = _password.text.length >= 6;
- setState(() {
- _emailError = emailOk ? null : tr('auth.signUp.emailError');
- _passwordError = passOk ? null : tr('auth.signUp.passwordError');
- });
- return emailOk && passOk;
- }
-
- void _submit() {
- if (!_validate()) return;
- _controller.signUp(email: _email.text, password: _password.text);
- }
-
- @override
- Widget build(BuildContext context) {
- final state = ref.watch(signUpControllerProvider);
- final busy = state.busy;
-
- if (_wasBusy && !busy) {
- if (state.error != null) {
- final msg = state.error!;
- WidgetsBinding.instance.addPostFrameCallback((_) {
- widget.onError(msg);
- _controller.clearMessages();
- });
- } else if (state.notice != null) {
- final msg = state.notice!;
- WidgetsBinding.instance.addPostFrameCallback((_) {
- widget.onNotice(msg);
- _controller.clearMessages();
- });
- }
- }
- _wasBusy = busy;
-
- return Column(
- crossAxisAlignment: CrossAxisAlignment.stretch,
- children: [
- AuthTextField(
- controller: _email,
- label: tr('auth.signUp.email'),
- placeholder: tr('auth.signUp.emailPlaceholder'),
- keyboardType: TextInputType.emailAddress,
- textInputAction: TextInputAction.next,
- autofillHints: const [AutofillHints.email],
- enabled: !busy,
- errorText: _emailError,
- onChanged: (_) {
- if (_emailError != null) setState(() => _emailError = null);
- },
- ),
- const SizedBox(height: 16), // space-y-4
- AuthTextField(
- controller: _password,
- label: tr('auth.signUp.password'),
- placeholder: tr('auth.signUp.passwordPlaceholder'),
- obscureText: true,
- textInputAction: TextInputAction.done,
- autofillHints: const [AutofillHints.newPassword],
- onSubmitted: (_) => _submit(),
- enabled: !busy,
- errorText: _passwordError,
- onChanged: (_) {
- if (_passwordError != null) setState(() => _passwordError = null);
- },
- ),
- const SizedBox(height: 16), // space-y-4
- AuthSubmitButton(
- label: tr('auth.signUp.submit'),
- busy: busy,
- loading: state.emailBusy,
- onPressed: _submit,
- ),
- ],
- );
- }
-}
diff --git a/apps/mobile-flutter/lib/features/auth/widgets/welcome_demo.dart b/apps/mobile-flutter/lib/features/auth/widgets/welcome_demo.dart
new file mode 100644
index 00000000..77a3d943
--- /dev/null
+++ b/apps/mobile-flutter/lib/features/auth/widgets/welcome_demo.dart
@@ -0,0 +1,156 @@
+import 'dart:async';
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+import '../../../theme/nham_colors.dart';
+import '../../../theme/nham_theme.dart';
+import '../../../theme/nham_typography.dart';
+
+/// The pre-auth typing demo: a Vietnamese meal string types itself in, then a
+/// small result chip springs in with a point calorie value.
+///
+/// Mirrors the landing hero's real typing animation (50ms/char, then an 800ms
+/// pause before the AI response springs in) — the one decorative flourish on the
+/// welcome screen, and the product's pitch in a single glance. Per the founder
+/// direction the result is a single point value (no range, no confidence label).
+/// Respects reduced-motion by showing the resolved end-state immediately.
+class WelcomeDemo extends StatefulWidget {
+ const WelcomeDemo({super.key});
+
+ @override
+ State createState() => _WelcomeDemoState();
+}
+
+class _WelcomeDemoState extends State
+ with SingleTickerProviderStateMixin {
+ String _full = '';
+ int _typed = 0;
+ bool _resolved = false;
+ Timer? _timer;
+
+ late final AnimationController _chip;
+
+ bool get _reducedMotion =>
+ WidgetsBinding
+ .instance
+ .platformDispatcher
+ .accessibilityFeatures
+ .disableAnimations;
+
+ @override
+ void initState() {
+ super.initState();
+ _chip = AnimationController(
+ vsync: this,
+ duration: const Duration(milliseconds: 420),
+ );
+ }
+
+ @override
+ void didChangeDependencies() {
+ super.didChangeDependencies();
+ final full = tr('auth.welcome.demoMeal');
+ if (full == _full) return;
+
+ _timer?.cancel();
+ _full = full;
+ if (_reducedMotion) {
+ _typed = _full.length;
+ _resolved = true;
+ _chip.value = 1;
+ return;
+ }
+ _typed = 0;
+ _resolved = false;
+ _chip.reset();
+ _startTyping();
+ }
+
+ void _startTyping() {
+ _timer = Timer.periodic(const Duration(milliseconds: 50), (t) {
+ if (!mounted) return;
+ if (_typed >= _full.length) {
+ t.cancel();
+ // 800ms pause, then the result springs in.
+ _timer = Timer(const Duration(milliseconds: 800), () {
+ if (!mounted) return;
+ setState(() => _resolved = true);
+ _chip.forward();
+ });
+ return;
+ }
+ setState(() => _typed++);
+ });
+ }
+
+ @override
+ void dispose() {
+ _timer?.cancel();
+ _chip.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ width: double.infinity,
+ padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 16),
+ decoration: BoxDecoration(
+ color: NhamColors.elev,
+ borderRadius: BorderRadius.circular(NhamRadii.xxl),
+ border: Border.all(color: NhamColors.border),
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ // The user's words, in Lora — the loudest thing on the screen.
+ Text(
+ _full.substring(0, _typed),
+ style: NhamTextStyles.serifRegular(
+ fontSize: NhamFontSize.lg,
+ height: NhamLeading.snug,
+ ).copyWith(color: NhamColors.text),
+ ),
+ const SizedBox(height: 14),
+ // The point result chip springs in once typing resolves.
+ AnimatedSize(
+ duration: const Duration(milliseconds: 240),
+ curve: Curves.easeOut,
+ alignment: Alignment.centerLeft,
+ child:
+ _resolved
+ ? FadeTransition(
+ opacity: _chip,
+ child: ScaleTransition(
+ scale: Tween(begin: 0.92, end: 1).animate(
+ CurvedAnimation(parent: _chip, curve: Curves.easeOut),
+ ),
+ alignment: Alignment.centerLeft,
+ child: _resultChip(),
+ ),
+ )
+ : const SizedBox(height: 0, width: double.infinity),
+ ),
+ ],
+ ),
+ );
+ }
+
+ Widget _resultChip() {
+ return Container(
+ padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 7),
+ decoration: BoxDecoration(
+ color: NhamColors.accentSelectedFill,
+ borderRadius: BorderRadius.circular(NhamRadii.xl),
+ border: Border.all(color: NhamColors.accentSelectedBorder),
+ ),
+ child: Text(
+ tr('auth.welcome.demoResult', namedArgs: {'kcal': '620'}),
+ style: NhamTextStyles.sansSemiBold(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.text),
+ ),
+ );
+ }
+}
diff --git a/apps/mobile-flutter/lib/features/dashboard/data/dashboard_providers.dart b/apps/mobile-flutter/lib/features/dashboard/data/dashboard_providers.dart
index 588e9ca0..bd6bda9a 100644
--- a/apps/mobile-flutter/lib/features/dashboard/data/dashboard_providers.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/data/dashboard_providers.dart
@@ -88,6 +88,33 @@ final loggingDayProvider =
return bundle.day;
});
+/// Per-day meal slice for the dashboard's paged day-viewer.
+///
+/// Browsing a past day must NOT refetch the whole 90d heatmap + profile + weight
+/// bundle just to swap the meal list. This hits the same lightweight
+/// `GET /api/v1/logging/day` endpoint the logging surface uses and decodes only
+/// the [LoggingDayData] (persistedMeals) slice the Today card renders. The
+/// *anchor* day (today) still reads off the already-warm bundle so the first
+/// page costs no extra round-trip; only swiping to another day fetches.
+///
+/// Deliberately NOT autoDispose: the pager keeps day slices cached while the
+/// user swipes back and forth (autoDispose would refetch on every page turn).
+/// The trade-off is that mutations must invalidate the affected date
+/// explicitly — meal confirm ([ConfirmMealNotifier]) and meal delete
+/// (the feed's swipe-remove) both do.
+final dashboardDayProvider =
+ FutureProvider.family((ref, args) async {
+ final api = ref.watch(apiClientProvider);
+ final tz = localTimezoneOffsetMinutes();
+ final date = Uri.encodeComponent(args.date);
+ return runWithRetry(() async {
+ final json = await api.get>(
+ '/api/v1/logging/day?date=$date&tz=$tz',
+ );
+ return LoggingDayData.fromJson(json);
+ });
+});
+
/// `useWeightSummary('30d')` → the 30-day weight summary slice. The mobile
/// chart is fixed at 30d (the section header shows the passive "30 days"
/// label), so this reads `bundle.weightSummary` directly.
diff --git a/apps/mobile-flutter/lib/features/dashboard/logic/dashboard_format.dart b/apps/mobile-flutter/lib/features/dashboard/logic/dashboard_format.dart
index fb62d198..b7a4603a 100644
--- a/apps/mobile-flutter/lib/features/dashboard/logic/dashboard_format.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/logic/dashboard_format.dart
@@ -4,9 +4,16 @@
/// `todayDateString` helper used by the dashboard screen.
library;
+import 'package:intl/intl.dart';
+
/// Rounds to a whole number, mapping null to 0. Mirrors web `round0`.
int round0(num? n) => n == null ? 0 : n.round();
+/// Locale-aware thousands grouping (en → "2,000", vi → "2.000"). Mirrors the
+/// web's `toLocaleString()` instead of the hardcoded comma grouping.
+String formatCount(int n, String locale) =>
+ NumberFormat.decimalPattern(locale).format(n);
+
/// Local `YYYY-MM-DD` for [date] (defaults to now). Matches the web/RN
/// `todayDateString` — uses LOCAL date components, not UTC.
String todayDateString([DateTime? date]) {
diff --git a/apps/mobile-flutter/lib/features/dashboard/logic/weight_chart_utils.dart b/apps/mobile-flutter/lib/features/dashboard/logic/weight_chart_utils.dart
deleted file mode 100644
index 76de393b..00000000
--- a/apps/mobile-flutter/lib/features/dashboard/logic/weight_chart_utils.dart
+++ /dev/null
@@ -1,69 +0,0 @@
-/// Vendored VERBATIM from the RN `lib/dashboard/logic/weight-chart-utils.ts` —
-/// keep in sync.
-///
-/// Provides the X-axis ticks + a label formatter: W1/W2/…/Now for 30d,
-/// month-short/Now for 90d.
-library;
-
-import 'package:intl/intl.dart';
-
-import '../../../models/dashboard.dart';
-
-/// Result of [buildXTicks]: the tick indices plus a label formatter that takes
-/// `(value, idx)` and returns the displayed string.
-class XTicks {
- const XTicks(this.ticks, this.formatter);
-
- final List ticks;
- final String Function(int value, int idx) formatter;
-}
-
-List _uniqueTicks(List values) {
- final seen = {};
- final out = [];
- for (final v in values) {
- if (seen.add(v)) out.add(v);
- }
- return out;
-}
-
-/// Builds X-axis ticks + formatter for the weight chart. [count] is the number
-/// of data points; [range] selects the labeling strategy.
-XTicks buildXTicks(
- int count,
- WeightRange range,
- String locale,
- String nowLabel,
- String weekPrefix,
-) {
- if (count < 2) {
- return XTicks([0], (_, __) => nowLabel);
- }
-
- if (range == WeightRange.d30) {
- final step = count ~/ 4;
- final ticks = _uniqueTicks([0, step, step * 2, step * 3, count - 1]);
- return XTicks(
- ticks,
- (_, idx) => idx == ticks.length - 1 ? nowLabel : '$weekPrefix${idx + 1}',
- );
- }
-
- // 90d — show months.
- final today = DateTime.now();
- final monthFormatter = DateFormat.MMM(locale);
- final ticks = [];
- final labels = [];
- for (var i = 2; i > 0; i--) {
- final d = DateTime(today.year, today.month - i, today.day);
- final dayIndex = count - 1 - i * 30;
- ticks.add(dayIndex < 0 ? 0 : dayIndex);
- labels.add(monthFormatter.format(d));
- }
- ticks.add(count - 1);
- labels.add(nowLabel);
- return XTicks(
- _uniqueTicks(ticks),
- (_, idx) => idx < labels.length ? labels[idx] : '',
- );
-}
diff --git a/apps/mobile-flutter/lib/features/dashboard/logic/weight_trend.dart b/apps/mobile-flutter/lib/features/dashboard/logic/weight_trend.dart
deleted file mode 100644
index 282a759f..00000000
--- a/apps/mobile-flutter/lib/features/dashboard/logic/weight_trend.dart
+++ /dev/null
@@ -1,119 +0,0 @@
-/// Vendored VERBATIM from the RN `lib/dashboard/logic/weight-trend.ts` — keep
-/// in sync. Produces the weight-chart callout (status / delta / projection).
-library;
-
-import '../../../models/dashboard.dart';
-import '../../../models/weight.dart';
-
-/// Pace/trend status — drives the callout label, detail copy, and color.
-/// String values match the `dashboard.progressStatus.*` i18n keys.
-enum WeightTrendStatus {
- insufficient,
- onPace,
- ahead,
- behind,
- stable;
-
- /// i18n key segment (e.g. `on_pace`) under `dashboard.progressStatus`.
- String get key => switch (this) {
- WeightTrendStatus.insufficient => 'insufficient',
- WeightTrendStatus.onPace => 'on_pace',
- WeightTrendStatus.ahead => 'ahead',
- WeightTrendStatus.behind => 'behind',
- WeightTrendStatus.stable => 'stable',
- };
-}
-
-/// The computed trend summary nested in the progress card.
-class WeightTrendSummary {
- const WeightTrendSummary({
- required this.status,
- required this.startWeight,
- required this.currentWeight,
- required this.expectedEndWeight,
- required this.projectedEndWeight,
- required this.actualWeeklyRate,
- required this.expectedWeeklyRate,
- required this.rangeDays,
- required this.canProject,
- });
-
- final WeightTrendStatus status;
- final double startWeight;
- final double currentWeight;
- final double expectedEndWeight;
- final double projectedEndWeight;
- final double actualWeeklyRate;
- final double expectedWeeklyRate;
- final int rangeDays;
- final bool canProject;
-}
-
-const Map _rangeDays = {
- WeightRange.d30: 30,
- WeightRange.d90: 90,
-};
-
-bool _isMovingWithGoal(
- double actualWeeklyRate,
- double expectedWeeklyRate,
- double tolerance,
-) =>
- (actualWeeklyRate - expectedWeeklyRate).abs() <= tolerance;
-
-/// Builds the weight-chart callout summary. Mirrors web
-/// `buildWeightTrendSummary` exactly.
-WeightTrendSummary buildWeightTrendSummary({
- required List weights,
- required double periodStartWeight,
- required double expectedEndWeight,
- required WeightGoalDirection goalDirection,
- required WeightRange range,
- int? elapsedDays,
-}) {
- final rangeDays = _rangeDays[range]!;
- final startWeight = weights.isNotEmpty ? weights.first : periodStartWeight;
- final currentWeight = weights.isNotEmpty ? weights.last : startWeight;
- final expectedWeeklyRate =
- ((expectedEndWeight - periodStartWeight) / rangeDays) * 7;
- final hasElapsedDays = elapsedDays != null && elapsedDays > 0;
- final actualWeeklyRate = ((currentWeight - startWeight) /
- (hasElapsedDays ? elapsedDays : rangeDays)) *
- 7;
- final canProject =
- weights.length >= 3 && hasElapsedDays && elapsedDays < rangeDays;
- final projectedEndWeight = canProject
- ? currentWeight + actualWeeklyRate * ((rangeDays - elapsedDays) / 7)
- : currentWeight;
- final tolerance = (expectedWeeklyRate.abs() * 0.2).clamp(0.1, double.infinity);
-
- final WeightTrendStatus status;
- if (weights.length < 2) {
- status = WeightTrendStatus.insufficient;
- } else if (goalDirection == WeightGoalDirection.flat) {
- status = actualWeeklyRate.abs() <= 0.1
- ? WeightTrendStatus.stable
- : WeightTrendStatus.behind;
- } else if (_isMovingWithGoal(actualWeeklyRate, expectedWeeklyRate, tolerance)) {
- status = WeightTrendStatus.onPace;
- } else if ((goalDirection == WeightGoalDirection.down &&
- actualWeeklyRate < expectedWeeklyRate) ||
- (goalDirection == WeightGoalDirection.up &&
- actualWeeklyRate > expectedWeeklyRate)) {
- status = WeightTrendStatus.ahead;
- } else {
- status = WeightTrendStatus.behind;
- }
-
- return WeightTrendSummary(
- status: status,
- startWeight: startWeight,
- currentWeight: currentWeight,
- expectedEndWeight: expectedEndWeight,
- projectedEndWeight: projectedEndWeight,
- actualWeeklyRate: actualWeeklyRate,
- expectedWeeklyRate: expectedWeeklyRate,
- rangeDays: rangeDays,
- canProject: canProject,
- );
-}
diff --git a/apps/mobile-flutter/lib/features/dashboard/screens/dashboard_screen.dart b/apps/mobile-flutter/lib/features/dashboard/screens/dashboard_screen.dart
index 3e604cbc..1b4a8ffd 100644
--- a/apps/mobile-flutter/lib/features/dashboard/screens/dashboard_screen.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/screens/dashboard_screen.dart
@@ -13,18 +13,24 @@ library;
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import '../../../models/dashboard.dart';
import '../../../shared/widgets/widgets.dart';
import '../../../data/session_provider.dart';
import '../../../shell/app_header.dart';
import '../../../theme/nham_theme.dart';
+import '../../logging/logic/timeline_utils.dart' hide WeekStrip;
import '../data/dashboard_providers.dart';
import '../logic/dashboard_format.dart';
import '../widgets/adherence_heatmap.dart';
import '../widgets/dashboard_tokens.dart';
import '../widgets/floating_meal_trigger.dart';
import '../widgets/section_header.dart';
+import '../widgets/skeleton.dart';
import '../widgets/today_section.dart';
import '../widgets/week_strip.dart';
import '../widgets/weight_chart.dart';
@@ -66,20 +72,20 @@ class DashboardScreen extends ConsumerWidget {
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: NhamSpacing.sp3),
- child: AppHeader(child: Text('Hello', style: dashHeadline())),
+ child: AppHeader(
+ child: Text(_greeting().tr(), style: dashHeadline()),
+ ),
),
Expanded(
child: bundle.when(
- loading: () => Center(
- child: Padding(
- padding: const EdgeInsets.all(NhamSpacing.sp6),
- child: SectionState(message: tr('dashboard.todayLoading')),
- ),
- ),
+ // Skeleton of the real layout (not a centered spinner) so the
+ // load previews its own shape.
+ loading: () => const _DashboardSkeleton(),
error: (_, __) => Center(
child: Padding(
padding: const EdgeInsets.all(NhamSpacing.sp6),
child: SectionState(
+ icon: LucideIcons.cloudOff,
message: tr('dashboard.todayLoadError'),
actionLabel: tr('dashboard.retry'),
onAction: () =>
@@ -91,6 +97,7 @@ class DashboardScreen extends ConsumerWidget {
args: args,
todayDate: todayDate,
targets: _targetsFor(data),
+ isFirstRun: _isFirstRun(data),
),
),
),
@@ -99,6 +106,27 @@ class DashboardScreen extends ConsumerWidget {
);
}
+ /// True when the user looks brand-new — so the dashboard can collapse to
+ /// the one first-run card and suppress the "% on track" framing.
+ ///
+ /// There is no explicit "has-logged-before" flag on the bundle, so this gates
+ /// on "zero meals today AND zero logged/partial heatmap cells in the 90d
+ /// window". Known limit: a returning user whose last meal is older than 90
+ /// days has no cells in the window and IS treated as first-run — acceptable,
+ /// since after that long a gentle restart reads better than stale framing.
+ bool _isFirstRun(DashboardBundle data) {
+ if (data.day.persistedMeals.isNotEmpty) return false;
+ for (final row in data.heatmap.cells) {
+ for (final cell in row) {
+ if (cell.status == HeatmapCellStatus.logged ||
+ cell.status == HeatmapCellStatus.partial) {
+ return false;
+ }
+ }
+ }
+ return true;
+ }
+
DockTargets _targetsFor(DashboardBundle data) {
final p = data.profile;
return DockTargets(
@@ -110,11 +138,22 @@ class DashboardScreen extends ConsumerWidget {
}
}
+/// The l10n key for a time-of-day greeting, driven by the device clock. A
+/// greeting, not an interpretation — the only Lora moment on the screen.
+String _greeting() {
+ final hour = DateTime.now().hour;
+ if (hour < 12) return 'dashboard.greeting.morning';
+ if (hour < 17) return 'dashboard.greeting.afternoon';
+ if (hour < 21) return 'dashboard.greeting.evening';
+ return 'dashboard.greeting.night';
+}
+
class _Content extends StatefulWidget {
const _Content({
required this.args,
required this.todayDate,
required this.targets,
+ required this.isFirstRun,
});
/// Today-anchored args — Progress (30d), Consistency (90d) and the week
@@ -122,21 +161,67 @@ class _Content extends StatefulWidget {
final DashboardArgs args;
final String todayDate;
final DockTargets targets;
+ final bool isFirstRun;
@override
State<_Content> createState() => _ContentState();
}
class _ContentState extends State<_Content> {
- // The day whose summary the Today card shows; tapping a strip day changes it
- // (browse day-card only). Defaults to today.
- late String _selectedDate = widget.todayDate;
+ /// The browsable days, oldest → today (future days aren't pageable). Today is
+ /// always the last page; the strip centers today at index 3, so the past half
+ /// (indices 0..3) is exactly today and the three days before it.
+ late final List _days =
+ buildCenteredStripFromAnchor(widget.todayDate).days.sublist(0, 4);
+ late final int _todayPage = _days.length - 1;
+
+ // The day whose summary the Today card shows; tapping a strip day or swiping
+ // the card changes it. Defaults to today (the last page).
+ late int _page = _todayPage;
+ late final PageController _pageController =
+ PageController(initialPage: _todayPage);
+
+ String get _selectedDate => _days[_page];
+
+ @override
+ void dispose() {
+ _pageController.dispose();
+ super.dispose();
+ }
+
+ /// Strip tap → animate the day card to that page (selection haptic fires in
+ /// the strip's own GestureDetector). Future / out-of-window days are ignored.
+ void _onSelectDay(String date) {
+ final idx = _days.indexOf(date);
+ if (idx < 0 || idx == _page) return;
+ _pageController.animateToPage(
+ idx,
+ duration: const Duration(milliseconds: 280),
+ curve: const Cubic(0.16, 1, 0.3, 1),
+ );
+ }
+
+ /// Swipe → update selection + fire the same selection haptic the strip uses.
+ void _onPageChanged(int page) {
+ if (page == _page) return;
+ HapticFeedback.selectionClick();
+ setState(() => _page = page);
+ }
+
+ /// A human date line for the card: "Today" / "Yesterday" / a localized
+ /// weekday-month-day (e.g. "Mon, Jun 9").
+ String _dateLabel(String date, String locale) {
+ if (date == widget.todayDate) return tr('dashboard.today');
+ if (date == addDays(widget.todayDate, -1)) {
+ return tr('dashboard.yesterday');
+ }
+ return DateFormat('EEE, MMM d', locale).format(dateStringToDate(date));
+ }
@override
Widget build(BuildContext context) {
final bottomInset = MediaQuery.of(context).padding.bottom;
- // Today card follows the selected day; everything else stays on today.
- final selectedArgs = (userId: widget.args.userId, date: _selectedDate);
+ final locale = context.locale.toString();
return Stack(
children: [
@@ -149,17 +234,32 @@ class _ContentState extends State<_Content> {
bottom: bottomInset + 96,
),
children: [
- // SECTION 1 — week strip + today summary (greeting now lives in the
- // header row, beside the hamburger).
+ // SECTION 1 — week strip + the paged day-viewer (greeting now lives
+ // in the header row, beside the hamburger).
WeekStrip(
args: widget.args,
todayDate: widget.todayDate,
selectedDate: _selectedDate,
- onSelectDay: (d) => setState(() => _selectedDate = d),
+ onSelectDay: _onSelectDay,
),
Padding(
padding: const EdgeInsets.only(bottom: NhamSpacing.sp4),
- child: TodaySection(args: selectedArgs, targets: widget.targets),
+ child: widget.isFirstRun
+ ? TodaySection(
+ args: widget.args,
+ targets: widget.targets,
+ dateLabel: _dateLabel(widget.todayDate, locale),
+ isFirstRun: true,
+ )
+ : _DayPager(
+ controller: _pageController,
+ days: _days,
+ todayPage: _todayPage,
+ userId: widget.args.userId,
+ targets: widget.targets,
+ onPageChanged: _onPageChanged,
+ dateLabel: (d) => _dateLabel(d, locale),
+ ),
),
// SECTION 2 — Progress.
_Section(
@@ -190,6 +290,194 @@ class _ContentState extends State<_Content> {
}
}
+/// The paged day-viewer: a PageView of [TodaySection]s, one per browsable day,
+/// synced to the week strip. Swiping or tapping a strip day moves the page.
+///
+/// A PageView needs a bounded height, but each day's card differs in height
+/// (different meal counts). Each page reports its measured height; the pager
+/// animates its own height to the active page so the surrounding ListView
+/// reflows smoothly instead of the card being clipped or over-tall.
+class _DayPager extends StatefulWidget {
+ const _DayPager({
+ required this.controller,
+ required this.days,
+ required this.todayPage,
+ required this.userId,
+ required this.targets,
+ required this.onPageChanged,
+ required this.dateLabel,
+ });
+
+ final PageController controller;
+ final List days;
+ final int todayPage;
+ final String userId;
+ final DockTargets targets;
+ final ValueChanged onPageChanged;
+ final String Function(String date) dateLabel;
+
+ @override
+ State<_DayPager> createState() => _DayPagerState();
+}
+
+class _DayPagerState extends State<_DayPager> {
+ late final List _heights =
+ List.filled(widget.days.length, null);
+ late int _active = widget.todayPage;
+
+ void _report(int index, double height) {
+ if (_heights[index] == height) return;
+ // Defer the setState out of the layout/build phase.
+ WidgetsBinding.instance.addPostFrameCallback((_) {
+ if (!mounted) return;
+ setState(() => _heights[index] = height);
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ // While a page is unmeasured, fall back to the tallest known height (or a
+ // sensible minimum) so the first frame isn't zero-height.
+ final known = _heights.whereType();
+ final fallback = known.isEmpty
+ ? 280.0
+ : known.reduce((a, b) => a > b ? a : b);
+ final height = _heights[_active] ?? fallback;
+
+ return AnimatedSize(
+ duration: const Duration(milliseconds: 220),
+ curve: const Cubic(0.16, 1, 0.3, 1),
+ alignment: Alignment.topCenter,
+ child: SizedBox(
+ height: height,
+ child: PageView.builder(
+ controller: widget.controller,
+ itemCount: widget.days.length,
+ onPageChanged: (p) {
+ setState(() => _active = p);
+ widget.onPageChanged(p);
+ },
+ itemBuilder: (context, index) {
+ final date = widget.days[index];
+ return _MeasuredPage(
+ onHeight: (h) => _report(index, h),
+ child: TodaySection(
+ args: (userId: widget.userId, date: date),
+ targets: widget.targets,
+ dateLabel: widget.dateLabel(date),
+ isToday: index == widget.todayPage,
+ ),
+ );
+ },
+ ),
+ ),
+ );
+ }
+}
+
+/// Reports its child's laid-out height once per layout pass, top-aligned so the
+/// card sits at the top of the (taller) page viewport.
+class _MeasuredPage extends StatelessWidget {
+ const _MeasuredPage({required this.child, required this.onHeight});
+ final Widget child;
+ final ValueChanged onHeight;
+
+ @override
+ Widget build(BuildContext context) {
+ return SingleChildScrollView(
+ physics: const NeverScrollableScrollPhysics(),
+ child: _SizeReporter(
+ onHeight: onHeight,
+ child: child,
+ ),
+ );
+ }
+}
+
+class _SizeReporter extends SingleChildRenderObjectWidget {
+ const _SizeReporter({required this.onHeight, required super.child});
+ final ValueChanged onHeight;
+
+ @override
+ _SizeReporterRender createRenderObject(BuildContext context) =>
+ _SizeReporterRender(onHeight);
+
+ @override
+ void updateRenderObject(
+ BuildContext context, _SizeReporterRender renderObject) {
+ renderObject.onHeight = onHeight;
+ }
+}
+
+class _SizeReporterRender extends RenderProxyBox {
+ _SizeReporterRender(this.onHeight);
+ ValueChanged onHeight;
+ double? _last;
+
+ @override
+ void performLayout() {
+ super.performLayout();
+ final h = size.height;
+ if (h != _last) {
+ _last = h;
+ onHeight(h);
+ }
+ }
+}
+
+/// The full-page loading skeleton — a week-strip row, the Today card, and the
+/// two lower section cards, all under one shimmer sweep. Mirrors [_Content]'s
+/// padding so the swap to real data doesn't jump.
+class _DashboardSkeleton extends StatelessWidget {
+ const _DashboardSkeleton();
+
+ @override
+ Widget build(BuildContext context) {
+ final bottomInset = MediaQuery.of(context).padding.bottom;
+ // Each card / header shimmers its own bars internally (so the white card
+ // surfaces stay white); only the bare week-strip pills need a wrapper.
+ return ListView(
+ padding: EdgeInsets.only(
+ left: NhamSpacing.sp3,
+ right: NhamSpacing.sp3,
+ top: NhamSpacing.sp3,
+ bottom: bottomInset + 96,
+ ),
+ children: const [
+ // Week-strip row — four day pills.
+ Shimmer(
+ child: Padding(
+ padding: EdgeInsets.symmetric(vertical: NhamSpacing.sp2),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ SkeletonBar(width: 64, height: 76, radius: 16),
+ SkeletonBar(width: 64, height: 76, radius: 16),
+ SkeletonBar(width: 64, height: 76, radius: 16),
+ SkeletonBar(width: 64, height: 76, radius: 16),
+ ],
+ ),
+ ),
+ ),
+ SizedBox(height: NhamSpacing.sp3),
+ // Section 1 — Today.
+ SkeletonHeader(),
+ TodayCardSkeleton(),
+ SizedBox(height: NhamSpacing.sp4),
+ // Section 2 — Progress.
+ SkeletonHeader(),
+ WeightCardSkeleton(),
+ SizedBox(height: NhamSpacing.sp4),
+ // Section 3 — Consistency.
+ SkeletonHeader(),
+ SkeletonCard(children: [
+ SkeletonBar(height: 120, radius: 10),
+ ]),
+ ],
+ );
+ }
+}
+
/// A dashboard section: `mb-4 gap-1.5` (16px bottom margin, 6px inner gap).
class _Section extends StatelessWidget {
const _Section({required this.children});
diff --git a/apps/mobile-flutter/lib/features/dashboard/widgets/adherence_heatmap.dart b/apps/mobile-flutter/lib/features/dashboard/widgets/adherence_heatmap.dart
index b93fa68f..55062840 100644
--- a/apps/mobile-flutter/lib/features/dashboard/widgets/adherence_heatmap.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/widgets/adherence_heatmap.dart
@@ -19,7 +19,18 @@ import '../data/dashboard_providers.dart';
import '../logic/heatmap_colors.dart';
import 'dashboard_tokens.dart';
-const List _dayLabels = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
+/// Monday-first narrow weekday initials for [locale] (en → M T W T F S S; vi →
+/// the localized initials). Anchored on a known Monday so DST/locale offsets
+/// can't shift the order.
+List _weekdayInitials(String locale) {
+ // 2024-01-01 is a Monday.
+ final monday = DateTime(2024, 1, 1);
+ final fmt = DateFormat('EEEEE', locale); // narrow weekday
+ return [
+ for (var i = 0; i < 7; i++) fmt.format(monday.add(Duration(days: i))),
+ ];
+}
+
const double _gap90d = 2; // GAP['90d']
const double _dayLabelWidth = 16;
const double _dayLabelGutter = NhamSpacing.sp1; // gap-1 (4px)
@@ -42,35 +53,37 @@ class AdherenceHeatmap extends ConsumerWidget {
// Empty/loaded both render the grid; the server always returns a full
// grid for the range (unlogged days are the "not logged" track).
data: (data) => _HeatmapBody(data: data),
- error: (_, __) => Container(
- constraints: const BoxConstraints(minHeight: 180),
- alignment: Alignment.center,
- padding: const EdgeInsets.all(NhamSpacing.sp4),
- decoration: BoxDecoration(
- color: kCardSurface,
- borderRadius: BorderRadius.circular(kCardRadius),
- boxShadow: const [kCardShadow],
- ),
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- ConstrainedBox(
- constraints: const BoxConstraints(maxWidth: 280),
- child: Text(
- tr('dashboard.heatmapLoadError'),
- textAlign: TextAlign.center,
- style: dashMeta(color: kInkDisabled),
- ),
+ error:
+ (_, __) => Container(
+ constraints: const BoxConstraints(minHeight: 180),
+ alignment: Alignment.center,
+ padding: const EdgeInsets.all(NhamSpacing.sp4),
+ decoration: BoxDecoration(
+ color: kCardSurface,
+ borderRadius: BorderRadius.circular(kCardRadius),
+ boxShadow: kCardShadows,
),
- const SizedBox(height: NhamSpacing.sp3),
- NhamButton(
- title: tr('dashboard.retry'),
- variant: NhamButtonVariant.ghost,
- onPressed: () => ref.invalidate(dashboardBundleProvider(args)),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ ConstrainedBox(
+ constraints: const BoxConstraints(maxWidth: 280),
+ child: Text(
+ tr('dashboard.heatmapLoadError'),
+ textAlign: TextAlign.center,
+ style: dashMeta(color: kInkDisabled),
+ ),
+ ),
+ const SizedBox(height: NhamSpacing.sp3),
+ NhamButton(
+ title: tr('dashboard.retry'),
+ variant: NhamButtonVariant.ghost,
+ onPressed:
+ () => ref.invalidate(dashboardBundleProvider(args)),
+ ),
+ ],
),
- ],
- ),
- ),
+ ),
);
}
}
@@ -98,8 +111,10 @@ class _HeatmapBodyState extends State<_HeatmapBody>
// 0.16s with a stagger delay of wi*0.01 + di*0.005. The controller spans the
// full timeline (max delay + 0.16s); the painter derives each cell's local
// progress from [_reveal].value. Total ≈ (numWeeks-1)*0.01 + 6*0.005 + 0.16s.
- late final int _staggerMs = ((_numWeeks - 1) * 10 + 6 * 5 + 160)
- .clamp(160, 5000);
+ late final int _staggerMs = ((_numWeeks - 1) * 10 + 6 * 5 + 160).clamp(
+ 160,
+ 5000,
+ );
late final AnimationController _reveal = AnimationController(
vsync: this,
duration: Duration(milliseconds: _staggerMs),
@@ -117,9 +132,11 @@ class _HeatmapBodyState extends State<_HeatmapBody>
return data.cells.isNotEmpty ? data.cells[0].length : 0;
}
- int get _adherenceRate {
+ /// (onTrackPercent, loggedDayCount). The percent is meaningless with zero
+ /// logged days — the count gates whether the "% on track" line renders.
+ ({int percent, int loggedDays}) get _adherence {
final data = widget.data;
- if (data == null) return 0;
+ if (data == null) return (percent: 0, loggedDays: 0);
var onTarget = 0;
var total = 0;
for (final row in data.cells) {
@@ -130,12 +147,14 @@ class _HeatmapBodyState extends State<_HeatmapBody>
}
}
}
- return total > 0 ? ((onTarget / total) * 100).round() : 0;
+ final percent = total > 0 ? ((onTarget / total) * 100).round() : 0;
+ return (percent: percent, loggedDays: total);
}
double _cellSize(double contentWidth, int numWeeks) {
if (numWeeks <= 0) return 10;
- final available = contentWidth -
+ final available =
+ contentWidth -
_dayLabelWidth -
_dayLabelGutter -
(numWeeks - 1) * _gap90d;
@@ -147,13 +166,14 @@ class _HeatmapBodyState extends State<_HeatmapBody>
Widget build(BuildContext context) {
final data = widget.data;
final numWeeks = _numWeeks;
+ final dayLabels = _weekdayInitials(context.locale.toString());
return Container(
padding: const EdgeInsets.all(NhamSpacing.sp4),
decoration: BoxDecoration(
color: kCardSurface, // solid white
borderRadius: BorderRadius.circular(kCardRadius),
- boxShadow: const [kCardShadow], // shadow only, no border
+ boxShadow: kCardShadows, // shadow only, no border
),
child: LayoutBuilder(
builder: (context, constraints) {
@@ -163,17 +183,23 @@ class _HeatmapBodyState extends State<_HeatmapBody>
final gridWidth =
numWeeks > 0 ? numWeeks * sq + (numWeeks - 1) * _gap90d : 0.0;
final gridHeight = 7 * sq + 6 * _gap90d;
+ final adherence = _adherence;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- // Header: "{percent}% on track".
+ // Header: "{percent}% on track". Suppressed until at least 3
+ // scored days (spec) — a percentage computed from one or two
+ // days reads as noise, and a new user shouldn't see "0% on
+ // track" over an empty grid.
Padding(
padding: const EdgeInsets.only(bottom: NhamSpacing.sp2),
child: Text(
- data != null
- ? tr('dashboard.adherenceHeatmap.onTrack',
- namedArgs: {'percent': '$_adherenceRate'})
+ (data != null && adherence.loggedDays >= 3)
+ ? tr(
+ 'dashboard.adherenceHeatmap.onTrack',
+ namedArgs: {'percent': '${adherence.percent}'},
+ )
: ' ',
style: dashMeta(color: kInk, tabular: true),
),
@@ -189,21 +215,23 @@ class _HeatmapBodyState extends State<_HeatmapBody>
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- for (var i = 0; i < _dayLabels.length; i++)
+ for (var i = 0; i < dayLabels.length; i++)
Container(
height: sq,
margin: EdgeInsets.only(
- top: i == 0
- ? _monthStripHeight + NhamSpacing.sp1
- : _gap90d,
+ top:
+ i == 0
+ ? _monthStripHeight + NhamSpacing.sp1
+ : _gap90d,
),
padding: const EdgeInsets.only(right: 4),
alignment: Alignment.centerRight,
child: Text(
- _dayLabels[i],
+ dayLabels[i],
style: dashEyebrow(
- color: kInkSecondary,
- weight: FontWeight.w600),
+ color: kInkSecondary,
+ weight: FontWeight.w600,
+ ),
),
),
],
@@ -220,20 +248,23 @@ class _HeatmapBodyState extends State<_HeatmapBody>
width: gridWidth,
child: Stack(
children: [
- for (final h in data?.monthHeaders ??
- const [])
+ for (final h
+ in data?.monthHeaders ??
+ const [])
Positioned(
top: 0,
left: h.startColumn * step,
- width: h.span * sq +
+ width:
+ h.span * sq +
(h.span - 1 > 0 ? h.span - 1 : 0) * _gap90d,
child: Text(
h.month,
maxLines: 1,
overflow: TextOverflow.clip,
style: dashEyebrow(
- color: kInkSecondary,
- weight: FontWeight.w600),
+ color: kInkSecondary,
+ weight: FontWeight.w600,
+ ),
),
),
],
@@ -246,9 +277,10 @@ class _HeatmapBodyState extends State<_HeatmapBody>
children: [
GestureDetector(
behavior: HitTestBehavior.opaque,
- onTapUp: data == null
- ? null
- : (details) => _handleTap(
+ onTapUp:
+ data == null
+ ? null
+ : (details) => _handleTap(
details.localPosition,
data,
sq,
@@ -257,37 +289,44 @@ class _HeatmapBodyState extends State<_HeatmapBody>
),
child: AnimatedBuilder(
animation: _reveal,
- builder: (context, _) => CustomPaint(
- size: Size(gridWidth, gridHeight),
- painter: _GridPainter(
- data: data,
- numWeeks: numWeeks,
- sq: sq,
- step: step,
- // Drive the per-cell wave reveal.
- reveal: _reveal.value,
- totalMs: _staggerMs,
- ),
- ),
+ builder:
+ (context, _) => CustomPaint(
+ size: Size(gridWidth, gridHeight),
+ painter: _GridPainter(
+ data: data,
+ numWeeks: numWeeks,
+ sq: sq,
+ step: step,
+ // Drive the per-cell wave reveal.
+ reveal: _reveal.value,
+ totalMs: _staggerMs,
+ ),
+ ),
),
),
if (_bubble != null)
Positioned(
left: (_bubble!.x - _bubbleHalfW).clamp(
0,
- (gridWidth - _bubbleHalfW * 2)
- .clamp(0, double.infinity),
+ (gridWidth - _bubbleHalfW * 2).clamp(
+ 0,
+ double.infinity,
+ ),
),
bottom: gridHeight - _bubble!.y + NhamSpacing.sp1,
child: Container(
constraints: const BoxConstraints(
- maxWidth: _bubbleHalfW * 2),
+ maxWidth: _bubbleHalfW * 2,
+ ),
padding: const EdgeInsets.symmetric(
- vertical: NhamSpacing.sp1, horizontal: 6),
+ vertical: NhamSpacing.sp1,
+ horizontal: 6,
+ ),
decoration: BoxDecoration(
color: NhamColors.text,
- borderRadius:
- BorderRadius.circular(NhamRadii.sm),
+ borderRadius: BorderRadius.circular(
+ NhamRadii.sm,
+ ),
),
child: Text(
_bubble!.text,
@@ -315,8 +354,9 @@ class _HeatmapBodyState extends State<_HeatmapBody>
const SizedBox(width: NhamSpacing.sp2),
Expanded(
child: ClipRRect(
- borderRadius:
- BorderRadius.circular(_legendBarHeight / 2),
+ borderRadius: BorderRadius.circular(
+ _legendBarHeight / 2,
+ ),
child: Container(
height: _legendBarHeight,
decoration: const BoxDecoration(
@@ -361,15 +401,17 @@ class _HeatmapBodyState extends State<_HeatmapBody>
final wi = (pos.dx / step).floor();
final di = (pos.dy / step).floor();
if (wi < 0 || wi >= numWeeks || di < 0 || di >= 7) return;
- final cell = (di < data.cells.length && wi < data.cells[di].length)
- ? data.cells[di][wi]
- : null;
+ final cell =
+ (di < data.cells.length && wi < data.cells[di].length)
+ ? data.cells[di][wi]
+ : null;
if (cell == null) return;
final isLogged =
cell.status == HeatmapCellStatus.logged && cell.ratio != null;
final isPartial = cell.status == HeatmapCellStatus.partial;
- final isMuted = cell.status == HeatmapCellStatus.future ||
+ final isMuted =
+ cell.status == HeatmapCellStatus.future ||
cell.status == HeatmapCellStatus.outside;
if (!((isLogged || isPartial) && !isMuted)) return;
@@ -415,7 +457,8 @@ class _HeatmapBodyState extends State<_HeatmapBody>
if (isLogged) {
return (fill: getHeatmapColor(ratio).bg ?? kTrack, stroke: null);
}
- final isMuted = cell?.status == HeatmapCellStatus.future ||
+ final isMuted =
+ cell?.status == HeatmapCellStatus.future ||
cell?.status == HeatmapCellStatus.outside;
if (isMuted) {
return (fill: kPage, stroke: null); // out-of-range
@@ -451,9 +494,10 @@ class _GridPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final fillPaint = Paint()..style = PaintingStyle.fill;
- final strokePaint = Paint()
- ..style = PaintingStyle.stroke
- ..strokeWidth = 1;
+ final strokePaint =
+ Paint()
+ ..style = PaintingStyle.stroke
+ ..strokeWidth = 1;
final elapsed = reveal * totalMs;
@@ -467,20 +511,28 @@ class _GridPainter extends CustomPainter {
final scale = 0.6 + 0.4 * p; // scale 0.6 → 1
final cellAlpha = p; // opacity 0 → 1
- final cell = (data != null &&
- di < data!.cells.length &&
- wi < data!.cells[di].length)
- ? data!.cells[di][wi]
- : null;
+ final cell =
+ (data != null &&
+ di < data!.cells.length &&
+ wi < data!.cells[di].length)
+ ? data!.cells[di][wi]
+ : null;
final props = _cellRectProps(cell);
// Scale about the cell center.
final cx = wi * step + sq / 2;
final cy = di * step + sq / 2;
final half = (sq * scale) / 2;
- final rect = Rect.fromLTWH(cx - half, cy - half, sq * scale, sq * scale);
- final rrect =
- RRect.fromRectAndRadius(rect, const Radius.circular(_cellRadius));
+ final rect = Rect.fromLTWH(
+ cx - half,
+ cy - half,
+ sq * scale,
+ sq * scale,
+ );
+ final rrect = RRect.fromRectAndRadius(
+ rect,
+ const Radius.circular(_cellRadius),
+ );
// Solid fill; cellAlpha is only the per-cell reveal fade (→ 1).
fillPaint.color = props.fill.withValues(alpha: cellAlpha);
diff --git a/apps/mobile-flutter/lib/features/dashboard/widgets/calorie_ring.dart b/apps/mobile-flutter/lib/features/dashboard/widgets/calorie_ring.dart
index ddebdaad..f1f73a0b 100644
--- a/apps/mobile-flutter/lib/features/dashboard/widgets/calorie_ring.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/widgets/calorie_ring.dart
@@ -1,15 +1,25 @@
-/// CalorieRing — RN port of `components/logging/calorie-ring.tsx`.
+/// CalorieRing — the dashboard/logging calorie ring.
///
-/// Shows REMAINING calories as the fill fraction. The progress arc animates its
-/// sweep (the RN `strokeDashoffset` tween) over 1000ms with the signature
-/// `cubic-bezier(0.16, 1, 0.3, 1)` ease. The dashboard passes a [center] node
-/// (a flame icon) to override the default in-ring remaining/“left” content.
+/// The arc fills with CONSUMED calories (`current / target`) — it fills up as
+/// you eat, matching the week-strip rings and the heatmap framing. The progress
+/// arc animates its sweep over 1000ms with the signature
+/// `cubic-bezier(0.16, 1, 0.3, 1)` ease.
+///
+/// Over target: the base arc completes a full circle in tan, then an overflow
+/// arc continues past 12 o'clock in ~40%-alpha terracotta for the overshoot
+/// fraction — an honest, judgment-free visual. Never red, never a pill, never
+/// an icon.
+///
+/// The dashboard passes a [center] node (a flame icon) to override the default
+/// in-ring remaining/over content.
library;
+import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import '../../../theme/nham_colors.dart';
import '../../../theme/nham_typography.dart';
+import '../logic/dashboard_format.dart';
class CalorieRing extends StatefulWidget {
const CalorieRing({
@@ -42,16 +52,13 @@ class _CalorieRingState extends State
// cubic-bezier(0.16, 1, 0.3, 1) — the signature "ease-out-expo-ish" curve.
static const Curve _ease = Cubic(0.16, 1, 0.3, 1);
- double get _pct {
- final remaining = (widget.target - widget.current).clamp(0, double.infinity);
- return widget.target > 0
- ? (remaining / widget.target).clamp(0, 1).toDouble()
- : 0;
- }
+ /// Consumed fraction of the target — can exceed 1 when over target. The
+ /// painter splits the base (0..1, tan) from the overflow (>1, terracotta).
+ double get _consumedRatio =>
+ widget.target > 0 ? (widget.current / widget.target) : 0;
- Animation _build() => Tween(begin: 0, end: _pct).animate(
- CurvedAnimation(parent: _controller, curve: _ease),
- );
+ Animation _build() => Tween(begin: 0, end: _consumedRatio)
+ .animate(CurvedAnimation(parent: _controller, curve: _ease));
@override
void initState() {
@@ -79,7 +86,7 @@ class _CalorieRingState extends State
@override
Widget build(BuildContext context) {
- final remaining = (widget.target - widget.current).clamp(0, double.infinity);
+ final remaining = widget.target - widget.current;
return SizedBox(
width: widget.size,
height: widget.size,
@@ -91,12 +98,12 @@ class _CalorieRingState extends State
builder: (context, _) => CustomPaint(
size: Size(widget.size, widget.size),
painter: _RingPainter(
- fraction: _fill.value,
+ ratio: _fill.value,
strokeWidth: widget.strokeWidth,
),
),
),
- widget.center ?? _DefaultCenter(remaining: remaining.toDouble()),
+ widget.center ?? _DefaultCenter(remaining: remaining),
],
),
);
@@ -106,21 +113,25 @@ class _CalorieRingState extends State
class _DefaultCenter extends StatelessWidget {
const _DefaultCenter({required this.remaining});
+ /// target − consumed: positive = calories left, negative = over target.
final double remaining;
@override
Widget build(BuildContext context) {
+ final locale = context.locale.toString();
+ final over = remaining < 0;
+ final value = remaining.abs().round();
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
- remaining.round().toString(),
- style: NhamTextStyles.serifSemiBold(fontSize: 17, height: 1)
+ formatCount(value, locale),
+ style: NhamTextStyles.serifRegular(fontSize: 17, height: 1)
.copyWith(color: NhamColors.text, letterSpacing: 0),
),
const SizedBox(height: 2),
Text(
- 'LEFT',
+ (over ? tr('dashboard.over') : tr('dashboard.left')).toUpperCase(),
style: NhamTextStyles.sansBold(fontSize: 8)
.copyWith(letterSpacing: 1.2, color: NhamColors.stone),
),
@@ -129,20 +140,24 @@ class _DefaultCenter extends StatelessWidget {
}
}
-/// Draws the track ring + a rounded progress arc starting at 12 o'clock
-/// (`rotate(-90)`), sweeping clockwise for [fraction] of the circle. Stroke
-/// width is constant in pixels (RN `vectorEffect="non-scaling-stroke"`).
+/// Draws the track ring, the consumed arc (tan, 0..1 of the circle, from 12
+/// o'clock clockwise) and — when [ratio] > 1 — an overflow arc continuing past
+/// 12 o'clock in ~40%-alpha terracotta for the overshoot.
class _RingPainter extends CustomPainter {
- _RingPainter({required this.fraction, required this.strokeWidth});
+ _RingPainter({required this.ratio, required this.strokeWidth});
- final double fraction;
+ final double ratio;
final double strokeWidth;
+ static const double _tau = 2 * 3.141592653589793;
+ static const double _start = -3.141592653589793 / 2; // -90° (12 o'clock).
+
@override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width / 2, size.height / 2);
// RN viewBox 0 0 100 100, r=46, center 50 → radius scales with size.
final radius = (size.width / 2) * (46 / 50);
+ final rect = Rect.fromCircle(center: center, radius: radius);
final track = Paint()
..style = PaintingStyle.stroke
@@ -150,26 +165,28 @@ class _RingPainter extends CustomPainter {
..color = NhamColors.track;
canvas.drawCircle(center, radius, track);
- if (fraction <= 0) return;
+ if (ratio <= 0) return;
- final arc = Paint()
+ final base = Paint()
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth
..strokeCap = StrokeCap.round
..color = NhamColors.accent;
-
- const start = -3.141592653589793 / 2; // -90° (12 o'clock).
- final sweep = 2 * 3.141592653589793 * fraction;
- canvas.drawArc(
- Rect.fromCircle(center: center, radius: radius),
- start,
- sweep,
- false,
- arc,
- );
+ canvas.drawArc(rect, _start, _tau * ratio.clamp(0, 1).toDouble(), false, base);
+
+ // Over target — the overflow arc continues in terracotta @ ~40% alpha.
+ if (ratio > 1) {
+ final overflow = (ratio - 1).clamp(0, 1).toDouble();
+ final over = Paint()
+ ..style = PaintingStyle.stroke
+ ..strokeWidth = strokeWidth
+ ..strokeCap = StrokeCap.round
+ ..color = NhamColors.danger.withValues(alpha: 0.4);
+ canvas.drawArc(rect, _start, _tau * overflow, false, over);
+ }
}
@override
bool shouldRepaint(_RingPainter old) =>
- old.fraction != fraction || old.strokeWidth != strokeWidth;
+ old.ratio != ratio || old.strokeWidth != strokeWidth;
}
diff --git a/apps/mobile-flutter/lib/features/dashboard/widgets/compact_weight_log.dart b/apps/mobile-flutter/lib/features/dashboard/widgets/compact_weight_log.dart
index 22f29ff6..2445af89 100644
--- a/apps/mobile-flutter/lib/features/dashboard/widgets/compact_weight_log.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/widgets/compact_weight_log.dart
@@ -141,6 +141,7 @@ class _CompactWeightLogState extends ConsumerState {
_dirty = false;
_pending = false;
});
+ HapticFeedback.mediumImpact(); // success cue on save
_showFeedback(
_Feedback(_FeedbackKind.success, tr('dashboard.weightCard.saved')),
);
@@ -166,8 +167,7 @@ class _CompactWeightLogState extends ConsumerState {
final showEditHint =
_hasTodayWeight && _validationError == null && _feedback == null;
- final borderColor =
- _validationError != null ? NhamColors.danger : kHairline;
+ final hasError = _validationError != null;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -188,11 +188,16 @@ class _CompactWeightLogState extends ConsumerState {
],
),
),
- Row(
- children: [
- Expanded(
- child: SizedBox(
- height: 44,
+ // IntrinsicHeight + stretch so the field's filled area and the button
+ // are the exact same height. (A fixed height on the field alone doesn't
+ // work: isDense sizes the InputDecorator fill to its content and centers
+ // it, leaving transparent gaps — so the cream fill read shorter than the
+ // solid button.)
+ IntrinsicHeight(
+ child: Row(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: [
+ Expanded(
child: TextField(
controller: _controller,
onChanged: _onChanged,
@@ -204,40 +209,48 @@ class _CompactWeightLogState extends ConsumerState {
],
autocorrect: false,
cursorColor: NhamColors.accent,
- style: dashBody(tabular: true),
+ // Substantial value type — a number entry reads as data, not
+ // body copy.
+ style: dashValue(color: kInk),
decoration: InputDecoration(
isDense: true,
filled: true,
- fillColor: kCardSurface,
+ // Soft warm fill instead of a hairline outline — the field
+ // reads as a tappable surface, the way native mobile inputs
+ // do, and the border only appears on focus / error.
+ fillColor: hasError
+ ? NhamColors.danger.withValues(alpha: 0.06)
+ : kFieldFill,
+ // Vertical padding sets the field's intrinsic height (≈ the
+ // control height); the button stretches to match it.
contentPadding: const EdgeInsets.symmetric(
- horizontal: NhamSpacing.sp3,
- vertical: NhamSpacing.sp3,
+ horizontal: NhamSpacing.sp4,
+ vertical: 15,
),
// Suffix in-flow (no Positioned overlay → no overlap).
suffixText: tr('dashboard.units.kg'),
- suffixStyle: dashMeta(color: kInkDisabled),
- border: _border(borderColor),
- enabledBorder: _border(borderColor),
- // Web Input focus-visible ring → accent border.
- focusedBorder: _border(_validationError != null
- ? NhamColors.danger
- : NhamColors.accent),
- disabledBorder: _border(kHairline),
+ suffixStyle: dashMeta(color: kInkSecondary),
+ border: _border(Colors.transparent),
+ enabledBorder: _border(
+ hasError ? NhamColors.danger : Colors.transparent),
+ focusedBorder: _border(
+ hasError ? NhamColors.danger : NhamColors.accent),
+ disabledBorder: _border(Colors.transparent),
),
),
),
- ),
- const SizedBox(width: NhamSpacing.sp2),
- _SubmitButton(
- label: submitLabel,
- pending: _pending,
- pressed: _pressed,
- onTapDown: () => setState(() => _pressed = true),
- onTapUp: () => setState(() => _pressed = false),
- onTapCancel: () => setState(() => _pressed = false),
- onTap: _pending ? null : _onSubmit,
- ),
- ],
+ const SizedBox(width: NhamSpacing.sp2),
+ _SubmitButton(
+ label: submitLabel,
+ pending: _pending,
+ pressed: _pressed,
+ onTapDown: () => setState(() => _pressed = true),
+ onTapUp: () => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ onTap: _pending ? null : _onSubmit,
+ ),
+ ],
+ ),
),
if (_feedback != null)
Padding(
@@ -272,8 +285,11 @@ class _CompactWeightLogState extends ConsumerState {
}
OutlineInputBorder _border(Color color) => OutlineInputBorder(
- borderRadius: BorderRadius.circular(NhamRadii.buttonXl),
- borderSide: BorderSide(color: color),
+ borderRadius: BorderRadius.circular(NhamRadii.xl),
+ borderSide: BorderSide(
+ color: color,
+ width: color == Colors.transparent ? 0 : 1.5,
+ ),
);
}
@@ -306,12 +322,12 @@ class _SubmitButton extends StatelessWidget {
child: Opacity(
opacity: pending ? 0.55 : 1,
child: Container(
- height: 44,
- padding: const EdgeInsets.symmetric(horizontal: NhamSpacing.sp4),
+ // No fixed height — the parent Row stretches it to the field's height.
+ padding: const EdgeInsets.symmetric(horizontal: NhamSpacing.sp5),
alignment: Alignment.center,
decoration: BoxDecoration(
color: pressed && !pending ? NhamColors.btnHover : NhamColors.btn,
- borderRadius: BorderRadius.circular(NhamRadii.buttonXl),
+ borderRadius: BorderRadius.circular(NhamRadii.xl),
),
child: pending
? const SizedBox(
@@ -322,7 +338,9 @@ class _SubmitButton extends StatelessWidget {
)
: Text(
label,
- style: dashEyebrow(color: Colors.white, weight: FontWeight.w600),
+ // Sentence-case, body-sized label — a native button reads as
+ // a word, not a techy 11px all-caps eyebrow.
+ style: dashBody(color: Colors.white, weight: FontWeight.w600),
),
),
),
diff --git a/apps/mobile-flutter/lib/features/dashboard/widgets/dashboard_tokens.dart b/apps/mobile-flutter/lib/features/dashboard/widgets/dashboard_tokens.dart
index 4abfdca0..ca296506 100644
--- a/apps/mobile-flutter/lib/features/dashboard/widgets/dashboard_tokens.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/widgets/dashboard_tokens.dart
@@ -3,7 +3,8 @@
/// The dashboard deliberately diverges from the web's "Apple Notes on cream
/// paper" port. The palette is unchanged (cream / espresso / tan); what changed
/// is the APPLICATION: solid surfaces (no stacked translucency), ONE sans
-/// family (DM Sans) on a 5-size scale, exactly 3 text colors, one card radius,
+/// family (Be Vietnam Pro) on a 5-size scale, exactly 3 text colors, one card
+/// radius,
/// and serif reserved for a single editorial headline per viewport.
///
/// Reference: getdesign.md (Anthropic/Notion/Linear) + CalAI. The throughline —
@@ -13,11 +14,14 @@ library;
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
+import '../../../theme/nham_typography.dart';
+
// ── Surfaces (all solid, 100% opacity) ───────────────────────────────────
const Color kPage = Color(0xFFFEFBF6); // app page — paper cream
const Color kCardSurface = Color(0xFFFFFFFF); // cards — solid white
-const Color kTrack = Color(0xFFF5F4F0); // ring/bar tracks — the ONLY low-contrast surface
+const Color kTrack = Color(0xFFF1EFE9); // ring/bar tracks — the ONLY low-contrast surface
const Color kHairline = Color(0xFFE8D5B5); // the one border (biscotti, solid)
+const Color kFieldFill = Color(0xFFF6F1E8); // soft warm fill for inputs
// ── Text — exactly 3 colors, all 100% opacity ────────────────────────────
const Color kInk = Color(0xFF2C2416); // espresso — primary data
@@ -25,21 +29,38 @@ const Color kInkSecondary = Color(0xFF8B7355); // warm taupe — labels/units/ca
const Color kInkDisabled = Color(0xFFA8A29E); // stone — disabled metadata ≥13px ONLY
// ── Shape ────────────────────────────────────────────────────────────────
-const double kCardRadius = 16; // one card radius (was a 24/20/16 mix)
+const double kCardRadius = 22; // one card radius — modern iOS grouped-card feel
+
+/// Layered espresso card shadow — a tight contact shadow plus a soft ambient
+/// one. Two stacked shadows read like a real iOS card lifting off the warm page,
+/// where one flat blur read as a smudge. Cards use shadow, not border.
+const List kCardShadows = [
+ BoxShadow(
+ color: Color(0x142C2416), // ambient (~8%)
+ blurRadius: 24,
+ offset: Offset(0, 10),
+ ),
+ BoxShadow(
+ color: Color(0x0F2C2416), // contact (~6%)
+ blurRadius: 3,
+ offset: Offset(0, 1),
+ ),
+];
-/// The soft espresso card shadow (espresso @5%). Cards use shadow, not border.
+/// Back-compat single shadow (some surfaces still reference it).
const BoxShadow kCardShadow = BoxShadow(
- color: Color(0x0D2C2416),
- blurRadius: 32,
- offset: Offset(0, 10),
+ color: Color(0x0F2C2416),
+ blurRadius: 28,
+ offset: Offset(0, 12),
);
const List _tnum = [FontFeature.tabularFigures()];
-// ── Type — DM Sans only, 5 sizes (40 / 20 / 15 / 13 / 11) ─────────────────
+// ── Type — Be Vietnam Pro only, 5 sizes (40 / 20 / 15 / 13 / 11) ──────────
/// 40 / 600 — the ONE hero number per card (calories remaining, weight).
-TextStyle dashHero({Color color = kInk}) => GoogleFonts.dmSans(
+TextStyle dashHero({Color color = kInk}) => TextStyle(
+ fontFamily: NhamTextStyles.sansFamily,
fontSize: 40,
fontWeight: FontWeight.w600,
height: 1.0,
@@ -49,7 +70,8 @@ TextStyle dashHero({Color color = kInk}) => GoogleFonts.dmSans(
);
/// 20 / 600 — ring-center number, macro gram values, metric values.
-TextStyle dashValue({Color color = kInk}) => GoogleFonts.dmSans(
+TextStyle dashValue({Color color = kInk}) => TextStyle(
+ fontFamily: NhamTextStyles.sansFamily,
fontSize: 20,
fontWeight: FontWeight.w600,
height: 1.1,
@@ -63,7 +85,8 @@ TextStyle dashBody({
FontWeight weight = FontWeight.w400,
bool tabular = false,
}) =>
- GoogleFonts.dmSans(
+ TextStyle(
+ fontFamily: NhamTextStyles.sansFamily,
fontSize: 15,
fontWeight: weight,
height: 1.4,
@@ -73,7 +96,8 @@ TextStyle dashBody({
/// 13 / 500 — secondary captions, stat values.
TextStyle dashMeta({Color color = kInkSecondary, bool tabular = false}) =>
- GoogleFonts.dmSans(
+ TextStyle(
+ fontFamily: NhamTextStyles.sansFamily,
fontSize: 13,
fontWeight: FontWeight.w500,
height: 1.35,
@@ -86,7 +110,8 @@ TextStyle dashEyebrow({
Color color = kInkSecondary,
FontWeight weight = FontWeight.w700,
}) =>
- GoogleFonts.dmSans(
+ TextStyle(
+ fontFamily: NhamTextStyles.sansFamily,
fontSize: 11,
fontWeight: weight,
height: 1.3,
diff --git a/apps/mobile-flutter/lib/features/dashboard/widgets/floating_meal_trigger.dart b/apps/mobile-flutter/lib/features/dashboard/widgets/floating_meal_trigger.dart
index 18096961..3f55e94b 100644
--- a/apps/mobile-flutter/lib/features/dashboard/widgets/floating_meal_trigger.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/widgets/floating_meal_trigger.dart
@@ -9,6 +9,7 @@ library;
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
import 'package:go_router/go_router.dart';
import '../../../theme/nham_colors.dart';
@@ -123,7 +124,7 @@ class _FloatingMealTriggerState extends State {
],
),
child: Icon(
- _expanded ? Icons.close : Icons.restaurant_outlined,
+ _expanded ? LucideIcons.x : LucideIcons.utensilsCrossed,
size: 20, // h-5 w-5
color: Colors.white,
),
@@ -236,7 +237,7 @@ class _MealInputBarState extends State<_MealInputBar> {
borderRadius: BorderRadius.circular(NhamRadii.buttonXl), // 12
),
child: Icon(
- Icons.arrow_upward,
+ LucideIcons.arrowUp,
size: 16, // h-4 w-4
color: hasText ? Colors.white : NhamColors.stone,
),
diff --git a/apps/mobile-flutter/lib/features/dashboard/widgets/section_header.dart b/apps/mobile-flutter/lib/features/dashboard/widgets/section_header.dart
index 0502f5e2..545b38c0 100644
--- a/apps/mobile-flutter/lib/features/dashboard/widgets/section_header.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/widgets/section_header.dart
@@ -119,12 +119,16 @@ class SectionState extends StatefulWidget {
required this.message,
this.actionLabel,
this.onAction,
+ this.icon,
});
final String message;
final String? actionLabel;
final VoidCallback? onAction;
+ /// Optional glyph shown above the message (e.g. a cloud-off for errors).
+ final IconData? icon;
+
@override
State createState() => _SectionStateState();
}
@@ -141,12 +145,25 @@ class _SectionStateState extends State {
decoration: BoxDecoration(
color: kCardSurface,
borderRadius: BorderRadius.circular(kCardRadius),
- boxShadow: const [kCardShadow], // shadow only, no border
+ boxShadow: kCardShadows, // shadow only, no border
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
+ if (widget.icon != null) ...[
+ Container(
+ width: 48,
+ height: 48,
+ alignment: Alignment.center,
+ decoration: const BoxDecoration(
+ color: kTrack,
+ shape: BoxShape.circle,
+ ),
+ child: Icon(widget.icon, size: 22, color: NhamColors.stone),
+ ),
+ const SizedBox(height: NhamSpacing.sp3),
+ ],
Text(
widget.message,
textAlign: TextAlign.center,
@@ -172,7 +189,9 @@ class _SectionStateState extends State {
),
child: Text(
widget.actionLabel!,
- style: dashEyebrow(color: Colors.white, weight: FontWeight.w600),
+ // Sentence-case body label — unified with the weight-card
+ // submit button (not an 11px caps eyebrow).
+ style: dashBody(color: Colors.white, weight: FontWeight.w600),
),
),
),
diff --git a/apps/mobile-flutter/lib/features/dashboard/widgets/skeleton.dart b/apps/mobile-flutter/lib/features/dashboard/widgets/skeleton.dart
new file mode 100644
index 00000000..109f83ce
--- /dev/null
+++ b/apps/mobile-flutter/lib/features/dashboard/widgets/skeleton.dart
@@ -0,0 +1,240 @@
+/// Skeleton loading primitives — a warm shimmer sweep over placeholder blocks.
+///
+/// Modern apps show the *shape* of the content while it loads (a skeleton),
+/// not a centered spinner. These primitives draw warm-grey placeholder bars and
+/// run one shared shimmer animation across them, so the dashboard's loading
+/// state previews its own layout instead of a blank wait.
+library;
+
+import 'package:flutter/material.dart';
+
+import 'dashboard_tokens.dart';
+
+const Color _skelBase = Color(0xFFE0D6C2); // warm placeholder grey
+const Color _skelHi = Color(0xFFF1EADC); // shimmer highlight
+
+/// Wraps [child] in a left-to-right shimmer sweep. Put a tree of [SkeletonBar] /
+/// [SkeletonCircle] underneath and they all light up from the one controller.
+class Shimmer extends StatefulWidget {
+ const Shimmer({super.key, required this.child});
+ final Widget child;
+
+ @override
+ State createState() => _ShimmerState();
+}
+
+class _ShimmerState extends State with SingleTickerProviderStateMixin {
+ late final AnimationController _c = AnimationController(
+ vsync: this,
+ duration: const Duration(milliseconds: 1300),
+ )..repeat();
+
+ @override
+ void dispose() {
+ _c.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ // Honor reduced-motion: hold a static base tint, no sweep.
+ if (MediaQuery.disableAnimationsOf(context)) return widget.child;
+ return AnimatedBuilder(
+ animation: _c,
+ builder: (context, child) {
+ final t = _c.value; // 0 → 1
+ return ShaderMask(
+ blendMode: BlendMode.srcATop,
+ shaderCallback: (bounds) {
+ final dx = bounds.width * (t * 2 - 1); // sweep -w → +w
+ return LinearGradient(
+ begin: Alignment.centerLeft,
+ end: Alignment.centerRight,
+ colors: const [_skelBase, _skelHi, _skelBase],
+ stops: const [0.35, 0.5, 0.65],
+ transform: _SlideGradient(dx),
+ ).createShader(bounds);
+ },
+ child: child,
+ );
+ },
+ child: widget.child,
+ );
+ }
+}
+
+/// Shifts a gradient horizontally by [dx] pixels (for the shimmer sweep).
+class _SlideGradient extends GradientTransform {
+ const _SlideGradient(this.dx);
+ final double dx;
+ @override
+ Matrix4 transform(Rect bounds, {TextDirection? textDirection}) =>
+ Matrix4.translationValues(dx, 0, 0);
+}
+
+/// A single placeholder bar. [widthFactor] (0–1) sizes it relative to its parent
+/// when [width] is null.
+class SkeletonBar extends StatelessWidget {
+ const SkeletonBar({
+ super.key,
+ this.width,
+ this.widthFactor,
+ required this.height,
+ this.radius = 6,
+ });
+
+ final double? width;
+ final double? widthFactor;
+ final double height;
+ final double radius;
+
+ @override
+ Widget build(BuildContext context) {
+ final bar = Container(
+ width: width,
+ height: height,
+ decoration: BoxDecoration(
+ color: _skelBase,
+ borderRadius: BorderRadius.circular(radius),
+ ),
+ );
+ if (width == null && widthFactor != null) {
+ return FractionallySizedBox(
+ alignment: Alignment.centerLeft,
+ widthFactor: widthFactor,
+ child: bar,
+ );
+ }
+ return bar;
+ }
+}
+
+class SkeletonCircle extends StatelessWidget {
+ const SkeletonCircle({super.key, required this.size});
+ final double size;
+
+ @override
+ Widget build(BuildContext context) => Container(
+ width: size,
+ height: size,
+ decoration: const BoxDecoration(
+ color: _skelBase,
+ shape: BoxShape.circle,
+ ),
+ );
+}
+
+/// A white card matching the real dashboard cards, holding skeleton [children].
+/// The shimmer wraps only the bars (not the card surface) so the white gaps
+/// stay white and the bars read as distinct placeholders.
+class SkeletonCard extends StatelessWidget {
+ const SkeletonCard({super.key, required this.children});
+ final List children;
+
+ @override
+ Widget build(BuildContext context) => Container(
+ padding: const EdgeInsets.all(16),
+ decoration: BoxDecoration(
+ color: kCardSurface,
+ borderRadius: BorderRadius.circular(kCardRadius),
+ boxShadow: kCardShadows,
+ ),
+ child: Shimmer(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: children,
+ ),
+ ),
+ );
+}
+
+/// An out-of-card eyebrow placeholder (matches the section headers).
+class SkeletonHeader extends StatelessWidget {
+ const SkeletonHeader({super.key});
+ @override
+ Widget build(BuildContext context) => const Padding(
+ padding: EdgeInsets.only(bottom: 8),
+ child: Shimmer(
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ SkeletonBar(width: 120, height: 11, radius: 4),
+ SkeletonBar(width: 52, height: 11, radius: 4),
+ ],
+ ),
+ ),
+ );
+}
+
+/// Inner placeholder rows for the Today card — hero + ring, three macro rows, a
+/// divider gap, two meal rows. Mirrors the real card so the swap is calm. Used
+/// inside a [SkeletonCard] (dashboard load) or directly under the card during a
+/// per-day refetch.
+List todayCardSkeletonChildren() => [
+ const Row(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ children: [
+ Expanded(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SkeletonBar(width: 140, height: 34, radius: 8),
+ SizedBox(height: 8),
+ SkeletonBar(width: 90, height: 12, radius: 4),
+ ],
+ ),
+ ),
+ SkeletonCircle(size: 84),
+ ],
+ ),
+ const SizedBox(height: 22),
+ for (var i = 0; i < 3; i++) ...[
+ if (i > 0) const SizedBox(height: 12),
+ const Row(
+ children: [
+ SkeletonBar(width: 56, height: 11, radius: 4),
+ SizedBox(width: 12),
+ Expanded(child: SkeletonBar(height: 8, radius: 4)),
+ SizedBox(width: 12),
+ SkeletonBar(width: 48, height: 11, radius: 4),
+ ],
+ ),
+ ],
+ const SizedBox(height: 22),
+ const SkeletonBar(widthFactor: 0.7, height: 13, radius: 4),
+ const SizedBox(height: 12),
+ const SkeletonBar(widthFactor: 0.55, height: 13, radius: 4),
+ ];
+
+/// Inner placeholder rows for the Weight card — hero + stat, input field,
+/// chart band.
+List weightCardSkeletonChildren() => const [
+ Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ SkeletonBar(width: 110, height: 34, radius: 8),
+ SkeletonBar(width: 56, height: 22, radius: 6),
+ ],
+ ),
+ SizedBox(height: 16),
+ SkeletonBar(height: 52, radius: 14),
+ SizedBox(height: 16),
+ SkeletonBar(height: 96, radius: 10),
+ ];
+
+/// The Today card placeholder (header + card), under one shimmer.
+class TodayCardSkeleton extends StatelessWidget {
+ const TodayCardSkeleton({super.key});
+ @override
+ Widget build(BuildContext context) =>
+ SkeletonCard(children: todayCardSkeletonChildren());
+}
+
+/// The Weight card placeholder (header + card), under one shimmer.
+class WeightCardSkeleton extends StatelessWidget {
+ const WeightCardSkeleton({super.key});
+ @override
+ Widget build(BuildContext context) =>
+ SkeletonCard(children: weightCardSkeletonChildren());
+}
diff --git a/apps/mobile-flutter/lib/features/dashboard/widgets/today_section.dart b/apps/mobile-flutter/lib/features/dashboard/widgets/today_section.dart
index da7a628c..a1d0137c 100644
--- a/apps/mobile-flutter/lib/features/dashboard/widgets/today_section.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/widgets/today_section.dart
@@ -9,16 +9,19 @@ library;
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../../theme/nham_colors.dart';
import '../../../theme/nham_theme.dart';
+import '../../logging/widgets/count_up.dart';
import '../data/dashboard_providers.dart';
import '../data/logging_day.dart';
import '../logic/dashboard_format.dart';
import 'calorie_ring.dart';
import 'dashboard_tokens.dart';
import 'section_header.dart';
+import 'skeleton.dart';
/// Per-screen dock targets (profile values, with the web DEFAULT_PROFILE
/// fallbacks applied by the screen).
@@ -41,22 +44,151 @@ class DockTargets {
const double _valueColumnWidth = 68;
class TodaySection extends ConsumerWidget {
- const TodaySection({super.key, required this.args, required this.targets});
+ const TodaySection({
+ super.key,
+ required this.args,
+ required this.targets,
+ required this.dateLabel,
+ this.isToday = true,
+ this.isFirstRun = false,
+ });
final DashboardArgs args;
final DockTargets targets;
+ /// A human date line shown at the top of the card ("Today", "Yesterday", or a
+ /// localized "Mon, Jun 9"). The card always says which day it is showing.
+ final String dateLabel;
+
+ /// Whether [args] is today. Today reads off the already-warm dashboard bundle
+ /// (no extra round-trip); other days fetch their own light per-day slice.
+ final bool isToday;
+
+ /// The user has never logged anything, ever — collapse to the first-run card.
+ final bool isFirstRun;
+
@override
Widget build(BuildContext context, WidgetRef ref) {
- final async = ref.watch(loggingDayProvider(args));
+ if (isFirstRun) return const _FirstRunCard();
+
+ // Today reads the bundle's day slice (warm cache, seam parity with the rest
+ // of the dashboard); any other day fetches its own slice so browsing never
+ // refetches the 90d heatmap + profile + weight bundle.
+ final provider =
+ isToday ? loggingDayProvider(args) : dashboardDayProvider(args);
+ final async = ref.watch(provider);
return async.when(
- loading: () => SectionState(message: tr('dashboard.todayLoading')),
+ loading: () => const Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: [
+ SkeletonHeader(),
+ TodayCardSkeleton(),
+ ],
+ ),
error: (_, __) => SectionState(
+ icon: LucideIcons.cloudOff,
message: tr('dashboard.todayLoadError'),
actionLabel: tr('dashboard.retry'),
- onAction: () => ref.invalidate(dashboardBundleProvider(args)),
+ onAction: () => ref.invalidate(provider),
+ ),
+ data: (day) => _Dock(day: day, targets: targets, dateLabel: dateLabel),
+ );
+ }
+}
+
+/// First-run collapse: a single Lora question, no ring, no "% on track", plus
+/// three time-of-day-aware suggestion chips that open the meal composer
+/// prefilled. Shown only when the user has never logged a meal (zero today
+/// AND zero history).
+class _FirstRunCard extends StatelessWidget {
+ const _FirstRunCard();
+
+ /// Which suggestion set fits the device clock (morning / midday / evening).
+ static String _chipBucket() {
+ final hour = DateTime.now().hour;
+ if (hour < 11) return 'morning';
+ if (hour < 16) return 'midday';
+ return 'evening';
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ final bucket = _chipBucket();
+ final suggestions = [
+ for (var i = 1; i <= 3; i++) tr('dashboard.firstRunChips.$bucket$i'),
+ ];
+ return _FadeInDown(
+ child: Container(
+ width: double.infinity,
+ padding: const EdgeInsets.symmetric(
+ vertical: NhamSpacing.sp6, horizontal: NhamSpacing.sp4),
+ decoration: BoxDecoration(
+ color: kCardSurface,
+ borderRadius: BorderRadius.circular(kCardRadius),
+ boxShadow: kCardShadows,
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text(tr('dashboard.firstRunQuestion'), style: dashHeadline()),
+ const SizedBox(height: NhamSpacing.sp2),
+ Text(
+ tr('dashboard.firstRunHint'),
+ style: dashBody(color: kInkSecondary),
+ ),
+ const SizedBox(height: NhamSpacing.sp4),
+ Wrap(
+ spacing: 6,
+ runSpacing: 6,
+ children: [
+ for (final s in suggestions)
+ _FirstRunChip(
+ label: s,
+ // Same prefill handoff the meal FAB uses.
+ onTap: () => context
+ .go('/logging?meal=${Uri.encodeComponent(s)}'),
+ ),
+ ],
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+/// A suggestion pill matching the logging empty-state chips: border hairline,
+/// pill radius, white fill; pressed → accent-tinged border.
+class _FirstRunChip extends StatefulWidget {
+ const _FirstRunChip({required this.label, required this.onTap});
+ final String label;
+ final VoidCallback onTap;
+
+ @override
+ State<_FirstRunChip> createState() => _FirstRunChipState();
+}
+
+class _FirstRunChipState extends State<_FirstRunChip> {
+ bool _pressed = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return GestureDetector(
+ onTapDown: (_) => setState(() => _pressed = true),
+ onTapUp: (_) => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ onTap: widget.onTap,
+ child: Container(
+ padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+ decoration: BoxDecoration(
+ color: _pressed ? const Color(0x26E8D5B5) : NhamColors.elev,
+ borderRadius: BorderRadius.circular(NhamRadii.pill),
+ border: Border.all(
+ color: _pressed ? NhamColors.accent50 : NhamColors.borderSoft,
+ ),
+ ),
+ child: Text(widget.label, style: dashMeta(color: kInk)),
),
- data: (day) => _Dock(day: day, targets: targets),
);
}
}
@@ -70,13 +202,19 @@ class _MacroBarData {
}
class _Dock extends StatelessWidget {
- const _Dock({required this.day, required this.targets});
+ const _Dock({
+ required this.day,
+ required this.targets,
+ required this.dateLabel,
+ });
final LoggingDayData day;
final DockTargets targets;
+ final String dateLabel;
@override
Widget build(BuildContext context) {
+ final locale = context.locale.toString();
final meals = [...day.persistedMeals]
..sort((a, b) => a.loggedAt.compareTo(b.loggedAt));
@@ -91,9 +229,9 @@ class _Dock extends StatelessWidget {
totalFat += m.nutrition.fatG ?? 0;
}
final calories = round0(totalCalories);
- final remaining = (targets.calorieTarget - calories)
- .clamp(0, double.infinity)
- .round();
+ // Honest signed remaining — negative when over target (no censoring clamp).
+ final remaining = (targets.calorieTarget - calories).round();
+ final overTarget = remaining < 0;
final macroBars = <_MacroBarData>[
_MacroBarData(tr('dashboard.protein'), round0(totalProtein),
@@ -105,91 +243,117 @@ class _Dock extends StatelessWidget {
];
return _FadeInDown(
- child: Container(
- padding: const EdgeInsets.all(NhamSpacing.sp4),
- decoration: BoxDecoration(
- color: kCardSurface, // solid white
- borderRadius: BorderRadius.circular(kCardRadius),
- boxShadow: const [kCardShadow], // shadow only, no border
- ),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.stretch,
- children: [
- // (a) Hero: big calories number on the left, ring on the right.
- Row(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: [
+ // Section header OUTSIDE the card — label left, day right. Same
+ // eyebrow treatment + flush alignment as the Progress / Consistency
+ // headers so all three sections share one rhythm.
+ Padding(
+ padding: const EdgeInsets.only(bottom: NhamSpacing.sp2),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
- Expanded(
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text(
- tr('dashboard.caloriesRemaining').toUpperCase(),
- style: dashEyebrow(),
- ),
- const SizedBox(height: NhamSpacing.sp1),
- Row(
- crossAxisAlignment: CrossAxisAlignment.baseline,
- textBaseline: TextBaseline.alphabetic,
+ Flexible(
+ child: Text(
+ (overTarget
+ ? tr('dashboard.caloriesOverTarget')
+ : tr('dashboard.caloriesRemaining'))
+ .toUpperCase(),
+ style: dashEyebrow(color: kInk),
+ ),
+ ),
+ Text(dateLabel.toUpperCase(),
+ style: dashEyebrow(weight: FontWeight.w500)),
+ ],
+ ),
+ ),
+ Container(
+ padding: const EdgeInsets.all(NhamSpacing.sp4),
+ decoration: BoxDecoration(
+ color: kCardSurface, // solid white
+ borderRadius: BorderRadius.circular(kCardRadius),
+ boxShadow: kCardShadows, // shadow only, no border
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: [
+ // (a) Hero: big calories number on the left, ring on the right.
+ Row(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ children: [
+ Expanded(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
children: [
- Flexible(
- child: Text(_fmt(remaining),
- style: dashHero(), maxLines: 1),
+ Row(
+ crossAxisAlignment: CrossAxisAlignment.baseline,
+ textBaseline: TextBaseline.alphabetic,
+ children: [
+ Flexible(
+ // Counts the remaining figure up on day-swap
+ // (~300ms) so paging settles in place.
+ child: CountUpText(
+ value: remaining.abs().toDouble(),
+ enabled: !MediaQuery.disableAnimationsOf(
+ context),
+ duration: const Duration(milliseconds: 300),
+ style: dashHero(),
+ format: (v) => _fmt(v.round(), locale),
+ ),
+ ),
+ const SizedBox(width: 6),
+ Text(
+ overTarget
+ ? tr('dashboard.over')
+ : '/ ${_fmt(targets.calorieTarget.round(), locale)}',
+ style: dashBody(color: kInkSecondary),
+ ),
+ ],
),
- const SizedBox(width: 6),
+ const SizedBox(height: NhamSpacing.sp1),
Text(
- '/ ${_fmt(targets.calorieTarget.round())}',
- style: dashBody(color: kInkSecondary),
+ '${_fmt(calories, locale)} ${tr('dashboard.caloriesLogged')}',
+ style: dashMeta(color: kInkDisabled),
),
],
),
- const SizedBox(height: NhamSpacing.sp1),
- Text(
- '${_fmt(calories)} ${tr('dashboard.caloriesLogged')}',
- style: dashMeta(color: kInkDisabled),
- ),
- ],
- ),
- ),
- const SizedBox(width: NhamSpacing.sp4),
- CalorieRing(
- current: calories.toDouble(),
- target: targets.calorieTarget,
- size: 84,
- strokeWidth: 6,
- center: const Icon(LucideIcons.flame, size: 22, color: kInk),
+ ),
+ const SizedBox(width: NhamSpacing.sp4),
+ CalorieRing(
+ current: calories.toDouble(),
+ target: targets.calorieTarget,
+ size: 84,
+ strokeWidth: 6,
+ center:
+ const Icon(LucideIcons.flame, size: 22, color: kInk),
+ ),
+ ],
),
- ],
- ),
- const SizedBox(height: NhamSpacing.sp5),
+ const SizedBox(height: NhamSpacing.sp5),
- // (b) Macro bars — full width.
- for (var i = 0; i < macroBars.length; i++) ...[
- if (i > 0) const SizedBox(height: NhamSpacing.sp3),
- _MacroRow(bar: macroBars[i], idx: i),
- ],
+ // (b) Macro bars — full width.
+ for (var i = 0; i < macroBars.length; i++) ...[
+ if (i > 0) const SizedBox(height: NhamSpacing.sp3),
+ _MacroRow(bar: macroBars[i], idx: i),
+ ],
- const _Separator(),
+ const _Separator(),
- // (c) Meal list — plain, on the card surface (no nested fill).
- meals.isEmpty ? _EmptyMeals() : _MealList(meals: meals),
- ],
- ),
+ // (c) Meal list — plain, on the card surface (no nested fill).
+ meals.isEmpty ? _EmptyMeals() : _MealList(meals: meals),
+ ],
+ ),
+ ),
+ ],
),
);
}
- static String _fmt(int n) {
- // toLocaleString() → group thousands with commas (en default).
- final s = n.abs().toString();
- final buf = StringBuffer();
- for (var i = 0; i < s.length; i++) {
- if (i > 0 && (s.length - i) % 3 == 0) buf.write(',');
- buf.write(s[i]);
- }
- return n < 0 ? '-$buf' : buf.toString();
- }
+ // Locale-aware thousands grouping (en → "2,000", vi → "2.000").
+ static String _fmt(int n, String locale) => formatCount(n, locale);
}
/// A hairline divider between the card's zones (hero · macros · meals).
@@ -300,6 +464,8 @@ class _MacroBarState extends State<_MacroBar>
@override
Widget build(BuildContext context) {
+ // Reduced motion: render the fill at its resting width, no sweep.
+ final reduceMotion = MediaQuery.disableAnimationsOf(context);
return ClipRRect(
borderRadius: BorderRadius.circular(NhamRadii.pill),
child: Container(
@@ -311,7 +477,8 @@ class _MacroBarState extends State<_MacroBar>
builder: (context, _) => Align(
alignment: Alignment.centerLeft,
child: Container(
- width: constraints.maxWidth * (_fill.value / 100),
+ width: constraints.maxWidth *
+ ((reduceMotion ? widget.pct : _fill.value) / 100),
height: 8,
decoration: BoxDecoration(
color: widget.color,
@@ -425,7 +592,7 @@ class _MealRow extends StatelessWidget {
SizedBox(
width: _valueColumnWidth,
child: Text(
- '${round0(meal.nutrition.caloriesKcal)}',
+ '${round0(meal.nutrition.caloriesKcal)} kcal',
textAlign: TextAlign.right,
style: dashMeta(color: kInkSecondary, tabular: true),
),
diff --git a/apps/mobile-flutter/lib/features/dashboard/widgets/week_strip.dart b/apps/mobile-flutter/lib/features/dashboard/widgets/week_strip.dart
index 1754deda..6ca3e7f7 100644
--- a/apps/mobile-flutter/lib/features/dashboard/widgets/week_strip.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/widgets/week_strip.dart
@@ -13,6 +13,7 @@ import 'dart:math' as math;
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../models/dashboard.dart';
@@ -175,7 +176,10 @@ class _DayCell extends StatelessWidget {
if (isFuture) return cell0;
return GestureDetector(
behavior: HitTestBehavior.opaque,
- onTap: () => onSelectDay(date),
+ onTap: () {
+ HapticFeedback.selectionClick();
+ onSelectDay(date);
+ },
child: cell0,
);
}
diff --git a/apps/mobile-flutter/lib/features/dashboard/widgets/weight_chart.dart b/apps/mobile-flutter/lib/features/dashboard/widgets/weight_chart.dart
index a7198b47..5d65dd2f 100644
--- a/apps/mobile-flutter/lib/features/dashboard/widgets/weight_chart.dart
+++ b/apps/mobile-flutter/lib/features/dashboard/widgets/weight_chart.dart
@@ -11,6 +11,7 @@ import 'package:easy_localization/easy_localization.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../../models/weight.dart';
import '../../../theme/nham_colors.dart';
@@ -18,6 +19,7 @@ import '../../../theme/nham_theme.dart';
import '../data/dashboard_providers.dart';
import 'compact_weight_log.dart';
import 'dashboard_tokens.dart';
+import 'skeleton.dart';
const double _chartAspect = 2.2; // canvas width : height (minimal band)
@@ -36,31 +38,31 @@ class WeightChart extends ConsumerWidget {
decoration: BoxDecoration(
color: kCardSurface, // solid white
borderRadius: BorderRadius.circular(kCardRadius),
- boxShadow: const [kCardShadow], // shadow only, no border
+ boxShadow: kCardShadows, // shadow only, no border
),
child: async.when(
- loading: () => _MinHeight(
+ // Skeleton of the card body (no spinner) — the card is already drawn,
+ // so only its inner rows shimmer.
+ loading: () => Shimmer(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: weightCardSkeletonChildren(),
+ ),
+ ),
+ error: (_, __) => _MinHeight(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
- const CircularProgressIndicator(
- color: NhamColors.accent, strokeWidth: 3),
+ const Icon(LucideIcons.cloudOff, size: 22, color: NhamColors.stone),
const SizedBox(height: NhamSpacing.sp2),
Text(
- tr('dashboard.loadingWeightTrend'),
+ tr('dashboard.progressLoadError'),
textAlign: TextAlign.center,
- style: dashMeta(color: kInkDisabled),
+ style: dashMeta(color: kInkSecondary),
),
],
),
),
- error: (_, __) => _MinHeight(
- child: Text(
- tr('dashboard.progressLoadError'),
- textAlign: TextAlign.center,
- style: dashMeta(color: kInkDisabled),
- ),
- ),
data: (data) => _Body(data: data, todayDate: todayDate, args: args),
),
);
@@ -93,17 +95,32 @@ class _Body extends StatelessWidget {
Widget build(BuildContext context) {
final kg = tr('dashboard.units.kg');
+ // Net change over the window (current − period start). The top-right stat
+ // that fills what used to be an empty corner — a SaaS-style metric pair.
+ final delta = data.currentWeight - data.periodStartWeight;
+ final hasTrend = data.weights.length > 1 && delta.abs() >= 0.05;
+
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
- // Hero — current weight only (no trend pill / detail / projection).
+ // Hero — current weight (left) + net-change stat (right) so the corner
+ // never reads empty.
Row(
- crossAxisAlignment: CrossAxisAlignment.baseline,
- textBaseline: TextBaseline.alphabetic,
+ crossAxisAlignment: CrossAxisAlignment.start,
children: [
- Text(data.currentWeight.toStringAsFixed(1), style: dashHero()),
- const SizedBox(width: 6),
- Text(kg, style: dashBody(color: kInkSecondary)),
+ Expanded(
+ child: Row(
+ crossAxisAlignment: CrossAxisAlignment.baseline,
+ textBaseline: TextBaseline.alphabetic,
+ children: [
+ Text(data.currentWeight.toStringAsFixed(1),
+ style: dashHero()),
+ const SizedBox(width: 6),
+ Text(kg, style: dashBody(color: kInkSecondary)),
+ ],
+ ),
+ ),
+ _TrendStat(delta: delta, hasTrend: hasTrend, kg: kg),
],
),
const SizedBox(height: NhamSpacing.sp4),
@@ -128,6 +145,53 @@ class _Body extends StatelessWidget {
}
}
+/// The top-right net-change metric. A signed delta + kg with a small eyebrow,
+/// turning the empty corner into a SaaS-style metric pair. No trend-arrow icon
+/// (a SaaS trope per the brand drift-watchlist) — the sign carries direction.
+class _TrendStat extends StatelessWidget {
+ const _TrendStat({
+ required this.delta,
+ required this.hasTrend,
+ required this.kg,
+ });
+
+ final double delta;
+ final bool hasTrend;
+ final String kg;
+
+ @override
+ Widget build(BuildContext context) {
+ // No history yet → a plain "steady" word (no number, no label).
+ if (!hasTrend) {
+ return Padding(
+ padding: const EdgeInsets.only(top: 6),
+ child: Text(
+ tr('dashboard.weightCard.steady'),
+ style: dashMeta(color: kInkSecondary),
+ ),
+ );
+ }
+
+ // The net-change stat — arrow + value + kg, no caption label.
+ final value = delta.abs().toStringAsFixed(1);
+ final arrow = delta > 0 ? LucideIcons.arrowUp : LucideIcons.arrowDown;
+ return Row(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ Icon(arrow, size: 18, color: kInk),
+ const SizedBox(width: 1),
+ Text(value, style: dashValue(color: kInk)),
+ const SizedBox(width: 3),
+ Padding(
+ padding: const EdgeInsets.only(bottom: 1),
+ child: Text(kg, style: dashMeta(color: kInkDisabled)),
+ ),
+ ],
+ );
+ }
+}
+
/// A frameless area line that bleeds to the card edges, with a dotted goal line
/// and tiny start/now end-labels — no axes, no band, no interpretation.
class _ChartCanvas extends StatelessWidget {
@@ -244,13 +308,12 @@ class _ChartCanvas extends StatelessWidget {
lineBarsData: [
LineChartBarData(
spots: spots,
- isCurved: !isSinglePoint,
- curveSmoothness: 0.35,
- preventCurveOverShooting: true,
+ // Sharp, angular line — no smoothing (was a rounded curve).
+ isCurved: false,
color: NhamColors.accent,
barWidth: 2,
- isStrokeCapRound: true,
- isStrokeJoinRound: true,
+ isStrokeCapRound: false,
+ isStrokeJoinRound: false,
dotData: FlDotData(
show: isSinglePoint,
getDotPainter: (spot, pct, bar, idx) => FlDotCirclePainter(
diff --git a/apps/mobile-flutter/lib/features/logging/data/logging_keys.dart b/apps/mobile-flutter/lib/features/logging/data/logging_keys.dart
index b301b9a5..a58a72b0 100644
--- a/apps/mobile-flutter/lib/features/logging/data/logging_keys.dart
+++ b/apps/mobile-flutter/lib/features/logging/data/logging_keys.dart
@@ -8,21 +8,26 @@ library;
abstract final class LoggingDayKeys {
static const List all = ['logging-day'];
- static List byUserDate(String userId, String date) =>
- ['logging-day', userId, date];
+ static List byUserDate(String userId, String date) => [
+ 'logging-day',
+ userId,
+ date,
+ ];
static List byUserDateOffset(
String userId,
String date,
int timezoneOffset,
- ) =>
- ['logging-day', userId, date, timezoneOffset];
+ ) => ['logging-day', userId, date, timezoneOffset];
}
/// `['meal-dates', userId, timezoneOffset]`. Invalidations elsewhere use the
/// `['meal-dates']` prefix — never exact.
-List mealDatesKey(String userId, int timezoneOffset) =>
- ['meal-dates', userId, timezoneOffset];
+List mealDatesKey(String userId, int timezoneOffset) => [
+ 'meal-dates',
+ userId,
+ timezoneOffset,
+];
/// Profile cache key — mirrors RN `onboardingKeys.profile`.
const List onboardingProfileKey = ['onboarding', 'profile'];
@@ -35,6 +40,17 @@ String todayDateString([DateTime? date]) {
return '${d.year}-$m-$day';
}
+/// Local YYYY-MM-DD `delta` days from [date] (matches the web's `addDays`).
+String addDays(String date, int delta) {
+ final parts = date.split('-');
+ final base = DateTime(
+ int.parse(parts[0]),
+ int.parse(parts[1]),
+ int.parse(parts[2]),
+ );
+ return todayDateString(DateTime(base.year, base.month, base.day + delta));
+}
+
/// Local timezone offset in MINUTES, matching JS `Date.getTimezoneOffset()`
/// (minutes BEHIND UTC, i.e. `-(localOffsetMinutes)`).
int timezoneOffsetMinutes([DateTime? date]) {
diff --git a/apps/mobile-flutter/lib/features/logging/data/logging_providers.dart b/apps/mobile-flutter/lib/features/logging/data/logging_providers.dart
index 2402e14b..25d56f43 100644
--- a/apps/mobile-flutter/lib/features/logging/data/logging_providers.dart
+++ b/apps/mobile-flutter/lib/features/logging/data/logging_providers.dart
@@ -67,18 +67,6 @@ class LoggingDayNotifier
);
}
- /// Optimistically remove a persisted meal (on delete).
- void removeMeal(String mealId) {
- final current = state.valueOrNull;
- if (current == null) return;
- state = AsyncData(
- current.copyWith(
- persistedMeals:
- current.persistedMeals.where((m) => m.id != mealId).toList(),
- ),
- );
- }
-
/// Roll back to a snapshot (on mutation error).
void restore(LoggingDayData snapshot) {
state = AsyncData(snapshot);
@@ -119,6 +107,14 @@ final mealDatesProvider = FutureProvider.autoDispose.family<
.then((list) => list.cast());
});
+/// Session-scoped dismiss state for the once-daily "yesterday looks
+/// under-logged" nudge, keyed by the yesterday date so a fresh day re-prompts.
+/// Mirrors the web's in-memory `yesterdayPromptDismissed` useState — it resets
+/// on app relaunch (not persisted), so the prompt is at most once per session.
+final yesterdayPromptDismissedProvider = StateProvider.family(
+ (ref, date) => false,
+);
+
/// The onboarding profile row the logging screen needs (calorie + macro
/// targets). Mirrors RN `useQuery({ queryKey: onboardingKeys.profile, ... })`.
final loggingProfileProvider =
@@ -143,6 +139,7 @@ void invalidateMealSurfaces(
}
ref.invalidate(mealDatesProvider(userId));
ref.invalidate(dash.dashboardBundleProvider((userId: userId, date: date)));
+ ref.invalidate(dash.dashboardDayProvider((userId: userId, date: date)));
}
/// Confirm a pending analysis into a saved meal, with the RN hook's optimistic
diff --git a/apps/mobile-flutter/lib/features/logging/data/manual_log_providers.dart b/apps/mobile-flutter/lib/features/logging/data/manual_log_providers.dart
index 622affaa..52dce695 100644
--- a/apps/mobile-flutter/lib/features/logging/data/manual_log_providers.dart
+++ b/apps/mobile-flutter/lib/features/logging/data/manual_log_providers.dart
@@ -85,7 +85,7 @@ class ManualLogController extends AutoDisposeNotifier {
}
void updateGrams(String itemId, double? grams) {
- final clamped = grams == null ? null : grams.clamp(0, 5000).toDouble();
+ final clamped = grams?.clamp(0, 5000).toDouble();
state = state.copyWith(
items: [
for (final item in state.items)
diff --git a/apps/mobile-flutter/lib/features/logging/data/stream_analysis_controller.dart b/apps/mobile-flutter/lib/features/logging/data/stream_analysis_controller.dart
index 1889875a..c51e38a3 100644
--- a/apps/mobile-flutter/lib/features/logging/data/stream_analysis_controller.dart
+++ b/apps/mobile-flutter/lib/features/logging/data/stream_analysis_controller.dart
@@ -31,6 +31,11 @@ class StreamAnalysisState {
final String? error;
final bool isAnalyzing;
+ /// The day this run logs into (`StreamAnalyzeInput.loggedDate`). Lets the
+ /// feed pin the streaming/reveal cards to their origin date, so switching
+ /// the selected day doesn't render them on the wrong day's feed.
+ final String? loggedDate;
+
const StreamAnalysisState({
this.status = StreamStatus.idle,
this.items = const [],
@@ -39,6 +44,7 @@ class StreamAnalysisState {
this.analysisId,
this.error,
this.isAnalyzing = false,
+ this.loggedDate,
});
StreamAnalysisState copyWith({
@@ -49,6 +55,7 @@ class StreamAnalysisState {
String? analysisId,
String? error,
bool? isAnalyzing,
+ String? loggedDate,
}) => StreamAnalysisState(
status: status ?? this.status,
items: items ?? this.items,
@@ -57,6 +64,7 @@ class StreamAnalysisState {
analysisId: analysisId ?? this.analysisId,
error: error ?? this.error,
isAnalyzing: isAnalyzing ?? this.isAnalyzing,
+ loggedDate: loggedDate ?? this.loggedDate,
);
static const StreamAnalysisState initial = StreamAnalysisState();
@@ -149,9 +157,10 @@ class StreamAnalysisController extends Notifier {
Future analyze(StreamAnalyzeInput input) async {
_closeStream();
final reqId = ++_requestId;
- state = const StreamAnalysisState(
+ state = StreamAnalysisState(
status: StreamStatus.connecting,
isAnalyzing: true,
+ loggedDate: input.loggedDate,
);
final api = ref.read(apiClientProvider);
diff --git a/apps/mobile-flutter/lib/features/logging/logic/meal_utils.dart b/apps/mobile-flutter/lib/features/logging/logic/meal_utils.dart
index 3be89343..57ec8ad9 100644
--- a/apps/mobile-flutter/lib/features/logging/logic/meal_utils.dart
+++ b/apps/mobile-flutter/lib/features/logging/logic/meal_utils.dart
@@ -8,6 +8,18 @@ import '../../../models/meal.dart';
/// Minimum allowed cooked weight for a grams/ml dish.
const double minDishGrams = 10;
+/// A day reads as under-logged when its calories fall below this fraction of
+/// the target (ported from `lib/nutrition/pattern/completeness.ts`).
+const double partialDayFraction = 0.5;
+
+/// True when a past day's logged calories are positive but below half the
+/// target — likely under-logged, so the trends set it aside.
+bool isLikelyPartialDay(double calories, int? calorieTarget) {
+ if (calorieTarget == null || calorieTarget <= 0) return false;
+ if (calories <= 0) return false;
+ return calories < partialDayFraction * calorieTarget;
+}
+
/// Sum each item's macros into a single [MacroBreakdown].
MacroBreakdown recalculateTotals(List items) {
return items.fold(
diff --git a/apps/mobile-flutter/lib/features/logging/screens/logging_screen.dart b/apps/mobile-flutter/lib/features/logging/screens/logging_screen.dart
index b5710b8f..260c233f 100644
--- a/apps/mobile-flutter/lib/features/logging/screens/logging_screen.dart
+++ b/apps/mobile-flutter/lib/features/logging/screens/logging_screen.dart
@@ -4,13 +4,13 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../data/session_provider.dart';
import '../../../shared/widgets/nham_text.dart';
-import '../../../shell/app_header.dart';
import '../../../theme/nham_colors.dart';
import '../../../theme/nham_theme.dart';
import '../data/logging_keys.dart';
import '../data/logging_models.dart';
import '../data/logging_providers.dart';
import '../widgets/feed_area.dart';
+import '../widgets/partial_yesterday_prompt.dart';
import '../widgets/timeline_picker.dart';
/// The logging tab. Owns the selected date + picker-expanded state so the date
@@ -26,8 +26,7 @@ class LoggingScreen extends ConsumerStatefulWidget {
}
class _LoggingScreenState extends ConsumerState {
- final String _today = todayDateString();
- late String _selectedDate = _today;
+ late String _selectedDate = todayDateString();
bool _pickerExpanded = false;
@override
@@ -61,11 +60,12 @@ class _LoggingScreenState extends ConsumerState {
carbsTargetG: (data?['carbsTargetG'] as num?)?.toInt() ?? 250,
fatTargetG: (data?['fatTargetG'] as num?)?.toInt() ?? 65,
);
+ final today = todayDateString();
+ final yesterday = addDays(today, -1);
- // Header in normal flow at the top; the collapse scrim overlays ONLY the
- // feed region below it (so the strip's cells/chevrons stay tappable while
- // the scrim catches taps everywhere else — the RN z-20 header / z-10 scrim
- // contract). Tapping outside the strip collapses it (web parity).
+ // The date chip MORPHS in place into the week strip (fixed height, so the
+ // feed never shifts) — a buttery cross-dissolve, not a panel that opens
+ // below. The scrim catches outside-taps to collapse back to the chip.
return ColoredBox(
color: NhamColors.surface,
child: SafeArea(
@@ -73,22 +73,32 @@ class _LoggingScreenState extends ConsumerState {
child: Column(
children: [
Padding(
- padding:
- const EdgeInsets.symmetric(horizontal: NhamSpacing.sp3),
- child: AppHeader(
+ padding: const EdgeInsets.fromLTRB(
+ NhamSpacing.sp3,
+ 0,
+ NhamSpacing.sp3,
+ NhamSpacing.sp1,
+ ),
+ child: DateMorph(
+ dates: mealDates,
+ today: today,
+ selectedDate: _selectedDate,
expanded: _pickerExpanded,
- child: TimelinePicker(
- dates: mealDates,
- today: _today,
- selectedDate: _selectedDate,
- expanded: _pickerExpanded,
- onSelectDate: (date) =>
- setState(() => _selectedDate = date),
- onExpandedChange: (v) =>
- setState(() => _pickerExpanded = v),
- ),
+ onSelectDate: (date) => setState(() => _selectedDate = date),
+ onExpand: () => setState(() => _pickerExpanded = true),
+ onCollapse: () => setState(() => _pickerExpanded = false),
),
),
+ // A once-daily nudge when *yesterday* was under-logged — only while
+ // viewing today, and only until dismissed this session.
+ if (_selectedDate == today &&
+ !ref.watch(yesterdayPromptDismissedProvider(yesterday)))
+ PartialYesterdayPrompt(
+ userId: userId,
+ yesterday: yesterday,
+ calorieTarget: profile.calorieTarget,
+ onOpenDay: (date) => setState(() => _selectedDate = date),
+ ),
Expanded(
child: Stack(
children: [
@@ -99,8 +109,7 @@ class _LoggingScreenState extends ConsumerState {
Positioned.fill(
child: GestureDetector(
behavior: HitTestBehavior.translucent,
- onTap: () =>
- setState(() => _pickerExpanded = false),
+ onTap: () => setState(() => _pickerExpanded = false),
),
),
],
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/calorie_ring.dart b/apps/mobile-flutter/lib/features/logging/widgets/calorie_ring.dart
index d9f2f5d7..544f7f09 100644
--- a/apps/mobile-flutter/lib/features/logging/widgets/calorie_ring.dart
+++ b/apps/mobile-flutter/lib/features/logging/widgets/calorie_ring.dart
@@ -1,18 +1,21 @@
import 'dart:math' as math;
+import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import '../../../features/dashboard/logic/dashboard_format.dart' show formatCount;
import '../../../shared/widgets/nham_text.dart';
import '../../../theme/nham_colors.dart';
-/// The calorie ring shows REMAINING calories as the fill fraction (matches
-/// web's shared/calorie-ring). The progress arc animates its
-/// `strokeDashoffset` over 1000ms with `cubic-bezier(0.16, 1, 0.3, 1)`.
+/// The calorie ring fills with CONSUMED calories (`current / target`) — it fills
+/// up as you eat, matching the dashboard ring, the week strip, and the heatmap
+/// framing. The progress arc animates its sweep over 1000ms with
+/// `cubic-bezier(0.16, 1, 0.3, 1)`.
///
-/// RN geometry: a 100-unit viewbox, radius 46, centered, with a
-/// `non-scaling-stroke` of [strokeWidth] px at the rendered [size]. [center]
-/// overrides the default in-ring content (the remaining number + "left"
-/// eyebrow), mirroring the RN `center` prop.
+/// Over target: the base arc completes in tan, then an overflow arc continues
+/// past 12 o'clock in ~40%-alpha terracotta — never red, never a pill. The
+/// default in-ring content shows the calories `left`, flipping to `over` when
+/// past target. [center] overrides that content.
class CalorieRing extends StatefulWidget {
const CalorieRing({
super.key,
@@ -43,19 +46,19 @@ class _CalorieRingState extends State
duration: const Duration(milliseconds: 1000),
);
late Animation _animation;
- double _fromPct = 0;
- late double _pct;
+ double _fromRatio = 0;
+ late double _ratio;
- double get _remaining =>
- math.max(0, widget.target - widget.current);
- double _computePct() =>
- widget.target > 0 ? math.min(_remaining / widget.target, 1) : 0;
+ double get _remaining => widget.target - widget.current;
+
+ /// Consumed fraction — may exceed 1 (the painter splits base vs. overflow).
+ double _computeRatio() => widget.target > 0 ? widget.current / widget.target : 0;
@override
void initState() {
super.initState();
- _pct = _computePct();
- _animation = Tween(begin: 0, end: _pct)
+ _ratio = _computeRatio();
+ _animation = Tween(begin: 0, end: _ratio)
.chain(CurveTween(curve: _curve))
.animate(_controller);
_controller.forward();
@@ -64,11 +67,11 @@ class _CalorieRingState extends State
@override
void didUpdateWidget(CalorieRing oldWidget) {
super.didUpdateWidget(oldWidget);
- final nextPct = _computePct();
- if (nextPct != _pct) {
- _fromPct = _animation.value;
- _pct = nextPct;
- _animation = Tween(begin: _fromPct, end: _pct)
+ final nextRatio = _computeRatio();
+ if (nextRatio != _ratio) {
+ _fromRatio = _animation.value;
+ _ratio = nextRatio;
+ _animation = Tween(begin: _fromRatio, end: _ratio)
.chain(CurveTween(curve: _curve))
.animate(_controller);
_controller
@@ -85,7 +88,6 @@ class _CalorieRingState extends State
@override
Widget build(BuildContext context) {
- final remainingLabel = _remaining.round().toString();
return SizedBox(
width: widget.size,
height: widget.size,
@@ -97,13 +99,12 @@ class _CalorieRingState extends State
builder: (context, _) => CustomPaint(
size: Size(widget.size, widget.size),
painter: _RingPainter(
- pct: _animation.value,
+ ratio: _animation.value,
strokeWidth: widget.strokeWidth,
),
),
),
- widget.center ??
- _DefaultCenter(remainingLabel: remainingLabel),
+ widget.center ?? _DefaultCenter(remaining: _remaining),
],
),
);
@@ -111,16 +112,21 @@ class _CalorieRingState extends State
}
class _DefaultCenter extends StatelessWidget {
- const _DefaultCenter({required this.remainingLabel});
- final String remainingLabel;
+ const _DefaultCenter({required this.remaining});
+
+ /// target − consumed: positive = calories left, negative = over target.
+ final double remaining;
@override
Widget build(BuildContext context) {
+ final locale = context.locale.toString();
+ final over = remaining < 0;
+ final value = remaining.abs().round();
return Column(
mainAxisSize: MainAxisSize.min,
children: [
NhamText(
- remainingLabel,
+ formatCount(value, locale),
variant: NhamTextVariant.numDisplay,
style: const TextStyle(
fontSize: 17,
@@ -129,10 +135,10 @@ class _DefaultCenter extends StatelessWidget {
),
),
const SizedBox(height: 2),
- const NhamText(
- 'left',
+ NhamText(
+ over ? tr('dashboard.over') : tr('dashboard.left'),
variant: NhamTextVariant.eyebrow,
- style: TextStyle(fontSize: 8, letterSpacing: 1.2),
+ style: const TextStyle(fontSize: 8, letterSpacing: 1.2),
),
],
);
@@ -140,16 +146,19 @@ class _DefaultCenter extends StatelessWidget {
}
class _RingPainter extends CustomPainter {
- _RingPainter({required this.pct, required this.strokeWidth});
+ _RingPainter({required this.ratio, required this.strokeWidth});
- final double pct;
+ final double ratio;
final double strokeWidth;
+ static const double _start = -math.pi / 2; // 12 o'clock.
+
@override
void paint(Canvas canvas, Size size) {
// RN: radius 46 in a 100-unit viewbox → scale to the rendered size.
final center = Offset(size.width / 2, size.height / 2);
final radius = (46 / 100) * size.width;
+ final rect = Rect.fromCircle(center: center, radius: radius);
final track = Paint()
..style = PaintingStyle.stroke
@@ -157,27 +166,34 @@ class _RingPainter extends CustomPainter {
..color = NhamColors.track;
canvas.drawCircle(center, radius, track);
- if (pct <= 0) return;
+ if (ratio <= 0) return;
- final arc = Paint()
+ final base = Paint()
..style = PaintingStyle.stroke
..strokeWidth = strokeWidth
..strokeCap = StrokeCap.round
..color = NhamColors.accent;
-
- // Start at -90° (12 o'clock), sweep clockwise by pct of the full circle.
- const startAngle = -math.pi / 2;
- final sweepAngle = 2 * math.pi * pct;
canvas.drawArc(
- Rect.fromCircle(center: center, radius: radius),
- startAngle,
- sweepAngle,
+ rect,
+ _start,
+ 2 * math.pi * ratio.clamp(0, 1).toDouble(),
false,
- arc,
+ base,
);
+
+ // Over target — the overflow arc continues in terracotta @ ~40% alpha.
+ if (ratio > 1) {
+ final overflow = (ratio - 1).clamp(0, 1).toDouble();
+ final over = Paint()
+ ..style = PaintingStyle.stroke
+ ..strokeWidth = strokeWidth
+ ..strokeCap = StrokeCap.round
+ ..color = NhamColors.danger.withValues(alpha: 0.4);
+ canvas.drawArc(rect, _start, 2 * math.pi * overflow, false, over);
+ }
}
@override
bool shouldRepaint(_RingPainter old) =>
- old.pct != pct || old.strokeWidth != strokeWidth;
+ old.ratio != ratio || old.strokeWidth != strokeWidth;
}
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/count_up.dart b/apps/mobile-flutter/lib/features/logging/widgets/count_up.dart
new file mode 100644
index 00000000..d143f552
--- /dev/null
+++ b/apps/mobile-flutter/lib/features/logging/widgets/count_up.dart
@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+
+import '../../../shared/widgets/nham_text.dart';
+
+/// Counts a number up from [from] to [value] over [duration] on first build
+/// (and re-counts whenever [value] changes), formatting each frame with [format].
+///
+/// Used by the streaming-reveal morph so the totals row settles into place
+/// instead of popping — the emotional peak of the analysis landing.
+class CountUpText extends StatefulWidget {
+ const CountUpText({
+ super.key,
+ required this.value,
+ required this.format,
+ this.from = 0,
+ this.duration = const Duration(milliseconds: 600),
+ this.curve = Curves.easeOut,
+ this.variant = NhamTextVariant.body,
+ this.style,
+ this.enabled = true,
+ });
+
+ final double value;
+ final String Function(double) format;
+ final double from;
+ final Duration duration;
+ final Curve curve;
+ final NhamTextVariant variant;
+ final TextStyle? style;
+
+ /// When false the value renders directly with no animation (reduced motion /
+ /// non-reveal contexts).
+ final bool enabled;
+
+ @override
+ State createState() => _CountUpTextState();
+}
+
+class _CountUpTextState extends State
+ with SingleTickerProviderStateMixin {
+ late final AnimationController _c = AnimationController(
+ vsync: this,
+ duration: widget.duration,
+ );
+ late Animation _anim = _build(widget.from, widget.value);
+
+ Animation _build(double from, double to) => Tween(
+ begin: from,
+ end: to,
+ ).chain(CurveTween(curve: widget.curve)).animate(_c);
+
+ @override
+ void initState() {
+ super.initState();
+ if (widget.enabled) {
+ _c.forward();
+ } else {
+ _c.value = 1;
+ }
+ }
+
+ @override
+ void didUpdateWidget(CountUpText old) {
+ super.didUpdateWidget(old);
+ if (old.value != widget.value) {
+ _anim = _build(_anim.value, widget.value);
+ if (widget.enabled) {
+ _c
+ ..reset()
+ ..forward();
+ } else {
+ _c.value = 1;
+ }
+ } else if (old.enabled != widget.enabled && !widget.enabled) {
+ _c.value = 1;
+ }
+ }
+
+ @override
+ void dispose() {
+ _c.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ if (!widget.enabled) {
+ return NhamText(
+ widget.format(widget.value),
+ variant: widget.variant,
+ style: widget.style,
+ );
+ }
+ return AnimatedBuilder(
+ animation: _anim,
+ builder:
+ (context, _) => NhamText(
+ widget.format(_anim.value),
+ variant: widget.variant,
+ style: widget.style,
+ ),
+ );
+ }
+}
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/dashed_divider.dart b/apps/mobile-flutter/lib/features/logging/widgets/dashed_divider.dart
deleted file mode 100644
index 8828134f..00000000
--- a/apps/mobile-flutter/lib/features/logging/widgets/dashed_divider.dart
+++ /dev/null
@@ -1,69 +0,0 @@
-import 'package:flutter/material.dart';
-
-/// A 1px horizontal dashed rule — the RN `borderTop` rows use
-/// `borderStyle: 'dashed'`, which Flutter's [Border] cannot express, so this
-/// paints the dashes directly.
-class DashedDivider extends StatelessWidget {
- const DashedDivider({
- super.key,
- required this.color,
- this.dashWidth = 3,
- this.dashGap = 3,
- this.thickness = 1,
- });
-
- final Color color;
- final double dashWidth;
- final double dashGap;
- final double thickness;
-
- @override
- Widget build(BuildContext context) {
- return SizedBox(
- height: thickness,
- width: double.infinity,
- child: CustomPaint(
- painter: _DashedLinePainter(
- color: color,
- dashWidth: dashWidth,
- dashGap: dashGap,
- thickness: thickness,
- ),
- ),
- );
- }
-}
-
-class _DashedLinePainter extends CustomPainter {
- _DashedLinePainter({
- required this.color,
- required this.dashWidth,
- required this.dashGap,
- required this.thickness,
- });
-
- final Color color;
- final double dashWidth;
- final double dashGap;
- final double thickness;
-
- @override
- void paint(Canvas canvas, Size size) {
- final paint = Paint()
- ..color = color
- ..strokeWidth = thickness;
- double x = 0;
- final y = size.height / 2;
- while (x < size.width) {
- canvas.drawLine(Offset(x, y), Offset(x + dashWidth, y), paint);
- x += dashWidth + dashGap;
- }
- }
-
- @override
- bool shouldRepaint(_DashedLinePainter old) =>
- old.color != color ||
- old.dashWidth != dashWidth ||
- old.dashGap != dashGap ||
- old.thickness != thickness;
-}
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/empty_state.dart b/apps/mobile-flutter/lib/features/logging/widgets/empty_state.dart
index be94cf07..c06da12a 100644
--- a/apps/mobile-flutter/lib/features/logging/widgets/empty_state.dart
+++ b/apps/mobile-flutter/lib/features/logging/widgets/empty_state.dart
@@ -1,5 +1,8 @@
+import 'dart:math';
+
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../../shared/widgets/nham_text.dart';
import '../../../theme/nham_colors.dart';
@@ -7,15 +10,28 @@ import '../../../theme/nham_theme.dart';
import '../../../theme/nham_typography.dart';
import 'entrances.dart';
-// Hardcoded Vietnamese suggestions (matches web — these are NOT localized).
-const _suggestions = ['2 mực kho + cơm', 'Phở bò tái', 'Bún chả Hà Nội'];
+// The "what did you eat?" prompt has several phrasings; one is chosen at random
+// per visit so the empty feed feels alive instead of canned.
+const _titleKeys = [
+ 'logging.emptyState.title',
+ 'logging.emptyState.title2',
+ 'logging.emptyState.title3',
+ 'logging.emptyState.title4',
+ 'logging.emptyState.title5',
+];
+
+/// The empty feed: an icon tile and a single rotating "What did you eat?"
+/// prompt. Staggered icon→title entrance (mirrors the web: icon scale delay 50,
+/// title 100).
+class EmptyState extends StatefulWidget {
+ const EmptyState({super.key});
-/// The "what did you eat?" empty feed. Staggered entrances mirror the web:
-/// icon scale (delay 50), title (100), subtitle (200), chips (300).
-class EmptyState extends StatelessWidget {
- const EmptyState({super.key, required this.onSuggestion});
+ @override
+ State createState() => _EmptyStateState();
+}
- final ValueChanged onSuggestion;
+class _EmptyStateState extends State {
+ late final String _titleKey = _titleKeys[Random().nextInt(_titleKeys.length)];
@override
Widget build(BuildContext context) {
@@ -36,50 +52,20 @@ class EmptyState extends StatelessWidget {
borderRadius: BorderRadius.circular(NhamRadii.xl), // rounded-xl
),
child: const Icon(
- Icons.restaurant, // lucide UtensilsCrossed → Icons.restaurant
+ LucideIcons.utensilsCrossed,
size: 20,
color: NhamColors.textMuted,
),
),
),
const SizedBox(height: NhamSpacing.sp4), // gap-4
- Column(
- mainAxisSize: MainAxisSize.min,
- children: [
- FadeInDown(
- delay: const Duration(milliseconds: 100),
- child: NhamText(
- 'logging.emptyState.title'.tr(),
- variant: NhamTextVariant.h4,
- textAlign: TextAlign.center,
- style: const TextStyle(letterSpacing: NhamTracking.tight),
- ),
- ),
- const SizedBox(height: 6), // gap-1.5
- FadeInDown(
- delay: const Duration(milliseconds: 200),
- child: ConstrainedBox(
- constraints: const BoxConstraints(maxWidth: 280),
- child: NhamText(
- 'logging.emptyState.subtitle'.tr(),
- variant: NhamTextVariant.small,
- textAlign: TextAlign.center,
- ),
- ),
- ),
- ],
- ),
- const SizedBox(height: NhamSpacing.sp4), // gap-4
FadeInDown(
- delay: const Duration(milliseconds: 300),
- child: Wrap(
- alignment: WrapAlignment.center,
- spacing: 6, // gap-1.5
- runSpacing: 6,
- children: [
- for (final s in _suggestions)
- _SuggestionChip(label: s, onTap: () => onSuggestion(s)),
- ],
+ delay: const Duration(milliseconds: 100),
+ child: NhamText(
+ _titleKey.tr(),
+ variant: NhamTextVariant.h4,
+ textAlign: TextAlign.center,
+ style: const TextStyle(letterSpacing: NhamTracking.tight),
),
),
],
@@ -87,43 +73,3 @@ class EmptyState extends StatelessWidget {
);
}
}
-
-/// A suggestion pill: border/60 rounded-full px-3 py-1 bg-white/80; pressed →
-/// accent/50 border + border/15 fill (web `hover:` touch affordance).
-class _SuggestionChip extends StatefulWidget {
- const _SuggestionChip({required this.label, required this.onTap});
- final String label;
- final VoidCallback onTap;
-
- @override
- State<_SuggestionChip> createState() => _SuggestionChipState();
-}
-
-class _SuggestionChipState extends State<_SuggestionChip> {
- bool _pressed = false;
-
- @override
- Widget build(BuildContext context) {
- return GestureDetector(
- onTapDown: (_) => setState(() => _pressed = true),
- onTapUp: (_) => setState(() => _pressed = false),
- onTapCancel: () => setState(() => _pressed = false),
- onTap: widget.onTap,
- child: Container(
- padding:
- const EdgeInsets.symmetric(horizontal: 12, vertical: 4), // px-3 py-1
- decoration: BoxDecoration(
- // Pressed fill is bg-nham-border/15 (border @15%), not accent.
- color: _pressed
- ? const Color(0x26E8D5B5)
- : NhamColors.elevTranslucent,
- borderRadius: BorderRadius.circular(NhamRadii.pill),
- border: Border.all(
- color: _pressed ? NhamColors.accent50 : NhamColors.borderSoft,
- ),
- ),
- child: NhamText(widget.label, variant: NhamTextVariant.chipText),
- ),
- );
- }
-}
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/feed_area.dart b/apps/mobile-flutter/lib/features/logging/widgets/feed_area.dart
index c9e708e4..7708f7ef 100644
--- a/apps/mobile-flutter/lib/features/logging/widgets/feed_area.dart
+++ b/apps/mobile-flutter/lib/features/logging/widgets/feed_area.dart
@@ -1,7 +1,10 @@
+import 'dart:async' show unawaited;
import 'dart:math' as math;
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:uuid/uuid.dart';
@@ -15,18 +18,21 @@ import '../../../theme/nham_typography.dart';
import '../data/logging_keys.dart';
import '../data/logging_models.dart';
import '../data/logging_providers.dart';
+import '../../dashboard/data/dashboard_providers.dart' as dash;
+import '../../dashboard/logic/dashboard_format.dart' show formatCount;
import '../data/stream_analysis_controller.dart';
import '../logic/format.dart';
+import '../logic/meal_utils.dart' show isLikelyPartialDay;
import 'calorie_ring.dart';
-import 'dashed_divider.dart';
+import '../../../shared/widgets/top_toast.dart';
import 'empty_state.dart';
import 'entrances.dart';
import 'manual_log_sheet.dart';
import 'meal_entry.dart';
import 'meal_input.dart';
+import 'meal_mode_sheet.dart';
import 'persisted_meal_card.dart';
import 'streaming_entry.dart';
-import 'timeline_rail.dart';
const _uuid = Uuid();
@@ -46,14 +52,83 @@ class FeedArea extends ConsumerStatefulWidget {
class _FeedAreaState extends ConsumerState {
final MealInputController _inputController = MealInputController();
+
+ /// The selected composer mode (the pill on the input bar). Cheat meal ports
+ /// from web later; manual is a one-shot sheet, so the persistent mode is
+ /// effectively Normal for now.
+ MealLogMode _mode = MealLogMode.normal;
+
+ /// Scrolls the freshly-revealed answer into view (nothing scrolled it before).
+ final ScrollController _scrollController = ScrollController();
+
+ /// The text of the run currently in flight — restored to the composer if it
+ /// fails, so a failed analysis never destroys what the user typed.
+ String? _inFlightText;
+
+ /// A failed attempt, rendered as a feed card with "Try again" (terracotta).
+ String? _failedText;
+
+ /// The raw text of the just-revealed answer — shown as the morph card's Lora
+ /// quote so the confirmable card carries the user's own words, not a derived
+ /// meal name (the streaming→reveal→persisted object stays continuous).
+ String? _revealRawInput;
+
+ /// Inline error for a failed confirm (saving a meal) — not analysis errors,
+ /// which surface as the failed-attempt card.
String? _errorText;
+ /// Meals swiped away but still inside the undo window. They are filtered out
+ /// of the rendered feed (so a mid-window refetch can't resurrect the card)
+ /// without ever mutating the day cache — Undo just removes the id, and a
+ /// failed DELETE removes it too (the data was never locally changed).
+ final Set _pendingRemovalIds = {};
+
LoggingDayArgs get _dayArgs =>
LoggingDayArgs(widget.profile.userId, widget.date);
+ @override
+ void dispose() {
+ _scrollController.dispose();
+ super.dispose();
+ }
+
+ /// Bring the footer (streaming card / revealed answer) into view.
+ void _scrollToAnswer() {
+ WidgetsBinding.instance.addPostFrameCallback((_) {
+ if (!_scrollController.hasClients) return;
+ _scrollController.animateTo(
+ _scrollController.position.maxScrollExtent,
+ duration: const Duration(milliseconds: 400),
+ curve: const Cubic(0.16, 1, 0.3, 1),
+ );
+ });
+ }
+
void _submit(String text) {
- setState(() => _errorText = null);
+ // A second submit while an unconfirmed reveal is showing must not
+ // vaporize the first answer: that analysis is already stored server-side
+ // as pending, so refresh its origin day — it resurfaces as a
+ // pending-confirmation card.
+ final prior = ref.read(streamAnalysisProvider);
+ if (prior.status == StreamStatus.done && prior.analysisId != null) {
+ final originDate = prior.loggedDate ?? widget.date;
+ unawaited(
+ ref
+ .read(
+ loggingDayProvider(
+ LoggingDayArgs(widget.profile.userId, originDate),
+ ).notifier,
+ )
+ .refresh(),
+ );
+ }
+ setState(() {
+ _failedText = null;
+ _revealRawInput = null;
+ _inFlightText = text;
+ });
_inputController.clear();
+ _scrollToAnswer();
ref
.read(streamAnalysisProvider.notifier)
.analyze(
@@ -65,22 +140,147 @@ class _FeedAreaState extends ConsumerState {
);
}
- void _handleSuggestion(String s) {
- _inputController.setText(s);
- _inputController.focus();
+ void _retry() {
+ final text = _failedText;
+ if (text == null) return;
+ _submit(text);
+ }
+
+ /// The first step: choose how to log. Normal focuses the composer; Manual
+ /// opens the search-and-grams sheet (a one-shot, not a persistent mode); Cheat
+ /// meal ports from web later, so it just acknowledges for now.
+ Future _openModeSheet() async {
+ final picked = await showMealModeSheet(context, current: _mode);
+ if (picked == null || !mounted) return;
+ switch (picked) {
+ case MealLogMode.normal:
+ setState(() => _mode = MealLogMode.normal);
+ _inputController.focus();
+ case MealLogMode.manual:
+ showManualLogSheet(
+ context,
+ userId: widget.profile.userId,
+ date: widget.date,
+ );
+ case MealLogMode.cheat:
+ showTopToast(context, 'logging.modeSelector.comingSoon'.tr());
+ }
+ }
+
+ /// Trailing-swipe removal of a saved meal: the day visibly heals (the meal
+ /// drops out of the totals immediately) with a 5-second undo. The DELETE only
+ /// fires if the undo window closes. The day cache is never locally mutated —
+ /// the meal id sits in [_pendingRemovalIds] and is filtered out of the
+ /// rendered feed, so undo, refetch races, and failed deletes all resolve by
+ /// just adding/removing the id. No confirm modal; nothing is destroyed
+ /// within the grace window.
+ void _removeMeal(PersistedMeal meal) {
+ setState(() => _pendingRemovalIds.add(meal.id));
+
+ var undone = false;
+ // Top-anchored undo toast (every toast lives at the top now). Its future
+ // resolves on dismissal — by Undo, tap, or timeout — mirroring the old
+ // SnackBar.closed, so the delete still finalizes only after the window.
+ showTopToast(
+ context,
+ 'logging.mealRemoved'.tr(),
+ actionLabel: 'logging.undo'.tr(),
+ duration: const Duration(seconds: 5),
+ onAction: () {
+ undone = true;
+ if (mounted) {
+ setState(() => _pendingRemovalIds.remove(meal.id));
+ }
+ },
+ ).then((_) async {
+ if (undone || !mounted) return;
+ try {
+ await ref
+ .read(apiClientProvider)
+ .delete('/api/v1/meals/${Uri.encodeComponent(meal.id)}');
+ } catch (_) {
+ // The server rejected the delete — releasing the id makes the card
+ // reappear (the cache was never mutated), keeping the feed truthful.
+ ref.invalidate(loggingDayProvider(_dayArgs));
+ ref.invalidate(
+ dash.dashboardBundleProvider((
+ userId: widget.profile.userId,
+ date: widget.date,
+ )),
+ );
+ ref.invalidate(
+ dash.dashboardDayProvider((
+ userId: widget.profile.userId,
+ date: widget.date,
+ )),
+ );
+ if (mounted) {
+ setState(() {
+ _pendingRemovalIds.remove(meal.id);
+ _errorText = 'errors.internal'.tr();
+ });
+ }
+ return;
+ }
+ if (!mounted) return;
+ // The delete landed — heal every cache that carries this date before
+ // releasing the id, so the refetched day (sans meal) is what renders.
+ ref.invalidate(mealDatesProvider(widget.profile.userId));
+ ref.invalidate(
+ dash.dashboardBundleProvider((
+ userId: widget.profile.userId,
+ date: widget.date,
+ )),
+ );
+ ref.invalidate(
+ dash.dashboardDayProvider((
+ userId: widget.profile.userId,
+ date: widget.date,
+ )),
+ );
+ try {
+ await ref.read(loggingDayProvider(_dayArgs).notifier).refresh();
+ } catch (_) {
+ // The refetch failing doesn't un-delete the meal — keep the id
+ // filtered (a harmless no-op once a later fetch succeeds).
+ return;
+ }
+ if (mounted) setState(() => _pendingRemovalIds.remove(meal.id));
+ });
+ }
+
+ /// Pull-to-refresh: refetch the day + the meal-dates strip. Awaited so the
+ /// platform refresh control holds its spinner until the data settles.
+ Future _refresh() async {
+ ref.invalidate(mealDatesProvider(widget.profile.userId));
+ await ref.read(loggingDayProvider(_dayArgs).notifier).refresh();
}
void _onStreamChange(StreamAnalysisState? prev, StreamAnalysisState next) {
- // On completion: refetch the day + meal-dates so the stored analysis shows
- // as a confirmable card, then clear the local stream.
- if (next.status == StreamStatus.done && next.analysisId != null) {
- ref.invalidate(loggingDayProvider(_dayArgs));
- ref.invalidate(mealDatesProvider(widget.profile.userId));
- ref.read(streamAnalysisProvider.notifier).reset();
+ // On completion: hold the stream alive and let the streaming card morph in
+ // place into a confirmable answer (the reveal — per-row macros already real,
+ // totals count up, spinner row swaps for Edit/Confirm). One light impact
+ // marks the moment the answer lands; nothing unmounts. The refetch + reset
+ // happens only once the user confirms (_confirmReveal).
+ if (next.status == StreamStatus.done &&
+ next.analysisId != null &&
+ prev?.status != StreamStatus.done) {
+ _revealRawInput = _inFlightText;
+ _inFlightText = null;
+ HapticFeedback.lightImpact();
+ _scrollToAnswer();
}
- // On error: surface the message then reset.
+ // On error: never destroy the typed meal. Restore the raw text into the
+ // composer AND render the failed attempt as a feed card (Try again).
if (next.status == StreamStatus.error) {
- setState(() => _errorText = next.error ?? 'errors.internal'.tr());
+ final text = _inFlightText;
+ setState(() {
+ _failedText = text;
+ _inFlightText = null;
+ });
+ if (text != null && _inputController.getText().trim().isEmpty) {
+ _inputController.setText(text);
+ }
ref.read(streamAnalysisProvider.notifier).reset();
}
}
@@ -95,18 +295,51 @@ class _FeedAreaState extends ConsumerState {
final confirmPending = ref.watch(confirmMealProvider(profile.userId));
final day = dayAsync.valueOrNull;
- final isLoading = dayAsync.isLoading;
-
- final persistedMeals = [...(day?.persistedMeals ?? const [])]
- ..sort((a, b) => a.loggedAt.compareTo(b.loggedAt));
+ // Only show the skeleton on the FIRST load (no data yet). A refetch after
+ // confirm/delete keeps the previous data on screen (react-query's
+ // keepPreviousData), so saving slots the meal in instead of reloading the
+ // whole feed.
+ final isLoading = dayAsync.isLoading && day == null;
+
+ // Swiped-away meals inside the undo window are filtered out here (not
+ // removed from the cache), so totals heal immediately and a mid-window
+ // refetch cannot resurrect the card.
+ final persistedMeals =
+ (day?.persistedMeals ?? const [])
+ .where((m) => !_pendingRemovalIds.contains(m.id))
+ .toList()
+ ..sort((a, b) => a.loggedAt.compareTo(b.loggedAt));
final pendingConfirmations =
day?.pendingConfirmations ?? const [];
+ // Legacy meals can carry unknown macros — when any do, the daily summary
+ // can't be totalled honestly, so we show a quiet note instead of the ring.
+ final hasUnknownDailyMacros = persistedMeals.any(
+ (m) =>
+ m.nutrition.caloriesKcal == null ||
+ m.nutrition.proteinG == null ||
+ m.nutrition.carbohydrateG == null ||
+ m.nutrition.fatG == null,
+ );
+
+ // Pin the live stream/reveal cards to the day they were submitted on, so
+ // switching the selected date doesn't render them on the wrong day's feed.
+ final streamIsForThisDay = stream.loggedDate == widget.date;
+
final isStreaming =
+ streamIsForThisDay &&
stream.status != StreamStatus.idle &&
stream.status != StreamStatus.done &&
stream.status != StreamStatus.error;
+ // The completed-but-not-yet-confirmed answer, held in place as a morph of
+ // the streaming card (built from the locally-held stream.result).
+ final isRevealing =
+ streamIsForThisDay &&
+ stream.status == StreamStatus.done &&
+ stream.result != null &&
+ stream.analysisId != null;
+
final dailyCalories = round0(
persistedMeals.fold(
0,
@@ -126,13 +359,36 @@ class _FeedAreaState extends ConsumerState {
persistedMeals.fold(0, (s, m) => s + (m.nutrition.fatG ?? 0)),
);
+ final hasFailedAttempt = _failedText != null;
+
final isEmpty =
!isLoading &&
persistedMeals.isEmpty &&
pendingConfirmations.isEmpty &&
- !isStreaming;
-
- final hasFooterItems = pendingConfirmations.isNotEmpty || isStreaming;
+ !isStreaming &&
+ !isRevealing &&
+ !hasFailedAttempt;
+
+ final hasFooterItems =
+ pendingConfirmations.isNotEmpty ||
+ isStreaming ||
+ isRevealing ||
+ hasFailedAttempt;
+
+ // A past day with real meals but under half the target reads as
+ // under-logged; the trends set it aside, so we say so (and offer to fold it
+ // back in by adding what was missed). Only when nothing is mid-flight.
+ final isPastDay = widget.date.compareTo(todayDateString()) < 0;
+ final showPartialDayNotice =
+ isPastDay &&
+ !isLoading &&
+ !dayAsync.hasError &&
+ !hasUnknownDailyMacros &&
+ persistedMeals.isNotEmpty &&
+ pendingConfirmations.isEmpty &&
+ !isStreaming &&
+ !isRevealing &&
+ isLikelyPartialDay(dailyCalories.toDouble(), profile.calorieTarget);
final macroBars = [
_MacroBarData(
@@ -173,6 +429,19 @@ class _FeedAreaState extends ConsumerState {
child:
isLoading
? const _MacroSummarySkeleton()
+ : hasUnknownDailyMacros
+ // Some legacy meals have unknown macros — the day can't be
+ // totalled, so say so plainly instead of showing a wrong ring.
+ ? Align(
+ alignment: Alignment.centerLeft,
+ child: NhamText(
+ 'logging.feedArea.legacyMacroWarning'.tr(),
+ variant: NhamTextVariant.small,
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.eyebrow + 1,
+ ).copyWith(color: NhamColors.textMuted80),
+ ),
+ )
: Row(
children: [
Column(
@@ -184,7 +453,7 @@ class _FeedAreaState extends ConsumerState {
),
const SizedBox(height: 4), // gap-1
NhamText(
- '$dailyCalories / ${profile.calorieTarget} kcal',
+ '${formatCount(dailyCalories, context.locale.toString())} / ${formatCount(profile.calorieTarget, context.locale.toString())} kcal',
variant: NhamTextVariant.numCaption,
),
],
@@ -208,6 +477,21 @@ class _FeedAreaState extends ConsumerState {
),
),
+ // Under-logged past day: a quiet note that it's set aside from trends.
+ if (showPartialDayNotice)
+ Padding(
+ padding: const EdgeInsets.fromLTRB(
+ NhamSpacing.sp3,
+ 0,
+ NhamSpacing.sp3,
+ NhamSpacing.sp2,
+ ),
+ child: _PartialDayNotice(
+ calories: dailyCalories,
+ target: profile.calorieTarget,
+ ),
+ ),
+
// The card list.
Expanded(
child: _buildList(
@@ -217,9 +501,13 @@ class _FeedAreaState extends ConsumerState {
persistedMeals: persistedMeals,
pendingConfirmations: pendingConfirmations,
isStreaming: isStreaming,
+ isRevealing: isRevealing,
stream: stream,
hasFooterItems: hasFooterItems,
confirmPending: confirmPending,
+ failedText: _failedText,
+ onRetry: _retry,
+ onDiscardFailed: () => setState(() => _failedText = null),
),
),
@@ -241,7 +529,7 @@ class _FeedAreaState extends ConsumerState {
Padding(
padding: EdgeInsets.fromLTRB(
NhamSpacing.sp3,
- NhamSpacing.sp2,
+ NhamSpacing.sp3,
NhamSpacing.sp3,
bottomInset + NhamSpacing.sp2,
),
@@ -249,13 +537,10 @@ class _FeedAreaState extends ConsumerState {
controller: _inputController,
onSubmit: _submit,
onCancel: () => ref.read(streamAnalysisProvider.notifier).cancel(),
- onManualTap:
- () => showManualLogSheet(
- context,
- userId: widget.profile.userId,
- date: widget.date,
- ),
- disabled: stream.isAnalyzing,
+ analyzing: stream.isAnalyzing,
+ modeLabel: mealModeLabel(_mode),
+ modeIcon: mealModeIcon(_mode),
+ onModePressed: _openModeSheet,
),
),
],
@@ -269,9 +554,13 @@ class _FeedAreaState extends ConsumerState {
required List persistedMeals,
required List pendingConfirmations,
required bool isStreaming,
+ required bool isRevealing,
required StreamAnalysisState stream,
required bool hasFooterItems,
required bool confirmPending,
+ required String? failedText,
+ required VoidCallback onRetry,
+ required VoidCallback onDiscardFailed,
}) {
// Day fetch error → red alert card with retry (LoggingDayErrorState).
if (hasError && persistedMeals.isEmpty && !hasFooterItems) {
@@ -285,7 +574,7 @@ class _FeedAreaState extends ConsumerState {
if (persistedMeals.isEmpty) {
final Widget body;
if (isEmpty) {
- body = EmptyState(onSuggestion: _handleSuggestion);
+ body = const EmptyState();
} else if (isLoading) {
// 2-item card skeleton with the timeline rail (LoggingDaySkeleton).
body = const _LoggingDaySkeleton();
@@ -297,19 +586,27 @@ class _FeedAreaState extends ConsumerState {
// the footer still renders with the gutter padding.
if (hasFooterItems) {
return SingleChildScrollView(
+ controller: _scrollController,
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
padding: const EdgeInsets.only(
top: NhamSpacing.sp3,
bottom: NhamSpacing.sp3,
- left: NhamSpacing.sp3 + NhamSpacing.sp6,
+ left: NhamSpacing.sp3,
right: NhamSpacing.sp3,
),
child: _Footer(
pendingConfirmations: pendingConfirmations,
isStreaming: isStreaming,
+ isRevealing: isRevealing,
stream: stream,
+ streamingRawInput: _inFlightText,
confirmPending: confirmPending,
onConfirm: _confirm,
+ onConfirmReveal: _confirmReveal,
+ revealRawInput: _revealRawInput,
+ failedText: failedText,
+ onRetry: onRetry,
+ onDiscardFailed: onDiscardFailed,
),
);
}
@@ -322,7 +619,7 @@ class _FeedAreaState extends ConsumerState {
padding: const EdgeInsets.only(
top: NhamSpacing.sp3,
bottom: NhamSpacing.sp3,
- left: NhamSpacing.sp3 + NhamSpacing.sp6,
+ left: NhamSpacing.sp3,
right: NhamSpacing.sp3,
),
child: body,
@@ -338,35 +635,49 @@ class _FeedAreaState extends ConsumerState {
);
}
- return ListView.separated(
- keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
- padding: const EdgeInsets.only(
- top: NhamSpacing.sp3,
- bottom: NhamSpacing.sp3,
- left: NhamSpacing.sp3 + NhamSpacing.sp6, // padding + timeline gutter
- right: NhamSpacing.sp3,
- ),
- itemCount: persistedMeals.length + (hasFooterItems ? 1 : 0),
- separatorBuilder: (_, __) => const SizedBox(height: NhamSpacing.sp2),
- itemBuilder: (context, index) {
- if (index < persistedMeals.length) {
- final meal = persistedMeals[index];
- return FadeIn(
- key: ValueKey(meal.id),
- child: PersistedMealCard(
- meal: meal,
- isLast: !hasFooterItems && index == persistedMeals.length - 1,
- ),
+ return RefreshIndicator.adaptive(
+ onRefresh: _refresh,
+ color: NhamColors.accent,
+ child: ListView.separated(
+ controller: _scrollController,
+ physics: const AlwaysScrollableScrollPhysics(),
+ keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
+ padding: const EdgeInsets.only(
+ top: NhamSpacing.sp3,
+ bottom: NhamSpacing.sp3,
+ left: NhamSpacing.sp3,
+ right: NhamSpacing.sp3,
+ ),
+ itemCount: persistedMeals.length + (hasFooterItems ? 1 : 0),
+ separatorBuilder: (_, __) => const SizedBox(height: NhamSpacing.sp2),
+ itemBuilder: (context, index) {
+ if (index < persistedMeals.length) {
+ final meal = persistedMeals[index];
+ return FadeIn(
+ key: ValueKey(meal.id),
+ child: PersistedMealCard(
+ meal: meal,
+ isLast: !hasFooterItems && index == persistedMeals.length - 1,
+ onRemove: () => _removeMeal(meal),
+ ),
+ );
+ }
+ return _Footer(
+ pendingConfirmations: pendingConfirmations,
+ isStreaming: isStreaming,
+ isRevealing: isRevealing,
+ stream: stream,
+ streamingRawInput: _inFlightText,
+ confirmPending: confirmPending,
+ onConfirm: _confirm,
+ onConfirmReveal: _confirmReveal,
+ revealRawInput: _revealRawInput,
+ failedText: failedText,
+ onRetry: onRetry,
+ onDiscardFailed: onDiscardFailed,
);
- }
- return _Footer(
- pendingConfirmations: pendingConfirmations,
- isStreaming: isStreaming,
- stream: stream,
- confirmPending: confirmPending,
- onConfirm: _confirm,
- );
- },
+ },
+ ),
);
}
@@ -389,32 +700,94 @@ class _FeedAreaState extends ConsumerState {
},
],
);
+ // Saved — a success haptic + a top toast confirm the meal landed.
+ HapticFeedback.mediumImpact();
+ if (mounted) showTopToast(context, 'logging.feedArea.savedMeal'.tr());
} catch (_) {
// confirm() rolls the optimistic removal back on failure; surface the
// error too so it isn't silently swallowed.
if (mounted) setState(() => _errorText = 'errors.internal'.tr());
}
}
+
+ /// Confirm straight from the revealed answer (the morph card). The analysis is
+ /// already stored server-side (analysis_complete); confirming persists it. On
+ /// success we tear down the local stream so the revealed card hands off to the
+ /// refetched persisted card — one continuous object from typed words to saved
+ /// meal. On failure the stream stays so the user can retry the confirm.
+ Future _confirmReveal(
+ String analysisId,
+ List edits,
+ ) async {
+ // Confirm against the day the analysis was submitted on (the reveal is
+ // date-guarded to that day), so the ORIGIN date's caches are updated.
+ final originDate =
+ ref.read(streamAnalysisProvider).loggedDate ?? widget.date;
+ try {
+ await ref
+ .read(confirmMealProvider(widget.profile.userId).notifier)
+ .confirm(
+ analysisId: analysisId,
+ mealId: _uuid.v4(),
+ originDate: originDate,
+ edits:
+ edits.isEmpty
+ ? null
+ : [
+ for (final e in edits)
+ {
+ 'mealItemOrder': e.mealItemOrder,
+ 'newGrams': e.newGrams,
+ },
+ ],
+ );
+ HapticFeedback.mediumImpact();
+ if (mounted) showTopToast(context, 'logging.feedArea.savedMeal'.tr());
+ _revealRawInput = null;
+ ref.read(streamAnalysisProvider.notifier).reset();
+ } catch (_) {
+ if (mounted) setState(() => _errorText = 'errors.internal'.tr());
+ }
+ }
}
class _Footer extends StatelessWidget {
const _Footer({
required this.pendingConfirmations,
required this.isStreaming,
+ required this.isRevealing,
required this.stream,
+ required this.streamingRawInput,
required this.confirmPending,
required this.onConfirm,
+ required this.onConfirmReveal,
+ required this.revealRawInput,
+ required this.failedText,
+ required this.onRetry,
+ required this.onDiscardFailed,
});
final List pendingConfirmations;
final bool isStreaming;
+ final bool isRevealing;
+ final String? revealRawInput;
+
+ /// The just-typed text of the in-flight analysis, shown on the streaming card
+ /// immediately so the card carries the user's words while it analyzes.
+ final String? streamingRawInput;
final StreamAnalysisState stream;
final bool confirmPending;
final void Function(String analysisId, List edits)
onConfirm;
+ final void Function(String analysisId, List edits)
+ onConfirmReveal;
+ final String? failedText;
+ final VoidCallback onRetry;
+ final VoidCallback onDiscardFailed;
@override
Widget build(BuildContext context) {
+ final hasFailed = failedText != null;
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
@@ -424,7 +797,11 @@ class _Footer extends StatelessWidget {
rawInput: pendingConfirmations[i].rawInput,
parsedMeal: pendingConfirmations[i].parsedMeal,
busy: confirmPending,
- isLast: !isStreaming && i == pendingConfirmations.length - 1,
+ isLast:
+ !isStreaming &&
+ !isRevealing &&
+ !hasFailed &&
+ i == pendingConfirmations.length - 1,
onConfirm: (edits) => onConfirm(pendingConfirmations[i].id, edits),
),
if (isStreaming)
@@ -432,13 +809,230 @@ class _Footer extends StatelessWidget {
status: stream.status,
items: stream.items,
completedItems: stream.completedItems,
- isLast: true,
+ rawInput: streamingRawInput,
+ isLast: !hasFailed,
+ ),
+ // The completed answer in the streaming card's slot: per-row macros
+ // already real, totals count up, the spinner row swapped for
+ // Edit/Confirm. This IS a remount (StreamingEntry and MealEntry are
+ // different widgets) — the `revealing` flag softens the seam: the card
+ // background matches the streaming card's and the item rows crossfade
+ // in place instead of re-entering.
+ if (isRevealing)
+ MealEntry(
+ key: ValueKey('reveal-${stream.analysisId}'),
+ rawInput: revealRawInput ?? '',
+ parsedMeal: stream.result!,
+ busy: confirmPending,
+ revealing: true,
+ isLast: !hasFailed,
+ onConfirm: (edits) => onConfirmReveal(stream.analysisId!, edits),
+ ),
+ if (hasFailed)
+ _FailedAttemptCard(
+ rawInput: failedText!,
+ onRetry: onRetry,
+ onDiscard: onDiscardFailed,
),
],
);
}
}
+/// A failed analysis, rendered as a feed card so the attempt is never lost: the
+/// raw input as a Lora quote, a terracotta one-liner, and "Try again" as the
+/// primary action (with a quiet Discard). The raw text is also restored to the
+/// composer — this card is the visible record of what happened.
+class _FailedAttemptCard extends StatelessWidget {
+ const _FailedAttemptCard({
+ required this.rawInput,
+ required this.onRetry,
+ required this.onDiscard,
+ });
+
+ final String rawInput;
+ final VoidCallback onRetry;
+ final VoidCallback onDiscard;
+
+ @override
+ Widget build(BuildContext context) {
+ return Padding(
+ padding: const EdgeInsets.only(bottom: NhamSpacing.sp3),
+ child: Container(
+ padding: const EdgeInsets.all(NhamSpacing.sp4),
+ decoration: BoxDecoration(
+ color: NhamColors.surface,
+ borderRadius: BorderRadius.circular(NhamRadii.containerLg),
+ border: Border.all(color: NhamColors.borderSoft),
+ boxShadow: const [NhamShadows.sm],
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ NhamText(
+ rawInput,
+ variant: NhamTextVariant.mealQuote,
+ style: const TextStyle(fontSize: 17, height: 28 / 17),
+ ),
+ const SizedBox(height: NhamSpacing.sp3),
+ NhamText(
+ 'logging.failedAttempt.message'.tr(),
+ variant: NhamTextVariant.small,
+ style: const TextStyle(color: NhamColors.danger),
+ ),
+ const SizedBox(height: NhamSpacing.sp4),
+ Row(
+ children: [
+ Expanded(child: _RetryButton(onTap: onRetry)),
+ const SizedBox(width: NhamSpacing.sp2),
+ _DiscardButton(onTap: onDiscard),
+ ],
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+/// Primary "Try again" — solid umber, mirroring the confirm button's resting
+/// look (an honest re-run of the same meal).
+class _RetryButton extends StatefulWidget {
+ const _RetryButton({required this.onTap});
+ final VoidCallback onTap;
+
+ @override
+ State<_RetryButton> createState() => _RetryButtonState();
+}
+
+class _RetryButtonState extends State<_RetryButton> {
+ bool _pressed = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return Semantics(
+ button: true,
+ label: 'logging.failedAttempt.tryAgain'.tr(),
+ child: GestureDetector(
+ onTapDown: (_) => setState(() => _pressed = true),
+ onTapUp: (_) => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ onTap: widget.onTap,
+ child: AnimatedContainer(
+ duration: const Duration(milliseconds: 200),
+ padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 12),
+ decoration: BoxDecoration(
+ color: _pressed ? NhamColors.btnHover : NhamColors.btn,
+ borderRadius: BorderRadius.circular(NhamRadii.xl),
+ boxShadow: [_pressed ? NhamShadows.md : NhamShadows.sm],
+ ),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ const Icon(LucideIcons.refreshCw, size: 14, color: Colors.white),
+ const SizedBox(width: 6),
+ NhamText(
+ 'logging.failedAttempt.tryAgain'.tr(),
+ variant: NhamTextVariant.body,
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.xs,
+ ).copyWith(color: Colors.white),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+/// Quiet "Discard" — wires the previously-unused logging.discard string.
+class _DiscardButton extends StatefulWidget {
+ const _DiscardButton({required this.onTap});
+ final VoidCallback onTap;
+
+ @override
+ State<_DiscardButton> createState() => _DiscardButtonState();
+}
+
+class _DiscardButtonState extends State<_DiscardButton> {
+ bool _pressed = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return Semantics(
+ button: true,
+ label: 'logging.discard'.tr(),
+ child: GestureDetector(
+ onTapDown: (_) => setState(() => _pressed = true),
+ onTapUp: (_) => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ onTap: widget.onTap,
+ child: AnimatedContainer(
+ duration: const Duration(milliseconds: 150),
+ padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 12),
+ decoration: BoxDecoration(
+ color: _pressed ? NhamColors.hover : Colors.transparent,
+ borderRadius: BorderRadius.circular(NhamRadii.xl),
+ ),
+ child: NhamText(
+ 'logging.discard'.tr(),
+ variant: NhamTextVariant.body,
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.xs,
+ ).copyWith(color: NhamColors.textMuted),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+/// A past-day under-logged note: Lora-italic terracotta title + a DM Sans body
+/// that names the gap and invites folding the day back in. Ported from the web
+/// `PartialDayNotice` (the strings shipped translated but were never rendered).
+class _PartialDayNotice extends StatelessWidget {
+ const _PartialDayNotice({required this.calories, required this.target});
+
+ final int calories;
+ final int target;
+
+ @override
+ Widget build(BuildContext context) {
+ final locale = context.locale.toString();
+ return Container(
+ width: double.infinity,
+ padding: const EdgeInsets.all(NhamSpacing.sp3),
+ decoration: BoxDecoration(
+ color: NhamColors.surface,
+ borderRadius: BorderRadius.circular(NhamRadii.containerLg),
+ border: Border.all(color: NhamColors.borderSoft),
+ ),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ NhamText(
+ 'logging.feedArea.partialDayNotice.title'.tr(),
+ variant: NhamTextVariant.italicAccent,
+ style: const TextStyle(color: NhamColors.danger),
+ ),
+ const SizedBox(height: 4), // mt-1
+ NhamText(
+ 'logging.feedArea.partialDayNotice.body'.tr(
+ namedArgs: {
+ 'calories': formatCount(calories, locale),
+ 'target': formatCount(target, locale),
+ },
+ ),
+ variant: NhamTextVariant.small,
+ style: const TextStyle(color: NhamColors.textMuted),
+ ),
+ ],
+ ),
+ );
+ }
+}
+
class _MacroBarData {
const _MacroBarData(this.label, this.current, this.target, this.color);
final String label;
@@ -462,10 +1056,13 @@ class _MacroRow extends StatelessWidget {
return Row(
children: [
SizedBox(
- width: 48, // w-12
+ width: 76,
child: NhamText(
data.label,
variant: NhamTextVariant.macroLabel,
+ maxLines: 1,
+ softWrap: false,
+ overflow: TextOverflow.clip,
style: const TextStyle(color: NhamColors.textMuted70),
),
),
@@ -534,6 +1131,8 @@ class _MacroBarState extends State<_MacroBar>
@override
Widget build(BuildContext context) {
+ // Reduced motion: render the fill at its resting width, no sweep.
+ final reduceMotion = MediaQuery.disableAnimationsOf(context);
return ClipRRect(
borderRadius: BorderRadius.circular(NhamRadii.pill),
child: Container(
@@ -544,7 +1143,8 @@ class _MacroBarState extends State<_MacroBar>
builder:
(context, _) => FractionallySizedBox(
alignment: Alignment.centerLeft,
- widthFactor: (_anim.value / 100).clamp(0, 1),
+ widthFactor: ((reduceMotion ? widget.pct : _anim.value) / 100)
+ .clamp(0, 1),
child: Container(
decoration: BoxDecoration(
color: widget.color,
@@ -580,6 +1180,19 @@ class _PulseState extends State<_Pulse> with SingleTickerProviderStateMixin {
end: 1,
).animate(CurvedAnimation(parent: _c, curve: const Cubic(0.4, 0, 0.6, 1)));
+ @override
+ void didChangeDependencies() {
+ super.didChangeDependencies();
+ // Reduced motion: hold the skeleton fully visible instead of looping.
+ if (MediaQuery.disableAnimationsOf(context)) {
+ _c
+ ..stop()
+ ..value = 1;
+ } else if (!_c.isAnimating) {
+ _c.repeat(reverse: true);
+ }
+ }
+
@override
void dispose() {
_c.dispose();
@@ -657,20 +1270,9 @@ class _LoggingDaySkeleton extends StatelessWidget {
@override
Widget build(BuildContext context) {
- Widget ghostCard(bool isLast) => TimelineRail(
- isLast: isLast,
- dotChild: Container(
- width: 8,
- height: 8,
- decoration: BoxDecoration(
- shape: BoxShape.circle,
- color: NhamColors.surface,
- border: Border.all(color: NhamColors.accent60, width: 2),
- ),
- ),
- child: Padding(
- padding: const EdgeInsets.only(bottom: NhamSpacing.sp8), // gap-8
- child: Column(
+ Widget ghostCard(bool isLast) => Padding(
+ padding: const EdgeInsets.only(bottom: NhamSpacing.sp8), // gap-8
+ child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_bar(64, 12, const Color(0xB3E8D5B5)), // border/70 time bar
@@ -717,7 +1319,7 @@ class _LoggingDaySkeleton extends StatelessWidget {
),
),
const SizedBox(height: NhamSpacing.sp5), // mt-5
- const DashedDivider(color: NhamColors.borderHalf),
+ const Divider(height: 1, thickness: 1, color:NhamColors.borderHalf),
const SizedBox(height: NhamSpacing.sp3), // pt-3
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -731,25 +1333,20 @@ class _LoggingDaySkeleton extends StatelessWidget {
),
],
),
- ),
- );
+ );
return _Pulse(child: Column(children: [ghostCard(false), ghostCard(true)]));
}
}
-/// Day fetch error: a red alert card with an AlertCircle, title/desc, and a
-/// retry pill whose icon spins while refetching (LoggingDayErrorState).
+/// Day fetch error: a warm alert card — terracotta `nham-danger` accents on
+/// the cream surface (never literal reds, which break the palette on sight) —
+/// with a CircleAlert, title/desc, and a retry pill (LoggingDayErrorState).
class _LoggingDayErrorState extends StatelessWidget {
const _LoggingDayErrorState({required this.onRetry});
final VoidCallback onRetry;
- static const _red50 = Color(0xCCFEF2F2); // bg-red-50/80
- static const _red200 = Color(0xB3FECACA); // border-red-200/70
- static const _red600 = Color(0xFFDC2626);
- static const _red950 = Color(0xFF450A0A);
- static const _red900 = Color(0xCC7F1D1D); // red-900/80
- static const _red100 = Color(0xFFFEE2E2);
+ static const _dangerFill = Color(0x1AD37B69); // nham-danger @ 10%
@override
Widget build(BuildContext context) {
@@ -760,9 +1357,9 @@ class _LoggingDayErrorState extends StatelessWidget {
constraints: const BoxConstraints(maxWidth: 448), // max-w-md
padding: const EdgeInsets.all(NhamSpacing.sp4), // p-4
decoration: BoxDecoration(
- color: _red50,
+ color: NhamColors.surface,
borderRadius: BorderRadius.circular(NhamRadii.containerLg), // 2xl
- border: Border.all(color: _red200),
+ border: Border.all(color: NhamColors.borderSoft),
boxShadow: const [NhamShadows.sm],
),
child: Row(
@@ -771,9 +1368,9 @@ class _LoggingDayErrorState extends StatelessWidget {
const Padding(
padding: EdgeInsets.only(top: 2), // mt-0.5
child: Icon(
- Icons.error_outline, // lucide AlertCircle
+ LucideIcons.circleAlert, // lucide AlertCircle
size: 20,
- color: _red600,
+ color: NhamColors.danger,
),
),
const SizedBox(width: NhamSpacing.sp3), // gap-3
@@ -786,13 +1383,13 @@ class _LoggingDayErrorState extends StatelessWidget {
variant: NhamTextVariant.small,
style: NhamTextStyles.sansSemiBold(
fontSize: NhamFontSize.sm,
- ).copyWith(color: _red950),
+ ).copyWith(color: NhamColors.text),
),
const SizedBox(height: 4), // mt-1
NhamText(
'logging.feedArea.loadErrorDescription'.tr(),
variant: NhamTextVariant.small,
- style: const TextStyle(color: _red900),
+ style: const TextStyle(color: NhamColors.textMuted),
),
const SizedBox(height: NhamSpacing.sp3), // mt-3
_RetryPill(onRetry: onRetry),
@@ -822,16 +1419,16 @@ class _RetryPill extends StatelessWidget {
vertical: 8,
), // px-3.5 py-2
decoration: BoxDecoration(
- color: _LoggingDayErrorState._red100,
+ color: _LoggingDayErrorState._dangerFill,
borderRadius: BorderRadius.circular(NhamRadii.pill),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
- Icons.refresh, // lucide RefreshCw
+ LucideIcons.refreshCw, // lucide RefreshCw
size: 16,
- color: _LoggingDayErrorState._red950,
+ color: NhamColors.danger,
),
const SizedBox(width: NhamSpacing.sp2), // gap-2
NhamText(
@@ -839,7 +1436,7 @@ class _RetryPill extends StatelessWidget {
variant: NhamTextVariant.small,
style: NhamTextStyles.sansMedium(
fontSize: NhamFontSize.sm,
- ).copyWith(color: _LoggingDayErrorState._red950),
+ ).copyWith(color: NhamColors.danger),
),
],
),
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/manual_log_sheet.dart b/apps/mobile-flutter/lib/features/logging/widgets/manual_log_sheet.dart
index 0d73bce6..b67a6233 100644
--- a/apps/mobile-flutter/lib/features/logging/widgets/manual_log_sheet.dart
+++ b/apps/mobile-flutter/lib/features/logging/widgets/manual_log_sheet.dart
@@ -2,7 +2,9 @@ import 'dart:async';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../../models/ingredient.dart';
import '../../../shared/widgets/decimal_input.dart';
@@ -141,7 +143,7 @@ class _ManualLogSheetState extends ConsumerState {
),
IconButton(
onPressed: () => Navigator.of(context).pop(),
- icon: const Icon(Icons.close, size: 20),
+ icon: const Icon(LucideIcons.x, size: 20),
color: NhamColors.textMuted,
tooltip: 'common.cancel'.tr(),
),
@@ -162,7 +164,7 @@ class _ManualLogSheetState extends ConsumerState {
decoration: InputDecoration(
isDense: true,
prefixIcon: const Icon(
- Icons.search,
+ LucideIcons.search,
size: 18,
color: NhamColors.textMuted,
),
@@ -394,7 +396,7 @@ class _SelectedItemRow extends StatelessWidget {
),
IconButton(
onPressed: disabled ? null : onRemove,
- icon: const Icon(Icons.close, size: 16),
+ icon: const Icon(LucideIcons.x, size: 16),
color: NhamColors.textMuted50,
tooltip: 'logging.manualLogging.removeItem'.tr(),
visualDensity: VisualDensity.compact,
@@ -453,9 +455,20 @@ class _ResultsSection extends StatelessWidget {
),
data: (results) {
if (results.isEmpty) {
- // An empty recents list just means a new user — show nothing
- // rather than an alarming "no results".
- if (isRecents) return const SizedBox.shrink();
+ // An empty recents list just means a new user — nudge them to
+ // search rather than show an alarming "no results".
+ if (isRecents) {
+ return Padding(
+ padding: const EdgeInsets.symmetric(vertical: NhamSpacing.sp6),
+ child: Center(
+ child: NhamText(
+ 'logging.manualLogging.recentsHint'.tr(),
+ variant: NhamTextVariant.small,
+ style: const TextStyle(color: NhamColors.textMuted),
+ ),
+ ),
+ );
+ }
return Padding(
padding: const EdgeInsets.symmetric(vertical: NhamSpacing.sp4),
child: NhamText(
@@ -478,26 +491,45 @@ class _ResultsSection extends StatelessWidget {
}
}
-class _ResultTile extends StatelessWidget {
+class _ResultTile extends StatefulWidget {
const _ResultTile({required this.result, required this.onTap});
final IngredientSearchResult result;
final VoidCallback onTap;
+ @override
+ State<_ResultTile> createState() => _ResultTileState();
+}
+
+class _ResultTileState extends State<_ResultTile> {
+ bool _pressed = false;
+
+ void _onTap() {
+ HapticFeedback.selectionClick();
+ widget.onTap();
+ }
+
@override
Widget build(BuildContext context) {
+ final result = widget.result;
final kcal = result.per100g.caloriesKcal;
- return Material(
- color: Colors.transparent,
- child: InkWell(
- onTap: onTap,
- borderRadius: BorderRadius.circular(NhamRadii.md),
- child: Padding(
- padding: const EdgeInsets.symmetric(
- horizontal: NhamSpacing.sp1,
- vertical: NhamSpacing.sp2,
- ),
- child: Row(
+ return GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTapDown: (_) => setState(() => _pressed = true),
+ onTapUp: (_) => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ onTap: _onTap,
+ child: AnimatedContainer(
+ duration: const Duration(milliseconds: 120),
+ decoration: BoxDecoration(
+ color: _pressed ? NhamColors.hover40 : Colors.transparent,
+ borderRadius: BorderRadius.circular(NhamRadii.md),
+ ),
+ padding: const EdgeInsets.symmetric(
+ horizontal: NhamSpacing.sp2,
+ vertical: NhamSpacing.sp2,
+ ),
+ child: Row(
children: [
Expanded(
child: Column(
@@ -547,15 +579,14 @@ class _ResultTile extends StatelessWidget {
),
const SizedBox(width: NhamSpacing.sp1),
const Icon(
- Icons.add_circle_outline,
+ LucideIcons.circlePlus,
size: 18,
color: NhamColors.accentDark,
),
],
),
),
- ),
- );
+ );
}
}
@@ -565,6 +596,7 @@ class _TotalsSummary extends StatelessWidget {
final IngredientMacrosPer100g totals;
String _fmt(double? value) => value == null ? '—' : '${value.round()}';
+ String _fmtG(double? value) => value == null ? '—' : '${value.round()}g';
@override
Widget build(BuildContext context) {
@@ -577,7 +609,7 @@ class _TotalsSummary extends StatelessWidget {
),
const SizedBox(height: 2),
NhamText(
- 'P ${_fmt(totals.proteinG)} · C ${_fmt(totals.carbohydrateG)} · F ${_fmt(totals.fatG)}',
+ 'P: ${_fmtG(totals.proteinG)} · C: ${_fmtG(totals.carbohydrateG)} · F: ${_fmtG(totals.fatG)}',
variant: NhamTextVariant.numCaption,
style: const TextStyle(color: NhamColors.textMuted),
),
@@ -586,7 +618,7 @@ class _TotalsSummary extends StatelessWidget {
}
}
-class _SaveButton extends StatelessWidget {
+class _SaveButton extends StatefulWidget {
const _SaveButton({
required this.enabled,
required this.saving,
@@ -597,28 +629,46 @@ class _SaveButton extends StatelessWidget {
final bool saving;
final VoidCallback onTap;
+ @override
+ State<_SaveButton> createState() => _SaveButtonState();
+}
+
+class _SaveButtonState extends State<_SaveButton> {
+ bool _pressed = false;
+
+ void _onTap() {
+ HapticFeedback.lightImpact();
+ widget.onTap();
+ }
+
@override
Widget build(BuildContext context) {
+ final enabled = widget.enabled;
return Semantics(
button: true,
enabled: enabled,
label: 'logging.manualLogging.save'.tr(),
child: GestureDetector(
- onTap: enabled ? onTap : null,
- child: Opacity(
- opacity: enabled ? 1 : 0.4,
- child: Container(
- padding: const EdgeInsets.symmetric(
- horizontal: NhamSpacing.sp4,
- vertical: NhamSpacing.sp2,
- ),
- decoration: BoxDecoration(
- color: NhamColors.btn,
- borderRadius: BorderRadius.circular(NhamRadii.buttonXl),
- ),
- child:
- saving
- ? const SizedBox(
+ onTapDown: enabled ? (_) => setState(() => _pressed = true) : null,
+ onTapUp: enabled ? (_) => setState(() => _pressed = false) : null,
+ onTapCancel: enabled ? () => setState(() => _pressed = false) : null,
+ onTap: enabled ? _onTap : null,
+ child: AnimatedScale(
+ scale: _pressed ? 0.96 : 1,
+ duration: const Duration(milliseconds: 150),
+ child: Opacity(
+ opacity: enabled ? 1 : 0.4,
+ child: Container(
+ padding: const EdgeInsets.symmetric(
+ horizontal: NhamSpacing.sp5,
+ vertical: NhamSpacing.sp3,
+ ),
+ decoration: BoxDecoration(
+ color: _pressed ? NhamColors.btnHover : NhamColors.btn,
+ borderRadius: BorderRadius.circular(NhamRadii.buttonXl),
+ ),
+ child: widget.saving
+ ? const SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
@@ -626,12 +676,13 @@ class _SaveButton extends StatelessWidget {
color: Colors.white,
),
)
- : Text(
+ : Text(
'logging.manualLogging.save'.tr(),
- style: NhamTextStyles.sansMedium(
+ style: NhamTextStyles.sansSemiBold(
fontSize: NhamFontSize.sm,
).copyWith(color: Colors.white),
),
+ ),
),
),
),
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/meal_entry.dart b/apps/mobile-flutter/lib/features/logging/widgets/meal_entry.dart
index f62e82ae..a0269290 100644
--- a/apps/mobile-flutter/lib/features/logging/widgets/meal_entry.dart
+++ b/apps/mobile-flutter/lib/features/logging/widgets/meal_entry.dart
@@ -2,6 +2,8 @@ import 'dart:async';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:flutter/services.dart';
import '../../../models/meal.dart';
import '../../../shared/widgets/nham_text.dart';
@@ -10,9 +12,8 @@ import '../../../theme/nham_theme.dart';
import '../../../theme/nham_typography.dart';
import '../logic/format.dart';
import '../logic/meal_utils.dart';
-import 'dashed_divider.dart';
+import 'count_up.dart';
import 'entrances.dart';
-import 'timeline_rail.dart';
// Briefly block Confirm after a quantity tap so a fast double-tap on a stepper
// can't slip through and save before the user is done adjusting.
@@ -28,6 +29,7 @@ class MealEntry extends StatefulWidget {
required this.onConfirm,
this.busy = false,
this.isLast = false,
+ this.revealing = false,
});
final ParsedMeal parsedMeal;
@@ -36,6 +38,11 @@ class MealEntry extends StatefulWidget {
final bool busy;
final bool isLast;
+ /// True for the streaming-reveal morph's first mount: the totals row counts
+ /// up and the confirm CTA slides in as the spinner row slides out — the
+ /// continuation of the streaming card, not a fresh pop.
+ final bool revealing;
+
@override
State createState() => _MealEntryState();
}
@@ -46,6 +53,9 @@ class _MealEntryState extends State {
bool _editing = false;
bool _confirmCoolingDown = false;
Timer? _confirmTimer;
+ // After the first totals count-up, edits should jump rather than re-animate
+ // from zero — only the reveal's opening frame counts up.
+ late bool _countUp = widget.revealing;
@override
void dispose() {
@@ -54,7 +64,9 @@ class _MealEntryState extends State {
}
void _change(String itemId, double delta) {
+ HapticFeedback.selectionClick();
setState(() {
+ _countUp = false; // a manual edit snaps; only the reveal counts up
_items = applyQuantityChange(_items, _original, itemId, delta);
_confirmCoolingDown = true;
});
@@ -64,21 +76,26 @@ class _MealEntryState extends State {
});
}
- bool get _confirmDisabled =>
- widget.busy || (_editing && _confirmCoolingDown);
+ bool get _confirmDisabled => widget.busy || (_editing && _confirmCoolingDown);
+
+ /// Wrap the confirm CTA in a slide-up entrance only on the reveal morph's
+ /// opening frame (the spinner row has just slid out of the same slot).
+ Widget _maybeReveal(Widget child) =>
+ widget.revealing ? FadeInUp(offset: 12, child: child) : child;
@override
Widget build(BuildContext context) {
final totals = recalculateTotals(_items);
- return TimelineRail(
- isLast: widget.isLast,
- child: Padding(
- padding: const EdgeInsets.only(bottom: NhamSpacing.sp3), // mb-3
- child: Column(
+ return Padding(
+ padding: const EdgeInsets.only(bottom: NhamSpacing.sp3), // mb-3
+ child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_Card(
+ // The reveal replaces the streaming card in place — matching its
+ // surface background removes the background flip at the swap.
+ color: widget.revealing ? NhamColors.surface : NhamColors.elev,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
@@ -106,7 +123,7 @@ class _MealEntryState extends State {
],
),
const SizedBox(height: NhamSpacing.sp5), // mt-5
- const DashedDivider(color: NhamColors.border),
+ const Divider(height: 1, thickness: 1, color: NhamColors.borderFaint),
const SizedBox(height: NhamSpacing.sp4), // pt-4
Padding(
padding: const EdgeInsets.only(bottom: NhamSpacing.sp4),
@@ -114,21 +131,34 @@ class _MealEntryState extends State {
children: [
for (final (index, item) in _items.indexed)
// Web: each item enters opacity 0→1, x:-8→0, staggered
- // delay index*0.05s (meal-entry-item.tsx:32-35).
- FadeInLeft(
- key: ValueKey(item.id),
- offset: 8,
- delay: Duration(milliseconds: index * 50),
- child: _ItemRow(
- item: item,
- editing: _editing,
- onChange: _change,
+ // delay index*0.05s (meal-entry-item.tsx:32-35). On
+ // the reveal the rows were already on screen in the
+ // streaming card — crossfade in place, don't re-enter.
+ if (widget.revealing)
+ FadeIn(
+ key: ValueKey(item.id),
+ duration: const Duration(milliseconds: 150),
+ child: _ItemRow(
+ item: item,
+ editing: _editing,
+ onChange: _change,
+ ),
+ )
+ else
+ FadeInLeft(
+ key: ValueKey(item.id),
+ offset: 8,
+ delay: Duration(milliseconds: index * 50),
+ child: _ItemRow(
+ item: item,
+ editing: _editing,
+ onChange: _change,
+ ),
),
- ),
],
),
),
- const DashedDivider(color: NhamColors.borderHalf),
+ const Divider(height: 1, thickness: 1, color: NhamColors.borderFaint),
const SizedBox(height: NhamSpacing.sp3), // pt-3
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -148,8 +178,15 @@ class _MealEntryState extends State {
style: const TextStyle(color: NhamColors.textMuted),
),
const SizedBox(width: NhamSpacing.sp4), // gap-4
- NhamText(fmtKcal(totals.calories),
- variant: NhamTextVariant.numStrong),
+ CountUpText(
+ value: totals.calories,
+ // Reduced motion: the reveal total lands in place.
+ enabled:
+ _countUp &&
+ !MediaQuery.disableAnimationsOf(context),
+ format: (v) => fmtKcal(v),
+ variant: NhamTextVariant.numStrong,
+ ),
],
),
],
@@ -158,19 +195,22 @@ class _MealEntryState extends State {
),
),
const SizedBox(height: NhamSpacing.sp3), // mt-3
- _ConfirmButton(
- editing: _editing,
- disabled: _confirmDisabled,
- onTap: _confirmDisabled
- ? null
- : () => widget.onConfirm(
- deriveQuantityEdits(_items, _original),
- ),
+ // On reveal the CTA slides up into the slot the spinner row vacated.
+ _maybeReveal(
+ _ConfirmButton(
+ editing: _editing,
+ disabled: _confirmDisabled,
+ onTap:
+ _confirmDisabled
+ ? null
+ : () => widget.onConfirm(
+ deriveQuantityEdits(_items, _original),
+ ),
+ ),
),
],
),
- ),
- );
+ );
}
}
@@ -191,18 +231,27 @@ class _ItemRow extends StatelessWidget {
final step = isGrams ? 10.0 : 1.0;
final minusDisabled =
isGrams ? item.quantity <= minDishGrams : item.quantity <= 0;
+ // Stepping a count-unit item to 0 strikes the row — a clear "this one's
+ // out" cue before confirm drops it. Grams floor at minDishGrams, so only
+ // count units can reach 0.
+ final struck = !isGrams && item.quantity <= 0;
return AnimatedContainer(
duration: const Duration(milliseconds: 150),
- padding: editing
- ? const EdgeInsets.symmetric(vertical: 10, horizontal: 8) // py-2.5 px-2
- : const EdgeInsets.symmetric(vertical: 10),
- decoration: editing
- ? BoxDecoration(
- color: NhamColors.surface80, // surface/80
- borderRadius: BorderRadius.circular(NhamRadii.md), // rounded-md
- )
- : null,
+ padding:
+ editing
+ ? const EdgeInsets.symmetric(
+ vertical: 10,
+ horizontal: 8,
+ ) // py-2.5 px-2
+ : const EdgeInsets.symmetric(vertical: 10),
+ decoration:
+ editing
+ ? BoxDecoration(
+ color: NhamColors.surface80, // surface/80
+ borderRadius: BorderRadius.circular(NhamRadii.md), // rounded-md
+ )
+ : null,
child: Row(
children: [
Expanded(
@@ -214,11 +263,12 @@ class _ItemRow extends StatelessWidget {
child: Row(
children: [
_Stepper(
- icon: Icons.remove, // lucide Minus
+ icon: LucideIcons.minus, // lucide Minus
disabled: minusDisabled,
- onTap: minusDisabled
- ? null
- : () => onChange(item.id, -step),
+ onTap:
+ minusDisabled
+ ? null
+ : () => onChange(item.id, -step),
),
const SizedBox(width: 2), // gap-0.5
SizedBox(
@@ -227,13 +277,14 @@ class _ItemRow extends StatelessWidget {
item.quantity.round().toString(),
variant: NhamTextVariant.numStrong,
textAlign: TextAlign.center,
- style: NhamTextStyles.sansSemiBold(fontSize: 11)
- .copyWith(color: NhamColors.text),
+ style: NhamTextStyles.sansSemiBold(
+ fontSize: 11,
+ ).copyWith(color: NhamColors.text),
),
),
const SizedBox(width: 2),
_Stepper(
- icon: Icons.add, // lucide Plus
+ icon: LucideIcons.plus, // lucide Plus
onTap: () => onChange(item.id, step),
),
const SizedBox(width: NhamSpacing.sp2), // gap-2
@@ -246,26 +297,49 @@ class _ItemRow extends StatelessWidget {
variant: NhamTextVariant.itemName,
maxLines: 1,
overflow: TextOverflow.ellipsis,
+ style:
+ struck
+ ? const TextStyle(
+ decoration: TextDecoration.lineThrough,
+ decorationColor: NhamColors.textMuted,
+ color: NhamColors.textMuted,
+ )
+ : null,
),
),
],
),
),
const SizedBox(width: NhamSpacing.sp3), // gap-3
- Row(
- children: [
- NhamText('P:${fmtG(item.macros.protein)}',
- variant: NhamTextVariant.itemMacro, maxLines: 1),
- const SizedBox(width: NhamSpacing.sp2),
- NhamText('C:${fmtG(item.macros.carbs)}',
- variant: NhamTextVariant.itemMacro, maxLines: 1),
- const SizedBox(width: NhamSpacing.sp2),
- NhamText('F:${fmtG(item.macros.fat)}',
- variant: NhamTextVariant.itemMacro, maxLines: 1),
- const SizedBox(width: NhamSpacing.sp3), // gap-3
- NhamText(fmtKcal(item.macros.calories),
- variant: NhamTextVariant.itemCalories, maxLines: 1),
- ],
+ Opacity(
+ opacity: struck ? 0.4 : 1,
+ child: Row(
+ children: [
+ NhamText(
+ 'P: ${fmtG(item.macros.protein)}',
+ variant: NhamTextVariant.itemMacro,
+ maxLines: 1,
+ ),
+ const SizedBox(width: NhamSpacing.sp2),
+ NhamText(
+ 'C: ${fmtG(item.macros.carbs)}',
+ variant: NhamTextVariant.itemMacro,
+ maxLines: 1,
+ ),
+ const SizedBox(width: NhamSpacing.sp2),
+ NhamText(
+ 'F: ${fmtG(item.macros.fat)}',
+ variant: NhamTextVariant.itemMacro,
+ maxLines: 1,
+ ),
+ const SizedBox(width: NhamSpacing.sp3), // gap-3
+ NhamText(
+ fmtKcal(item.macros.calories),
+ variant: NhamTextVariant.itemCalories,
+ maxLines: 1,
+ ),
+ ],
+ ),
),
],
),
@@ -297,19 +371,27 @@ class _StepperState extends State<_Stepper> {
onTapUp: tappable ? (_) => setState(() => _pressed = false) : null,
onTapCancel: tappable ? () => setState(() => _pressed = false) : null,
onTap: widget.onTap,
- child: Opacity(
- opacity: widget.disabled ? 0.4 : 1, // opacity-40
- child: AnimatedContainer(
- duration: const Duration(milliseconds: 150), // transition-colors
- width: 28,
- height: 28,
- alignment: Alignment.center,
- decoration: BoxDecoration(
- color: _pressed ? NhamColors.hover : NhamColors.elev,
- borderRadius: BorderRadius.circular(NhamRadii.md),
- border: Border.all(color: NhamColors.borderSoft),
+ // 40pt tap target around the 28pt visual stepper (kept under 44 so two
+ // steppers + the count value still fit a narrow row without overflow).
+ child: SizedBox(
+ width: 40,
+ height: 40,
+ child: Center(
+ child: Opacity(
+ opacity: widget.disabled ? 0.4 : 1, // opacity-40
+ child: AnimatedContainer(
+ duration: const Duration(milliseconds: 150), // transition-colors
+ width: 28,
+ height: 28,
+ alignment: Alignment.center,
+ decoration: BoxDecoration(
+ color: _pressed ? NhamColors.hover : NhamColors.elev,
+ borderRadius: BorderRadius.circular(NhamRadii.md),
+ border: Border.all(color: NhamColors.borderSoft),
+ ),
+ child: Icon(widget.icon, size: 10, color: NhamColors.textMuted),
+ ),
),
- child: Icon(widget.icon, size: 10, color: NhamColors.textMuted),
),
),
);
@@ -343,7 +425,9 @@ class _EditPill extends StatelessWidget {
child: Container(
key: ValueKey(editing ? 'done' : 'edit'),
padding: const EdgeInsets.symmetric(
- vertical: 4, horizontal: 10), // py-1 px-2.5
+ vertical: 4,
+ horizontal: 10,
+ ), // py-1 px-2.5
decoration: BoxDecoration(
color: editing ? NhamColors.accent10 : Colors.transparent,
borderRadius: BorderRadius.circular(NhamRadii.pill),
@@ -355,7 +439,9 @@ class _EditPill extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
Icon(
- editing ? Icons.check : Icons.edit_outlined, // Check / Pencil
+ editing
+ ? LucideIcons.check
+ : LucideIcons.pencil, // Check / Pencil
size: 12,
color: editing ? NhamColors.accent : NhamColors.textMuted,
),
@@ -413,44 +499,56 @@ class _ConfirmButtonState extends State<_ConfirmButton> {
} else {
bg = active ? NhamColors.btnHover : NhamColors.btn;
}
- final BoxBorder? border = editing
- ? Border.all(
- color: active ? NhamColors.btn : NhamColors.btnBorderGhost,
- )
- : null;
- final List? shadow = editing
- ? null
- : [active ? NhamShadows.md : NhamShadows.sm];
-
- return Opacity(
- opacity: widget.disabled ? 0.5 : 1, // opacity-50
- child: GestureDetector(
- onTapDown: tappable ? (_) => setState(() => _pressed = true) : null,
- onTapUp: tappable ? (_) => setState(() => _pressed = false) : null,
- onTapCancel: tappable ? () => setState(() => _pressed = false) : null,
- onTap: widget.onTap,
- child: AnimatedContainer(
- duration: const Duration(milliseconds: 200), // transition-all duration-200
- padding:
- const EdgeInsets.symmetric(vertical: 10, horizontal: 12), // py-2.5 px-3
- decoration: BoxDecoration(
- color: bg,
- borderRadius: BorderRadius.circular(NhamRadii.xl), // rounded-xl
- border: border,
- boxShadow: shadow,
- ),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Icon(Icons.check, size: 14, color: fg),
- const SizedBox(width: 6), // gap-1.5
- NhamText(
- 'logging.confirm'.tr(),
- variant: NhamTextVariant.body,
- style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.xs)
- .copyWith(color: fg),
- ),
- ],
+ final BoxBorder? border =
+ editing
+ ? Border.all(
+ color: active ? NhamColors.btn : NhamColors.btnBorderGhost,
+ )
+ : null;
+ final List? shadow =
+ editing ? null : [active ? NhamShadows.md : NhamShadows.sm];
+
+ return Semantics(
+ button: true,
+ enabled: tappable,
+ excludeSemantics: true,
+ label: 'logging.confirm'.tr(),
+ onTap: widget.onTap,
+ child: Opacity(
+ opacity: widget.disabled ? 0.5 : 1, // opacity-50
+ child: GestureDetector(
+ onTapDown: tappable ? (_) => setState(() => _pressed = true) : null,
+ onTapUp: tappable ? (_) => setState(() => _pressed = false) : null,
+ onTapCancel: tappable ? () => setState(() => _pressed = false) : null,
+ onTap: widget.onTap,
+ child: AnimatedContainer(
+ duration: const Duration(
+ milliseconds: 200,
+ ), // transition-all duration-200
+ padding: const EdgeInsets.symmetric(
+ vertical: 10,
+ horizontal: 12,
+ ), // py-2.5 px-3
+ decoration: BoxDecoration(
+ color: bg,
+ borderRadius: BorderRadius.circular(NhamRadii.xl), // rounded-xl
+ border: border,
+ boxShadow: shadow,
+ ),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Icon(LucideIcons.check, size: 14, color: fg),
+ const SizedBox(width: 6), // gap-1.5
+ NhamText(
+ 'logging.confirm'.tr(),
+ variant: NhamTextVariant.body,
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.xs,
+ ).copyWith(color: fg),
+ ),
+ ],
+ ),
),
),
),
@@ -459,16 +557,18 @@ class _ConfirmButtonState extends State<_ConfirmButton> {
}
/// Card: rounded-2xl (16px), border/60 hairline, shadow.sm, padding 16.
+/// [color] lets the reveal match the streaming card's surface background.
class _Card extends StatelessWidget {
- const _Card({required this.child});
+ const _Card({required this.child, this.color = NhamColors.elev});
final Widget child;
+ final Color color;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(NhamSpacing.sp4),
decoration: BoxDecoration(
- color: NhamColors.elev,
+ color: color,
borderRadius: BorderRadius.circular(NhamRadii.containerLg),
border: Border.all(color: NhamColors.borderSoft),
boxShadow: const [NhamShadows.sm],
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/meal_input.dart b/apps/mobile-flutter/lib/features/logging/widgets/meal_input.dart
index 8ad8ac58..deea98bf 100644
--- a/apps/mobile-flutter/lib/features/logging/widgets/meal_input.dart
+++ b/apps/mobile-flutter/lib/features/logging/widgets/meal_input.dart
@@ -1,5 +1,7 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:flutter/services.dart';
import '../../../theme/nham_colors.dart';
import '../../../theme/nham_theme.dart';
@@ -26,18 +28,28 @@ class MealInput extends StatefulWidget {
required this.controller,
required this.onSubmit,
this.onCancel,
- this.onManualTap,
- this.disabled = false,
+ this.onModePressed,
+ this.modeLabel,
+ this.modeIcon,
+ this.analyzing = false,
});
final MealInputController controller;
final ValueChanged onSubmit;
final VoidCallback? onCancel;
- /// Opens the manual-log sheet (search foods + exact grams, no AI). Rendered
- /// as a ghost button beside submit when provided.
- final VoidCallback? onManualTap;
- final bool disabled;
+ /// While true the action button shows Stop (the run can be cancelled) — but
+ /// the field stays editable so a new meal can be typed mid-analysis (the
+ /// requestId-supersede mechanism handles overlap).
+ final bool analyzing;
+
+ /// Opens the mode selector (Normal / Cheat meal / Manual). Rendered as an
+ /// icon + label on the input bar's second line.
+ final VoidCallback? onModePressed;
+
+ /// Label + icon of the currently selected mode, shown on the mode control.
+ final String? modeLabel;
+ final IconData? modeIcon;
@override
State createState() => _MealInputState();
@@ -100,10 +112,13 @@ class _MealInputState extends State
);
}
- bool get _canSubmit => _controller.text.trim().isNotEmpty && !widget.disabled;
+ bool get _canSubmit => _controller.text.trim().isNotEmpty;
void _submit() {
- if (_canSubmit) widget.onSubmit(_controller.text);
+ if (_canSubmit) {
+ HapticFeedback.lightImpact();
+ widget.onSubmit(_controller.text);
+ }
}
@override
@@ -135,83 +150,84 @@ class _MealInputState extends State
child: child,
);
},
- child: Row(
- crossAxisAlignment: CrossAxisAlignment.end,
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ mainAxisSize: MainAxisSize.min,
children: [
- Expanded(
- child: ConstrainedBox(
- constraints: const BoxConstraints(
- minHeight: _minHeight,
- maxHeight: _maxHeight,
- ),
- child: Opacity(
- opacity: widget.disabled ? 0.5 : 1,
- child: TextField(
- controller: _controller,
- focusNode: _focusNode,
- enabled: !widget.disabled,
- maxLines: null,
- keyboardType: TextInputType.multiline,
- textInputAction: TextInputAction.newline,
- style: NhamTextStyles.sansRegular(
- fontSize: NhamFontSize.sm,
- height: 20 / 14, // leading-5 (20px) at text-sm (14px)
- ).copyWith(color: NhamColors.text),
- cursorColor: NhamColors.accent,
- decoration: InputDecoration(
- isCollapsed: true,
- border: InputBorder.none,
- enabledBorder: InputBorder.none,
- focusedBorder: InputBorder.none,
- disabledBorder: InputBorder.none,
- contentPadding: const EdgeInsets.symmetric(
- vertical: 6,
- ), // py-1.5
- hintText: 'logging.placeholder'.tr(),
- hintStyle: NhamTextStyles.sansRegular(
- fontSize: NhamFontSize.sm,
- height: 20 / 14,
- ).copyWith(color: NhamColors.placeholderMuted40),
- ),
- ),
+ // Line 1 — the composer field, full width.
+ ConstrainedBox(
+ constraints: const BoxConstraints(
+ minHeight: _minHeight,
+ maxHeight: _maxHeight,
+ ),
+ child: TextField(
+ controller: _controller,
+ focusNode: _focusNode,
+ maxLines: null,
+ keyboardType: TextInputType.multiline,
+ textInputAction: TextInputAction.newline,
+ style: NhamTextStyles.sansRegular(
+ fontSize: NhamFontSize.sm,
+ height: 20 / 14, // leading-5 (20px) at text-sm (14px)
+ ).copyWith(color: NhamColors.text),
+ cursorColor: NhamColors.accent,
+ decoration: InputDecoration(
+ isCollapsed: true,
+ border: InputBorder.none,
+ enabledBorder: InputBorder.none,
+ focusedBorder: InputBorder.none,
+ disabledBorder: InputBorder.none,
+ contentPadding: const EdgeInsets.symmetric(
+ vertical: 6,
+ ), // py-1.5
+ hintText: 'logging.composerPlaceholder'.tr(),
+ hintStyle: NhamTextStyles.sansRegular(
+ fontSize: NhamFontSize.sm,
+ height: 20 / 14,
+ ).copyWith(color: NhamColors.placeholderMuted40),
),
),
),
- const SizedBox(width: NhamSpacing.sp3),
- if (widget.onManualTap != null && !widget.disabled) ...[
- _GhostButton(
- icon: Icons.edit_note,
- label: 'logging.manualLogging.openSheet'.tr(),
- onTap: widget.onManualTap!,
- ),
- const SizedBox(width: NhamSpacing.sp2),
- ],
- if (widget.disabled && widget.onCancel != null)
- _ActionButton(
- icon: Icons.stop, // lucide Square (filled) → Icons.stop
- iconSize: 14,
- label: 'common.cancel'.tr(),
- onTap: widget.onCancel,
- )
- else
- _ActionButton(
- icon: Icons.arrow_upward, // lucide ArrowUp → Icons.arrow_upward
- iconSize: 16,
- label: 'logging.submit'.tr(),
- enabled: _canSubmit,
- onTap: _canSubmit ? _submit : null,
- ),
+ const SizedBox(height: NhamSpacing.sp2),
+ // Line 2 — mode selector on the left, send/stop on the right.
+ Row(
+ children: [
+ if (widget.onModePressed != null && !widget.analyzing)
+ _ModeButton(
+ icon: widget.modeIcon ?? LucideIcons.zap,
+ label: widget.modeLabel ??
+ 'logging.modeSelector.button'.tr(),
+ onTap: widget.onModePressed!,
+ ),
+ const Spacer(),
+ if (!_canSubmit && widget.analyzing && widget.onCancel != null)
+ _ActionButton(
+ icon: LucideIcons.square, // lucide Square (filled)
+ iconSize: 14,
+ label: 'common.cancel'.tr(),
+ onTap: widget.onCancel,
+ )
+ else
+ _ActionButton(
+ icon: LucideIcons.arrowUp, // lucide ArrowUp
+ iconSize: 16,
+ label: 'logging.submit'.tr(),
+ enabled: _canSubmit,
+ onTap: _canSubmit ? _submit : null,
+ ),
+ ],
+ ),
],
),
);
}
}
-/// 32x32 ghost button (umber outline, transparent bg) — the manual-log entry
-/// point sitting beside the submit button, mirroring the web's mode picker
-/// placement next to send.
-class _GhostButton extends StatelessWidget {
- const _GhostButton({
+/// The mode control on the input bar's second line — a minimal icon + label
+/// (no border, no chevron), like the Claude composer's "Auto". Tapping opens the
+/// mode chooser. 44pt tap target, scales 0.96 on press.
+class _ModeButton extends StatefulWidget {
+ const _ModeButton({
required this.icon,
required this.label,
required this.onTap,
@@ -221,23 +237,47 @@ class _GhostButton extends StatelessWidget {
final String label;
final VoidCallback onTap;
+ @override
+ State<_ModeButton> createState() => _ModeButtonState();
+}
+
+class _ModeButtonState extends State<_ModeButton> {
+ bool _pressed = false;
+
@override
Widget build(BuildContext context) {
return Semantics(
button: true,
- label: label,
+ label: widget.label,
child: GestureDetector(
- onTap: onTap,
- child: Container(
- width: 32,
- height: 32,
- alignment: Alignment.center,
- decoration: BoxDecoration(
- color: Colors.transparent,
- borderRadius: BorderRadius.circular(NhamRadii.md),
- border: Border.all(color: NhamColors.btnBorderGhost),
+ onTapDown: (_) => setState(() => _pressed = true),
+ onTapUp: (_) => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ onTap: widget.onTap,
+ child: SizedBox(
+ height: 44, // HIG tap target
+ child: Center(
+ child: AnimatedScale(
+ scale: _pressed ? 0.96 : 1,
+ duration: const Duration(milliseconds: 200),
+ child: Padding(
+ padding: const EdgeInsets.symmetric(horizontal: NhamSpacing.sp1),
+ child: Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ Icon(widget.icon, size: 18, color: NhamColors.btn),
+ const SizedBox(width: 6),
+ Text(
+ widget.label,
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.btn),
+ ),
+ ],
+ ),
+ ),
+ ),
),
- child: Icon(icon, size: 18, color: NhamColors.btn),
),
),
);
@@ -280,25 +320,32 @@ class _ActionButtonState extends State<_ActionButton> {
onTapUp: tappable ? (_) => setState(() => _pressed = false) : null,
onTapCancel: tappable ? () => setState(() => _pressed = false) : null,
onTap: widget.onTap,
- child: AnimatedScale(
- scale: _pressed ? 0.95 : 1,
- duration: const Duration(
- milliseconds: 200,
- ), // transition-all duration-200
- child: Opacity(
- opacity: widget.enabled ? 1 : 0.3,
- child: Container(
- width: 32,
- height: 32,
- alignment: Alignment.center,
- decoration: BoxDecoration(
- color: _pressed ? NhamColors.btnHover : NhamColors.btn,
- borderRadius: BorderRadius.circular(NhamRadii.md),
- ),
- child: Icon(
- widget.icon,
- size: widget.iconSize,
- color: Colors.white,
+ // 44pt minimum tap target (HIG) around the 32pt visual button.
+ child: SizedBox(
+ width: 44,
+ height: 44,
+ child: Center(
+ child: AnimatedScale(
+ scale: _pressed ? 0.95 : 1,
+ duration: const Duration(
+ milliseconds: 200,
+ ), // transition-all duration-200
+ child: Opacity(
+ opacity: widget.enabled ? 1 : 0.3,
+ child: Container(
+ width: 32,
+ height: 32,
+ alignment: Alignment.center,
+ decoration: BoxDecoration(
+ color: _pressed ? NhamColors.btnHover : NhamColors.btn,
+ borderRadius: BorderRadius.circular(NhamRadii.md),
+ ),
+ child: Icon(
+ widget.icon,
+ size: widget.iconSize,
+ color: Colors.white,
+ ),
+ ),
),
),
),
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/meal_mode_sheet.dart b/apps/mobile-flutter/lib/features/logging/widgets/meal_mode_sheet.dart
new file mode 100644
index 00000000..3295a7c2
--- /dev/null
+++ b/apps/mobile-flutter/lib/features/logging/widgets/meal_mode_sheet.dart
@@ -0,0 +1,240 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+
+import '../../../shared/widgets/nham_text.dart';
+import '../../../theme/nham_colors.dart';
+import '../../../theme/nham_theme.dart';
+import '../../../theme/nham_typography.dart';
+
+/// How a meal gets logged. `normal` = describe it in words (AI); `cheat` = the
+/// cheat-meal flow (ported from web later); `manual` = search foods + grams.
+enum MealLogMode { normal, cheat, manual }
+
+IconData mealModeIcon(MealLogMode mode) => switch (mode) {
+ MealLogMode.normal => LucideIcons.zap, // lightning
+ MealLogMode.cheat => LucideIcons.pizza,
+ MealLogMode.manual => LucideIcons.pencil,
+ };
+
+String mealModeLabel(MealLogMode mode) => switch (mode) {
+ MealLogMode.normal => 'logging.modeSelector.normal'.tr(),
+ MealLogMode.cheat => 'logging.modeSelector.cheat'.tr(),
+ MealLogMode.manual => 'logging.modeSelector.manual'.tr(),
+ };
+
+/// Opens the "select mode" chooser — the first step before the composer. Minimal
+/// list (bare colored icon · title · description · check), mirroring the Claude
+/// Code mobile mode selector. Returns the picked mode (or null if dismissed).
+Future showMealModeSheet(
+ BuildContext context, {
+ required MealLogMode current,
+}) {
+ return showModalBottomSheet(
+ context: context,
+ backgroundColor: Colors.transparent,
+ builder: (context) => _MealModeSheet(current: current),
+ );
+}
+
+class _MealModeSheet extends StatelessWidget {
+ const _MealModeSheet({required this.current});
+
+ final MealLogMode current;
+
+ @override
+ Widget build(BuildContext context) {
+ final bottomInset = MediaQuery.of(context).padding.bottom;
+ return Container(
+ decoration: const BoxDecoration(
+ color: NhamColors.surface,
+ borderRadius: BorderRadius.vertical(top: Radius.circular(NhamRadii.xxl)),
+ ),
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ // Header — X (close) on the left, centered title.
+ Padding(
+ padding: const EdgeInsets.fromLTRB(
+ NhamSpacing.sp2,
+ NhamSpacing.sp2,
+ NhamSpacing.sp2,
+ NhamSpacing.sp1,
+ ),
+ child: Row(
+ children: [
+ IconButton(
+ onPressed: () => Navigator.of(context).pop(),
+ icon: const Icon(LucideIcons.x, size: 22),
+ color: NhamColors.textMuted,
+ tooltip: 'common.cancel'.tr(),
+ ),
+ Expanded(
+ child: Center(
+ child: NhamText(
+ 'logging.modeSelector.title'.tr(),
+ variant: NhamTextVariant.body,
+ style: NhamTextStyles.sansSemiBold(
+ fontSize: NhamFontSize.md,
+ ).copyWith(color: NhamColors.text),
+ ),
+ ),
+ ),
+ // Mirror the X so the title stays optically centered.
+ const SizedBox(width: 48, height: 48),
+ ],
+ ),
+ ),
+ Padding(
+ padding: EdgeInsets.fromLTRB(
+ NhamSpacing.sp3,
+ NhamSpacing.sp2,
+ NhamSpacing.sp3,
+ bottomInset + NhamSpacing.sp4,
+ ),
+ child: Column(
+ children: [
+ _ModeRow(
+ icon: mealModeIcon(MealLogMode.normal),
+ iconColor: NhamColors.accentDark,
+ title: 'logging.modeSelector.normal'.tr(),
+ desc: 'logging.modeSelector.normalDesc'.tr(),
+ selected: current == MealLogMode.normal,
+ onTap: () => Navigator.of(context).pop(MealLogMode.normal),
+ ),
+ _ModeRow(
+ icon: mealModeIcon(MealLogMode.cheat),
+ iconColor: NhamColors.danger,
+ title: 'logging.modeSelector.cheat'.tr(),
+ desc: 'logging.modeSelector.cheatDesc'.tr(),
+ selected: current == MealLogMode.cheat,
+ soon: true,
+ onTap: () => Navigator.of(context).pop(MealLogMode.cheat),
+ ),
+ _ModeRow(
+ icon: mealModeIcon(MealLogMode.manual),
+ iconColor: NhamColors.text,
+ title: 'logging.modeSelector.manual'.tr(),
+ desc: 'logging.modeSelector.manualDesc'.tr(),
+ selected: current == MealLogMode.manual,
+ onTap: () => Navigator.of(context).pop(MealLogMode.manual),
+ ),
+ ],
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+}
+
+class _ModeRow extends StatefulWidget {
+ const _ModeRow({
+ required this.icon,
+ required this.iconColor,
+ required this.title,
+ required this.desc,
+ required this.selected,
+ required this.onTap,
+ this.soon = false,
+ });
+
+ final IconData icon;
+ final Color iconColor;
+ final String title;
+ final String desc;
+ final bool selected;
+ final bool soon;
+ final VoidCallback onTap;
+
+ @override
+ State<_ModeRow> createState() => _ModeRowState();
+}
+
+class _ModeRowState extends State<_ModeRow> {
+ bool _pressed = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTapDown: (_) => setState(() => _pressed = true),
+ onTapUp: (_) => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ onTap: () {
+ HapticFeedback.selectionClick();
+ widget.onTap();
+ },
+ child: AnimatedContainer(
+ duration: const Duration(milliseconds: 120),
+ padding: const EdgeInsets.symmetric(
+ horizontal: NhamSpacing.sp2,
+ vertical: NhamSpacing.sp3,
+ ),
+ decoration: BoxDecoration(
+ color: _pressed ? NhamColors.hover40 : Colors.transparent,
+ borderRadius: BorderRadius.circular(NhamRadii.container20),
+ ),
+ child: Row(
+ children: [
+ Icon(widget.icon, size: 24, color: widget.iconColor),
+ const SizedBox(width: NhamSpacing.sp3),
+ Expanded(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Row(
+ children: [
+ NhamText(
+ widget.title,
+ variant: NhamTextVariant.body,
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.lg,
+ ).copyWith(color: NhamColors.text),
+ ),
+ if (widget.soon) ...[
+ const SizedBox(width: NhamSpacing.sp2),
+ const _SoonBadge(),
+ ],
+ ],
+ ),
+ const SizedBox(height: 1),
+ NhamText(
+ widget.desc,
+ variant: NhamTextVariant.small,
+ style: const TextStyle(color: NhamColors.textMuted),
+ ),
+ ],
+ ),
+ ),
+ if (widget.selected)
+ const Icon(LucideIcons.check, size: 20, color: NhamColors.accent),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+class _SoonBadge extends StatelessWidget {
+ const _SoonBadge();
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
+ decoration: BoxDecoration(
+ color: NhamColors.hover,
+ borderRadius: BorderRadius.circular(999),
+ ),
+ child: Text(
+ 'logging.modeSelector.soon'.tr(),
+ style: NhamTextStyles.sansMedium(fontSize: 10).copyWith(
+ color: NhamColors.textMuted,
+ letterSpacing: 0.4,
+ ),
+ ),
+ );
+ }
+}
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/partial_yesterday_prompt.dart b/apps/mobile-flutter/lib/features/logging/widgets/partial_yesterday_prompt.dart
new file mode 100644
index 00000000..7883c14d
--- /dev/null
+++ b/apps/mobile-flutter/lib/features/logging/widgets/partial_yesterday_prompt.dart
@@ -0,0 +1,235 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+
+import '../../../shared/widgets/nham_text.dart';
+import '../../../theme/nham_colors.dart';
+import '../../../theme/nham_theme.dart';
+import '../../../theme/nham_typography.dart';
+import '../../dashboard/logic/dashboard_format.dart' show formatCount;
+import '../data/logging_models.dart';
+import '../data/logging_providers.dart';
+import '../logic/format.dart';
+import '../logic/meal_utils.dart' show isLikelyPartialDay;
+
+/// A once-daily nudge shown above today's feed when *yesterday* looks
+/// under-logged: it opens yesterday so the user can fold in whatever they
+/// missed. Ported from the web `partial-yesterday-prompt.tsx`.
+///
+/// Renders nothing when yesterday has no meals, has any meal with unknown
+/// calories (the calorie-based check can't be trusted), or is above the
+/// partial-day floor. Dismissal is session-scoped (see
+/// [yesterdayPromptDismissedProvider]).
+class PartialYesterdayPrompt extends ConsumerWidget {
+ const PartialYesterdayPrompt({
+ super.key,
+ required this.userId,
+ required this.yesterday,
+ required this.calorieTarget,
+ required this.onOpenDay,
+ });
+
+ final String userId;
+ final String yesterday;
+ final int calorieTarget;
+ final ValueChanged onOpenDay;
+
+ @override
+ Widget build(BuildContext context, WidgetRef ref) {
+ final dismissed = ref.watch(yesterdayPromptDismissedProvider(yesterday));
+ final dayAsync = ref.watch(
+ loggingDayProvider(LoggingDayArgs(userId, yesterday)),
+ );
+ final meals =
+ dayAsync.valueOrNull?.persistedMeals ?? const [];
+
+ final hasMeals = meals.isNotEmpty;
+ // A meal with unknown calories makes the day's total untrustworthy, so the
+ // partial-day check would be misleading — suppress the prompt then.
+ final hasUnknownCalories = meals.any(
+ (m) => m.nutrition.caloriesKcal == null,
+ );
+ final calories = round0(
+ meals.fold(0, (s, m) => s + (m.nutrition.caloriesKcal ?? 0)),
+ );
+
+ if (dismissed ||
+ !hasMeals ||
+ hasUnknownCalories ||
+ !isLikelyPartialDay(calories.toDouble(), calorieTarget)) {
+ return const SizedBox.shrink();
+ }
+
+ final locale = context.locale.toString();
+ final t = 'logging.feedArea.partialYesterdayPrompt';
+
+ return Padding(
+ padding: const EdgeInsets.fromLTRB(
+ NhamSpacing.sp3,
+ NhamSpacing.sp3,
+ NhamSpacing.sp3,
+ 0,
+ ),
+ child: Container(
+ padding: const EdgeInsets.all(NhamSpacing.sp3),
+ decoration: BoxDecoration(
+ color: NhamColors.surface,
+ borderRadius: BorderRadius.circular(NhamRadii.containerLg),
+ border: Border.all(color: NhamColors.borderSoft),
+ ),
+ child: Row(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Expanded(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ NhamText(
+ '$t.title'.tr(),
+ variant: NhamTextVariant.italicAccent,
+ style: const TextStyle(color: NhamColors.danger),
+ ),
+ const SizedBox(height: 4), // mt-1
+ NhamText(
+ '$t.body'.tr(
+ namedArgs: {
+ 'calories': formatCount(calories, locale),
+ 'target': formatCount(calorieTarget, locale),
+ },
+ ),
+ variant: NhamTextVariant.small,
+ style: const TextStyle(color: NhamColors.textMuted),
+ ),
+ const SizedBox(height: NhamSpacing.sp3), // mt-3
+ _OpenButton(
+ label: '$t.open'.tr(),
+ onTap: () => onOpenDay(yesterday),
+ ),
+ ],
+ ),
+ ),
+ const SizedBox(width: NhamSpacing.sp3),
+ _DismissButton(
+ label: '$t.dismiss'.tr(),
+ onTap:
+ () =>
+ ref
+ .read(
+ yesterdayPromptDismissedProvider(
+ yesterday,
+ ).notifier,
+ )
+ .state = true,
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+}
+
+/// "Open yesterday" — a ghost pill (ArrowLeft + label) whose border lightens to
+/// accent/50 on press, mirroring the web's hover treatment.
+class _OpenButton extends StatefulWidget {
+ const _OpenButton({required this.label, required this.onTap});
+ final String label;
+ final VoidCallback onTap;
+
+ @override
+ State<_OpenButton> createState() => _OpenButtonState();
+}
+
+class _OpenButtonState extends State<_OpenButton> {
+ bool _pressed = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return Semantics(
+ button: true,
+ label: widget.label,
+ child: GestureDetector(
+ onTap: widget.onTap,
+ onTapDown: (_) => setState(() => _pressed = true),
+ onTapUp: (_) => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ child: AnimatedContainer(
+ duration: const Duration(milliseconds: 150),
+ constraints: const BoxConstraints(minHeight: 32), // min-h-8
+ padding: const EdgeInsets.symmetric(
+ horizontal: NhamSpacing.sp3,
+ vertical: 6, // py-1.5
+ ),
+ decoration: BoxDecoration(
+ color: _pressed ? NhamColors.hover : Colors.transparent,
+ borderRadius: BorderRadius.circular(NhamRadii.pill),
+ border: Border.all(
+ color: _pressed ? NhamColors.accent50 : NhamColors.borderSoft,
+ ),
+ ),
+ child: Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ const Icon(
+ LucideIcons.arrowLeft,
+ size: 16,
+ color: NhamColors.text,
+ ),
+ const SizedBox(width: 8), // gap-2
+ NhamText(
+ widget.label,
+ variant: NhamTextVariant.body,
+ style: NhamTextStyles.sansMedium(
+ fontSize: NhamFontSize.sm,
+ ).copyWith(color: NhamColors.text),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+/// The dismiss affordance — a 32×32 X target whose fill tints to hover on press.
+class _DismissButton extends StatefulWidget {
+ const _DismissButton({required this.label, required this.onTap});
+ final String label;
+ final VoidCallback onTap;
+
+ @override
+ State<_DismissButton> createState() => _DismissButtonState();
+}
+
+class _DismissButtonState extends State<_DismissButton> {
+ bool _pressed = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return Semantics(
+ button: true,
+ label: widget.label,
+ child: GestureDetector(
+ onTap: widget.onTap,
+ onTapDown: (_) => setState(() => _pressed = true),
+ onTapUp: (_) => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ child: AnimatedContainer(
+ duration: const Duration(milliseconds: 150),
+ width: 32,
+ height: 32,
+ alignment: Alignment.center,
+ decoration: BoxDecoration(
+ color: _pressed ? NhamColors.hover : Colors.transparent,
+ shape: BoxShape.circle,
+ ),
+ child: Icon(
+ LucideIcons.x,
+ size: 16,
+ color: _pressed ? NhamColors.text : NhamColors.textMuted,
+ ),
+ ),
+ ),
+ );
+ }
+}
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/persisted_meal_card.dart b/apps/mobile-flutter/lib/features/logging/widgets/persisted_meal_card.dart
index 48f58130..a97f178c 100644
--- a/apps/mobile-flutter/lib/features/logging/widgets/persisted_meal_card.dart
+++ b/apps/mobile-flutter/lib/features/logging/widgets/persisted_meal_card.dart
@@ -1,13 +1,14 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:flutter/services.dart';
import '../../../shared/widgets/nham_text.dart';
import '../../../theme/nham_colors.dart';
import '../../../theme/nham_theme.dart';
+import '../../../theme/nham_typography.dart';
import '../data/logging_models.dart';
import '../logic/format.dart';
-import 'dashed_divider.dart';
-import 'timeline_rail.dart';
/// A saved meal in the day's feed — collapsed by default, expandable.
///
@@ -20,11 +21,16 @@ class PersistedMealCard extends StatefulWidget {
super.key,
required this.meal,
this.isLast = false,
+ this.onRemove,
});
final PersistedMeal meal;
final bool isLast;
+ /// iOS trailing-swipe removal (terracotta, never red) — fired when the card is
+ /// dismissed. Null disables the swipe.
+ final VoidCallback? onRemove;
+
@override
State createState() => _PersistedMealCardState();
}
@@ -54,6 +60,43 @@ class _PersistedMealCardState extends State
super.dispose();
}
+ /// Wrap the card in a trailing-swipe-to-remove Dismissible (terracotta, never
+ /// red) when [onRemove] is set; otherwise return the card untouched.
+ Widget _maybeDismissible(Widget card) {
+ final onRemove = widget.onRemove;
+ if (onRemove == null) return card;
+ return Dismissible(
+ key: ValueKey('dismiss-${widget.meal.id}'),
+ direction: DismissDirection.endToStart,
+ onDismissed: (_) {
+ HapticFeedback.mediumImpact();
+ onRemove();
+ },
+ background: Container(
+ alignment: Alignment.centerRight,
+ padding: const EdgeInsets.symmetric(horizontal: NhamSpacing.sp5),
+ decoration: BoxDecoration(
+ color: NhamColors.danger,
+ borderRadius: BorderRadius.circular(NhamRadii.containerLg),
+ ),
+ child: Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ const Icon(LucideIcons.trash2, size: 18, color: Colors.white),
+ const SizedBox(width: 6),
+ NhamText(
+ 'logging.remove'.tr(),
+ variant: NhamTextVariant.body,
+ style: NhamTextStyles.sansMedium(fontSize: NhamFontSize.xs)
+ .copyWith(color: Colors.white),
+ ),
+ ],
+ ),
+ ),
+ child: card,
+ );
+ }
+
@override
Widget build(BuildContext context) {
final meal = widget.meal;
@@ -67,43 +110,45 @@ class _PersistedMealCardState extends State
curve: Curves.easeInOut,
);
- return TimelineRail(
- isLast: widget.isLast,
- child: Padding(
- padding: const EdgeInsets.only(bottom: NhamSpacing.sp3), // mb-3
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
+ return Padding(
+ padding: const EdgeInsets.only(bottom: NhamSpacing.sp3), // mb-3
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
- // Time label sits ABOVE the card (sibling, mb-2) — not inside it.
- NhamText(
- time,
- variant: NhamTextVariant.timeLabel,
- ),
+ // Time as a centered divider on top of the card (── 1:04 AM ──) —
+ // no left timeline gutter, so the card gets the full row width.
+ _TimeDivider(time: time),
const SizedBox(height: NhamSpacing.sp2), // mb-2
+ _maybeDismissible(
_Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- // Header — only the chevron is the toggle target.
- Row(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Expanded(
- child: NhamText(
- meal.rawInput,
- variant: NhamTextVariant.mealQuote,
- style: const TextStyle(
- fontSize: 17,
- height: 28 / 17, // leading-7 (28px)
+ // Header — the whole row is the toggle target (not just the
+ // ~24px chevron), so the comfortable tap area spans the quote.
+ GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTap: _toggle,
+ child: Row(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Expanded(
+ child: NhamText(
+ meal.rawInput,
+ variant: NhamTextVariant.mealQuote,
+ style: const TextStyle(
+ fontSize: 17,
+ height: 28 / 17, // leading-7 (28px)
+ ),
),
),
- ),
- const SizedBox(width: NhamSpacing.sp3), // gap-3
- _ChevronToggle(
- expand: _expand,
- onTap: _toggle,
- ),
- ],
+ const SizedBox(width: NhamSpacing.sp3), // gap-3
+ _ChevronToggle(
+ expand: _expand,
+ onTap: _toggle,
+ ),
+ ],
+ ),
),
// Collapsed summary — fades + collapses height as it expands.
@@ -154,10 +199,39 @@ class _PersistedMealCardState extends State
],
),
),
+ ),
],
),
+ );
+ }
+}
+
+/// Centered time divider that sits on top of a meal card: a hairline, the time
+/// (── 1:04 AM ──), and a hairline — replacing the old left-rail time label.
+class _TimeDivider extends StatelessWidget {
+ const _TimeDivider({required this.time});
+
+ final String time;
+
+ @override
+ Widget build(BuildContext context) {
+ const line = Expanded(
+ child: Divider(
+ color: NhamColors.borderFaint,
+ height: 1,
+ thickness: 1,
),
);
+ return Row(
+ children: [
+ line,
+ Padding(
+ padding: const EdgeInsets.symmetric(horizontal: NhamSpacing.sp3),
+ child: NhamText(time, variant: NhamTextVariant.timeLabel),
+ ),
+ line,
+ ],
+ );
}
}
@@ -194,7 +268,7 @@ class _ChevronToggleState extends State<_ChevronToggle> {
child: RotationTransition(
turns: Tween(begin: 0, end: 0.5).animate(widget.expand),
child: Icon(
- Icons.keyboard_arrow_down, // lucide ChevronDown
+ LucideIcons.chevronDown, // lucide ChevronDown
size: 16,
color: _pressed ? NhamColors.text : NhamColors.textMuted60,
),
@@ -218,7 +292,7 @@ class _ExpandedDetails extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
- const DashedDivider(color: NhamColors.border),
+ const Divider(height: 1, thickness: 1, color: NhamColors.borderFaint),
const SizedBox(height: NhamSpacing.sp4), // pt-4
Padding(
padding: const EdgeInsets.only(bottom: NhamSpacing.sp4), // mb-4
@@ -240,13 +314,14 @@ class _ExpandedDetails extends StatelessWidget {
const SizedBox(width: NhamSpacing.sp3), // gap-3
Row(
children: [
- NhamText('P:${fmtG(group.nutrition.proteinG)}',
+ NhamText('P: ${fmtG(group.nutrition.proteinG)}',
variant: NhamTextVariant.macroTiny),
const SizedBox(width: NhamSpacing.sp2),
- NhamText('C:${fmtG(group.nutrition.carbohydrateG)}',
+ NhamText(
+ 'C: ${fmtG(group.nutrition.carbohydrateG)}',
variant: NhamTextVariant.macroTiny),
const SizedBox(width: NhamSpacing.sp2),
- NhamText('F:${fmtG(group.nutrition.fatG)}',
+ NhamText('F: ${fmtG(group.nutrition.fatG)}',
variant: NhamTextVariant.macroTiny),
const SizedBox(width: NhamSpacing.sp3), // gap-3
NhamText(
@@ -261,7 +336,7 @@ class _ExpandedDetails extends StatelessWidget {
],
),
),
- const DashedDivider(color: NhamColors.borderHalf),
+ const Divider(height: 1, thickness: 1, color: NhamColors.borderFaint),
const SizedBox(height: NhamSpacing.sp3), // pt-3
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/streaming_entry.dart b/apps/mobile-flutter/lib/features/logging/widgets/streaming_entry.dart
index e5cc2db4..bdf9fb0f 100644
--- a/apps/mobile-flutter/lib/features/logging/widgets/streaming_entry.dart
+++ b/apps/mobile-flutter/lib/features/logging/widgets/streaming_entry.dart
@@ -6,11 +6,8 @@ import '../../../models/streaming.dart';
import '../../../shared/widgets/nham_text.dart';
import '../../../theme/nham_colors.dart';
import '../../../theme/nham_theme.dart';
-import '../../../theme/nham_typography.dart';
import '../logic/format.dart';
-import 'dashed_divider.dart';
import 'entrances.dart';
-import 'timeline_rail.dart';
// Statuses that map to a localized phase label; others fall back to "Analyzing".
const _phaseKeys = {
@@ -30,21 +27,28 @@ String _phaseKey(StreamStatus status) => switch (status) {
_ => 'logging.streaming.analyzing',
};
-/// Live preview while the SSE analysis streams: completed items, then names
-/// still awaiting macros (the waterfall). Ported 1:1 from
-/// `apps/mobile/src/components/logging/feed/streaming-entry.tsx`.
+/// The analyzing card while the SSE analysis streams. The items still stream out
+/// like the original waterfall — names appear as they're detected, then carry
+/// real macros once resolved — but there is a SINGLE loading state: the current
+/// step (spinner + phase label) at the bottom. No skeleton placeholder bars.
class StreamingEntry extends StatefulWidget {
const StreamingEntry({
super.key,
required this.status,
required this.items,
required this.completedItems,
+ this.rawInput,
this.isLast = false,
});
final StreamStatus status;
final List items;
final List completedItems;
+
+ /// The user's just-typed text, shown as a Lora quote at the top of the card
+ /// the instant the meal is sent — so the card carries their words while it
+ /// analyzes (matches the web).
+ final String? rawInput;
final bool isLast;
@override
@@ -52,30 +56,29 @@ class StreamingEntry extends StatefulWidget {
}
class _StreamingEntryState extends State
- with TickerProviderStateMixin {
+ with SingleTickerProviderStateMixin {
// Continuous 360° spin (CSS animate-spin equivalent), 1000ms linear.
late final AnimationController _spin = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1000),
)..repeat();
- // Pulse 0.5 → 1 → 0.5 for skeleton bars / the timeline dot, 2000ms.
- late final AnimationController _pulse = AnimationController(
- vsync: this,
- duration: const Duration(milliseconds: 2000),
- )..repeat(reverse: true);
- // Tailwind animate-pulse: opacity 1→.5→1 over 2s cubic-bezier(0.4,0,0.6,1).
- late final Animation _pulseOpacity = Tween(
- begin: 0.5,
- end: 1,
- ).animate(
- CurvedAnimation(parent: _pulse, curve: const Cubic(0.4, 0, 0.6, 1)),
- );
+ @override
+ void didChangeDependencies() {
+ super.didChangeDependencies();
+ // Reduced motion: rest the arc instead of spinning.
+ if (MediaQuery.disableAnimationsOf(context)) {
+ _spin
+ ..stop()
+ ..value = 0;
+ } else if (!_spin.isAnimating) {
+ _spin.repeat();
+ }
+ }
@override
void dispose() {
_spin.dispose();
- _pulse.dispose();
super.dispose();
}
@@ -83,122 +86,68 @@ class _StreamingEntryState extends State
Widget build(BuildContext context) {
final completedNames =
widget.completedItems.map((i) => i.name.toLowerCase()).toSet();
+ // Names detected but not yet carrying macros — the streaming waterfall.
final pendingNames = widget.items
.where((n) => !completedNames.contains(n.toLowerCase()))
.toList();
+
final phaseLabel = _phaseKeys.contains(widget.status)
? _phaseKey(widget.status).tr()
: 'logging.streaming.analyzing'.tr();
- // Anonymous skeleton rows pad the list up to DEFAULT_SKELETON_COUNT=3 while
- // the phase is still early (streaming-meal-entry.tsx:72-75).
- const defaultSkeletonCount = 3;
- final totalKnown = widget.completedItems.length + pendingNames.length;
- final anonymousCount = (defaultSkeletonCount - totalKnown).clamp(0, 3);
- final showAnonymous = widget.status != StreamStatus.assembling &&
- widget.status != StreamStatus.done;
-
- return TimelineRail(
- isLast: widget.isLast,
- dotChild: FadeTransition(
- opacity: _pulseOpacity,
- child: const _StreamingDot(),
- ),
- child: Padding(
- padding: const EdgeInsets.only(bottom: NhamSpacing.sp3), // mb-3
- child: _Card(
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- // Items block — mb-4 with 4px row gaps.
- Padding(
- padding: const EdgeInsets.only(bottom: NhamSpacing.sp4),
- child: Column(
- children: [
- for (var i = 0; i < widget.completedItems.length; i++)
- FadeInLeft(
- key: ValueKey(widget.completedItems[i].id),
- offset: 8,
- delay: Duration(milliseconds: i * 40),
- child: _CompletedRow(item: widget.completedItems[i]),
- ),
- for (var i = 0; i < pendingNames.length; i++)
- FadeInLeft(
- key: ValueKey('${pendingNames[i]}-$i'),
- offset: 8,
- delay: Duration(
- milliseconds:
- (widget.completedItems.length + i) * 80),
- child: _PendingRow(
- name: pendingNames[i],
- pulse: _pulseOpacity,
- ),
- ),
- if (showAnonymous)
- for (var i = 0; i < anonymousCount; i++)
- FadeInLeft(
- key: ValueKey('skel-$i'),
- offset: 8,
- delay: Duration(
- milliseconds: (totalKnown + i) * 80),
- child: _AnonymousRow(
- // name-bar width 80 + index*20px.
- nameWidth: 80 + (totalKnown + i) * 20,
- pulse: _pulseOpacity,
- ),
- ),
- ],
- ),
- ),
+ final hasQuote =
+ widget.rawInput != null && widget.rawInput!.trim().isNotEmpty;
+ final hasItems =
+ widget.completedItems.isNotEmpty || pendingNames.isNotEmpty;
- // Totals skeleton.
- const DashedDivider(color: NhamColors.borderHalf),
- const SizedBox(height: NhamSpacing.sp3), // pt-3
- Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- NhamText(
- 'logging.mealEntry.total'.tr(),
- variant: NhamTextVariant.itemName,
- style: NhamTextStyles.sansBold(fontSize: NhamFontSize.detail)
- .copyWith(color: NhamColors.text),
- ),
- Row(
- children: [
- _Skeleton(width: 40, height: 14, pulse: _pulseOpacity),
- const SizedBox(width: NhamSpacing.sp2),
- _Skeleton(width: 40, height: 14, pulse: _pulseOpacity),
- const SizedBox(width: NhamSpacing.sp2),
- _Skeleton(width: 40, height: 14, pulse: _pulseOpacity),
- const SizedBox(width: NhamSpacing.sp4), // gap-4
- _Skeleton(
- width: 56,
- height: 16,
- pulse: _pulseOpacity,
- strong: true,
- ),
- ],
- ),
- ],
- ),
-
- // Stage indicator — spinner + phase label.
- const SizedBox(height: NhamSpacing.sp3), // mt-3
- Row(
- children: [
- RotationTransition(turns: _spin, child: const _Spinner()),
- const SizedBox(width: NhamSpacing.sp2), // gap-2
- NhamText(phaseLabel, variant: NhamTextVariant.phaseLabel),
- ],
+ return Padding(
+ padding: const EdgeInsets.only(bottom: NhamSpacing.sp3), // mb-3
+ child: _Card(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ // The typed text as a Lora quote — shown instantly.
+ if (hasQuote) ...[
+ NhamText(
+ widget.rawInput!,
+ variant: NhamTextVariant.mealQuote,
+ style: const TextStyle(fontSize: 17, height: 28 / 17),
),
+ const SizedBox(height: NhamSpacing.sp2),
],
- ),
+ // Items stream out: resolved rows first, then detected names.
+ if (hasItems) ...[
+ for (var i = 0; i < widget.completedItems.length; i++)
+ FadeInLeft(
+ key: ValueKey(widget.completedItems[i].id),
+ offset: 8,
+ delay: Duration(milliseconds: i * 40),
+ child: _CompletedRow(item: widget.completedItems[i]),
+ ),
+ for (var i = 0; i < pendingNames.length; i++)
+ FadeInLeft(
+ key: ValueKey('${pendingNames[i]}-$i'),
+ offset: 8,
+ child: _PendingNameRow(name: pendingNames[i]),
+ ),
+ const SizedBox(height: NhamSpacing.sp1),
+ ],
+ // The ONE loading state: the current step.
+ Row(
+ children: [
+ RotationTransition(turns: _spin, child: const _Spinner()),
+ const SizedBox(width: NhamSpacing.sp2), // gap-2
+ NhamText(phaseLabel, variant: NhamTextVariant.phaseLabel),
+ ],
+ ),
+ ],
),
),
);
}
}
+/// A resolved item: name + real P/C/F + calories.
class _CompletedRow extends StatelessWidget {
const _CompletedRow({required this.item});
final MealItem item;
@@ -206,7 +155,7 @@ class _CompletedRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
- padding: const EdgeInsets.symmetric(vertical: 10), // py-2.5
+ padding: const EdgeInsets.symmetric(vertical: 8), // py-2
child: Row(
children: [
Expanded(
@@ -235,103 +184,21 @@ class _CompletedRow extends StatelessWidget {
}
}
-class _PendingRow extends StatelessWidget {
- const _PendingRow({required this.name, required this.pulse});
+/// A detected-but-unresolved item: just the name, muted (its macros are still
+/// streaming). No skeleton bars — the bottom step line is the only loading cue.
+class _PendingNameRow extends StatelessWidget {
+ const _PendingNameRow({required this.name});
final String name;
- final Animation pulse;
@override
Widget build(BuildContext context) {
return Padding(
- padding: const EdgeInsets.symmetric(vertical: 10), // py-2.5
- child: Row(
- children: [
- Expanded(
- child: NhamText(name,
- variant: NhamTextVariant.itemName, maxLines: 1),
- ),
- const SizedBox(width: NhamSpacing.sp3),
- Row(
- children: [
- _Skeleton(width: 36, height: 12, pulse: pulse),
- const SizedBox(width: NhamSpacing.sp2),
- _Skeleton(width: 36, height: 12, pulse: pulse),
- const SizedBox(width: NhamSpacing.sp2),
- _Skeleton(width: 36, height: 12, pulse: pulse),
- const SizedBox(width: NhamSpacing.sp3), // gap-3
- _Skeleton(width: 48, height: 14, pulse: pulse, strong: true),
- ],
- ),
- ],
- ),
- );
- }
-}
-
-/// An anonymous (un-named) skeleton row: a name-placeholder bar instead of a
-/// real name, plus the macro/calorie skeleton bars (meal-entry-item-skeleton).
-class _AnonymousRow extends StatelessWidget {
- const _AnonymousRow({required this.nameWidth, required this.pulse});
- final double nameWidth;
- final Animation pulse;
-
- @override
- Widget build(BuildContext context) {
- return Padding(
- padding: const EdgeInsets.symmetric(vertical: 10), // py-2.5
- child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- // Name placeholder bar: h-3.5 border/40, width 80+index*20.
- _Skeleton(
- width: nameWidth,
- height: 14,
- pulse: pulse,
- strong: true,
- ),
- const SizedBox(width: NhamSpacing.sp3),
- Row(
- children: [
- _Skeleton(width: 24, height: 12, pulse: pulse), // w-6 border/30
- const SizedBox(width: NhamSpacing.sp2),
- _Skeleton(width: 24, height: 12, pulse: pulse),
- const SizedBox(width: NhamSpacing.sp2),
- _Skeleton(width: 24, height: 12, pulse: pulse),
- const SizedBox(width: NhamSpacing.sp3), // gap-3
- _Skeleton(width: 48, height: 14, pulse: pulse, strong: true),
- ],
- ),
- ],
- ),
- );
- }
-}
-
-/// A pulsing skeleton bar. `strong` uses the border/40 fill, else border/30.
-class _Skeleton extends StatelessWidget {
- const _Skeleton({
- required this.width,
- required this.height,
- required this.pulse,
- this.strong = false,
- });
-
- final double width;
- final double height;
- final Animation pulse;
- final bool strong;
-
- @override
- Widget build(BuildContext context) {
- return FadeTransition(
- opacity: pulse,
- child: Container(
- width: width,
- height: height,
- decoration: BoxDecoration(
- color: strong ? NhamColors.borderBiscotti40 : NhamColors.borderFaint,
- borderRadius: BorderRadius.circular(NhamRadii.sm), // rounded-sm
- ),
+ padding: const EdgeInsets.symmetric(vertical: 8), // py-2
+ child: NhamText(
+ name,
+ variant: NhamTextVariant.itemName,
+ maxLines: 1,
+ style: const TextStyle(color: NhamColors.textMuted),
),
);
}
@@ -390,23 +257,3 @@ class _Card extends StatelessWidget {
);
}
}
-
-/// The streaming timeline dot: h-2 w-2, 2px accent border, accent/30 FILL,
-/// animate-pulse (streaming-meal-entry.tsx:93). Differs from the white-fill
-/// persisted dot.
-class _StreamingDot extends StatelessWidget {
- const _StreamingDot();
-
- @override
- Widget build(BuildContext context) {
- return Container(
- width: 8,
- height: 8,
- decoration: BoxDecoration(
- shape: BoxShape.circle,
- color: NhamColors.accent30, // accent @30% fill
- border: Border.all(color: NhamColors.accent, width: 2),
- ),
- );
- }
-}
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/timeline_picker.dart b/apps/mobile-flutter/lib/features/logging/widgets/timeline_picker.dart
index dc9b9cad..6df5fa43 100644
--- a/apps/mobile-flutter/lib/features/logging/widgets/timeline_picker.dart
+++ b/apps/mobile-flutter/lib/features/logging/widgets/timeline_picker.dart
@@ -1,99 +1,304 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
+import 'package:flutter/services.dart';
import '../../../shared/widgets/nham_text.dart';
+import '../../../shell/app_header.dart';
import '../../../theme/nham_colors.dart';
import '../../../theme/nham_theme.dart';
import '../../../theme/nham_typography.dart';
import '../logic/timeline_utils.dart';
-/// Chip (collapsed) vs. week-strip (expanded) date picker. The expanded/chip
-/// state is lifted to the parent so the header can hand the strip the full row.
-///
-/// Ported 1:1 from
-/// `apps/mobile/src/components/logging/input/timeline-picker.tsx`.
-class TimelinePicker extends StatefulWidget {
- const TimelinePicker({
+/// The collapsed date pill that lives in the app header. Tapping it asks the
+/// parent to open the [TimelineStrip] as a dropdown overlay — the chip itself
+/// never changes size, so the feed below never shifts.
+class TimelineChip extends StatefulWidget {
+ const TimelineChip({
+ super.key,
+ required this.dates,
+ required this.selectedDate,
+ required this.onTap,
+ });
+
+ final List dates;
+ final String selectedDate;
+ final VoidCallback onTap;
+
+ @override
+ State createState() => _TimelineChipState();
+}
+
+class _TimelineChipState extends State {
+ bool _pressed = false;
+
+ @override
+ Widget build(BuildContext context) {
+ final locale = context.locale.toString();
+ final hasMeal = widget.dates.contains(widget.selectedDate);
+ final formatted = formatTimelineDayLabel(widget.selectedDate, locale);
+
+ return GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTapDown: (_) => setState(() => _pressed = true),
+ onTapUp: (_) => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ onTap: widget.onTap,
+ child: AnimatedScale(
+ scale: _pressed ? 0.96 : 1,
+ duration: const Duration(milliseconds: 150),
+ curve: Curves.easeOut,
+ child: Container(
+ height: 44,
+ constraints: const BoxConstraints(maxWidth: 288), // max-w-72
+ padding: const EdgeInsets.symmetric(horizontal: NhamSpacing.sp4),
+ decoration: BoxDecoration(
+ color: NhamColors.surface,
+ borderRadius: BorderRadius.circular(NhamRadii.pill),
+ border: Border.all(color: NhamColors.borderHalf), // border/50
+ ),
+ child: Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ const Icon(LucideIcons.calendar,
+ size: 14, color: NhamColors.accent),
+ const SizedBox(width: NhamSpacing.sp2), // gap-2
+ Flexible(
+ child: NhamText(
+ formatted,
+ variant: NhamTextVariant.chipText,
+ maxLines: 1,
+ overflow: TextOverflow.ellipsis,
+ style: const TextStyle(color: NhamColors.text),
+ ),
+ ),
+ if (hasMeal) ...[
+ const SizedBox(width: NhamSpacing.sp2),
+ Container(
+ width: 6,
+ height: 6,
+ decoration: const BoxDecoration(
+ shape: BoxShape.circle,
+ color: NhamColors.accent,
+ ),
+ ),
+ ],
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+/// Morphs the date chip IN PLACE into the week strip (and back), at a fixed
+/// height so the feed below never shifts. One controller drives a buttery
+/// cross-dissolve (chip fades/shrinks out as the strip fades/scales in) on a
+/// single easeOutCubic curve. Tapping the chip expands; the parent collapses on
+/// any outside tap (the scrim) or a day selection.
+class DateMorph extends StatefulWidget {
+ const DateMorph({
super.key,
required this.dates,
required this.today,
required this.selectedDate,
- required this.onSelectDate,
required this.expanded,
- required this.onExpandedChange,
+ required this.onSelectDate,
+ required this.onExpand,
+ required this.onCollapse,
});
final List dates;
final String today;
final String selectedDate;
- final ValueChanged onSelectDate;
final bool expanded;
- final ValueChanged onExpandedChange;
+ final ValueChanged onSelectDate;
+ final VoidCallback onExpand;
+ final VoidCallback onCollapse;
@override
- State createState() => _TimelinePickerState();
+ State createState() => _DateMorphState();
}
-// Swipe cooldown to mirror the web (mobile-timeline-picker.tsx:32). The 40px
-// threshold is satisfied by Flutter's drag-end velocity gesture.
-const int _kSwipeCooldownMs = 250;
+class _DateMorphState extends State
+ with SingleTickerProviderStateMixin {
+ late final AnimationController _c = AnimationController(
+ vsync: this,
+ duration: const Duration(milliseconds: 340),
+ value: widget.expanded ? 1 : 0,
+ );
+
+ @override
+ void didUpdateWidget(DateMorph old) {
+ super.didUpdateWidget(old);
+ if (widget.expanded != old.expanded) {
+ if (widget.expanded) {
+ _c.forward();
+ } else {
+ _c.reverse();
+ }
+ }
+ }
+
+ @override
+ void dispose() {
+ _c.dispose();
+ super.dispose();
+ }
-class _TimelinePickerState extends State {
+ @override
+ Widget build(BuildContext context) {
+ // Fixed height = the expanded strip's height, so morphing never pushes the
+ // feed; the collapsed chip just centers in it.
+ return SizedBox(
+ height: 56,
+ child: AnimatedBuilder(
+ animation: _c,
+ builder: (context, _) {
+ final t = Curves.easeOutCubic.transform(_c.value);
+ final chipOpacity = (1 - t * 1.6).clamp(0.0, 1.0);
+ final stripOpacity = ((t - 0.25) / 0.75).clamp(0.0, 1.0);
+ return Stack(
+ alignment: Alignment.center,
+ children: [
+ // Collapsed layer: hamburger + centered chip + mirror spacer.
+ // The hamburger lives here, so it fades out as the strip expands.
+ if (t < 1)
+ Opacity(
+ opacity: chipOpacity,
+ child: IgnorePointer(
+ ignoring: widget.expanded,
+ child: Row(
+ children: [
+ const AppMenuButton(),
+ Expanded(
+ child: Center(
+ child: Transform.scale(
+ scale: 1 - t * 0.04, // shrink as it hands off
+ child: TimelineChip(
+ dates: widget.dates,
+ selectedDate: widget.selectedDate,
+ onTap: widget.onExpand,
+ ),
+ ),
+ ),
+ ),
+ const SizedBox(width: 44, height: 44),
+ ],
+ ),
+ ),
+ ),
+ // Expanded layer: the week strip, FULL header width.
+ if (t > 0)
+ Opacity(
+ opacity: stripOpacity,
+ child: IgnorePointer(
+ ignoring: !widget.expanded,
+ child: Transform.scale(
+ scale: 0.96 + 0.04 * t, // settle in from 0.96 → 1
+ child: TimelineStrip(
+ dates: widget.dates,
+ today: widget.today,
+ selectedDate: widget.selectedDate,
+ onSelectDate: widget.onSelectDate,
+ onClose: widget.onCollapse,
+ ),
+ ),
+ ),
+ ),
+ ],
+ );
+ },
+ ),
+ );
+ }
+}
+
+// A large midpoint so the PageView can page many weeks into the past while the
+// current week sits at a known index (weeks are unbounded backwards).
+const int _kWeekPageBase = 5000;
+
+/// The expanded week strip, shown as a dropdown overlay below the header. Real
+/// week paging via [PageView] (swipe + chevrons). Selecting a day reports it and
+/// asks the parent to close.
+class TimelineStrip extends StatefulWidget {
+ const TimelineStrip({
+ super.key,
+ required this.dates,
+ required this.today,
+ required this.selectedDate,
+ required this.onSelectDate,
+ required this.onClose,
+ });
+
+ final List dates;
+ final String today;
+ final String selectedDate;
+ final ValueChanged onSelectDate;
+ final VoidCallback onClose;
+
+ @override
+ State createState() => _TimelineStripState();
+}
+
+class _TimelineStripState extends State {
late String _visibleAnchor = _selectedAnchor;
- // Suppresses the day-tap that immediately follows a horizontal swipe
- // (mirrors didSwipeRef in mobile-timeline-picker.tsx).
- bool _didSwipe = false;
- int _lastSwipeAtMs = 0;
+ late final PageController _pageController =
+ PageController(initialPage: _pageForAnchor(_selectedAnchor));
String get _currentAnchor => widget.today;
- String get _selectedAnchor => widget.selectedDate.compareTo(_currentAnchor) > 0
- ? _currentAnchor
- : widget.selectedDate;
+ String get _selectedAnchor =>
+ widget.selectedDate.compareTo(_currentAnchor) > 0
+ ? _currentAnchor
+ : widget.selectedDate;
bool get _canNavigateNext => _visibleAnchor.compareTo(_currentAnchor) < 0;
- void _openStrip() {
- setState(() => _visibleAnchor = _selectedAnchor);
- widget.onExpandedChange(true);
+ String _anchorForPage(int page) =>
+ addDays(_currentAnchor, (page - _kWeekPageBase) * 7);
+
+ int _pageForAnchor(String anchor) {
+ final base = dateStringToDate(_currentAnchor);
+ final target = dateStringToDate(anchor);
+ final weeks = (target.difference(base).inDays / 7).round();
+ return _kWeekPageBase + weeks;
+ }
+
+ @override
+ void dispose() {
+ _pageController.dispose();
+ super.dispose();
}
void _selectDay(String date) {
- if (_didSwipe) {
- _didSwipe = false;
- return;
+ if (date != widget.selectedDate) {
+ HapticFeedback.selectionClick();
+ widget.onSelectDate(date);
}
- if (date != widget.selectedDate) widget.onSelectDate(date);
- widget.onExpandedChange(false);
+ widget.onClose();
}
- void _navigateToAnchor(String anchor) {
- final next =
- anchor.compareTo(_currentAnchor) > 0 ? _currentAnchor : anchor;
- if (next != _visibleAnchor) setState(() => _visibleAnchor = next);
+ void _onPageChanged(int page) {
+ final anchor = _anchorForPage(page);
+ if (anchor != _visibleAnchor) {
+ HapticFeedback.selectionClick();
+ setState(() => _visibleAnchor = anchor);
+ }
}
- void _scrollPrev() => _navigateToAnchor(addDays(_visibleAnchor, -7));
+ void _scrollPrev() {
+ _pageController.previousPage(
+ duration: const Duration(milliseconds: 280),
+ curve: const Cubic(0.16, 1, 0.3, 1),
+ );
+ }
void _scrollNext() {
if (!_canNavigateNext) return;
- _navigateToAnchor(addDays(_visibleAnchor, 7));
- }
-
- // Horizontal-swipe paging with a 40px threshold + 250ms cooldown, mirroring
- // handlePointerUp in mobile-timeline-picker.tsx:294-316. A swipe also
- // suppresses the subsequent day-tap via [_didSwipe].
- void _onSwipeEnd(DragEndDetails details) {
- final dx = details.primaryVelocity ?? 0;
- if (dx == 0) return;
- final now = DateTime.now().millisecondsSinceEpoch;
- if (now - _lastSwipeAtMs < _kSwipeCooldownMs) return;
- _lastSwipeAtMs = now;
- _didSwipe = true;
- if (dx > 0) {
- _scrollPrev();
- } else {
- _scrollNext();
- }
+ _pageController.nextPage(
+ duration: const Duration(milliseconds: 280),
+ curve: const Cubic(0.16, 1, 0.3, 1),
+ );
}
@override
@@ -101,121 +306,44 @@ class _TimelinePickerState extends State {
final locale = context.locale.toString();
final mealDates = widget.dates.toSet();
- // The container morphs between the chip pill and the full-width strip,
- // mirroring the framer `layout` morph (motion.div, duration 0.28s,
- // cubic-bezier(0.16,1,0.3,1)) in mobile-timeline-picker.tsx:347-356.
- return LayoutBuilder(
- builder: (context, constraints) {
- final expanded = widget.expanded;
- return AnimatedContainer(
- duration: const Duration(milliseconds: 280),
- curve: const Cubic(0.16, 1, 0.3, 1),
- // Chip is a single row (44px); the expanded strip stacks
- // weekday + number + dot per cell and needs more height, else the
- // day cells overflow the 44px clamp (BOTTOM OVERFLOWED stripe).
- height: expanded ? 56 : 44,
- // chip: max-w-72 pill; strip: full width.
- width: expanded ? constraints.maxWidth : null,
- constraints: expanded
- ? null
- : const BoxConstraints(maxWidth: 288), // max-w-72
- padding: expanded
- ? EdgeInsets.zero
- : const EdgeInsets.symmetric(horizontal: NhamSpacing.sp4),
- decoration: BoxDecoration(
- color: expanded ? Colors.transparent : NhamColors.surface,
- borderRadius:
- BorderRadius.circular(expanded ? 0 : NhamRadii.pill),
- border: expanded
- ? const Border.fromBorderSide(BorderSide.none)
- : Border.all(color: NhamColors.borderHalf), // border/50
- ),
- child: AnimatedSwitcher(
- duration: const Duration(milliseconds: 150),
- child: expanded
- ? _buildStrip(locale, mealDates)
- : _buildChipContent(locale, mealDates),
- ),
- );
- },
- );
- }
-
- Widget _buildChipContent(String locale, Set mealDates) {
- final hasMeal = mealDates.contains(widget.selectedDate);
- final formatted = formatTimelineDayLabel(widget.selectedDate, locale);
- return _ChipButton(
- key: const ValueKey('chip-content'),
- label: formatted,
- hasMeal: hasMeal,
- onTap: _openStrip,
- );
- }
-
- Widget _buildStrip(String locale, Set mealDates) {
- final weekStrips = [
- addDays(_visibleAnchor, -7),
- _visibleAnchor,
- addDays(_visibleAnchor, 7),
- ].map(buildCenteredStripFromAnchor).toList();
-
- return Row(
- key: const ValueKey('strip-content'),
- children: [
- _NavButton(
- icon: Icons.chevron_left, // lucide ChevronLeft
- onTap: _scrollPrev,
- color: NhamColors.textMuted,
- ),
- const SizedBox(width: 4), // gap-1
- // Three-week carousel: prev/visible/next rendered in a row offset
- // translateX(-100%), paging slides 200ms ease-out
- // (mobile-timeline-picker.tsx:410-452).
- Expanded(
- child: GestureDetector(
- behavior: HitTestBehavior.translucent,
- onHorizontalDragEnd: _onSwipeEnd,
- child: ClipRect(
- child: LayoutBuilder(
- builder: (context, c) {
- final weekWidth = c.maxWidth;
- return AnimatedContainer(
- duration: const Duration(milliseconds: 200),
- curve: Curves.easeOut,
- // Base offset translateX(-100%): visible week centered.
- transform: Matrix4.translationValues(-weekWidth, 0, 0),
- width: weekWidth * 3,
- child: Row(
- children: [
- for (final week in weekStrips)
- SizedBox(
- width: weekWidth,
- child: _WeekRow(
- week: week,
- today: widget.today,
- selectedDate: widget.selectedDate,
- mealDates: mealDates,
- locale: locale,
- onSelect: _selectDay,
- ),
- ),
- ],
- ),
- );
- },
- ),
+ return SizedBox(
+ height: 56,
+ child: Row(
+ children: [
+ _NavButton(
+ icon: LucideIcons.chevronLeft,
+ onTap: _scrollPrev,
+ color: NhamColors.textMuted,
+ ),
+ const SizedBox(width: 4), // gap-1
+ Expanded(
+ child: PageView.builder(
+ controller: _pageController,
+ onPageChanged: _onPageChanged,
+ itemCount: _kWeekPageBase + 1,
+ itemBuilder: (context, page) {
+ final week = buildCenteredStripFromAnchor(_anchorForPage(page));
+ return _WeekRow(
+ week: week,
+ today: widget.today,
+ selectedDate: widget.selectedDate,
+ mealDates: mealDates,
+ locale: locale,
+ onSelect: _selectDay,
+ );
+ },
),
),
- ),
- const SizedBox(width: 4),
- _NavButton(
- icon: Icons.chevron_right, // lucide ChevronRight
- onTap: _canNavigateNext ? _scrollNext : null,
- color: _canNavigateNext
- ? NhamColors.textMuted
- : const Color(0x4D8B7355), // text-nham-text-muted/30
- ),
- ],
+ const SizedBox(width: 4),
+ _NavButton(
+ icon: LucideIcons.chevronRight,
+ onTap: _canNavigateNext ? _scrollNext : null,
+ color: _canNavigateNext
+ ? NhamColors.textMuted
+ : const Color(0x4D8B7355), // text-nham-text-muted/30
+ ),
+ ],
+ ),
);
}
}
@@ -259,66 +387,6 @@ class _WeekRow extends StatelessWidget {
}
}
-class _ChipButton extends StatefulWidget {
- const _ChipButton({
- super.key,
- required this.label,
- required this.hasMeal,
- required this.onTap,
- });
-
- final String label;
- final bool hasMeal;
- final VoidCallback onTap;
-
- @override
- State<_ChipButton> createState() => _ChipButtonState();
-}
-
-class _ChipButtonState extends State<_ChipButton> {
- @override
- Widget build(BuildContext context) {
- // The pill chrome (bg/border/radius/padding/maxWidth) is owned by the
- // morphing AnimatedContainer in the parent; this is only the chip's
- // content + tap target.
- return GestureDetector(
- behavior: HitTestBehavior.opaque,
- onTap: widget.onTap,
- child: SizedBox(
- height: 44,
- child: Row(
- mainAxisSize: MainAxisSize.min,
- children: [
- const Icon(Icons.calendar_today_outlined,
- size: 14, color: NhamColors.accent), // lucide Calendar
- const SizedBox(width: NhamSpacing.sp2), // gap-2
- Flexible(
- child: NhamText(
- widget.label,
- variant: NhamTextVariant.chipText,
- maxLines: 1,
- overflow: TextOverflow.ellipsis,
- style: const TextStyle(color: NhamColors.text),
- ),
- ),
- if (widget.hasMeal) ...[
- const SizedBox(width: NhamSpacing.sp2),
- Container(
- width: 6,
- height: 6,
- decoration: const BoxDecoration(
- shape: BoxShape.circle,
- color: NhamColors.accent,
- ),
- ),
- ],
- ],
- ),
- ),
- );
- }
-}
-
class _NavButton extends StatefulWidget {
const _NavButton({required this.icon, required this.color, this.onTap});
@@ -428,8 +496,6 @@ class _DayCellState extends State<_DayCell> {
);
}
- // Web: future days are NOT dimmed/disabled — only the meal dot becomes an
- // empty 6x6 spacer (handled above). The cell stays full-opacity + tappable.
return GestureDetector(
onTapDown: (_) => setState(() => _pressed = true),
onTapUp: (_) => setState(() => _pressed = false),
@@ -449,31 +515,31 @@ class _DayCellState extends State<_DayCell> {
color: bg,
borderRadius: BorderRadius.circular(14.4), // rounded-[0.9rem]
),
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- NhamText(
- dayName,
- variant: NhamTextVariant.macroLabel,
- style: NhamTextStyles.sansSemiBold(
- fontSize: NhamFontSize.eyebrow,
- ).copyWith(
- letterSpacing: NhamTracking.tight,
- color: labelColor,
- ),
- ),
- const SizedBox(height: 2), // gap-0.5
- NhamText(
- dayNum,
- variant: NhamTextVariant.numInline,
- style: TextStyle(fontSize: 13, color: labelColor),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ NhamText(
+ dayName,
+ variant: NhamTextVariant.macroLabel,
+ style: NhamTextStyles.sansSemiBold(
+ fontSize: NhamFontSize.eyebrow,
+ ).copyWith(
+ letterSpacing: NhamTracking.tight,
+ color: labelColor,
),
- const SizedBox(height: 2),
- dot,
- ],
- ),
+ ),
+ const SizedBox(height: 2), // gap-0.5
+ NhamText(
+ dayNum,
+ variant: NhamTextVariant.numInline,
+ style: TextStyle(fontSize: 13, color: labelColor),
+ ),
+ const SizedBox(height: 2),
+ dot,
+ ],
),
),
- );
+ ),
+ );
}
}
diff --git a/apps/mobile-flutter/lib/features/logging/widgets/timeline_rail.dart b/apps/mobile-flutter/lib/features/logging/widgets/timeline_rail.dart
deleted file mode 100644
index 22d3da8b..00000000
--- a/apps/mobile-flutter/lib/features/logging/widgets/timeline_rail.dart
+++ /dev/null
@@ -1,78 +0,0 @@
-import 'package:flutter/material.dart';
-
-import '../../../theme/nham_colors.dart';
-
-/// The shared feed timeline decoration drawn in the left gutter beside each
-/// card: a vertical hairline (hidden on the last item) and an accent ring dot.
-///
-/// On the web mobile view the rail sits at `-left-4` (16px, line) and
-/// `-left-5` (20px, dot) relative to the card, inside the feed's `pl-6` (24px)
-/// left gutter (the `-left-10`/`-left-[43px]` values are the sm: desktop
-/// positions). We reproduce the mobile pixel offsets with [Positioned] children
-/// in a [Stack] that the card sits inside.
-class TimelineRail extends StatelessWidget {
- const TimelineRail({
- super.key,
- required this.child,
- this.isLast = false,
- this.dotChild,
- });
-
- final Widget child;
- final bool isLast;
-
- /// Optional override for the dot (the streaming entry pulses it).
- final Widget? dotChild;
-
- @override
- Widget build(BuildContext context) {
- return Stack(
- clipBehavior: Clip.none,
- children: [
- // Vertical line: top 8 (top-2), bottom 0, width 1px, border/60.
- if (!isLast)
- const Positioned(
- top: 8,
- bottom: 0,
- left: -16, // mobile -left-4
- child: SizedBox(
- width: 1,
- child: ColoredBox(color: NhamColors.borderSoft),
- ),
- ),
- // Accent ring dot: top 8, h-2 w-2, 2px accent border, white fill.
- Positioned(
- top: 8,
- left: -20, // mobile -left-5
- child: dotChild ?? const _Dot(),
- ),
- child,
- ],
- );
- }
-}
-
-class _Dot extends StatelessWidget {
- const _Dot();
-
- @override
- Widget build(BuildContext context) {
- return Container(
- width: 8,
- height: 8,
- decoration: BoxDecoration(
- shape: BoxShape.circle,
- color: NhamColors.elev,
- border: Border.all(color: NhamColors.accent, width: 2),
- ),
- );
- }
-}
-
-/// The accent dot styled for re-use (e.g. the streaming entry's pulsing dot).
-class TimelineDot extends StatelessWidget {
- const TimelineDot({super.key});
-
- @override
- Widget build(BuildContext context) => const _Dot();
-}
diff --git a/apps/mobile-flutter/lib/features/nutrition/logic/candidate_nutrients.dart b/apps/mobile-flutter/lib/features/nutrition/logic/candidate_nutrients.dart
deleted file mode 100644
index a0d49026..00000000
--- a/apps/mobile-flutter/lib/features/nutrition/logic/candidate_nutrients.dart
+++ /dev/null
@@ -1,29 +0,0 @@
-/// The supported food-source-candidate nutrients, vendored as consts from web
-/// `lib/nutrition/catalog/nutrients.ts` (keep in sync). Only the candidate
-/// gating is needed on mobile.
-///
-/// Ported from `apps/mobile/src/lib/nutrition/logic/candidate-nutrients.ts`.
-library;
-
-import '../../../models/nutrition.dart';
-
-/// The supported candidate nutrient enum names, as raw strings (matching the
-/// REST contract's `SupportedCandidateNutrient`).
-const List kSupportedCandidateNutrients = [
- 'calciumMg',
- 'ironMg',
- 'vitaminCMg',
- 'phosphorusMg',
- 'vitaminB1Mg',
- 'vitaminB2Mg',
- 'vitaminPpMg',
- 'vitaminAMcg',
-];
-
-final Set _supportedSet = kSupportedCandidateNutrients.toSet();
-
-/// Narrows a nutrient key to a supported candidate nutrient string, or null.
-String? asSupported(NutritionNutrientKey nutrient) {
- final name = nutrient.name;
- return _supportedSet.contains(name) ? name : null;
-}
diff --git a/apps/mobile-flutter/lib/features/nutrition/logic/status.dart b/apps/mobile-flutter/lib/features/nutrition/logic/status.dart
index 031fd5b4..f9fa219d 100644
--- a/apps/mobile-flutter/lib/features/nutrition/logic/status.dart
+++ b/apps/mobile-flutter/lib/features/nutrition/logic/status.dart
@@ -50,11 +50,11 @@ StatusKey statusKeyFor(NutrientCardData card) {
return StatusKey.far;
}
-/// Whether the steady-detail panel shows food-source chips: supported nutrient,
-/// decent confidence, and meaningfully below target (<90%).
+/// Whether to surface food-source chips for a nutrient: decent confidence and
+/// meaningfully below target (<90%). Every card nutrient has DB-derived
+/// suggestions, so there's no per-nutrient support gate.
bool showChips(NutrientCardData card) {
- return card.supportsCandidates &&
- card.confidence >= 40 &&
+ return card.confidence >= 40 &&
card.percentOfTarget != null &&
card.percentOfTarget! < 90;
}
diff --git a/apps/mobile-flutter/lib/features/nutrition/logic/verdict_logic.dart b/apps/mobile-flutter/lib/features/nutrition/logic/verdict_logic.dart
index 00c781f3..058c7311 100644
--- a/apps/mobile-flutter/lib/features/nutrition/logic/verdict_logic.dart
+++ b/apps/mobile-flutter/lib/features/nutrition/logic/verdict_logic.dart
@@ -39,13 +39,3 @@ String joinNames(List names, String locale) {
final head = names.sublist(0, names.length - 1).join(', ');
return '$head, $conj ${names.last}';
}
-
-double? getAverageConfidence(NutritionOverview overview) {
- final items = [
- ...overview.summary.mostConsistent,
- ...overview.summary.needsAttention,
- ];
- if (items.isEmpty) return null;
- return items.fold(0, (total, item) => total + item.confidence) /
- items.length;
-}
diff --git a/apps/mobile-flutter/lib/features/nutrition/providers/candidates_response.dart b/apps/mobile-flutter/lib/features/nutrition/providers/candidates_response.dart
index 4565a1b7..48f482bb 100644
--- a/apps/mobile-flutter/lib/features/nutrition/providers/candidates_response.dart
+++ b/apps/mobile-flutter/lib/features/nutrition/providers/candidates_response.dart
@@ -1,49 +1,44 @@
-/// Render-ready food-source candidate models for the nutrition surface.
+/// Food suggestions for a nutrient, derived from the food-composition table.
///
-/// Ported from `lib/api/contracts/nutrition.ts` (`CandidatesResponse`,
-/// `FoodSourceCandidate`). i18n-key-only — every user-facing string is a
-/// translation key resolved at render time.
+/// Ported from the web `CandidatesResponse` contract: each food carries its
+/// Vietnamese + English name and per-100g amount of the requested nutrient.
library;
-class FoodSourceCandidate {
- final String nutrient;
+class FoodCandidate {
final String id;
- final String nameKey;
- final String servingKey;
- final String rationaleKey;
- final String? cautionKey;
+ final String name; // Vietnamese (namePrimary)
+ final String nameEn;
+ final double amount; // per-100g of the nutrient
+ final String unit;
- const FoodSourceCandidate({
- required this.nutrient,
+ const FoodCandidate({
required this.id,
- required this.nameKey,
- required this.servingKey,
- required this.rationaleKey,
- this.cautionKey,
+ required this.name,
+ required this.nameEn,
+ required this.amount,
+ required this.unit,
});
- factory FoodSourceCandidate.fromJson(Map json) =>
- FoodSourceCandidate(
- nutrient: json['nutrient'] as String,
+ factory FoodCandidate.fromJson(Map json) => FoodCandidate(
id: json['id'] as String,
- nameKey: json['nameKey'] as String,
- servingKey: json['servingKey'] as String,
- rationaleKey: json['rationaleKey'] as String,
- cautionKey: json['cautionKey'] as String?,
+ name: json['name'] as String,
+ nameEn: json['nameEn'] as String,
+ amount: (json['amount'] as num?)?.toDouble() ?? 0,
+ unit: json['unit'] as String,
);
}
class CandidatesResponse {
final String nutrient;
- final List candidates;
+ final List foods;
- const CandidatesResponse({required this.nutrient, required this.candidates});
+ const CandidatesResponse({required this.nutrient, required this.foods});
factory CandidatesResponse.fromJson(Map json) =>
CandidatesResponse(
nutrient: json['nutrient'] as String,
- candidates: (json['candidates'] as List)
- .map((e) => FoodSourceCandidate.fromJson(e as Map))
+ foods: (json['foods'] as List)
+ .map((e) => FoodCandidate.fromJson(e as Map))
.toList(),
);
}
diff --git a/apps/mobile-flutter/lib/features/nutrition/providers/food_candidates_provider.dart b/apps/mobile-flutter/lib/features/nutrition/providers/food_candidates_provider.dart
index ac22bcb2..7b5a2c57 100644
--- a/apps/mobile-flutter/lib/features/nutrition/providers/food_candidates_provider.dart
+++ b/apps/mobile-flutter/lib/features/nutrition/providers/food_candidates_provider.dart
@@ -1,41 +1,27 @@
-/// Riverpod port of the RN `useFoodCandidates` hook
-/// (`apps/mobile/src/lib/nutrition/hooks/use-food-candidates.ts`).
+/// Food suggestions for a nutrient, keyed by the nutrient.
///
-/// Mirrors the web `FoodChipRow` query: key `['nutrition','candidates',
-/// supported]`, `retry:false`, disabled when the nutrient is unsupported.
-///
-/// The catalog is STATIC per nutrient but the screen fans out one query per
-/// spotlight/detail card, so each nutrient is fetched at most once per session
-/// (`staleTime`/`gcTime: Infinity`). We replicate that with `ref.keepAlive()`
-/// so the family entry never auto-disposes and is never refetched.
+/// Now DB-derived (top foods by per-100g density) and available for ANY card
+/// nutrient — no fixed supported set. Each nutrient is fetched at most once per
+/// session (`ref.keepAlive()`), returning a pool the sheet pages through, so the
+/// "don't have these?" refresh is instant (no extra round-trip).
library;
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../data/api_client.dart';
import '../../../models/nutrition.dart';
-import '../logic/candidate_nutrients.dart';
import 'candidates_response.dart';
-/// Family keyed by the nutrient. Returns `null` when the nutrient is not a
-/// supported candidate (parity with the RN `enabled: supported !== null` gate —
-/// the widget renders nothing in that case).
-final foodCandidatesProvider = FutureProvider.family((ref, nutrient) async {
- final supported = asSupported(nutrient);
- if (supported == null) {
- // Disabled query — never fetches (RN `enabled: false`).
- return null;
- }
-
- // gcTime: Infinity — keep the resolved catalog for the whole session.
+final foodCandidatesProvider =
+ FutureProvider.family(
+ (ref, nutrient) async {
+ // Keep the resolved pool for the whole session (gcTime: Infinity).
ref.keepAlive();
final api = ref.read(apiClientProvider);
- // retry:false in RN — surface failures immediately.
final json = await api.post>(
'/api/v1/nutrition/candidates',
- {'nutrient': supported},
+ {'nutrient': nutrient.name},
);
return CandidatesResponse.fromJson(json);
});
diff --git a/apps/mobile-flutter/lib/features/nutrition/providers/nutrition_overview_provider.dart b/apps/mobile-flutter/lib/features/nutrition/providers/nutrition_overview_provider.dart
index e7baf4c3..ca19464f 100644
--- a/apps/mobile-flutter/lib/features/nutrition/providers/nutrition_overview_provider.dart
+++ b/apps/mobile-flutter/lib/features/nutrition/providers/nutrition_overview_provider.dart
@@ -11,6 +11,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../data/api_client.dart';
import '../../../data/query.dart';
+import '../../../data/session_provider.dart';
import '../../../models/nutrition.dart';
/// Raw `getTimezoneOffset()` parity: JS returns minutes POSITIVE west of UTC.
@@ -24,28 +25,34 @@ int nutritionTimezoneOffset() => -DateTime.now().timeZoneOffset.inMinutes;
/// the new provider instance keeps the previously-resolved overview as its
/// initial value so the layout doesn't collapse to a skeleton mid-refetch.
final nutritionOverviewProvider = AsyncNotifierProvider.family<
- NutritionOverviewNotifier, NutritionOverview, NutritionRangeInput>(
- NutritionOverviewNotifier.new,
-);
+ NutritionOverviewNotifier,
+ NutritionOverview,
+ NutritionRangeInput
+>(NutritionOverviewNotifier.new);
/// Holds the last successful overview across the family so a range switch can
-/// seed the next instance (the RN `keepPreviousData` behavior). Riverpod
-/// rebuilds a fresh notifier per family key, so we stash the previous value
-/// here at the Provider scope.
-NutritionOverview? _lastOverview;
+/// seed the next instance (the RN `keepPreviousData` behavior). It is keyed by
+/// user + timezone so an account switch can never seed another user's nutrition
+/// pattern into the placeholder state.
+final Map _lastOverviewByAccount = {};
+
+String _overviewCacheKey(String? userId) =>
+ '${userId ?? 'signed-out'}:${nutritionTimezoneOffset()}';
class NutritionOverviewNotifier
extends FamilyAsyncNotifier {
@override
Future build(NutritionRangeInput arg) async {
- final previous = _lastOverview;
+ final userId = ref.watch(currentSessionProvider)?.user.id;
+ final cacheKey = _overviewCacheKey(userId);
+ final previous = _lastOverviewByAccount[cacheKey];
if (previous != null) {
// Seed with the prior overview so consumers keep rendering the editorial
// stack while the new range loads (placeholderData: keepPreviousData).
state = AsyncData(previous);
}
final overview = await _fetch(arg);
- _lastOverview = overview;
+ _lastOverviewByAccount[cacheKey] = overview;
return overview;
}
@@ -60,15 +67,34 @@ class NutritionOverviewNotifier
}
/// Refetch the current range — mirrors `query.refetch()`. Keeps the existing
- /// data visible (sets `isFetching` semantics via `AsyncValue.isLoading` on a
- /// guarded refresh that preserves the previous value).
- Future refetch() async {
+ /// data visible while loading, and — critically — on FAILURE retains the
+ /// previous overview underneath the error (`copyWithPrevious`) so a flaky
+ /// refetch doesn't blank out the editorial stack the user is reading. The
+ /// screen reads `hasValue` to keep rendering content and surfaces the failure
+ /// as a toast instead.
+ ///
+ /// Returns true on success, false on failure (so the caller can toast).
+ Future refetch() async {
final range = arg;
- state = await AsyncValue.guard(() async {
+ final previous = state;
+ // Show the in-flight (isLoading) state over the current value.
+ state = const AsyncValue.loading().copyWithPrevious(
+ previous,
+ );
+ try {
final overview = await _fetch(range);
- _lastOverview = overview;
- return overview;
- });
+ final userId = ref.read(currentSessionProvider)?.user.id;
+ _lastOverviewByAccount[_overviewCacheKey(userId)] = overview;
+ state = AsyncData(overview);
+ return true;
+ } catch (error, stack) {
+ // Retain the previous data under the error.
+ state = AsyncError(
+ error,
+ stack,
+ ).copyWithPrevious(previous);
+ return false;
+ }
}
}
diff --git a/apps/mobile-flutter/lib/features/nutrition/screens/nutrition_screen.dart b/apps/mobile-flutter/lib/features/nutrition/screens/nutrition_screen.dart
index 3047738b..8747cedb 100644
--- a/apps/mobile-flutter/lib/features/nutrition/screens/nutrition_screen.dart
+++ b/apps/mobile-flutter/lib/features/nutrition/screens/nutrition_screen.dart
@@ -1,32 +1,33 @@
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../../../data/session_provider.dart';
+import '../../../features/dashboard/widgets/dashboard_tokens.dart';
import '../../../models/nutrition.dart';
import '../../../shared/widgets/nham_primitives.dart';
import '../../../shared/widgets/nham_text.dart';
+import '../../../shared/widgets/top_toast.dart';
import '../../../shell/app_header.dart';
+import '../../../theme/nham_colors.dart';
+import '../../../theme/nham_theme.dart';
import '../providers/nutrition_overview_provider.dart';
-import '../widgets/background_section.dart';
-import '../widgets/daily_rhythm.dart';
-import '../widgets/editorial_header.dart';
+import '../widgets/day_summary.dart';
import '../widgets/empty_state.dart';
-import '../widgets/focus_section.dart';
import '../widgets/inline_error.dart';
+import '../widgets/nutrient_grid_card.dart';
import '../widgets/nutrition_skeleton.dart';
-import '../widgets/pull_quote.dart';
-import '../widgets/steady_section.dart';
-import '../widgets/verdict_hero.dart';
-
-/// Nutrition screen — mobile port of the web `NutritionShell`
-/// (`apps/mobile/src/app/(app)/(tabs)/nutrition.tsx`). A purely client-query
-/// editorial stack: header (with interactive 7d/30d/90d range toggle + verdict)
-/// → calorie rhythm card → focus spotlights → steady nutrient list → "other
-/// nutrients" toggle → vitamin-D pull-quote.
+import '../widgets/range_selector.dart';
+import '../widgets/source_attribution.dart';
+import '../widgets/suggested_foods_sheet.dart';
+
+/// Nutrition screen — a dense, single-view micronutrient overview. A compact
+/// calorie/macro summary, then every tracked nutrient in a 2-column grid grouped
+/// by Vitamins / Minerals (progress shown inline, met nutrients greened), a
+/// FAO/WHO source line, and one CTA: suggested foods for the timeline's gaps.
///
-/// Single column throughout (the web's lg:two-up + sm:2-col grids collapse on
-/// phone); the AnimatePresence height-collapse becomes an `AnimatedSize` fade.
+/// The timeframe toggle (Today / 7d / 30d) lives in the header beside the menu.
class NutritionScreen extends ConsumerStatefulWidget {
const NutritionScreen({super.key});
@@ -43,16 +44,35 @@ class _NutritionScreenState extends ConsumerState {
final userId = session?.user.id;
if (userId == null) {
- return const Screen(
+ return Screen(
child: Center(
child: Padding(
- padding: EdgeInsets.all(24),
- child: NhamText('Not signed in.', variant: NhamTextVariant.small),
+ padding: const EdgeInsets.all(24),
+ child: NhamText(
+ tr('common.notSignedIn'),
+ variant: NhamTextVariant.small,
+ ),
),
),
);
}
+ // A refetch that fails while we still hold a prior overview keeps the
+ // content on screen (copyWithPrevious) and surfaces the failure as a top
+ // toast instead of nuking what the user is reading.
+ ref.listen>(
+ nutritionOverviewProvider(_range),
+ (prev, next) {
+ if (next.hasError && next.hasValue) {
+ showTopToast(
+ context,
+ tr('nutrition.errors.overviewToast'),
+ variant: TopToastVariant.error,
+ );
+ }
+ },
+ );
+
final async = ref.watch(nutritionOverviewProvider(_range));
// `isFetching`: a refetch in flight while previous data is shown.
final isFetching = async.isLoading && async.hasValue;
@@ -61,15 +81,29 @@ class _NutritionScreenState extends ConsumerState {
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
- const Padding(
- padding: EdgeInsets.symmetric(horizontal: 20),
- child: AppHeader(),
+ Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 20),
+ child: AppHeader(
+ trailing: NutritionRangeSelector(
+ resolvedRange: async.valueOrNull?.resolvedRange ?? '7d',
+ onRangeChange: (range) => setState(() => _range = range),
+ disabled: isFetching,
+ ),
+ ),
),
Expanded(
- child: SingleChildScrollView(
- padding: const EdgeInsets.fromLTRB(20, 24, 20, 80),
- physics: const ClampingScrollPhysics(),
- child: _buildBody(async, isFetching),
+ child: RefreshIndicator(
+ onRefresh: () => ref
+ .read(nutritionOverviewProvider(_range).notifier)
+ .refetch(),
+ color: NhamColors.accent,
+ child: SingleChildScrollView(
+ padding: const EdgeInsets.fromLTRB(20, 16, 20, 40),
+ physics: const AlwaysScrollableScrollPhysics(
+ parent: BouncingScrollPhysics(),
+ ),
+ child: _buildBody(async, isFetching),
+ ),
),
),
],
@@ -78,70 +112,171 @@ class _NutritionScreenState extends ConsumerState {
}
Widget _buildBody(AsyncValue async, bool isFetching) {
- // isLoading with no prior value → skeleton (RN query.isLoading).
if (async.isLoading && !async.hasValue) {
return const NutritionSkeleton();
}
final overview = async.valueOrNull;
- if (async.hasError && overview == null) {
+ if (overview == null) {
return InlineError(
isRetrying: isFetching,
message: tr('nutrition.errors.overview'),
retryLabel: tr('nutrition.errors.retry'),
onRetry: () {
- ref
- .read(nutritionOverviewProvider(_range).notifier)
- .refetch();
+ ref.read(nutritionOverviewProvider(_range).notifier).refetch();
},
);
}
- if (overview == null) {
- // Error path with no data fallback (mirrors RN `|| !overview`).
- return InlineError(
- isRetrying: isFetching,
- message: tr('nutrition.errors.overview'),
- retryLabel: tr('nutrition.errors.retry'),
- onRetry: () {
- ref
- .read(nutritionOverviewProvider(_range).notifier)
- .refetch();
- },
+ if (overview.loggedDays == 0) {
+ return const Padding(
+ padding: EdgeInsets.only(top: 48),
+ child: EmptyState(),
);
}
- final isEmpty = overview.loggedDays == 0;
+ final all = [...overview.micronutrients, ...overview.moreNutrients];
+ final vitamins =
+ all.where((c) => c.group == NutrientGroup.vitamin).toList();
+ final minerals =
+ all.where((c) => c.group != NutrientGroup.vitamin).toList();
+ final foodNutrients = suggestedFoodNutrients(overview);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
- EditorialHeader(
+ DaySummary(
+ macros: overview.macros,
resolvedRange: overview.resolvedRange,
- onRangeChange: (range) => setState(() => _range = range),
- startDate: overview.period.startDate,
- endDate: overview.period.endDate,
- disabled: isFetching,
- verdict: isEmpty ? null : VerdictHero(overview: overview),
+ daySeries: overview.daySeries,
),
- if (isEmpty) ...[
- const SizedBox(height: 48),
- const EmptyState(),
- ] else ...[
- const SizedBox(height: 48),
- DailyRhythm(macros: overview.macros),
- const SizedBox(height: 48),
- FocusSection(cards: overview.spotlight),
- const SizedBox(height: 48),
- SteadySection(cards: overview.steady),
- const SizedBox(height: 48),
- BackgroundSection(cards: overview.moreNutrients),
- for (final card in overview.educationCards) ...[
- const SizedBox(height: 48),
- PullQuote(card: card),
- ],
+ // The single CTA sits right under the summary so it's visible on load,
+ // not buried below the full nutrient grid.
+ if (foodNutrients.isNotEmpty) ...[
+ const SizedBox(height: 12),
+ _SuggestedFoodsButton(
+ onTap: () =>
+ showSuggestedFoodsSheet(context, nutrients: foodNutrients),
+ ),
+ ],
+ if (vitamins.isNotEmpty) ...[
+ const SizedBox(height: 28),
+ _GroupHeader(label: tr('nutrition.nutrientGroups.vitamins')),
+ const SizedBox(height: 12),
+ _NutrientGrid(cards: vitamins),
+ ],
+ if (minerals.isNotEmpty) ...[
+ const SizedBox(height: 28),
+ _GroupHeader(label: tr('nutrition.nutrientGroups.minerals')),
+ const SizedBox(height: 12),
+ _NutrientGrid(cards: minerals),
],
+ const SizedBox(height: 24),
+ const SourceAttribution(),
],
);
}
}
+
+class _GroupHeader extends StatelessWidget {
+ const _GroupHeader({required this.label});
+
+ final String label;
+
+ @override
+ Widget build(BuildContext context) {
+ return Text(label.toUpperCase(), style: dashEyebrow());
+ }
+}
+
+/// A 2-column grid of [NutrientGridCard]s — bars stagger in left-to-right,
+/// top-to-bottom for a gentle fill.
+class _NutrientGrid extends StatelessWidget {
+ const _NutrientGrid({required this.cards});
+
+ final List cards;
+
+ @override
+ Widget build(BuildContext context) {
+ const gap = 12.0;
+ final rows = [];
+ for (var i = 0; i < cards.length; i += 2) {
+ final left = cards[i];
+ final right = i + 1 < cards.length ? cards[i + 1] : null;
+ rows.add(
+ Padding(
+ padding: EdgeInsets.only(top: i == 0 ? 0 : gap),
+ child: Row(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Expanded(
+ child: NutrientGridCard(
+ card: left,
+ barDelay: Duration(milliseconds: 60 * i),
+ ),
+ ),
+ const SizedBox(width: gap),
+ Expanded(
+ child: right == null
+ ? const SizedBox.shrink()
+ : NutrientGridCard(
+ card: right,
+ barDelay: Duration(milliseconds: 60 * (i + 1)),
+ ),
+ ),
+ ],
+ ),
+ ),
+ );
+ }
+ return Column(children: rows);
+ }
+}
+
+/// The single nutrition CTA — opens the suggested-foods sheet.
+class _SuggestedFoodsButton extends StatefulWidget {
+ const _SuggestedFoodsButton({required this.onTap});
+
+ final VoidCallback onTap;
+
+ @override
+ State<_SuggestedFoodsButton> createState() => _SuggestedFoodsButtonState();
+}
+
+class _SuggestedFoodsButtonState extends State<_SuggestedFoodsButton> {
+ bool _pressed = false;
+
+ @override
+ Widget build(BuildContext context) {
+ return GestureDetector(
+ behavior: HitTestBehavior.opaque,
+ onTapDown: (_) => setState(() => _pressed = true),
+ onTapUp: (_) => setState(() => _pressed = false),
+ onTapCancel: () => setState(() => _pressed = false),
+ onTap: widget.onTap,
+ child: AnimatedScale(
+ scale: _pressed ? 0.96 : 1,
+ duration: const Duration(milliseconds: 120),
+ child: Container(
+ height: 52,
+ alignment: Alignment.center,
+ decoration: BoxDecoration(
+ color: NhamColors.btn,
+ borderRadius: BorderRadius.circular(NhamRadii.buttonXl),
+ ),
+ child: Row(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ const Icon(LucideIcons.sparkles, size: 18, color: NhamColors.surface),
+ const SizedBox(width: NhamSpacing.sp2),
+ Text(
+ tr('nutrition.suggestedFoods.button'),
+ style: dashBody(color: NhamColors.surface, weight: FontWeight.w600),
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
diff --git a/apps/mobile-flutter/lib/features/nutrition/widgets/background_section.dart b/apps/mobile-flutter/lib/features/nutrition/widgets/background_section.dart
deleted file mode 100644
index c2c97827..00000000
--- a/apps/mobile-flutter/lib/features/nutrition/widgets/background_section.dart
+++ /dev/null
@@ -1,161 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-
-import '../../../models/nutrition.dart';
-import '../../../shared/widgets/section_eyebrow.dart';
-import '../../../theme/nham_colors.dart';
-import '../../../theme/nham_typography.dart';
-import 'nutrient_row.dart';
-
-/// RN port of
-/// `apps/mobile/src/components/nutrition/sections/background-section.tsx`. The
-/// web AnimatePresence collapses height + opacity together (duration 0.3,
-/// ease:[0.22,1,0.36,1]) on BOTH enter and exit, so a single controller drives
-/// SizeTransition + FadeTransition forward (open) / reverse (close).
-class BackgroundSection extends StatefulWidget {
- const BackgroundSection({super.key, required this.cards});
-
- final List cards;
-
- @override
- State