refactor: add navigaton panel component

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

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/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/PeoplePage.vue

@@ -1,19 +1,14 @@
 <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 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'
 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(() => {
@@ -25,7 +20,6 @@ const peopleStore = usePeopleStore()
 
 const {
   sidebarVisible,
-  loading,
   selectedCollection,
   selectedEntity,
   entityEditorMode,
@@ -38,9 +32,6 @@ const {
 
 const {
   initialize,
-  selectCollection,
-  openEditCollection,
-  openCreateCollection,
   selectEntity,
   createEntity,
   startEditingEntity,
@@ -50,29 +41,12 @@ 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()
@@ -118,101 +92,7 @@ onMounted(async () => {
     <!-- Main Content Area -->
     <div class="people-content">
       <!-- Sidebar Navigation Drawer -->
-      <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>
+      <Sidebar />
 
       <!-- Main View -->
       <div class="people-main">
@@ -316,11 +196,6 @@ 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;