refactor: make APPNAME a locale global

frontend/src/locale/setup.ts

@@ -1,5 +1,6 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import { APPNAME } from '../ui/theme';
 
 import en from './en/translation.json';
 import it from './it/translation.json';
@@ -17,5 +18,8 @@ void i18n.use(initReactI18next).init({
   fallbackLng: 'en',
   interpolation: {
     escapeValue: false,
+    defaultVariables: {
+      APPNAME,
+    },
   },
 });

frontend/src/ui/App.tsx

@@ -38,7 +38,7 @@ import LoyaltyRewardsPage from './pages/LoyaltyRewards';
 import ServerSettingsPage from './pages/ServerSettings';
 import StrimertulPage from './pages/Strimertul';
 import TwitchSettingsPage from './pages/TwitchSettings';
-import { APPNAME, styled } from './theme';
+import { styled } from './theme';
 
 // @ts-expect-error Asset import
 import spinner from '../assets/icon-loading.svg';
@@ -210,7 +210,7 @@ export default function App(): JSX.Element {
   }, [ready, connected]);
 
   if (connected === ConnectionStatus.NotConnected) {
-    return <Loading message={t('special.loading', { APPNAME })} />;
+    return <Loading message={t('special.loading')} />;
   }
 
   if (connected === ConnectionStatus.AuthenticationNeeded) {

frontend/src/ui/pages/AuthDialog.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@stitches/react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { APPNAME, Button, InputBox, TextBlock } from '../theme';
+import { Button, InputBox, TextBlock } from '../theme';
 
 const AuthWrapper = styled('div', {
   alignItems: 'center',
@@ -59,9 +59,7 @@ export default function AuthDialog(): React.ReactElement {
       >
         <AuthTitle>{t('pages.auth.title')}</AuthTitle>
         <Content>
-          <TextBlock spacing="none">
-            {t('pages.auth.desc', { APPNAME })}
-          </TextBlock>
+          <TextBlock spacing="none">{t('pages.auth.desc')}</TextBlock>
           <TextBlock spacing="none">{t('pages.auth.no-pwd-note')}</TextBlock>
         </Content>
         <Actions>

frontend/src/ui/pages/Strimertul.tsx

@@ -115,7 +115,7 @@ export default function StrimertulPage(): React.ReactElement {
       <Section>
         <SectionHeader>{t('pages.strimertul.need-help')}</SectionHeader>
         <SectionParagraph css={{ paddingBottom: 0 }}>
-          {t('pages.strimertul.need-help-p1', { APPNAME })}
+          {t('pages.strimertul.need-help-p1')}
         </SectionParagraph>
         <ChannelList>
           <Channel>
@@ -138,7 +138,6 @@ export default function StrimertulPage(): React.ReactElement {
           <Trans
             t={t}
             i18nKey="pages.strimertul.credits-renko"
-            values={{ APPNAME }}
             components={{
               artist: (
                 <BrowserLink href="https://twitter.com/Sonic__Chan">
@@ -155,7 +154,6 @@ export default function StrimertulPage(): React.ReactElement {
           <Trans
             t={t}
             i18nKey="pages.strimertul.license-notice-strimertul"
-            values={{ APPNAME }}
             components={{
               license: (
                 <BrowserLink href="https://github.com/strimertul/strimertul/blob/master/LICENSE">

frontend/src/ui/pages/TwitchSettings.tsx

@@ -14,7 +14,6 @@ import DefinitionTable from '../components/DefinitionTable';
 import RevealLink from '../components/utils/RevealLink';
 import SaveButton from '../components/utils/SaveButton';
 import {
-  APPNAME,
   Button,
   ButtonGroup,
   Checkbox,
@@ -372,7 +371,7 @@ function TwitchEventSubSettings() {
   }
   return (
     <>
-      <p>{t('pages.twitch-settings.events.auth-message', { APPNAME })}</p>
+      <p>{t('pages.twitch-settings.events.auth-message')}</p>
       <Button
         variation="primary"
         onClick={() => {