feat(sites) : barre de selection de site (ticket 3/4)

Barre horizontale en haut de l'app qui liste les sites autorises de
l'utilisateur et permet de switcher d'un click. Consomme le composant
MalioSiteSelector de @malio/layer-ui 1.4.0 (upgrade depuis 1.3.0).

Composables :
- useModules (shared) : consomme /api/modules, expose isModuleActive.
  Pattern aligne sur useSidebar.
- useCurrentSite (layer sites) : singleton state, switchSite optimistic
  avec rollback sur erreur, garde anti-double-submit, propagation au
  store auth via action setCurrentSite dediee.

Composant :
- SiteSelector.vue : wrapper thin autour de MalioSiteSelector. Texte
  blanc uniforme (conforme maquette Figma) avec taille 24px forcee via
  labelClass="text-2xl". aria-label du group via ariaGroupLabel i18n.

Integration :
- Middleware auth.global.ts : chargement parallele sidebar + modules.
- layouts/default.vue : render conditionnel si module Sites actif ET
  user.sites.length > 0.
- logout.vue : reset des 3 composables (sidebar, modules, currentSite)
  dans un try/finally.
- nuxt.config.ts : auto-detection des composables/ de chaque layer
  module (necessaire car imports.dirs explicite override les defaults
  Nuxt).

Couleurs fixtures finales : Chatellerault #056CF2, Saint-Jean #F3CB00,
Pommevic #74BF04. Charge aux admins de choisir des teintes foncees
(texte blanc non contrastable via calcul WCAG, design choisi).

Tests : 40 Vitest (color, useModules, useSidebar, useCurrentSite,
SiteSelector) incluant garde anti-regression pour useI18n hors setup.
182/182 PHPUnit backend, avec et sans module actif.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/shared/composables/__tests__/useModules.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useModules } from '../useModules'
+
+// Mock de useApi : on peut scripter la reponse de /api/modules.
+const mockApiGet = vi.hoisted(() => vi.fn())
+
+// useApi est auto-importe par Nuxt en prod. En Vitest isole, on expose le
+// mock comme global pour que l'appel sans import dans useModules.ts
+// (pattern aligne sur useSidebar) fonctionne.
+vi.stubGlobal('useApi', () => ({ get: mockApiGet }))
+
+describe('useModules', () => {
+    beforeEach(() => {
+        mockApiGet.mockReset()
+        // Reset l'etat singleton entre tests.
+        const { resetModules } = useModules()
+        resetModules()
+    })
+
+    it('charge la liste des modules actifs depuis /api/modules', async () => {
+        mockApiGet.mockResolvedValueOnce({ modules: ['core', 'sites'] })
+        const { loadModules, activeModuleIds, loaded } = useModules()
+
+        await loadModules()
+
+        expect(mockApiGet).toHaveBeenCalledWith('/modules', {}, { toast: false })
+        expect(activeModuleIds.value).toEqual(['core', 'sites'])
+        expect(loaded.value).toBe(true)
+    })
+
+    it('isModuleActive retourne true pour un id present', async () => {
+        mockApiGet.mockResolvedValueOnce({ modules: ['core', 'sites'] })
+        const { loadModules, isModuleActive } = useModules()
+        await loadModules()
+
+        expect(isModuleActive('sites')).toBe(true)
+        expect(isModuleActive('core')).toBe(true)
+    })
+
+    it('isModuleActive retourne false pour un id absent', async () => {
+        mockApiGet.mockResolvedValueOnce({ modules: ['core'] })
+        const { loadModules, isModuleActive } = useModules()
+        await loadModules()
+
+        expect(isModuleActive('sites')).toBe(false)
+        expect(isModuleActive('inexistant')).toBe(false)
+    })
+
+    it('swallow les erreurs reseau et laisse la liste vide', async () => {
+        mockApiGet.mockRejectedValueOnce(new Error('boom'))
+        const { loadModules, activeModuleIds, loaded, isModuleActive } = useModules()
+
+        await loadModules()
+
+        expect(activeModuleIds.value).toEqual([])
+        expect(loaded.value).toBe(true)
+        expect(isModuleActive('sites')).toBe(false)
+    })
+
+    it('resetModules vide l\'etat', async () => {
+        mockApiGet.mockResolvedValueOnce({ modules: ['core', 'sites'] })
+        const { loadModules, resetModules, activeModuleIds, loaded } = useModules()
+        await loadModules()
+        expect(activeModuleIds.value.length).toBeGreaterThan(0)
+
+        resetModules()
+
+        expect(activeModuleIds.value).toEqual([])
+        expect(loaded.value).toBe(false)
+    })
+})

frontend/shared/composables/__tests__/useSidebar.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useSidebar } from '../useSidebar'
+
+const mockApiGet = vi.hoisted(() => vi.fn())
+vi.stubGlobal('useApi', () => ({ get: mockApiGet }))
+
+/**
+ * Tests de l'invariant "loadSidebar ne reject jamais".
+ *
+ * Garantie utilisee par le middleware auth.global.ts qui fait un
+ * Promise.all([loadSidebar(), loadModules()]) — si l'un throw, le
+ * middleware echoue et toute l'app avec. Le swallow interne est donc
+ * load-bearing et ce test le verrouille.
+ */
+describe('useSidebar', () => {
+    beforeEach(() => {
+        mockApiGet.mockReset()
+        const { resetSidebar } = useSidebar()
+        resetSidebar()
+    })
+
+    it('charge sections et disabledRoutes depuis /api/sidebar', async () => {
+        mockApiGet.mockResolvedValueOnce({
+            sections: [{ label: 's', icon: 'i', items: [] }],
+            disabledRoutes: ['/foo'],
+        })
+        const { loadSidebar, sections, disabledRoutes, loaded } = useSidebar()
+
+        await loadSidebar()
+
+        expect(sections.value).toHaveLength(1)
+        expect(disabledRoutes.value).toEqual(['/foo'])
+        expect(loaded.value).toBe(true)
+    })
+
+    it('swallow les erreurs reseau sans rejeter (invariant middleware)', async () => {
+        mockApiGet.mockRejectedValueOnce(new Error('boom'))
+        const { loadSidebar, sections, disabledRoutes, loaded } = useSidebar()
+
+        // Assertion principale : la promise resout normalement meme sur erreur.
+        await expect(loadSidebar()).resolves.toBeUndefined()
+        expect(sections.value).toEqual([])
+        expect(disabledRoutes.value).toEqual([])
+        expect(loaded.value).toBe(true)
+    })
+
+    it('isRouteDisabled matche exactement un chemin', async () => {
+        mockApiGet.mockResolvedValueOnce({ sections: [], disabledRoutes: ['/foo'] })
+        const { loadSidebar, isRouteDisabled } = useSidebar()
+        await loadSidebar()
+
+        expect(isRouteDisabled('/foo')).toBe(true)
+        expect(isRouteDisabled('/foo/bar')).toBe(true)
+        expect(isRouteDisabled('/other')).toBe(false)
+    })
+
+    it('resetSidebar vide l\'etat', async () => {
+        mockApiGet.mockResolvedValueOnce({
+            sections: [{ label: 's', icon: 'i', items: [] }],
+            disabledRoutes: ['/foo'],
+        })
+        const { loadSidebar, resetSidebar, sections, loaded } = useSidebar()
+        await loadSidebar()
+        expect(loaded.value).toBe(true)
+
+        resetSidebar()
+
+        expect(sections.value).toEqual([])
+        expect(loaded.value).toBe(false)
+    })
+})

frontend/shared/composables/useModules.ts

@@ -0,0 +1,49 @@
+/**
+ * Composable de lecture des modules actifs (source : `/api/modules`).
+ *
+ * State singleton au niveau module : `useSidebar` suit la meme convention.
+ * Chargement idempotent via le flag `loaded`, reset explicite au logout
+ * (voir pages/logout.vue).
+ */
+import { ref } from 'vue'
+
+const activeModuleIds = ref<string[]>([])
+const loaded = ref(false)
+
+export function useModules() {
+    async function loadModules() {
+        try {
+            const api = useApi()
+            const data = await api.get<{ modules: string[] }>(
+                '/modules',
+                {},
+                { toast: false },
+            )
+            activeModuleIds.value = data.modules ?? []
+            loaded.value = true
+        } catch {
+            // Swallow volontaire aligne sur useSidebar : un echec reseau ne
+            // doit pas bloquer le rendu, l'app affichera juste sans la
+            // granularite module (selector masque par defaut).
+            activeModuleIds.value = []
+            loaded.value = true
+        }
+    }
+
+    function isModuleActive(id: string): boolean {
+        return activeModuleIds.value.includes(id)
+    }
+
+    function resetModules() {
+        activeModuleIds.value = []
+        loaded.value = false
+    }
+
+    return {
+        activeModuleIds,
+        loaded,
+        loadModules,
+        isModuleActive,
+        resetModules,
+    }
+}

frontend/shared/composables/useSidebar.ts

@@ -1,3 +1,4 @@
+import { ref } from 'vue'
 import type { SidebarSection } from '~/shared/types'
 
 const sections = ref<SidebarSection[]>([])

frontend/shared/stores/auth.ts

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import type { UserData } from '~/shared/types/user-data'
+import type { Site } from '~/shared/types/sites'
 import { getCurrentUser, login, logout } from '~/shared/services/auth'
 
 export const useAuthStore = defineStore('auth', {
@@ -66,6 +67,18 @@ export const useAuthStore = defineStore('auth', {
             } catch {
                 // Silently fail — user session might have expired
             }
+        },
+        /**
+         * Action dediee au switch du site courant (ticket 3 module Sites).
+         * Utilisee par useCurrentSite apres la confirmation serveur, et en
+         * rollback si la requete PATCH echoue apres une mutation optimistic.
+         * Passer explicitement par une action plutot que muter user.currentSite
+         * directement garantit la tracabilite Pinia (devtools).
+         */
+        setCurrentSite(site: Site | null) {
+            if (this.user) {
+                this.user.currentSite = site
+            }
         }
     }
 })

frontend/shared/utils/__tests__/color.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { isValidSiteColor } from '../color'
+
+describe('isValidSiteColor', () => {
+    it('accepte un hex majuscule', () => {
+        expect(isValidSiteColor('#ABCDEF')).toBe(true)
+    })
+
+    it('accepte un hex minuscule', () => {
+        expect(isValidSiteColor('#abcdef')).toBe(true)
+    })
+
+    it('accepte un hex mixte', () => {
+        expect(isValidSiteColor('#0a1B2c')).toBe(true)
+    })
+
+    it('accepte les couleurs fixtures du projet', () => {
+        expect(isValidSiteColor('#056CF2')).toBe(true)
+        expect(isValidSiteColor('#F3CB00')).toBe(true)
+        expect(isValidSiteColor('#74BF04')).toBe(true)
+    })
+
+    it('rejette un nom CSS', () => {
+        expect(isValidSiteColor('red')).toBe(false)
+    })
+
+    it('rejette un hex court', () => {
+        expect(isValidSiteColor('#FFF')).toBe(false)
+    })
+
+    it('rejette un hex sans diese', () => {
+        expect(isValidSiteColor('FFFFFF')).toBe(false)
+    })
+
+    it('rejette un caractere non hex', () => {
+        expect(isValidSiteColor('#12345G')).toBe(false)
+    })
+
+    it('rejette une chaine vide', () => {
+        expect(isValidSiteColor('')).toBe(false)
+    })
+})

frontend/shared/utils/color.ts

@@ -0,0 +1,19 @@
+/**
+ * Utilitaires de couleur partages.
+ *
+ * Aligne sur la regex backend stricte #RRGGBB (voir Site.php).
+ */
+
+const HEX_COLOR_REGEX = /^#[0-9A-Fa-f]{6}$/
+
+/**
+ * Valide qu'une chaine respecte le format #RRGGBB strict (7 caracteres,
+ * 6 chiffres hexadecimaux apres le #). Tolere la casse (majuscules,
+ * minuscules, mixte).
+ *
+ * Utilise cote front par SiteDrawer pour bloquer le submit avant l'envoi
+ * backend — miroir du pattern Symfony Assert\Regex sur Site::$color.
+ */
+export function isValidSiteColor(hex: string): boolean {
+    return HEX_COLOR_REGEX.test(hex)
+}