From a311c811d70299a427a079b6acf1f36ec45f0145 Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Mon, 9 Jun 2025 20:10:52 -0600
Subject: [PATCH] style(feed): highlight insert/delete events

---
 .../components/realtime/RealtimeEventCard.vue  | 10 +++++++++-
 ui/src/views/RealtimeFeedView.vue              | 18 ++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/realtime/RealtimeEventCard.vue b/ui/src/components/realtime/RealtimeEventCard.vue
index d8ac00f..39d171e 100644
--- a/ui/src/components/realtime/RealtimeEventCard.vue
+++ b/ui/src/components/realtime/RealtimeEventCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="realtime-event">
+  <div :class="['realtime-event', eventBgClass]">
     <p class="text-xs text-gray-500 mb-1">
       {{ event.operation }} · {{ event.table }} • {{ formatTimestamp(event.receivedAt) }}
     </p>
@@ -78,11 +78,19 @@ const formatTimestamp = (ts) => {
   if (!ts) return ''
   return new Date(ts).toLocaleString('es-HN', { hour12: true })
 }
+
+const eventBgClass = computed(() => {
+  if (props.event.operation === 'DELETE') return 'bg-red-100/40'
+  if (props.event.operation === 'INSERT') return 'bg-green-100/40'
+  return ''
+})
 </script>
 
 <style scoped>
 .realtime-event {
   margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
 }
 
 .old-card,
diff --git a/ui/src/views/RealtimeFeedView.vue b/ui/src/views/RealtimeFeedView.vue
index 82c66a0..e7ab2ec 100644
--- a/ui/src/views/RealtimeFeedView.vue
+++ b/ui/src/views/RealtimeFeedView.vue
@@ -16,7 +16,12 @@ onMounted(() => {
       <h1>Feed en Tiempo Real</h1>
     </header>
 
-    <transition-group name="feed" tag="div" class="feed-list overflow-auto pr-2" style="max-height: calc(100vh - 160px);">
+    <transition-group
+      name="feed"
+      tag="div"
+      class="feed-list pr-2"
+      style="max-height: calc(100vh - 160px);"
+    >
       <RealtimeEventCard
         v-for="(ev, idx) in realtime.events"
         :key="ev.receivedAt + idx"
@@ -32,7 +37,7 @@ onMounted(() => {
 <style scoped>
 .realtime-feed-container {
   padding: 20px;
-  max-width: 1200px;
+  max-width: 1500px;
   margin: 0 auto;
 }
 
@@ -63,4 +68,13 @@ onMounted(() => {
   opacity: 1;
   transform: translateY(0);
 }
+
+.feed-list {
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none; /* Firefox */
+}
+.feed-list::-webkit-scrollbar {
+  display: none; /* Chrome, Safari */
+}
 </style>