fix: Replay controls

vigilcare-dashboard/src/components/patient/AlertsList.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { storeToRefs } from 'pinia'
+import { computed } from 'vue'
 import { useAlertStore } from '@/stores/alerts'
 import { useSettingsStore } from '@/stores/settings'
 import { usePolling } from '@/composables/usePolling'
@@ -20,11 +21,15 @@ const alertStore = useAlertStore()
 const settings = useSettingsStore()
 const { alerts, loading } = storeToRefs(alertStore)
 
-function loadOpenAlerts() {
-  return alertStore.loadAlerts(props.encounterId, 'OPEN')
+function loadEncounterAlerts() {
+  return alertStore.loadAlerts(props.encounterId)
 }
 
-usePolling(loadOpenAlerts, 5_000)
+usePolling(loadEncounterAlerts, 5_000)
+
+const visibleAlerts = computed(() =>
+  alerts.value.filter(a => a.status !== 'Resolved'),
+)
 
 function severityVariant(severity) {
   return severity === 'Critical' ? 'critical' : 'warning'
@@ -32,12 +37,12 @@ function severityVariant(severity) {
 
 async function acknowledge(alertId) {
   await alertStore.acknowledge(alertId, settings.clinicianId)
-  await loadOpenAlerts()
+  await loadEncounterAlerts()
 }
 
 async function resolve(alertId) {
   await alertStore.resolve(alertId)
-  await loadOpenAlerts()
+  await loadEncounterAlerts()
 }
 </script>
 
@@ -49,10 +54,11 @@ async function resolve(alertId) {
       </h2>
     </template>
 
-    <EmptyState v-if="!loading && alerts.length === 0" message="No open alerts" />
+    <EmptyState v-if="!loading && visibleAlerts.length === 0" message="No open alerts" />
     <ul v-else class="divide-y divide-gray-200 dark:divide-gray-700">
       <li
-        v-for="alert in alerts"
+        v-for="alert in visibleAlerts"
+        :id="`alert-row-${alert.id}`"
         :key="alert.id"
         class="flex cursor-pointer flex-col gap-4 py-4 first:pt-0 last:pb-0 sm:flex-row sm:items-start sm:justify-between"
         :class="selectedId === alert.id ? 'bg-blue-50/50 dark:bg-blue-950/20' : ''"