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/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>