refactor: standardize module tool bar

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

src/pages/PeoplePage.vue

@@ -12,6 +12,7 @@ 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()
@@ -53,6 +54,9 @@ const {
   closeImport,
 } = peopleStore
 
+// Contact search (filters the person list)
+const searchQuery = ref('')
+
 // VCF import file picker
 const fileInputRef = ref<HTMLInputElement | null>(null)
 
@@ -81,7 +85,7 @@ onMounted(async () => {
 <template>
   <div class="people-container">
     <!-- Top Navigation Bar -->
-    <v-toolbar elevation="0" class="people-toolbar border-b">
+    <v-toolbar elevation="0" density="compact" class="people-toolbar">
       <template #prepend>
         <v-btn
           icon="mdi-menu"
@@ -91,11 +95,24 @@ onMounted(async () => {
       </template>
 
       <v-toolbar-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-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>
+
+      <!-- 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 -->
@@ -104,8 +121,8 @@ onMounted(async () => {
       <v-navigation-drawer
         v-model="sidebarVisible"
         contained
-        :permanent="display.mdAndUp.value"
-        :temporary="display.smAndDown.value"
+        :permanent="sidebarVisible && !isMobile"
+        :temporary="isMobile"
         width="280"
         class="people-sidebar"
       >
@@ -227,6 +244,7 @@ onMounted(async () => {
             <PersonList
               :selected-collection="selectedCollection"
               :selected-entity="selectedEntity"
+              :search="searchQuery"
               @select="selectEntity"
               @fresh="createEntity"
             />
@@ -275,9 +293,21 @@ onMounted(async () => {
 }
 
 .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;