Skip to content

URL: https://mkdocs.justinsforge.com/memory/general/reference_creatortrack_week_strip/

CreatorTrack shared WeekStrip

One presentational component drives the week strip on both the Food Log (DayView) and Habits (TodayView) surfaces, so a visual/interaction change lands in one place and applies to both.

  • Component: components/apps/shared/WeekStrip.tsx
  • CSS: components/apps/shared/weekstrip.css (.wk-* classes, token-driven). Imported by BOTH server components (MealsApp.tsx, HabitsApp.tsx) so it ships in layout CSS and never FOUCs (same rule the module CSS follows).

Props contract

weekLabel: string        // e.g. "Jul 5" -> renders "Week of Jul 5"
days: WeekStripDay[]     // { date, dow, num, fraction(0..1), isToday, isSelected }
onSelectDay(date)        // tap a day
onPrev() / onNext()      // page the shown week +/- 7 days
canNext: boolean         // false on the current week (no paging into the future)
slideKey: string|number  // change once per shown week -> replays the slide keyframe
ringColor?: string       // optional ring stroke (habits passes var(--accent); meals default var(--accent2))
Presentational only: each app computes its own per-day data (calorie ring vs. habit-completion ring, Sunday-start vs. Monday-start DOW letters) and injects it.

The weekAnchor pattern (key design point)

Each app keeps a weekAnchor state separate from the selected day (date in meals, selDate in habits): - onPrev/onNext move only weekAnchor -> the strip slides + the "Week of X" label updates, but the cards/stats stay on the previously selected day. - onSelectDay sets the selected day (updates stats) AND snaps weekAnchor to that day's week. - Paging back fires onEnsureSince(weekStart) so older weeks' data loads (meals keys the prior-week ensure-load on the anchor; habits gained an onEnsureSince prop from HabitsClient).

Layout

Split nav arrows flank the days: previous on the far left, next on the far right, 7 day columns in the middle, "Week of X" label centered above. Slide animation (wk-slide-prev/wk-slide-next) plays on the keyed day-track when the shown week changes.

Also in this change (branch feat/shared-week-nav, 2026-07-05)

  • Monochrome meal icons: Food Log meal headers use new line glyphs coffee/burger/plate/apple (added to components/ui/icons.tsx) in var(--mut), replacing the color emoji.
  • Habits header + removed: the redundant top-right new-habit button; bottom "New habit" card + empty-state link stay.
  • Dev testing against real data: [[reference_creatortrack_dev_testing]] (WORKSPACE_DEV_AUTH server-side auth; base = creatortrack_dev_base clone of lifeos). Base refresh script forge_creatortrack_dev_base.sh now excludes app.api_connections data (FORCE RLS + real OAuth creds) from clones.