feat: people import

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

src/pages/PeoplePage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useDisplay } from 'vuetify'
 import { useModuleStore } from '@KTXC/stores/moduleStore'
@@ -8,6 +8,7 @@ import CollectionList from '@/components/CollectionList.vue'
 import CollectionEditor from '@/components/CollectionEditor.vue'
 import PersonList from '@/components/PersonList.vue'
 import PersonEditor from '@/components/PersonEditor.vue'
+import ImportDialog from '@/components/ImportDialog.vue'
 
 // Vuetify display
 const display = useDisplay()
@@ -30,6 +31,7 @@ const {
   showCollectionEditor,
   editingCollection,
   collectionEditorMode,
+  showImportDialog,
   collections,
 } = storeToRefs(peopleStore)
 
@@ -47,8 +49,26 @@ const {
   deleteEntity,
   saveCollection,
   deleteCollection,
+  openImport,
+  closeImport,
 } = peopleStore
 
+// VCF import file picker
+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 = '' // allow re-selecting the same file later
+  if (files.length > 0) {
+    await openImport(files)
+  }
+}
+
 onMounted(async () => {
   try {
     await initialize()
@@ -147,6 +167,31 @@ onMounted(async () => {
             >
               Address Book
             </v-btn>
+
+            <v-divider class="my-2" />
+
+            <div class="d-flex align-center mb-2">
+              <v-icon icon="mdi-database-import" size="small" class="mr-2" />
+              <span class="text-subtitle-2 font-weight-bold">Import</span>
+            </div>
+            <v-btn
+              variant="text"
+              prepend-icon="mdi-upload"
+              size="small"
+              block
+              class="justify-start"
+              @click="triggerFileInput"
+            >
+              Import VCF
+            </v-btn>
+            <input
+              ref="fileInputRef"
+              type="file"
+              accept=".vcf,text/vcard,text/x-vcard"
+              multiple
+              class="d-none"
+              @change="onFilesSelected"
+            />
           </div>
         </div>
       </v-navigation-drawer>
@@ -209,6 +254,13 @@ onMounted(async () => {
       @save="saveCollection"
       @delete="deleteCollection"
     />
+
+    <!-- VCF Import Dialog -->
+    <ImportDialog
+      v-model="showImportDialog"
+      :collections="collections"
+      @close="closeImport"
+    />
   </div>
 </template>