feat: import

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

src/pages/ChronoPage.vue

@@ -1,6 +1,6 @@
 
 <script setup lang="ts">
-import { computed, onMounted, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRoute } from 'vue-router';
 import { useDisplay } from 'vuetify';
@@ -13,6 +13,7 @@ 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';
 
 // Vuetify display
 const display = useDisplay();
@@ -36,6 +37,7 @@ const {
   showEventEditor,
   showTaskEditor,
   showCollectionEditor,
+  showImportDialog,
   selectedEntity,
   entityEditorMode,
   editingCollection,
@@ -76,8 +78,19 @@ const {
   deleteCollection,
   openCreateCalendar,
   openCreateTaskList,
+  openImport,
+  closeImport,
 } = chronoStore;
 
+const fileInputRef = ref<HTMLInputElement | null>(null)
+function triggerFileInput() { fileInputRef.value?.click() }
+async function onFilesSelected(event: Event) {
+  const input = event.target as HTMLInputElement
+  const files = Array.from(input.files ?? [])
+  input.value = ''
+  if (files.length) await openImport(files)
+}
+
 function syncViewModeFromRoute() {
   const routePath = route.path;
   const mode = routePath.endsWith('/tasks') ? 'tasks' : 'calendar';
@@ -178,6 +191,7 @@ watch(() => route.fullPath, () => {
             <v-icon start>mdi-plus</v-icon>
             New Calendar
           </v-btn>
+
           <v-btn
             v-else
             variant="tonal"
@@ -190,6 +204,12 @@ watch(() => route.fullPath, () => {
             New Task List
           </v-btn>
 
+          <v-divider class="my-3" />
+          <v-btn variant="text" prepend-icon="mdi-calendar-import" block class="justify-start" @click="triggerFileInput">
+            Import iCalendar
+          </v-btn>
+          <input ref="fileInputRef" type="file" accept=".ics,text/calendar" multiple class="d-none" @change="onFilesSelected" />
+
           <!-- Mini Calendar Widget -->
           <v-card v-if="!isTaskView" class="mt-4" variant="outlined">
             <v-card-text class="pa-2">
@@ -293,6 +313,8 @@ watch(() => route.fullPath, () => {
       @save="saveCollection"
       @delete="deleteCollection"
     />
+
+    <ImportDialog v-model="showImportDialog" :collections="collections" @close="closeImport" />
   </div>
 </template>