feat: opt-out translation for volatile UI islands (notranslate)

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## Unreleased
+
+- Opted out of translation for high-churn UI regions (search suggestions and moderation counters) using the `NoTranslate` wrapper to avoid Google Translate DOM churn.

src/components/NoTranslate.tsx

@@ -0,0 +1,14 @@
+"use client";
+import React from "react";
+export function NoTranslate(props: React.HTMLAttributes<HTMLDivElement>) {
+  const { className, children, ...rest } = props;
+  return (
+    <div
+      translate="no"
+      className={["notranslate", className].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

src/components/feedback/review-list-item.tsx

@@ -37,6 +37,7 @@ import { toast } from "sonner";
 import Spinner from "@/components/spinner";
 import ReportComment from "@/components/feedback/report-comment";
 import { clsx } from "clsx";
+import { NoTranslate } from "@/components/NoTranslate";
 
 export default function ReviewListItem({
   comment,
@@ -168,10 +169,10 @@ export default function ReviewListItem({
               </div>
             </div>
             {comment.report_count > 0 && (isAdmin || isStuffUser) && (
-              <span className="text-xs ml-3 self-start gap-1 border border-red-500 bg-red-500/10 text-red-500 px-2 py-0.5 rounded-full inline-flex items-center">
+              <NoTranslate className="text-xs ml-3 self-start gap-1 border border-red-500 bg-red-500/10 text-red-500 px-2 py-0.5 rounded-full inline-flex items-center">
                 <ExclamationTriangleIcon className="w-4 h-4" />
                 <span>{comment.report_count}</span>
-              </span>
+              </NoTranslate>
             )}
           </div>
           <DropdownMenu>
@@ -292,7 +293,11 @@ export default function ReviewListItem({
             >
               <HandThumbUpIcon />
               <span>Helpful</span>
-              {comment.likes_count > 0 && <span>({comment.likes_count})</span>}
+              {comment.likes_count > 0 && (
+                <NoTranslate className="inline-flex">
+                  <span>({comment.likes_count})</span>
+                </NoTranslate>
+              )}
             </Button>
 
             {isStuffUser === null ? (

src/components/search-form.tsx

@@ -26,6 +26,7 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
 import { SearchContext, SearchContextType } from "./search-context";
 import { PreviousParams } from "./get-previous-params";
 import { usePreviousParamsOnClient } from "./use-previous-params-client";
+import { NoTranslate } from "./NoTranslate";
 
 function SearchPanel({
   currentSearch,
@@ -74,9 +75,9 @@ function SearchPanel({
           />
           <div className="flex-1 text-dark">
             <span>Search for</span>{" "}
-            <span id="search_for" translate="no">
-              {currentSearch}
-            </span>
+            <NoTranslate id="search_for" className="inline">
+              <span>{currentSearch}</span>
+            </NoTranslate>
           </div>
           <span className="text-dark">
             <svg