fix(calendar): focus end of week when using reverse-chronological order

ensures the active date points to the last day of the period when navigating through calendar weeks in reverse order, which is the expected behavior for history and activity lists.

Author: vladjerca

projects/client/src/lib/features/calendar/context/useCalendarPeriod.ts

@@ -1,11 +1,13 @@
 import { getLocale } from '$lib/features/i18n/index.ts';
 import { getStartOfWeek } from '$lib/utils/date/getStartOfWeek.ts';
 import { isCurrentWeek } from '$lib/utils/date/isCurrentWeek.ts';
+import { addDays } from 'date-fns/addDays';
 import { addWeeks } from 'date-fns/addWeeks';
 import { subWeeks } from 'date-fns/subWeeks';
 import { map } from 'rxjs';
 import { AnalyticsEvent } from '../../analytics/events/AnalyticsEvent.ts';
 import { useTrack } from '../../analytics/useTrack.ts';
+import type { CalendarOrder } from '../models/CalendarOrder.ts';
 import { getCalendarContext } from './getCalendarContext.ts';
 
 type Direction = 'next' | 'previous';
@@ -19,8 +21,21 @@ function getNextOrPreviousPeriod(date: Date, direction: Direction) {
   return getStartOfWeek(targetWeek, getLocale());
 }
 
+const LAST_DAY_OF_WEEK_OFFSET = 6;
+
+function getActiveDate(weekStart: Date, order: CalendarOrder): Date {
+  if (order === 'reverse-chronological') {
+    return addDays(weekStart, LAST_DAY_OF_WEEK_OFFSET);
+  }
+
+  return weekStart;
+}
+
 // FIXME: calendar navigation should be reflected in url
-export function useCalendarPeriod() {
+export function useCalendarPeriod(
+  options?: { order?: CalendarOrder },
+) {
+  const { order = 'chronological' } = options ?? {};
   const { startDate, activeDate } = getCalendarContext();
   const { track } = useTrack(AnalyticsEvent.CalendarPeriod);
 
@@ -29,7 +44,7 @@ export function useCalendarPeriod() {
     const date = startDate.value;
     const newStart = getNextOrPreviousPeriod(date, direction);
 
-    activeDate.next(newStart);
+    activeDate.next(getActiveDate(newStart, order));
     startDate.next(newStart);
   };
 

projects/client/src/lib/features/calendar/models/CalendarLayoutProps.ts

@@ -1,12 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { Calendar } from './Calendar.ts';
 import type { CalendarNavigationProps } from './CalendarNavigationProps.ts';
+import type { CalendarOrder } from './CalendarOrder.ts';
 
 export type CalendarLayoutProps<T> = {
   calendar: Calendar<T>;
   isLoading: boolean;
   item: Snippet<[T]>;
   layout?: 'list' | 'grid';
   empty?: Snippet;
-  order?: 'chronological' | 'reverse-chronological';
+  order?: CalendarOrder;
 } & CalendarNavigationProps;

projects/client/src/lib/features/calendar/models/CalendarOrder.ts

@@ -0,0 +1 @@
+export type CalendarOrder = 'chronological' | 'reverse-chronological';

projects/client/src/lib/sections/lists/activity/ActivityPaginatedList.svelte

@@ -11,7 +11,7 @@
   const { filterMap } = useFilter();
 
   const { startDate, endDate, activeDate, next, previous, reset } =
-    useCalendarPeriod();
+    useCalendarPeriod({ order: 'reverse-chronological' });
 
   const now = new Date();
 

projects/client/src/lib/sections/lists/history/PersonalHistoryPaginatedList.svelte

@@ -11,7 +11,7 @@
   const { mode }: { mode?: DiscoverMode } = $props();
 
   const { startDate, endDate, activeDate, next, previous, reset } =
-    useCalendarPeriod();
+    useCalendarPeriod({ order: 'reverse-chronological' });
 
   const historyType = $derived(toRecentlyWatchedType(mode));