From 94ff4ea726b66eb06ea711646951c2967f7e6b98 Mon Sep 17 00:00:00 2001
From: josedario87 <71241187+josedario87@users.noreply.github.com>
Date: Wed, 11 Jun 2025 03:57:57 -0600
Subject: [PATCH] feat(ui): animate navbar tab on new events

---
 ui/src/components/ui/NavBar.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index 464b314..1c501fb 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -54,15 +54,26 @@ const hasBadge = (path, op) => {
   return table && realtime.badges[table]?.[op]
 }
 
+const hasAnyBadge = (path) => {
+  const table = tableForPath(path)
+  if (!table) return false
+  const b = realtime.badges[table]
+  return b.INSERT || b.UPDATE || b.DELETE
+}
+
 // clases dinámicas p/ mostrar / ocultar barra
 const sidebarClasses = computed(() => ui.sidebarOpen ? 'translate-x-0' : '-translate-x-full')
 
-const handleLinkClick = () => {
+const handleLinkClick = (path) => {
   // Close sidebar if desktopNavbarPersistent is false or if it's mobile view (width < 768px)
   // Assuming 768px is the 'md' breakpoint.
   if (!ui.desktopNavbarPersistent || window.innerWidth < 768) {
     ui.closeSidebar()
   }
+  // Clear badges for this module when the link is clicked
+  const table = tableForPath(path)
+  if (table) realtime.clearBadgesForTable(table)
+
   // Otherwise, (desktopNavbarPersistent is true AND width >= 768px), do nothing to keep sidebar open.
 }
 </script>
@@ -89,9 +100,9 @@ const handleLinkClick = () => {
           <RouterLink
             :to="l.to"
             class="nav-link flex items-center gap-3 w-full px-3 py-2 rounded-md font-medium transition group"
-            :class="activePath.startsWith(l.to) ? 'active' : ''"
+            :class="[activePath.startsWith(l.to) ? 'active' : '', hasAnyBadge(l.to) ? 'notified' : '']"
             :style="{ '--accent-color': accentColorForPath(l.to) }"
-            @click="handleLinkClick"
+            @click="handleLinkClick(l.to)"
           >
             <span class="text-lg" aria-hidden="true">{{ l.icon }}</span>
             <span class="truncate flex-1">{{ l.label }}</span>
@@ -117,7 +128,7 @@ ul { list-style: none; padding-left: 0; }
   border: 1px solid var(--accent-color);
   overflow: hidden;
   border-radius: 0.375rem;
-  transition: background-color 0.3s ease, color 0.3s ease;
+  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
   z-index: 0;
 }
 
@@ -159,6 +170,10 @@ ul { list-style: none; padding-left: 0; }
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
 }
 
+.nav-link.notified {
+  transform: translateX(4px);
+}
+
 /* Scrollbar styling using primary color */
 .custom-scroll::-webkit-scrollbar { width: 8px; }
 .custom-scroll::-webkit-scrollbar-track { background: transparent; }