feat: add frontend store and components for html-to-image tool

apps/web/src/components/tools/html-to-image-results.tsx

@@ -0,0 +1,61 @@
+import { Download, Loader2 } from "lucide-react";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useHtmlToImageStore } from "@/stores/html-to-image-store";
+
+export function HtmlToImageResults() {
+  const store = useHtmlToImageStore();
+  const { t } = useTranslation();
+  const ts = t.toolSettings["html-to-image"];
+
+  if (store.capturing) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-3 text-muted-foreground">
+        <Loader2 className="h-8 w-8 animate-spin" />
+        <p className="text-sm">{ts.capturing}</p>
+      </div>
+    );
+  }
+
+  if (!store.resultUrl) {
+    return (
+      <div className="flex h-full items-center justify-center text-muted-foreground">
+        <p className="text-sm">{ts.placeholder}</p>
+      </div>
+    );
+  }
+
+  const handleDownload = () => {
+    const a = document.createElement("a");
+    a.href = store.resultUrl!;
+    a.download = `screenshot.${store.format}`;
+    a.click();
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex-1 overflow-auto p-4">
+        <img
+          src={store.resultUrl}
+          alt="Captured screenshot"
+          className="mx-auto max-w-full rounded-lg border border-border shadow-sm"
+        />
+      </div>
+      <div className="flex items-center justify-between border-t border-border p-4">
+        <span className="text-sm text-muted-foreground">
+          {store.resultSize != null
+            ? store.resultSize >= 1024 * 1024
+              ? `${(store.resultSize / (1024 * 1024)).toFixed(1)} MB`
+              : `${(store.resultSize / 1024).toFixed(1)} KB`
+            : ""}
+        </span>
+        <button
+          onClick={handleDownload}
+          className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground"
+        >
+          <Download className="h-4 w-4" />
+          {ts.download}
+        </button>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/tools/html-to-image-settings.tsx

@@ -0,0 +1,139 @@
+import { Loader2 } from "lucide-react";
+import { useCallback } from "react";
+import { useTranslation } from "@/contexts/i18n-context";
+import { useHtmlToImageStore } from "@/stores/html-to-image-store";
+
+export function HtmlToImageSettings() {
+  const store = useHtmlToImageStore();
+  const { t } = useTranslation();
+  const ts = t.toolSettings["html-to-image"];
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      store.capture();
+    },
+    [store],
+  );
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label className="mb-1 block text-sm font-medium">{ts.url}</label>
+        <input
+          type="url"
+          value={store.url}
+          onChange={(e) => store.setUrl(e.target.value)}
+          placeholder={ts.urlPlaceholder}
+          className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
+        />
+      </div>
+
+      <div>
+        <label className="mb-1 block text-sm font-medium">{ts.format}</label>
+        <select
+          value={store.format}
+          onChange={(e) => store.setFormat(e.target.value as "jpg" | "png" | "webp")}
+          className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
+        >
+          <option value="png">PNG</option>
+          <option value="jpg">JPG</option>
+          <option value="webp">WebP</option>
+        </select>
+      </div>
+
+      {store.format !== "png" && (
+        <div>
+          <label className="mb-1 block text-sm font-medium">
+            {ts.quality}: {store.quality}%
+          </label>
+          <input
+            type="range"
+            min={1}
+            max={100}
+            value={store.quality}
+            onChange={(e) => store.setQuality(Number(e.target.value))}
+            className="w-full"
+          />
+        </div>
+      )}
+
+      <div>
+        <label className="mb-1 block text-sm font-medium">{ts.devicePreset}</label>
+        <select
+          value={store.devicePreset}
+          onChange={(e) =>
+            store.setDevicePreset(e.target.value as "desktop" | "tablet" | "mobile" | "custom")
+          }
+          className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
+        >
+          <option value="desktop">{ts.presets.desktop}</option>
+          <option value="tablet">{ts.presets.tablet}</option>
+          <option value="mobile">{ts.presets.mobile}</option>
+          <option value="custom">{ts.presets.custom}</option>
+        </select>
+      </div>
+
+      {store.devicePreset === "custom" && (
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="mb-1 block text-sm font-medium">{ts.viewportWidth}</label>
+            <input
+              type="number"
+              min={320}
+              max={3840}
+              value={store.viewportWidth}
+              onChange={(e) => store.setViewportWidth(Number(e.target.value))}
+              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium">{ts.viewportHeight}</label>
+            <input
+              type="number"
+              min={320}
+              max={2160}
+              value={store.viewportHeight}
+              onChange={(e) => store.setViewportHeight(Number(e.target.value))}
+              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="flex items-center justify-between">
+        <label className="text-sm font-medium">{ts.fullPage}</label>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={store.fullPage}
+          onClick={() => store.setFullPage(!store.fullPage)}
+          className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${
+            store.fullPage ? "bg-primary" : "bg-muted"
+          }`}
+        >
+          <span
+            className={`pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform ${
+              store.fullPage ? "translate-x-5" : "translate-x-0"
+            }`}
+          />
+        </button>
+      </div>
+
+      {store.error && (
+        <div className="rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
+          {store.error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={!store.url || store.capturing}
+        className="inline-flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground disabled:opacity-50"
+      >
+        {store.capturing && <Loader2 className="h-4 w-4 animate-spin" />}
+        {store.capturing ? ts.capturing : ts.submit}
+      </button>
+    </form>
+  );
+}