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;
 }