refactor: code clean up

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/pages/ChronoPage.vue

@@ -5,12 +5,12 @@ import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 import { useDisplay } from 'vuetify';
 import { useModuleStore } from '@KTXC/stores/moduleStore';
-import { useChronoInstancesStore } from '@/stores/chronoInstancesStore';
 import { useChronoOperationsStore } from '@/stores/chronoOperationsStore';
 import { useChronoSettingsStore } from '@/stores/chronoSettingsStore';
 import { useChronoUiStore } from '@/stores/chronoUiStore';
 import type { CalendarView as CalendarViewType } from '@/types';
-import type { AgendaViewSpan, DaysViewSpan } from '@/types/spans';
+import { spanToDays, type AgendaViewSpan, type DaysViewSpan } from '@/types/spans';
+import { daysVisibleRange, monthGridVisibleRange } from '@/utils/date';
 import CollectionList from '@/components/CollectionList.vue';
 import CollectionEditor from '@/components/CollectionEditor.vue';
 import CalendarView from '@/components/CalendarView.vue';
@@ -19,6 +19,7 @@ import EventEditor from '@/components/EventEditor.vue';
 import TaskEditor from '@/components/TaskEditor.vue';
 import MiniCalendar from '@/components/MiniCalendar.vue';
 import ImportDialog from '@/components/ImportDialog.vue';
+import { EpochSpan } from '@/types/date';
 
 // Vuetify display
 const display = useDisplay();
@@ -29,7 +30,6 @@ const isChronoManagerAvailable = computed(() => {
   return moduleStore.has('chrono_manager') || moduleStore.has('ChronoManager')
 });
 
-const chronoInstancesStore = useChronoInstancesStore();
 const chronoOperationsStore = useChronoOperationsStore();
 const chronoSettingsStore = useChronoSettingsStore();
 const chronoUiStore = useChronoUiStore();
@@ -49,8 +49,6 @@ const {
   collections,
 } = storeToRefs(chronoOperationsStore);
 
-const { setVisibleRange } = chronoInstancesStore;
-
 const {
   currentDate,
   sidebarVisible,
@@ -67,6 +65,8 @@ const {
   isTaskView,
 } = storeToRefs(chronoUiStore);
 
+const { loadVisibleRange: loadVisibleRangeOperations } = chronoOperationsStore;
+
 const {
   initialize,
   setViewMode,
@@ -96,6 +96,7 @@ const {
 const {
   toggleCalendarVisibility,
   toggleTaskComplete,
+  ensureTasksLoaded,
 } = chronoOperationsStore;
 
 function setCalendarView(view: CalendarViewType) {
@@ -129,18 +130,40 @@ function handleCalendarViewChange(view: CalendarViewType) {
   setCalendarView(view);
 }
 
+function computeVisibleRange(): EpochSpan {
+  if (calendarView.value === 'month') {
+    return monthGridVisibleRange(currentDate.value);
+  }
+
+  const span = calendarView.value === 'agenda'
+    ? agendaViewSpan.value
+    : daysViewSpan.value;
+
+  return daysVisibleRange(currentDate.value, spanToDays(span));
+}
+
+watch(
+  [calendarView, currentDate, daysViewSpan, agendaViewSpan],
+  () => { loadVisibleRangeOperations(computeVisibleRange()); },
+  { immediate: true },
+);
+
 onMounted(async () => {
   try {
     syncViewModeFromRoute();
-    await initialize();
+    await initialize(isTaskView.value ? 'tasks' : 'calendar');
   } catch (error) {
     console.error('[Chrono] - Failed to load data from ChronoManager:', error);
   }
 });
 
-watch(() => route.fullPath, () => {
+watch(() => route.fullPath, async () => {
   syncViewModeFromRoute();
+  if (isTaskView.value) {
+    await ensureTasksLoaded();
+  }
 });
+
 </script>
 
 <template>
@@ -285,7 +308,6 @@ watch(() => route.fullPath, () => {
             @event-click="editEvent"
             @date-click="createEventFromDate"
             @update:current-date="setCurrentDate"
-            @update:visible-range="setVisibleRange"
             @update:days-span="setDaysViewSpan"
             @update:agenda-span="setAgendaViewSpan"
           />