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

2025-12-06 11:36:44 +03:00 · 2025-05-24 10:24:25 +05:30
parent fc985f29df
commit 0890ed0bb8
14 changed files with 485 additions and 74 deletions
--- a/bun.lock
+++ b/bun.lock
@@ -17,6 +17,7 @@
        "@radix-ui/react-radio-group": "^1.3.6",
        "@radix-ui/react-select": "^2.2.4",
        "@radix-ui/react-slot": "^1.2.2",
+        "@radix-ui/react-switch": "^1.2.5",
        "@radix-ui/react-tabs": "^1.1.11",
        "@radix-ui/react-tooltip": "^1.2.6",
        "@tailwindcss/vite": "^4.1.7",
@@ -334,6 +335,8 @@

    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ=="],

+    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.5", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ=="],
+
    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-roving-focus": "1.1.9", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-4FiKSVoXqPP/KfzlB7lwwqoFV6EPwkrrqGp9cUYXjwDYHhvpnqq79P+EPHKcdoTE7Rl8w/+6s9rTlsfXHES9GA=="],

    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.9", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.6", "@radix-ui/react-portal": "1.1.8", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.2", "@radix-ui/react-slot": "1.2.2", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zYb+9dc9tkoN2JjBDIIPLQtk3gGyz8FMKoqYTb8EMVQ5a5hBcdHPECrsZVI4NpPAUOixhkoqg7Hj5ry5USowfA=="],
@@ -1672,6 +1675,8 @@

    "@octokit/plugin-rest-endpoint-methods/@octokit/types": ["@octokit/types@13.10.0", "", { "dependencies": { "@octokit/openapi-types": "^24.2.0" } }, "sha512-ifLaO34EbbPj0Xgro4G5lP5asESjwHracYJvVaPIyXMuiuXLlhic3S47cBdTb+jfODkTE5YtGCLt3Ay3+J97sA=="],

+    "@radix-ui/react-switch/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
    "@rollup/pluginutils/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],

    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.4.3", "", { "dependencies": { "@emnapi/wasi-threads": "1.0.2", "tslib": "^2.4.0" }, "bundled": true }, "sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g=="],
@@ -1768,6 +1773,8 @@

    "@octokit/plugin-rest-endpoint-methods/@octokit/types/@octokit/openapi-types": ["@octokit/openapi-types@24.2.0", "", {}, "sha512-9sIH3nSUttelJSXUrmGzl7QUBFul0/mB8HRYl3fOlgHbIWG+WnYDXU3v/2zMtAvuzZ/ed00Ei6on975FhBfzrg=="],

+    "@radix-ui/react-switch/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
    "ansi-align/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],

    "ansi-align/string-width/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
    "@radix-ui/react-radio-group": "^1.3.6",
    "@radix-ui/react-select": "^2.2.4",
    "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-switch": "^1.2.5",
    "@radix-ui/react-tabs": "^1.1.11",
    "@radix-ui/react-tooltip": "^1.2.6",
    "@tailwindcss/vite": "^4.1.7",
--- a/src/components/activity/ActivityList.tsx
+++ b/src/components/activity/ActivityList.tsx
@@ -105,7 +105,7 @@ export default function ActivityList({
            ? 'Try adjusting your search or filter criteria.'
            : 'No mirroring activities have been recorded yet.'}
        </p>
-        {hasFilter ? (
+        {hasFilter && (
          <Button
            variant='outline'
            onClick={() =>
@@ -114,11 +114,6 @@ export default function ActivityList({
          >
            Clear Filters
          </Button>
-        ) : (
-          <Button>
-            <RefreshCw className='mr-2 h-4 w-4' />
-            Refresh
-          </Button>
        )}
      </div>
    );
--- a/src/components/activity/ActivityLog.tsx
+++ b/src/components/activity/ActivityLog.tsx
@@ -24,6 +24,8 @@ import { ActivityNameCombobox } from './ActivityNameCombobox';
 import { useSSE } from '@/hooks/useSEE';
 import { useFilterParams } from '@/hooks/useFilterParams';
 import { toast } from 'sonner';
+import { useLiveRefresh } from '@/hooks/useLiveRefresh';
+import { useConfigStatus } from '@/hooks/useConfigStatus';

 type MirrorJobWithKey = MirrorJob & { _rowKey: string };

@@ -37,6 +39,8 @@ function genKey(job: MirrorJob): string {

 export function ActivityLog() {
  const { user } = useAuth();
+  const { registerRefreshCallback } = useLiveRefresh();
+  const { isFullyConfigured } = useConfigStatus();

  const [activities, setActivities] = useState<MirrorJobWithKey[]>([]);
  const [isLoading, setIsLoading] = useState(false);
@@ -103,6 +107,21 @@ export function ActivityLog() {
    fetchActivities();
  }, [fetchActivities]);

+  // Register with global live refresh system
+  useEffect(() => {
+    // Only register for live refresh if configuration is complete
+    // Activity logs can exist from previous runs, but new activities won't be generated without config
+    if (!isFullyConfigured) {
+      return;
+    }
+
+    const unregister = registerRefreshCallback(() => {
+      fetchActivities();
+    });
+
+    return unregister;
+  }, [registerRefreshCallback, fetchActivities, isFullyConfigured]);
+
  /* ---------------------- filtering + exporting ---------------------- */

  const applyLightFilter = (list: MirrorJobWithKey[]) => {
@@ -277,9 +296,13 @@ export function ActivityLog() {
        </DropdownMenu>

        {/* refresh */}
-        <Button onClick={() => fetchActivities()}>
-          <RefreshCw className='mr-2 h-4 w-4' />
-          Refresh
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => fetchActivities()}
+          title="Refresh activity log"
+        >
+          <RefreshCw className='h-4 w-4' />
        </Button>
      </div>

--- a/src/components/dashboard/Dashboard.tsx
+++ b/src/components/dashboard/Dashboard.tsx
@@ -2,7 +2,7 @@ import { StatusCard } from "./StatusCard";
 import { RecentActivity } from "./RecentActivity";
 import { RepositoryList } from "./RepositoryList";
 import { GitFork, Clock, FlipHorizontal, Building2 } from "lucide-react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { MirrorJob, Organization, Repository } from "@/lib/db/schema";
 import { useAuth } from "@/hooks/useAuth";
 import { apiRequest } from "@/lib/utils";
@@ -11,9 +11,16 @@ import { useSSE } from "@/hooks/useSEE";
 import { toast } from "sonner";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useLiveRefresh } from "@/hooks/useLiveRefresh";
+import { usePageVisibility } from "@/hooks/usePageVisibility";
+import { useConfigStatus } from "@/hooks/useConfigStatus";

 export function Dashboard() {
  const { user } = useAuth();
+  const { registerRefreshCallback } = useLiveRefresh();
+  const isPageVisible = usePageVisibility();
+  const { isFullyConfigured } = useConfigStatus();
+
  const [repositories, setRepositories] = useState<Repository[]>([]);
  const [organizations, setOrganizations] = useState<Organization[]>([]);
  const [activities, setActivities] = useState<MirrorJob[]>([]);
@@ -23,6 +30,10 @@ export function Dashboard() {
  const [mirroredCount, setMirroredCount] = useState<number>(0);
  const [lastSync, setLastSync] = useState<Date | null>(null);

+  // Dashboard auto-refresh timer (30 seconds)
+  const dashboardTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const DASHBOARD_REFRESH_INTERVAL = 30000; // 30 seconds
+
  // Create a stable callback using useCallback
  const handleNewMessage = useCallback((data: MirrorJob) => {
    if (data.repositoryId) {
@@ -54,11 +65,19 @@ export function Dashboard() {
    onMessage: handleNewMessage,
  });

-  useEffect(() => {
-    const fetchDashboardData = async () => {
+  // Extract fetchDashboardData as a stable callback
+  const fetchDashboardData = useCallback(async (showToast = false) => {
    try {
      if (!user || !user.id) {
-          return;
+        return false;
+      }
+
+      // Don't fetch data if configuration is not complete
+      if (!isFullyConfigured) {
+        if (showToast) {
+          toast.info("Please configure GitHub and Gitea settings first");
+        }
+        return false;
      }

      const response = await apiRequest<DashboardApiResponse>(
@@ -76,8 +95,14 @@ export function Dashboard() {
        setOrgCount(response.orgCount);
        setMirroredCount(response.mirroredCount);
        setLastSync(response.lastSync);
+
+        if (showToast) {
+          toast.success("Dashboard data refreshed successfully");
+        }
+        return true;
      } else {
        toast.error(response.error || "Error fetching dashboard data");
+        return false;
      }
    } catch (error) {
      toast.error(
@@ -85,13 +110,49 @@ export function Dashboard() {
          ? error.message
          : "Error fetching dashboard data"
      );
+      return false;
    } finally {
      setIsLoading(false);
    }
-    };
+  }, [user, isFullyConfigured]);

+  // Initial data fetch
+  useEffect(() => {
    fetchDashboardData();
-  }, [user]);
+  }, [fetchDashboardData]);
+
+  // Setup dashboard auto-refresh (30 seconds) and register with live refresh
+  useEffect(() => {
+    // Clear any existing timer
+    if (dashboardTimerRef.current) {
+      clearInterval(dashboardTimerRef.current);
+      dashboardTimerRef.current = null;
+    }
+
+    // Set up 30-second auto-refresh only when page is visible and configuration is complete
+    if (isPageVisible && isFullyConfigured) {
+      dashboardTimerRef.current = setInterval(() => {
+        fetchDashboardData();
+      }, DASHBOARD_REFRESH_INTERVAL);
+    }
+
+    // Cleanup on unmount or when page becomes invisible
+    return () => {
+      if (dashboardTimerRef.current) {
+        clearInterval(dashboardTimerRef.current);
+        dashboardTimerRef.current = null;
+      }
+    };
+  }, [isPageVisible, isFullyConfigured, fetchDashboardData]);
+
+  // Register with global live refresh system
+  useEffect(() => {
+    const unregister = registerRefreshCallback(() => {
+      fetchDashboardData();
+    });
+
+    return unregister;
+  }, [registerRefreshCallback, fetchDashboardData]);

  // Status Card Skeleton component
  function StatusCardSkeleton() {
@@ -150,6 +211,7 @@ export function Dashboard() {
    </div>
  ) : (
    <div className="flex flex-col gap-y-6">
+
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <StatusCard
          title="Total Repositories"
--- a/src/components/layout/Header.tsx
+++ b/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 ? (
--- a/src/components/layout/MainLayout.tsx
+++ b/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)]">
--- a/src/components/layout/Providers.tsx
+++ b/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>
+      <LiveRefreshProvider>
        <TooltipProvider>
          {children}
        </TooltipProvider>
+      </LiveRefreshProvider>
    </AuthProvider>
  );
 }
--- a/src/components/organizations/Organization.tsx
+++ b/src/components/organizations/Organization.tsx
@@ -24,12 +24,16 @@ import type { MirrorOrgRequest, MirrorOrgResponse } from "@/types/mirror";
 import { useSSE } from "@/hooks/useSEE";
 import { useFilterParams } from "@/hooks/useFilterParams";
 import { toast } from "sonner";
+import { useLiveRefresh } from "@/hooks/useLiveRefresh";
+import { useConfigStatus } from "@/hooks/useConfigStatus";

 export function Organization() {
  const [organizations, setOrganizations] = useState<Organization[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
  const { user } = useAuth();
+  const { registerRefreshCallback } = useLiveRefresh();
+  const { isGitHubConfigured } = useConfigStatus();
  const { filter, setFilter } = useFilterParams({
    searchTerm: "",
    membershipRole: "",
@@ -63,6 +67,12 @@ export function Organization() {
      return false;
    }

+    // Don't fetch organizations if GitHub is not configured
+    if (!isGitHubConfigured) {
+      setIsLoading(false);
+      return false;
+    }
+
    try {
      setIsLoading(true);

@@ -88,12 +98,26 @@ export function Organization() {
    } finally {
      setIsLoading(false);
    }
-  }, [user]);
+  }, [user, isGitHubConfigured]);

  useEffect(() => {
    fetchOrganizations();
  }, [fetchOrganizations]);

+  // Register with global live refresh system
+  useEffect(() => {
+    // Only register for live refresh if GitHub is configured
+    if (!isGitHubConfigured) {
+      return;
+    }
+
+    const unregister = registerRefreshCallback(() => {
+      fetchOrganizations();
+    });
+
+    return unregister;
+  }, [registerRefreshCallback, fetchOrganizations, isGitHubConfigured]);
+
  const handleRefresh = async () => {
    const success = await fetchOrganizations();
    if (success) {
@@ -342,9 +366,13 @@ export function Organization() {
          </SelectContent>
        </Select>

-        <Button variant="default" onClick={handleRefresh}>
-          <RefreshCw className="h-4 w-4 mr-2" />
-          Refresh
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={handleRefresh}
+          title="Refresh organizations"
+        >
+          <RefreshCw className="h-4 w-4" />
        </Button>

        <Button
--- a/src/components/repositories/Repository.tsx
+++ b/src/components/repositories/Repository.tsx
@@ -28,12 +28,15 @@ import { OwnerCombobox, OrganizationCombobox } from "./RepositoryComboboxes";
 import type { RetryRepoRequest, RetryRepoResponse } from "@/types/retry";
 import AddRepositoryDialog from "./AddRepositoryDialog";
 import type { ConfigApiResponse } from "@/types/config";
+import { useLiveRefresh } from "@/hooks/useLiveRefresh";
+import { useConfigStatus } from "@/hooks/useConfigStatus";

 export default function Repository() {
  const [repositories, setRepositories] = useState<Repository[]>([]);
  const [isLoading, setIsLoading] = useState(true);
-  const [isGitHubConfigured, setIsGitHubConfigured] = useState<boolean>(true);
  const { user } = useAuth();
+  const { registerRefreshCallback } = useLiveRefresh();
+  const { isGitHubConfigured } = useConfigStatus();
  const { filter, setFilter } = useFilterParams({
    searchTerm: "",
    status: "",
@@ -78,25 +81,13 @@ export default function Repository() {
  const fetchRepositories = useCallback(async () => {
    if (!user) return;

-    // First, check if GitHub is configured by fetching the user's config
-    try {
-      const configResponse = await apiRequest<ConfigApiResponse>(
-        `/config?userId=${user.id}`,
-        {
-          method: "GET",
-        }
-      );
-
-      // Check if GitHub credentials are configured
-      if (!configResponse?.githubConfig?.username || !configResponse?.githubConfig?.token) {
+    // Don't fetch repositories if GitHub is not configured or still loading config
+    if (!isGitHubConfigured) {
      setIsLoading(false);
-        setIsGitHubConfigured(false);
-        // Don't show error toast for unconfigured GitHub - just return silently
      return false;
    }

-      // GitHub is configured
-      setIsGitHubConfigured(true);
+    try {
      setIsLoading(true);

      const response = await apiRequest<RepositoryApiResponse>(
@@ -121,12 +112,26 @@ export default function Repository() {
    } finally {
      setIsLoading(false);
    }
-  }, [user]);
+  }, [user, isGitHubConfigured]);

  useEffect(() => {
    fetchRepositories();
  }, [fetchRepositories]);

+  // Register with global live refresh system
+  useEffect(() => {
+    // Only register for live refresh if GitHub is configured
+    if (!isGitHubConfigured) {
+      return;
+    }
+
+    const unregister = registerRefreshCallback(() => {
+      fetchRepositories();
+    });
+
+    return unregister;
+  }, [registerRefreshCallback, fetchRepositories, isGitHubConfigured]);
+
  const handleRefresh = async () => {
    const success = await fetchRepositories();
    if (success) {
@@ -442,9 +447,13 @@ export default function Repository() {
          </SelectContent>
        </Select>

-        <Button variant="default" onClick={handleRefresh}>
-          <RefreshCw className="h-4 w-4 mr-2" />
-          Refresh
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={handleRefresh}
+          title="Refresh repositories"
+        >
+          <RefreshCw className="h-4 w-4" />
        </Button>

        <Button
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
--- a/src/hooks/useConfigStatus.ts
+++ b/src/hooks/useConfigStatus.ts
@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useAuth } from './useAuth';
+import { apiRequest } from '@/lib/utils';
+import type { ConfigApiResponse } from '@/types/config';
+
+interface ConfigStatus {
+  isGitHubConfigured: boolean;
+  isGiteaConfigured: boolean;
+  isFullyConfigured: boolean;
+  isLoading: boolean;
+  error: string | null;
+}
+
+/**
+ * Hook to check if GitHub and Gitea are properly configured
+ * Returns configuration status and prevents unnecessary API calls when not configured
+ */
+export function useConfigStatus(): ConfigStatus {
+  const { user } = useAuth();
+  const [configStatus, setConfigStatus] = useState<ConfigStatus>({
+    isGitHubConfigured: false,
+    isGiteaConfigured: false,
+    isFullyConfigured: false,
+    isLoading: true,
+    error: null,
+  });
+
+  const checkConfiguration = useCallback(async () => {
+    if (!user?.id) {
+      setConfigStatus({
+        isGitHubConfigured: false,
+        isGiteaConfigured: false,
+        isFullyConfigured: false,
+        isLoading: false,
+        error: 'No user found',
+      });
+      return;
+    }
+
+    try {
+      setConfigStatus(prev => ({ ...prev, isLoading: true, error: null }));
+
+      const configResponse = await apiRequest<ConfigApiResponse>(
+        `/config?userId=${user.id}`,
+        { method: 'GET' }
+      );
+
+      const isGitHubConfigured = !!(
+        configResponse?.githubConfig?.username && 
+        configResponse?.githubConfig?.token
+      );
+
+      const isGiteaConfigured = !!(
+        configResponse?.giteaConfig?.url && 
+        configResponse?.giteaConfig?.username && 
+        configResponse?.giteaConfig?.token
+      );
+
+      const isFullyConfigured = isGitHubConfigured && isGiteaConfigured;
+
+      setConfigStatus({
+        isGitHubConfigured,
+        isGiteaConfigured,
+        isFullyConfigured,
+        isLoading: false,
+        error: null,
+      });
+    } catch (error) {
+      setConfigStatus({
+        isGitHubConfigured: false,
+        isGiteaConfigured: false,
+        isFullyConfigured: false,
+        isLoading: false,
+        error: error instanceof Error ? error.message : 'Failed to check configuration',
+      });
+    }
+  }, [user?.id]);
+
+  useEffect(() => {
+    checkConfiguration();
+  }, [checkConfiguration]);
+
+  return configStatus;
+}
--- a/src/hooks/useLiveRefresh.ts
+++ b/src/hooks/useLiveRefresh.ts
@@ -0,0 +1,102 @@
+import * as React from "react";
+import { useState, useEffect, createContext, useContext, useCallback, useRef } from "react";
+import { usePageVisibility } from "./usePageVisibility";
+import { useConfigStatus } from "./useConfigStatus";
+
+interface LiveRefreshContextType {
+  isLiveEnabled: boolean;
+  toggleLive: () => void;
+  registerRefreshCallback: (callback: () => void) => () => void;
+}
+
+const LiveRefreshContext = createContext<LiveRefreshContextType | undefined>(undefined);
+
+const LIVE_REFRESH_INTERVAL = 3000; // 3 seconds
+const SESSION_STORAGE_KEY = 'gitea-mirror-live-refresh';
+
+export function LiveRefreshProvider({ children }: { children: React.ReactNode }) {
+  const [isLiveEnabled, setIsLiveEnabled] = useState<boolean>(false);
+  const isPageVisible = usePageVisibility();
+  const { isFullyConfigured } = useConfigStatus();
+  const refreshCallbacksRef = useRef<Set<() => void>>(new Set());
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Load initial state from session storage
+  useEffect(() => {
+    const savedState = sessionStorage.getItem(SESSION_STORAGE_KEY);
+    if (savedState === 'true') {
+      setIsLiveEnabled(true);
+    }
+  }, []);
+
+  // Save state to session storage whenever it changes
+  useEffect(() => {
+    sessionStorage.setItem(SESSION_STORAGE_KEY, isLiveEnabled.toString());
+  }, [isLiveEnabled]);
+
+  // Execute all registered refresh callbacks
+  const executeRefreshCallbacks = useCallback(() => {
+    refreshCallbacksRef.current.forEach(callback => {
+      try {
+        callback();
+      } catch (error) {
+        console.error('Error executing refresh callback:', error);
+      }
+    });
+  }, []);
+
+  // Setup/cleanup the refresh interval
+  useEffect(() => {
+    // Clear existing interval
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    // Only set up interval if live is enabled, page is visible, and configuration is complete
+    if (isLiveEnabled && isPageVisible && isFullyConfigured) {
+      intervalRef.current = setInterval(executeRefreshCallbacks, LIVE_REFRESH_INTERVAL);
+    }
+
+    // Cleanup on unmount
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [isLiveEnabled, isPageVisible, isFullyConfigured, executeRefreshCallbacks]);
+
+  const toggleLive = useCallback(() => {
+    setIsLiveEnabled(prev => !prev);
+  }, []);
+
+  const registerRefreshCallback = useCallback((callback: () => void) => {
+    refreshCallbacksRef.current.add(callback);
+
+    // Return cleanup function
+    return () => {
+      refreshCallbacksRef.current.delete(callback);
+    };
+  }, []);
+
+  const contextValue = {
+    isLiveEnabled,
+    toggleLive,
+    registerRefreshCallback,
+  };
+
+  return React.createElement(
+    LiveRefreshContext.Provider,
+    { value: contextValue },
+    children
+  );
+}
+
+export function useLiveRefresh() {
+  const context = useContext(LiveRefreshContext);
+  if (context === undefined) {
+    throw new Error("useLiveRefresh must be used within a LiveRefreshProvider");
+  }
+  return context;
+}
--- a/src/hooks/usePageVisibility.ts
+++ b/src/hooks/usePageVisibility.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Hook to detect if the page/tab is currently visible
+ * Returns false when user switches to another tab or minimizes the window
+ */
+export function usePageVisibility(): boolean {
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      setIsVisible(!document.hidden);
+    };
+
+    // Set initial state
+    setIsVisible(!document.hidden);
+
+    // Listen for visibility changes
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    // Cleanup
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, []);
+
+  return isVisible;
+}