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}>
+                            <RoleBadge key={role.id} name={role.name} color={role.color} />
-                                {role.name}
-                            </Badge>
                         ))}
                         {overflow > 0 && <Badge>+{overflow}</Badge>}
                         {roles.length === 0 && <span className="text-xs text-neutral-400">—</span>}

src/shared/components/RoleBadge.js

@@ -0,0 +1,45 @@
+'use client';
+
+const hexToRgb = (hex) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) }
+    : null;
+};
+
+const RoleBadge = ({ name, color, onRemove }) => {
+  const rgb = color ? hexToRgb(color) : null;
+  const style = rgb
+    ? { backgroundColor: `rgba(${rgb.r},${rgb.g},${rgb.b},0.15)`, borderColor: `rgba(${rgb.r},${rgb.g},${rgb.b},0.4)`, color }
+    : {};
+  const fallback = !rgb
+    ? 'bg-neutral-100 dark:bg-neutral-700 border-neutral-200 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300'
+    : '';
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${fallback}`}
+      style={style}
+    >
+      {rgb && (
+        <span
+          className="inline-block w-2 h-2 rounded-full flex-shrink-0"
+          style={{ backgroundColor: color }}
+        />
+      )}
+      {name}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onRemove(); }}
+          className="ml-0.5 hover:opacity-70 transition-opacity leading-none"
+          aria-label={`Retirer ${name}`}
+        >
+          ×
+        </button>
+      )}
+    </span>
+  );
+};
+
+export default RoleBadge;

src/shared/components/TagInput.js

@@ -3,45 +3,19 @@
 import { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
-const hexToRgb = (hex) => {
+const Pill = ({ option, onRemove }) => (
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border bg-neutral-100 dark:bg-neutral-700 border-neutral-200 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300">
-  return result
+    {option.label}
-    ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) }
+    <button
-    : null;
+      type="button"
-};
+      onClick={(e) => { e.stopPropagation(); onRemove(); }}
-
+      className="ml-0.5 hover:opacity-70 transition-opacity leading-none"
-const Pill = ({ option, onRemove }) => {
+      aria-label={`Retirer ${option.label}`}
-  const rgb = option.color ? hexToRgb(option.color) : null;
-  const pillStyle = rgb
-    ? { backgroundColor: `rgba(${rgb.r},${rgb.g},${rgb.b},0.15)`, borderColor: `rgba(${rgb.r},${rgb.g},${rgb.b},0.4)`, color: option.color }
-    : {};
-  const fallbackClass = !rgb
-    ? 'bg-neutral-100 dark:bg-neutral-700 border-neutral-200 dark:border-neutral-600 text-neutral-700 dark:text-neutral-300'
-    : '';
-
-  return (
-    <span
-      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border ${fallbackClass}`}
-      style={pillStyle}
     >
-      {option.color && (
+      ×
-        <span
+    </button>
-          className="inline-block w-2 h-2 rounded-full flex-shrink-0"
+  </span>
-          style={{ backgroundColor: option.color }}
+);
-        />
-      )}
-      {option.label}
-      <button
-        type="button"
-        onClick={(e) => { e.stopPropagation(); onRemove(); }}
-        className="ml-0.5 hover:opacity-70 transition-opacity leading-none"
-        aria-label={`Retirer ${option.label}`}
-      >
-        ×
-      </button>
-    </span>
-  );
-};
 
 const TagInput = ({
   options = [],
@@ -51,6 +25,7 @@ const TagInput = ({
   description,
   placeholder = 'Ajouter...',
   error,
+  renderTag,
 }) => {
   const [inputValue, setInputValue] = useState('');
   const [isOpen, setIsOpen] = useState(false);
@@ -129,7 +104,9 @@ const TagInput = ({
         onClick={() => { inputRef.current?.focus(); setIsOpen(true); }}
       >
         {selectedOptions.map(opt => (
-          <Pill key={opt.value} option={opt} onRemove={() => removeOption(opt.value)} />
+          renderTag
+            ? renderTag(opt, () => removeOption(opt.value))
+            : <Pill key={opt.value} option={opt} onRemove={() => removeOption(opt.value)} />
         ))}
 
         <input

src/shared/components/index.js

@@ -1,5 +1,6 @@
 // Template components exports
 export { default as Badge, StatusBadge, TypeBadge } from './Badge';
+export { default as RoleBadge } from './RoleBadge';
 export { default as Button } from './Button';
 export { default as Card } from './Card';
 export { default as Input } from './Input';