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} + + + ); +}