refactor: add navigaton panel component

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

src/pages/ChronoPage.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
-import { useDisplay } from 'vuetify';
 import { useModuleStore } from '@KTXC/stores/moduleStore';
 import { useChronoOperationsStore } from '@/stores/chronoOperationsStore';
 import { useChronoSettingsStore } from '@/stores/chronoSettingsStore';
@@ -10,20 +9,15 @@ import { useChronoUiStore } from '@/stores/chronoUiStore';
 import type { CalendarView as CalendarViewType } from '@/types';
 import { spanToDays, type AgendaViewSpan, type DaysViewSpan } from '@/types/spans';
 import { daysVisibleRange, monthGridVisibleRange } from '@/utils/date';
-import CollectionList from '@/components/CollectionList.vue';
+import Sidebar from '@/components/Sidebar.vue';
 import CollectionEditor from '@/components/CollectionEditor.vue';
 import CalendarView from '@/components/CalendarView.vue';
 import TaskView from '@/components/TaskView.vue';
 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();
-const isMobile = computed(() => display.mdAndDown.value);
-
 // Check if chrono manager is available
 const moduleStore = useModuleStore();
 const isChronoManagerAvailable = computed(() => {
@@ -71,8 +65,6 @@ const {
   initialize,
   selectSection,
   selectDate,
-  selectCollection,
-  openCollectionEditor,
   createEventFromDate,
   startEditingSelectedEntity,
   cancelEditingSelectedEntity,
@@ -85,18 +77,14 @@ const {
   deleteTask,
   saveCollection,
   deleteCollection,
-  openImport,
   closeImport,
 } = chronoUiStore;
 
 const {
-  toggleCalendarVisibility,
   toggleTaskComplete,
   ensureTasksLoaded,
 } = chronoOperationsStore;
 
-const fileInputRef = ref<HTMLInputElement | null>(null)
-
 watch(() => route.fullPath, async () => {
   selectSectionFromRoute();
   if (isTasksSection.value) {
@@ -119,17 +107,6 @@ onMounted(async () => {
   }
 });
 
-function handleImportStart() {
-  fileInputRef.value?.click()
-}
-
-async function handleImportSelect(event: Event) {
-  const input = event.target as HTMLInputElement
-  const files = Array.from(input.files ?? [])
-  input.value = ''
-  if (files.length) await openImport(files)
-}
-
 function handleCalendarViewChange(view: CalendarViewType) {
   chronoSettingsStore.calendarView = view;
 }
@@ -200,49 +177,7 @@ function selectSectionFromRoute() {
     <!-- Main Content Area -->
     <div class="chrono-content">
       <!-- Sidebar Navigation Drawer -->
-      <v-navigation-drawer
-        v-model="sidebarVisible"
-        contained
-        :permanent="sidebarVisible && !isMobile"
-        :temporary="isMobile"
-        width="280"
-        class="chrono-sidebar"
-      >
-        <div class="pa-4">
-          <CollectionList
-            v-if="!isTasksSection"
-            :collections="collections"
-            :selected-collection="selectedCollection"
-            type="calendar"
-            @create="openCollectionEditor('calendar')"
-            @select="selectCollection"
-            @edit="openCollectionEditor('calendar', $event)"
-            @toggle-visibility="toggleCalendarVisibility"
-          />
-          <CollectionList
-            v-else
-            :collections="collections"
-            :selected-collection="selectedCollection"
-            type="tasklist"
-            @create="openCollectionEditor('tasklist')"
-            @select="selectCollection"
-            @edit="openCollectionEditor('tasklist', $event)"
-          />
-          
-          <v-divider class="my-3" />
-          <v-btn variant="text" prepend-icon="mdi-calendar-import" block class="justify-start" @click="handleImportStart">
-            Import iCalendar
-          </v-btn>
-          <input ref="fileInputRef" type="file" accept=".ics,text/calendar" multiple class="d-none" @change="handleImportSelect" />
-
-          <!-- Mini Calendar Widget -->
-          <v-card v-if="!isTasksSection" class="mt-4" variant="outlined">
-            <v-card-text class="pa-2">
-              <MiniCalendar v-model="currentDate" />
-            </v-card-text>
-          </v-card>
-        </div>
-      </v-navigation-drawer>
+      <Sidebar />
 
       <!-- Main Calendar/Task View -->
       <div class="chrono-main">
@@ -366,11 +301,6 @@ function selectSectionFromRoute() {
   position: relative;
 }
 
-.chrono-sidebar {
-  border-right: 1px solid rgb(var(--v-border-color)) !important;
-  overflow-y: auto;
-}
-
 .chrono-main {
   flex: 1;
   min-height: 0;