refactor(admin): embed roles data in user list query and update role display

- remove separate `/zen/api/roles` fetch and `roleColorMap` state from UsersPage
- update SQL query to include aggregated roles array per user via subquery
- replace single role badge with multi-badge display supporting overflow indicator

src/features/admin/pages/UsersPage.client.js

@@ -12,7 +12,6 @@ const UsersPageClient = ({ currentUserId }) => {
     const toast = useToast();
     const [users, setUsers] = useState([]);
     const [loading, setLoading] = useState(true);
-    const [roleColorMap, setRoleColorMap] = useState({});
     const [editingUserId, setEditingUserId] = useState(null);
 
     const [pagination, setPagination] = useState({
@@ -48,12 +47,23 @@ const UsersPageClient = ({ currentUserId }) => {
             key: 'role',
             label: 'Rôle',
             sortable: true,
-            render: (user) => (
-                <Badge color={roleColorMap[user.role?.toLowerCase()]}>
-                    {user.role}
-                </Badge>
-            ),
-            skeleton: { height: 'h-6', width: '80px', className: 'rounded-full' },
+            render: (user) => {
+                const roles = user.roles || [];
+                const visible = roles.slice(0, 3);
+                const overflow = roles.length - 3;
+                return (
+                    <div className="flex flex-wrap gap-1">
+                        {visible.map(role => (
+                            <Badge key={role.id} color={role.color || undefined}>
+                                {role.name}
+                            </Badge>
+                        ))}
+                        {overflow > 0 && <Badge>+{overflow}</Badge>}
+                        {roles.length === 0 && <span className="text-xs text-neutral-400">—</span>}
+                    </div>
+                );
+            },
+            skeleton: { height: 'h-6', width: '140px', className: 'rounded-full' },
         },
         {
             key: 'email_verified',
@@ -116,19 +126,6 @@ const UsersPageClient = ({ currentUserId }) => {
         }
     };
 
-    useEffect(() => {
-        fetch('/zen/api/roles', { credentials: 'include' })
-            .then(r => r.json())
-            .then(data => {
-                const map = {};
-                for (const role of data.roles || []) {
-                    if (role.color) map[role.name.toLowerCase()] = role.color;
-                }
-                setRoleColorMap(map);
-            })
-            .catch(() => {});
-    }, []);
-
     useEffect(() => {
         fetchUsers();
     }, [sortBy, sortOrder, pagination.page, pagination.limit]);