@tomako/tools-runtime 0.1.0

package/src/features/tools/app-icon-resizer/widget/app-icon-resizer.tsx

@@ -0,0 +1,444 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element -- User-selected data/blob URLs are local previews and cannot use Next image optimization. */
+
+import { RadioGroup } from "@tomako/ui/radio-group";
+import { useTranslations } from "../../../../i18n/client";
+import { downloadBlob } from "../../../../lib/file/download";
+import {
+    APPLE_APP_ICON_MIN_SOURCE_SIZE,
+    APP_ICON_RESIZER_META,
+    GOOGLE_PLAY_ICON_SIZE,
+    appIconResizerInputSchema,
+    appIconResizerOutputSchema,
+    getAppIconAssetSpecs,
+    type AppIconPlatform,
+} from "../../../../lib/tools/app-icon-resizer-schema";
+import { FileArchive, RotateCcw } from "lucide-react";
+import type { ChangeEvent, DragEvent, FormEvent } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import {
+    ToolActionBar,
+    ToolEmptyPanel,
+    ToolErrorBanner,
+    ToolFieldGroup,
+    ToolFileUpload,
+    ToolLoadingPanel,
+    ToolPlatformOptionCard,
+    ToolPreviewPanel,
+    ToolPrimaryButton,
+    ToolResetButton,
+    ToolWorkspaceLayout,
+} from "../../../../components/tools/workspace";
+import {
+    ACCEPTED_SOURCE_MIME_TYPES,
+    DEFAULT_BACKGROUND_COLOR,
+    DEFAULT_FIT,
+    LOADING_STEP_COUNT,
+    platformOptions,
+} from "./constants";
+import {
+    buildWarnings,
+    buildZipName,
+    createIconZip,
+    loadSourceImage,
+    renderIconAssets,
+} from "./helpers";
+import { PlatformPackageIcon } from "./platform-icons";
+import { AssetPreviewDialog, SourcePreviewDialog } from "./preview-dialogs";
+import { ResultPanel, getVisibleGeneratedAssets } from "./result-shell";
+import type { GeneratedPackage, ResultTab, SourceImage } from "./types";
+
+export function AppIconResizer() {
+  const t = useTranslations("toolsUi.appIconResizer");
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [platform, setPlatform] = useState<AppIconPlatform>("all");
+  const [source, setSource] = useState<SourceImage | null>(null);
+  const [output, setOutput] = useState<GeneratedPackage | null>(null);
+  const [resultTab, setResultTab] = useState<ResultTab>("all");
+  const [busy, setBusy] = useState(false);
+  const [loadingStep, setLoadingStep] = useState(0);
+  const [remainingSeconds, setRemainingSeconds] = useState(4);
+  const [error, setError] = useState<string | null>(null);
+  const [dragActive, setDragActive] = useState(false);
+  const [sourcePreviewOpen, setSourcePreviewOpen] = useState(false);
+  const [assetPreviewIndex, setAssetPreviewIndex] = useState<number | null>(null);
+
+  const specs = useMemo(() => getAppIconAssetSpecs(platform), [platform]);
+  const visibleGeneratedAssets = useMemo(
+    () => (output ? getVisibleGeneratedAssets(output, resultTab) : []),
+    [output, resultTab],
+  );
+
+  useEffect(() => {
+    return () => {
+      output?.generatedAssets.forEach((asset) => URL.revokeObjectURL(asset.url));
+    };
+  }, [output]);
+
+  useEffect(() => {
+    if (!busy) return undefined;
+
+    const interval = window.setInterval(() => {
+      setRemainingSeconds((current) => Math.max(0, current - 1));
+    }, 1000);
+
+    return () => window.clearInterval(interval);
+  }, [busy]);
+
+  async function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0];
+    await acceptSourceFile(file);
+    event.target.value = "";
+  }
+
+  async function acceptSourceFile(file: File | undefined) {
+    setError(null);
+
+    if (!file) {
+      return;
+    }
+
+    if (!ACCEPTED_SOURCE_MIME_TYPES.has(file.type)) {
+      setError(t("errors.fileType"));
+      return;
+    }
+
+    try {
+      const loaded = await loadSourceImage(file);
+      setSource(loaded);
+      setSourcePreviewOpen(false);
+    } catch {
+      setError(t("errors.fileRead"));
+    }
+  }
+
+  function handleDrop(event: DragEvent<HTMLElement>) {
+    event.preventDefault();
+    setDragActive(false);
+    void acceptSourceFile(event.dataTransfer.files[0]);
+  }
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setError(null);
+
+    if (!source) {
+      setError(t("errors.missingFile"));
+      return;
+    }
+
+    const parsed = appIconResizerInputSchema.safeParse({
+      platform,
+      fit: DEFAULT_FIT,
+      backgroundColor: DEFAULT_BACKGROUND_COLOR,
+      fileName: source.fileName,
+      width: source.width,
+      height: source.height,
+      type: source.type,
+    });
+
+    if (!parsed.success) {
+      setError(t("errors.invalidSettings"));
+      return;
+    }
+
+    const shortestSourceSide = Math.min(source.width, source.height);
+    const requiredSourceSize =
+      platform === "google" ? GOOGLE_PLAY_ICON_SIZE : APPLE_APP_ICON_MIN_SOURCE_SIZE;
+
+    if (shortestSourceSide < requiredSourceSize) {
+      setError(platform === "google" ? t("errors.tooSmallGoogle") : t("errors.tooSmallApple"));
+      return;
+    }
+
+    clearOutput();
+    setLoadingStep(0);
+    setRemainingSeconds(4);
+    setBusy(true);
+    if (window.matchMedia("(max-width: 1023px)").matches) {
+      window.setTimeout(
+        () => resultRef.current?.scrollIntoView({ block: "center", behavior: "smooth" }),
+        40,
+      );
+    }
+
+    try {
+      const generatedAssets = await renderIconAssets(
+        source,
+        specs,
+        DEFAULT_FIT,
+        DEFAULT_BACKGROUND_COLOR,
+      );
+      setLoadingStep(1);
+      const warnings = buildWarnings(source, generatedAssets, t);
+      const summary = appIconResizerOutputSchema.parse({
+        toolId: APP_ICON_RESIZER_META.id,
+        version: APP_ICON_RESIZER_META.version,
+        source: {
+          fileName: source.fileName,
+          width: source.width,
+          height: source.height,
+          type: source.type,
+        },
+        assetCount: generatedAssets.length,
+        zipName: buildZipName(source.fileName, platform),
+        assets: generatedAssets.map((asset) => ({
+          id: asset.id,
+          platform: asset.platform,
+          group: asset.group,
+          path: asset.path,
+          width: asset.width,
+          height: asset.height,
+          purpose: asset.purpose,
+          required: asset.required,
+        })),
+        warnings,
+      });
+      setLoadingStep(2);
+      const zipBlob = await createIconZip(
+        summary,
+        generatedAssets,
+        DEFAULT_FIT,
+        DEFAULT_BACKGROUND_COLOR,
+        t,
+      );
+      setLoadingStep(3);
+
+      setOutput({ ...summary, generatedAssets, platform, zipBlob });
+    } catch {
+      setError(t("errors.generate"));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function clearOutput() {
+    if (output) {
+      output.generatedAssets.forEach((asset) => URL.revokeObjectURL(asset.url));
+    }
+
+    setOutput(null);
+    setResultTab("all");
+    setAssetPreviewIndex(null);
+  }
+
+  function removeSource() {
+    setSource(null);
+    setError(null);
+    setSourcePreviewOpen(false);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }
+
+  function reset() {
+    clearOutput();
+    setSource(null);
+    setError(null);
+    setPlatform("all");
+    setSourcePreviewOpen(false);
+  }
+
+  function downloadZip() {
+    if (!output) return;
+    downloadBlob(output.zipBlob, output.zipName);
+  }
+
+  const assetPreview =
+    assetPreviewIndex === null ? null : visibleGeneratedAssets[assetPreviewIndex] ?? null;
+
+  return (
+    <>
+      <ToolWorkspaceLayout
+        className="lg:h-[clamp(600px,calc(100svh-260px),760px)]"
+        form={
+          <form
+            onSubmit={(event) => void submit(event)}
+            className="relative flex min-h-full flex-col gap-5"
+          >
+            {error ? (
+              <div className="pointer-events-none absolute left-0 right-0 top-0 z-30">
+                <div role="alert">
+                  <ToolErrorBanner>{error}</ToolErrorBanner>
+                </div>
+              </div>
+            ) : null}
+            <div className="-mx-1 min-w-0 flex-1 space-y-5 overflow-x-hidden px-1 pb-5">
+              <ToolFieldGroup label={t("uploadLabel")} hint={t("uploadHint")} required>
+                <div
+                  onDragEnter={(event) => {
+                    event.preventDefault();
+                    setDragActive(true);
+                  }}
+                  onDragLeave={(event) => {
+                    event.preventDefault();
+                    setDragActive(false);
+                  }}
+                  onDragOver={(event) => event.preventDefault()}
+                  onDrop={handleDrop}
+                >
+                  <ToolFileUpload
+                    accept="image/png,image/jpeg,image/webp"
+                    className={
+                      dragActive ? "!border-[#111111] ring-4 ring-[#111111]/10" : undefined
+                    }
+                    chooseLabel={t("emptyPreviewTitle")}
+                    fileName={source?.fileName}
+                    hasFile={Boolean(source)}
+                    hint={t("emptyPreviewHint")}
+                    inputRef={fileInputRef}
+                    preview={
+                      source ? (
+                        <button
+                          aria-label={t("openPreview")}
+                          className="h-full w-full cursor-zoom-in rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-[#111111]/20"
+                          type="button"
+                          onClick={() => setSourcePreviewOpen(true)}
+                        >
+                          <img
+                            alt={t("sourcePreviewAlt")}
+                            className="h-full w-full object-contain"
+                            src={source.dataUrl}
+                          />
+                        </button>
+                      ) : undefined
+                    }
+                    removeLabel={t("removeSource")}
+                    selectedLabel={t("replaceHint")}
+                    selectedMeta={
+                      source
+                        ? t("sourceMeta", { width: source.width, height: source.height })
+                        : undefined
+                    }
+                    onChange={(event) => void handleFileChange(event)}
+                    onChoose={() => fileInputRef.current?.click()}
+                    onRemove={removeSource}
+                  />
+                </div>
+              </ToolFieldGroup>
+
+              <ToolFieldGroup label={t("platformLabel")}>
+                <RadioGroup
+                  className="grid grid-cols-1 gap-2 sm:grid-cols-3"
+                  value={platform}
+                  onValueChange={(value) => setPlatform(value as AppIconPlatform)}
+                >
+                  {platformOptions.map((option) => (
+                    <ToolPlatformOptionCard
+                      key={option}
+                      active={platform === option}
+                      icon={<PlatformPackageIcon value={option} />}
+                      label={t(`platforms.${option}`)}
+                      value={option}
+                    />
+                  ))}
+                </RadioGroup>
+              </ToolFieldGroup>
+
+              <div className="rounded-lg border border-[#E5E5E5] bg-white p-4">
+                <p className="text-sm font-semibold text-[#111111]">{t("standardsTitle")}</p>
+                <p className="mt-1 text-sm leading-6 text-[#555555]">
+                  {t(`packageSummaries.${platform}`, { count: specs.length })}
+                </p>
+                <p className="mt-2 text-xs leading-5 text-[#777777]">{t("submissionNote")}</p>
+                <p className="mt-1 text-xs leading-5 text-[#777777]">{t("cornerNote")}</p>
+              </div>
+            </div>
+
+            <ToolActionBar attached className={source || output ? "grid-cols-2" : undefined}>
+              {source || output ? (
+                <ToolResetButton disabled={busy} onClick={reset}>
+                  <RotateCcw aria-hidden className="size-4" />
+                  {t("reset")}
+                </ToolResetButton>
+              ) : null}
+              <ToolPrimaryButton disabled={busy} type="submit">
+                {busy ? t("generating") : t("generate")}
+              </ToolPrimaryButton>
+            </ToolActionBar>
+          </form>
+        }
+        preview={
+          <div ref={resultRef} className="h-full min-h-[560px] lg:min-h-0">
+            <ToolPreviewPanel className="h-full min-h-[560px] lg:min-h-0">
+              {busy ? (
+                <ToolLoadingPanel
+                  label={t("loadingTitle")}
+                  progress={Math.min(96, ((loadingStep + 1) / LOADING_STEP_COUNT) * 100)}
+                  steps={[
+                    t("loadingSteps.render"),
+                    t("loadingSteps.review"),
+                    t("loadingSteps.readme"),
+                    t("loadingSteps.zip"),
+                  ].map((title, index) => ({
+                    title,
+                    status:
+                      index < loadingStep
+                        ? "complete"
+                        : index === loadingStep
+                          ? "active"
+                          : "pending",
+                    countdown:
+                      index === loadingStep && remainingSeconds > 0
+                        ? `${remainingSeconds}s`
+                        : undefined,
+                  }))}
+                />
+              ) : output ? (
+                <ResultPanel
+                  output={output}
+                  resultTab={resultTab}
+                  onResultTabChange={setResultTab}
+                  onAssetPreview={setAssetPreviewIndex}
+                  onDownloadZip={downloadZip}
+                  t={t}
+                />
+              ) : (
+                <ToolEmptyPanel
+                  body={t("outputEmptyHint")}
+                  className="h-full min-h-0 flex-1 rounded-lg"
+                  icon={
+                    <span className="mx-auto flex size-12 items-center justify-center rounded-lg bg-white text-[#111111] shadow-[0_10px_26px_rgba(17,17,17,0.08)]">
+                      <FileArchive aria-hidden className="size-5" />
+                    </span>
+                  }
+                  title={t("outputEmptyTitle")}
+                />
+              )}
+            </ToolPreviewPanel>
+          </div>
+        }
+      />
+      <SourcePreviewDialog
+        alt={t("sourcePreviewAlt")}
+        open={sourcePreviewOpen}
+        source={source}
+        title={t("previewDialogTitle")}
+        onOpenChange={setSourcePreviewOpen}
+      />
+      <AssetPreviewDialog
+        asset={assetPreview}
+        assetPreviewIndex={assetPreviewIndex}
+        downloadLabel={t("downloadPng")}
+        nextLabel={t("nextAsset")}
+        previousLabel={t("previousAsset")}
+        title={t("assetPreviewTitle")}
+        visibleAssets={visibleGeneratedAssets}
+        onClose={() => setAssetPreviewIndex(null)}
+        onNext={() =>
+          setAssetPreviewIndex((current) =>
+            current === null
+              ? current
+              : Math.min(visibleGeneratedAssets.length - 1, current + 1),
+          )
+        }
+        onPrevious={() =>
+          setAssetPreviewIndex((current) =>
+            current === null ? current : Math.max(0, current - 1),
+          )
+        }
+      />
+    </>
+  );
+}

package/src/features/tools/app-icon-resizer/widget/constants.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from "react";
+
+import type { AppIconFit, AppIconPlatform } from "../../../../lib/tools/app-icon-resizer-schema";
+
+import type { ResultTab } from "./types";
+
+export const platformOptions: AppIconPlatform[] = ["all", "apple", "google"];
+export const resultTabs: ResultTab[] = ["all", "apple", "google"];
+export const DEFAULT_FIT: AppIconFit = "cover";
+export const DEFAULT_BACKGROUND_COLOR = "#FFFFFF";
+export const LOADING_STEP_COUNT = 4;
+export const ACCEPTED_SOURCE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/webp"]);
+export const TRANSPARENT_PREVIEW_BACKGROUND: CSSProperties = {
+  backgroundColor: "#F5F5F5",
+  backgroundImage:
+    "linear-gradient(45deg, #E1E1E1 25%, transparent 25%), linear-gradient(-45deg, #E1E1E1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #E1E1E1 75%), linear-gradient(-45deg, transparent 75%, #E1E1E1 75%)",
+  backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0px",
+  backgroundSize: "16px 16px",
+};