feat(ui): use view transitions for realtime feed

ui/src/components/realtime/RealtimeEventCard.vue

@@ -114,6 +114,7 @@ const operationClass = computed(() => {
 .realtime-event {
   margin-bottom: 1rem;
   padding: 0.5rem;
+  view-transition-name: auto;
 }
 
 .old-card,

ui/src/stores/useRealtime.js

@@ -34,8 +34,15 @@ export const useRealtimeStore = defineStore('realtime', {
           console.log('📦 Payload parseado:', payload);
           console.log('🧪 Tabla recibida:', payload.table);
 
-          // store event for feed
+          // store event for feed with View Transition if available
-          this.events.unshift({ ...payload, receivedAt: new Date().toISOString() });
+          const addEvent = () => {
+            this.events.unshift({ ...payload, receivedAt: new Date().toISOString() });
+          };
+          if (document.startViewTransition) {
+            document.startViewTransition(addEvent);
+          } else {
+            addEvent();
+          }
 
           // mark badge for module and operation
           if (this.badges[payload.table]) {
@@ -64,7 +71,7 @@ export const useRealtimeStore = defineStore('realtime', {
       this._sse.onerror = () => {
         console.warn('SSE connection lost, reloading...');
       };
-    }
+    },
     clearBadgesForTable(table) {
       if (this.badges[table]) {
         this.badges[table].INSERT = false;

ui/src/views/RealtimeFeedView.vue

@@ -79,4 +79,19 @@ onMounted(() => {
 .feed-list::-webkit-scrollbar {
   display: none; /* Chrome, Safari */
 }
+
+:global(::view-transition-old(.realtime-event)),
+:global(::view-transition-new(.realtime-event)) {
+  animation: slide 0.25s ease both;
+}
+@keyframes slide {
+  from {
+    transform: translateY(var(--view-transition-slide-y, 0));
+    opacity: 0;
+  }
+  to {
+    transform: none;
+    opacity: 1;
+  }
+}
 </style>