fix: sidebar + autocomplete (#88)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

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

.playground/pages/composant/input/inputAutocomplete.vue

@@ -47,6 +47,31 @@
       </p>
     </div>
 
+    <div class="rounded-lg border-2 border-m-primary p-4 md:col-span-2">
+      <h2 class="mb-1 text-xl font-bold">allowCreate + BAN (test MUI-48)</h2>
+      <p class="mb-3 text-sm text-m-muted">
+        Tapez au moins 3 caractères → suggestions de la Base Adresse Nationale.
+        <strong>Repro :</strong> sélectionnez une adresse dans la liste, puis
+        <kbd>Ctrl</kbd>+<kbd>A</kbd> et <kbd>Ctrl</kbd>+<kbd>V</kbd> pour coller une autre valeur
+        par-dessus. La valeur collée doit rester (le champ ne doit ni se vider, ni faire redescendre le label).
+      </p>
+      <MalioInputAutocomplete
+        v-model="banValue"
+        label="Adresse"
+        :options="banOptions"
+        :loading="banLoading"
+        :min-search-length="3"
+        allow-create
+        icon-name="mdi:map-marker-outline"
+        icon-position="left"
+        @search="onSearchBan"
+        @create="onCreateBan"
+      />
+      <p class="mt-2 text-sm text-m-muted">
+        v-model : <code>{{ banValue ?? 'null' }}</code>
+      </p>
+    </div>
+
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Avec création (allowCreate)</h2>
       <MalioInputAutocomplete
@@ -199,4 +224,40 @@ const onSearchApi = async (query: string) => {
 const onSelectApi = (option: Option | null) => {
   apiSelected.value = option
 }
+
+// allowCreate + BAN (test MUI-48) : recherche nationale sur la Base Adresse Nationale.
+const banValue = ref<string | number | null>(null)
+const banOptions = ref<Option[]>([])
+const banLoading = ref(false)
+let banFetchId = 0
+
+const onSearchBan = async (query: string) => {
+  if (query.length < 3) {
+    banOptions.value = []
+    banLoading.value = false
+    return
+  }
+  const requestId = ++banFetchId
+  banLoading.value = true
+  try {
+    const params = new URLSearchParams({q: query, limit: '8'})
+    const response = await fetch(`https://api-adresse.data.gouv.fr/search/?${params.toString()}`)
+    const data = await response.json() as {features: {properties: {label: string}}[]}
+    if (requestId !== banFetchId) return
+    banOptions.value = data.features.map(f => ({
+      label: f.properties.label,
+      value: f.properties.label,
+    }))
+  } catch (err) {
+    if (requestId !== banFetchId) return
+    banOptions.value = []
+    console.error('Erreur lors du chargement des adresses BAN', err)
+  } finally {
+    if (requestId === banFetchId) banLoading.value = false
+  }
+}
+
+const onCreateBan = (value: string) => {
+  console.log('BAN — valeur libre créée :', value)
+}
 </script>

.playground/pages/composant/sidebar/sidebar.vue

@@ -10,6 +10,18 @@
       <template #logo-collapsed>
         <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio" />
       </template>
+      <template #footer>
+        <div class="flex items-center gap-3">
+          <Icon name="mdi:account-circle" size="32" class="text-m-primary" />
+          <div class="leading-tight">
+            <p class="text-[14px] font-semibold text-m-text">Tristan</p>
+            <p class="text-[12px] text-m-muted">Administrateur</p>
+          </div>
+        </div>
+      </template>
+      <template #footer-collapsed>
+        <Icon name="mdi:account-circle" size="28" class="mx-auto block text-m-primary" />
+      </template>
     </MalioSidebar>
 
     <MalioSidebar
@@ -22,6 +34,18 @@
       <template #logo-collapsed>
         <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio" />
       </template>
+      <template #footer>
+        <button
+          type="button"
+          class="flex w-full items-center gap-2 text-[15px] text-m-text hover:text-m-primary"
+        >
+          <Icon name="mdi:logout" size="20" />
+          Déconnexion
+        </button>
+      </template>
+      <template #footer-collapsed>
+        <Icon name="mdi:logout" size="20" class="mx-auto block text-m-text" />
+      </template>
     </MalioSidebar>
   </div>
 </template>