From df8e44fcfa88697a0804268eae9093e0ce298472 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 1 Jun 2026 09:55:12 +0000
Subject: [PATCH] [ERP-70] feat(front) : adapter l'UI a @malio/layer-ui 1.7.3
 (#33)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Mise a jour de la lib `@malio/layer-ui` de `^1.7.2` vers `^1.7.3` et adaptation des ecrans pour deux changements visuels apportes par la lib :

- Le slot message (`error || success || hint`) sous les composants Malio est desormais **toujours rendu** dans le DOM (~16px en bas), pour eviter le saut de mise en page quand un champ passe en erreur.
- Nouvelle classe utilitaire `w-m-btn-action` pour standardiser la largeur des boutons d'action (remplacement du fix `w-[150px]`).

## Details

- **Bump dependance** : `frontend/package.json` + `frontend/package-lock.json` (`@malio/layer-ui` `^1.7.2` -> `^1.7.3`)
- **Boutons d'action** : 12 occurrences `button-class=\"w-[150px]\"` migrees vers `button-class=\"w-m-btn-action\"` dans `CategoryDrawer`, `RoleDrawer`, `SiteDrawer`, `UserRbacDrawer`, `audit-log`
- **Espacements formulaires** : rabotage des `gap-*` / `space-y-*` sur les conteneurs colonne (forms drawers, listes de checkbox, grille dates du drawer filtres audit-log, accordeon permissions, login) pour absorber le slot message desormais toujours present (16px)
- **Alignements verticaux** : compensation `pb-4` sur les voisins non-Malio dans les conteneurs `items-center` — puce couleur du `SiteDrawer` (`<div class=\"shrink-0 pb-4\">` autour du span) et labels `Du` / `Au` du drawer filtres `audit-log` (`<span class=\"pb-4\">`)
- **Layout** : reduction du padding lateral xl: dans `default.vue` (`xl:px-[170px]` -> `xl:px-[44px]`)

## Test plan

- [x] `make nuxt-test` (103/103 OK localement)
- [x] `make test` (322/322 OK localement)
- [x] Validation visuelle drawer Categories (Create / Edit / Delete)
- [x] Validation visuelle drawer Roles + accordeon permissions
- [x] Validation visuelle drawer Sites (puce couleur centree avec le champ)
- [x] Validation visuelle drawer Users RBAC
- [x] Validation visuelle page Audit Log (table + drawer filtres : dates Du/Au alignees, checkboxes correctement espacees)
- [x] Validation visuelle page Login (espacements entre champs / bouton / version)

## Suite

Un fix upstream `@malio/layer-ui` sera necessaire pour corriger l'alignement du label `Lignes :` dans la pagination de `MalioDataTable` (slot vide du `MalioSelect` interne) — prompt prepare a coller dans une session sur le repo de la lib.

Reviewed-on: https://gitea.malio.fr/MALIO-DEV/Starseed/pulls/33
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
---
 frontend/app/layouts/default.vue              |  4 ++--
 .../catalog/components/CategoryDrawer.vue     |  8 +++----
 .../core/components/PermissionAccordion.vue   |  4 ++--
 .../modules/core/components/RoleDrawer.vue    |  8 +++----
 .../core/components/UserRbacDrawer.vue        | 14 ++++++-----
 .../modules/core/pages/admin/audit-log.vue    | 14 +++++++----
 frontend/modules/core/pages/login.vue         |  4 ++--
 .../modules/sites/components/SiteDrawer.vue   | 23 +++++++++++--------
 frontend/package-lock.json                    |  8 +++----
 frontend/package.json                         |  2 +-
 10 files changed, 50 insertions(+), 39 deletions(-)

diff --git a/frontend/app/layouts/default.vue b/frontend/app/layouts/default.vue
index 0ee27a6..0fa7ab9 100644
--- a/frontend/app/layouts/default.vue
+++ b/frontend/app/layouts/default.vue
@@ -24,10 +24,10 @@
             <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
                 <SiteSelector v-if="showSiteSelector"/>
                 <main
-                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-10 sm:px-6 lg:px-12 xl:px-[170px]">
+                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-10 sm:px-6 lg:px-12 xl:px-11">
                     <div
                         aria-hidden="true"
-                        class="pointer-events-none sticky top-0 z-30 h-[47px] flex-shrink-0 bg-white"/>
+                        class="pointer-events-none sticky top-0 z-30 h-11 flex-shrink-0 bg-white"/>
                     <slot/>
                 </main>
             </div>
diff --git a/frontend/modules/catalog/components/CategoryDrawer.vue b/frontend/modules/catalog/components/CategoryDrawer.vue
index d780808..89383d0 100644
--- a/frontend/modules/catalog/components/CategoryDrawer.vue
+++ b/frontend/modules/catalog/components/CategoryDrawer.vue
@@ -12,7 +12,7 @@
             </h2>
         </template>
 
-        <form class="flex flex-col gap-4 py-4" @submit.prevent="handleSave">
+        <form class="flex flex-col py-4 gap-2" @submit.prevent="handleSave">
             <!-- Nom (RG-1.02 obligatoire / RG-1.04 longueur 2-120 apres trim).
                  Erreur miroir client + erreurs server-side (422) mappees sur ce champ. -->
             <MalioInputText
@@ -52,21 +52,21 @@
                 variant="danger"
                 icon-name="mdi:delete-outline"
                 icon-position="left"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('delete')"
             />
             <MalioButton
                 v-else
                 :label="t('common.cancel')"
                 variant="tertiary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('update:modelValue', false)"
             />
             <MalioButton
                 v-if="canShowSave"
                 :label="t('common.save')"
                 variant="primary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 :disabled="form.submitting.value || loadingTypes"
                 @click="handleSave"
             />
diff --git a/frontend/modules/core/components/PermissionAccordion.vue b/frontend/modules/core/components/PermissionAccordion.vue
index ddf4949..885c45d 100644
--- a/frontend/modules/core/components/PermissionAccordion.vue
+++ b/frontend/modules/core/components/PermissionAccordion.vue
@@ -11,7 +11,7 @@
             :title="`${group.module} (${selectedCountFor(group)}/${group.permissions.length})`"
             header-class="capitalize"
         >
-            <div class="flex flex-col gap-3">
+            <div class="flex flex-col">
                 <!-- Tout selectionner pour ce module -->
                 <MalioCheckbox
                     :id="`${idPrefix}-group-${group.module}`"
@@ -20,7 +20,7 @@
                     label-class="font-semibold text-sm text-neutral-700"
                     @update:model-value="(val: boolean) => emit('toggle-all', group.module, val)"
                 />
-                <div class="flex flex-col gap-2">
+                <div class="flex flex-col">
                     <MalioCheckbox
                         v-for="perm in group.permissions"
                         :id="`${idPrefix}-perm-${perm.id}`"
diff --git a/frontend/modules/core/components/RoleDrawer.vue b/frontend/modules/core/components/RoleDrawer.vue
index a357251..4f792ed 100644
--- a/frontend/modules/core/components/RoleDrawer.vue
+++ b/frontend/modules/core/components/RoleDrawer.vue
@@ -11,7 +11,7 @@
                 {{ isEditMode ? t('admin.roles.editRole') : t('admin.roles.createRole') }}
             </h2>
         </template>
-        <form class="flex flex-col gap-4 py-4" @submit.prevent="handleSave">
+        <form class="flex flex-col py-4 gap-2" @submit.prevent="handleSave">
             <!-- Champs du role -->
             <MalioInputText
                 v-model="form.label"
@@ -71,7 +71,7 @@
                 variant="danger"
                 icon-name="mdi:delete-outline"
                 icon-position="left"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 :disabled="role?.isSystem"
                 @click="emit('delete')"
             />
@@ -79,13 +79,13 @@
                 v-else
                 :label="t('common.cancel')"
                 variant="tertiary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('update:modelValue', false)"
             />
             <MalioButton
                 :label="t('common.save')"
                 variant="primary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 :disabled="saving || permissionsLoadFailed"
                 @click="handleSave"
             />
diff --git a/frontend/modules/core/components/UserRbacDrawer.vue b/frontend/modules/core/components/UserRbacDrawer.vue
index 3d83cd0..7c6d85b 100644
--- a/frontend/modules/core/components/UserRbacDrawer.vue
+++ b/frontend/modules/core/components/UserRbacDrawer.vue
@@ -11,7 +11,7 @@
                 {{ t('admin.users.drawer.title', { username: user?.username ?? '' }) }}
             </h2>
         </template>
-        <div class="flex flex-col gap-4 py-4">
+        <div class="flex flex-col space-y-4 py-4">
             <!-- Etat d'erreur de chargement des referentiels : bloque la
                  sauvegarde pour empecher un ecrasement silencieux des droits. -->
             <div
@@ -41,11 +41,13 @@
             />
 
             <!-- Section Roles -->
-            <div>
+            <!-- !mt-0 : la MalioCheckbox au-dessus expose son slot message (16px),
+                 qui couvre deja l'ecart attendu — pas besoin du space-y-4 ici. -->
+            <div class="!mt-0">
                 <h4 class="mb-3 text-sm font-semibold text-neutral-700">
                     {{ t('admin.users.drawer.rolesSection') }}
                 </h4>
-                <div class="flex flex-col gap-2">
+                <div class="flex flex-col">
                     <MalioCheckbox
                         v-for="role in allRoles"
                         :key="role.id"
@@ -84,7 +86,7 @@
                 <div v-if="allSites.length === 0" class="text-sm text-neutral-400">
                     {{ t('admin.sites.noSites') }}
                 </div>
-                <div class="flex flex-col gap-2">
+                <div class="flex flex-col">
                     <MalioCheckbox
                         v-for="site in allSites"
                         :id="`site-${site.id}`"
@@ -113,13 +115,13 @@
             <MalioButton
                 :label="t('common.cancel')"
                 variant="tertiary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('update:modelValue', false)"
             />
             <MalioButton
                 :label="t('common.save')"
                 variant="primary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 :disabled="saving || loadFailed"
                 @click="handleSave"
             />
diff --git a/frontend/modules/core/pages/admin/audit-log.vue b/frontend/modules/core/pages/admin/audit-log.vue
index 39a806a..8efd713 100644
--- a/frontend/modules/core/pages/admin/audit-log.vue
+++ b/frontend/modules/core/pages/admin/audit-log.vue
@@ -66,15 +66,18 @@
             <MalioAccordion>
                 <!-- Dates : deux champs date+heure Du / Au (champs datetime a l'origine) -->
                 <MalioAccordionItem :title="t('audit.filters.date_range')" value="dates">
-                    <div class="grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-4">
-                        <span>{{ t('audit.filters.date_from') }}</span>
+                    <!-- pb-4 sur les labels Du/Au : simule le slot message
+                         du MalioDateTime voisin pour qu'items-center recentre
+                         le label sur le centre visible du champ. -->
+                    <div class="grid grid-cols-[auto_1fr] items-center gap-x-3">
+                        <span class="pb-4">{{ t('audit.filters.date_from') }}</span>
                         <!-- Borne le picker "Du" par la valeur "Au" pour interdire une plage
                              inversee a la saisie (le backend renverrait silencieusement 0 ligne). -->
                         <MalioDateTime
                             v-model="draftDateFrom"
                             :max="draftDateTo ?? undefined"
                         />
-                        <span>{{ t('audit.filters.date_to') }}</span>
+                        <span class="pb-4">{{ t('audit.filters.date_to') }}</span>
                         <MalioDateTime
                             v-model="draftDateTo"
                             :min="draftDateFrom ?? undefined"
@@ -84,7 +87,7 @@
 
                 <!-- Type d'entite : cases a cocher (multi-selection) -->
                 <MalioAccordionItem :title="t('audit.filters.entity_type')" value="entity">
-                    <div class="flex flex-col gap-4">
+                    <div class="flex flex-col">
                         <MalioCheckbox
                             v-for="opt in entityTypeOptions"
                             :id="`filter-entity-${opt.value}`"
@@ -105,6 +108,7 @@
                         name="audit-action"
                         :value="opt.value"
                         :label="opt.label"
+                        group-class="mt-0"
                     />
                 </MalioAccordionItem>
 
@@ -121,7 +125,7 @@
                 <MalioButton
                     variant="tertiary"
                     :label="t('audit.filters.reset')"
-                    button-class="w-[150px]"
+                    button-class="w-m-btn-action"
                     @click="resetFilters"
                 />
                 <MalioButton
diff --git a/frontend/modules/core/pages/login.vue b/frontend/modules/core/pages/login.vue
index 859296a..5d0e87f 100644
--- a/frontend/modules/core/pages/login.vue
+++ b/frontend/modules/core/pages/login.vue
@@ -6,7 +6,7 @@
             <img src="/LOGO_MALIO.png" alt="Logo" class="w-[150px]"/>
         </span>
         <form
-            class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
+            class="mt-8 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
             @submit.prevent="handleSubmit"
         >
             <MalioInputText
@@ -30,7 +30,7 @@
                 type="submit"
                 :disabled="isSubmitting"
             />
-            <p class="font-bold">v{{ version }}</p>
+            <p class="mt-6 font-bold">v{{ version }}</p>
         </form>
     </div>
 </template>
diff --git a/frontend/modules/sites/components/SiteDrawer.vue b/frontend/modules/sites/components/SiteDrawer.vue
index 87b2dea..9be6fb6 100644
--- a/frontend/modules/sites/components/SiteDrawer.vue
+++ b/frontend/modules/sites/components/SiteDrawer.vue
@@ -11,7 +11,7 @@
                 {{ isEditMode ? t('admin.sites.editSite') : t('admin.sites.createSite') }}
             </h2>
         </template>
-        <form class="flex flex-col gap-4 py-4" @submit.prevent="handleSave">
+        <form class="flex flex-col py-4 gap-2" @submit.prevent="handleSave">
             <MalioInputText
                 v-model="form.name"
                 :label="t('admin.sites.form.name')"
@@ -65,11 +65,16 @@
                         input-class="w-full font-mono"
                         required
                     />
-                    <span
-                        :style="{ backgroundColor: isValidHex ? form.color : 'transparent' }"
-                        class="inline-block size-10 shrink-0 rounded-lg border border-neutral-200"
-                        :class="{ 'border-dashed': !isValidHex }"
-                    />
+                    <!-- pb-4 sur le wrapper : simule le slot message du
+                         MalioInputText voisin pour qu'items-center recentre
+                         la puce sur le centre visible de l'input. -->
+                    <div class="shrink-0 pb-4">
+                        <span
+                            :style="{ backgroundColor: isValidHex ? form.color : 'transparent' }"
+                            class="inline-block size-10 rounded-lg border border-neutral-200"
+                            :class="{ 'border-dashed': !isValidHex }"
+                        />
+                    </div>
                 </div>
                 <p v-if="form.color && !isValidHex" class="mt-1 text-xs text-red-600">
                     {{ t('admin.sites.form.colorInvalid') }}
@@ -87,20 +92,20 @@
                 variant="danger"
                 icon-name="mdi:delete-outline"
                 icon-position="left"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('delete')"
             />
             <MalioButton
                 v-else
                 :label="t('common.cancel')"
                 variant="tertiary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 @click="emit('update:modelValue', false)"
             />
             <MalioButton
                 :label="t('common.save')"
                 variant="primary"
-                button-class="w-[150px]"
+                button-class="w-m-btn-action"
                 :disabled="saving || !isValidHex"
                 @click="handleSave"
             />
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cf060ff..f65e20f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,7 +7,7 @@
       "name": "starseed-frontend",
       "hasInstallScript": true,
       "dependencies": {
-        "@malio/layer-ui": "^1.7.1",
+        "@malio/layer-ui": "^1.7.3",
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/i18n": "^10.2.3",
         "@nuxtjs/tailwindcss": "^6.14.0",
@@ -1866,9 +1866,9 @@
       "license": "MIT"
     },
     "node_modules/@malio/layer-ui": {
-      "version": "1.7.1",
-      "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.1/layer-ui-1.7.1.tgz",
-      "integrity": "sha512-RYMMappWt/fgjD+BM7//h2O6kxD6WH9Fui8hoC29xtKySRQsqD61XKTdR7BRRkpktbxKmV39q/hblyAFBqV5yw==",
+      "version": "1.7.3",
+      "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.3/layer-ui-1.7.3.tgz",
+      "integrity": "sha512-jw3ka0Az6Jf0F9ifsooknkwXph8TNgoe6H3CjF8tbBxl8oND8HLHjlZ04ooUCoOUEIlsQ1Mm2hFFlQRCB04qdA==",
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/frontend/package.json b/frontend/package.json
index 6cf10d8..dbb651c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,7 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@malio/layer-ui": "^1.7.1",
+    "@malio/layer-ui": "^1.7.3",
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/i18n": "^10.2.3",
     "@nuxtjs/tailwindcss": "^6.14.0",