From 9ce53007418d1bd08b119595741a71414e744ec0 Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Tue, 10 Jun 2025 00:02:05 -0600
Subject: [PATCH] Fix feed transition keys

---
 ui/src/stores/useRealtime.js      | 7 ++++++-
 ui/src/views/RealtimeFeedView.vue | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/src/stores/useRealtime.js b/ui/src/stores/useRealtime.js
index 4ea171d..55cb36d 100644
--- a/ui/src/stores/useRealtime.js
+++ b/ui/src/stores/useRealtime.js
@@ -36,7 +36,12 @@ export const useRealtimeStore = defineStore('realtime', {
 
           // store event for feed with View Transition if available
           const addEvent = () => {
-            this.events.unshift({ ...payload, receivedAt: new Date().toISOString() });
+            const event = {
+              id: crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + Math.random().toString(36).slice(2),
+              ...payload,
+              receivedAt: new Date().toISOString(),
+            };
+            this.events.unshift(event);
           };
           if (document.startViewTransition) {
             document.startViewTransition(addEvent);
diff --git a/ui/src/views/RealtimeFeedView.vue b/ui/src/views/RealtimeFeedView.vue
index 072f5ef..aca7a60 100644
--- a/ui/src/views/RealtimeFeedView.vue
+++ b/ui/src/views/RealtimeFeedView.vue
@@ -23,8 +23,8 @@ onMounted(() => {
       style="max-height: calc(100vh - 160px); min-width: 60vw;"
     >
       <RealtimeEventCard
-        v-for="(ev, idx) in realtime.events"
-        :key="ev.receivedAt + idx"
+        v-for="ev in realtime.events"
+        :key="ev.id"
         :event="ev"
         style="max-width: 100%; border-bottom: white 1px solid; padding: 20px 0 40px 20px ;"
       />