feat: add progress indication for long downloads

app/(app)/settings/backups/data/route.ts

@@ -1,6 +1,7 @@
 import { getCurrentUser } from "@/lib/auth"
 import { fileExists, getUserUploadsDirectory } from "@/lib/files"
 import { MODEL_BACKUP, modelToJSON } from "@/models/backups"
+import { incrementProgress, updateProgress } from "@/models/progress"
 import fs from "fs/promises"
 import JSZip from "jszip"
 import { NextResponse } from "next/server"
@@ -8,10 +9,13 @@ import path from "path"
 
 const MAX_FILE_SIZE = 64 * 1024 * 1024 // 64MB
 const BACKUP_VERSION = "1.0"
+const PROGRESS_UPDATE_INTERVAL = 10 // files
 
-export async function GET() {
+export async function GET(request: Request) {
   const user = await getCurrentUser()
   const userUploadsDirectory = getUserUploadsDirectory(user)
+  const url = new URL(request.url)
+  const progressId = url.searchParams.get("progressId")
 
   try {
     const zip = new JSZip()
@@ -52,6 +56,13 @@ export async function GET() {
     }
 
     const uploadedFiles = await getAllFilePaths(userUploadsDirectory)
+
+    // Update progress with total files if progressId is provided
+    if (progressId) {
+      await updateProgress(user.id, progressId, { total: uploadedFiles.length })
+    }
+
+    let processedFiles = 0
     for (const file of uploadedFiles) {
       try {
         // Check file size before reading
@@ -62,22 +73,33 @@ export async function GET() {
               MAX_FILE_SIZE / 1024 / 1024
             }MB limit)`
           )
-          return
+          continue
         }
 
         const fileContent = await fs.readFile(file)
         uploadsFolder.file(file.replace(userUploadsDirectory, ""), fileContent)
+
+        processedFiles++
+        // Update progress every PROGRESS_UPDATE_INTERVAL files
+        if (progressId && processedFiles % PROGRESS_UPDATE_INTERVAL === 0) {
+          await incrementProgress(user.id, progressId)
+        }
       } catch (error) {
         console.error(`Error reading file ${file}:`, error)
       }
     }
 
+    // Final progress update
+    if (progressId) {
+      await updateProgress(user.id, progressId, { current: uploadedFiles.length })
+    }
+
     const archive = await zip.generateAsync({ type: "blob" })
 
     return new NextResponse(archive, {
       headers: {
         "Content-Type": "application/octet-stream",
-        "Content-Disposition": `attachment; filename="data.zip"`,
+        "Content-Disposition": `attachment; filename="taxhacker-backup.zip"`,
       },
     })
   } catch (error) {

app/(app)/settings/backups/page.tsx

@@ -3,24 +3,57 @@
 import { FormError } from "@/components/forms/error"
 import { Button } from "@/components/ui/button"
 import { Card } from "@/components/ui/card"
+import { useDownload } from "@/hooks/use-download"
+import { useProgress } from "@/hooks/use-progress"
 import { Download, Loader2 } from "lucide-react"
-import Link from "next/link"
 import { useActionState } from "react"
 import { restoreBackupAction } from "./actions"
 
 export default function BackupSettingsPage() {
   const [restoreState, restoreBackup, restorePending] = useActionState(restoreBackupAction, null)
 
+  const { isLoading, startProgress, progress } = useProgress({
+    onError: (error) => {
+      console.error("Backup progress error:", error)
+    },
+  })
+
+  const { download, isDownloading } = useDownload({
+    onError: (error) => {
+      console.error("Download error:", error)
+    },
+  })
+
+  const handleDownload = async () => {
+    try {
+      const progressId = await startProgress("backup")
+      const downloadUrl = `/settings/backups/data?progressId=${progressId || ""}`
+      await download(downloadUrl, "taxhacker-backup.zip")
+    } catch (error) {
+      console.error("Failed to start backup:", error)
+    }
+  }
+
   return (
     <div className="container flex flex-col gap-4">
       <div className="flex flex-col gap-4">
         <h1 className="text-2xl font-bold">Download backup</h1>
         <div className="flex flex-row gap-4">
-          <Link href="/settings/backups/data">
-            <Button>
-              <Download /> Download Data Archive
-            </Button>
-          </Link>
+          <Button onClick={handleDownload} disabled={isLoading || isDownloading}>
+            {isLoading ? (
+              progress?.current ? (
+                `Archiving ${progress.current}/${progress.total} files`
+              ) : (
+                "Preparing backup..."
+              )
+            ) : isDownloading ? (
+              "Archive is created. Downloading..."
+            ) : (
+              <>
+                <Download className="mr-2" /> Download Data Archive
+              </>
+            )}
+          </Button>
         </div>
         <div className="text-sm text-muted-foreground max-w-xl">
           Inside the archive you will find all the uploaded files, as well as JSON files for transactions, categories,