refactor: standardize module tool bar

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

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,7 +22,6 @@ const emit = defineEmits<{
 
 // State
 const loading = ref(false)
-const searchQuery = ref('')
 
 // Entities belonging to the selected collection, sourced live from the manager store
 const collectionEntities = computed<EntityObject[]>(() => {
@@ -34,10 +34,10 @@ const collectionEntities = computed<EntityObject[]>(() => {
 
 // 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 || ''
@@ -163,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" />
       
@@ -251,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;
@@ -267,10 +248,6 @@ function entityAvatarColor(entity: EntityObject): string {
   background: transparent;
 }
 
-.person-list-container :deep(.v-field) {
-  background: transparent;
-}
-
 .v-list-item {
   cursor: pointer;
 }

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>
+        <v-icon size="24" color="primary" class="mr-2">mdi-account-multiple</v-icon>
-        <span class="text-h6 font-weight-bold">People Manager</span>
+        <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"
+        :permanent="sidebarVisible && !isMobile"
-        :temporary="display.smAndDown.value"
+        :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;