Include translations in lens

[timakro]

Currently some user-facing messages are configured in the lens options, e.g.:

            "text": "Alle Hinzufügen"

I feel like it would make sense to include these translations in lens and configure only the language (english or german) in the lens options.

Advantages of this approach would be:

• Reduces the amount of lens options
• Gets rid of duplicate translations across multiple projects that use lens

Possible issues:

• Might not be feasible for the majority of user-facing messages as many seem to be project specific. For example the chart hint texts seem to be mostly specific to CCP? Correct me if I'm wrong.

---

If we want to move forward with this approach here is my suggestion how to implement it.

I've looked into localization libraries and didn't find anything I liked. Some are no longer maintained (sveltekit-i18n, typesafe-i18n) and others pretty intrusive (Paraglide JS). I would propose an extremely simple approach of having a file german.json:

{
    "Add all": "Alle Hinzufügen",
    "Processing...": "Lädt...",
    "Results": "Ergebnisse"
}

And a function translate:

import germanTranslations from "../translations/german.json";

export function translate(englishText: keyof typeof germanTranslations): string {
    const language = get(lensOptions).language;

    switch (language) {
        case "english":
            return englishText;
        case "german":
            return germanTranslations[englishText];
    }
}

Then use it like that:

<button part="add-all-options-button" on:click={selectAllOptions}>
    {translate("Add all")}
</button>

Typescript will show an error if you are trying to translate a string that is not defined in the translations JSON file.