From 0603a6506fa02779fb42e386d5a31e574b29f3b2 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Wed, 3 Sep 2025 12:39:49 +0000
Subject: [PATCH] fix: make tag indicators immediately update colors on theme
 switch

Tag indicators next to guest names now properly update their colors when switching between dark and light modes. Previously they would only update on the next data refresh cycle.

- Added reactive DarkModeContext for theme state management
- Updated TagBadges component to use reactive dark mode signal
- Made color calculations reactive to respond to theme changes
---
 frontend-modern/src/App.tsx                    | 18 +++++++++++++++---
 .../src/components/Dashboard/TagBadges.tsx     | 16 +++++++++-------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontend-modern/src/App.tsx b/frontend-modern/src/App.tsx
index 4db7d242d..a79f49b6b 100644
--- a/frontend-modern/src/App.tsx
+++ b/frontend-modern/src/App.tsx
@@ -35,6 +35,16 @@ export const useWebSocket = () => {
   return context;
 };
 
+// Dark mode context for reactive theme switching
+export const DarkModeContext = createContext<() => boolean>(() => false);
+export const useDarkMode = () => {
+  const context = useContext(DarkModeContext);
+  if (!context) {
+    throw new Error('useDarkMode must be used within DarkModeContext.Provider');
+  }
+  return context;
+};
+
 function App() {
   // Simple auth state
   const [isLoading, setIsLoading] = createSignal(true);
@@ -392,9 +402,10 @@ function App() {
         <ErrorBoundary>
       <Show when={enhancedStore()} fallback={<div>Initializing...</div>}>
       <WebSocketContext.Provider value={enhancedStore()!}>
-        <SecurityWarning />
-        <UpdateBanner />
-        <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-2 font-sans">
+        <DarkModeContext.Provider value={darkMode}>
+          <SecurityWarning />
+          <UpdateBanner />
+          <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-2 font-sans">
         <div class="container w-[95%] max-w-screen-xl mx-auto">
           {/* Header */}
           <div class="header flex flex-row justify-between items-center mb-2">
@@ -606,6 +617,7 @@ function App() {
         </div>
         <ToastContainer />
         <NotificationContainer />
+        </DarkModeContext.Provider>
       </WebSocketContext.Provider>
       </Show>
     </ErrorBoundary>
diff --git a/frontend-modern/src/components/Dashboard/TagBadges.tsx b/frontend-modern/src/components/Dashboard/TagBadges.tsx
index 78bcd3892..a82508410 100644
--- a/frontend-modern/src/components/Dashboard/TagBadges.tsx
+++ b/frontend-modern/src/components/Dashboard/TagBadges.tsx
@@ -1,6 +1,7 @@
 import { Component, For, Show, createSignal } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { getTagColorWithSpecial } from '@/utils/tagColors';
+import { useDarkMode } from '@/App';
 
 interface TagBadgesProps {
   tags: string[];
@@ -12,7 +13,8 @@ interface TagBadgesProps {
 
 export const TagBadges: Component<TagBadgesProps> = (props) => {
   const maxVisible = () => props.maxVisible ?? 3;
-  const isDark = () => props.isDarkMode ?? document.documentElement.classList.contains('dark');
+  const darkModeSignal = useDarkMode();
+  const isDark = () => props.isDarkMode ?? darkModeSignal();
   
   const visibleTags = () => props.tags?.slice(0, maxVisible()) || [];
   const hiddenTags = () => props.tags?.slice(maxVisible()) || [];
@@ -26,7 +28,7 @@ export const TagBadges: Component<TagBadgesProps> = (props) => {
       <div class="inline-flex items-center gap-1 ml-2">
         <For each={visibleTags()}>
           {(tag) => {
-            const colors = getTagColorWithSpecial(tag, isDark());
+            const colors = () => getTagColorWithSpecial(tag, isDark());
             const isActive = () => props.activeSearch?.includes(`tags:${tag}`) || false;
             
             return (
@@ -50,7 +52,7 @@ export const TagBadges: Component<TagBadgesProps> = (props) => {
                 <div 
                   class="w-2 h-2 rounded-full hover:scale-150 transition-transform duration-200 ease-out cursor-pointer"
                   style={{
-                    'background-color': colors.bg,
+                    'background-color': colors().bg,
                     'box-shadow': isActive() 
                       ? isDark() 
                         ? `0 0 0 2.5px rgba(255, 255, 255, 0.9)` // White ring in dark mode when active
@@ -108,7 +110,7 @@ export const TagBadges: Component<TagBadgesProps> = (props) => {
             // Tooltip for individual tag
             (() => {
               const tag = hoveredTag()!;
-              const colors = getTagColorWithSpecial(tag, isDark());
+              const colors = () => getTagColorWithSpecial(tag, isDark());
               return (
                 <div 
                   class="fixed px-2 py-1 text-xs rounded shadow-lg pointer-events-none"
@@ -116,9 +118,9 @@ export const TagBadges: Component<TagBadgesProps> = (props) => {
                     left: `${tooltipPos()!.x}px`,
                     top: `${tooltipPos()!.y - 35}px`,
                     transform: 'translateX(-50%)',
-                    'background-color': colors.bg,
-                    'color': colors.text,
-                    'border': `1px solid ${colors.border}`,
+                    'background-color': colors().bg,
+                    'color': colors().text,
+                    'border': `1px solid ${colors().border}`,
                     'z-index': '999999',
                   }}
                 >