refactor: move user selector into separate component

src/Pages/ShowBasicData.vue

@@ -246,22 +246,7 @@
           :errors="owners.errors"
           edit-permissions="program.edit__show__owners"
         >
-          <ComboBoxSimple
-            v-model="owners.value"
-            :disabled="disabled"
-            :search-provider="searchUsers"
-          >
-            <template #default="{ choice, ...itemAttrs }">
-              <li v-bind="itemAttrs">
-                <UserPreview :user="choice as SteeringUser" transparent />
-              </li>
-            </template>
-            <template #selected="{ deselect }">
-              <template v-for="user in owners.value" :key="user.id">
-                <UserPreview :user="user" :removable="!disabled" @remove="deselect(user)" />
-              </template>
-            </template>
-          </ComboBoxSimple>
+          <AUserSelector v-model="owners.value" :disabled="disabled" />
         </FormGroup>
       </AFieldset>
 
@@ -395,7 +380,6 @@ import {
   useUserStore,
 } from '@/stores'
 import { useBreadcrumbs } from '@/stores/nav'
-import { SteeringUser } from '@/stores/auth'
 import { sanitizeHTML } from '@/util'
 
 import PageHeader from '@/components/PageHeader.vue'
@@ -408,11 +392,11 @@ import SafeHTML from '@/components/generic/SafeHTML'
 import ALinkCollectionEditor from '@/components/generic/ALinkCollectionEditor.vue'
 import AHTMLEditor from '@/components/generic/AHTMLEditor.vue'
 import ComboBoxSimple from '@/components/ComboBoxSimple.vue'
-import UserPreview from '@/components/UserPreview.vue'
 import Tag from '@/components/generic/Tag.vue'
 import ImagePicker from '@/components/images/ImagePicker.vue'
 import AFieldset from '@/components/generic/AFieldset.vue'
 import APlaylistEditor from '@/components/playlist/APlaylistEditor.vue'
+import AUserSelector from '@/components/identities/AUserSelector.vue'
 
 const props = defineProps<{
   show: Show
@@ -455,13 +439,6 @@ const owners = useRelationList(showStore, () => props.show, 'ownerIds', userStor
 const { obj: playlist } = useObjectFromStore(() => props.show.defaultPlaylistId, playlistStore)
 const playlistId = useAPIObjectFieldCopy(showStore, show, 'defaultPlaylistId', { debounce: 0 })
 
-function searchUsers(query: string, signal: AbortSignal) {
-  return userStore.list({
-    query: new URLSearchParams({ search: query }),
-    requestInit: { signal },
-  })
-}
-
 useBreadcrumbs(() => [
   { title: t('navigation.shows'), route: { name: 'shows' } },
   { title: props.show.name, route: { name: 'show', params: { showId: props.show.id.toString() } } },

src/components/UserPreview.vue → src/components/identities/AUserPreview.vue

@@ -4,11 +4,11 @@
     :class="{ 'tw-bg-gray-100': !transparent }"
   >
     <span>
-      <span :aria-label="t('user.username')" class="tw-font-bold tw-block">
+      <span :aria-label="t('user.fields.username')" class="tw-font-medium tw-block">
         {{ user.username }}
       </span>
       <span class="empty:tw-hidden tw-opacity-80 tw-text-xs">
-        <span v-if="name" class="tw-block" :aria-label="t('user.name')">{{ name }}</span>
+        <span v-if="name" class="tw-block" :aria-label="t('user.fields.name')">{{ name }}</span>
         <span v-if="user.email" class="tw-block">{{ user.email }}</span>
       </span>
     </span>

src/components/identities/AUserSelector.vue

+<template>
+  <ComboBoxSimple v-model="modelValue" :search-provider="searchUsers" v-bind="props">
+    <template #default="{ choice, ...itemAttrs }">
+      <li v-bind="itemAttrs">
+        <AUserPreview :user="choice as SteeringUser" transparent />
+      </li>
+    </template>
+    <template #selected="{ deselect, value }">
+      <template
+        v-for="user in ensureArray(value as null | SteeringUser | SteeringUser[])"
+        :key="user.id"
+      >
+        <AUserPreview :user="user" :removable="!props.disabled" @remove="deselect(user)" />
+      </template>
+    </template>
+  </ComboBoxSimple>
+</template>
+
+<script setup lang="ts">
+import { SteeringUser, useUserStore } from '@/stores/auth'
+import ComboBoxSimple, { ComboBoxSimpleProps } from '@/components/ComboBoxSimple.vue'
+import AUserPreview from './AUserPreview.vue'
+
+const modelValue = defineModel<null | SteeringUser | SteeringUser[]>({ required: true })
+const props = defineProps<Omit<ComboBoxSimpleProps<SteeringUser>, 'choices' | 'searchProvider'>>()
+const userStore = useUserStore()
+
+function searchUsers(query: string, signal: AbortSignal) {
+  return userStore.list({
+    query: new URLSearchParams({ search: query }),
+    requestInit: { signal },
+  })
+}
+
+function ensureArray(value: null | SteeringUser | SteeringUser[]) {
+  if (value === null) return []
+  return Array.isArray(value) ? value : [value]
+}
+</script>

src/i18n/de.js

@@ -420,9 +420,11 @@ export default {
   },
 
   user: {
-    username: 'Benutzername',
-    name: 'Name',
-    email: 'E-Mail',
+    fields: {
+      username: 'Benutzername',
+      name: 'Name',
+      email: 'E-Mail',
+    },
   },
 
   noteEditor: {

src/i18n/en.js

@@ -421,9 +421,11 @@ export default {
   },
 
   user: {
-    username: 'Username',
-    name: 'Name',
-    email: 'Email',
+    fields: {
+      username: 'Username',
+      name: 'Name',
+      email: 'Email',
+    },
   },
 
   noteEditor: {