chore: consolidate platform split checks

webui/src/components/Dialog.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useId, type ReactNode } from "react";
+import { translateReactNode, usePlatformLanguage } from "../i18n/LanguageContext";
 
 export type DialogProps = {
   open: boolean;
@@ -31,7 +32,7 @@ export default function Dialog({
   footer,
   role = "dialog",
   ariaDescribedBy,
-  closeLabel = "Close",
+  closeLabel = "i18n:govoplan-core.close.bbfa773e",
   closeOnBackdrop = true,
   showCloseButton = true,
   closeDisabled = false,
@@ -45,6 +46,11 @@ export default function Dialog({
 }: DialogProps) {
   const titleId = useId();
   const canClose = Boolean(onClose) && !closeDisabled;
+  const { translateText } = usePlatformLanguage();
+  const renderedTitle = translateReactNode(title, translateText);
+  const renderedChildren = translateReactNode(children, translateText);
+  const renderedFooter = translateReactNode(footer, translateText);
+  const translatedCloseLabel = translateText(closeLabel);
 
   useEffect(() => {
     if (!open || !canClose) return undefined;
@@ -75,21 +81,21 @@ export default function Dialog({
         aria-describedby={ariaDescribedBy}
       >
         <div className={joinClasses("dialog-header", headerClassName)}>
-          <h2 id={titleId} className={joinClasses("dialog-title", titleClassName)}>{title}</h2>
+          <h2 id={titleId} className={joinClasses("dialog-title", titleClassName)}>{renderedTitle}</h2>
           {showCloseButton && onClose && (
             <button
               type="button"
               className="dialog-close"
               onClick={onClose}
-              aria-label={closeLabel}
+              aria-label={translatedCloseLabel}
               disabled={closeDisabled}
             >
               ×
             </button>
           )}
         </div>
-        <div className={joinClasses("dialog-body", bodyClassName)}>{children}</div>
-        {footer && <div className={joinClasses("dialog-footer", footerClassName)}>{footer}</div>}
+        <div className={joinClasses("dialog-body", bodyClassName)}>{renderedChildren}</div>
+        {footer && <div className={joinClasses("dialog-footer", footerClassName)}>{renderedFooter}</div>}
       </section>
     </div>
   );