Merge pull request 'Feat(i18n): make language a setting' (#185 ) from feature/make-language-a-setting into main

Reviewed-on: #185 Reviewed-by: Jakob Gregory
refactor(i18n): move locale updater to language switch button
2026-08-07 11:44:32 +02:00 · 2026-08-07 02:10:12 +02:00 · 2026-08-07 01:04:19 +02:00 · 2026-08-07 00:52:58 +02:00 · 2026-08-07 00:51:00 +02:00 · 2026-08-07 00:50:13 +02:00
29 changed files with 664 additions and 168 deletions
@@ -21,8 +21,42 @@ limitations under the License.
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="theme-color" content="#0158D2" />
        <title>Seekra</title>
+        <noscript>
+            <style>
+                body {
+                    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+                }
+
+                a {
+                    color: #000;
+                    text-decoration: none;
+                }
+
+                a:hover {
+                    text-decoration: underline;
+                }
+            </style>
+        </noscript>
    </head>
    <body>
+        <noscript>
+            <h1>
+                Seekra
+            </h1>
+            <p>
+                You need to enable JavaScript to use Seekra.
+            </p>
+            <section>
+                <h2>Legal Content</h2>
+                <ul>
+                    <li>
+                        <a href="https://assets.seekra.jcloud-services.ddns.net/2026-08-04-76a067e/legal/legal_notice.html">
+                            Legal Notice
+                        </a>
+                    </li>
+                </ul>
+            </section>
+        </noscript>
        <div id="app"></div>
        <script type="module" src="/src/main.js"></script>
    </body>
@@ -18,9 +18,11 @@ limitations under the License.
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';

+import { LANGUAGE_PATH } from './config/featureSettings.js';
 import { updatePageTitle } from './router';
 import { useSettings } from './features/settings/composables/useSettings.js';
-import { computed, watch, watchEffect } from 'vue';
+import { setLocale } from './i18n';
+import { computed, onMounted, watch, watchEffect } from 'vue';
 import { useRoute } from 'vue-router';

 const route = useRoute();
@@ -51,6 +53,10 @@ watch(colorScheme, (newColorScheme) => {
 updateColorScheme(colorScheme.value);

 watchEffect(() => updatePageTitle(route));
+
+onMounted(() => {
+    setLocale(getSetting(LANGUAGE_PATH));
+});
 </script>

 <template>
@@ -0,0 +1,17 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const LANGUAGE_PATH = ['general', 'language'];
@@ -40,8 +40,20 @@ const copyrightPeriod =
            </RouterLink>
            <LanguageSwitchButton />
        </div>
-        <div class="footer-segment">
-            &copy; {{ copyrightPeriod }} Seekra
+        <div class="footer-segment legal-segment">
+            <div></div>
+            <div class="copyright-notice">
+                &copy; {{ copyrightPeriod }} Seekra
+            </div>
+            <div class="legal-links">
+                <RouterLink
+                    :to="{ name: 'legalNotice' }"
+                    class="link"
+                    :title="t('legal.notice.title')"
+                >
+                    {{ t('legal.notice.title') }}
+                </RouterLink>
+            </div>
        </div>
    </footer>
 </template>
@@ -64,4 +76,31 @@ const copyrightPeriod =
 .global-footer a {
    color: var(--dark);
 }
+
+.legal-segment {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    text-align: center;
+}
+
+.copyright-notice {
+    justify-self: center;
+}
+
+.legal-links {
+    justify-self: end;
+}
+
+@media (max-width: 48rem) {
+    .legal-segment {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0;
+    }
+
+    .legal-links {
+        margin-top: 0.8em;
+    }
+}
 </style>
@@ -17,23 +17,25 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';

-import { ref } from 'vue';
+import { LANGUAGE_PATH } from '@/config/featureSettings';
+import { useSettings } from '@/features/settings/composables/useSettings';
+import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { loadLanguage, LANGUAGES_RTL, SUPPORTED_LANGUAGES } from '@/i18n';
+import { setLocale, SUPPORTED_LANGUAGES } from '@/i18n';

 const { t, locale } = useI18n();
+const { setSetting, getSetting } = useSettings();

 const isOpen = ref(false);
 const languageDropdown = ref(null);

-async function selectLanguage(code) {
-    await loadLanguage(code);
-    localStorage.setItem('locale', code);
-    document.documentElement.lang = code;
-    document.documentElement.dir = LANGUAGES_RTL.includes(code) ? 'rtl' : 'ltr';
+const selectLanguage = function selectLanguage (code) {
+    setSetting(LANGUAGE_PATH, code);
    close();
 };

+watch(() => getSetting(LANGUAGE_PATH), setLocale);
+
 const close = function () {
    document.removeEventListener('click', closeWrapperOnClickOutsite);
    isOpen.value = false;
@@ -14,41 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { expect, test, describe, vi, beforeEach } from 'vitest';
-import { mount } from '@vue/test-utils';
+import { LANGUAGE_PATH } from '@/config/featureSettings.js';
+import { useSettings } from '@/features/settings/composables/useSettings.js';
+import { mountComponent } from '@/test-utils/mountComponent.js';
+import { expect, test, describe } from 'vitest';
 import LanguageSwitchButton from '../LanguageSwitchButton.vue';
-import { loadLanguage } from '@/i18n';

-vi.mock('@/i18n', () => ({
-    loadLanguage: vi.fn(() => Promise.resolve()),
-    LANGUAGES_RTL: ['ar', 'he'],
-    SUPPORTED_LANGUAGES: ['en', 'de', 'ar']
-}));
-
-vi.mock('vue-i18n', () => ({
-    useI18n: () => ({
-        t: (key) => key,
-        locale: { value: 'de' }
-    })
-}));
-
-vi.mock('@/features/icons/components/Icon.vue', () => ({
-    default: {
-        name: 'Icon',
-        template: '<span>Icon</span>'
-    }
-}));
+const getWrapper = function getWrapper () {
+    return mountComponent(LanguageSwitchButton);
+};

 describe('LanguageSwitchButton', () => {
-    beforeEach(() => {
-        vi.clearAllMocks();
-        localStorage.clear();
-        document.documentElement.lang = '';
-        document.documentElement.dir = '';
-    });
-
    test('renders correctly with initial state closed', () => {
-        const wrapper = mount(LanguageSwitchButton);
+        const wrapper = getWrapper();
        
        expect(wrapper.find('.language-button').exists()).toBe(true);
        expect(wrapper.find('.language-dropdown').exists()).toBe(false);
@@ -56,7 +34,7 @@ describe('LanguageSwitchButton', () => {
    });

    test('opens the dropdown when language button is clicked', async () => {
-        const wrapper = mount(LanguageSwitchButton);
+        const wrapper = getWrapper();
        const button = wrapper.find('.language-button');
        
        await button.trigger('click');
@@ -65,33 +43,28 @@ describe('LanguageSwitchButton', () => {
        expect(button.attributes('aria-expanded')).toBe('true');
    });

-    const languageTestCases = [
-        { code: 'en', expectedDir: 'ltr' },
-        { code: 'de', expectedDir: 'ltr' },
-        { code: 'ar', expectedDir: 'rtl' }
-    ];
+    test('sets the language when clicking it', async () => {
+        const { getSetting } = useSettings();

-    test.for(languageTestCases)('selectLanguage($code) sets localStorage, html attributes and changes layout direction to $expectedDir', async ({ code, expectedDir }) => {
-        const wrapper = mount(LanguageSwitchButton);
+        const wrapper = getWrapper();
        
        await wrapper.find('.language-button').trigger('click');
        
        const options = wrapper.findAll('.language-dropdown li');
-        const optionToClick = options.find(opt => opt.text().includes(code));

-        await optionToClick.trigger('click');
+        const enOption = options.find(opt => opt.text().includes('en'));
+        await enOption.trigger('click');
+        expect(getSetting(LANGUAGE_PATH)).toBe('en');
+        expect(wrapper.find('.language-dropdown').exists()).toBe(false);

-        expect(loadLanguage).toHaveBeenCalledWith(code);
-        expect(localStorage.getItem('locale')).toBe(code);
-        expect(document.documentElement.lang).toBe(code);
-        expect(document.documentElement.dir).toBe(expectedDir);
+        const deOption = options.find(opt => opt.text().includes('de'));
+        await deOption.trigger('click');
+        expect(getSetting(LANGUAGE_PATH)).toBe('de');
        expect(wrapper.find('.language-dropdown').exists()).toBe(false);
    });

    test('closes the dropdown when clicking outside the component', async () => {
-        const wrapper = mount(LanguageSwitchButton, {
-            attachTo: document.body
-        });
+        const wrapper = getWrapper();

        await wrapper.find('.language-button').trigger('click');
        expect(wrapper.find('.language-dropdown').exists()).toBe(true);
@@ -0,0 +1,51 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { getNavigatorLanguage } from '../navigatorLanguage';
+import { describe, expect, test } from 'vitest';
+
+describe('navigatorLanguage', () => {
+    test.for([
+        { navigatorLanguage: 'en',                      expected: 'en'},
+        { navigatorLanguage: 'de',                      expected: 'de'},
+        { navigatorLanguage: 'fr',                      expected: 'fr'},
+
+        { navigatorLanguage: 'en-US',                   expected: 'en'},
+        { navigatorLanguage: 'en-AU',                   expected: 'en'},
+        { navigatorLanguage: 'de-DE',                   expected: 'de'},
+        { navigatorLanguage: 'fr-FR',                   expected: 'fr'},
+
+        { navigatorLanguage: 'en-us',                   expected: 'en'},
+        { navigatorLanguage: 'en-au',                   expected: 'en'},
+        { navigatorLanguage: 'de-de',                   expected: 'de'},
+        { navigatorLanguage: 'fr-fr',                   expected: 'fr'},
+
+        { navigatorLanguage: 'zh-Hans-CN',              expected: 'zh'},
+        { navigatorLanguage: 'zh-Hant-TW',              expected: 'zh'},
+        { navigatorLanguage: 'uz-Latn-UZ',              expected: 'uz'},
+
+        { navigatorLanguage: 'en-US-u-ca-gregory',      expected: 'en'},
+        { navigatorLanguage: 'de-DE-u-co-phonebk',      expected: 'de'},
+        { navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', expected: 'zh'}
+    ])('returns language $expected with navigator language $navigatorLanguage', ({ navigatorLanguage, expected }) => {
+        Object.defineProperty(navigator, 'language', {
+            value: navigatorLanguage,
+            configurable: true
+        });
+
+        expect(getNavigatorLanguage()).toBe(expected);
+    });
+});
@@ -14,9 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-export default function getCurrentLanguage () {
-    const saved = localStorage.getItem('locale');
-    if (saved) return saved;
+export const getNavigatorLanguage = function getNavigatorLanguage () {
    const locale = new Intl.Locale(navigator.language);
    return locale.language;
 };
@@ -0,0 +1,22 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export class FetchError extends Error {
+    constructor (message) {
+        super(message);
+        this.name = 'FetchError';
+    };
+};
@@ -0,0 +1,110 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FetchError } from '../../errors';
+import { getLegalNotice } from '../fetchLegalContent';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+let fetchSpy;
+
+beforeEach(() => {
+    fetchSpy = vi.spyOn(globalThis, 'fetch');
+});
+
+afterEach(() => {
+    fetchSpy.mockRestore();
+});
+
+const exampleHtml = `<h1>Heading</h1>
+<p>
+    <a>...</a>
+</p>`;
+
+const exampleHtmlWithLinkClass = `<h1>Heading</h1>
+<p>
+    <a class="link">...</a>
+</p>`;
+const exampleHtmlDocument = `<html>
+    <head>
+        <title>Legal Notice</title>
+    </head>
+    <body>
+        ${exampleHtml}
+    </body>
+</html>`;
+const exampleHtmlDocumentWithMain = `<html>
+    <head>
+        <title>Legal Notice</title>
+    </head>
+    <body>
+        <main>
+            ${exampleHtml}
+        </main>
+    </body>
+</html>`;
+
+describe('fetchLegalContent', () => {
+    describe('getLegalNotice', () => {
+        describe('success', () => {
+            test('returns HTML body', async () => {
+                fetchSpy.mockResolvedValue(
+                    new Response(exampleHtmlDocument)
+                );
+
+                expect(
+                    (await getLegalNotice()).trim()
+                ).toBe(exampleHtmlWithLinkClass);
+            });
+
+            test('returns HTML <main>', async () => {
+                fetchSpy.mockResolvedValue(
+                    new Response(exampleHtmlDocumentWithMain)
+                );
+
+                expect(
+                    (await getLegalNotice()).trim()
+                ).toBe(exampleHtmlWithLinkClass);
+            });
+
+            test('does not fail on success status code', async () => {
+                fetchSpy.mockResolvedValue(
+                    new Response(null, { status: 206 })
+                );
+
+                await getLegalNotice();
+            });
+        });
+
+        describe('error', () => {
+            test('throws FetchError when fetch fails', async () => {
+                fetchSpy.mockRejectedValue(new TypeError());
+                await expect(getLegalNotice()).rejects.toThrow(FetchError);
+            });
+
+            test('throws FetchError on HTTP error', async () => {
+                fetchSpy.mockResolvedValue(
+                    new Response(null, { status: 404 })
+                )
+                await expect(getLegalNotice()).rejects.toThrow(FetchError);
+            });
+
+            test('does not throw FetchError when fetch throws another error than TypeError', async () => {
+                fetchSpy.mockRejectedValue(new Error());
+                await expect(getLegalNotice()).rejects.toThrow(Error);
+            });
+        });
+    });
+});
@@ -0,0 +1,44 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FetchError } from '../errors';
+import { getAssetsUrl } from '@/config/env';
+
+const fetchHtml = async function fetchHtml (url, options) {
+    let response;
+    try {
+        response = await fetch(url, options);
+    } catch (err) {
+        if (err instanceof TypeError) throw new FetchError(err);
+        else throw err;
+    }
+    if (response.ok) return await response.text();
+    else throw new FetchError();
+};
+
+export const getLegalNotice = async function getLegalNotice () {
+    const legalNoticeUrl = new URL('legal/legal_notice.html', getAssetsUrl()).href;
+    const html = await fetchHtml(legalNoticeUrl);
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+
+    const legalNoticeContainer = doc.querySelector('main') ?? doc.body;
+    legalNoticeContainer.querySelectorAll('a').forEach(
+        (link) => link.classList.add('link')
+    );
+    return legalNoticeContainer.innerHTML;
+};
@@ -0,0 +1,61 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import { getLegalNotice } from '../services/fetchLegalContent';
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const loading = ref(true);
+const legalNoticeError = ref(null);
+const legalNoticeHtml = ref(null);
+onMounted(async () => {
+    try {
+        legalNoticeHtml.value = await getLegalNotice();
+    } catch {
+        legalNoticeError.value = 'legal.notice.loadError';
+    } finally {
+        loading.value = false;
+    }
+});
+</script>
+
+<template>
+    <div class="main-content-padding legal-notice-container">
+        <header class="header">
+            <h1>
+                {{ t('legal.notice.title') }}
+            </h1>
+        </header>
+        <main>
+            <div class="legal-notice-loading" v-if="loading">
+                {{ t('loading') }}
+            </div>
+            <div class="error" v-else-if="legalNoticeError">
+                {{ t(legalNoticeError) }}
+            </div>
+            <div class="legal-notice" v-html="legalNoticeHtml" v-else></div>
+        </main>
+    </div>
+</template>
+
+<style scoped>
+.header h1 {
+    margin-top: 0;
+}
+</style>
@@ -0,0 +1,78 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FetchError } from '../../errors.js';
+import LegalNoticeView from '../LegalNoticeView.vue';
+import { mountComponent } from '@/test-utils/mountComponent';
+import { flushPromises } from '@vue/test-utils';
+import { afterEach, describe, expect, test, vi } from 'vitest';
+
+const getLegalNotice = vi.hoisted(() => vi.fn().mockResolvedValue('legal notice'));
+vi.mock('../../services/fetchLegalContent', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        getLegalNotice
+    };
+});
+
+afterEach(() => getLegalNotice.mockRestore());
+
+describe('LegalNoticeView', () => {
+    test('shows loading indicator', () => {
+        const wrapper = mountComponent(LegalNoticeView);
+
+        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
+        const legalNoticeError = wrapper.find('.error');
+        const legalNotice = wrapper.find('.legal-notice');
+
+        expect(legalNoticeLoading.exists()).toBe(true);
+        expect(legalNoticeError.exists()).toBe(false);
+        expect(legalNotice.exists()).toBe(false);
+    });
+
+    test('shows error', async () => {
+        getLegalNotice.mockRejectedValue(new FetchError());
+
+        const wrapper = mountComponent(LegalNoticeView);
+
+        await flushPromises();
+        await wrapper.vm.$nextTick();
+
+        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
+        const legalNoticeError = wrapper.find('.error');
+        const legalNotice = wrapper.find('.legal-notice');
+
+        expect(legalNoticeLoading.exists()).toBe(false);
+        expect(legalNoticeError.exists()).toBe(true);
+        expect(legalNotice.exists()).toBe(false);
+    });
+
+    test('shows legal notice', async () => {
+        const wrapper = mountComponent(LegalNoticeView);
+
+        await flushPromises();
+        await wrapper.vm.$nextTick();
+
+        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
+        const legalNoticeError = wrapper.find('.error');
+        const legalNotice = wrapper.find('.legal-notice');
+
+        expect(legalNoticeLoading.exists()).toBe(false);
+        expect(legalNoticeError.exists()).toBe(false);
+        expect(legalNotice.exists()).toBe(true);
+    });
+});
@@ -54,10 +54,9 @@ const props = defineProps({
 const store = useSettingsStore();

 const optionType = computed(() => props.setting.allowMultiple ? 'checkbox' : 'radio');
-const selected = ref(normalizeSelectedValue(store.get(props.path) ?? props.setting.default));
-
-watch(selected, (newValue) => {
-    store.set(props.path, newValue);
+const selected = computed({
+    get: () => normalizeSelectedValue(store.get(props.path) ?? props.setting.default),
+    set: (value) => store.set(props.path, value)
 });

 const labelId = useId();
@@ -90,6 +90,32 @@ describe('Selection', () => {
        expect(inputsChecked).toStrictEqual([false, true, false]);
    });

+    test('reacts on store change', async () => {
+        const wrapper = getWrapper({
+            options: exampleOptions,
+            piniaOptions: {
+                setupStores: () => {
+                    const store = useSettingsStore();
+                    store.set('selection', 'o1');
+                }
+            }
+        });
+        const settings = useSettingsStore();
+
+        {
+            const inputs = wrapper.findAll('input');
+            const inputsChecked = getChecked(inputs);
+            expect(inputsChecked).toStrictEqual([false, true, false]);
+        }
+        {
+            settings.set('selection', 'o2');
+            await nextTick();
+            const inputs = wrapper.findAll('input');
+            const inputsChecked = getChecked(inputs);
+            expect(inputsChecked).toStrictEqual([false, false, true]);
+        }
+    });
+
    test('shows multiple values from store', () => {
        const wrapper = getWrapper({
            options: exampleOptions,
@@ -22,7 +22,7 @@ import { beforeEach, describe, expect, test, vi } from 'vitest';
 const settingDefaultValue = vi.hoisted(() => 42);
 const settingPath = ['test', 'number'];

-vi.mock('../../settings.json', () => ({
+vi.mock('../../config.js', () => ({
    default: {
        contents: [
            {
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import settings from '../settings.json';
+import settings from '../config.js';
 import { useSettingsStore } from '../stores/settingsStore';
 import { getSettingRecursively } from '../utils/getSetting';

@@ -0,0 +1,75 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { getNavigatorLanguage } from '../i18n/utils/navigatorLanguage';
+import { fallbackLocale, SUPPORTED_LANGUAGES } from '@/i18n';
+
+let defaultLanguage;
+{
+    const navigatorLanguage = getNavigatorLanguage();
+    if (SUPPORTED_LANGUAGES.includes(navigatorLanguage)) {
+        defaultLanguage = navigatorLanguage;
+    } else {
+        defaultLanguage = fallbackLocale;
+    }
+}
+
+export default {
+    contents: [
+        {
+            name: 'general',
+            i18n: 'settings.settings.general.title',
+            content: [
+                {
+                    name: 'language',
+                    type: 'selection',
+                    i18n: 'settings.settings.general.settings.language.title',
+                    default: defaultLanguage,
+                    options: SUPPORTED_LANGUAGES.map((language) => ({
+                        name: language,
+                        i18n: `preferences.locale.languages.${language}`
+                    }))
+                }
+            ]
+        },
+        {
+            name: 'appearance',
+            i18n: 'settings.settings.appearance.title',
+            content: [
+                {
+                    name: 'colorScheme',
+                    type: 'selection',
+                    i18n: 'settings.settings.appearance.contents.colorScheme.title',
+                    default: 'auto',
+                    options: [
+                        {
+                            name: 'auto',
+                            i18n: 'settings.settings.appearance.contents.colorScheme.options.auto'
+                        },
+                        {
+                            name: 'light',
+                            i18n: 'settings.settings.appearance.contents.colorScheme.options.light'
+                        },
+                        {
+                            name: 'dark',
+                            i18n: 'settings.settings.appearance.contents.colorScheme.options.dark'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+};
@@ -1,30 +0,0 @@
-{
-    "contents": [
-        {
-            "name": "appearance",
-            "i18n": "settings.settings.appearance.title",
-            "content": [
-                {
-                    "name": "colorScheme",
-                    "type": "selection",
-                    "i18n": "settings.settings.appearance.contents.colorScheme.title",
-                    "default": "auto",
-                    "options": [
-                        {
-                            "name": "auto",
-                            "i18n": "settings.settings.appearance.contents.colorScheme.options.auto"
-                        },
-                        {
-                            "name": "light",
-                            "i18n": "settings.settings.appearance.contents.colorScheme.options.light"
-                        },
-                        {
-                            "name": "dark",
-                            "i18n": "settings.settings.appearance.contents.colorScheme.options.dark"
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-}
@@ -18,7 +18,7 @@ limitations under the License.
 import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
 import SettingsPage from '../components/SettingsPage.vue';

-import settingsConfiguration from '../settings.json';
+import settingsConfiguration from '../config.js';
 import { getSettingRecursively } from '../utils/getSetting.js';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -197,7 +197,7 @@ const settings = settingsHoisted.values();
 const originalCurrentSection = 's0';
 let currentSection = originalCurrentSection;

-vi.mock('../../settings.json', () => ({
+vi.mock('../../config.js', () => ({
    default: { contents: settingsHoisted }
 }));

@@ -15,7 +15,6 @@ limitations under the License.
 */

 import { createI18n } from 'vue-i18n';
-import getCurrentLanguage from './utils/currentLanguage';

 export const fallbackLocale = 'en';

@@ -34,7 +33,7 @@ export const SUPPORTED_LANGUAGES = [

 export const i18n = createI18n({
    legacy: false,
-    locale: getCurrentLanguage(),
+    locale: fallbackLocale,
    fallbackLocale: fallbackLocale,
    messages: {}
 });
@@ -58,3 +57,9 @@ export async function loadLanguage (locale) {

    loadedLanguages.add(locale);
 };
+
+export const setLocale = async function setLocale (locale) {
+    await loadLanguage(locale);
+    document.documentElement.lang = locale;
+    document.documentElement.dir = LANGUAGES_RTL.includes(locale) ? 'rtl' : 'ltr';
+};
@@ -74,7 +74,21 @@
                        }
                    }
                }
+            },
+            "general": {
+                "title": "Allgemein",
+                "settings": {
+                    "language": {
+                        "title": "Sprache"
+                    }
+                }
            }
        }
+    },
+    "legal": {
+        "notice": {
+            "title": "Impressum",
+            "loadError": "Das Impressum konnte nicht geladen werden."
+        }
    }
 }
@@ -74,7 +74,21 @@
                        }
                    }
                }
+            },
+            "general": {
+                "title": "General",
+                "settings": {
+                    "language": {
+                        "title": "Language"
+                    }
+                }
            }
        }
+    },
+    "legal": {
+        "notice": {
+            "title": "Legal Notice",
+            "loadError": "The legal notice could not be loaded."
+        }
    }
 }
@@ -20,7 +20,6 @@ import { createPinia } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import App from './App.vue'
 import { i18n, loadLanguage, fallbackLocale } from './i18n';
-import getCurrentLanguage from './utils/currentLanguage';
 import router from './router'
 import './styles/common.css'
 import './styles/variables/colors.css'
@@ -30,7 +29,7 @@ import rawFonts from './styles/fonts.json';
 import './styles/common.css';
 import './styles/variables/colors.css';

-import settings from './features/settings/settings.json';
+import settings from './features/settings/config.js';
 import { validateSettingsConfig } from './features/settings/utils/settingsValidator';

 (async () => {
@@ -53,7 +52,6 @@ import { validateSettingsConfig } from './features/settings/utils/settingsValida
    fonts.forEach((font) => document.fonts.add(font));

    await loadLanguage(fallbackLocale);
-    await loadLanguage(getCurrentLanguage());

    const pinia = createPinia();
    pinia.use(piniaPluginPersistedstate);
@@ -18,6 +18,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import { i18n } from '@/i18n';

 import SearchView from '../views/SearchView.vue';
+import LegalNoticeView from '@/features/legal/views/LegalNoticeView.vue';
 import SearchResultsView from '@/features/search/views/SearchResultsView.vue';
 import SettingsView from '@/features/settings/views/SettingsView.vue';
 import NotFound from '../views/NotFound.vue';
@@ -39,6 +40,14 @@ const routes = [
            title: (route) => route.query.q
        }
    },
+    {
+        path: '/legal/notice',
+        name: 'legalNotice',
+        component: LegalNoticeView,
+        meta: {
+            title: () => i18n.global.t('legal.notice.title')
+        }
+    },
    {
        path: '/settings/:rest(.*)*',
        name: 'settings',
@@ -24,6 +24,7 @@ body {

 .link {
    text-decoration: none;
+    color: var(--dark);
 }

 .link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
@@ -92,3 +93,11 @@ input {
 * {
    -webkit-tap-highlight-color: transparent;
 }
+
+.error {
+    background-color: var(--color-negative-bg);
+    border: 1px solid var(--color-negative-border);
+    padding: 1em 2em;
+    border-radius: 1.2em;
+    color: var(--white);
+}
@@ -84,6 +84,9 @@ body {
    --light-hover:          var(--light-d-2);

    --invert: invert(0);
+
+    --color-negative-bg:     oklch(59% 0.22706 29.244);
+    --color-negative-border: oklch(51% 0.22706 29.244);
 }

@media (prefers-color-scheme: dark) {
@@ -1,61 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { describe, expect, test } from 'vitest';
-import getCurrentLanguage from '../currentLanguage';
-
-describe('currentLanguage', () => {
-    test.for([
-        { navigatorLanguage: 'en',                      localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'de',                      localStorageLanguage: null, expected: 'de'},
-        { navigatorLanguage: 'fr',                      localStorageLanguage: null, expected: 'fr'},
-
-        { navigatorLanguage: 'en-US',                   localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'en-AU',                   localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'de-DE',                   localStorageLanguage: null, expected: 'de'},
-        { navigatorLanguage: 'fr-FR',                   localStorageLanguage: null, expected: 'fr'},
-
-        { navigatorLanguage: 'en-us',                   localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'en-au',                   localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'de-de',                   localStorageLanguage: null, expected: 'de'},
-        { navigatorLanguage: 'fr-fr',                   localStorageLanguage: null, expected: 'fr'},
-
-        { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: null, expected: 'zh'},
-        { navigatorLanguage: 'zh-Hant-TW',              localStorageLanguage: null, expected: 'zh'},
-        { navigatorLanguage: 'uz-Latn-UZ',              localStorageLanguage: null, expected: 'uz'},
-
-        { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'de-DE-u-co-phonebk',      localStorageLanguage: null, expected: 'de'},
-        { navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', localStorageLanguage: null, expected: 'zh'},
-
-        { navigatorLanguage: 'en',                      localStorageLanguage: 'de', expected: 'de'},
-        { navigatorLanguage: 'de-DE',                   localStorageLanguage: 'en', expected: 'en'},
-        { navigatorLanguage: 'de-de',                   localStorageLanguage: 'en', expected: 'en'},
-        { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: 'fr', expected: 'fr'},
-        { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: 'zh', expected: 'zh'}
-    ])('returns the language $expected (navigator: $navigatorLanguage; local storage: $localStorageLanguage)', ({ navigatorLanguage, localStorageLanguage, expected }) => {
-        Object.defineProperty(navigator, 'language', {
-            value: navigatorLanguage,
-            configurable: true
-        });
-
-        if (localStorageLanguage) {
-            localStorage.setItem('locale', localStorageLanguage);
-        };
-
-        expect(getCurrentLanguage()).toBe(expected);
-    });
-});
Author	SHA1	Message	Date
jakob.scheidandGitea	f4f8993e87	Merge pull request 'Feat(i18n): make language a setting' (#185 ) from feature/make-language-a-setting into main Deploy on dev / Deploy on dev (push) Successful in 39s Details Reviewed-on: #185 Reviewed-by: Jakob Gregory	2026-08-07 11:44:32 +02:00
jakob.scheid	31588b2f1c	refactor(i18n): move locale updater to language switch button	2026-08-07 02:10:12 +02:00
jakob.scheid	e964c2635f	feat(i18n): add default language error handling Set the default language to the fallback language if the navigator language is not supported.	2026-08-07 01:04:19 +02:00
jakob.scheid	0fe98bb03d	feat(i18n): set default language setting to navigator language	2026-08-07 00:52:58 +02:00
jakob.scheid	134fdabffc	feat(i18n): load language on startup	2026-08-07 00:51:00 +02:00
jakob.scheid	788bea0016	refactor(i18n): move currentLanguage utility to correct location Moved src/utils/currentLanguage.js to src/features/i18n/utils/navigatorLanguage.js and updated it to only parse the navigator language.	2026-08-07 00:50:13 +02:00
jakob.scheid	b571a68e3b	feat(i18n): use settings to set and get language	2026-08-07 00:33:17 +02:00
jakob.scheid	d5f6108f47	feat(i18n): add language settings	2026-08-07 00:33:14 +02:00
jakob.scheid	3dd9eded41	feature(settings)!: make settings configuration a JavaScript module The settings configuration is now a JavaScript module because dynamic configuration is only possible in this way and dynamic settings configuration is needed for the language as a setting.	2026-08-06 23:52:29 +02:00
jakob.scheidandGitea	8f44609702	Merge pull request 'Feat(legal): add legal notice' (#170 ) from feature/legal-notice into main Deploy on dev / Deploy on dev (push) Successful in 34s Details Reviewed-on: #170 Reviewed-by: Jakob Gregory	2026-08-06 23:43:56 +02:00
jakob.scheid	5dc3ddd549	feat(style): add style for JavaScript disabled Add inline stylesheet which is used if JavaScript is disabled.	2026-08-06 23:43:34 +02:00
jakob.scheid	f739676a1a	feat(legal): add <noscript> containing legal notice link Added a <noscript> with a link to the legal notice and a note to enable JavaScript to use Seekra. This ensures that also users with JavaScript disabled can access legal content.	2026-08-06 23:43:33 +02:00
jakob.scheid	f73e2edae7	test(legal): add test for the legal notice view Added tests for the legal notice view (LegalNoticeView.vue).	2026-08-06 23:43:33 +02:00
jakob.scheid	f7358ceb34	test(legal): add tests for getLegalNotice	2026-08-06 23:43:33 +02:00
jakob.scheid	f8d2086433	feat(legal): add legal notice loading indicator	2026-08-06 23:43:32 +02:00
jakob.scheid	7613122658	feat(legal): add legal notice error handling The legal notice view now shows an error box if the legal notice could not be loaded.	2026-08-06 23:43:32 +02:00
jakob.scheid	b27c89945f	fix(style): set link color to --dark variable This change was necessary due to the dynamically loaded legal notice. Links would have the default color without this fix.	2026-08-06 23:43:31 +02:00
jakob.scheid	d9ed16f3de	feat(legal): load and display legal notice	2026-08-06 23:43:31 +02:00
jakob.scheid	4c39fadd9a	feat(legal): add legal notice link in the footer Added a link to the legal notice in the footer and revised the layout of the last footer segment: The segment is now a grid container and the legal links (currently only the legal notice link) are displayed at the end. The copyright notice remains centered. On small screens, the legal links are displayed centered below the copyright notice.	2026-08-06 23:43:30 +02:00
jakob.scheid	dccdab0d4a	feat(legal): add route for the legal notice	2026-08-06 23:43:30 +02:00
jakob.scheidandGitea	f6cf1e9777	Merge pull request 'Fix(settings): selection reactivity' (#184 ) from fix/selection-setting-reactivity into main Deploy on dev / Deploy on dev (push) Successful in 38s Details Reviewed-on: #184 Reviewed-by: Jakob Gregory	2026-08-06 23:41:53 +02:00
jakob.scheid	53bd67b7a0	test(settings): add tests for selection reactivity	2026-08-06 23:24:09 +02:00
jakob.scheid	1f51a0b3ae	fix(settings): make selection reactive Selection now uses computed with getter and setter.	2026-08-06 23:23:21 +02:00