fix(web): properly handle backup progress

AlkenD · AlkenD · commit 35c3c57ef6b8 · 2025-10-17T16:05:07.000+05:30
diff --git a/apps/api/src/lib/backup.ts b/apps/api/src/lib/backup.ts
@@ -35,6 +35,16 @@ const MAX_MONTHLY_BACKUPS = 12;
 const BACKUP_HOUR = 2; // 2 AM
 const BACKUP_MINUTE = 0;
 
+/**
+ * Format bytes to human readable string
+ */
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 Bytes";
+  if (bytes < 1024) return `${bytes} Bytes`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+}
+
 export interface BackupMetadata {
   filename: string;
   filepath: string;
@@ -226,35 +236,59 @@ export async function createBackup(
 
       // Track progress by monitoring file size
       let bytesWritten = 0;
-      const progressInterval = setInterval(async () => {
-        try {
-          const stats = await fs.stat(backupPath);
-          const newBytes = stats.size;
-          if (newBytes > bytesWritten) {
-            bytesWritten = newBytes;
-            webSocketService.broadcast(WS_EVENTS.BACKUP_PROGRESS, {
-              filename,
-              bytesWritten: newBytes,
-              status: "in_progress",
-            });
+      let progressInterval: NodeJS.Timeout | null = null;
+      let progressTimeout: NodeJS.Timeout | null = null;
+      let isProcessComplete = false;
+
+      const clearProgressMonitoring = () => {
+        isProcessComplete = true;
+        if (progressTimeout) clearTimeout(progressTimeout);
+        if (progressInterval) clearInterval(progressInterval);
+      };
+
+      // Wait a bit before starting progress monitoring to avoid showing tiny initial values
+      progressTimeout = setTimeout(() => {
+        if (isProcessComplete) return; // Don't start if already complete
+
+        progressInterval = setInterval(async () => {
+          if (isProcessComplete) {
+            if (progressInterval) clearInterval(progressInterval);
+            return;
           }
-        } catch {
-          // File might not exist yet, ignore
-        }
-      }, 1000); // Update every second
+
+          try {
+            const stats = await fs.stat(backupPath);
+            const newBytes = stats.size;
+            // Only broadcast if there's a meaningful change (at least 1KB difference)
+            if (
+              newBytes > bytesWritten &&
+              (newBytes - bytesWritten >= 1024 || bytesWritten === 0)
+            ) {
+              bytesWritten = newBytes;
+              webSocketService.broadcast(WS_EVENTS.BACKUP_PROGRESS, {
+                filename,
+                sizeText: formatBytes(newBytes),
+                status: "in_progress",
+              });
+            }
+          } catch {
+            // File might not exist yet, ignore
+          }
+        }, 1000); // Update every second
+      }, 500); // Start monitoring after 500ms
 
       let errorOutput = "";
       pgDump.stderr.on("data", (data) => {
         errorOutput += data.toString();
       });
 
       pgDump.on("error", (error) => {
-        clearInterval(progressInterval);
+        clearProgressMonitoring();
         reject(new Error(`pg_dump process error: ${error.message}`));
       });
 
       pgDump.on("close", (code) => {
-        clearInterval(progressInterval);
+        clearProgressMonitoring();
         if (code === 0) {
           resolve();
         } else {
@@ -274,12 +308,12 @@ export async function createBackup(
       });
 
       destination.on("error", (error) => {
-        clearInterval(progressInterval);
+        clearProgressMonitoring();
         reject(error);
       });
 
       gzip.on("error", (error) => {
-        clearInterval(progressInterval);
+        clearProgressMonitoring();
         reject(error);
       });
     });
@@ -301,13 +335,13 @@ export async function createBackup(
     };
 
     logger.info(
-      `Backup created successfully: ${filename} (${(stats.size / 1024 / 1024).toFixed(2)} MB)`
+      `Backup created successfully: ${filename} (${formatBytes(stats.size)})`
     );
 
     // Emit backup completed event
     webSocketService.broadcast(WS_EVENTS.BACKUP_COMPLETED, {
       filename,
-      size: stats.size,
+      sizeText: formatBytes(stats.size),
       type,
       verified: isValid,
       status: "completed",
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -28,9 +28,11 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.545.0",
     "motion": "^12.23.24",
+    "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "socket.io-client": "^4.8.1",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14",
     "vaul": "^1.1.2",
diff --git a/apps/web/src/components/settings/setting-group.tsx b/apps/web/src/components/settings/setting-group.tsx
@@ -21,10 +21,13 @@ export function SettingGroup({ group }: SettingGroupProps) {
             variant={group.headerAction.variant || "default"}
             size="sm"
             onClick={group.headerAction.onClick}
+            disabled={group.headerAction.disabled}
             className="w-full md:w-auto"
           >
             {group.headerAction.icon && (
-              <group.headerAction.icon className="w-4 h-4 mr-2" />
+              <group.headerAction.icon
+                className={`w-4 h-4 mr-2 ${group.headerAction.disabled ? "animate-spin" : ""}`}
+              />
             )}
             {group.headerAction.label}
           </Button>
diff --git a/apps/web/src/components/ui/sonner.tsx b/apps/web/src/components/ui/sonner.tsx
@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/apps/web/src/config/system-settings-config.ts b/apps/web/src/config/system-settings-config.ts
@@ -5,13 +5,14 @@ import type {
   ActiveAlertsResponse,
   BackupsResponse,
 } from "@/types/system";
-import { Download, RefreshCw, Trash2, Database } from "lucide-react";
+import { Download, RefreshCw, Trash2, Database, Loader2 } from "lucide-react";
 
 interface SystemSettingsConfigParams {
   healthData?: AdminHealthCheckResponse | null;
   performanceData?: PerformanceMetricsResponse | null;
   alertData?: ActiveAlertsResponse | null;
   backupData?: BackupsResponse | null;
+  isBackupInProgress?: boolean;
   onRefreshHealth: () => void;
   onResetPerformanceMetrics: () => void;
   onCreateBackup: () => void;
@@ -28,6 +29,7 @@ export function systemSettingsConfig({
   performanceData,
   alertData,
   backupData,
+  isBackupInProgress = false,
   onRefreshHealth,
   onResetPerformanceMetrics,
   onCreateBackup,
@@ -214,10 +216,11 @@ export function systemSettingsConfig({
         title: "Database Backups",
         description: "Create and manage database backups",
         headerAction: {
-          label: "Create Backup",
-          icon: Download,
+          label: isBackupInProgress ? "Creating..." : "Create Backup",
+          icon: isBackupInProgress ? Loader2 : Download,
           variant: "default",
           onClick: onCreateBackup,
+          disabled: isBackupInProgress,
         },
         items: [
           ...(backupData?.stats
diff --git a/apps/web/src/hooks/useBackupProgress.ts b/apps/web/src/hooks/useBackupProgress.ts
@@ -5,14 +5,13 @@
  */
 
 import { useState, useEffect } from "react";
+import { toast } from "sonner";
 import { webSocketClient, WS_EVENTS } from "@/lib/websocket";
 
 export interface BackupProgress {
   filename: string;
   type?: string;
   status: "idle" | "starting" | "in_progress" | "completed" | "error";
-  bytesWritten?: number;
-  size?: number;
   verified?: boolean;
   error?: string;
   timestamp: string;
@@ -35,6 +34,7 @@ export function useBackupProgress() {
         data: { filename: string; type: string; status: string };
       };
       console.log("Backup started:", backupData);
+
       setProgress({
         filename: backupData.data.filename,
         type: backupData.data.type,
@@ -46,13 +46,13 @@ export function useBackupProgress() {
     // Handler for backup progress
     const handleBackupProgress = (data: unknown) => {
       const backupData = data as {
-        data: { filename: string; bytesWritten: number; status: string };
+        data: { filename: string; sizeText: string; status: string };
       };
       console.log("Backup progress:", backupData);
+
       setProgress((prev) => ({
         ...prev,
         filename: backupData.data.filename,
-        bytesWritten: backupData.data.bytesWritten,
         status: "in_progress",
         timestamp: new Date().toISOString(),
       }));
@@ -63,30 +63,34 @@ export function useBackupProgress() {
       const backupData = data as {
         data: {
           filename: string;
-          size: number;
+          sizeText: string;
           type: string;
           verified: boolean;
           status: string;
         };
       };
       console.log("Backup completed:", backupData);
+
+      toast.success("Backup created successfully", {
+        description: `${backupData.data.sizeText} • ${backupData.data.verified ? "Verified" : "Unverified"}`,
+      });
+
       setProgress({
         filename: backupData.data.filename,
         type: backupData.data.type,
-        size: backupData.data.size,
         verified: backupData.data.verified,
         status: "completed",
         timestamp: new Date().toISOString(),
       });
 
-      // Reset to idle after 5 seconds
+      // Reset to idle after 3 seconds
       setTimeout(() => {
         setProgress({
           filename: "",
           status: "idle",
           timestamp: new Date().toISOString(),
         });
-      }, 5000);
+      }, 3000);
     };
 
     // Handler for backup error
@@ -95,6 +99,12 @@ export function useBackupProgress() {
         data: { filename: string; error: string; status: string };
       };
       console.error("Backup error:", backupData);
+
+      toast.error("Backup failed", {
+        description: backupData.data.error,
+        duration: 5000,
+      });
+
       setProgress({
         filename: backupData.data.filename,
         error: backupData.data.error,
diff --git a/apps/web/src/hooks/useWebSocket.ts b/apps/web/src/hooks/useWebSocket.ts
@@ -7,6 +7,7 @@
 
 import { useEffect, useCallback } from "react";
 import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
 import { webSocketClient, WS_EVENTS } from "@/lib/websocket";
 
 /**
@@ -23,12 +24,18 @@ export function useWebSocket() {
     // Setup event listeners for settings updates
     const handleSettingsUpdated = () => {
       console.log("Settings updated via WebSocket - invalidating cache");
+      toast.success("Settings updated", {
+        description: "Your changes have been saved",
+      });
       queryClient.invalidateQueries({ queryKey: ["settings"] });
       queryClient.invalidateQueries({ queryKey: ["setup-status"] });
     };
 
     const handleSetupCompleted = () => {
       console.log("Setup completed via WebSocket - invalidating cache");
+      toast.success("Setup completed", {
+        description: "Your application is ready to use",
+      });
       queryClient.invalidateQueries({ queryKey: ["settings"] });
       queryClient.invalidateQueries({ queryKey: ["setup-status"] });
     };
@@ -43,11 +50,16 @@ export function useWebSocket() {
     // Setup event listeners for scan events
     const handleScanStarted = () => {
       console.log("Scan started via WebSocket");
-      // Could show a notification or update UI
+      toast.info("Media scan started", {
+        description: "Scanning your library for new media...",
+      });
     };
 
     const handleScanCompleted = () => {
       console.log("Scan completed via WebSocket - invalidating media cache");
+      toast.success("Media scan completed", {
+        description: "Your library has been updated",
+      });
       queryClient.invalidateQueries({ queryKey: ["media"] });
       queryClient.invalidateQueries({ queryKey: ["movies"] });
       queryClient.invalidateQueries({ queryKey: ["tv-shows"] });
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
diff --git a/apps/web/src/routes/settings/system.tsx b/apps/web/src/routes/settings/system.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
