From 5c64b306ead8b6214dee6d51e8dae25fb47ff7e8 Mon Sep 17 00:00:00 2001
From: Siddharth Kumar Sah <siddharth123sk@gmail.com>
Date: Mon, 23 Mar 2026 01:45:58 +0800
Subject: [PATCH] feat(web): add ProgressCard to non-AI tool settings (Group A)

Replace Loader2 spinner buttons with ProgressCard in all 13 non-AI tool
settings components that use useToolProcessor. Each now shows upload
progress, elapsed time, and processing phase during operations.
---
 .../src/components/tools/border-settings.tsx  | 31 +++++++++++++------
 .../src/components/tools/color-settings.tsx   | 31 +++++++++++++------
 .../components/tools/compress-settings.tsx    | 31 +++++++++++++------
 .../src/components/tools/convert-settings.tsx | 31 +++++++++++++------
 .../src/components/tools/crop-settings.tsx    | 31 +++++++++++++------
 .../components/tools/gif-tools-settings.tsx   | 31 +++++++++++++------
 .../tools/replace-color-settings.tsx          | 31 +++++++++++++------
 .../src/components/tools/resize-settings.tsx  | 31 +++++++++++++------
 .../src/components/tools/rotate-settings.tsx  | 30 ++++++++++++------
 .../components/tools/smart-crop-settings.tsx  | 31 +++++++++++++------
 .../tools/strip-metadata-settings.tsx         | 31 +++++++++++++------
 .../tools/text-overlay-settings.tsx           | 31 +++++++++++++------
 .../tools/watermark-text-settings.tsx         | 31 +++++++++++++------
 13 files changed, 272 insertions(+), 130 deletions(-)

diff --git a/apps/web/src/components/tools/border-settings.tsx b/apps/web/src/components/tools/border-settings.tsx
index 0259f0b3..65ee9ae3 100644
--- a/apps/web/src/components/tools/border-settings.tsx
+++ b/apps/web/src/components/tools/border-settings.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 export function BorderSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("border");
 
   const [borderWidth, setBorderWidth] = useState(10);
@@ -68,14 +69,24 @@ export function BorderSettings() {
         </div>
       )}
 
-      <button
-        onClick={handleProcess}
-        disabled={!hasFile || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Processing..." : "Apply Border"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Adding border"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Add Border
+        </button>
+      )}
 
       {downloadUrl && (
         <a href={downloadUrl} download className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5">
diff --git a/apps/web/src/components/tools/color-settings.tsx b/apps/web/src/components/tools/color-settings.tsx
index 007955af..170df7d4 100644
--- a/apps/web/src/components/tools/color-settings.tsx
+++ b/apps/web/src/components/tools/color-settings.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 type Tab = "basic" | "channels" | "effects";
 type Effect = "none" | "grayscale" | "sepia" | "invert";
@@ -13,7 +14,7 @@ interface ColorSettingsProps {
 
 export function ColorSettings({ toolId }: ColorSettingsProps) {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor(toolId);
 
   const [tab, setTab] = useState<Tab>(() => {
@@ -199,14 +200,24 @@ export function ColorSettings({ toolId }: ColorSettingsProps) {
       )}
 
       {/* Process */}
-      <button
-        type="submit"
-        disabled={!hasFile || !hasChanges || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Processing..." : "Apply Adjustments"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Adjusting colors"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="submit"
+          disabled={!hasFile || !hasChanges || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Apply
+        </button>
+      )}
 
       {/* Download */}
       {downloadUrl && (
diff --git a/apps/web/src/components/tools/compress-settings.tsx b/apps/web/src/components/tools/compress-settings.tsx
index 6a616daa..f2f4f31a 100644
--- a/apps/web/src/components/tools/compress-settings.tsx
+++ b/apps/web/src/components/tools/compress-settings.tsx
@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 type CompressMode = "quality" | "targetSize";
 
 export function CompressSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("compress");
 
   const [mode, setMode] = useState<CompressMode>("quality");
@@ -108,14 +109,24 @@ export function CompressSettings() {
       )}
 
       {/* Process */}
-      <button
-        type="submit"
-        disabled={!hasFile || !canProcess || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Compressing..." : "Compress"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Compressing"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="submit"
+          disabled={!hasFile || !canProcess || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Compress
+        </button>
+      )}
 
       {/* Download */}
       {downloadUrl && (
diff --git a/apps/web/src/components/tools/convert-settings.tsx b/apps/web/src/components/tools/convert-settings.tsx
index 4c975da6..86c744b0 100644
--- a/apps/web/src/components/tools/convert-settings.tsx
+++ b/apps/web/src/components/tools/convert-settings.tsx
@@ -1,14 +1,15 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 const OUTPUT_FORMATS = ["jpg", "png", "webp", "avif", "tiff", "gif"] as const;
 const LOSSY_FORMATS = new Set(["jpg", "webp", "avif"]);
 
 export function ConvertSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("convert");
 
   const [format, setFormat] = useState<string>("png");
@@ -102,14 +103,24 @@ export function ConvertSettings() {
       )}
 
       {/* Process */}
-      <button
-        type="submit"
-        disabled={!hasFile || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Converting..." : `Convert to ${format.toUpperCase()}`}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Converting"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="submit"
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Convert
+        </button>
+      )}
 
       {/* Download */}
       {downloadUrl && (
diff --git a/apps/web/src/components/tools/crop-settings.tsx b/apps/web/src/components/tools/crop-settings.tsx
index 6b0537ff..65a5ff03 100644
--- a/apps/web/src/components/tools/crop-settings.tsx
+++ b/apps/web/src/components/tools/crop-settings.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 const ASPECT_PRESETS = [
   { label: "1:1", w: 1, h: 1 },
@@ -13,7 +14,7 @@ const ASPECT_PRESETS = [
 
 export function CropSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("crop");
 
   const [left, setLeft] = useState("0");
@@ -125,14 +126,24 @@ export function CropSettings() {
       )}
 
       {/* Process */}
-      <button
-        type="submit"
-        disabled={!hasFile || !hasSize || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Processing..." : "Crop"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Cropping"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="submit"
+          disabled={!hasFile || !hasSize || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Crop
+        </button>
+      )}
 
       {/* Download */}
       {downloadUrl && (
diff --git a/apps/web/src/components/tools/gif-tools-settings.tsx b/apps/web/src/components/tools/gif-tools-settings.tsx
index 158c7ba7..a881efd6 100644
--- a/apps/web/src/components/tools/gif-tools-settings.tsx
+++ b/apps/web/src/components/tools/gif-tools-settings.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 export function GifToolsSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("gif-tools");
 
   const [mode, setMode] = useState<"resize" | "extract">("resize");
@@ -86,14 +87,24 @@ export function GifToolsSettings() {
         </div>
       )}
 
-      <button
-        onClick={handleProcess}
-        disabled={!hasFile || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Processing..." : "Process GIF"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Processing GIF"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Process
+        </button>
+      )}
 
       {downloadUrl && (
         <a href={downloadUrl} download className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5">
diff --git a/apps/web/src/components/tools/replace-color-settings.tsx b/apps/web/src/components/tools/replace-color-settings.tsx
index b15bc9cd..dec3bbb1 100644
--- a/apps/web/src/components/tools/replace-color-settings.tsx
+++ b/apps/web/src/components/tools/replace-color-settings.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 export function ReplaceColorSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("replace-color");
 
   const [sourceColor, setSourceColor] = useState("#FF0000");
@@ -65,14 +66,24 @@ export function ReplaceColorSettings() {
         </div>
       )}
 
-      <button
-        onClick={handleProcess}
-        disabled={!hasFile || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Processing..." : "Replace Color"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Replacing color"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Replace Color
+        </button>
+      )}
 
       {downloadUrl && (
         <a href={downloadUrl} download className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5">
diff --git a/apps/web/src/components/tools/resize-settings.tsx b/apps/web/src/components/tools/resize-settings.tsx
index a6fd4f71..e7597099 100644
--- a/apps/web/src/components/tools/resize-settings.tsx
+++ b/apps/web/src/components/tools/resize-settings.tsx
@@ -2,13 +2,14 @@ import { useState } from "react";
 import { SOCIAL_MEDIA_PRESETS } from "@stirling-image/shared";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Link, Unlink, Loader2 } from "lucide-react";
+import { Download, Link, Unlink } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 type FitMode = "contain" | "cover" | "fill" | "inside" | "outside";
 
 export function ResizeSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("resize");
 
   const [mode, setMode] = useState<"pixels" | "percentage">("pixels");
@@ -187,14 +188,24 @@ export function ResizeSettings() {
       )}
 
       {/* Process button */}
-      <button
-        type="submit"
-        disabled={!hasFile || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Processing..." : "Resize"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Resizing"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="submit"
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Resize
+        </button>
+      )}
 
       {/* Download */}
       {downloadUrl && (
diff --git a/apps/web/src/components/tools/rotate-settings.tsx b/apps/web/src/components/tools/rotate-settings.tsx
index 1b92112b..1f41f429 100644
--- a/apps/web/src/components/tools/rotate-settings.tsx
+++ b/apps/web/src/components/tools/rotate-settings.tsx
@@ -3,16 +3,16 @@ import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
 import {
   Download,
-  Loader2,
   RotateCcw,
   RotateCw,
   FlipHorizontal,
   FlipVertical,
 } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 export function RotateSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("rotate");
 
   const [angle, setAngle] = useState(0);
@@ -122,14 +122,24 @@ export function RotateSettings() {
       )}
 
       {/* Process */}
-      <button
-        type="submit"
-        disabled={!hasFile || !hasChanges || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Processing..." : "Rotate / Flip"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Rotating"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="submit"
+          disabled={!hasFile || !hasChanges || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Rotate
+        </button>
+      )}
 
       {/* Download */}
       {downloadUrl && (
diff --git a/apps/web/src/components/tools/smart-crop-settings.tsx b/apps/web/src/components/tools/smart-crop-settings.tsx
index 43269cf7..680a3ceb 100644
--- a/apps/web/src/components/tools/smart-crop-settings.tsx
+++ b/apps/web/src/components/tools/smart-crop-settings.tsx
@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 const ASPECT_PRESETS = [
   { label: "1:1 Square", w: 1080, h: 1080 },
@@ -14,7 +15,7 @@ const ASPECT_PRESETS = [
 
 export function SmartCropSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("smart-crop");
 
   const [width, setWidth] = useState("1080");
@@ -106,14 +107,24 @@ export function SmartCropSettings() {
       )}
 
       {/* Process button */}
-      <button
-        onClick={handleProcess}
-        disabled={!hasFile || !canProcess || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Smart Cropping..." : "Smart Crop"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Smart cropping"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          onClick={handleProcess}
+          disabled={!hasFile || !canProcess || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Smart Crop
+        </button>
+      )}
 
       {/* Download */}
       {downloadUrl && (
diff --git a/apps/web/src/components/tools/strip-metadata-settings.tsx b/apps/web/src/components/tools/strip-metadata-settings.tsx
index d761828b..125c414e 100644
--- a/apps/web/src/components/tools/strip-metadata-settings.tsx
+++ b/apps/web/src/components/tools/strip-metadata-settings.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 export function StripMetadataSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("strip-metadata");
 
   const [stripAll, setStripAll] = useState(true);
@@ -112,14 +113,24 @@ export function StripMetadataSettings() {
       )}
 
       {/* Process */}
-      <button
-        type="submit"
-        disabled={!hasFile || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Processing..." : "Strip Metadata"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Stripping metadata"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="submit"
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Strip Metadata
+        </button>
+      )}
 
       {/* Download */}
       {downloadUrl && (
diff --git a/apps/web/src/components/tools/text-overlay-settings.tsx b/apps/web/src/components/tools/text-overlay-settings.tsx
index 87da6d68..2bf072dc 100644
--- a/apps/web/src/components/tools/text-overlay-settings.tsx
+++ b/apps/web/src/components/tools/text-overlay-settings.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 export function TextOverlaySettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("text-overlay");
 
   const [text, setText] = useState("Your Text Here");
@@ -86,14 +87,24 @@ export function TextOverlaySettings() {
         </div>
       )}
 
-      <button
-        onClick={handleProcess}
-        disabled={!hasFile || processing || !text}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Processing..." : "Add Text"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Adding text"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          onClick={handleProcess}
+          disabled={!hasFile || processing || !text}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Add Text
+        </button>
+      )}
 
       {downloadUrl && (
         <a href={downloadUrl} download className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5">
diff --git a/apps/web/src/components/tools/watermark-text-settings.tsx b/apps/web/src/components/tools/watermark-text-settings.tsx
index 1ca74248..7311079c 100644
--- a/apps/web/src/components/tools/watermark-text-settings.tsx
+++ b/apps/web/src/components/tools/watermark-text-settings.tsx
@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
+import { ProgressCard } from "@/components/common/progress-card";
 
 type Position = "center" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "tiled";
 
 export function WatermarkTextSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize } =
+  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
     useToolProcessor("watermark-text");
 
   const [text, setText] = useState("Sample Watermark");
@@ -90,14 +91,24 @@ export function WatermarkTextSettings() {
         </div>
       )}
 
-      <button
-        onClick={handleProcess}
-        disabled={!hasFile || processing || !text}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Processing..." : "Add Watermark"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Adding watermark"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          onClick={handleProcess}
+          disabled={!hasFile || processing || !text}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          Add Watermark
+        </button>
+      )}
 
       {downloadUrl && (
         <a href={downloadUrl} download className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5">