Implement UX-4 Feature on Goals Page

Command/plan

I will be implementing UX-4 from @TODO.md Read the task. Implementation details:

  1. Add a new button on the Goals page

  2. Reuse the onboarding calculator screen in an edit goals mode

  3. In that mode, when the user is done, save goals and return to /dashboard/goals

  4. Do not force the user through how it works or first meal

  5. Preload current values if possible

  6. Polish the CTA copy so the mode switch is obvious

I'll explore the relevant files in parallel to understand the current implementation.

Agent

Now I have a clear picture. Let me design the plan.

ToolSearch

Write.claude/plans/velvety-plotting-tarjan.md

★ Insight ─────────────────────────────────────

  1. The location.state pattern (used by ConfirmMealPage) is ideal here: same URL, different behavior — no new routes, no URL params leaking into history, no prop drilling through the router tree.

  2. useState lazy initializers (the value, not a function) run once at mount, making them perfect for seeding form state from navigation state — cleaner than a useEffect that sets state after render.

  3. The cache gap (OnboardingGoalsPage calls useGoals.saveGoals, bypassing useCachedGoals) is fixed with a goalsUpdated flag in navigate state — a lightweight one-way signal that triggers a targeted refetch() on the destination page. ─────────────────────────────────────────────────

Plan summary:

2 files changed, no new routes:

  1. GoalsPage.tsx — add a "Recalculate Goals" secondary button that navigates to /dashboard/onboarding/goals with { editMode: true, currentGoals: formData } in state.

  2. OnboardingGoalsPage.tsx — read location.state to detect edit mode, then:

    1. Pre-fill manual tab fields with passed goal values
    2. Show "Update Your Goals" header + "Save Goals" / "Cancel" CTAs
    3. Skip refetchOnboarding() and navigate to /dashboard/goals (not /how-it-works) on save
    4. Trigger a cache refresh in GoalsPage via { state: { goalsUpdated: true } } on navigate back

ExitPlanMode

Good feedback. Let me update the plan.

Updated. The revised plan for GoalsPage:

  1. Remove all Input fields, isSaving, handleSaveGoals, and the Save button
  2. Add read-only display rows for each macro (color dot + label + value, right-aligned)
  3. Single CTA: "Edit Goals" primary button → navigates to the calculator in edit mode

Everything else in the plan stays the same.

ExitPlanMode

Now let me implement.

Both files updated and the build is clean. Here's what changed:

GoalsPage.tsx — The 5 input fields and Save button are gone. Goals display as a clean read-only list (color dot + label + value). A single "Edit Goals" button navigates to the calculator with the current goal values pre-loaded. On return, a goalsUpdated flag triggers a cache refresh.

OnboardingGoalsPage.tsx — Detects location.state.editMode at mount. In edit mode: header reads "Update Your Goals", the manual tab is pre-filled with current values, the bottom bar shows a "Cancel" button above "Save Goals", and on save it returns to /dashboard/goals (skipping refetchOnboarding and the how-it-works flow entirely). The original onboarding flow is completely unchanged.