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/ChatJoinMessage/ChatJoinMessage.tsx

@@ -1,6 +1,8 @@
 import { FC } from 'react';
 import dynamic from 'next/dynamic';
 import { ModerationBadge } from '../ChatUserBadge/ModerationBadge';
+import { Translation } from '../../ui/Translation/Translation';
+import { Localization } from '../../../types/localization';
 
 import styles from './ChatJoinMessage.module.scss';
 
@@ -29,13 +31,19 @@ export const ChatJoinMessage: FC<ChatJoinMessageProps> = ({
         <span className={styles.icon}>
           <UsergroupAddOutlined />
         </span>
-        <span className={styles.user}>{displayName}</span>
         {isAuthorModerator && (
           <span className={styles.moderatorBadge}>
             <ModerationBadge userColor={userColor} />
           </span>
         )}
-        <span className={styles.joinMessage}>joined the chat.</span>
+        <span className={styles.joinMessage}>
+          <span className={styles.user}>{displayName}</span>
+          <span> </span>
+          <Translation
+            translationKey={Localization.Frontend.Chat.userJoined}
+            defaultText="joined the chat."
+          />
+        </span>
       </span>
     </div>
   );

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>
 );

web/components/chat/ChatNameChangeMessage/ChatNameChangeMessage.tsx

@@ -1,8 +1,8 @@
-// export const ChatSocialMessage: FC<ChatSocialMessageProps> = ({ message }) => {
-
 import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import { NameChangeEvent } from '../../../interfaces/socket-events';
+import { Translation } from '../../ui/Translation/Translation';
+import { Localization } from '../../../types/localization';
 import styles from './ChatNameChangeMessage.module.scss';
 
 export interface ChatNameChangeMessageProps {
@@ -27,10 +27,14 @@ export const ChatNameChangeMessage: FC<ChatNameChangeMessageProps> = ({ message
       </div>
       <div className={styles.nameChangeText}>
         <span style={{ color }}>{oldName}</span>
-        <span className={styles.plain} id="owncast-name-change-is-now-known-text">
-          {' '}
-          is now known as{' '}
-        </span>
+        <span> </span>
+        <Translation
+          translationKey={Localization.Frontend.Chat.nameChangeText}
+          className={styles.plain}
+          id="owncast-name-change-is-now-known-text"
+          defaultText="is now known as"
+        />
+        <span> </span>
         <span style={{ color }}>{displayName}</span>
       </div>
     </div>

web/components/chat/ChatPartMessage/ChatPartMessage.tsx

@@ -1,6 +1,8 @@
 import { FC } from 'react';
 import dynamic from 'next/dynamic';
 import { ModerationBadge } from '../ChatUserBadge/ModerationBadge';
+import { Translation } from '../../ui/Translation/Translation';
+import { Localization } from '../../../types/localization';
 
 import styles from './ChatPartMessage.module.scss';
 
@@ -29,13 +31,19 @@ export const ChatPartMessage: FC<ChatPartMessageProps> = ({
         <span className={styles.icon}>
           <UsergroupDeleteOutlined />
         </span>
-        <span className={styles.user}>{displayName}</span>
         {isAuthorModerator && (
           <span className={styles.moderatorBadge}>
             <ModerationBadge userColor={userColor} />
           </span>
         )}
-        <span className={styles.partMessage}>left the chat.</span>
+        <span className={styles.partMessage}>
+          <span className={styles.user}>{displayName}</span>
+          <span> </span>
+          <Translation
+            translationKey={Localization.Frontend.Chat.userLeft}
+            defaultText="left the chat."
+          />
+        </span>
       </span>
     </div>
   );