From 54f386708631ed982d2c24d88d9a7317090ab95e Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Wed, 13 May 2026 16:20:40 +0800
Subject: [PATCH] feat: add Remove Watermark toggle UI with feature gating and
 e2e tests

---
 .../tools/transparency-fixer-settings.tsx     | 50 +++++++++++++++++--
 tests/e2e/transparency-fixer.spec.ts          | 34 +++++++++++++
 2 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/tools/transparency-fixer-settings.tsx b/apps/web/src/components/tools/transparency-fixer-settings.tsx
index ed1119e6..a41f5087 100644
--- a/apps/web/src/components/tools/transparency-fixer-settings.tsx
+++ b/apps/web/src/components/tools/transparency-fixer-settings.tsx
@@ -1,7 +1,8 @@
-import { ChevronDown, ChevronRight } from "lucide-react";
+import { ChevronDown, ChevronRight, Droplets } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { ProgressCard } from "@/components/common/progress-card";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { useFeaturesStore } from "@/stores/features-store";
 import { useFileStore } from "@/stores/file-store";
 
 type OutputFormat = "png" | "webp";
@@ -19,17 +20,27 @@ export function TransparencyFixerControls({
 }: TransparencyFixerControlsProps) {
   const [defringe, setDefringe] = useState(30);
   const [outputFormat, setOutputFormat] = useState<OutputFormat>("png");
+  const [removeWatermark, setRemoveWatermark] = useState(false);
   const [advancedOpen, setAdvancedOpen] = useState(false);
 
+  const eraserInstalled = useFeaturesStore((s) => s.isToolInstalled("erase-object"));
+  const featuresLoaded = useFeaturesStore((s) => s.loaded);
+  const fetchFeatures = useFeaturesStore((s) => s.fetch);
+
+  useEffect(() => {
+    fetchFeatures();
+  }, [fetchFeatures]);
+
   const onChangeRef = useRef(onChange);
   useEffect(() => {
     onChangeRef.current = onChange;
   });
 
-  // Sync settings on every control change
   useEffect(() => {
-    onChangeRef.current({ defringe, outputFormat });
-  }, [defringe, outputFormat]);
+    onChangeRef.current({ defringe, outputFormat, removeWatermark });
+  }, [defringe, outputFormat, removeWatermark]);
+
+  const toggleDisabled = featuresLoaded && !eraserInstalled;
 
   return (
     <div className="space-y-3">
@@ -37,6 +48,37 @@ export function TransparencyFixerControls({
         Upload a PNG with a fake transparent background and we'll fix it in one click.
       </p>
 
+      {/* Remove Watermark toggle */}
+      <div className="flex items-center justify-between py-1">
+        <div className="flex items-center gap-2">
+          <Droplets className="h-3.5 w-3.5 text-muted-foreground" />
+          <div>
+            <p className="text-xs font-medium">Remove Watermark</p>
+            <p className="text-[10px] text-muted-foreground">
+              {toggleDisabled
+                ? "Requires Object Eraser bundle"
+                : "Detect and remove semi-transparent watermarks"}
+            </p>
+          </div>
+        </div>
+        <button
+          type="button"
+          data-testid="remove-watermark-toggle"
+          aria-pressed={removeWatermark}
+          disabled={toggleDisabled}
+          onClick={() => setRemoveWatermark(!removeWatermark)}
+          className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+            removeWatermark ? "bg-primary" : "bg-muted"
+          } ${toggleDisabled ? "opacity-50 cursor-not-allowed" : ""}`}
+        >
+          <span
+            className={`inline-block h-3.5 w-3.5 rounded-full bg-white transition-transform ${
+              removeWatermark ? "translate-x-4.5" : "translate-x-0.5"
+            }`}
+          />
+        </button>
+      </div>
+
       {/* Advanced toggle */}
       <button
         type="button"
diff --git a/tests/e2e/transparency-fixer.spec.ts b/tests/e2e/transparency-fixer.spec.ts
index d79aa38d..daa074dd 100644
--- a/tests/e2e/transparency-fixer.spec.ts
+++ b/tests/e2e/transparency-fixer.spec.ts
@@ -177,4 +177,38 @@ test.describe("PNG Transparency Fixer tool", () => {
     const downloadButton = page.getByRole("button", { name: /download/i });
     await expect(downloadButton).toBeVisible({ timeout: 10_000 });
   });
+
+  test("remove watermark toggle is visible and interactive", async ({ loggedInPage: page }) => {
+    await skipIfFeatureNotInstalled(page);
+
+    const toggle = page.getByTestId("remove-watermark-toggle");
+    await expect(toggle).toBeVisible();
+
+    const isPressed = await toggle.getAttribute("aria-pressed");
+    expect(isPressed).toBe("false");
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-pressed", "true");
+
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-pressed", "false");
+  });
+
+  test("processes with watermark removal enabled", async ({ loggedInPage: page }) => {
+    await skipIfFeatureNotInstalled(page);
+    await uploadFile(page, fixturePath("test-fake-transparency.png"));
+
+    const toggle = page.getByTestId("remove-watermark-toggle");
+    await toggle.click();
+    await expect(toggle).toHaveAttribute("aria-pressed", "true");
+
+    await page.getByTestId("transparency-fixer-submit").click();
+
+    await expect(page.locator("section[aria-label='Image area'] img").first()).toBeVisible({
+      timeout: 600_000,
+    });
+    await expect(page.getByTestId("transparency-fixer-submit")).toBeVisible({ timeout: 10_000 });
+
+    await expect(page.getByText("Transparency fix failed")).not.toBeVisible();
+  });
 });