style: copy and minor self-update modal logic change

src/components/app-update-toast.tsx

@@ -65,11 +65,18 @@ export function AppUpdateToast({
     await onUpdate(updateInfo);
   };
 
-  const showProgress =
+  const showDownloadProgress =
     isUpdating &&
     updateProgress?.stage === "downloading" &&
     updateProgress.percentage !== undefined;
 
+  const showOtherStageProgress =
+    isUpdating &&
+    updateProgress &&
+    (updateProgress.stage === "extracting" ||
+      updateProgress.stage === "installing" ||
+      updateProgress.stage === "completed");
+
   return (
     <div className="flex items-start p-4 w-full max-w-md bg-white rounded-lg border border-gray-200 shadow-lg dark:bg-gray-800 dark:border-gray-700">
       <div className="mr-3 mt-0.5">
@@ -117,7 +124,7 @@ export function AppUpdateToast({
         </div>
 
         {/* Download progress */}
-        {showProgress && updateProgress && (
+        {showDownloadProgress && updateProgress && (
           <div className="mt-2 space-y-1">
             <div className="flex justify-between items-center">
               <p className="flex-1 min-w-0 text-xs text-muted-foreground">
@@ -135,31 +142,41 @@ export function AppUpdateToast({
           </div>
         )}
 
-        {/* Other stage progress (without percentage) */}
-        {isUpdating &&
-          updateProgress &&
-          updateProgress.stage !== "downloading" && (
-            <div className="mt-2">
-              <p className="text-xs text-muted-foreground">
-                {updateProgress.message}
-              </p>
-              {updateProgress.stage === "extracting" && (
-                <p className="mt-1 text-xs text-muted-foreground">
-                  Preparing update files...
-                </p>
-              )}
-              {updateProgress.stage === "installing" && (
-                <p className="mt-1 text-xs text-muted-foreground">
-                  Installing new version...
-                </p>
-              )}
-              {updateProgress.stage === "completed" && (
-                <p className="mt-1 text-xs text-green-600 dark:text-green-400">
-                  Update completed! Restarting application...
-                </p>
-              )}
+        {/* Other stage progress (with visual indicators) */}
+        {showOtherStageProgress && (
+          <div className="mt-2 space-y-2">
+            <p className="text-xs text-muted-foreground">
+              {updateProgress.message}
+            </p>
+
+            {/* Progress indicator for non-downloading stages */}
+            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+              <div
+                className={`h-1.5 rounded-full transition-all duration-500 ${
+                  updateProgress.stage === "completed"
+                    ? "bg-green-500 w-full"
+                    : "bg-blue-500 w-full animate-pulse"
+                }`}
+              />
             </div>
-          )}
+
+            {updateProgress.stage === "extracting" && (
+              <p className="text-xs text-muted-foreground">
+                Preparing update files...
+              </p>
+            )}
+            {updateProgress.stage === "installing" && (
+              <p className="text-xs text-muted-foreground">
+                Installing new version...
+              </p>
+            )}
+            {updateProgress.stage === "completed" && (
+              <p className="text-xs text-green-600 dark:text-green-400">
+                Update completed! Restarting application...
+              </p>
+            )}
+          </div>
+        )}
 
         {!isUpdating && (
           <div className="flex gap-2 items-center mt-3">

src/components/create-profile-dialog.tsx

@@ -327,6 +327,13 @@ export function CreateProfileDialog({
 
           <ScrollArea className="flex-1 pr-6 h-[350px]">
             <div className="py-4 space-y-6">
+              {/* Anti-Detect Description */}
+              <div className="p-3 text-center bg-blue-50 rounded-md border border-blue-200 dark:bg-blue-950 dark:border-blue-800">
+                <p className="text-sm text-blue-800 dark:text-blue-200">
+                  Powered by Camoufox
+                </p>
+              </div>
+
               {/* Profile Name - Common to both tabs */}
               <div className="space-y-2">
                 <Label htmlFor="profile-name">Profile Name</Label>

src/components/custom-toast.tsx

@@ -240,26 +240,45 @@ export function UnifiedToast(props: ToastProps) {
           )}
 
         {/* App update progress */}
-        {type === "app-update" &&
-          progress &&
-          "percentage" in progress &&
-          stage === "downloading" && (
-            <div className="mt-2 space-y-1">
-              <div className="flex justify-between items-center">
-                <p className="flex-1 min-w-0 text-xs text-gray-600 dark:text-gray-300">
-                  {progress.percentage.toFixed(1)}%
-                  {progress.speed && ` • ${progress.speed} MB/s`}
-                  {progress.eta && ` • ${progress.eta} remaining`}
-                </p>
-              </div>
+        {type === "app-update" && (
+          <div className="mt-2 space-y-1">
+            {/* Download progress with percentage */}
+            {progress &&
+              "percentage" in progress &&
+              stage === "downloading" && (
+                <>
+                  <div className="flex justify-between items-center">
+                    <p className="flex-1 min-w-0 text-xs text-gray-600 dark:text-gray-300">
+                      {progress.percentage.toFixed(1)}%
+                      {progress.speed && ` • ${progress.speed} MB/s`}
+                      {progress.eta && ` • ${progress.eta} remaining`}
+                    </p>
+                  </div>
+                  <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+                    <div
+                      className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+                      style={{ width: `${progress.percentage}%` }}
+                    />
+                  </div>
+                </>
+              )}
+
+            {/* Progress indicator for other stages */}
+            {(stage === "extracting" ||
+              stage === "installing" ||
+              stage === "completed") && (
               <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                 <div
-                  className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
-                  style={{ width: `${progress.percentage}%` }}
+                  className={`h-1.5 rounded-full transition-all duration-500 ${
+                    stage === "completed"
+                      ? "bg-green-500 w-full"
+                      : "bg-blue-500 w-full animate-pulse"
+                  }`}
                 />
               </div>
-            </div>
-          )}
+            )}
+          </div>
+        )}
 
         {/* Version update progress */}
         {type === "version-update" &&

src/hooks/use-app-update-notifications.tsx

@@ -120,7 +120,7 @@ export function useAppUpdateNotifications() {
           setTimeout(() => {
             setIsUpdating(false);
             setUpdateProgress(null);
-          }, 2000);
+          }, 5000); // Show completion message for 5 seconds instead of 2
         }
       },
     );