feat(admin): add RoleBadge component and integrate it in user management views

- add new RoleBadge shared component for consistent role display
- export RoleBadge from shared components index
- replace inline Badge usage with RoleBadge in UsersPage role column
- use RoleBadge via renderTag prop in UserEditModal role TagInput
- simplify TagInput Pill to a generic unstyled pill, removing color logic

src/features/admin/components/UserEditModal.client.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Input, TagInput, Modal } from '@zen/core/shared/components';
+import { Input, TagInput, Modal, RoleBadge } from '@zen/core/shared/components';
 import { useToast } from '@zen/core/toast';
 
 const UserEditModal = ({ userId, currentUserId, isOpen, onClose, onSaved }) => {
@@ -225,6 +225,9 @@ const UserEditModal = ({ userId, currentUserId, isOpen, onClose, onSaved }) => {
                         value={selectedRoleIds}
                         onChange={setSelectedRoleIds}
                         placeholder="Rechercher un rôle..."
+                        renderTag={(opt, onRemove) => (
+                            <RoleBadge key={opt.value} name={opt.label} color={opt.color} onRemove={onRemove} />
+                        )}
                     />
                 </div>
             )}

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

@@ -2,7 +2,7 @@
 
 import { registerPage } from '../registry.js';
 import { useState, useEffect } from 'react';
-import { Card, Table, Badge, StatusBadge, Button, UserAvatar, RelativeDate } from '@zen/core/shared/components';
+import { Card, Table, Badge, StatusBadge, Button, UserAvatar, RelativeDate, RoleBadge } from '@zen/core/shared/components';
 import { PencilEdit01Icon } from '@zen/core/shared/icons';
 import { useToast } from '@zen/core/toast';
 import AdminHeader from '../components/AdminHeader.js';
@@ -54,9 +54,7 @@ const UsersPageClient = ({ currentUserId }) => {
                 return (
                     <div className="flex flex-wrap gap-1">
                         {visible.map(role => (
-                            <Badge key={role.id} color={role.color || undefined}>
-                                {role.name}
-                            </Badge>
+                            <RoleBadge key={role.id} name={role.name} color={role.color} />
                         ))}
                         {overflow > 0 && <Badge>+{overflow}</Badge>}
                         {roles.length === 0 && <span className="text-xs text-neutral-400">—</span>}