chore(deps): update dependency vite to v8.1.4

src/components/PersonList.vue

@@ -11,7 +11,6 @@ const entitiesStore = useEntitiesStore()
 const props = defineProps<{
   selectedCollection?: CollectionObject | null
   selectedEntity?: EntityObject | null
-  search?: string | null
 }>()
 
 // Emits
@@ -22,6 +21,7 @@ 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(() => {
-  const query = (props.search ?? '').trim().toLowerCase()
+  if (!searchQuery.value) {
-  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,6 +163,18 @@ 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" />
       
@@ -239,6 +251,13 @@ 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;
@@ -248,6 +267,10 @@ 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,7 +12,6 @@ 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()
@@ -54,9 +53,6 @@ const {
   closeImport,
 } = peopleStore
 
-// Contact search (filters the person list)
-const searchQuery = ref('')
-
 // VCF import file picker
 const fileInputRef = ref<HTMLInputElement | null>(null)
 
@@ -85,7 +81,7 @@ onMounted(async () => {
 <template>
   <div class="people-container">
     <!-- Top Navigation Bar -->
-    <v-toolbar elevation="0" density="compact" class="people-toolbar">
+    <v-toolbar elevation="0" class="people-toolbar border-b">
       <template #prepend>
         <v-btn
           icon="mdi-menu"
@@ -95,24 +91,11 @@ onMounted(async () => {
       </template>
 
       <v-toolbar-title class="d-flex align-center">
-        <v-icon size="24" color="primary" class="mr-2">mdi-account-multiple</v-icon>
+        <v-icon size="28" color="primary" class="mr-2">mdi-account-multiple</v-icon>
-        <span class="text-subtitle-1 font-weight-bold">People</span>
+        <span class="text-h6 font-weight-bold">People Manager</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 -->
@@ -121,8 +104,8 @@ onMounted(async () => {
       <v-navigation-drawer
         v-model="sidebarVisible"
         contained
-        :permanent="sidebarVisible && !isMobile"
+        :permanent="display.mdAndUp.value"
-        :temporary="isMobile"
+        :temporary="display.smAndDown.value"
         width="280"
         class="people-sidebar"
       >
@@ -244,7 +227,6 @@ onMounted(async () => {
             <PersonList
               :selected-collection="selectedCollection"
               :selected-entity="selectedEntity"
-              :search="searchQuery"
               @select="selectEntity"
               @fresh="createEntity"
             />
@@ -293,21 +275,9 @@ 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;