Bugfix: what-to-eat utan hushall ger forslag; onboarding mal kan valjas multi

apps/mobile/src/app/onboarding.tsx

@@ -22,7 +22,7 @@ import {
   Spacer,
   Title,
 } from "@/components/ui";
-import { colors, spacing } from "@/lib/theme";
+import { colors, spacing, typography } from "@/lib/theme";
 
 /**
  * Progressive onboarding (FAS 1b): 3-layer flow.
@@ -73,8 +73,9 @@ export default function OnboardingScreen() {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Step A state
-  const [goal, setGoal] = useState<string | null>(null);
+  const [goals, setGoals] = useState<string[]>([]);
   const [mode, setMode] = useState<"simple" | "exact">("simple");
+  const primaryGoal = goals[0] ?? null;
 
   // Step B state
   const [diet, setDiet] = useState<string>("omnivore");
@@ -94,6 +95,13 @@ export default function OnboardingScreen() {
   const toggleAllergen = (id: string) =>
     setAllergens((prev) => (prev.includes(id) ? prev.filter((a) => a !== id) : [...prev, id]));
 
+  const toggleGoal = (id: string) =>
+    setGoals((prev) => {
+      if (prev.includes(id)) return prev.filter((g) => g !== id);
+      // Keep the first-selected goal as primary by appending at the end.
+      return [...prev, id];
+    });
+
   const finishStepA = async () => {
     setBusy(true);
     setError(null);
@@ -101,11 +109,11 @@ export default function OnboardingScreen() {
       const res = await api<{ step: "a" | "b" | "c" }>("/v1/onboarding/quick-start", {
         method: "POST",
         body: {
-          ...(goal ? { primaryGoal: goal } : {}),
+          ...(goals.length ? { goals } : {}),
           precisionMode: mode,
         },
       });
-      track(onboardingStepCompleted({ properties: { step: "a", goal, precisionMode: mode } }));
+      track(onboardingStepCompleted({ properties: { step: "a", goals, primaryGoal, precisionMode: mode } }));
       setOnboardingStep(res.step);
       setLayer("b");
       // Let user into the app – Step B will be shown contextually later
@@ -201,14 +209,26 @@ export default function OnboardingScreen() {
 
         <Heading>{t("onboarding.goal")}</Heading>
         <View style={{ gap: spacing.sm }}>
-          {GOALS.map((id) => (
-            <SelectRow
-              key={id}
-              label={t(`onboarding.goal.${id}`)}
-              selected={goal === id}
-              onPress={() => setGoal(id)}
-            />
-          ))}
+          {GOALS.map((id) => {
+            const index = goals.indexOf(id);
+            const selected = index >= 0;
+            return (
+              <SelectRow
+                key={id}
+                label={t(`onboarding.goal.${id}`)}
+                selected={selected}
+                onPress={() => toggleGoal(id)}
+              >
+                {selected && index === 0 && (
+                  <View style={{ marginTop: 4 }}>
+                    <Text style={[typography.small, { color: colors.primary, fontWeight: "600" }]}>
+                      {t("onboarding.primaryGoal")}
+                    </Text>
+                  </View>
+                )}
+              </SelectRow>
+            );
+          })}
         </View>
 
         <Spacer size={spacing.sm} />
@@ -367,10 +387,12 @@ function SelectRow({
   label,
   selected,
   onPress,
+  children,
 }: {
   label: string;
   selected: boolean;
   onPress: () => void;
+  children?: React.ReactNode;
 }) {
   return (
     <Pressable
@@ -384,6 +406,7 @@ function SelectRow({
       }}
     >
       <Text style={{ color: colors.text, fontWeight: selected ? "700" : "400" }}>{label}</Text>
+      {children}
     </Pressable>
   );
 }