frontend: rework i18n and replace all superagent calls with pankow fetcher

frontend/src/filemanager.js

@@ -1,5 +1,4 @@
 import { createApp } from 'vue';
-import { createI18n } from 'vue-i18n';
 
 import './style.css';
 
@@ -7,8 +6,7 @@ import '@fontsource/noto-sans';
 
 import { createRouter, createWebHashHistory } from 'vue-router';
 
-import { fetcher } from 'pankow';
-
+import i18n from './i18n.js';
 import FileManager from './FileManager.vue';
 import Home from './views/Home.vue';
 import Viewer from './views/Viewer.vue';
@@ -25,51 +23,10 @@ const router = createRouter({
   routes,
 });
 
-const translations = {};
-const i18n = createI18n({
-  locale: 'en', // set locale
-  fallbackLocale: 'en', // set fallback locale
-  messages: translations,
-  // will replace our double {{}} to vue-i18n single brackets
-  messageResolver: (keys, key) => {
-    let message = key.split('.').reduce((o, k) => o && o[k] || null, keys);
-
-    // fallback tr key
-    if (message === null) message = key;
-
-    return message.replaceAll('{{', '{').replaceAll('}}', '}');
-  }
-});
-
-// https://vue-i18n.intlify.dev/guide/advanced/lazy.html
-(async function loadLanguages() {
-  const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? 'https://' + import.meta.env.VITE_API_ORIGIN : '';
-
-  async function loadLanguage(lang) {
-    try {
-      const result = await fetcher.get(`${API_ORIGIN}/translation/${lang}.json`);
-      translations[lang] = result.body;
-    } catch (e) {
-      console.error(`Failed to load language file for ${lang}`, e);
-    }
-  }
-
-  await loadLanguage('en');
-
-  const locale = window.localStorage.NG_TRANSLATE_LANG_KEY;
-  if (locale && locale !== 'en') {
-    await loadLanguage(locale);
-
-    if (i18n.mode === 'legacy') {
-      i18n.global.locale = locale;
-    } else {
-      i18n.global.locale.value = locale;
-    }
-  }
-
+(async function init() {
   const app = createApp(FileManager);
 
-  app.use(i18n);
+  app.use(await i18n());
   app.use(router);
 
   app.mount('#app');