From 51bf195664127a37b174ec0e0d1a475bf3f3b1fb Mon Sep 17 00:00:00 2001
From: Sebastian Krupinski <krupinski01@gmail.com>
Date: Mon, 29 Jun 2026 21:41:27 -0400
Subject: [PATCH] feat: visible date range

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
---
 src/components/AgendaView.vue       | 41 +++++++-----------
 src/components/CalendarView.vue     | 31 ++++++++++++--
 src/components/DaysView.vue         | 20 +++------
 src/components/MonthView.vue        | 34 ++++++---------
 src/pages/ChronoPage.vue            |  9 +++-
 src/stores/chronoOperationsStore.ts | 17 +++++++-
 src/stores/chronoUiStore.ts         |  5 +++
 src/types/index.ts                  |  6 +++
 src/utils/dateRanges.ts             | 55 +++++++++++++++++++++++++
 tests/js/unit/dateRanges.test.ts    | 64 +++++++++++++++++++++++++++++
 10 files changed, 214 insertions(+), 68 deletions(-)
 create mode 100644 src/utils/dateRanges.ts
 create mode 100644 tests/js/unit/dateRanges.test.ts

diff --git a/src/components/AgendaView.vue b/src/components/AgendaView.vue
index 9aeaa5a..9a26701 100644
--- a/src/components/AgendaView.vue
+++ b/src/components/AgendaView.vue
@@ -53,6 +53,7 @@ import { AGENDA_VIEW_SPANS, spanToDays, type AgendaViewSpan } from '@/types/span
 import type { EntityObject } from '@ChronoManager/models/entity';
 import type { CollectionObject } from '@ChronoManager/models/collection';
 import { EventObject } from '@ChronoManager/models/event';
+import { daysVisibleRange, shiftLocalDays } from '@/utils/dateRanges';
 
 type CalendarEntity = EntityObject;
 type CalendarCollection = CollectionObject;
@@ -60,25 +61,18 @@ type CalendarCollection = CollectionObject;
 const props = defineProps<{
   events: CalendarEntity[];
   calendars: CalendarCollection[];
-  currentDate?: Date;
+  currentDate: Date;
   initialSpan?: AgendaViewSpan;
 }>();
 
 const selectedSpan = ref<AgendaViewSpan>(props.initialSpan ?? '1w');
-const localDate = ref(new Date(props.currentDate ?? new Date()));
 
 const emit = defineEmits<{
   'event-click': [event: CalendarEntity];
   'update:span': [span: AgendaViewSpan];
+  'update:current-date': [date: Date];
 }>();
 
-// Watch for external date changes (e.g., from mini calendar)
-watch(() => props.currentDate, (newDate) => {
-  if (newDate) {
-    localDate.value = new Date(newDate);
-  }
-});
-
 watch(() => props.initialSpan, (newSpan) => {
   if (newSpan && newSpan !== selectedSpan.value) {
     selectedSpan.value = newSpan;
@@ -95,34 +89,29 @@ function getSpanDays(): number {
 }
 
 function previousPeriod() {
-  const date = new Date(localDate.value);
-  date.setDate(date.getDate() - getSpanDays());
-  localDate.value = date;
+  emit('update:current-date', shiftLocalDays(props.currentDate, -getSpanDays()));
 }
 
 function nextPeriod() {
-  const date = new Date(localDate.value);
-  date.setDate(date.getDate() + getSpanDays());
-  localDate.value = date;
+  emit('update:current-date', shiftLocalDays(props.currentDate, getSpanDays()));
 }
 
 function goToToday() {
-  localDate.value = new Date();
+  emit('update:current-date', new Date());
 }
 
 const dateRange = computed(() => {
-  const start = new Date(localDate.value);
-  start.setHours(0, 0, 0, 0);
-  
-  const end = new Date(start);
-  end.setDate(end.getDate() + getSpanDays() - 1);
-  end.setHours(23, 59, 59, 999);
-  
-  return { start, end };
+  const range = daysVisibleRange(props.currentDate, getSpanDays());
+  return {
+    start: new Date(range.startMs),
+    end: new Date(range.endMs),
+  };
 });
 
 const dateRangeLabel = computed(() => {
-  const { start, end } = dateRange.value;
+  const { start, end: exclusiveEnd } = dateRange.value;
+  const end = new Date(exclusiveEnd);
+  end.setDate(end.getDate() - 1);
   const formatOptions: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric' };
   
   if (getSpanDays() === 1) {
@@ -144,7 +133,7 @@ const groupedEvents = computed(() => {
     const startsOn = getEventProperties(e).startsOn;
     if (typeof startsOn !== 'string') return false;
     const eventStart = new Date(startsOn);
-    return eventStart >= start && eventStart <= end;
+    return eventStart >= start && eventStart < end;
   });
   
   const sorted = filtered.sort((a, b) => 
diff --git a/src/components/CalendarView.vue b/src/components/CalendarView.vue
index 3bc0968..26c5b4b 100644
--- a/src/components/CalendarView.vue
+++ b/src/components/CalendarView.vue
@@ -15,6 +15,7 @@
       @date-click="$emit('date-click', $event)"
       @event-hover="handleEventHover"
       @event-hover-end="hidePopup"
+      @update:current-date="$emit('update:current-date', $event)"
     />
     <DaysView
       v-else-if="view === 'days'"
@@ -27,6 +28,7 @@
       @event-hover="handleEventHover"
       @event-hover-end="hidePopup"
       @update:span="$emit('update:days-span', $event)"
+      @update:current-date="$emit('update:current-date', $event)"
     />
     <AgendaView
       v-else-if="view === 'agenda'"
@@ -36,21 +38,24 @@
       :initial-span="initialAgendaViewSpan"
       @event-click="$emit('event-click', $event)"
       @update:span="$emit('update:agenda-span', $event)"
+      @update:current-date="$emit('update:current-date', $event)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import MonthView from './MonthView.vue';
 import DaysView from './DaysView.vue';
 import AgendaView from './AgendaView.vue';
 import EventViewerPopup from './EventViewerPopup.vue';
-import type { AgendaViewSpan, DaysViewSpan } from '@/types/spans';
+import { spanToDays, type AgendaViewSpan, type DaysViewSpan } from '@/types/spans';
 import type { EntityObject } from '@ChronoManager/models/entity';
 import type { CollectionObject } from '@ChronoManager/models/collection';
+import type { VisibleDateRange } from '@/types';
+import { daysVisibleRange, monthGridVisibleRange } from '@/utils/dateRanges';
 
-defineProps<{
+const props = defineProps<{
   view: 'days' | 'month' | 'agenda';
   currentDate: Date;
   events: EntityObject[];
@@ -59,13 +64,31 @@ defineProps<{
   initialAgendaViewSpan?: AgendaViewSpan;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   'event-click': [event: EntityObject];
   'date-click': [date: Date];
   'update:days-span': [span: DaysViewSpan];
   'update:agenda-span': [span: AgendaViewSpan];
+  'update:current-date': [date: Date];
+  'update:visible-range': [range: VisibleDateRange];
 }>();
 
+const visibleRange = computed(() => {
+  if (props.view === 'month') {
+    return monthGridVisibleRange(props.currentDate);
+  }
+
+  const span = props.view === 'agenda'
+    ? props.initialAgendaViewSpan ?? '1w'
+    : props.initialDaysSpan ?? '7d';
+
+  return daysVisibleRange(props.currentDate, spanToDays(span));
+});
+
+watch(visibleRange, range => {
+  emit('update:visible-range', range);
+}, { immediate: true });
+
 // Popup state
 const hoveredEvent = ref<EntityObject | null>(null);
 const popupPosition = ref({ x: 0, y: 0 });
diff --git a/src/components/DaysView.vue b/src/components/DaysView.vue
index 4fd402c..6e926dd 100644
--- a/src/components/DaysView.vue
+++ b/src/components/DaysView.vue
@@ -107,6 +107,7 @@ import {
   getTimedEventsForDate,
   type MultiDaySegment,
 } from '@/utils/calendarHelpers';
+import { shiftLocalDays } from '@/utils/dateRanges';
 import { DAYS_VIEW_SPANS, spanToDays, type DaysViewSpan } from '@/types/spans';
 import type { EntityObject } from '@ChronoManager/models/entity';
 import type { CollectionObject } from '@ChronoManager/models/collection';
@@ -126,7 +127,6 @@ const props = defineProps<{
 
 const selectedSpan = ref<DaysViewSpan>(props.initialSpan ?? '7d');
 const daysCount = computed(() => spanToDays(selectedSpan.value));
-const localDate = ref(new Date(props.currentDate));
 
 const emit = defineEmits<{
   'event-click': [event: CalendarEntity];
@@ -134,13 +134,9 @@ const emit = defineEmits<{
   'event-hover-end': [];
   'date-click': [date: Date];
   'update:span': [span: DaysViewSpan];
+  'update:current-date': [date: Date];
 }>();
 
-// Watch for external date changes (e.g., from mini calendar)
-watch(() => props.currentDate, (newDate) => {
-  localDate.value = new Date(newDate);
-});
-
 watch(() => props.initialSpan, (newSpan) => {
   if (newSpan && newSpan !== selectedSpan.value) {
     selectedSpan.value = newSpan;
@@ -153,19 +149,15 @@ function setSpan(span: DaysViewSpan) {
 }
 
 function previousPeriod() {
-  const date = new Date(localDate.value);
-  date.setDate(date.getDate() - daysCount.value);
-  localDate.value = date;
+  emit('update:current-date', shiftLocalDays(props.currentDate, -daysCount.value));
 }
 
 function nextPeriod() {
-  const date = new Date(localDate.value);
-  date.setDate(date.getDate() + daysCount.value);
-  localDate.value = date;
+  emit('update:current-date', shiftLocalDays(props.currentDate, daysCount.value));
 }
 
 function goToToday() {
-  localDate.value = new Date();
+  emit('update:current-date', new Date());
 }
 
 const dateRangeLabel = computed(() => {
@@ -189,7 +181,7 @@ const dateRangeLabel = computed(() => {
 
 const visibleDates = computed(() => {
   const dates: Date[] = [];
-  const start = new Date(localDate.value);
+  const start = new Date(props.currentDate);
   
   for (let i = 0; i < daysCount.value; i++) {
     dates.push(new Date(start));
diff --git a/src/components/MonthView.vue b/src/components/MonthView.vue
index 986b1db..4954604 100644
--- a/src/components/MonthView.vue
+++ b/src/components/MonthView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
 import {
   startOfDay,
   daysDiff,
@@ -7,6 +7,7 @@ import {
   getSingleDayEventsForDate,
   type MultiDaySegment,
 } from '@/utils/calendarHelpers';
+import { shiftLocalMonths } from '@/utils/dateRanges';
 
 const EVENT_HEIGHT = 22; // Height of each event row in pixels
 const MAX_VISIBLE_EVENTS = 3; // Maximum event rows to show before "+N more"
@@ -24,42 +25,31 @@ const props = defineProps<{
   calendars: any[];
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   'event-click': [event: any];
   'date-click': [date: Date];
   'event-hover': [data: { event: MouseEvent; entity: any }];
   'event-hover-end': [];
+  'update:current-date': [date: Date];
 }>();
 
 const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 
-// Local date for navigation
-const localDate = ref(new Date(props.currentDate));
-
-// Watch for external date changes (e.g., from mini calendar)
-watch(() => props.currentDate, (newDate) => {
-  localDate.value = new Date(newDate);
-});
-
 // Navigation functions
 function previousMonth() {
-  const date = new Date(localDate.value);
-  date.setMonth(date.getMonth() - 1);
-  localDate.value = date;
+  emit('update:current-date', shiftLocalMonths(props.currentDate, -1));
 }
 
 function nextMonth() {
-  const date = new Date(localDate.value);
-  date.setMonth(date.getMonth() + 1);
-  localDate.value = date;
+  emit('update:current-date', shiftLocalMonths(props.currentDate, 1));
 }
 
 function goToToday() {
-  localDate.value = new Date();
+  emit('update:current-date', new Date());
 }
 
 const monthLabel = computed(() => {
-  return localDate.value.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+  return props.currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
 });
 
 // Track container size for dynamic calculations
@@ -83,8 +73,8 @@ onUnmounted(() => {
 
 // Calculate how many weeks are needed for this month
 const weeksNeeded = computed(() => {
-  const year = localDate.value.getFullYear();
-  const month = localDate.value.getMonth();
+  const year = props.currentDate.getFullYear();
+  const month = props.currentDate.getMonth();
   const firstDay = new Date(year, month, 1);
   const lastDay = new Date(year, month + 1, 0);
   
@@ -97,8 +87,8 @@ const weeksNeeded = computed(() => {
 
 // Build weeks with multiday event segments
 const weeks = computed<WeekData[]>(() => {
-  const year = localDate.value.getFullYear();
-  const month = localDate.value.getMonth();
+  const year = props.currentDate.getFullYear();
+  const month = props.currentDate.getMonth();
   const firstDay = new Date(year, month, 1);
   const gridStart = new Date(firstDay);
   gridStart.setDate(gridStart.getDate() - gridStart.getDay());
diff --git a/src/pages/ChronoPage.vue b/src/pages/ChronoPage.vue
index cd5c50b..61b3f3b 100644
--- a/src/pages/ChronoPage.vue
+++ b/src/pages/ChronoPage.vue
@@ -67,6 +67,7 @@ const {
 const {
   initialize,
   setViewMode,
+  setCurrentDate,
   selectCalendar,
   openEditCalendar,
   selectTaskList,
@@ -89,7 +90,11 @@ const {
   closeImport,
 } = chronoUiStore;
 
-const { toggleCalendarVisibility, toggleTaskComplete } = chronoOperationsStore;
+const {
+  setVisibleRange,
+  toggleCalendarVisibility,
+  toggleTaskComplete,
+} = chronoOperationsStore;
 
 function setCalendarView(view: CalendarViewType) {
   chronoSettingsStore.calendarView = view;
@@ -278,6 +283,8 @@ watch(() => route.fullPath, () => {
             :initial-agenda-view-span="agendaViewSpan"
             @event-click="editEvent"
             @date-click="createEventFromDate"
+            @update:current-date="setCurrentDate"
+            @update:visible-range="setVisibleRange"
             @update:days-span="setDaysViewSpan"
             @update:agenda-span="setAgendaViewSpan"
           />
diff --git a/src/stores/chronoOperationsStore.ts b/src/stores/chronoOperationsStore.ts
index 5d164d6..5eaaa03 100644
--- a/src/stores/chronoOperationsStore.ts
+++ b/src/stores/chronoOperationsStore.ts
@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 import { defineStore } from 'pinia'
 import { CollectionObject } from '@ChronoManager/models/collection'
 import { EntityObject } from '@ChronoManager/models/entity'
@@ -9,6 +9,7 @@ import { useCollectionsStore } from '@ChronoManager/stores/collectionsStore'
 import { useEntitiesStore } from '@ChronoManager/stores/entitiesStore'
 import { useServicesStore } from '@ChronoManager/stores/servicesStore'
 import { useImportStore } from '@ChronoManager/stores/importStore'
+import type { VisibleDateRange } from '@/types'
 
 type ChronoEntityProperties = EventObject | TaskObject
 
@@ -19,6 +20,7 @@ export const useChronoOperationsStore = defineStore('chronoOperationsStore', ()
   const importStore = useImportStore()
 
   const loading = ref(false)
+  const visibleRange = shallowRef<VisibleDateRange | null>(null)
 
   const collections = computed(() => collectionsStore.collections)
   const entities = computed(() => entitiesStore.entities)
@@ -43,6 +45,17 @@ export const useChronoOperationsStore = defineStore('chronoOperationsStore', ()
   })
   const filteredTasks = computed(() => tasks.value)
 
+  function setVisibleRange(range: VisibleDateRange) {
+    if (
+      visibleRange.value?.startMs === range.startMs
+      && visibleRange.value.endMs === range.endMs
+    ) {
+      return
+    }
+
+    visibleRange.value = { ...range }
+  }
+
   function prepareEntityProperties(entity: EntityObject): ChronoEntityProperties {
     const properties = entity.properties as ChronoEntityProperties
     const now = new Date().toISOString()
@@ -154,6 +167,7 @@ export const useChronoOperationsStore = defineStore('chronoOperationsStore', ()
 
   return {
     loading,
+    visibleRange,
     collections,
     entities,
     calendars,
@@ -162,6 +176,7 @@ export const useChronoOperationsStore = defineStore('chronoOperationsStore', ()
     tasks,
     filteredEvents,
     filteredTasks,
+    setVisibleRange,
     saveEntity,
     deleteEntity,
     toggleCalendarVisibility,
diff --git a/src/stores/chronoUiStore.ts b/src/stores/chronoUiStore.ts
index 70edc6c..35b500e 100644
--- a/src/stores/chronoUiStore.ts
+++ b/src/stores/chronoUiStore.ts
@@ -30,6 +30,10 @@ export const useChronoUiStore = defineStore('chronoUiStore', () => {
     viewMode.value = mode
   }
 
+  function setCurrentDate(date: Date) {
+    currentDate.value = new Date(date)
+  }
+
   function selectCalendar(calendar: CollectionObject) {
     selectedCollection.value = calendar
   }
@@ -214,6 +218,7 @@ export const useChronoUiStore = defineStore('chronoUiStore', () => {
     collectionEditorType,
     isTaskView,
     setViewMode,
+    setCurrentDate,
     selectCalendar,
     selectTaskList,
     openCreateCalendar,
diff --git a/src/types/index.ts b/src/types/index.ts
index 102da54..a7ddde9 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -7,6 +7,12 @@
 // Local UI-specific types
 export type CalendarView = 'days' | 'month' | 'agenda';
 
+/** Half-open local calendar range: [startMs, endMs). */
+export interface VisibleDateRange {
+  startMs: number;
+  endMs: number;
+}
+
 export interface ViewState {
   currentView: CalendarView;
   currentDate: Date;
diff --git a/src/utils/dateRanges.ts b/src/utils/dateRanges.ts
new file mode 100644
index 0000000..dc200d9
--- /dev/null
+++ b/src/utils/dateRanges.ts
@@ -0,0 +1,55 @@
+import type { VisibleDateRange } from '../types'
+
+export function startOfLocalDay(date: Date): Date {
+  const start = new Date(date)
+  start.setHours(0, 0, 0, 0)
+  return start
+}
+
+export function shiftLocalDays(date: Date, days: number): Date {
+  const shifted = new Date(date)
+  shifted.setDate(shifted.getDate() + days)
+  return shifted
+}
+
+export function shiftLocalMonths(date: Date, months: number): Date {
+  const shifted = new Date(date)
+  const targetDay = shifted.getDate()
+
+  shifted.setDate(1)
+  shifted.setMonth(shifted.getMonth() + months)
+
+  const lastDayOfTargetMonth = new Date(
+    shifted.getFullYear(),
+    shifted.getMonth() + 1,
+    0,
+  ).getDate()
+  shifted.setDate(Math.min(targetDay, lastDayOfTargetMonth))
+
+  return shifted
+}
+
+export function daysVisibleRange(date: Date, days: number): VisibleDateRange {
+  const start = startOfLocalDay(date)
+  const end = shiftLocalDays(start, Math.max(1, days))
+
+  return {
+    startMs: start.getTime(),
+    endMs: end.getTime(),
+  }
+}
+
+export function monthGridVisibleRange(date: Date): VisibleDateRange {
+  const firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
+  const gridStart = new Date(firstDay)
+  gridStart.setDate(gridStart.getDate() - gridStart.getDay())
+
+  const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0)
+  const weeks = Math.ceil((firstDay.getDay() + lastDay.getDate()) / 7)
+  const gridEnd = shiftLocalDays(gridStart, weeks * 7)
+
+  return {
+    startMs: gridStart.getTime(),
+    endMs: gridEnd.getTime(),
+  }
+}
diff --git a/tests/js/unit/dateRanges.test.ts b/tests/js/unit/dateRanges.test.ts
new file mode 100644
index 0000000..c6768f0
--- /dev/null
+++ b/tests/js/unit/dateRanges.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest'
+import {
+  daysVisibleRange,
+  monthGridVisibleRange,
+  shiftLocalDays,
+  shiftLocalMonths,
+} from '../../../src/utils/dateRanges'
+
+describe('calendar visible ranges', () => {
+  it('uses a half-open range for a day span', () => {
+    const range = daysVisibleRange(new Date(2026, 5, 15, 13, 45), 7)
+    const start = new Date(range.startMs)
+    const end = new Date(range.endMs)
+
+    expect([start.getFullYear(), start.getMonth(), start.getDate(), start.getHours()])
+      .toEqual([2026, 5, 15, 0])
+    expect([end.getFullYear(), end.getMonth(), end.getDate(), end.getHours()])
+      .toEqual([2026, 5, 22, 0])
+  })
+
+  it('uses calendar-day arithmetic across a daylight-saving boundary', () => {
+    const range = daysVisibleRange(new Date(2026, 2, 8, 12), 1)
+    const start = new Date(range.startMs)
+    const end = new Date(range.endMs)
+
+    expect(start.getHours()).toBe(0)
+    expect(end.getHours()).toBe(0)
+    expect(end.getDate()).toBe(start.getDate() + 1)
+  })
+
+  it('includes every leading and trailing day rendered by a month grid', () => {
+    const range = monthGridVisibleRange(new Date(2026, 5, 15))
+    const start = new Date(range.startMs)
+    const end = new Date(range.endMs)
+
+    expect([start.getFullYear(), start.getMonth(), start.getDate()]).toEqual([2026, 4, 31])
+    expect([end.getFullYear(), end.getMonth(), end.getDate()]).toEqual([2026, 6, 5])
+  })
+
+  it('calculates a leap-year February grid', () => {
+    const range = monthGridVisibleRange(new Date(2024, 1, 29))
+    const start = new Date(range.startMs)
+    const end = new Date(range.endMs)
+
+    expect([start.getFullYear(), start.getMonth(), start.getDate()]).toEqual([2024, 0, 28])
+    expect([end.getFullYear(), end.getMonth(), end.getDate()]).toEqual([2024, 2, 3])
+  })
+})
+
+describe('calendar navigation', () => {
+  it('clamps month navigation instead of skipping a shorter month', () => {
+    const shifted = shiftLocalMonths(new Date(2026, 0, 31, 9), 1)
+
+    expect([shifted.getFullYear(), shifted.getMonth(), shifted.getDate(), shifted.getHours()])
+      .toEqual([2026, 1, 28, 9])
+  })
+
+  it('uses calendar-day navigation', () => {
+    const shifted = shiftLocalDays(new Date(2026, 5, 30, 9), 1)
+
+    expect([shifted.getFullYear(), shifted.getMonth(), shifted.getDate(), shifted.getHours()])
+      .toEqual([2026, 6, 1, 9])
+  })
+})