feat: ISR with auto-translated content i18n for node pages

components/nodes/ContentToggle.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { useNextTranslation } from "@/src/hooks/i18n";
+import type { TranslationSource } from "@/src/hooks/i18n/translateNode";
+
+const STORAGE_KEY = "comfy-registry-content-translation-mode";
+type Mode = "translated" | "original";
+
+interface ContentToggleProps {
+  original: string;
+  translated: string | null;
+  locale: string;
+  isLoadingTranslation?: boolean;
+  /**
+   * Where the translation came from. `"stored"` means a publisher-provided
+   * translation from the registry API; `"auto"` means OpenAI generated it on
+   * the fly. Used to show an accurate label (AI-translated vs. human-translated)
+   * so users aren't misled about provenance.
+   */
+  translationSource?: TranslationSource;
+}
+
+/**
+ * Renders dynamic node content (description, etc.) with a toggle that lets
+ * users switch between the auto-translated version and the original English.
+ *
+ * - When `locale === "en"` or no translation is available, falls back to
+ *   the original and hides the toggle entirely.
+ * - The user's preference is persisted in localStorage so toggling once
+ *   sticks across navigations.
+ * - Default mode is "translated" when a translation exists, so users on
+ *   non-English locales get the localized text by default.
+ */
+export default function ContentToggle({
+  original,
+  translated,
+  locale,
+  isLoadingTranslation,
+  translationSource,
+}: ContentToggleProps) {
+  const { t } = useNextTranslation();
+  const [mode, setMode] = useState<Mode>("translated");
+
+  // Restore stored preference on mount
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const saved = window.localStorage.getItem(STORAGE_KEY);
+    if (saved === "original" || saved === "translated") setMode(saved);
+  }, []);
+
+  const isNonEn = locale !== "en";
+  const hasTranslation = !!translated && isNonEn;
+  const showOriginal = !hasTranslation || mode === "original";
+  const displayed = showOriginal ? original : translated!;
+  // Show the header whenever we're on a non-en locale and either have a
+  // translation to toggle to or are still fetching one. This makes the
+  // "Translating…" indicator reachable while the async fetch is in flight.
+  const showHeader = isNonEn && (hasTranslation || isLoadingTranslation);
+
+  const toggle = () => {
+    const next: Mode = mode === "translated" ? "original" : "translated";
+    setMode(next);
+    if (typeof window !== "undefined") window.localStorage.setItem(STORAGE_KEY, next);
+  };
+
+  return (
+    <div>
+      {showHeader && (
+        <div className="mb-2 flex items-center gap-2 text-xs text-gray-400">
+          {hasTranslation && (
+            <button
+              type="button"
+              onClick={toggle}
+              className="rounded border border-gray-600 px-2 py-1 hover:border-blue-500 hover:text-blue-300"
+            >
+              {showOriginal ? t("Show translation") : t("Show original")}
+            </button>
+          )}
+          {hasTranslation &&
+            !showOriginal &&
+            (translationSource === "auto" ? (
+              <span title={t("Auto-translated by AI; original may be more accurate")}>
+                {t("Auto-translated")}
+              </span>
+            ) : translationSource === "stored" ? (
+              <span title={t("Translation provided by the publisher")}>{t("Translated")}</span>
+            ) : (
+              <span>{t("Translated")}</span>
+            ))}
+          {isLoadingTranslation && !translated && (
+            <span className="italic">{t("Translating…")}</span>
+          )}
+        </div>
+      )}
+      <p className="text-base font-normal whitespace-pre-wrap text-gray-200">{displayed}</p>
+    </div>
+  );
+}

components/nodes/NodeDetails.tsx

@@ -24,7 +24,9 @@ import {
 } from "@/src/api/generated";
 import nodesLogo from "@/src/assets/images/nodesLogo.svg";
 import { useNextTranslation } from "@/src/hooks/i18n";
+import type { TranslatedNodeContent } from "@/src/hooks/i18n/translateNode";
 import CopyableCodeBlock from "../CodeBlock/CodeBlock";
+import ContentToggle from "./ContentToggle";
 import { NodeDeleteModal } from "./NodeDeleteModal";
 import { NodeEditModal } from "./NodeEditModal";
 import NodeStatusBadge from "./NodeStatusBadge";
@@ -87,8 +89,13 @@ export function formatDownloadCount(count: number): string {
   return `${cleanNum}${units[unitIndex]}`;
 }
 
-const NodeDetails = () => {
+const NodeDetails = ({
+  translatedContent,
+}: {
+  translatedContent?: TranslatedNodeContent | null;
+}) => {
   const { t, i18n } = useNextTranslation();
+
   // state for drawer and modals
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [selectedVersion, setSelectedVersion] = useState<NodeVersion | null>(null);
@@ -489,7 +496,25 @@ const NodeDetails = () => {
               </div>
               <div>
                 <h2 className="mb-2 text-lg font-bold">{t("Description")}</h2>
-                <p className="text-base font-normal text-gray-200">{node.description}</p>
+                {(() => {
+                  const isrTranslation =
+                    translatedContent?.locale === i18n.language &&
+                    translatedContent?.description &&
+                    translatedContent.description !== node.description
+                      ? {
+                          description: translatedContent.description,
+                          source: translatedContent.source,
+                        }
+                      : null;
+                  return (
+                    <ContentToggle
+                      original={node.description ?? ""}
+                      translated={isrTranslation?.description ?? null}
+                      translationSource={isrTranslation?.source}
+                      locale={i18n.language}
+                    />
+                  );
+                })()}
               </div>
               <div className="mt-10" hidden={isUnclaimed}>
                 <h2 className="mb-2 text-lg font-semibold">{t("Version history")}</h2>