Fix progress display v2 (#57)

src/components/ui/progress.tsx

@@ -16,7 +16,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className={`h-full w-full flex-1 transition-all ${value === 100 ? "bg-specialty-progress-complete" : "bg-specialty-progress-fill"}`}
+      className={`h-full w-full flex-1 transition-all ${value === 100 ? "bg-progress-fill-complete" : "bg-progress-fill-default"}`}
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

src/components/update/index.tsx

@@ -1,9 +1,11 @@
 import type { ProgressInfo } from "electron-updater";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
 import {Progress} from "@/components/ui/progress";
 
 const Update = () => {
+  const [downloadProgress, setDownloadProgress] = useState<number>(0);
+  const [isDownloading, setIsDownloading] = useState<boolean>(false);
 
   const checkUpdate = async () => {
     const result = await window.ipcRenderer.invoke("check-update");
@@ -23,6 +25,8 @@ const Update = () => {
           action: {
             label: "download",
             onClick: () => {
+              setIsDownloading(true);
+              setDownloadProgress(0);
               window.ipcRenderer.invoke("start-download");
             },
           },
@@ -44,22 +48,34 @@ const Update = () => {
 
   const onDownloadProgress = useCallback(
     (_event: Electron.IpcRendererEvent, progress: ProgressInfo) => {
+      console.log('Download progress received:', progress);
+      setDownloadProgress(progress.percent ?? 0);
+    },
+    []
+  )
+ 
+  // listen to download progress and update toast
+  useEffect(() => {
+    if (isDownloading) {
       toast.custom((t) => (
-        <div className="bg-white-100% shadow p-4 rounded w-[300px]">
-          <div className="text-sm font-medium mb-2">downloading...</div>
-          <Progress value={progress.percent ?? 0} />
+        <div className="bg-white-100% shadow-lg p-4 rounded-lg w-[300px]">
+          <div className="text-sm font-medium mb-2">Downloading update...</div>
+          <Progress value={downloadProgress} className="mb-2" />
+          <div className="text-xs text-gray-500">
+            {Math.round(downloadProgress)}% complete
+          </div>
         </div>
       ), {
         id: "download-progress",
         duration: Infinity,
       });
-    },
-    []
-  )
+    }
+  }, [downloadProgress, isDownloading]);
 
   const onUpdateDownloaded = useCallback(
     (_event: Electron.IpcRendererEvent) => {
       toast.dismiss("download-progress");
+      setIsDownloading(false);
       toast.success("download completed", {
         description: "click to install update",
         action: {