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/chat/ChatModeratorNotification/ChatModeratorNotification.tsx

@@ -1,9 +1,14 @@
+import { Translation } from '../../ui/Translation/Translation';
+import { Localization } from '../../../types/localization';
 import styles from './ChatModeratorNotification.module.scss';
 import Icon from '../../../assets/images/moderator.svg';
 
 export const ChatModeratorNotification = () => (
   <div className={styles.chatModerationNotification}>
     <Icon className={styles.icon} />
-    You are now a moderator.
+    <Translation
+      translationKey={Localization.Frontend.Chat.moderatorNotification}
+      defaultText="You are now a moderator."
+    />
   </div>
 );