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/types/localization.ts

@@ -100,6 +100,14 @@ export const Localization = {
       source: 'Frontend.Footer.source',
     },
 
+    // Chat message components
+    Chat: {
+      userJoined: 'Frontend.Chat.userJoined',
+      userLeft: 'Frontend.Chat.userLeft',
+      nameChangeText: 'Frontend.Chat.nameChangeText',
+      moderatorNotification: 'Frontend.Chat.moderatorNotification',
+    },
+
     // Follow modal component
     FollowModal: {
       description: 'Frontend.FollowModal.description',