feat(catalog) : categories multi-types (M:N) + bouton Filtres liste (#75)

## Contexte

Une `Category` ne pouvait appartenir qu'à **un seul** `CategoryType` (ManyToOne). Le besoin métier : plusieurs types par catégorie. Cette MR fait passer la relation en **ManyToMany** et ajoute le bouton **« Filtres »** à droite de la liste des catégories (modèle Répertoire Clients).

Slice vertical complet (le passage M:N casse mécaniquement le contrat inter-module `CategoryInterface`, consommé par la RG-2.10 fournisseurs).

## Volet A — Relation M:N
- `Category.categoryType` (ManyToOne) → `categoryTypes` (ManyToMany, jonction `category_category_type`). Au moins un type obligatoire (`Assert\\Count(min:1)`).
- **Unicité du nom GLOBALE** parmi les actifs (`uq_category_name_active`, remplace `uq_category_name_type_active`). Message 409 reformulé.
- Migration : table de jonction + backfill + drop colonne `category_type_id` + nouvel index. Validée **rejouable sur base fraîche**.
- Contrat Shared : `getCategoryTypeCode()` → `getCategoryTypeCodes(): array`. `Supplier`/`SupplierAddress`/`SupplierFixtures` revalident « contient FOURNISSEUR » (RG-2.10).
- Provider/Repository : filtre type via sous-requête `EXISTS` (ne tronque pas la collection embarquée), eager-load anti-N+1.

## Volet B — Bouton « Filtres »
- Drawer recherche par nom + types multi (OR). Compteur de filtres actifs. État local, jamais persisté en URL.
- Back : filtres `?name=` et `?typeId[]=` sur la collection.

## Front
- Multi-select `MalioSelectCheckbox`, `useCategoryForm` en `categoryTypeIds[]`, colonne « Types », clés i18n.

## Tests / vérifs
- `make test` : **582 tests, 2474 assertions, 0 échec** ✅
- `make nuxt-test` : **236 tests** ✅
- `make php-cs-fixer-allow-risky` ✅
- Migration rejouée sur base fraîche (`make db-reset`) ✅
- Nouveau `CategoryFilterTest` (name partiel + typeId[] OR + multi-type non dupliqué)

---------

Co-authored-by: Matthieu <contact@malio.fr>
Reviewed-on: #75
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-committed-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>

frontend/modules/catalog/pages/admin/categories.vue

@@ -3,13 +3,28 @@
         <PageHeader>
             {{ t('admin.categories.title') }}
             <template #actions>
-                <MalioButton
-                    v-if="canManage"
-                    :label="t('admin.categories.newCategory')"
-                    icon-name="mdi:add-bold"
-                    icon-position="left"
-                    @click="openCreateDrawer"
-                />
+                <!-- gap-12 = 48px d'espacement entre Ajouter et Filtres (meme
+                     design que le Repertoire Clients). -->
+                <div class="flex items-center gap-12">
+                    <MalioButton
+                        v-if="canManage"
+                        :label="t('admin.categories.newCategory')"
+                        icon-name="mdi:add-bold"
+                        icon-position="left"
+                        @click="openCreateDrawer"
+                    />
+                    <!-- Bouton Filtres a DROITE d'Ajouter. Le compteur reflete
+                         les filtres actifs. -->
+                    <MalioButton
+                        variant="tertiary"
+                        :label="filterButtonLabel"
+                        icon-name="mdi:tune"
+                        icon-position="left"
+                        icon-size="24"
+                        button-class="w-[184px] justify-start gap-4 text-black"
+                        @click="openFilters"
+                    />
+                </div>
             </template>
         </PageHeader>
 
@@ -47,6 +62,60 @@
             :loading="deleting"
             @confirm="handleDelete"
         />
+
+        <!-- Drawer de filtres : etat BROUILLON, applique uniquement au clic sur
+             « Appliquer ». Meme pattern que le Repertoire Clients. Etat 100 %
+             local, jamais dans l'URL (regle ABSOLUE n°6). -->
+        <MalioDrawer
+            v-model="filterDrawerOpen"
+            drawer-class="max-w-[450px]"
+            body-class="p-0"
+            footer-class="justify-between border-t border-black p-6"
+        >
+            <template #header>
+                <h2 class="text-[24px] font-bold uppercase">{{ t('admin.categories.filters.title') }}</h2>
+            </template>
+
+            <MalioAccordion>
+                <!-- Recherche par nom (param `name`, partiel insensible a la casse). -->
+                <MalioAccordionItem :title="t('admin.categories.filters.search')" value="search">
+                    <MalioInputText
+                        v-model="draftSearch"
+                        icon-name="mdi:magnify"
+                    />
+                </MalioAccordionItem>
+
+                <!-- Type(s) : cases a cocher (multi). Une categorie remonte si
+                     elle porte AU MOINS UN des types coches (OR cote back). -->
+                <MalioAccordionItem :title="t('admin.categories.filters.types')" value="types">
+                    <div class="flex flex-col">
+                        <MalioCheckbox
+                            v-for="opt in typeFilterOptions"
+                            :id="`filter-type-${opt.value}`"
+                            :key="opt.value"
+                            :label="opt.label"
+                            :model-value="draftTypeIds.includes(opt.value)"
+                            @update:model-value="(val: boolean) => toggleType(opt.value, val)"
+                        />
+                    </div>
+                </MalioAccordionItem>
+            </MalioAccordion>
+
+            <template #footer>
+                <MalioButton
+                    variant="tertiary"
+                    :label="t('admin.categories.filters.reset')"
+                    button-class="w-m-btn-action"
+                    @click="resetFilters"
+                />
+                <MalioButton
+                    variant="primary"
+                    :label="t('admin.categories.filters.apply')"
+                    button-class="w-[170px]"
+                    @click="applyFilters"
+                />
+            </template>
+        </MalioDrawer>
     </div>
 </template>
 
@@ -55,7 +124,7 @@ import type { Category } from '~/modules/catalog/types/category'
 
 const { t } = useI18n()
 const { can } = usePermissions()
-const { fetchTypes } = useCategoriesAdmin()
+const { types, fetchTypes } = useCategoriesAdmin()
 const { submitDelete } = useCategoryForm()
 
 useHead({ title: t('admin.categories.title') })
@@ -74,6 +143,7 @@ const {
     fetch: fetchCategories,
     goToPage,
     setItemsPerPage,
+    setFilters,
 } = usePaginatedList<Category>({ url: '/categories' })
 
 const drawerOpen = ref(false)
@@ -82,21 +152,96 @@ const deleteModalOpen = ref(false)
 const categoryToDelete = ref<Category | null>(null)
 const deleting = ref(false)
 
-// Colonnes du datatable. Le type est embarque cote API (cf. spec-back § 3.4) —
-// on aplatit en label lisible pour l'affichage.
+// Colonnes du datatable. Les types sont embarques cote API (ManyToMany) — on
+// aplatit en libelles joints par une virgule pour l'affichage.
 const columns = [
     { key: 'name', label: t('admin.categories.table.name') },
-    { key: 'typeLabel', label: t('admin.categories.table.type') },
+    { key: 'typesLabel', label: t('admin.categories.table.types') },
 ]
 
 const categoryItems = computed(() =>
     categories.value.map(cat => ({
         id: cat.id,
         name: cat.name,
-        typeLabel: cat.categoryType?.label ?? '',
+        typesLabel: (cat.categoryTypes ?? []).map(ct => ct.label).join(', '),
     })),
 )
 
+// ── Filtres (drawer) ────────────────────────────────────────────────────────
+// Deux niveaux d'etat (pattern Repertoire Clients) :
+//  - APPLIED : pilote la liste + le compteur du bouton. Modifie uniquement au
+//    clic « Appliquer » / « Réinitialiser ».
+//  - DRAFT : edite librement dans le drawer ; recopie vers applied a la validation.
+const filterDrawerOpen = ref(false)
+
+const draftSearch = ref('')
+const draftTypeIds = ref<number[]>([])
+
+const appliedSearch = ref('')
+const appliedTypeIds = ref<number[]>([])
+
+// Options du filtre Type(s), derivees du referentiel deja charge (fetchTypes).
+const typeFilterOptions = computed(() =>
+    types.value.map(ct => ({ value: ct.id, label: ct.label })),
+)
+
+const activeFilterCount = computed(() => {
+    let count = 0
+    if (appliedSearch.value.trim() !== '') count++
+    if (appliedTypeIds.value.length > 0) count++
+    return count
+})
+
+const filterButtonLabel = computed(() => {
+    const base = t('admin.categories.filters.title')
+    return activeFilterCount.value > 0 ? `${base} (${activeFilterCount.value})` : base
+})
+
+// Recopie l'etat applique vers le brouillon puis ouvre le drawer.
+function openFilters(): void {
+    draftSearch.value = appliedSearch.value
+    draftTypeIds.value = [...appliedTypeIds.value]
+    filterDrawerOpen.value = true
+}
+
+function toggleType(id: number, selected: boolean): void {
+    draftTypeIds.value = selected
+        ? [...draftTypeIds.value, id]
+        : draftTypeIds.value.filter(t => t !== id)
+}
+
+/**
+ * Construit le payload de filtres serveur a partir de l'etat applique. Cle
+ * `typeId[]` pour que PHP la parse en tableau (OR cote back). Filtres vides omis.
+ */
+function buildFilterPayload(): Record<string, string | string[]> {
+    const payload: Record<string, string | string[]> = {}
+    if (appliedSearch.value.trim() !== '') payload.name = appliedSearch.value.trim()
+    if (appliedTypeIds.value.length > 0) payload['typeId[]'] = appliedTypeIds.value.map(String)
+    return payload
+}
+
+// « Appliquer » : recopie brouillon → applied, pousse les filtres (retombe en
+// page 1 via usePaginatedList) et ferme le drawer.
+function applyFilters(): void {
+    appliedSearch.value = draftSearch.value.trim()
+    appliedTypeIds.value = [...draftTypeIds.value]
+
+    setFilters(buildFilterPayload(), { replace: true })
+    filterDrawerOpen.value = false
+}
+
+// « Réinitialiser » : vide brouillon ET applied, recharge la liste complete.
+// Le drawer reste ouvert pour montrer le formulaire vide.
+function resetFilters(): void {
+    draftSearch.value = ''
+    draftTypeIds.value = []
+    appliedSearch.value = ''
+    appliedTypeIds.value = []
+
+    setFilters({}, { replace: true })
+}
+
 function getCategoryById(id: number): Category | undefined {
     return categories.value.find(c => c.id === id)
 }