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