Skip to content

Plan: Shared week-navigation strip for Food Log + Habits, monochrome meal icons, habits header-plus removal

URL: https://mkdocs.justinsforge.com/memory/plans/shared-week-nav-strip-2026-07-05/

Date: 2026-07-05 Branch/worktree: feat/shared-week-nav at /home/justinwieb/forge-suite-wt/feat/shared-week-nav (dev server :3068) Approved spec: Extract the near-identical Food Log (DayView) and Habits (TodayView) week strips into one shared presentational WeekStrip component (day columns with DOW letter + SVG ring + day number, injected per-app data). Add a tall ~1:6 nav pill styled like a day column with ‹ (previous week) on its left and › (next week, disabled on current week) on its right, a "Week of ‹date›" label above the strip, and a horizontal slide animation on week change. Introduce a weekAnchor state in each app separate from the selected day so arrows move only the strip (stats/cards unchanged) and picking a day updates stats + snaps the anchor. Replace the color meal emojis (☕🍔🍽️🍎) with four new monochrome line glyphs (coffee, burger, plate, apple) in var(--mut). Remove only the top-right new-habit + in the Habits Today header. Out of scope: habits year-heatmap (Overview), the NutritionSheet's own date nav, any DB/schema/API change, a global week-start preference, the bottom "New habit" card + empty-state link (kept).

Task list

Task 1: Add four monochrome meal glyphs to the icon set and swap DayView to use them

  • Files: /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/ui/icons.tsx, /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/meals/DayView.tsx
  • What: Add coffee, burger, plate, apple line-art SVG entries to the icon map (stroke currentColor, same style as existing glyphs). In DayView, change MEAL_ICON from emoji strings to <Icon name=...> render (Breakfast→coffee, Lunch→burger, Dinner→plate, Snack→apple), colored var(--mut) via the existing .ml-meal-icon wrapper.
  • Verification: cd /home/justinwieb/forge-suite-wt/feat/shared-week-nav && npx tsc --noEmit 2>&1 | head shows no new errors; load http://100.97.43.104:3068 Food Log → the four meal headers show grey line icons, not color emoji.
  • Commit: feat(meals): monochrome line icons for meal headers

Task 2: Remove the Habits Today header "+" button

  • Files: /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/habits/TodayView.tsx
  • What: Delete the <button className="hb-newbtn" onClick={onNew}> in the hb-today-head block (line ~99). Leave onNew prop and its other callers (bottom hb-addcard, empty-state hb-linkbtn) intact.
  • Verification: npx tsc --noEmit clean; Habits Today header no longer shows a top-right +; the bottom "New habit" card still works.
  • Commit: feat(habits): remove redundant header new-habit button

Task 3: Build the shared WeekStrip component + CSS (presentational shell, not yet wired)

  • Files (new): /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/shared/WeekStrip.tsx, /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/shared/weekstrip.css
  • What: WeekStrip props: { weekLabel: string; days: Array<{ date; dow; num; fraction; isToday; isSelected }>; onSelectDay(date); onPrev(); onNext(); canNext: boolean; slideKey: string|number }. Renders: "Week of ‹label›" header, a tall nav pill (‹/› buttons flanking, next disabled when !canNext), then the 7 day columns (DOW letter, SVG completion/calorie ring driven by fraction, day number). A CSS keyframe slides the day-column track on slideKey change (direction inferred via a data attribute set by onPrev/onNext). weekstrip.css uses wk- prefixed classes, token-driven (var(--*)), matching the existing .ml-daycol/.hb-daycol visuals.
  • Verification: npx tsc --noEmit clean (component compiles standalone; unused import is fine this task). Component not yet rendered anywhere.
  • Commit: feat(apps): shared WeekStrip presentational component + css

Task 4: Wire Food Log DayView to WeekStrip with weekAnchor state

  • Files: /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/meals/DayView.tsx, /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/meals/meals.css, /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/meals/MealsApp.tsx
  • What: Add weekAnchor state (init today). Derive strip week from sundayWeek(weekAnchor); build days[] from weekStripData with per-day calorie fraction. Replace the ml-weekstrip markup with <WeekStrip>; onPrev/onNext shift weekAnchor by ±7 days (guard next ≤ current week); onSelectDay sets date (updates stats) and snaps weekAnchor to that day. Point the prior-week ensure-load effect at weekAnchor. Remove now-dead .ml-weekstrip/.ml-daycol CSS. Import weekstrip.css in MealsApp.tsx (server component, avoids FOUC).
  • Verification: npx tsc --noEmit clean; on :3068 Food Log: ‹ slides to previous week and shows "Week of …", cards/calorie totals stay on the previously selected day until a new day is tapped; › disabled on the current week.
  • Commit: feat(meals): week navigation via shared WeekStrip (anchor decoupled from selected day)

Task 5: Wire Habits TodayView to WeekStrip with weekAnchor + ensureSince

  • Files: /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/habits/TodayView.tsx, /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/habits/habits.css, /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/habits/HabitsClient.tsx, /home/justinwieb/forge-suite-wt/feat/shared-week-nav/components/apps/habits/HabitsApp.tsx
  • What: Add weekAnchor state (init today); derive Monday-start weekDays from it; build days[] with dayFraction. Replace hb-weekstrip markup with <WeekStrip> (Mon-start DOW letters); onPrev/onNext shift ±7 (next guarded); onSelectDay sets selDate + snaps anchor. Add onEnsureSince prop to TodayView, passed from HabitsClient, called when weekAnchor moves earlier so old logs load. Remove dead .hb-weekstrip/.hb-daycol CSS. Import weekstrip.css in HabitsApp.tsx.
  • Verification: npx tsc --noEmit clean; on :3068 Habits Today: ‹ slides to previous week with completion rings for that week, selected day's cards unchanged until a day is tapped; older weeks' rings populate (ensureSince fired).
  • Commit: feat(habits): week navigation via shared WeekStrip

Task 6: Verify end-to-end, then register and document

  • Files: /home/justinwieb/forge/memory/general/reference_creatortrack_week_strip.md (new), /home/justinwieb/.claude/projects/-home-justinwieb-forge/memory/MEMORY.md (index line)
  • What: Drive both surfaces in the browser on :3068 against the refreshed real-data clone (prev/next slide, "Week of X", stats-frozen-until-day-click, disabled next on current week, monochrome icons, no habits header +). Write the reference topic file (component location, props contract, weekAnchor pattern, that both apps share it) with the URL: mkdocs line; add its MEMORY.md index entry. Run npx tsc --noEmit (and npm run lint if quick) as the final gate.
  • Verification: browser drive passes on both surfaces; npx tsc --noEmit clean; MEMORY.md shows the new reference line.
  • Commit: docs(week-strip): register shared WeekStrip reference + memory index