feat: add a search field and add defaults to navigation-right component

packages/vuetify/navigation-right.vue

@@ -14,7 +14,7 @@
         bg-color="background"
         density="compact"
       >
-        <v-defaults-provider :defaults="{ VListItem: { rounded: true } }">
+        <v-defaults-provider :defaults="defaults">
           <slot />
         </v-defaults-provider>
       </v-list>
@@ -43,10 +43,9 @@
       >
         <v-list
           data-iframe-height
-          bg-color="background"
           density="compact"
         >
-          <v-defaults-provider :defaults="{ VListItem: { rounded: true } }">
+          <v-defaults-provider :defaults="defaults">
             <slot />
           </v-defaults-provider>
         </v-list>
@@ -60,4 +59,29 @@ import { mdiDotsVertical } from '@mdi/js'
 import { useDisplay } from 'vuetify'
 
 const display = useDisplay()
+
+const defaults = {
+  VListItem: {
+    rounded: true
+  },
+  VAutocomplete: {
+    color: 'primary',
+    density: 'compact',
+    variant: 'outlined',
+    clearable: true,
+    hideDetails: true,
+    rounded: true,
+  },
+  VSelect: {
+    color: 'primary',
+    density: 'compact',
+    variant: 'outlined',
+    clearable: true,
+    hideDetails: true,
+    rounded: true
+  },
+  VSwitch: {
+    hideDetails: true
+  }
+}
 </script>

packages/vuetify/owner-avatar.vue

@@ -50,7 +50,7 @@ const avatarUrl = computed(() => {
 const label = computed(() => {
   let label = ''
   if (!props.omitOwnerName || !props.owner.department) label += props.owner.name
-  if (props.owner.department) label += !props.omitOwnerName ? ' - ' : '' + (props.owner.departmentName || props.owner.department)
+  if (props.owner.department) label += (!props.omitOwnerName ? ' - ' : '') + (props.owner.departmentName || props.owner.department)
   if (props.owner.role) label += ` (${props.owner.role})`
   return label
 })

packages/vuetify/search-field.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-text-field
+    v-bind="$attrs"
+    :append-inner-icon="mdiMagnify"
+    :label="t('search')"
+    class="mx-4"
+    color="primary"
+    density="compact"
+    variant="outlined"
+    autofocus
+    hide-details
+    clearable
+  />
+</template>
+
+<script setup lang="ts">
+import { mdiMagnify } from '@mdi/js'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+</script>
+
+<i18n lang="yaml">
+  en:
+    search: Search
+  fr:
+    search: Rechercher
+</i18n>