From dcd6f3091b0c41b82a9c1e65f7fbb6d352dda0ec Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 10 Jun 2025 06:13:26 +0000
Subject: [PATCH 1/6] Refactor: Update Navbar and TopBar UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit implements the following changes:

1. Removed the close button (✕) from within the NavBar component (`ui/src/components/ui/NavBar.vue`). The sidebar is now exclusively controlled by the hamburger icon in the TopBar.
2. Moved the hamburger menu button in the TopBar component (`ui/src/components/ui/TopBar.vue`) to the left side of the application title ("Núcleo").
3. Improved the visual styling of the hamburger button in `TopBar.vue` with increased padding, consistent border-radius, and clearer hover and focus states for better usability and accessibility.

These changes address the issue of redundant close buttons and aim to provide a cleaner and more intuitive navigation experience.
---
 ui/src/components/ui/NavBar.vue |  4 ----
 ui/src/components/ui/TopBar.vue | 27 ++++++++++++++++++++-------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/ui/NavBar.vue b/ui/src/components/ui/NavBar.vue
index 4108070..464b314 100644
--- a/ui/src/components/ui/NavBar.vue
+++ b/ui/src/components/ui/NavBar.vue
@@ -80,10 +80,6 @@ const handleLinkClick = () => {
     <div class="flex items-center justify-between px-4 py-4 md:px-5 md:py-4 md:border-none"
          style="border-bottom-color: var(--secondary-color); border-bottom-width: 1px;">
       <span class="text-lg font-semibold md:hidden" style="color: var(--primary-color);">Núcleo</span>
-      <button class="close-btn h-8 w-8 flex items-center justify-center rounded-full border transition duration-200"
-              @click="ui.toggleSidebar">
-        ✕
-      </button>
     </div>
 
     <!-- navegación -->
diff --git a/ui/src/components/ui/TopBar.vue b/ui/src/components/ui/TopBar.vue
index a53f262..5f63cb6 100644
--- a/ui/src/components/ui/TopBar.vue
+++ b/ui/src/components/ui/TopBar.vue
@@ -7,26 +7,39 @@ const ui = useUi()
   <!-- barra superior fija -->
   <header class="fixed top-0 left-0 right-0 h-14 flex items-center justify-between px-4 md:px-6 z-50 shadow-sm"
           :style="{ backgroundColor: 'var(--background-color)', borderBottom: '1px solid var(--secondary-color)' }">
-    <!-- título -->
-    <h1 class="text-lg font-semibold tracking-wide select-none" :style="{ color: 'var(--primary-color)' }">Núcleo</h1>
-
     <!-- botón hamburguesa (visible solo en mobile) -->
     <button
       @click="ui.toggleSidebar"
       class="hamburger-button inline-flex items-center justify-center h-9 w-9 rounded-md text-white transition">
       &#9776;
     </button>
+
+    <!-- título -->
+    <h1 class="text-lg font-semibold tracking-wide select-none" :style="{ color: 'var(--primary-color)' }">Núcleo</h1>
   </header>
 </template>
 
 <style scoped>
 .hamburger-button {
   background-color: var(--primary-color);
+  color: white; /* Assuming primary-color is dark enough for white text */
+  padding: 0.5rem; /* Increased padding */
+  border-radius: 0.375rem; /* Consistent border radius */
+  transition: background-color 0.2s ease-in-out, filter 0.2s ease-in-out;
+  line-height: 1; /* Ensure icon is centered if it's text-based */
 }
+
 .hamburger-button:hover {
-  filter: brightness(1.1); /* Slight lighten/darken based on primary color */
+  filter: brightness(1.15); /* Slightly more noticeable hover brightness */
+}
+
+.hamburger-button:focus {
+  outline: 2px solid var(--primary-color); /* Simple outline for focus */
+  outline-offset: 2px; /* Offset outline slightly */
+}
+
+.hamburger-button:focus-visible { /* More modern focus indication */
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
 }
-/* Alternative hover if primary is very light or very dark, requiring specific color adjustment */
-/* .hamburger-button:hover { background-color: var(--primary-color-hover); } */
-/* Ensure --primary-color-hover is defined or calculated based on --primary-color if this approach is used */
 </style>

From 20ee3fc76f555c4007825823c3d42f7b628aa0c2 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 10 Jun 2025 00:14:30 -0600
Subject: [PATCH 2/6] le falta la coma

---
 ui/src/stores/useRealtime.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/stores/useRealtime.js b/ui/src/stores/useRealtime.js
index bf3f8b3..1f272d7 100644
--- a/ui/src/stores/useRealtime.js
+++ b/ui/src/stores/useRealtime.js
@@ -64,7 +64,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;

From 405265435dcf1c2e70af8d7c1c9f4d731bd821ae Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 10 Jun 2025 06:18:54 +0000
Subject: [PATCH 3/6] Fix: Prevent main content shift when desktop navbar is
 not persistent

This commit addresses an issue where the main content area would shift
to the right on desktop when the sidebar was opened, regardless of the
`desktopNavbarPersistent` setting.

The layout logic in `App.vue` has been updated so that the `md:pl-60`
class (which adds left padding to the main content area) is now
applied only when both `ui.sidebarOpen` and `ui.desktopNavbarPersistent`
are true.

This ensures that:
- If `desktopNavbarPersistent` is true, the sidebar will take up
  dedicated space, and the content will correctly shift.
- If `desktopNavbarPersistent` is false, the sidebar will overlay the
  content on desktop, and the main content will no longer shift.
---
 ui/src/App.vue               | 2 +-
 ui/src/stores/useRealtime.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 2183a0a..dd4e2d8 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -64,7 +64,7 @@ const transitionDurationStyle = computed(() => {
   <!-- wrapper: deja espacio para TopBar (pt-14 = 56px) y, en desktop, para NavBar (pl-60) -->
   <div :class="[
     'pt-14 min-h-screen transition-[padding-left] duration-200',
-    ui.sidebarOpen ? 'md:pl-60' : '',
+    (ui.sidebarOpen && ui.desktopNavbarPersistent) ? 'md:pl-60' : '',
     // The global style.css will handle base background and text color via body styling
     // but we can keep specific overrides here if needed or theme classes.
     // ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'
diff --git a/ui/src/stores/useRealtime.js b/ui/src/stores/useRealtime.js
index 1f272d7..bf3f8b3 100644
--- a/ui/src/stores/useRealtime.js
+++ b/ui/src/stores/useRealtime.js
@@ -64,7 +64,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;

From 35c130f197ec3cb5110dc8eb6451ee32c837050f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 10 Jun 2025 06:24:55 +0000
Subject: [PATCH 4/6] Refine: Make persistent navbar viewport-aware

This commit enhances the behavior of the persistent desktop navbar.
Previously, if `desktopNavbarPersistent` was true, the main content
would always shift to accommodate the sidebar on medium screens and up.

Now, the content shifting is also conditional on available viewport width:

- The main content wrapper in `App.vue` now tracks `window.innerWidth`.
- A `SHIFT_THRESHOLD` is defined (currently 880px), calculated from
  NAVBAR_WIDTH (240px) + MIN_CONTENT_WIDTH (640px).
- If `ui.sidebarOpen` and `ui.desktopNavbarPersistent` are both true,
  the `md:pl-60` class (to shift content) is only applied if
  `viewportWidth.value >= SHIFT_THRESHOLD`.
- If the viewport width is below this threshold (but still potentially
  above the 'md' breakpoint), the persistent sidebar will overlay the
  content, similar to a non-persistent or mobile sidebar, preventing
  the main content area from becoming too cramped.

This provides a more refined and responsive user experience for you
if you enable the persistent navbar feature on varying screen sizes.
---
 ui/src/App.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index dd4e2d8..42811ea 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,10 +1,32 @@
 <script setup>
-import { watchEffect, computed } from 'vue' // Added computed
+import { watchEffect, computed, ref, onMounted, onUnmounted } from 'vue' // ensure all are imported
 import TopBar from '@/components/ui/TopBar.vue'
 import NavBar from '@/components/ui/NavBar.vue'
 import { useUi } from '@/stores/useUi'
 
 const ui = useUi()
+const viewportWidth = ref(0) // New reactive variable
+
+const updateViewportWidth = () => { // New function
+  viewportWidth.value = window.innerWidth
+}
+
+onMounted(() => { // New lifecycle hook
+  updateViewportWidth()
+  window.addEventListener('resize', updateViewportWidth)
+})
+
+onUnmounted(() => { // New lifecycle hook
+  window.removeEventListener('resize', updateViewportWidth)
+})
+
+const NAVBAR_WIDTH = 240 // Defined constant
+const MIN_CONTENT_WIDTH = 640 // Defined constant
+const SHIFT_THRESHOLD = NAVBAR_WIDTH + MIN_CONTENT_WIDTH // Calculated threshold
+
+const shouldShiftContent = computed(() => { // New computed property
+  return ui.sidebarOpen &&          ui.desktopNavbarPersistent &&          viewportWidth.value >= SHIFT_THRESHOLD
+})
 
 watchEffect(() => {
   const root = document.documentElement
@@ -63,8 +85,8 @@ const transitionDurationStyle = computed(() => {
 
   <!-- wrapper: deja espacio para TopBar (pt-14 = 56px) y, en desktop, para NavBar (pl-60) -->
   <div :class="[
-    'pt-14 min-h-screen transition-[padding-left] duration-200',
-    (ui.sidebarOpen && ui.desktopNavbarPersistent) ? 'md:pl-60' : '',
+    'pt-14 min-h-screen transition-[padding-left] duration-200', // Keep existing transition
+    shouldShiftContent.value ? 'md:pl-60' : '', // Use the computed property
     // The global style.css will handle base background and text color via body styling
     // but we can keep specific overrides here if needed or theme classes.
     // ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'

From 09a2138c6ce746b20e2239cf16562a1b5505bd82 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 10 Jun 2025 00:29:34 -0600
Subject: [PATCH 5/6] Revert "Refine: Make persistent navbar viewport-aware"

This reverts commit 35c130f197ec3cb5110dc8eb6451ee32c837050f.
---
 ui/src/App.vue | 28 +++-------------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 42811ea..dd4e2d8 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,32 +1,10 @@
 <script setup>
-import { watchEffect, computed, ref, onMounted, onUnmounted } from 'vue' // ensure all are imported
+import { watchEffect, computed } from 'vue' // Added computed
 import TopBar from '@/components/ui/TopBar.vue'
 import NavBar from '@/components/ui/NavBar.vue'
 import { useUi } from '@/stores/useUi'
 
 const ui = useUi()
-const viewportWidth = ref(0) // New reactive variable
-
-const updateViewportWidth = () => { // New function
-  viewportWidth.value = window.innerWidth
-}
-
-onMounted(() => { // New lifecycle hook
-  updateViewportWidth()
-  window.addEventListener('resize', updateViewportWidth)
-})
-
-onUnmounted(() => { // New lifecycle hook
-  window.removeEventListener('resize', updateViewportWidth)
-})
-
-const NAVBAR_WIDTH = 240 // Defined constant
-const MIN_CONTENT_WIDTH = 640 // Defined constant
-const SHIFT_THRESHOLD = NAVBAR_WIDTH + MIN_CONTENT_WIDTH // Calculated threshold
-
-const shouldShiftContent = computed(() => { // New computed property
-  return ui.sidebarOpen &&          ui.desktopNavbarPersistent &&          viewportWidth.value >= SHIFT_THRESHOLD
-})
 
 watchEffect(() => {
   const root = document.documentElement
@@ -85,8 +63,8 @@ const transitionDurationStyle = computed(() => {
 
   <!-- wrapper: deja espacio para TopBar (pt-14 = 56px) y, en desktop, para NavBar (pl-60) -->
   <div :class="[
-    'pt-14 min-h-screen transition-[padding-left] duration-200', // Keep existing transition
-    shouldShiftContent.value ? 'md:pl-60' : '', // Use the computed property
+    'pt-14 min-h-screen transition-[padding-left] duration-200',
+    (ui.sidebarOpen && ui.desktopNavbarPersistent) ? 'md:pl-60' : '',
     // The global style.css will handle base background and text color via body styling
     // but we can keep specific overrides here if needed or theme classes.
     // ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'

From 984fa214c21a350ef75302dbfd55bfa8ae4cce4e Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Tue, 10 Jun 2025 00:30:00 -0600
Subject: [PATCH 6/6] Revert "Refine: Make persistent navbar viewport-aware"

This reverts commit 35c130f197ec3cb5110dc8eb6451ee32c837050f.
---
 ui/src/stores/useRealtime.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/stores/useRealtime.js b/ui/src/stores/useRealtime.js
index bf3f8b3..1f272d7 100644
--- a/ui/src/stores/useRealtime.js
+++ b/ui/src/stores/useRealtime.js
@@ -64,7 +64,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;