i18n

package.json

@@ -50,7 +50,6 @@
     "highlight.js": "^10.4.1",
     "js-yaml": "^4.1.1",
     "lodash.debounce": "^4.0.8",
-    "moment": "^2.29.1",
     "quasar": "^2.18.6",
     "quill": "^1.3.7",
     "sanitize-filename": "^1.6.3",
@@ -87,8 +86,8 @@
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.21",
     "devtron": "^1.4.0",
-    "electron-builder": "26.14.0",
     "electron": "38.8.6",
+    "electron-builder": "26.14.0",
     "electron-debug": "^3.0.1",
     "electron-devtools-installer": "^3.0.0",
     "identity-obj-proxy": "^3.0.0",

quasar.config.ts

@@ -92,7 +92,6 @@ export default defineConfig((ctx: QuasarContext) => {
                         'floating-vue',
                         'vue-i18n',
                         'lodash.debounce',
-                        'moment',
                         'quill',
                         'sanitize-filename',
                         'vuedraggable',

src-electron/preload/hooks-preload.ts

@@ -0,0 +1,5 @@
+import { ipcRenderer } from 'electron';
+
+export function once(hookName: string, callback: Function) {
+    ipcRenderer.once(hookName, (event, ...args) => callback(...args));
+}

src/App.vue

@@ -6,7 +6,33 @@
                     <router-view />
                 </div>
             </main>
-            <div id="activity-bar"></div>
+            <div id="activity-bar">
+                <div id="activity-bar__left"></div>
+                <div id="activity-bar__right">
+                    <div>
+                        <ActivityDropdown>
+                            <button type="button" class="activity-bar__action"
+                                :aria-label="`${t('metadata.name', 0, { locale })}`"
+                            >
+                                <i class="fas fa-globe-europe"></i> {{ locale }}
+                            </button>
+                            <template #popper>
+                            <ul class="menu-list">
+                                <li v-for="lang in availableLocales" :key="`locale-select-${lang}`">
+                                    <a v-close-popper @click="() => LocaleManager.save(lang)">
+                                        <div class="locale-list__item">
+                                            <span class="locale-list__text">{{ lang }} ({{ t('metadata.name', 0, {locale: lang}) }})</span>
+                                            <span class="locale-list__divider"></span>
+                                            <span class="locale-list__tag tag is-warning" v-if="((messages[lang]?.metadata as any).wip || '').length > 0">{{ t('metadata.wip', 0, {locale: lang}) }}</span>
+                                        </div>
+                                    </a>
+                                </li>
+                            </ul>
+                            </template>
+                        </ActivityDropdown>
+                    </div>
+                </div>
+            </div>
         </div>
         <ErrorModal />
     </div>
@@ -59,13 +85,16 @@ import { ProtocolProviderImplementation } from './providers/generic/protocol/Pro
 import { provideProtocolImplementation } from './providers/generic/protocol/ProtocolProvider';
 import GameImageProvider, { provideGameImageImplementation } from './providers/generic/image/GameImageProvider';
 import { GameImageProviderImplementation } from './r2mm/image/GameImageProviderImpl';
-import BreadcrumbNavigator from 'components/breadcrumbs/BreadcrumbNavigator.vue';
+import { useI18n } from 'vue-i18n';
+import { ActivityDropdown } from './components/all';
+import LocaleManager from './r2mm/manager/LocaleManager';
 
 const store = baseStore;
 const router = useRouter();
 provideStoreImplementation(() => store);
 
 const quasar = useQuasar();
+const { t, locale, availableLocales, messages } = useI18n();
 
 document.addEventListener('auxclick', e => {
     const target = e.target! as any;
@@ -109,6 +138,8 @@ BindLoaderImpl.bind();
 onMounted(async () => {
     const settings: ManagerSettings = await store.dispatch('resetActiveGame');
 
+    await LocaleManager.apply();
+
     hookBackgroundUpdateThunderstoreModList(router);
     hookModInstallingViaProtocol(router);
     await checkCdnConnection();
@@ -201,5 +232,29 @@ main {
         gap: 0.5rem;
         overflow: hidden;
     }
+
+    &__left {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.375rem;
+    }
+
+    &__right {
+        display: flex;
+        flex-direction: row-reverse;
+        gap: 1rem;
+        align-items: center;
+    }
+}
+
+.locale-list__item {
+    display: flex;
+    place-items: center;
+
+    .locale-list__divider {
+        flex: 1;
+    }
 }
 </style>

src/boot/i18n.ts

@@ -1,15 +1,5 @@
-import { createI18n } from 'vue-i18n';
-import messages from '../i18n';
 import { defineBoot } from '#q-app/wrappers';
-// You'll need to create the src/i18n/index.js/.ts file too
-
-const i18n = createI18n({
-    locale: 'en-US',
-    globalInjection: true,
-    allowComposition: true,
-    legacy: false,
-    messages,
-})
+import { i18n } from '../i18n/instance';
 
 // @ts-ignore
 export default defineBoot(async ({ app }) => {

src/components/ExpandableCard.vue

@@ -6,8 +6,8 @@
                     <header class='card-header is-shadowless' :id='id'>
                         <div class='card-header-icon mod-logo' v-if="image !== ''">
                             <figure class='image is-48x48 image-parent'>
-                                <img :src='image' alt='Mod Logo' class='image-overlap'/>
-                                <img v-if="store.state.profile.funkyMode" :src='ProtocolProvider.getPublicAssetUrl("/funky_mode.png")' alt='Funky mode' class='image-overlap'/>
+                                <img :src='image' :alt="t('translations.pages.manager.installed.expandableCard.imageAltText')" class='image-overlap'/>
+                                <img v-if="store.state.profile.funkyMode" :src='ProtocolProvider.getPublicAssetUrl("/funky_mode.png")' :alt="t('translations.pages.manager.installed.expandableCard.funkyModeAltText')" class='image-overlap'/>
                             </figure>
                         </div>
                         <span ref="title" class='card-header-title expandable-card__title'>
@@ -16,12 +16,12 @@
                         <slot name='other-icons'></slot>
                         <!-- Allow movement of mod order -->
                         <a v-if='showSort' class='card-header-icon handle'>
-                            <i class="fas fa-grip-vertical" v-tooltip.left="'Drag to reorder'"></i>
+                            <i class="fas fa-grip-vertical" :v-tooltip.left="t('translations.pages.manager.installed.expandableCard.tooltips.dragToReorder')"></i>
                         </a>
                         <a class='card-header-icon'>
                             <span class='icon'>
-                                <i class='fas fa-angle-right' aria-hidden='true' v-if='!visible' v-tooltip.left="'Expand'"></i>
-                                <i class='fas fa-angle-down' aria-hidden='true' v-if='visible' v-tooltip.left="'Collapse'"></i>
+                                <i class='fas fa-angle-right' aria-hidden='true' v-if='!visible' v-tooltip.left="t('translations.pages.manager.installed.expandableCard.tooltips.expand')"></i>
+                                <i class='fas fa-angle-down' aria-hidden='true' v-if='visible' v-tooltip.left="t('translations.pages.manager.installed.expandableCard.tooltips.collapse')"></i>
                             </span>
                         </a>
                     </header>
@@ -45,9 +45,11 @@
 import { computed, onMounted, ref, watchEffect } from 'vue';
 import { getStore } from '../providers/generic/store/StoreProvider';
 import { State } from '../store';
+import { useI18n } from "vue-i18n";
 import ProtocolProvider from '../providers/generic/protocol/ProtocolProvider';
 
 const store = getStore<State>();
+const { t } = useI18n();
 
 type ExpandableCardProps = {
     image?: string;

src/components/ModListUpdateBanner.vue

@@ -1,9 +1,13 @@
 <script lang="ts" setup>
 import R2Error from '../model/errors/R2Error';
+import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
 import { getStore } from '../providers/generic/store/StoreProvider';
 import { State } from '../store';
 
+
+const { t } = useI18n();
+
 const store = getStore<State>();
 
 const isModListLoaded = computed<boolean>(() => store.state.tsMods.modsLastUpdated !== undefined);
@@ -26,24 +30,24 @@ function openErrorModal() {
     <div v-if="!isModListLoaded" id="mod-list-update-banner" class="margin-bottom">
         <div class="notification is-warning margin-right">
             <span v-if="isUpdateInProgress">
-                {{ store.state.tsMods.thunderstoreModListUpdateStatus }}
+                {{ t(`translations.modListStatus.${store.state.tsMods.thunderstoreModListUpdateStatus}`) }}
             </span>
             <span v-else-if="updateError">
-                Error refreshing the mod list.
-                <a @click="openErrorModal">View error details</a>.
+                {{ t('translations.banners.modListUpdate.error') }}
+                <a @click="openErrorModal">{{ t('translations.banners.modListUpdate.viewDetails') }}</a>.
                 <br />
-                The manager will keep trying to refresh the mod list in the background.
+                {{ t('translations.banners.modListUpdate.willKeepTrying') }}
             </span>
             <span v-else-if="store.getters['download/activeDownloadCount'] > 0">
-                An error occurred when refreshing the mod list from Thunderstore.<br />
-                However, the mod list can't be refreshed while the are mod downloads in progress.<br />
-                Please wait for the downloads to finish before continuing.
-            </span>
-            <span v-else>
-                An error occurred when refreshing the mod list from Thunderstore.
-                Would you like to
-                <a @click="updateModList">try again now</a>?
+                {{ t('translations.banners.modListUpdate.errorOccurred') }}<br />
+                {{ t('translations.banners.modListUpdate.blockedByDownloads') }}<br />
+                {{ t('translations.banners.modListUpdate.waitForDownloads') }}
             </span>
+            <i18n-t v-else tag="span" keypath="translations.banners.modListUpdate.retryPrompt">
+                <template v-slot:retryAction>
+                    <a @click="updateModList">{{ t('translations.banners.modListUpdate.retryAction') }}</a>
+                </template>
+            </i18n-t>
         </div>
     </div>
 </template>

src/components/ModalCard.vue

@@ -16,11 +16,15 @@
                 </footer>
             </template>
         </div>
-        <button v-if="canClose" class="modal-close is-large" aria-label="close" @click="closeModal"/>
+        <button v-if="canClose" class="modal-close is-large" :aria-label="t('translations.modals.actions.close')" @click="closeModal"/>
     </div>
 </template>
 
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
 type ModalCardProps = {
     id: string;
     isActive?: boolean;

src/components/SettingsLoader.vue

@@ -5,45 +5,40 @@
         <div v-if="phase > PHASES.ERROR_STATES" class="modal z-top is-active">
             <div class="modal-content">
                 <div class="notification is-danger">
-                    <h3 class="title">Error</h3>
+                    <h3 class="title">{{ t('translations.modals.error.title') }}</h3>
                     <h5 class="title is-5">{{error && error.name}}</h5>
                     <p>{{error && error.message}}</p>
                     <br />
-                    <h5 class="title is-5">Suggestion</h5>
+                    <h5 class="title is-5">{{ t('translations.modals.error.suggestion') }}</h5>
 
                     <p v-if="phase === PHASES.GAME_FAILED">
-                        This is a problem with the mod manager itself.
-                        If there's a newer version of the manager
-                        available, try installing it.
+                        {{ t('translations.modals.settingsLoader.managerProblem') }}
                     </p>
 
                     <div v-else-if="phase === PHASES.SETTINGS_FAILED">
                         <p>
-                            Loading of local user settings failed. You
-                            can use the button below to reset the
-                            settings, but note that all settings for all
-                            games will be lost and this can't be undone.
+                            {{ t('translations.modals.settingsLoader.loadFailed') }}
                         </p>
                         <br />
                         <button @click="resetSettings" :disabled="resettingInProgress" class="button is-white">
-                            Reset settings
+                            {{ t('translations.modals.settingsLoader.resetAction') }}
                         </button>
                     </div>
 
-                    <p v-else-if="phase === PHASES.RESET_FAILED">
-                        Resetting of the settings failed. You can still
-                        try to reset the settings manually by following
-                        these
-                        <a @click="openLink('https://github.com/ebkr/r2modmanPlus/wiki/Error:-White-or-blank-game-select-screen-on-startup#corrupted-settings-on-update')">
-                            instructions.
-                        </a>
-                    </p>
+                    <i18n-t
+                        v-else-if="phase === PHASES.RESET_FAILED"
+                        tag="p"
+                        keypath="translations.modals.settingsLoader.resetFailed"
+                    >
+                        <template v-slot:instructionsLink>
+                            <a @click="openLink('https://github.com/ebkr/r2modmanPlus/wiki/Error:-White-or-blank-game-select-screen-on-startup#corrupted-settings-on-update')">
+                                {{ t('translations.modals.settingsLoader.instructionsLinkText') }}
+                            </a>
+                        </template>
+                    </i18n-t>
 
                     <p v-else-if="phase === PHASES.RETRY_FAILED">
-                        Locally stored settings were reset, but that
-                        didn't solve the issue with loading the
-                        settings. If there's a newer version of the
-                        manager available, try installing it.
+                        {{ t('translations.modals.settingsLoader.resetDidNotHelp') }}
                     </p>
                 </div>
             </div>
@@ -53,6 +48,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import R2Error from "../model/errors/R2Error";
 import Game from "..//model/game/Game";
@@ -77,6 +73,7 @@ type SettingsLoaderType = {
 }
 
 const props = defineProps<SettingsLoaderType>();
+const { t } = useI18n();
 
 const error = ref<R2Error|null>(null);
 const phase = ref<PHASES>(PHASES.INITIAL);

src/components/banner/ConcerningPackageBanner.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
 
 import { getStore } from '@r2/providers/generic/store/StoreProvider';
+import { useI18n } from 'vue-i18n';
 import { State } from '@r2/store';
 import { useConcerningPackageComposable } from '@r2/components/composables/ConcerningPackageComposable';
 
+
+const { t } = useI18n();
+
 const store = getStore<State>();
 const { hasConcerningPackages } = useConcerningPackageComposable();
 
@@ -14,7 +18,7 @@ function addUnlinkedFilter() {
 
 <template>
     <div class="notification is-concern margin-right" v-show="hasConcerningPackages">
-        <span>You have mods that can no longer be found on Thunderstore.</span> <a href="#" @click.stop.prevent="addUnlinkedFilter">Click here to review packages.</a>
+        <span>{{ t('translations.banners.concerningPackage.text') }}</span> <a href="#" @click.stop.prevent="addUnlinkedFilter">{{ t('translations.banners.concerningPackage.action') }}</a>
     </div>
 </template>