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

src/components/CollectionList.vue

@@ -10,7 +10,6 @@ const props = defineProps<{
 
 // Emits
 const emit = defineEmits<{
-  'create': []
   'select': [collection: CollectionObject]
   'edit': [collection: CollectionObject]
 }>()
@@ -28,23 +27,13 @@ const onCollectionEdit = (collection: CollectionObject) => {
 <template>
   <div class="collection-selector">
     <div class="collection-selector-header">
-      <div class="d-flex align-center justify-space-between mb-1">
+      <div class="d-flex align-center mb-3">
-        <div class="d-flex align-center">
+        <v-icon icon="mdi-book-multiple" size="small" class="mr-2" />
-          <v-icon icon="mdi-book-multiple" size="14" class="mr-2 text-medium-emphasis" />
+        <span class="text-subtitle-2 font-weight-bold">Address Books</span>
-          <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="mb-2" />
+    <v-divider class="my-2" />
     
     <div class="collection-selector-content">
       <v-progress-linear v-if="loading" indeterminate color="primary" />
@@ -70,7 +59,6 @@ const onCollectionEdit = (collection: CollectionObject) => {
               icon="mdi-pencil"
               size="x-small"
               variant="text"
-              class="collection-edit-btn"
               @click.stop="onCollectionEdit(collection)"
             />
           </template>
@@ -104,28 +92,4 @@ 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/Sidebar.vue

@@ -1,164 +0,0 @@
-<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/PeoplePage.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
 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 Sidebar from '@/components/Sidebar.vue'
+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()
+const isMobile = computed(() => display.mdAndDown.value)
+
 // Check if people manager is available
 const moduleStore = useModuleStore()
 const isPeopleManagerAvailable = computed(() => {
@@ -20,6 +25,7 @@ const peopleStore = usePeopleStore()
 
 const {
   sidebarVisible,
+  loading,
   selectedCollection,
   selectedEntity,
   entityEditorMode,
@@ -32,6 +38,9 @@ const {
 
 const {
   initialize,
+  selectCollection,
+  openEditCollection,
+  openCreateCollection,
   selectEntity,
   createEntity,
   startEditingEntity,
@@ -41,12 +50,29 @@ const {
   deleteEntity,
   saveCollection,
   deleteCollection,
+  openImport,
   closeImport,
 } = peopleStore
 
 // Contact search (filters the person list)
 const searchQuery = ref('')
 
+// 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()
@@ -92,7 +118,101 @@ onMounted(async () => {
     <!-- Main Content Area -->
     <div class="people-content">
       <!-- Sidebar Navigation Drawer -->
-      <Sidebar />
+      <v-navigation-drawer
+        v-model="sidebarVisible"
+        contained
+        :permanent="sidebarVisible && !isMobile"
+        :temporary="isMobile"
+        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>
+
+            <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>
 
       <!-- Main View -->
       <div class="people-main">
@@ -196,6 +316,11 @@ onMounted(async () => {
   position: relative;
 }
 
+.people-sidebar {
+  border-right: 1px solid rgb(var(--v-border-color)) !important;
+  overflow-y: auto;
+}
+
 .people-main {
   flex: 1;
   min-height: 0;