Add localization support for chat message components with enhanced Translation component (#4560)

* Initial plan

* Add localization support for chat message components

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Update chat message localization to use string interpolation

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Restore original styling while preserving string interpolation

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Separate styling from variables in translation templates

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Revert to concatenation approach for chat message localization

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Add id property to Translation component and restore missing CSS classes and IDs

Co-authored-by: gabek <414923+gabek@users.noreply.github.com>

* Javascript formatting autofixes

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: gabek <414923+gabek@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: Owncast <owncast@owncast.online>

web/components/ui/Translation/Translation.tsx

@@ -7,6 +7,7 @@ export interface TranslationProps {
   translationKey: LocalizationKey;
   vars?: Record<string, any>;
   className?: string;
+  id?: string;
   defaultText?: string;
   count?: number;
 }
@@ -15,6 +16,7 @@ export const Translation: FC<TranslationProps> = ({
   translationKey,
   vars,
   className,
+  id,
   defaultText,
   count,
 }) => {
@@ -55,7 +57,9 @@ export const Translation: FC<TranslationProps> = ({
     }
   }
 
-  return <span className={className} dangerouslySetInnerHTML={{ __html: translatedText }} />;
+  return (
+    <span className={className} id={id} dangerouslySetInnerHTML={{ __html: translatedText }} />
+  );
 };
 
 export default Translation;