🚧 Fix facet counts on Messages show 1 per device

frontend/src/views/Messages.vue

@@ -14,6 +14,11 @@ const limit = 25
 
 // the full device population for the facet lists (not just the loaded page)
 const devices = ref<Device[]>([])
+// real occurrence counts per value, from GET /messages/facet-counts
+const counts = ref<{ imei: Record<string, number>; device: Record<string, number> }>({
+  imei: {},
+  device: {},
+})
 
 // server-side sort + filters (mirrored into query params on load)
 const sort = ref('')
@@ -74,9 +79,13 @@ function sortState(name: string): '' | 'asc' | 'desc' {
 }
 
 function facetValues(kind: 'imei' | 'device'): { value: string; count: number }[] {
-  // values from the full device list ("might occur"), not just the loaded page
-  if (kind === 'imei') return devices.value.map((d) => ({ value: d.imei, count: 1 }))
-  return devices.value.map((d) => ({ value: d.device, count: 1 }))
+  // real occurrence counts; devices with zero messages keep count 0 so the
+  // list covers values that "might occur"
+  const map = counts.value[kind]
+  const entries = Object.entries(map)
+  // most-occurring first, then alphabetical
+  entries.sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
+  return entries.map(([value, count]) => ({ value, count }))
 }
 
 function onCheck(kind: 'imei' | 'device', value: string, checked: boolean) {
@@ -112,6 +121,14 @@ onMounted(async () => {
   } catch {
     // facet lists just stay empty; the text filters still work
   }
+  try {
+    counts.value = await api<{
+      imei: Record<string, number>
+      device: Record<string, number>
+    }>('/api/messages/facet-counts')
+  } catch {
+    // counts stay zero; the facet lists still render from the devices
+  }
 })
 </script>