feat: add live refresh functionality and configuration status hooks; enhance UI components with new switch and refresh features

src/components/layout/Header.tsx

@@ -5,9 +5,29 @@ import { ModeToggle } from "@/components/theme/ModeToggle";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { toast } from "sonner";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useLiveRefresh } from "@/hooks/useLiveRefresh";
+import { useConfigStatus } from "@/hooks/useConfigStatus";
 
-export function Header() {
+interface HeaderProps {
+  currentPage?: "dashboard" | "repositories" | "organizations" | "configuration" | "activity-log";
+}
+
+export function Header({ currentPage }: HeaderProps) {
   const { user, logout, isLoading } = useAuth();
+  const { isLiveEnabled, toggleLive } = useLiveRefresh();
+  const { isFullyConfigured, isLoading: configLoading } = useConfigStatus();
+
+  // Show Live button on all pages except configuration
+  const showLiveButton = currentPage && currentPage !== "configuration";
+
+  // Determine button state and tooltip
+  const isLiveActive = isLiveEnabled && isFullyConfigured;
+  const getTooltip = () => {
+    if (!isFullyConfigured && !configLoading) {
+      return 'Configure GitHub and Gitea settings to enable live refresh';
+    }
+    return isLiveEnabled ? 'Disable live refresh' : 'Enable live refresh';
+  };
 
   const handleLogout = async () => {
     toast.success("Logged out successfully");
@@ -35,6 +55,26 @@ export function Header() {
         </a>
 
         <div className="flex items-center gap-4">
+          {showLiveButton && (
+            <Button
+              variant="outline"
+              size="lg"
+              className={`flex items-center gap-2 ${!isFullyConfigured && !configLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
+              onClick={isFullyConfigured || configLoading ? toggleLive : undefined}
+              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'
+              }`} />
+              <span>LIVE</span>
+            </Button>
+          )}
+
           <ModeToggle />
 
           {isLoading ? (

src/components/layout/MainLayout.tsx

@@ -44,7 +44,7 @@ function AppWithProviders({ page }: AppProps) {
 
   return (
     <main className="flex min-h-screen flex-col">
-      <Header />
+      <Header currentPage={page} />
       <div className="flex flex-1">
         <Sidebar />
         <section className="flex-1 p-6 overflow-y-auto h-[calc(100dvh-4.55rem)]">

src/components/layout/Providers.tsx

@@ -1,13 +1,16 @@
 import * as React from "react";
 import { AuthProvider } from "@/hooks/useAuth";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { LiveRefreshProvider } from "@/hooks/useLiveRefresh";
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
     <AuthProvider>
-      <TooltipProvider>
-        {children}
-      </TooltipProvider>
+      <LiveRefreshProvider>
+        <TooltipProvider>
+          {children}
+        </TooltipProvider>
+      </LiveRefreshProvider>
     </AuthProvider>
   );
 }