Refine admin workflows and team access

frontend/src/views/admin/AdminWinnersView.vue

@@ -4,8 +4,10 @@ import { Award, CheckCircle2, Filter, Trash2, Trophy } from '@lucide/vue'
 import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
 import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
 import { useAdminWinnersManager } from '../../components/admin/useAdminWinnersManager'
+import { watchAdminToast } from '../../composables/useAdminToast'
 import Button from '../../components/ui/Button.vue'
 import Card from '../../components/ui/Card.vue'
+import NativeSelect from '../../components/ui/NativeSelect.vue'
 
 const {
   adminError,
@@ -22,6 +24,8 @@ const {
   clearWinner,
   saveWinner,
 } = useAdminWinnersManager()
+
+watchAdminToast(adminMessage, adminError)
 </script>
 
 <template>
@@ -98,9 +102,6 @@ const {
         </div>
       </div>
 
-      <p v-if="adminMessage" class="border-b border-emerald-100 bg-emerald-50 px-5 py-3 text-sm text-emerald-700">{{ adminMessage }}</p>
-      <p v-if="adminError" class="border-b border-rose-100 bg-rose-50 px-5 py-3 text-sm text-rose-700">{{ adminError }}</p>
-
       <div v-if="visibleResultRows.length" class="divide-y divide-violet-50">
         <article
           v-for="row in visibleResultRows"
@@ -130,16 +131,17 @@ const {
             </p>
           </div>
 
-          <select
+          <NativeSelect
             v-model="winnerSelections[row.category.id]"
             :disabled="row.isEmpty"
-            class="h-12 min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100 disabled:bg-slate-50 disabled:text-slate-400"
-          >
-            <option value="">Bitte Gewinner waehlen</option>
-            <option v-for="candidate in row.candidates" :key="candidate.id" :value="`${candidate.id}`">
-              {{ candidate.displayName }} · {{ candidate.channelSlug }} · {{ candidate.platform }}
-            </option>
-          </select>
+            :options="[
+              { label: 'Bitte Gewinner waehlen', value: '' },
+              ...row.candidates.map((candidate) => ({
+                label: `${candidate.displayName} · ${candidate.channelSlug} · ${candidate.platform}`,
+                value: `${candidate.id}`,
+              })),
+            ]"
+          />
 
           <div class="flex flex-wrap justify-end gap-2">
             <Button :disabled="savingResultForCategory === row.category.id || row.isEmpty || !winnerSelections[row.category.id]" @click="saveWinner(row.category.id)">