Opt in auto updates for translations

[tonyaellie]

What is the problem you are trying to solve with this feature?

Currently to update translations a full release has to be made, this means that it takes a relatively long time to get new translation changes.

What is the solution you are proposing?

An option to have homebox automatically check for updates to the translations and download them.

What alternatives have you considered?

Wait for releases.

Additional context

No response

Contributions

• I have searched through existing issues and feature requests to see if my idea has already been proposed.
• If this feature is accepted, I would be willing to help implement and maintain this feature.
• If this feature is accepted, I'm willing to sponsor the development of this feature.

[tonyaellie]

Dynamically fetch translation files in messages

export default defineNuxtPlugin(async ({ vueApp }) => {
  async function checkDefaultLanguage() {
    let matched = null;
    const languages = Object.getOwnPropertyNames(await messages());
    const matching = navigator.languages.filter(lang => languages.some(l => l.toLowerCase() === lang.toLowerCase()));
    if (matching.length > 0) {
      matched = matching[0];
    }
    if (!matched) {
      languages.forEach(lang => {
        const languagePartials = navigator.language.split("-")[0];
        if (lang.toLowerCase() === languagePartials) {
          matched = lang;
        }
      });
    }
    return matched;
  }
  const preferences = useViewPreferences();
  const i18n = createI18n({
    fallbackLocale: "en",
    globalInjection: true,
    legacy: false,
    locale: preferences.value.language || await checkDefaultLanguage() || "en",
    messageCompiler,
    messages: await messages(),
  });
  vueApp.use(i18n);
});

export const messages = async () => {
  const messages: Record<string, any> = {};
  // const modules = import.meta.glob("~//locales/**.json", { eager: true });
  // for (const path in modules) {
  //   const key = path.slice(9, -5);
  //   messages[key] = modules[path];
  // }
  console.log('Fetching translations...');
  const en = await (await fetch('http://localhost:3001/en.json')).json();
  console.log('Fetched translations.');
  messages['en'] = en;
  return messages;
};