From 71fe05bd2bb70eec677be400b0fb4ae75130d8b6 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Wed, 22 Apr 2026 16:20:43 -0400
Subject: [PATCH] feat(users): add description field to permission definitions

---
 src/core/users/constants.js                   | 32 +++++++++----------
 .../admin/components/RoleEditModal.client.js  | 18 ++++++-----
 src/shared/components/Switch.js               | 12 +++----
 3 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/core/users/constants.js b/src/core/users/constants.js
index 3cdb13f..6d21c0f 100644
--- a/src/core/users/constants.js
+++ b/src/core/users/constants.js
@@ -23,22 +23,22 @@ export const PERMISSIONS = {
 };
 
 export const PERMISSION_DEFINITIONS = [
-  { key: 'admin.access',    name: 'Accès au panneau admin',      group_name: 'Administration' },
-  { key: 'content.view',    name: 'Voir le contenu',             group_name: 'Contenu' },
-  { key: 'content.create',  name: 'Créer du contenu',            group_name: 'Contenu' },
-  { key: 'content.edit',    name: 'Modifier le contenu',         group_name: 'Contenu' },
-  { key: 'content.delete',  name: 'Supprimer le contenu',        group_name: 'Contenu' },
-  { key: 'content.publish', name: 'Publier le contenu',          group_name: 'Contenu' },
-  { key: 'media.view',      name: 'Voir les médias',             group_name: 'Médias' },
-  { key: 'media.upload',    name: 'Téléverser des médias',       group_name: 'Médias' },
-  { key: 'media.delete',    name: 'Supprimer des médias',        group_name: 'Médias' },
-  { key: 'users.view',      name: 'Voir les utilisateurs',       group_name: 'Utilisateurs' },
-  { key: 'users.edit',      name: 'Modifier les utilisateurs',   group_name: 'Utilisateurs' },
-  { key: 'users.delete',    name: 'Supprimer les utilisateurs',  group_name: 'Utilisateurs' },
-  { key: 'roles.view',      name: 'Voir les rôles',              group_name: 'Rôles' },
-  { key: 'roles.manage',    name: 'Gérer les rôles',             group_name: 'Rôles' },
-  { key: 'settings.view',   name: 'Voir les paramètres',         group_name: 'Paramètres' },
-  { key: 'settings.manage', name: 'Gérer les paramètres',        group_name: 'Paramètres' },
+  { key: 'admin.access',    name: 'Accès au panneau admin',      description: "Permet d'accéder à l'interface d'administration.",                              group_name: 'Administration' },
+  { key: 'content.view',    name: 'Voir le contenu',             description: 'Permet de consulter les articles, pages et autres contenus.',                   group_name: 'Contenu' },
+  { key: 'content.create',  name: 'Créer du contenu',            description: 'Permet de rédiger et soumettre de nouveaux contenus.',                          group_name: 'Contenu' },
+  { key: 'content.edit',    name: 'Modifier le contenu',         description: 'Permet de mettre à jour des contenus existants.',                               group_name: 'Contenu' },
+  { key: 'content.delete',  name: 'Supprimer le contenu',        description: 'Permet de supprimer définitivement des contenus.',                              group_name: 'Contenu' },
+  { key: 'content.publish', name: 'Publier le contenu',          description: 'Permet de rendre des contenus visibles publiquement.',                          group_name: 'Contenu' },
+  { key: 'media.view',      name: 'Voir les médias',             description: 'Permet de parcourir la médiathèque.',                                           group_name: 'Médias' },
+  { key: 'media.upload',    name: 'Téléverser des médias',       description: 'Permet d\'uploader des images, vidéos et fichiers.',                            group_name: 'Médias' },
+  { key: 'media.delete',    name: 'Supprimer des médias',        description: 'Permet de supprimer des fichiers de la médiathèque.',                           group_name: 'Médias' },
+  { key: 'users.view',      name: 'Voir les utilisateurs',       description: 'Permet de consulter la liste des membres et leurs profils.',                    group_name: 'Utilisateurs' },
+  { key: 'users.edit',      name: 'Modifier les utilisateurs',   description: 'Permet de changer les informations et les rôles des membres.',                  group_name: 'Utilisateurs' },
+  { key: 'users.delete',    name: 'Supprimer des utilisateurs',  description: 'Permet de supprimer des comptes membres.',                                      group_name: 'Utilisateurs' },
+  { key: 'roles.view',      name: 'Voir les rôles',              description: 'Permet de consulter la liste des rôles et leurs permissions.',                  group_name: 'Rôles' },
+  { key: 'roles.manage',    name: 'Gérer les rôles',             description: 'Permet de créer, modifier et supprimer des rôles.',                            group_name: 'Rôles' },
+  { key: 'settings.view',   name: 'Voir les paramètres',         description: 'Permet de consulter la configuration du site.',                                 group_name: 'Paramètres' },
+  { key: 'settings.manage', name: 'Gérer les paramètres',        description: 'Permet de modifier la configuration et les réglages du site.',                  group_name: 'Paramètres' },
 ];
 
 /**
diff --git a/src/features/admin/components/RoleEditModal.client.js b/src/features/admin/components/RoleEditModal.client.js
index a38043b..48f999d 100644
--- a/src/features/admin/components/RoleEditModal.client.js
+++ b/src/features/admin/components/RoleEditModal.client.js
@@ -150,21 +150,23 @@ const RoleEditModal = ({ roleId, isOpen, onClose, onSaved }) => {
                         </div>
                     </div>
 
-                    <div className="flex flex-col gap-2">
-                        <p className="text-xs font-semibold text-neutral-900 dark:text-white">Permissions</p>
+                    <div className="flex flex-col gap-3">
+                        <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Permissions</p>
                         {Object.entries(PERMISSION_GROUPS).map(([group, perms]) => (
-                            <div key={group} className="flex flex-col">
-                                <p className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide py-1">
-                                    {group}
-                                </p>
-                                <div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-700/50">
+                            <div key={group} className="rounded-xl border border-neutral-200 dark:border-neutral-700/60 overflow-hidden">
+                                <div className="px-4 py-2.5 bg-neutral-50 dark:bg-neutral-800/60 border-b border-neutral-200 dark:border-neutral-700/60">
+                                    <p className="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide">
+                                        {group}
+                                    </p>
+                                </div>
+                                <div className="flex flex-col divide-y divide-neutral-100 dark:divide-neutral-700/40">
                                     {perms.map((perm) => (
                                         <Switch
                                             key={perm.key}
                                             checked={selectedPerms.includes(perm.key)}
                                             onChange={() => togglePerm(perm.key)}
                                             label={perm.name}
-                                            description={perm.key}
+                                            description={perm.description}
                                         />
                                     ))}
                                 </div>
diff --git a/src/shared/components/Switch.js b/src/shared/components/Switch.js
index 302fd32..215d238 100644
--- a/src/shared/components/Switch.js
+++ b/src/shared/components/Switch.js
@@ -9,12 +9,12 @@ const Switch = ({
 }) => {
   return (
     <div
-      className={`flex items-center justify-between gap-4 py-3 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+      className={`flex items-center justify-between gap-4 px-4 py-3 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
       onClick={() => !disabled && onChange?.(!checked)}
     >
       <div className="flex flex-col gap-0.5 min-w-0">
         {label && (
-          <span className="text-sm text-neutral-900 dark:text-white select-none">{label}</span>
+          <span className="text-sm font-medium text-neutral-900 dark:text-white select-none">{label}</span>
         )}
         {description && (
           <span className="text-xs text-neutral-500 dark:text-neutral-400 select-none">{description}</span>
@@ -27,14 +27,14 @@ const Switch = ({
         aria-checked={checked}
         disabled={disabled}
         onClick={(e) => { e.stopPropagation(); !disabled && onChange?.(!checked); }}
-        className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900 ${
+        className={`relative flex-shrink-0 w-11 h-6 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900 border ${
           checked
-            ? 'bg-blue-700'
-            : 'bg-neutral-300 dark:bg-neutral-600'
+            ? 'bg-blue-700 border-blue-800'
+            : 'bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-600'
         } ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
       >
         <span
-          className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform duration-200 ${
+          className={`absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-200 ${
             checked ? 'translate-x-5' : 'translate-x-0'
           }`}
         />