chore(deps): update dependency vuetify to v4.1.8

Reviewed-on: #39

.github/workflows/build-test.yml

@@ -0,0 +1,50 @@
+name: Build Test
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Retrieve Server Install Action
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/action-server-install
+          ref: main
+          path: action-server-install
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install Server
+        uses: ./action-server-install
+        with:
+          install-php: 'false'
+          install-node: 'true'
+          php-version: '8.5'
+          node-version: '24'
+          server-path: './server'
+
+      - name: Install People Manager
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/people_manager
+          ref: main
+          path: server/modules/people_manager
+          github-server-url: https://git.ktrix.dev
+
+      - name: Checkout Pull Request
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: ${{ github.repository }}
+          ref: ${{ github.event.pull_request.head.sha }}
+          path: server/modules/people
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: server/modules/people
+
+      - name: Build
+        run: npm run build
+        working-directory: server/modules/people

.github/workflows/js-unit-tests.yml

@@ -0,0 +1,50 @@
+name: JS Unit Tests
+
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Retrieve Server Install Action
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/action-server-install
+          ref: main
+          path: action-server-install
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install Server
+        uses: ./action-server-install
+        with:
+          install-php: 'false'
+          install-node: 'true'
+          php-version: '8.5'
+          node-version: '24'
+          server-path: './server'
+
+      - name: Install People Manager
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: Nodarx/people_manager
+          ref: main
+          path: server/modules/people_manager
+          github-server-url: https://git.ktrix.dev
+
+      - name: Checkout Pull Request
+        uses: actions/checkout@v6.0.2
+        with:
+          repository: ${{ github.repository }}
+          ref: ${{ github.event.pull_request.head.sha }}
+          path: server/modules/people
+          github-server-url: https://git.ktrix.dev
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: server/modules/people
+
+      - name: Run tests
+        run: npm run test:unit
+        working-directory: server/modules/people

.github/workflows/renovate.yml

@@ -25,11 +25,17 @@ jobs:
           tools: composer:v2
 
       - name: Install Renovate
-        run: npm install -g renovate
+        run: |
+          npm install --global --no-audit --fund=false \
+            --prefix "${{ runner.temp }}/renovate-npm" \
+            --cache "${{ runner.temp }}/renovate-npm-cache" \
+            renovate
+          "${{ runner.temp }}/renovate-npm/bin/renovate" --version
 
       - name: Run Renovate
         env:
           RENOVATE_TOKEN: ${{ secrets.RENOVATE_TOKEN }}
           RENOVATE_PLATFORM: gitea
           RENOVATE_ENDPOINT: https://git.ktrix.dev/api/v1
-        run: renovate ${{ gitea.repository }}
+        run: |
+          "${{ runner.temp }}/renovate-npm/bin/renovate" ${{ gitea.repository }}

.gitignore

@@ -12,12 +12,10 @@ node_modules/
 /static/
 
 # Backend development
+/vendor/
 /lib/vendor/
 coverage/
-phpunit.xml.cache
-.phpunit.result.cache
-.php-cs-fixer.cache
-.phpstan.cache
+*.cache
 .phpactor/
 
 # Editors

composer.lock

@@ -0,0 +1,18 @@
+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
+        "This file is @generated automatically"
+    ],
+    "content-hash": "154a9c501f9c209c8602413a80320528",
+    "packages": [],
+    "packages-dev": [],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": {},
+    "prefer-stable": false,
+    "prefer-lowest": false,
+    "platform": {},
+    "platform-dev": {},
+    "plugin-api-version": "2.6.0"
+}

package.json

@@ -11,19 +11,27 @@
     "dev": "vite build --mode development --config vite.config.ts",
     "watch": "vite build --mode development --watch --config vite.config.ts",
     "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "test": "vitest run --config tests/js/vitest.config.ts",
+    "test:unit": "vitest run --config tests/js/vitest.config.ts",
+    "test:watch": "vitest watch --config tests/js/vitest.config.ts",
+    "test:coverage": "vitest run --coverage --config tests/js/vitest.config.ts"
   },
   "dependencies": {
-    "pinia": "^3.0.0",
+    "pinia": "^4.0.0",
     "vue": "^3.5.18",
-    "vue-router": "^4.5.1",
+    "vue-router": "^5.0.0",
     "vuetify": "^4.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.9.0",
-    "typescript": "~5.8.3",
+    "typescript": "~6.0.0",
     "vite": "^8.0.0",
-    "vue-tsc": "^3.0.5"
+    "vue-tsc": "^3.0.5",
+    "@vitest/coverage-v8": "^4.1.6",
+    "@vue/test-utils": "^2.4.10",
+    "jsdom": "^29.1.1",
+    "vitest": "^4.1.6"
   }
 }

src/components/CollectionEditor.vue

@@ -64,7 +64,7 @@ const onOpen = async () => {
   if (props.collection.identifier) {
     // Edit mode - find the service
     editingCollectionService.value = services.value.find(s =>
-      s.provider === props.collection!.provider && s.identifier === props.collection!.service
+      `${s.provider}:${s.identifier}` === String(props.collection!.service)
     ) || null
   } else {
     // Create mode - use first service that can create
@@ -233,7 +233,7 @@ watch(() => props.modelValue, async (newValue) => {
       <v-card-actions class="justify-space-between align-center">
         <div>
           <v-btn
-            v-if="mode === 'edit' && editingCollectionService?.capable('CollectionDestroy')"
+            v-if="mode === 'edit' && editingCollectionService?.capable('CollectionDelete')"
             color="error"
             variant="text"
             @click="onDelete"

src/components/CollectionList.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
 
 // Emits
 const emit = defineEmits<{
+  'create': []
   'select': [collection: CollectionObject]
   'edit': [collection: CollectionObject]
 }>()
@@ -27,13 +28,23 @@ const onCollectionEdit = (collection: CollectionObject) => {
 <template>
   <div class="collection-selector">
     <div class="collection-selector-header">
-      <div class="d-flex align-center mb-3">
-        <v-icon icon="mdi-book-multiple" size="small" class="mr-2" />
-        <span class="text-subtitle-2 font-weight-bold">Address Books</span>
+      <div class="d-flex align-center justify-space-between mb-1">
+        <div class="d-flex align-center">
+          <v-icon icon="mdi-book-multiple" size="14" class="mr-2 text-medium-emphasis" />
+          <span class="sidebar-section-label">Address Books</span>
+        </div>
+        <v-btn
+          icon="mdi-plus"
+          size="x-small"
+          variant="text"
+          aria-label="New Address Book"
+          title="New Address Book"
+          @click="emit('create')"
+        />
       </div>
     </div>
-    
-    <v-divider class="my-2" />
+
+    <v-divider class="mb-2" />
     
     <div class="collection-selector-content">
       <v-progress-linear v-if="loading" indeterminate color="primary" />
@@ -59,6 +70,7 @@ const onCollectionEdit = (collection: CollectionObject) => {
               icon="mdi-pencil"
               size="x-small"
               variant="text"
+              class="collection-edit-btn"
               @click.stop="onCollectionEdit(collection)"
             />
           </template>
@@ -92,4 +104,28 @@ const onCollectionEdit = (collection: CollectionObject) => {
 .v-list-item {
   cursor: pointer;
 }
+
+.sidebar-section-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: rgba(var(--v-theme-on-surface), 0.6);
+}
+
+.collection-edit-btn {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.v-list-item:hover .collection-edit-btn,
+.v-list-item:focus-within .collection-edit-btn {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .collection-edit-btn {
+    opacity: 1;
+  }
+}
 </style>

src/components/ImportDialog.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useImportStore } from '@PeopleManager/stores/importStore'
+import { CollectionObject } from '@PeopleManager/models/collection'
+
+// Props
+const props = defineProps<{
+  modelValue: boolean
+  collections: CollectionObject[]
+}>()
+
+// Emits
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  // refresh = true once contacts were created/updated, so the caller can reload lists
+  'close': [refresh: boolean]
+}>()
+
+// Store
+const importStore = useImportStore()
+const { files, sessions, order, stage, running, totals } = storeToRefs(importStore)
+
+// Collection picker options
+const collectionOptions = computed(() =>
+  props.collections.map((collection: CollectionObject) => ({
+    title: collection.properties.label || 'Unnamed',
+    value: collection.identifier,
+  })),
+)
+
+const isSelecting = computed(() => stage.value === 'selecting')
+const isComplete = computed(() => stage.value === 'completed' || stage.value === 'error')
+
+// Every queued file must have a destination before import can start.
+const canImport = computed(() =>
+  files.value.length > 0 && files.value.every((entry) => entry.collectionId !== null),
+)
+
+const progress = computed(() => {
+  const { discovered, processed } = totals.value
+  return discovered > 0 ? Math.min(100, Math.round((processed / discovered) * 100)) : 0
+})
+
+const counters = computed(() => {
+  const t = totals.value
+  return [
+    { key: 'discovered', label: 'Discovered', value: t.discovered, color: 'info' },
+    { key: 'created', label: 'Created', value: t.created, color: 'success' },
+    { key: 'updated', label: 'Updated', value: t.updated, color: 'info' },
+    { key: 'exists', label: 'Skipped', value: t.exists, color: 'warning' },
+    { key: 'error', label: 'Errors', value: t.error, color: 'error' },
+  ]
+})
+
+function setCollection(fileId: number, collectionId: CollectionObject['identifier'] | null) {
+  importStore.setCollectionForFile(fileId, collectionId)
+}
+
+function setSupersede(fileId: number, value: boolean) {
+  importStore.setOptionsForFile(fileId, { supersede: value })
+}
+
+async function startImport() {
+  try {
+    await importStore.startImport()
+  } catch (error) {
+    console.error('[People] - Import failed:', error)
+  }
+}
+
+function cancel() {
+  emit('update:modelValue', false)
+  emit('close', false)
+}
+
+function done() {
+  const refresh = totals.value.created > 0 || totals.value.updated > 0
+  emit('update:modelValue', false)
+  emit('close', refresh)
+}
+</script>
+
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    max-width="640"
+    persistent
+    scrollable
+  >
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        <v-icon icon="mdi-database-import" class="mr-2" />
+        Import Contacts
+      </v-card-title>
+
+      <v-divider />
+
+      <!-- Selecting stage: choose a destination per file -->
+      <v-card-text v-if="isSelecting" class="pt-4">
+        <p class="text-body-2 text-medium-emphasis mb-4">
+          Choose a destination address book for each file. Existing contacts are kept
+          unless "Overwrite existing" is enabled.
+        </p>
+
+        <v-card
+          v-for="entry in files"
+          :key="entry.file.id"
+          variant="tonal"
+          class="mb-3 pa-3"
+        >
+          <div class="d-flex align-center mb-2">
+            <v-icon icon="mdi-file-account-outline" size="small" class="mr-2" />
+            <span class="text-subtitle-2 font-weight-medium text-truncate">{{ entry.file.name }}</span>
+          </div>
+
+          <v-select
+            :model-value="entry.collectionId"
+            :items="collectionOptions"
+            label="Address book"
+            density="compact"
+            variant="outlined"
+            hide-details
+            class="mb-2"
+            @update:model-value="setCollection(entry.file.id, $event)"
+          />
+
+          <v-switch
+            :model-value="entry.options.supersede"
+            label="Overwrite existing contacts"
+            color="primary"
+            density="compact"
+            hide-details
+            @update:model-value="setSupersede(entry.file.id, $event ?? false)"
+          />
+        </v-card>
+      </v-card-text>
+
+      <!-- Importing / completed stage: progress + counters -->
+      <v-card-text v-else class="pt-4">
+        <div class="d-flex align-center justify-space-between mb-1">
+          <span class="text-body-2">
+            {{ isComplete ? 'Import complete' : 'Importing…' }}
+          </span>
+          <span class="text-body-2 text-medium-emphasis">
+            {{ totals.processed }} / {{ totals.discovered }}
+          </span>
+        </div>
+
+        <v-progress-linear
+          :model-value="progress"
+          :indeterminate="running && totals.discovered === 0"
+          color="primary"
+          height="8"
+          rounded
+          class="mb-4"
+        />
+
+        <div class="d-flex flex-wrap ga-2">
+          <v-chip
+            v-for="counter in counters"
+            :key="counter.key"
+            :color="counter.color"
+            size="small"
+            variant="tonal"
+          >
+            {{ counter.label }}: {{ counter.value }}
+          </v-chip>
+        </div>
+
+        <v-list v-if="order.length > 1" density="compact" class="mt-3 bg-transparent">
+          <v-list-item
+            v-for="id in order"
+            :key="id"
+            :title="sessions[id]?.fileName"
+            :subtitle="sessions[id]?.lastError ?? undefined"
+          >
+            <template #prepend>
+              <v-icon
+                :icon="sessions[id]?.status === 'error' ? 'mdi-alert-circle' : sessions[id]?.status === 'completed' ? 'mdi-check-circle' : 'mdi-progress-clock'"
+                :color="sessions[id]?.status === 'error' ? 'error' : sessions[id]?.status === 'completed' ? 'success' : 'info'"
+                size="small"
+              />
+            </template>
+            <template #append>
+              <span class="text-caption text-medium-emphasis">
+                {{ sessions[id]?.counters.processed }} / {{ sessions[id]?.counters.discovered }}
+              </span>
+            </template>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions>
+        <v-spacer />
+        <template v-if="isSelecting">
+          <v-btn variant="text" @click="cancel">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" :disabled="!canImport" @click="startImport">
+            Import
+          </v-btn>
+        </template>
+        <template v-else>
+          <v-btn color="primary" variant="flat" :disabled="running" @click="done">
+            Close
+          </v-btn>
+        </template>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>

src/components/PersonList.vue

@@ -11,6 +11,7 @@ const entitiesStore = useEntitiesStore()
 const props = defineProps<{
   selectedCollection?: CollectionObject | null
   selectedEntity?: EntityObject | null
+  search?: string | null
 }>()
 
 // Emits
@@ -21,15 +22,22 @@ const emit = defineEmits<{
 
 // State
 const loading = ref(false)
-const searchQuery = ref('')
-const collectionEntities = ref<EntityObject[]>([])
+
+// Entities belonging to the selected collection, sourced live from the manager store
+const collectionEntities = computed<EntityObject[]>(() => {
+  const collection = props.selectedCollection
+  if (!collection) {
+    return []
+  }
+  return entitiesStore.entitiesForCollection(collection.identifier)
+})
 
 // Computed
 const filteredEntities = computed(() => {
-  if (!searchQuery.value) {
+  const query = (props.search ?? '').trim().toLowerCase()
+  if (!query) {
     return collectionEntities.value
   }
-  const query = searchQuery.value.toLowerCase()
   return collectionEntities.value.filter(entity => {
     const props = (entity.properties as any)
     const given = props?.names?.given || ''
@@ -46,25 +54,15 @@ const filteredEntities = computed(() => {
 
 // Watchers
 watch(() => props.selectedCollection, async (newCollection) => {
-  if (newCollection) {
-    loading.value = true
-    try {
-      const sources = {
-        [newCollection.provider]: {
-          [String(newCollection.service)]: {
-            [String(newCollection.identifier)]: true as const,
-          },
-        },
-      }
-      const result = await entitiesStore.list(sources)
-      collectionEntities.value = Object.values(result)
-    } catch (error) {
-      console.error('[People] - Failed to load contacts:', error)
-    } finally {
-      loading.value = false
-    }
-  } else {
-    collectionEntities.value = []
+  if (!newCollection) {
+    return
+  }
+  loading.value = true
+  try {
+    await entitiesStore.list([newCollection.identifier])
+  } catch (error) {
+    console.error('[People] - Failed to load contacts:', error)
+  } finally {
     loading.value = false
   }
 }, { immediate: true })
@@ -165,18 +163,6 @@ function entityAvatarColor(entity: EntityObject): string {
 
 <template>
   <div class="person-list-container">
-    <div class="person-list-header pa-4">
-      <v-text-field
-        v-model="searchQuery"
-        density="compact"
-        variant="outlined"
-        label="Search contacts"
-        prepend-inner-icon="mdi-magnify"
-        clearable
-        hide-details
-      />
-    </div>
-    
     <div class="pa-0 person-list-content">
       <v-progress-linear v-if="loading" indeterminate color="primary" />
       
@@ -253,13 +239,6 @@ function entityAvatarColor(entity: EntityObject): string {
   overflow: auto;
 }
 
-.person-list-header {
-  min-height: 72px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid rgb(var(--v-border-color));
-}
-
 .person-list-content {
   flex: 1;
   overflow-y: auto;
@@ -269,10 +248,6 @@ function entityAvatarColor(entity: EntityObject): string {
   background: transparent;
 }
 
-.person-list-container :deep(.v-field) {
-  background: transparent;
-}
-
 .v-list-item {
   cursor: pointer;
 }

src/components/Sidebar.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useDisplay } from 'vuetify'
+import { usePeopleStore } from '@/stores/peopleStore'
+import CollectionList from '@/components/CollectionList.vue'
+
+const display = useDisplay()
+const isMobile = computed(() => display.mdAndDown.value)
+
+const peopleStore = usePeopleStore()
+
+const {
+  sidebarVisible,
+  loading,
+  collections,
+  selectedCollection,
+} = storeToRefs(peopleStore)
+
+const {
+  selectCollection,
+  openEditCollection,
+  openCreateCollection,
+  createEntity,
+  openImport,
+} = peopleStore
+
+const createOptions = [
+  { type: 'individual', label: 'Individual', icon: 'mdi-account-plus' },
+  { type: 'organization', label: 'Organization', icon: 'mdi-domain-plus' },
+  { type: 'group', label: 'Group', icon: 'mdi-account-group' },
+]
+
+// 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)
+  }
+}
+
+// Settings placeholder (no settings dialog exists for this module yet)
+const showSettingsDialog = ref(false)
+</script>
+
+<template>
+  <v-navigation-drawer
+    v-model="sidebarVisible"
+    contained
+    :permanent="sidebarVisible && !isMobile"
+    :temporary="isMobile"
+    width="280"
+    class="people-sidebar"
+  >
+    <div class="pa-3 d-flex flex-column h-100">
+      <!-- Primary action -->
+      <v-menu>
+        <template #activator="{ props: menuProps }">
+          <v-btn
+            block
+            color="primary"
+            variant="tonal"
+            prepend-icon="mdi-account-plus"
+            append-icon="mdi-chevron-down"
+            class="mb-4 justify-start"
+            v-bind="menuProps"
+          >
+            New Contact
+          </v-btn>
+        </template>
+        <v-list density="compact">
+          <v-list-item
+            v-for="option in createOptions"
+            :key="option.type"
+            :disabled="!selectedCollection"
+            @click="createEntity(option.type)"
+          >
+            <template #prepend>
+              <v-icon :icon="option.icon" />
+            </template>
+            <v-list-item-title>{{ option.label }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
+      <!-- Collections -->
+      <CollectionList
+        :collections="collections"
+        :loading="loading"
+        :selected-collection="selectedCollection"
+        @create="openCreateCollection"
+        @select="selectCollection"
+        @edit="openEditCollection"
+      />
+    </div>
+
+    <!-- Pinned utility footer -->
+    <template #append>
+      <v-divider />
+      <div class="pa-2">
+        <v-btn
+          block
+          variant="text"
+          size="small"
+          prepend-icon="mdi-database-import"
+          class="justify-start text-medium-emphasis"
+          @click="triggerFileInput"
+        >
+          Import VCF
+        </v-btn>
+        <v-btn
+          block
+          variant="text"
+          size="small"
+          prepend-icon="mdi-cog"
+          class="justify-start text-medium-emphasis"
+          @click="showSettingsDialog = true"
+        >
+          Settings
+        </v-btn>
+        <input
+          ref="fileInputRef"
+          type="file"
+          accept=".vcf,text/vcard,text/x-vcard"
+          multiple
+          class="d-none"
+          @change="onFilesSelected"
+        />
+      </div>
+    </template>
+  </v-navigation-drawer>
+
+  <!-- Settings placeholder dialog -->
+  <v-dialog v-model="showSettingsDialog" max-width="480">
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        <v-icon icon="mdi-cog" size="small" class="mr-2" />
+        People Settings
+      </v-card-title>
+      <v-card-text class="text-medium-emphasis">
+        No settings are available for this module yet.
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="showSettingsDialog = false">Close</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.people-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color)) !important;
+  overflow-y: auto;
+}
+</style>

src/pages/Main.vue

@@ -1,16 +1,13 @@
 <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'
 import { usePeopleStore } from '@/stores/peopleStore'
-import CollectionList from '@/components/CollectionList.vue'
+import Sidebar from '@/components/Sidebar.vue'
 import CollectionEditor from '@/components/CollectionEditor.vue'
 import PersonList from '@/components/PersonList.vue'
 import PersonEditor from '@/components/PersonEditor.vue'
-
-// Vuetify display
-const display = useDisplay()
+import ImportDialog from '@/components/ImportDialog.vue'
 
 // Check if people manager is available
 const moduleStore = useModuleStore()
@@ -23,21 +20,18 @@ const peopleStore = usePeopleStore()
 
 const {
   sidebarVisible,
-  loading,
   selectedCollection,
   selectedEntity,
   entityEditorMode,
   showCollectionEditor,
   editingCollection,
   collectionEditorMode,
+  showImportDialog,
   collections,
 } = storeToRefs(peopleStore)
 
 const {
   initialize,
-  selectCollection,
-  openEditCollection,
-  openCreateCollection,
   selectEntity,
   createEntity,
   startEditingEntity,
@@ -47,8 +41,12 @@ const {
   deleteEntity,
   saveCollection,
   deleteCollection,
+  closeImport,
 } = peopleStore
 
+// Contact search (filters the person list)
+const searchQuery = ref('')
+
 onMounted(async () => {
   try {
     await initialize()
@@ -61,7 +59,7 @@ onMounted(async () => {
 <template>
   <div class="people-container">
     <!-- Top Navigation Bar -->
-    <v-app-bar elevation="0" class="people-toolbar border-b">
+    <v-toolbar elevation="0" density="compact" class="people-toolbar">
       <template #prepend>
         <v-btn
           icon="mdi-menu"
@@ -70,86 +68,31 @@ onMounted(async () => {
         ></v-btn>
       </template>
 
-      <v-app-bar-title class="d-flex align-center">
-        <v-icon size="28" color="primary" class="mr-2">mdi-account-multiple</v-icon>
-        <span class="text-h6 font-weight-bold">People Manager</span>
-      </v-app-bar-title>
+      <v-toolbar-title class="d-flex align-center">
+        <v-icon size="24" color="primary" class="mr-2">mdi-account-multiple</v-icon>
+        <span class="text-subtitle-1 font-weight-bold">People</span>
+      </v-toolbar-title>
 
       <v-spacer></v-spacer>
-    </v-app-bar>
+
+      <!-- Search -->
+      <v-text-field
+        v-model="searchQuery"
+        density="compact"
+        variant="outlined"
+        placeholder="Search contacts..."
+        prepend-inner-icon="mdi-magnify"
+        hide-details
+        single-line
+        clearable
+        class="people-toolbar-search mx-4"
+      />
+    </v-toolbar>
 
     <!-- Main Content Area -->
     <div class="people-content">
       <!-- Sidebar Navigation Drawer -->
-      <v-navigation-drawer
-        v-model="sidebarVisible"
-        :permanent="display.mdAndUp.value"
-        :temporary="display.smAndDown.value"
-        width="280"
-        class="people-sidebar"
-      >
-        <div class="pa-4 d-flex flex-column h-100">
-          <CollectionList
-            :collections="collections"
-            :loading="loading"
-            :selected-collection="selectedCollection"
-            @select="selectCollection"
-            @edit="openEditCollection"
-          />
-          
-          <v-divider class="my-2" />
-          
-          <div class="sidebar-footer">
-            <div class="d-flex align-center mb-2">
-              <v-icon icon="mdi-plus-circle" size="small" class="mr-2" />
-              <span class="text-subtitle-2 font-weight-bold">Create</span>
-            </div>
-            <v-btn
-              variant="text"
-              prepend-icon="mdi-account-plus"
-              size="small"
-              block
-              class="justify-start"
-              :disabled="!selectedCollection"
-              @click="createEntity('individual')"
-            >
-              Individual
-            </v-btn>
-            <v-btn
-              variant="text"
-              prepend-icon="mdi-domain-plus"
-              size="small"
-              block
-              class="justify-start"
-              :disabled="!selectedCollection"
-              @click="createEntity('organization')"
-            >
-              Organization
-            </v-btn>
-            <v-btn
-              variant="text"
-              prepend-icon="mdi-account-group"
-              size="small"
-              block
-              class="justify-start"
-              :disabled="!selectedCollection"
-              @click="createEntity('group')"
-            >
-              Group
-            </v-btn>
-            <v-btn
-              variant="text"
-              prepend-icon="mdi-book-plus"
-              size="small"
-              block
-              class="justify-start"
-              @click="openCreateCollection"
-            >
-              Address Book
-            </v-btn>
-          </div>
-        </div>
-      </v-navigation-drawer>
+      <Sidebar />
 
       <!-- Main View -->
       <div class="people-main">
@@ -181,6 +124,7 @@ onMounted(async () => {
             <PersonList
               :selected-collection="selectedCollection"
               :selected-entity="selectedEntity"
+              :search="searchQuery"
               @select="selectEntity"
               @fresh="createEntity"
             />
@@ -209,6 +153,13 @@ onMounted(async () => {
       @save="saveCollection"
       @delete="deleteCollection"
     />
+
+    <!-- VCF Import Dialog -->
+    <ImportDialog
+      v-model="showImportDialog"
+      :collections="collections"
+      @close="closeImport"
+    />
   </div>
 </template>
 
@@ -216,28 +167,39 @@ onMounted(async () => {
 .people-container {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   isolation: isolate; /* Create stacking context to prevent style leakage */
 }
 
 .people-toolbar {
+  flex-shrink: 0;
   border-bottom: 1px solid rgb(var(--v-border-color)) !important;
 }
 
+.people-toolbar-search {
+  max-width: 300px;
+}
+
+@media (max-width: 960px) {
+  .people-toolbar-search {
+    max-width: 180px;
+    margin-inline: 8px !important;
+  }
+}
+
 .people-content {
   display: flex;
   flex: 1;
+  min-height: 0;
   overflow: hidden;
   position: relative;
 }
 
-.people-sidebar {
-  border-right: 1px solid rgb(var(--v-border-color)) !important;
-  overflow-y: auto;
-}
-
 .people-main {
   flex: 1;
+  min-height: 0;
+  min-width: 0;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -245,6 +207,8 @@ onMounted(async () => {
 
 .people-wrapper {
   flex: 1;
+  min-height: 0;
+  min-width: 0;
   display: flex;
   overflow: hidden;
 }

src/routes.ts

@@ -2,7 +2,8 @@ const routes = [
   {
     name: 'people',
     path: '/people',
-    component: () => import('@/pages/PeoplePage.vue'),
+    component: () => import('@/pages/Main.vue'),
+    meta: { layout: 'fixed' },
   },
 ]
 

src/stores/peopleStore.ts

@@ -8,10 +8,14 @@ import { GroupObject } from '@PeopleManager/models/group'
 import type { ServiceObject } from '@PeopleManager/models/service'
 import { useCollectionsStore } from '@PeopleManager/stores/collectionsStore'
 import { useEntitiesStore } from '@PeopleManager/stores/entitiesStore'
+import { useServicesStore } from '@PeopleManager/stores/servicesStore'
+import { useImportStore } from '@PeopleManager/stores/importStore'
 
 export const usePeopleStore = defineStore('peopleStore', () => {
+  const servicesStore = useServicesStore()
   const collectionsStore = useCollectionsStore()
   const entitiesStore = useEntitiesStore()
+  const importStore = useImportStore()
 
   // UI state
   const sidebarVisible = ref(true)
@@ -29,6 +33,9 @@ export const usePeopleStore = defineStore('peopleStore', () => {
   const editingCollection = shallowRef<CollectionObject | null>(null)
   const collectionEditorMode = ref<'create' | 'edit'>('create')
 
+  // Import state
+  const showImportDialog = ref(false)
+
   // Derived state
   const collections = computed(() => collectionsStore.collections)
   const entities = computed(() => entitiesStore.entities)
@@ -56,15 +63,12 @@ export const usePeopleStore = defineStore('peopleStore', () => {
     if (collectionEditorMode.value === 'create') {
       const created = await collectionsStore.create(
         service.provider,
-        service.identifier || '',
-        null,
+        service.identifier ?? '',
         collection.properties,
       )
       selectedCollection.value = created
     } else {
       await collectionsStore.update(
-        collection.provider,
-        collection.service,
         collection.identifier,
         collection.properties,
       )
@@ -74,7 +78,7 @@ export const usePeopleStore = defineStore('peopleStore', () => {
   }
 
   async function deleteCollection(collection: CollectionObject) {
-    await collectionsStore.delete(collection.provider, collection.service, collection.identifier)
+    await collectionsStore.delete(collection.identifier)
 
     if (selectedCollection.value?.identifier === collection.identifier) {
       selectedCollection.value = null
@@ -132,8 +136,6 @@ export const usePeopleStore = defineStore('peopleStore', () => {
       // Create
       entity.properties.created = new Date()
       selectedEntity.value = await entitiesStore.create(
-        targetCollection.provider,
-        targetCollection.service,
         targetCollection.identifier,
         entity.properties,
       )
@@ -141,9 +143,6 @@ export const usePeopleStore = defineStore('peopleStore', () => {
       // Update
       entity.properties.modified = new Date()
       selectedEntity.value = await entitiesStore.update(
-        targetCollection.provider,
-        targetCollection.service,
-        targetCollection.identifier,
         entity.identifier,
         entity.properties,
       )
@@ -162,21 +161,66 @@ export const usePeopleStore = defineStore('peopleStore', () => {
       throw new Error('[People] - No collection selected, cannot delete entity')
     }
 
-    await entitiesStore.delete(
-      targetCollection.provider,
-      targetCollection.service,
-      targetCollection.identifier,
-      entity.identifier,
-    )
+    await entitiesStore.delete([entity.identifier])
 
     closeEntityEditor()
   }
 
+  // --- Import actions ---
+
+  /**
+   * Queue selected VCF files and open the import dialog.
+   * Defaults each file's target to the currently selected collection.
+   */
+  async function openImport(files: File[]) {
+    importStore.removeAllFiles()
+    importStore.reset()
+
+    for (const file of files) {
+      const contents = await file.text()
+      const id = importStore.addFile({
+        name: file.name,
+        contents,
+        size: file.size,
+        type: file.type,
+      })
+      if (selectedCollection.value) {
+        importStore.setCollectionForFile(id, selectedCollection.value.identifier)
+      }
+    }
+
+    importStore.stage = 'selecting'
+    showImportDialog.value = true
+  }
+
+  /**
+   * Close the import dialog. When refresh is requested, reload the entity lists for
+   * every collection that received contacts, then clear the import queue.
+   */
+  async function closeImport(refresh: boolean = false) {
+    showImportDialog.value = false
+
+    if (refresh) {
+      const targets = new Set<CollectionObject['identifier']>()
+      for (const id of importStore.order) {
+        const target = importStore.sessions[id]?.targetIdentifier
+        if (target) targets.add(target)
+      }
+      for (const target of targets) {
+        await entitiesStore.list([target])
+      }
+    }
+
+    importStore.removeAllFiles()
+    importStore.reset()
+  }
+
   // --- Lifecycle ---
 
   async function initialize() {
     loading.value = true
     try {
+      await servicesStore.list()
       await collectionsStore.list()
 
       if (
@@ -200,6 +244,7 @@ export const usePeopleStore = defineStore('peopleStore', () => {
     showCollectionEditor,
     editingCollection,
     collectionEditorMode,
+    showImportDialog,
 
     // Derived
     collections,
@@ -221,6 +266,10 @@ export const usePeopleStore = defineStore('peopleStore', () => {
     saveEntity,
     deleteEntity,
 
+    // Import actions
+    openImport,
+    closeImport,
+
     // Lifecycle
     initialize,
   }

tests/js/unit/base.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Basic Tests', () => {
+  it('should perform basic assertion', () => {
+    expect(true).toBe(true)
+  })
+
+  it('should test array operations', () => {
+    const array = ['foo', 'bar', 'baz']
+
+    expect(array).toHaveLength(3)
+    expect(array).toContain('bar')
+    expect(array[0]).toBe('foo')
+  })
+
+  it('should test string operations', () => {
+    const string = 'Hello, World!'
+
+    expect(string).toContain('World')
+    expect(string.length).toBe(13)
+  })
+
+  it('should test object operations', () => {
+    const obj = { foo: 'bar', count: 42 }
+
+    expect(obj).toHaveProperty('foo')
+    expect(obj.foo).toBe('bar')
+    expect(obj.count).toBeGreaterThan(40)
+  })
+})

tests/js/vitest.config.ts

@@ -0,0 +1,33 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig, configDefaults } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '../../src'),
+      '@KTXC': path.resolve(__dirname, '../../../../core/src'),
+    },
+  },
+  test: {
+    environment: 'jsdom',
+    exclude: [...configDefaults.exclude, 'e2e/**'],
+    root: fileURLToPath(new URL('../../', import.meta.url)),
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'tests/',
+        '**/*.d.ts',
+        '**/*.config.*',
+        '**/dist/**',
+      ],
+    },
+  },
+})