From 3d8bdff9af892280cabaf917f74f54f68db3e8e0 Mon Sep 17 00:00:00 2001
From: Arunavo Ray <rayanup3@gmail.com>
Date: Sat, 24 May 2025 20:22:39 +0530
Subject: [PATCH] refactor: enhance live refresh button tooltip and update
 button state logic

---
 src/components/layout/Header.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 10c8e55..4b6f96c 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -24,8 +24,13 @@ export function Header({ currentPage, onNavigate }: HeaderProps) {
   // Determine button state and tooltip
   const isLiveActive = isLiveEnabled && isFullyConfigured;
   const getTooltip = () => {
-    if (!isFullyConfigured && !configLoading) {
-      return 'Configure GitHub and Gitea settings to enable live refresh';
+    if (configLoading) {
+      return 'Loading configuration...';
+    }
+    if (!isFullyConfigured) {
+      return isLiveEnabled
+        ? 'Live refresh enabled but requires GitHub and Gitea configuration to function'
+        : 'Enable live refresh (requires GitHub and Gitea configuration)';
     }
     return isLiveEnabled ? 'Disable live refresh' : 'Enable live refresh';
   };
@@ -68,17 +73,18 @@ export function Header({ currentPage, onNavigate }: HeaderProps) {
             <Button
               variant="outline"
               size="lg"
-              className={`flex items-center gap-2 ${!isFullyConfigured && !configLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
-              onClick={isFullyConfigured || configLoading ? toggleLive : undefined}
+              className="flex items-center gap-2"
+              onClick={toggleLive}
               title={getTooltip()}
-              disabled={!isFullyConfigured && !configLoading}
             >
               <div className={`w-3 h-3 rounded-full ${
                 configLoading
                   ? 'bg-yellow-400 animate-pulse'
                   : isLiveActive
                     ? 'bg-emerald-400 animate-pulse'
-                    : 'bg-gray-500'
+                    : isLiveEnabled
+                      ? 'bg-orange-400'
+                      : 'bg-gray-500'
               }`} />
               <span>LIVE</span>
             </Button>