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>}