refactor(ui): replace RoleBadge with generic Badge component

- add `dot` and `onRemove` props to Badge for colored dot and removable tag support
- delete RoleBadge component in favor of Badge with dot prop
- update UserCreateModal, UserEditModal, and UsersPage to use Badge instead of RoleBadge
- remove RoleBadge export from shared components index

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

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

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

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

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

src/shared/components/Badge.js

@@ -7,10 +7,12 @@ const Badge = ({
     variant = 'default',
     size = 'sm',
     color = null,
+    dot = false,
+    onRemove,
     className = '',
     ...props
 }) => {
-    const baseClassName = 'inline-flex items-center font-medium border font-ibm-plex-mono';
+    const baseClassName = 'inline-flex items-center gap-1 font-medium border font-ibm-plex-mono';
 
     const variants = {
         default: 'bg-neutral-700/10 text-neutral-700 border-neutral-800/30 dark:bg-neutral-600/10 dark:text-neutral-400 dark:border-neutral-800',
@@ -43,7 +45,20 @@ const Badge = ({
             style={colorStyle}
             {...props}
         >
+            {dot && color && (
+                <span className="inline-block w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: color }} />
+            )}
             {children}
+            {onRemove && (
+                <button
+                    type="button"
+                    onClick={(e) => { e.stopPropagation(); onRemove(); }}
+                    className="ml-0.5 hover:opacity-70 transition-opacity leading-none"
+                    aria-label="Retirer"
+                >
+                    ×
+                </button>
+            )}
         </span>
     );
 };

src/shared/components/RoleBadge.js

@@ -1,45 +0,0 @@
-'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

@@ -86,20 +86,20 @@ const TagInput = ({
   };
 
   return (
-    <div className="flex flex-col gap-1.5" ref={containerRef}>
+    <div className="space-y-2" ref={containerRef}>
       {label && (
-        <label className="text-xs font-medium text-neutral-700 dark:text-neutral-300">
+        <label className="block text-xs font-medium text-neutral-700 dark:text-white">
           {label}
         </label>
       )}
 
       <div
-        className={`relative min-h-[42px] w-full flex flex-wrap items-center gap-1.5 px-3 py-2 rounded-xl border text-sm bg-white dark:bg-neutral-900 cursor-text transition-shadow ${
+        className={`relative w-full flex flex-wrap items-center gap-1.5 px-[10px] py-[7px] rounded-lg border text-[13px] bg-white dark:bg-neutral-900/60 cursor-text transition-all duration-[120ms] ease-out ${
           isOpen
-            ? 'border-blue-700 ring-2 ring-blue-700/20'
+            ? 'border-neutral-500 ring-1 ring-neutral-500/20 dark:border-neutral-600 dark:ring-neutral-600/20'
             : error
-            ? 'border-red-400 dark:border-red-500'
-            : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
+            ? 'border-red-500/50 dark:border-red-500/50'
+            : 'border-neutral-300 dark:border-neutral-700/50 hover:border-neutral-400 dark:hover:border-neutral-600'
         }`}
         onClick={() => { inputRef.current?.focus(); setIsOpen(true); }}
       >

src/shared/components/index.js

@@ -1,6 +1,5 @@
 // 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';