From a7fafaf7c536e371f7c2708cd38c1884ef61e371 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 6 Mar 2026 13:34:39 +0100
Subject: [PATCH] refactor: replace native select with shadcn Select for user
 role in admin

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/routes/admin/users/+page.svelte       | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/routes/admin/users/+page.svelte b/packages/frontend/src/routes/admin/users/+page.svelte
index 83397ca..afcd0f6 100644
--- a/packages/frontend/src/routes/admin/users/+page.svelte
+++ b/packages/frontend/src/routes/admin/users/+page.svelte
@@ -7,6 +7,7 @@
   import { getAssetUrl } from "$lib/api";
   import { Button } from "$lib/components/ui/button";
   import { Input } from "$lib/components/ui/input";
+  import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
   import * as Dialog from "$lib/components/ui/dialog";
   import type { User } from "$lib/types";
 
@@ -147,16 +148,21 @@
             </td>
             <td class="px-4 py-3 text-muted-foreground">{user.email}</td>
             <td class="px-4 py-3">
-              <select
-                class="rounded border border-border/40 bg-background px-2 py-1 text-xs disabled:opacity-50"
+              <Select
+                type="single"
                 value={user.role}
                 disabled={user.id === currentUserId || updatingId === user.id}
-                onchange={(e) => changeUserRole(user, (e.target as HTMLSelectElement).value)}
+                onValueChange={(v) => v && changeUserRole(user, v)}
               >
-                <option value="viewer">Viewer</option>
-                <option value="model">Model</option>
-                <option value="admin">Admin</option>
-              </select>
+                <SelectTrigger class="w-24 h-7 text-xs">
+                  {user.role}
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="viewer">Viewer</SelectItem>
+                  <SelectItem value="model">Model</SelectItem>
+                  <SelectItem value="admin">Admin</SelectItem>
+                </SelectContent>
+              </Select>
             </td>
             <td class="px-4 py-3 text-muted-foreground">{formatDate(user.date_created)}</td>
             <td class="px-4 py-3 text-right">