WIP

app/pages/machines/index.vue

@@ -120,11 +120,12 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
+import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { useMachines } from '~/composables/useMachines'
 import { useSites } from '~/composables/useSites'
 import { useToast } from '~/composables/useToast'
 import { humanizeError } from '~/shared/utils/errorMessages'
+import { useUrlState } from '~/composables/useUrlState'
 import IconLucidePlus from '~icons/lucide/plus'
 import IconLucideFactory from '~icons/lucide/factory'
 import IconLucideMapPin from '~icons/lucide/map-pin'
@@ -135,8 +136,28 @@ const { machines, loading, loadMachines, deleteMachine } = useMachines()
 const { sites, loadSites } = useSites()
 const toast = useToast()
 
+const urlState = useUrlState({
+  q: { default: '', debounce: 300 },
+  sites: { default: '' },
+})
+
+const searchQuery = urlState.q
 const selectedSites = reactive(new Set())
-const searchQuery = ref('')
+
+// Sync URL → selectedSites on load and back/forward
+watch(urlState.sites, (val) => {
+  selectedSites.clear()
+  if (val) {
+    for (const id of String(val).split(',')) {
+      if (id) selectedSites.add(id)
+    }
+  }
+}, { immediate: true })
+
+// Sync selectedSites → URL
+watch(() => [...selectedSites], (ids) => {
+  urlState.sites.value = ids.join(',')
+})
 
 // Enrichir les machines avec les objets site complets
 const enrichedMachines = computed(() => {