diff --git a/apps/mobile/src/app/(tabs)/_layout.tsx b/apps/mobile/src/app/(tabs)/_layout.tsx
index e24bf2a..ce6bc76 100644
--- a/apps/mobile/src/app/(tabs)/_layout.tsx
+++ b/apps/mobile/src/app/(tabs)/_layout.tsx
@@ -86,6 +86,13 @@ export default function TabsLayout() {
tabBarIcon: ({ focused }) => ,
}}
/>
+ ,
+ }}
+ />
(() => toKey(new Date()));
+ const todayKey = toKey(new Date());
+
+ const selected = useMemo(() => new Date(`${selectedKey}T00:00:00`), [selectedKey]);
+ const weekDays = useMemo(() => {
+ const monday = startOfWeekMonday(selected);
+ return Array.from({ length: 7 }, (_, i) => addDays(monday, i));
+ }, [selected]);
+
+ const monthLabel = cap(
+ new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(selected),
+ );
+ const dayHeader = cap(
+ new Intl.DateTimeFormat(locale, { weekday: "long", day: "numeric", month: "long" }).format(
+ selected,
+ ),
+ );
+ const weekdayShort = new Intl.DateTimeFormat(locale, { weekday: "short" });
+
+ return (
+
+
+ setSelectedKey(toKey(addDays(selected, -7)))} hitSlop={8}>
+
+ ‹
+
+
+ {monthLabel}
+ setSelectedKey(toKey(addDays(selected, 7)))} hitSlop={8}>
+
+ ›
+
+
+
+
+ setSelectedKey(todayKey)}
+ style={{ alignSelf: "flex-start", paddingVertical: spacing.xs }}
+ >
+
+ {t("plan.today")}
+
+
+
+
+ {weekDays.map((d) => {
+ const key = toKey(d);
+ const isSelected = key === selectedKey;
+ const isToday = key === todayKey;
+ return (
+ setSelectedKey(key)}
+ accessibilityRole="button"
+ accessibilityState={{ selected: isSelected }}
+ style={{
+ flex: 1,
+ alignItems: "center",
+ paddingVertical: spacing.xs,
+ marginHorizontal: 2,
+ borderRadius: radius.md,
+ backgroundColor: isSelected
+ ? colors.primary
+ : isToday
+ ? colors.primarySoft
+ : "transparent",
+ }}
+ >
+
+ {cap(weekdayShort.format(d))}
+
+
+ {d.getDate()}
+
+
+ );
+ })}
+
+
+ {dayHeader}
+
+
+ );
+}