style: remove unnecessary blank lines whitespace characters

style: remove unnecessary semicolons after blocks
refactor(i18n): fix typo in language switch
2026-08-07 16:59:37 +02:00 · 2026-08-07 16:58:19 +02:00 · 2026-08-07 16:58:19 +02:00 · 2026-08-07 16:58:15 +02:00 · 2026-08-07 16:44:31 +02:00 · 2026-08-07 12:12:40 +02:00
94 changed files with 11198 additions and 9516 deletions
@@ -0,0 +1,16 @@
 # 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.
 VITE_ASSETS_BUILD_ID=2026-08-04-76a067e
 VITE_ASSETS_BASE_URL=https://assets.seekra.jcloud-services.ddns.net
@@ -5,3 +5,7 @@ The frontend of the search engine Seekra.
 ## Setup
 Please execute the setup script in `scripts/` for your platform when cloning the repository.
 ## Legal
 After each update to the dependencies, please run the script `scripts/generate-license-files.js` to regenerate the third-party license files.
@@ -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>
@@ -0,0 +1,58 @@
 #!/usr/bin/env node
 /*
 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 fs from 'node:fs/promises';
 import { generateLicenseFile } from 'generate-license-file';
 const packageJson = './package.json';
 const packageJsonBackup = `${packageJson}~`;
 await generateLicenseFile(
    packageJson,
    'THIRD_PARTY_LICENSES'
 );
 const pkg = JSON.parse(
    await fs.readFile(packageJson, 'utf-8')
 );
 await fs.rename(packageJson, packageJsonBackup);
 const devPackage = {
    ...pkg,
    dependencies: pkg.devDependencies ?? {},
    devDependencies: {}
 };
 /*
  The file including the dependencies for the current license file has
  to be always package.json due to a bug of generate-license file. See
    https://github.com/TobyAndToby/generate-license-file/issues/752
 */
 await fs.writeFile(
    packageJson,
    JSON.stringify(devPackage)
 );
 await generateLicenseFile(
    packageJson,
    './THIRD_PARTY_LICENSES_DEV'
 );
 await fs.rename(packageJsonBackup, packageJson);
@@ -1,3 +1,17 @@
 #!/usr/bin/env pwsh
 # 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.
 git config --local commit.template .gitmessage
@@ -1,3 +1,17 @@
 #!/usr/bin/bash
 # 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.
 git config --local commit.template .gitmessage
@@ -18,21 +18,49 @@ limitations under the License.
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
-import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
+import { LANGUAGE_PATH } from './config/featureSettings.js';
-import { ref, provide, watch } from 'vue';
+import { updatePageTitle } from './router';
 import { useSettings } from './features/settings/composables/useSettings.js';
 import { setLocale } from './i18n';
 import { computed, onMounted, watch, watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
-const { getColorScheme, updateColorScheme } = useColorScheme();
+const route = useRoute();
-const colorScheme = ref(getColorScheme());
+
-provide('colorScheme', colorScheme);
+const { getSetting } = useSettings();
-watch(colorScheme, val => updateColorScheme(val))
+const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
 const updateColorScheme = function updateColorScheme (newColorScheme) {
    document.body.style.setProperty(colorScheme, {
        auto: 'normal',
        dark: 'dark',
        light: 'light'
    });
    if (newColorScheme === 'dark') {
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
    }
    if (newColorScheme === 'auto') {
        document.body.classList.add('color-scheme-auto');
    } else {
        document.body.classList.remove('color-scheme-auto');
    }
 };
 watch(colorScheme, (newColorScheme) => {
    updateColorScheme(newColorScheme);
 });
 updateColorScheme(colorScheme.value);
 watchEffect(() => updatePageTitle(route));
 onMounted(() => {
    setLocale(getSetting(LANGUAGE_PATH));
 });
 </script>
 <template>
-    <div
+    <div id="app-wrapper">
        :style="{ colorScheme: colorScheme === 'auto' ? 'normal' : (colorScheme === 'dark' ? 'dark' : 'light')}"
        :class="{ dark: colorScheme === 'dark', 'color-scheme-auto': colorScheme === 'auto' }"
        id="app-wrapper"
    >
        <Navbar />
        <router-view class="main-content" />
@@ -46,6 +74,11 @@ watch(colorScheme, val => updateColorScheme(val))
    --main-content-padding-x: 30px;
    --main-content-padding-y: 40px;
    --main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--light-bg);
    color: var(--dark);
 }
 .main-content {
@@ -57,12 +90,4 @@ watch(colorScheme, val => updateColorScheme(val))
        --main-content-padding-x: 15px;
    }
 }
 #app-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--light-bg);
    color: var(--dark);
 }
 </style>
@@ -0,0 +1,38 @@
 <!--
 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.
 -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path
        stroke="currentColor"
        stroke-width="2"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        d="
            M6 4
            h12
            a4 4 0 0 1 4 4
            v8
            a4 4 0 0 1 -4 4
            h-12
            a4 4 0 0 1 -4 -4
            v-8
            a4 4 0 0 1 4 -4
            m2 0
            v16
        "
    />
 </svg>
@@ -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 const getAssetsUrl = function getAssetsUrl () {
    return new URL(
        `${import.meta.env.VITE_ASSETS_BUILD_ID}/`,
        import.meta.env.VITE_ASSETS_BASE_URL
    ).href;
 };
@@ -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'];
@@ -17,12 +17,14 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';
-import { inject } from 'vue';
+import { useSettings } from '@/features/settings/composables/useSettings';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 const { getSetting, setSetting } = useSettings();
-const colorScheme = inject('colorScheme');
+const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
 const colorSchemeNextMapper = {
    'light': 'dark',
@@ -39,11 +41,15 @@ const colorSchemeIconMapper = {
 const getTooltipTranslation = function (colorScheme) {
    return t(`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`);
 };
 const setColorScheme = function setColorScheme (newColorScheme) {
    setSetting(['appearance', 'colorScheme'], newColorScheme);
 };
 </script>
 <template>
    <button class="color-scheme-button"
-        @click="colorScheme = colorSchemeNextMapper[colorScheme]"
+        @click="setColorScheme(colorSchemeNextMapper[colorScheme])"
        :aria-label="getTooltipTranslation(colorScheme)"
        :title="getTooltipTranslation(colorScheme)"
    >
@@ -0,0 +1,47 @@
 /*
 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 ColorSchemeButton from '../ColorSchemeButton.vue';
 import { useSettings } from '@/features/settings/composables/useSettings.js';
 import { mountComponent } from '@/test-utils/mountComponent';
 import { describe, expect, test } from 'vitest';
 const { getSetting } = useSettings();
 const colorSchemeSettingPath = ['appearance', 'colorScheme'];
 const getWrapper = function getWrapper () {
    return mountComponent(ColorSchemeButton);
 };
 describe('ColorSchemeButton', () => {
    test('sets color scheme setting', async () => {
        const wrapper = getWrapper();
        expect(getSetting(colorSchemeSettingPath)).toBe('auto');
        const colorSchemeButton = wrapper.find('button');
        await colorSchemeButton.trigger('click');
        expect(getSetting(colorSchemeSettingPath)).toBe('light');
        await colorSchemeButton.trigger('click');
        expect(getSetting(colorSchemeSettingPath)).toBe('dark');
        await colorSchemeButton.trigger('click');
        expect(getSetting(colorSchemeSettingPath)).toBe('auto');
    });
 });
@@ -1,39 +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.
 */
 export const useColorScheme = function () {
    const getColorScheme = function () {
        let colorScheme = localStorage.getItem('colorScheme') || 'auto';
        if (!(colorScheme === 'dark' || colorScheme === 'light' || colorScheme === 'auto')) {
            colorScheme = 'auto';
        };
        return colorScheme;
    };
    const updateColorScheme = function (newScheme) {
        let actualNewScheme = newScheme;
        if (!(actualNewScheme === 'dark' || actualNewScheme === 'light' || actualNewScheme === 'auto')) {
            actualNewScheme = 'auto';
        };
        localStorage.setItem('colorScheme', actualNewScheme);
    };
    return {
        getColorScheme,
        updateColorScheme
    };
 };
@@ -21,13 +21,13 @@ import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
-const startYear = 2026
+const startYear = 2026;
-const currentYear = new Date().getFullYear()
+const currentYear = new Date().getFullYear();
 const copyrightPeriod =
    startYear === currentYear
        ? `${currentYear}`
-        : `${startYear}-${currentYear}`
+        : `${startYear}-${currentYear}`;
 </script>
@@ -40,8 +40,20 @@ const copyrightPeriod =
            </RouterLink>
            <LanguageSwitchButton />
        </div>
-        <div class="footer-segment">
+        <div class="footer-segment legal-segment">
-            &copy; {{ copyrightPeriod }} Seekra
+            <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>
@@ -54,6 +66,7 @@ const copyrightPeriod =
 .footer-segment {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: var(--padding-y);
    background-color: var(--light-bg);
@@ -63,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,29 +17,31 @@ 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) {
+const selectLanguage = function selectLanguage (code) {
-    await loadLanguage(code);
+    setSetting(LANGUAGE_PATH, code);
    localStorage.setItem('locale', code);
    document.documentElement.lang = code;
    document.documentElement.dir = LANGUAGES_RTL.includes(code) ? 'rtl' : 'ltr';
    close();
 };
 watch(() => getSetting(LANGUAGE_PATH), setLocale);
 const close = function () {
-    document.removeEventListener('click', closeWrapperOnClickOutsite);
+    document.removeEventListener('click', closeWrapperOnClickOutside);
    isOpen.value = false;
 };
-const closeWrapperOnClickOutsite = function (e) {
+const closeWrapperOnClickOutside = function (e) {
    if (languageDropdown.value) {
        if (!languageDropdown.value.contains(e.target)) {
            close();
@@ -51,7 +53,7 @@ const open = function () {
    if (!isOpen.value) {
        isOpen.value = true;
        setTimeout(() => {
-            document.addEventListener('click', closeWrapperOnClickOutsite);
+            document.addEventListener('click', closeWrapperOnClickOutside);
        }, 0);
    };
 };
@@ -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 { LANGUAGE_PATH } from '@/config/featureSettings.js';
-import { mount } from '@vue/test-utils';
+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', () => ({
+const getWrapper = function getWrapper () {
-    loadLanguage: vi.fn(() => Promise.resolve()),
+    return mountComponent(LanguageSwitchButton);
-    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>'
    }
 }));
 describe('LanguageSwitchButton.vue', () => {
    beforeEach(() => {
        vi.clearAllMocks();
        localStorage.clear();
        document.documentElement.lang = '';
        document.documentElement.dir = '';
    });
 describe('LanguageSwitchButton', () => {
    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.vue', () => {
    });
    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.vue', () => {
        expect(button.attributes('aria-expanded')).toBe('true');
    });
-    const languageTestCases = [
+    test('sets the language when clicking it', async () => {
-        { code: 'en', expectedDir: 'ltr' },
+        const { getSetting } = useSettings();
        { code: 'de', expectedDir: 'ltr' },
        { code: 'ar', expectedDir: 'rtl' }
    ];
-    test.for(languageTestCases)('selectLanguage($code) sets localStorage, html attributes and changes layout direction to $expectedDir', async ({ code, expectedDir }) => {
+        const wrapper = getWrapper();
        const wrapper = mount(LanguageSwitchButton);
        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);
+        const deOption = options.find(opt => opt.text().includes('de'));
-        expect(localStorage.getItem('locale')).toBe(code);
+        await deOption.trigger('click');
-        expect(document.documentElement.lang).toBe(code);
+        expect(getSetting(LANGUAGE_PATH)).toBe('de');
        expect(document.documentElement.dir).toBe(expectedDir);
        expect(wrapper.find('.language-dropdown').exists()).toBe(false);
    });
    test('closes the dropdown when clicking outside the component', async () => {
-        const wrapper = mount(LanguageSwitchButton, {
+        const wrapper = getWrapper();
            attachTo: document.body
        });
        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 () {
+export const getNavigatorLanguage = function getNavigatorLanguage () {
    const saved = localStorage.getItem('locale');
    if (saved) return saved;
    const locale = new Intl.Locale(navigator.language);
    return locale.language;
 };
@@ -27,16 +27,16 @@ const props = defineProps({
        type: [Number, String],
        default: 24
    }
-})
+});
 const icons = import.meta.glob('@/assets/icons/*.svg', {
    eager: true,
    import: 'default'
-})
+});
-const Icon = computed(() => icons[`/src/assets/icons/${props.name}.svg`])
+const Icon = computed(() => icons[`/src/assets/icons/${props.name}.svg`]);
-const size = computed(() => ensureUnit(props.size))
+const size = computed(() => ensureUnit(props.size));
 </script>
 <template>
@@ -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);
    });
 });
@@ -24,8 +24,8 @@ import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
-const router = useRouter()
+const router = useRouter();
-const props = defineProps(['autoSubmit'])
+const props = defineProps(['autoSubmit']);
 const submitSearch = function () {
    if (props.autoSubmit !== undefined) {
@@ -33,8 +33,8 @@ const submitSearch = function () {
            name: 'searchResults',
            query: { q: searchQuery.value }
        });
-    };
+    }
-}
+};
 </script>
 <template>
@@ -17,7 +17,7 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';
 import { useSettingsStore } from '../stores/settingsStore';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
@@ -54,21 +54,26 @@ 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));
+const selected = computed({
-
+    get: () => normalizeSelectedValue(store.get(props.path) ?? props.setting.default),
-watch(selected, (newValue, oldValue) => {
+    set: (value) => store.set(props.path, value)
    store.set(props.path, newValue);
 });
 const labelId = useId();
 </script>
 <template>
    <div>
-        <div class="label">
+        <div class="label" :id="labelId">
            {{ t(props.setting.i18n) }}
        </div>
-        <ul class="options-list">
+        <ul class="options-list" :aria-labelledby="labelId">
            <li v-for="option in props.setting.options" :key="option.name">
-                <label class="settings-button">
+                <label
                    class="settings-button"
                    :title="t(option.i18n)"
                    :aria-label="t('settings.selection.option.ariaLabel', { option: t(option.i18n) })"
                >
                    <input
                        :type="optionType"
                        :name="props.path"
@@ -16,7 +16,7 @@ limitations under the License.
 <script setup>
 import { useSettingsStore } from '../stores/settingsStore';
-import { useId } from 'vue';
+import { ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
@@ -35,8 +35,16 @@ const switchId = useId();
 const store = useSettingsStore();
 const enabled = ref(null);
 watch(store, (newStore) => {
    enabled.value = newStore.get(props.path);
 });
 // set value after registering watcher to avoid immediate value change
 enabled.value = store.get(props.path) ?? props.setting.default;
 const toggle = function toggle () {
-    store.set(props.path, !store.get(props.path));
+    enabled.value = !enabled.value;
    store.set(props.path, enabled.value);
 };
 </script>
@@ -47,7 +55,7 @@ const toggle = function toggle () {
        </label>
        <div
            class="switch-wrapper"
-            :class="{ enabled: store.get(props.path) }"
+            :class="{ enabled }"
            :title="t('settings.switch.title')"
            :aria-label="t('settings.switch.ariaLabel')"
            :aria-labelledby="labelId"
@@ -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,
@@ -211,7 +237,7 @@ describe('Selection', () => {
        const inputO2 = inputs[2];
        await check(inputO0);
-        expectSelectionValue(['o0'])
+        expectSelectionValue(['o0']);
        await uncheck(inputO0);
        expectSelectionValue([]);
@@ -32,7 +32,7 @@ const getWrapper = function getWrapper({ type = 'string', i18n = 'input', defaul
            path: 'input'
        }
    }, {}, [], piniaOptions);
-}
+};
 describe('SettingsInput', () => {
    test('uses correct input type', () => {
@@ -20,31 +20,28 @@ import { useSettingsStore } from '../../stores/settingsStore.js';
 import { expect, describe, test } from 'vitest';
 import { nextTick } from 'vue';
-const getWrapper = function getWrapper ({ i18n = 'switch1', translations = {} } = {}) {
+const getWrapper = function getWrapper ({
    i18n = 'switch1',
    defaultValue = undefined,
    translations = {},
    piniaOptions = {}
 } = {}) {
    return mountComponent(Switch, {
        attrs: {
            setting: {
                type: 'bool',
                name: 'switch',
-                i18n
+                i18n,
                default: defaultValue
            },
            path: 'switch'
        }
-    }, translations);
+    }, translations, [], piniaOptions);
 };
 describe('Switch', () => {
    test('shows value from store', async () => {
-        const wrapper = mountComponent(Switch, {
+        const wrapper = getWrapper();
            attrs: {
                setting: {
                    name: 'switch',
                    i18n: 'switch1',
                    type: 'bool'
                },
                path: 'switch'
            }
        });
        const store = useSettingsStore();
        store.set('switch', true);
@@ -62,6 +59,42 @@ describe('Switch', () => {
        expect(switchElementClasses2).not.toContain('enabled');
    });
    test('shows default value', () => {
        const wrapper = getWrapper({
            defaultValue: true
        });
        const switchElement = wrapper.find('.switch-wrapper');
        expect(switchElement.classes('enabled')).toBeTruthy();
    });
    test('shows stored value instead of default value', () => {
        const wrapper = getWrapper({
            defaultValue: true,
            piniaOptions: {
                setupStores: () => {
                    const store = useSettingsStore();
                    store.set('switch', false);
                }
            }
        });
        const switchElement = wrapper.find('.switch-wrapper');
        expect(switchElement.classes('enabled')).toBeFalsy();
    });
    test('reacts on store change', async () => {
        const wrapper = getWrapper();
        const store = useSettingsStore();
        const switchElement = wrapper.find('.switch-wrapper');
        expect(switchElement.classes('enabled')).toBeFalsy();
        store.set('switch', true);
        await nextTick();
        expect(switchElement.classes('enabled')).toBeTruthy();
    });
    test('toggles value in store', async () => {
        const wrapper = getWrapper();
@@ -84,7 +117,7 @@ describe('Switch', () => {
        const wrapper = getWrapper({
            translations: { switch1: translation }
-        })
+        });
        const label = wrapper.find('label');
        expect(label.text()).toBe(translation);
@@ -0,0 +1,91 @@
 /*
 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 { useSettings } from '../useSettings';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 const settingDefaultValue = vi.hoisted(() => 42);
 const settingPath = ['test', 'number'];
 vi.mock('../../config.js', () => ({
    default: {
        contents: [
            {
                name: 'test',
                i18n: '',
                content: [
                    {
                        type: 'number',
                        i18n: '',
                        name: 'number',
                        default: settingDefaultValue
                    },
                    {
                        type: 'bool',
                        i18n: '',
                        name: 'bool'
                    }
                ]
            }
        ]
    }
 }));
 describe('useSettings', () => {
    describe('getSetting', () => {
        test('returns stored value', () => {
            const { getSetting, setSetting } = useSettings();
            const key = ['setting'];
            const value = 42;
            setSetting(key, value);
            expect(getSetting(key)).toBe(value);
        });
        test('returns default value', () => {
            const { getSetting, setSetting } = useSettings();
            expect(getSetting(settingPath)).toBe(settingDefaultValue);
        });
        test('returns stored value instead of default value', () => {
            const { getSetting, setSetting } = useSettings();
            const value = 43;
            expect(getSetting(settingPath)).toBe(settingDefaultValue);
            setSetting(settingPath, value);
            expect(getSetting(settingPath)).toBe(value);
        });
        test('returns undefined if there is no value', () => {
            const { getSetting } = useSettings();
            expect(getSetting(['test', 'bool'])).toBeUndefined();
        });
    });
 });
 beforeEach(() => {
    setActivePinia(
        createTestingPinia({
            createSpy: vi.fn,
            stubActions: false
        })
    );
 });
@@ -0,0 +1,52 @@
 /*
 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 settings from '../config.js';
 import { useSettingsStore } from '../stores/settingsStore';
 import { getSettingRecursively } from '../utils/getSetting';
 /**
 * Provides access to the stored settings.
 */
 export const useSettings = function useSettings () {
    /**
     * Returns the value of a specific setting.
     * @param {string[]} key - The settings key.
     * @return The value of the setting.
     */
    const getSetting = function getSetting (key) {
        const settingsStore = useSettingsStore();
        return (
            settingsStore.get(key.join('.')) ??
            getSettingRecursively(
                key, settings.contents ?? []
            )?.default
        );
    };
    /**
     * Sets the value of a specific setting.
     * @param {string[]} key - The setting key.
     * @param value - The new value for the setting.
     */
    const setSetting = function setSetting (key, value) {
        const settingsStore = useSettingsStore();
        settingsStore.set(key.join('.'), value);
    };
    return { getSetting, setSetting };
 };
@@ -1,48 +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 { ref, readonly } from 'vue';
 import { loadSettingsConfig } from '../utils/settingsParser.js';
 const config  = ref(null);
 const error   = ref(null);
 const loading = ref(false);
 /**
 * Provides reactive access to the parsed settings configuration.
 * The config is loaded once and shared across all consumers.
 */
 export function useSettingsConfig() {
    async function load() {
        loading.value = true;
        error.value   = null;
        try {
            config.value = await loadSettingsConfig();
        } catch (e) {
            error.value  = e.message;
            config.value = null;
        } finally {
            loading.value = false;
        }
    }
    return {
        config:  readonly(config),
        error:   readonly(error),
        loading: readonly(loading),
        load,
    };
 }
@@ -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,3 +0,0 @@
 {
    "contents": []
 }
@@ -15,512 +15,514 @@ limitations under the License.
 */
 import { getSetting, getSettingRecursively } from '../getSetting.js';
-import { test, expect } from 'vitest';
+import { describe, test, expect } from 'vitest';
-test.for([
+describe('getSetting', () => {
-    ({ settings: [], name: '', expected: undefined }),
+    test.for([
-    ({ settings: [], name: 'a', expected: undefined }),
+        ({ settings: [], name: '', expected: undefined }),
-    ({ settings: [
+        ({ settings: [], name: 'a', expected: undefined }),
-        {
+        ({ settings: [
            {
                type: 'bool',
                name: 'a',
                i18n: 'a'
            }
        ], name: 'a', expected: {
            type: 'bool',
            name: 'a',
            i18n: 'a'
-        }
+        } })
-    ], name: 'a', expected: {
+    ])('returns $expected', ({ settings, name, expected }) => {
-        type: 'bool',
+        expect(getSetting(name, settings)).toStrictEqual(expected);
-        name: 'a',
+    });
        i18n: 'a'
    } })
 ])('returns $expected', ({ settings, name, expected }) => {
    expect(getSetting(name, settings)).toStrictEqual(expected);
 });
-const veryNestedSettingsList = [
+    const veryNestedSettingsList = [
-    {
+        {
-        type: 'bool',
+            type: 'bool',
-        name: '1a',
+            name: '1a',
-        i18n: '1a'
+            i18n: '1a'
-    },
+        },
-    {
+        {
-        type: 'section',
+            type: 'section',
-        name: '1b',
+            name: '1b',
-        i18n: '1b',
+            i18n: '1b',
-        content: [
+            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'section',
                    name: '2b',
                    i18n: '2b',
                    content: [
                        {
                            type: 'bool',
                            name: '3a',
                            i18n: '3a'
                        },
                        {
                            type: 'section',
                            name: '3b',
                            i18n: '3b',
                            content: [
                                {
                                    type: 'bool',
                                    name: '4a',
                                    i18n: '4a'
                                },
                                {
                                    type: 'section',
                                    name: '4b',
                                    i18n: '4b',
                                    content: [
                                        {
                                            type: 'bool',
                                            name: '5a',
                                            i18n: '5a'
                                        },
                                        {
                                            type: 'section',
                                            name: '5b',
                                            i18n: '5b',
                                            content: [
                                                {
                                                    type: 'bool',
                                                    name: '6a',
                                                    i18n: '6a'
                                                },
                                                {
                                                    type: 'section',
                                                    name: '6b',
                                                    i18n: '6b',
                                                    content: [
                                                        {
                                                            type: 'bool',
                                                            name: '7a',
                                                            i18n: '7a'
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ];
    test.for([
        ({ settings: [], path: ['a'], expected: undefined }),
        ({ settings: [
            {
                type: 'bool',
-                name: '2a',
+                name: '1a',
-                i18n: '2a'
+                i18n: '1a'
            }
        ], path: ['1a'], expected: {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        } }),
        ({ settings: [
            {
                type: 'bool',
                name: '1a',
                i18n: '1a'
            },
            {
                type: 'section',
-                name: '2b',
+                name: '1b',
-                i18n: '2b',
+                i18n: '1b',
                content: [
                    {
                        type: 'bool',
-                        name: '3a',
+                        name: '2a',
-                        i18n: '3a'
+                        i18n: '2a'
                    }
                ]
            }
        ], path: ['1a'], expected: {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        } }),
        ({ settings: [
            {
                type: 'bool',
                name: '1a',
                i18n: '1a'
            },
            {
                type: 'section',
                name: '1b',
                i18n: '1b',
                content: [
                    {
                        type: 'bool',
                        name: '2a',
                        i18n: '2a'
                    }
                ]
            }
        ], path: ['1b', '2a'], expected: {
            type: 'bool',
            name: '2a',
            i18n: '2a'
        } }),
        ({ settings: [
            {
                type: 'bool',
                name: '1a',
                i18n: '1a'
            },
            {
                type: 'section',
                name: '1b',
                i18n: '1b',
                content: [
                    {
                        type: 'bool',
                        name: '2a',
                        i18n: '2a'
                    },
                    {
                        type: 'number',
                        name: '2b',
                        i18n: '2b',
                        default: 42
                    }
                ]
            }
        ], path: ['1b', '2b'], expected: {
            type: 'number',
            name: '2b',
            i18n: '2b',
            default: 42
        } }),
        ({ settings: [
            {
                type: 'bool',
                name: '1a',
                i18n: '1a'
            },
            {
                type: 'section',
                name: '1b',
                i18n: '1b',
                content: [
                    {
                        type: 'bool',
                        name: '2a',
                        i18n: '2a'
                    },
                    {
                        type: 'section',
-                        name: '3b',
+                        name: '2b',
-                        i18n: '3b',
+                        i18n: '2b',
                        content: [
                            {
-                                type: 'bool',
+                                type: 'string',
-                                name: '4a',
+                                name: '3a',
-                                i18n: '4a'
+                                i18n: '3a'
                            },
                            {
                                type: 'section',
                                name: '4b',
                                i18n: '4b',
                                content: [
                                    {
                                        type: 'bool',
                                        name: '5a',
                                        i18n: '5a'
                                    },
                                    {
                                        type: 'section',
                                        name: '5b',
                                        i18n: '5b',
                                        content: [
                                            {
                                                type: 'bool',
                                                name: '6a',
                                                i18n: '6a'
                                            },
                                            {
                                                type: 'section',
                                                name: '6b',
                                                i18n: '6b',
                                                content: [
                                                    {
                                                        type: 'bool',
                                                        name: '7a',
                                                        i18n: '7a'
                                                    }
                                                ]
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
-        ]
+        ], path: ['1b', '2b', '3a'], expected: {
-    }
+            type: 'string',
-];
+            name: '3a',
-
+            i18n: '3a'
-test.for([
+        } }),
-    ({ settings: [], path: 'a', expected: undefined }),
+        ({ settings: [
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        }
    ], path: '1a', expected: {
        type: 'bool',
        name: '1a',
        i18n: '1a'
    } }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                }
            ]
        }
    ], path: '1a', expected: {
        type: 'bool',
        name: '1a',
        i18n: '1a'
    } }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                }
            ]
        }
    ], path: '1b.2a', expected: {
        type: 'bool',
        name: '2a',
        i18n: '2a'
    } }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'number',
                    name: '2b',
                    i18n: '2b',
                    default: 42
                }
            ]
        }
    ], path: '1b.2b', expected: {
        type: 'number',
        name: '2b',
        i18n: '2b',
        default: 42
    } }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'section',
                    name: '2b',
                    i18n: '2b',
                    content: [
                        {
                            type: 'string',
                            name: '3a',
                            i18n: '3a'
                        }
                    ]
                }
            ]
        }
    ], path: '1b.2b.3a', expected: {
        type: 'string',
        name: '3a',
        i18n: '3a'
    } }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'section',
                    name: '2b',
                    i18n: '2b',
                    content: [
                        {
                            type: 'string',
                            name: '3a',
                            i18n: '3a'
                        }
                    ]
                }
            ]
        }
    ], path: '1b', expected: {
        type: 'section',
        name: '1b',
        i18n: '1b',
        content: [
            {
                type: 'bool',
-                name: '2a',
+                name: '1a',
-                i18n: '2a'
+                i18n: '1a'
            },
            {
                type: 'section',
-                name: '2b',
+                name: '1b',
-                i18n: '2b',
+                i18n: '1b',
                content: [
                    {
                        type: 'string',
                        name: '3a',
                        i18n: '3a'
                    }
                ]
            }
        ]
    } }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'section',
                    name: '2b',
                    i18n: '2b',
                    content: [
                        {
                            type: 'string',
                            name: '3a',
                            i18n: '3a'
                        }
                    ]
                }
            ]
        }
    ], path: '1b.2b', expected: {
        type: 'section',
        name: '2b',
        i18n: '2b',
        content: [
            {
                type: 'string',
                name: '3a',
                i18n: '3a'
            }
        ]
    } }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'section',
                    name: '2b',
                    i18n: '2b',
                    content: [
                        {
                            type: 'string',
                            name: '3a',
                            i18n: '3a'
                        }
                    ]
                }
            ]
        }
    ], path: '1b.2b.3b', expected: undefined }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'section',
                    name: '2b',
                    i18n: '2b',
                    content: [
                        {
                            type: 'string',
                            name: '3a',
                            i18n: '3a'
                        }
                    ]
                }
            ]
        }
    ], path: '1b.2a.3a', expected: undefined }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'section',
                    name: '2b',
                    i18n: '2b',
                    content: [
                        {
                            type: 'string',
                            name: '3a',
                            i18n: '3a'
                        }
                    ]
                }
            ]
        }
    ], path: '1b.2c.3a', expected: undefined }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'section',
                    name: '2b',
                    i18n: '2b',
                    content: [
                        {
                            type: 'string',
                            name: '3a',
                            i18n: '3a'
                        }
                    ]
                }
            ]
        }
    ], path: '1a.2b.3a', expected: undefined }),
    ({ settings: [
        {
            type: 'bool',
            name: '1a',
            i18n: '1a'
        },
        {
            type: 'section',
            name: '1b',
            i18n: '1b',
            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'section',
                    name: '2b',
                    i18n: '2b',
                    content: [
                        {
                            type: 'string',
                            name: '3a',
                            i18n: '3a'
                        }
                    ]
                }
            ]
        }
    ], path: '1c.2b.3a', expected: undefined }),
    ({ settings: veryNestedSettingsList, path: '1b.2b.3b.4b.5b.6b.7a', expected: {
        type: 'bool',
        name: '7a',
        i18n: '7a'
    } }),
    ({ settings: veryNestedSettingsList, path: '1b.2b.3b.4b.5b', expected: {
        type: 'section',
        name: '5b',
        i18n: '5b',
        content: [
            {
                type: 'bool',
                name: '6a',
                i18n: '6a'
            },
            {
                type: 'section',
                name: '6b',
                i18n: '6b',
                content: [
                    {
                        type: 'bool',
-                        name: '7a',
+                        name: '2a',
-                        i18n: '7a'
+                        i18n: '2a'
                    },
                    {
                        type: 'section',
                        name: '2b',
                        i18n: '2b',
                        content: [
                            {
                                type: 'string',
                                name: '3a',
                                i18n: '3a'
                            }
                        ]
                    }
                ]
            }
-        ]
+        ], path: ['1b'], expected: {
-    } }),
+            type: 'section',
-    ({ settings: veryNestedSettingsList, path: '1b.2b.3b.4ba.5b.6b.7a', expected: undefined })
+            name: '1b',
-])('returns $expected', ({ settings, path, expected }) => {
+            i18n: '1b',
-    expect(getSettingRecursively(path, settings)).toStrictEqual(expected);
+            content: [
                {
                    type: 'bool',
                    name: '2a',
                    i18n: '2a'
                },
                {
                    type: 'section',
                    name: '2b',
                    i18n: '2b',
                    content: [
                        {
                            type: 'string',
                            name: '3a',
                            i18n: '3a'
                        }
                    ]
                }
            ]
        } }),
        ({ settings: [
            {
                type: 'bool',
                name: '1a',
                i18n: '1a'
            },
            {
                type: 'section',
                name: '1b',
                i18n: '1b',
                content: [
                    {
                        type: 'bool',
                        name: '2a',
                        i18n: '2a'
                    },
                    {
                        type: 'section',
                        name: '2b',
                        i18n: '2b',
                        content: [
                            {
                                type: 'string',
                                name: '3a',
                                i18n: '3a'
                            }
                        ]
                    }
                ]
            }
        ], path: ['1b', '2b'], expected: {
            type: 'section',
            name: '2b',
            i18n: '2b',
            content: [
                {
                    type: 'string',
                    name: '3a',
                    i18n: '3a'
                }
            ]
        } }),
        ({ settings: [
            {
                type: 'bool',
                name: '1a',
                i18n: '1a'
            },
            {
                type: 'section',
                name: '1b',
                i18n: '1b',
                content: [
                    {
                        type: 'bool',
                        name: '2a',
                        i18n: '2a'
                    },
                    {
                        type: 'section',
                        name: '2b',
                        i18n: '2b',
                        content: [
                            {
                                type: 'string',
                                name: '3a',
                                i18n: '3a'
                            }
                        ]
                    }
                ]
            }
        ], path: ['1b', '2b', '3b'], expected: undefined }),
        ({ settings: [
            {
                type: 'bool',
                name: '1a',
                i18n: '1a'
            },
            {
                type: 'section',
                name: '1b',
                i18n: '1b',
                content: [
                    {
                        type: 'bool',
                        name: '2a',
                        i18n: '2a'
                    },
                    {
                        type: 'section',
                        name: '2b',
                        i18n: '2b',
                        content: [
                            {
                                type: 'string',
                                name: '3a',
                                i18n: '3a'
                            }
                        ]
                    }
                ]
            }
        ], path: ['1b', '2a', '3a'], expected: undefined }),
        ({ settings: [
            {
                type: 'bool',
                name: '1a',
                i18n: '1a'
            },
            {
                type: 'section',
                name: '1b',
                i18n: '1b',
                content: [
                    {
                        type: 'bool',
                        name: '2a',
                        i18n: '2a'
                    },
                    {
                        type: 'section',
                        name: '2b',
                        i18n: '2b',
                        content: [
                            {
                                type: 'string',
                                name: '3a',
                                i18n: '3a'
                            }
                        ]
                    }
                ]
            }
        ], path: ['1b', '2c', '3a'], expected: undefined }),
        ({ settings: [
            {
                type: 'bool',
                name: '1a',
                i18n: '1a'
            },
            {
                type: 'section',
                name: '1b',
                i18n: '1b',
                content: [
                    {
                        type: 'bool',
                        name: '2a',
                        i18n: '2a'
                    },
                    {
                        type: 'section',
                        name: '2b',
                        i18n: '2b',
                        content: [
                            {
                                type: 'string',
                                name: '3a',
                                i18n: '3a'
                            }
                        ]
                    }
                ]
            }
        ], path: ['1a', '2b', '3a'], expected: undefined }),
        ({ settings: [
            {
                type: 'bool',
                name: '1a',
                i18n: '1a'
            },
            {
                type: 'section',
                name: '1b',
                i18n: '1b',
                content: [
                    {
                        type: 'bool',
                        name: '2a',
                        i18n: '2a'
                    },
                    {
                        type: 'section',
                        name: '2b',
                        i18n: '2b',
                        content: [
                            {
                                type: 'string',
                                name: '3a',
                                i18n: '3a'
                            }
                        ]
                    }
                ]
            }
        ], path: ['1c', '2b', '3a'], expected: undefined }),
        ({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4b', '5b', '6b', '7a'], expected: {
            type: 'bool',
            name: '7a',
            i18n: '7a'
        } }),
        ({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4b', '5b'], expected: {
            type: 'section',
            name: '5b',
            i18n: '5b',
            content: [
                {
                    type: 'bool',
                    name: '6a',
                    i18n: '6a'
                },
                {
                    type: 'section',
                    name: '6b',
                    i18n: '6b',
                    content: [
                        {
                            type: 'bool',
                            name: '7a',
                            i18n: '7a'
                        }
                    ]
                }
            ]
        } }),
        ({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4ba', '5b', '6b', '7a'], expected: undefined })
    ])('returns $expected', ({ settings, path, expected }) => {
        expect(getSettingRecursively(path, settings)).toStrictEqual(expected);
    });
 });
@@ -59,5 +59,5 @@ describe('settingsPage', () => {
        ])('returns $expected', async ({ path, expected }) => {
            expect(getSettingsPagePathSegments(path)).toStrictEqual(expected);
        });
-    })
+    });
-})
+});
@@ -21,9 +21,7 @@ export const getSetting = function getSetting (name, settings) {
 export const getSettingRecursively = function getSettingRecursively (sectionPath, settings) {
    const oneSettingsLevel = function oneSettingsLevel (cursor, acc) {
        const setting = getSetting(cursor[0], acc.content);
-        if (!setting) {
+        if (!setting) return;
            return;
        };
        if (setting.type === undefined) setting.type = 'section';
        if (setting.type === 'section') {
@@ -33,12 +31,12 @@ export const getSettingRecursively = function getSettingRecursively (sectionPath
                return oneSettingsLevel(cursor.slice(1, cursor.length), setting);
            } else {
                return setting;
-            };
+            }
        } else if (cursor.length <= 1) {
            return setting;
        } else {
            return;
-        };
+        }
    };
-    return oneSettingsLevel(sectionPath.split('.'), { content: settings });
+    return oneSettingsLevel(sectionPath, { content: settings });
 };
@@ -1,38 +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 { validateSettingsConfig } from './settingsValidator.js';
 /**
 * Loads and parses the settings configuration via dynamic import.
 * @returns {Promise<import('../types/settingsConfig').SettingsConfig>}
 */
 export async function loadSettingsConfig() {
    let raw;
    try {
        raw = (await import('../settings.json')).default;
    } catch (e) {
        throw new Error(`[settings] Failed to load settings.json: ${e.message}`);
    }
    const result = validateSettingsConfig(raw);
    if (!result.valid) {
        throw new Error(result.error);
    }
    return result.config;
 }
@@ -20,7 +20,7 @@ export const assertString = function assertString (value, path) {
    if (typeof value !== 'string' || value.trim() === '') {
        throw new Error(`[settings] "${path}" must be a non-empty string`);
    }
-}
+};
 export const assertType = function assertType (value, path) {
    if (!VALID_TYPES.includes(value)) {
@@ -28,17 +28,17 @@ export const assertType = function assertType (value, path) {
            `[settings] "${path}" has invalid type "${value}". Must be one of: ${VALID_TYPES.join(', ')}`
        );
    }
-}
+};
 export const validateSelectionOptions = function validateSelectionOptions (options, path) {
    if (!Array.isArray(options) || options.length === 0) {
        throw new Error(`[settings] "${path}.options" must be a non-empty array`);
-    };
+    }
    options.forEach((opt, i) => {
        assertString(opt.name, `${path}.options[${i}].name`);
        assertString(opt.i18n, `${path}.options[${i}].i18n`);
    });
-}
+};
 export const validateEntry = function validateEntry (entry, path) {
    assertType(entry.type, `${path}.type`);
@@ -61,7 +61,7 @@ export const validateEntry = function validateEntry (entry, path) {
        if (typeof entry.allowMultiple !== 'boolean' && entry.allowMultiple) {
            throw new Error(`[settings] "${path}.allowMultiple" must be a boolean`);
        }
-    };
+    }
    if (entry.default !== undefined) {
        if (entry.type === 'bool' && typeof entry.default !== 'boolean') {
            throw new Error(`[settings] "${path}.default" must be a boolean`);
@@ -73,15 +73,30 @@ export const validateEntry = function validateEntry (entry, path) {
            throw new Error(`[settings] "${path}.default" must be a string`);
        }
        if (entry.type === 'selection') {
-            if (typeof entry.default !== 'string') {
+            if (entry.allowMultiple) {
-                throw new Error(`[settings] "${path}.default" must be a string`);
+                if (!Array.isArray(entry.default)) {
-            };
+                    throw new Error(`[settings] "${path}.default" must be an array`);
-            if (!entry.options.map((option) => option.name).includes(entry.default)) {
+                }
-                throw new Error(`[settings] option "${path}.default" does not exist`);
+                const allOptions = entry.options.map((option) => option.name);
-            };
+                entry.default.forEach((defaultValue, index) => {
-        };
+                    if (typeof defaultValue !== 'string') {
                        throw new Error(`[settings] "${path}.default[${index}]" must be a string`);
                    }
                    if (!allOptions.includes(defaultValue)) {
                        throw new Error(`[settings] option "${path}.default[${index}]" does not exist`);
                    }
                });
            } else {
                if (typeof entry.default !== 'string') {
                    throw new Error(`[settings] "${path}.default" must be a string`);
                }
                if (!entry.options.map((option) => option.name).includes(entry.default)) {
                    throw new Error(`[settings] option "${path}.default" does not exist`);
                }
            }
        }
    }
-}
+};
 export const validateFirstLevelSection = function validateFirstLevelSection (section, path) {
    assertString(section.name);
@@ -89,7 +104,7 @@ export const validateFirstLevelSection = function validateFirstLevelSection (sec
    if (!Array.isArray(section.content)) {
        throw new Error(`[settings] "${path}.content" must be an array`);
-    };
+    }
    section.content.forEach((entry, i) =>
        validateEntry(entry, `${path}.content[${i}]`)
@@ -102,18 +117,13 @@ export const validateFirstLevelSection = function validateFirstLevelSection (sec
 * @returns {{ valid: true, config: import('../types/settingsConfig').SettingsConfig } | { valid: false, error: string }}
 */
 export function validateSettingsConfig(raw) {
-    try {
+    if (!raw || typeof raw !== 'object') {
-        if (!raw || typeof raw !== 'object') {
+        throw new Error('[settings] Config must be an object');
            throw new Error('[settings] Config must be an object');
        }
        if (!Array.isArray(raw.contents)) {
            throw new Error('[settings] "contents" must be an array');
        }
        raw.contents.forEach((entry, i) =>
            validateFirstLevelSection(entry, `contents[${i}]`)
        );
        return { valid: true, config: raw };
    } catch (e) {
        return { valid: false, error: e.message };
    }
-}
+    if (!Array.isArray(raw.contents)) {
        throw new Error('[settings] "contents" must be an array');
    }
    raw.contents.forEach((entry, i) =>
        validateFirstLevelSection(entry, `contents[${i}]`)
    );
 };
@@ -18,9 +18,9 @@ limitations under the License.
 import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
 import SettingsPage from '../components/SettingsPage.vue';
 import settingsConfiguration from '../config.js';
 import { getSettingRecursively } from '../utils/getSetting.js';
-import { loadSettingsConfig } from '../utils/settingsParser';
+import { computed, onMounted, ref, watch } from 'vue';
 import { onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
@@ -28,39 +28,31 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-const settingsLoaded = ref(false)
+const settings = settingsConfiguration.contents;
 const settings = ref([]);
 const activeSectionContent = ref({});
 const activeSection = ref(null);
-watchEffect(() => {
+const activePath = computed(() => {
    const segments = route.path
        .split('/')
        .filter(Boolean);
-    activeSection.value = segments.slice(1, segments.length).join('.');
+    return segments.slice(1, segments.length);
 });
-const updateSettings = function updateSettings () {
+const activeSection = ref(null);
-    if (activeSection.value) {
+const updateSettings = async function updateSettings () {
-        const setting = getSettingRecursively(activeSection.value, settings.value);
+    const setting = getSettingRecursively(activePath.value, settings);
-        if (!setting) {
+    if (setting) {
-            router.push('/settings');
+        activeSection.value = setting;
        } else {
            activeSectionContent.value = setting;
        };
    } else {
-        activeSectionContent.value = { content: [] };
+        await router.push('/settings');
-    };
+    }
 };
 watch(route, (newRoute) => updateSettings(newRoute));
 onMounted(updateSettings);
-onMounted(async () => {
+const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
-    settings.value = (await loadSettingsConfig()).contents;
+    if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
-    watchEffect(() => {
+};
        updateSettings();
    });
    settingsLoaded.value = true;
 });
 </script>
 <template>
@@ -71,25 +63,23 @@ onMounted(async () => {
            </h1>
        </header>
        <LeftSidebarLayout class="layout">
-            <template #sidebar>
+            <template #sidebar="{ toggleSidebar }">
                <ul class="sidebar-sections-list">
                    <li v-for="section in settings">
                        <RouterLink
                            :to="`/settings/${section.name}`"
                            class="button button-link link sidebar-section"
-                            :class="{ active: activeSection === section.name }"
+                            :class="{ active: activeSection && activeSection.name === section.name }"
                            @click="toggleSidebarIfSmallScreen(toggleSidebar)"
                        >
                            {{ t(section.i18n) }}
                        </RouterLink>
                    </li>
                </ul>
            </template>
-            <div v-if="!settingsLoaded" class="main-content--loading">
+            <div v-if="activeSection">
                {{ t('loading') }}
            </div>
            <div v-else-if="activeSection" class="main-content--loaded">
                <div class="settings-main-content">
-                    <SettingsPage :setting="activeSectionContent" :path="activeSection" />
+                    <SettingsPage :setting="activeSection" :path="activePath" />
                </div>
            </div>
            <div v-else class="main-content--no-section">
@@ -16,8 +16,8 @@ limitations under the License.
 import SettingsView from '../SettingsView.vue';
 import { mountComponent } from '@/test-utils/mountComponent.js';
 import { flushPromises } from '@vue/test-utils';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { nextTick } from 'vue';
 const settingsHoisted = vi.hoisted(() => [
    {
@@ -197,10 +197,8 @@ const settings = settingsHoisted.values();
 const originalCurrentSection = 's0';
 let currentSection = originalCurrentSection;
-vi.mock('../../utils/settingsParser', () => ({
+vi.mock('../../config.js', () => ({
-    loadSettingsConfig: vi.fn().mockResolvedValue({
+    default: { contents: settingsHoisted }
        contents: settingsHoisted
    })
 }));
 vi.mock('vue-router', async (importOriginal) => {
@@ -235,9 +233,7 @@ describe('SettingsView', () => {
    describe('sidebar', () => {
        test('shows all top-level sections', async () => {
            const wrapper = getWrapper();
-
+            await nextTick();
            await flushPromises();
            await wrapper.vm.$nextTick();
            const sidebarItems = wrapper.findAll('.sidebar-sections-list > li');
            settings.forEach((setting, index) => {
@@ -254,47 +250,27 @@ describe('SettingsView', () => {
    describe('main', () => {
        describe('correct element', () => {
            test('shows that it is loading', () => {
                const wrapper = getWrapper();
                const mainContentLoading = wrapper.find('.main-content--loading');
                const mainContentLoaded = wrapper.find('.main-content--loaded');
                const mainContentNoSection = wrapper.find('.main-content--no-section');
                expect(mainContentLoading.exists()).toBe(true);
                expect(mainContentLoaded.exists()).toBe(false);
                expect(mainContentNoSection.exists()).toBe(false);
            });
            test('shows that no section is selected', async () => {
                currentSection = '';
                const wrapper = getWrapper();
                await nextTick();
-                await flushPromises();
+                const mainContent = wrapper.find('.settings-main-content');
                await wrapper.vm.$nextTick();
                const mainContentLoading = wrapper.find('.main-content--loading');
                const mainContentLoaded = wrapper.find('.main-content--loaded');
                const mainContentNoSection = wrapper.find('.main-content--no-section');
-                expect(mainContentLoading.exists()).toBe(false);
+                expect(mainContent.exists()).toBe(false);
                expect(mainContentLoaded.exists()).toBe(false);
                expect(mainContentNoSection.exists()).toBe(true);
            });
            test('shows main content', async () => {
                const wrapper = getWrapper();
                await nextTick();
-                await flushPromises();
+                const mainContent = wrapper.find('.settings-main-content');
                await wrapper.vm.$nextTick();
                const mainContentLoading = wrapper.find('.main-content--loading');
                const mainContentLoaded = wrapper.find('.main-content--loaded');
                const mainContentNoSection = wrapper.find('.main-content--no-section');
-                expect(mainContentLoading.exists()).toBe(false);
+                expect(mainContent.exists()).toBe(true);
                expect(mainContentLoaded.exists()).toBe(true);
                expect(mainContentNoSection.exists()).toBe(false);
            });
        });
@@ -14,15 +14,64 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <script setup>
 import SidebarExpandButton from './SidebarExpandButton.vue';
 const props = defineProps({
    'expanded': {
        default: false,
        required: false,
        type: Boolean
    }
 });
 const emit = defineEmits(['toggleExpanded']);
 const toggleSidebar = function toggleSidebar () {
    emit('toggleExpanded');
 };
 </script>
 <template>
-    <nav class="sidebar">
+    <nav class="sidebar" :class="{ expanded }">
-        <slot />
+        <div class="sidebar-controls">
            <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
        </div>
        <div class="sidebar-content" v-show="props.expanded">
            <slot />
        </div>
    </nav>
 </template>
 <style scoped>
 .sidebar {
    border-right: 1px solid var(--border);
 }
 .sidebar-controls {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 1em 20px;
    padding-bottom: 0;
    margin-bottom: 8px;
 }
 .sidebar:not(.expanded) .sidebar-controls {
    padding: 1em;
 }
@media (max-width: 48rem) {
    .sidebar {
        border: none;
    }
    .sidebar:not(.expanded) .sidebar-expand-button {
        display: none;
    }
 }
 .sidebar-content {
    padding: 20px;
    padding-top: 0;
 }
 </style>
@@ -0,0 +1,41 @@
 <!--
 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 Icon from '@/features/icons/components/Icon.vue';
 const emit = defineEmits(['click']);
 const click = function click (event) {
    emit('click', event);
 };
 </script>
 <template>
    <button class="button sidebar-expand-button">
        <Icon name="sidebar-expand" @click="click" />
    </button>
 </template>
 <style scoped>
 .sidebar-expand-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    border-radius: 10px;
 }
 </style>
@@ -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: {}
 });
@@ -49,7 +48,7 @@ export async function loadLanguage (locale) {
    if (loadedLanguages.has(locale)) {
        i18n.global.locale.value = locale;
        return;
-    };
+    }
    const messages = (await import(`./locales/${locale}.json`)).default;
@@ -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';
 };
@@ -16,15 +16,34 @@ limitations under the License.
 <script setup>
 import Sidebar from '@/features/sidebar/components/Sidebar.vue';
 import SidebarExpandButton from '@/features/sidebar/components/SidebarExpandButton.vue';
 import { ref } from 'vue';
 const props = defineProps({
    'expanded': {
        default: false,
        required: false,
        type: Boolean
    }
 });
 const expanded = ref(props.expanded);
 const toggleSidebar = function toggleSidebar () {
    expanded.value = !expanded.value;
 };
 </script>
 <template>
-    <div class="layout-container">
+    <div class="layout-container" :class="{ expanded }">
-        <Sidebar>
+        <div class="sidebar-expand-button-container">
-            <slot name="sidebar" />
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
        </div>
        <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
            <slot name="sidebar" :toggleSidebar="toggleSidebar" />
        </Sidebar>
        <main class="main-content">
-            <slot />
+            <slot :toggleSidebar="toggleSidebar" />
        </main>
    </div>
 </template>
@@ -32,11 +51,53 @@ import Sidebar from '@/features/sidebar/components/Sidebar.vue';
 <style scoped>
 .layout-container {
    display: grid;
-    grid-template-columns: min(24%, 280px) 1fr;
+    grid-template-columns: calc(32px + 2em) 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "sidebar-expand sidebar-expand"
        "sidebar main-content";
    border-top: 1px solid var(--border);
 }
 .layout-container.expanded {
    grid-template-columns: min(24%, 280px) 1fr;
 }
 .sidebar-expand-button-container {
    grid-area: sidebar-expand;
    display: none;
 }
 .sidebar {
    grid-area: sidebar;
 }
@media (max-width: 48rem) {
    .layout-container {
        grid-template-columns: 0 1fr;
    }
    .layout-container.expanded {
        grid-template-columns: 1fr 0;
    }
    .layout-container:not(.expanded) .sidebar-expand-button-container {
        justify-content: end;
        display: block;
        padding: 20px;
    }
    .layout-container:not(.expanded) .main-content {
        padding-top: 0;
    }
    .layout-container.expanded .main-content {
        display: none;
    }
 }
 .main-content {
    grid-area: main-content;
    padding: 20px;
 }
 </style>
@@ -55,6 +55,40 @@
                "ariaLabel": "Geht zur Einstellungsseite {page}"
            }
        },
-        "noSectionSelected": "Kein Einstellungsabschnitt ist ausgewählt."
+        "noSectionSelected": "Kein Einstellungsabschnitt ist ausgewählt.",
        "selection": {
            "option": {
                "ariaLabel": "Wählt die Option {option} aus"
            }
        },
        "settings": {
            "appearance": {
                "title": "Erscheinungsbild",
                "contents": {
                    "colorScheme": {
                        "title": "Farbschema",
                        "options": {
                            "auto": "An Systemfarbschema anpassen",
                            "light": "Hell",
                            "dark": "Dunkel"
                        }
                    }
                }
            },
            "general": {
                "title": "Allgemein",
                "settings": {
                    "language": {
                        "title": "Sprache"
                    }
                }
            }
        }
    },
    "legal": {
        "notice": {
            "title": "Impressum",
            "loadError": "Das Impressum konnte nicht geladen werden."
        }
    }
 }
@@ -55,6 +55,40 @@
                "ariaLabel": "Goes to settings page {page}"
            }
        },
-        "noSectionSelected": "No settings section is selected."
+        "noSectionSelected": "No settings section is selected.",
        "selection": {
            "option": {
                "ariaLabel": "Selects option {option}"
            }
        },
        "settings": {
            "appearance": {
                "title": "Appearance",
                "contents": {
                    "colorScheme": {
                        "title": "Color Scheme",
                        "options": {
                            "auto": "Adapt to system color scheme",
                            "light": "Light",
                            "dark": "Dark"
                        }
                    }
                }
            },
            "general": {
                "title": "General",
                "settings": {
                    "language": {
                        "title": "Language"
                    }
                }
            }
        }
    },
    "legal": {
        "notice": {
            "title": "Legal Notice",
            "loadError": "The legal notice could not be loaded."
        }
    }
 }
@@ -38,5 +38,28 @@
            }
        }
    },
-    "slogan": "Hecho para buscar."
+    "slogan": "Hecho para buscar.",
    "settings": {
        "input": {
            "done": {
                "title": "Guardar valor",
                "ariaLabel": "Guarda el valor introducido"
            }
        },
        "switch": {
            "title": "Cambiar valor",
            "ariaLabel": "Cambia el valor"
        },
        "pages": {
            "link": {
                "ariaLabel": "Va a la página de configuración {page}"
            }
        },
        "noSectionSelected": "No se ha seleccionado ninguna sección de configuración.",
        "selection": {
            "option": {
                "ariaLabel": "Selecciona la opción {option}"
            }
        }
    }
 }
@@ -38,5 +38,28 @@
            }
        }
    },
-    "slogan": "Conçu pour chercher."
+    "slogan": "Conçu pour chercher.",
    "settings": {
        "input": {
            "done": {
                "title": "Enregistrer la valeur",
                "ariaLabel": "Enregistre la valeur saisie"
            }
        },
        "switch": {
            "title": "Basculer la valeur",
            "ariaLabel": "Bascule la valeur"
        },
        "pages": {
            "link": {
                "ariaLabel": "Accéder à la page de paramètres {page}"
            }
        },
        "noSectionSelected": "Aucune section des paramètres n'est sélectionnée.",
        "selection": {
            "option": {
                "ariaLabel": "Sélectionne l'option {option}"
            }
        }
    }
 }
@@ -38,5 +38,28 @@
            }
        }
    },
-    "slogan": "Costruito per cercare."
+    "slogan": "Costruito per cercare.",
    "settings": {
        "input": {
            "done": {
            "title": "Salva valore",
                "ariaLabel": "Salva il valore inserito"
            }
        },
        "switch": {
            "title": "Attiva/disattiva valore",
            "ariaLabel": "Attiva o disattiva il valore"
        },
        "pages": {
            "link": {
                "ariaLabel": "Vai alla pagina delle impostazioni {page}"
            }
        },
        "noSectionSelected": "Nessuna sezione delle impostazioni è selezionata.",
        "selection": {
            "option": {
                "ariaLabel": "Seleziona l'opzione {option}"
            }
        }
    }
 }
@@ -38,5 +38,28 @@
            }
        }
    },
-    "slogan": "Feito para pesquisar."
+    "slogan": "Feito para pesquisar.",
    "settings": {
        "input": {
            "done": {
            "title": "Guardar valor",
                "ariaLabel": "Guarda o valor introduzido"
            }
        },
        "switch": {
            "title": "Alternar valor",
            "ariaLabel": "Alterna o valor"
        },
        "pages": {
            "link": {
                "ariaLabel": "Ir para a página de definições {page}"
            }
        },
        "noSectionSelected": "Nenhuma secção de definições está selecionada.",
        "selection": {
            "option": {
                "ariaLabel": "Seleciona a opção {option}"
            }
        }
    }
 }
@@ -14,27 +14,50 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { createApp } from 'vue'
+import { getAssetsUrl } from './config/env';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
-import App from './App.vue'
+import App from './App.vue';
 import { i18n, loadLanguage, fallbackLocale } from './i18n';
-import getCurrentLanguage from './utils/currentLanguage';
+import router from './router';
-import router from './router'
+import './styles/common.css';
-import './styles/common.css'
+import './styles/variables/colors.css';
 import './styles/variables/colors.css'
 import './styles/variables/dimensions.css';
 import rawFonts from './styles/fonts.json';
 import './styles/common.css';
 import './styles/variables/colors.css';
 import settings from './features/settings/config.js';
 import { validateSettingsConfig } from './features/settings/utils/settingsValidator';
 (async () => {
    const fonts = rawFonts.map((font) => new FontFace(
        font.family ?? '',
        Array.isArray(font.source)
            ? font.source.map(
                (source) => `url('${source.url
                    ? new URL(source.url, getAssetsUrl()).href
                    : ''
                }') format('${source.format ?? ''}')`
            ).join(',')
            : '',
        {
            weight: font.weight ?? undefined,
            style: font.style ?? undefined
        }
    ));
    await Promise.all(fonts.map((font) => font.load()));
    fonts.forEach((font) => document.fonts.add(font));
    await loadLanguage(fallbackLocale);
    await loadLanguage(getCurrentLanguage());
    const pinia = createPinia();
    pinia.use(piniaPluginPersistedstate);
    validateSettingsConfig(settings);
    createApp(App)
        .use(router)
        .use(i18n)
@@ -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',
@@ -59,6 +68,19 @@ const router = createRouter({
    routes
 });
 export const updatePageTitle = function updatePageTitle (route) {
    const title =
        typeof route.meta.title === 'function'
        ? route.meta.title(route)
        : route.meta.title;
    if (title) {
        document.title = `${title} - Seekra`;
    } else {
        document.title = 'Seekra';
    }
 };
 // remove trailing slash(es)
 router.beforeEach((route) => {
    if (route.path !== '/' && route.path.endsWith('/')) {
@@ -68,21 +90,7 @@ router.beforeEach((route) => {
            hash: route.hash,
            replace: true
        };
-    };
+    }
 });
 // set page title
 router.afterEach(to => {
    const title =
        typeof to.meta.title === 'function'
        ? to.meta.title(to)
        : to.meta.title;
    if (title) {
        document.title = `${title} - Seekra`;
    } else {
        document.title = 'Seekra';
    };
 });
 export default router;
@@ -15,15 +15,19 @@ limitations under the License.
 */
 body {
    background-color: var(--light-bg);
    color: var(--dark);
    margin: 0;
    font-size: 16px;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 .link {
    text-decoration: none;
    color: var(--dark);
 }
-.link:hover:not(.button-link), .link:focus:not(.button-link) {
+.link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
    outline: none;
    text-decoration: underline;
 }
@@ -76,7 +80,7 @@ input {
    color: inherit;
 }
-.button:focus {
+.button:focus-visible {
    background-color: var(--light-hover);
    outline: none;
 }
@@ -84,3 +88,16 @@ input {
 .button:hover {
    background-color: var(--light-hover);
 }
 /* Temporary until a custom tap highlight is implemented. */
 * {
    -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);
 }
@@ -0,0 +1,32 @@
 [
    {
        "family": "Inter",
        "weight": "100 900",
        "style": "normal",
        "source": [
            {
                "url": "fonts/Inter/Inter-Variable.woff2",
                "format": "woff2"
            },
            {
                "url": "fonts/Inter/Inter-Variable.ttf",
                "format": "truetype"
            }
        ]
    },
    {
        "family": "Inter",
        "weight": "100 900",
        "style": "italic",
        "source": [
            {
                "url": "fonts/Inter/Inter-Italic-Variable.woff2",
                "format": "woff2"
            },
            {
                "url": "fonts/Inter/Inter-Italic-Variable.ttf",
                "format": "truetype"
            }
        ]
    }
 ]
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
-#app-wrapper {
+body {
    --primary-color-l-8:  oklch(0.897 0.202 260);
    --primary-color-l-7:  oklch(0.847 0.202 260);
    --primary-color-l-6:  oklch(0.797 0.202 260);
@@ -84,10 +84,13 @@ limitations under the License.
    --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) {
-    #app-wrapper.color-scheme-auto {
+    body.color-scheme-auto {
        --dark-l-8:             var(--white-d-8);
        --dark-l-7:             var(--white-d-7);
        --dark-l-6:             var(--white-d-6);
@@ -121,7 +124,7 @@ limitations under the License.
    }
 }
-#app-wrapper.dark {
+body.dark {
    --dark-l-8:             var(--white-d-8);
    --dark-l-7:             var(--white-d-7);
    --dark-l-6:             var(--white-d-6);
@@ -14,109 +14,111 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { expect,  test } from 'vitest';
+import { describe, expect,  test } from 'vitest';
 import { ensureUnit } from '../cssDimensions';
-test.for([
+describe('cssDimensions', () => {
-    { dimension: null,                       expected: '0px' },
+    test.for([
-    { dimension: undefined,                  expected: '0px' },
+        { dimension: null,                       expected: '0px' },
        { dimension: undefined,                  expected: '0px' },
-    { dimension: 0,                          expected: '0px' },
+        { dimension: 0,                          expected: '0px' },
-    { dimension: -0,                         expected: '0px' },
+        { dimension: -0,                         expected: '0px' },
-    { dimension: -1,                         expected: '-1px' },
+        { dimension: -1,                         expected: '-1px' },
-    { dimension: -42,                        expected: '-42px' },
+        { dimension: -42,                        expected: '-42px' },
-    { dimension: 1,                          expected: '1px' },
+        { dimension: 1,                          expected: '1px' },
-    { dimension: 42,                         expected: '42px' },
+        { dimension: 42,                         expected: '42px' },
-    { dimension: 0.0,                        expected: '0px' },
+        { dimension: 0.0,                        expected: '0px' },
-    { dimension: -0.0,                       expected: '0px' },
+        { dimension: -0.0,                       expected: '0px' },
-    { dimension: -1.0,                       expected: '-1px' },
+        { dimension: -1.0,                       expected: '-1px' },
-    { dimension: -42.0,                      expected: '-42px' },
+        { dimension: -42.0,                      expected: '-42px' },
-    { dimension: 1.0,                        expected: '1px' },
+        { dimension: 1.0,                        expected: '1px' },
-    { dimension: 42.0,                       expected: '42px' },
+        { dimension: 42.0,                       expected: '42px' },
-    { dimension: 0.42,                       expected: '0.42px' },
+        { dimension: 0.42,                       expected: '0.42px' },
-    { dimension: -0.42,                      expected: '-0.42px' },
+        { dimension: -0.42,                      expected: '-0.42px' },
-    { dimension: -1.42,                      expected: '-1.42px' },
+        { dimension: -1.42,                      expected: '-1.42px' },
-    { dimension: -42.42,                     expected: '-42.42px' },
+        { dimension: -42.42,                     expected: '-42.42px' },
-    { dimension: 1.42,                       expected: '1.42px' },
+        { dimension: 1.42,                       expected: '1.42px' },
-    { dimension: 42.42,                      expected: '42.42px' },
+        { dimension: 42.42,                      expected: '42.42px' },
-    { dimension: '0',                        expected: '0px' },
+        { dimension: '0',                        expected: '0px' },
-    { dimension: '-0',                       expected: '-0px' },
+        { dimension: '-0',                       expected: '-0px' },
-    { dimension: '-1',                       expected: '-1px' },
+        { dimension: '-1',                       expected: '-1px' },
-    { dimension: '-42',                      expected: '-42px' },
+        { dimension: '-42',                      expected: '-42px' },
-    { dimension: '1',                        expected: '1px' },
+        { dimension: '1',                        expected: '1px' },
-    { dimension: '42',                       expected: '42px' },
+        { dimension: '42',                       expected: '42px' },
-    { dimension: '0.0',                      expected: '0.0px' },
+        { dimension: '0.0',                      expected: '0.0px' },
-    { dimension: '-0.0',                     expected: '-0.0px' },
+        { dimension: '-0.0',                     expected: '-0.0px' },
-    { dimension: '-1.0',                     expected: '-1.0px' },
+        { dimension: '-1.0',                     expected: '-1.0px' },
-    { dimension: '-42.0',                    expected: '-42.0px' },
+        { dimension: '-42.0',                    expected: '-42.0px' },
-    { dimension: '1.0',                      expected: '1.0px' },
+        { dimension: '1.0',                      expected: '1.0px' },
-    { dimension: '42.0',                     expected: '42.0px' },
+        { dimension: '42.0',                     expected: '42.0px' },
-    { dimension: '0.42',                     expected: '0.42px' },
+        { dimension: '0.42',                     expected: '0.42px' },
-    { dimension: '-0.42',                    expected: '-0.42px' },
+        { dimension: '-0.42',                    expected: '-0.42px' },
-    { dimension: '-1.42',                    expected: '-1.42px' },
+        { dimension: '-1.42',                    expected: '-1.42px' },
-    { dimension: '-42.42',                   expected: '-42.42px' },
+        { dimension: '-42.42',                   expected: '-42.42px' },
-    { dimension: '1.42',                     expected: '1.42px' },
+        { dimension: '1.42',                     expected: '1.42px' },
-    { dimension: '42.42',                    expected: '42.42px' },
+        { dimension: '42.42',                    expected: '42.42px' },
-    { dimension: '0px',                      expected: '0px' },
+        { dimension: '0px',                      expected: '0px' },
-    { dimension: '-0px',                     expected: '-0px' },
+        { dimension: '-0px',                     expected: '-0px' },
-    { dimension: '-1px',                     expected: '-1px' },
+        { dimension: '-1px',                     expected: '-1px' },
-    { dimension: '-42px',                    expected: '-42px' },
+        { dimension: '-42px',                    expected: '-42px' },
-    { dimension: '1px',                      expected: '1px' },
+        { dimension: '1px',                      expected: '1px' },
-    { dimension: '42px',                     expected: '42px' },
+        { dimension: '42px',                     expected: '42px' },
-    { dimension: '0.0px',                    expected: '0.0px' },
+        { dimension: '0.0px',                    expected: '0.0px' },
-    { dimension: '-0.0px',                   expected: '-0.0px' },
+        { dimension: '-0.0px',                   expected: '-0.0px' },
-    { dimension: '-1.0px',                   expected: '-1.0px' },
+        { dimension: '-1.0px',                   expected: '-1.0px' },
-    { dimension: '-42.0px',                  expected: '-42.0px' },
+        { dimension: '-42.0px',                  expected: '-42.0px' },
-    { dimension: '1.0px',                    expected: '1.0px' },
+        { dimension: '1.0px',                    expected: '1.0px' },
-    { dimension: '42.0px',                   expected: '42.0px' },
+        { dimension: '42.0px',                   expected: '42.0px' },
-    { dimension: '0.42px',                   expected: '0.42px' },
+        { dimension: '0.42px',                   expected: '0.42px' },
-    { dimension: '-0.42px',                  expected: '-0.42px' },
+        { dimension: '-0.42px',                  expected: '-0.42px' },
-    { dimension: '-1.42px',                  expected: '-1.42px' },
+        { dimension: '-1.42px',                  expected: '-1.42px' },
-    { dimension: '-42.42px',                 expected: '-42.42px' },
+        { dimension: '-42.42px',                 expected: '-42.42px' },
-    { dimension: '1.42px',                   expected: '1.42px' },
+        { dimension: '1.42px',                   expected: '1.42px' },
-    { dimension: '42.42px',                  expected: '42.42px' },
+        { dimension: '42.42px',                  expected: '42.42px' },
-    { dimension: '0em',                      expected: '0em' },
+        { dimension: '0em',                      expected: '0em' },
-    { dimension: '-0em',                     expected: '-0em' },
+        { dimension: '-0em',                     expected: '-0em' },
-    { dimension: '-1em',                     expected: '-1em' },
+        { dimension: '-1em',                     expected: '-1em' },
-    { dimension: '-42em',                    expected: '-42em' },
+        { dimension: '-42em',                    expected: '-42em' },
-    { dimension: '1em',                      expected: '1em' },
+        { dimension: '1em',                      expected: '1em' },
-    { dimension: '42em',                     expected: '42em' },
+        { dimension: '42em',                     expected: '42em' },
-    { dimension: '0.0em',                    expected: '0.0em' },
+        { dimension: '0.0em',                    expected: '0.0em' },
-    { dimension: '-0.0em',                   expected: '-0.0em' },
+        { dimension: '-0.0em',                   expected: '-0.0em' },
-    { dimension: '-1.0em',                   expected: '-1.0em' },
+        { dimension: '-1.0em',                   expected: '-1.0em' },
-    { dimension: '-42.0em',                  expected: '-42.0em' },
+        { dimension: '-42.0em',                  expected: '-42.0em' },
-    { dimension: '1.0em',                    expected: '1.0em' },
+        { dimension: '1.0em',                    expected: '1.0em' },
-    { dimension: '42.0em',                   expected: '42.0em' },
+        { dimension: '42.0em',                   expected: '42.0em' },
-    { dimension: '0.42em',                   expected: '0.42em' },
+        { dimension: '0.42em',                   expected: '0.42em' },
-    { dimension: '-0.42em',                  expected: '-0.42em' },
+        { dimension: '-0.42em',                  expected: '-0.42em' },
-    { dimension: '-1.42em',                  expected: '-1.42em' },
+        { dimension: '-1.42em',                  expected: '-1.42em' },
-    { dimension: '-42.42em',                 expected: '-42.42em' },
+        { dimension: '-42.42em',                 expected: '-42.42em' },
-    { dimension: '1.42em',                   expected: '1.42em' },
+        { dimension: '1.42em',                   expected: '1.42em' },
-    { dimension: '42.42em',                  expected: '42.42em' },
+        { dimension: '42.42em',                  expected: '42.42em' },
-    { dimension: 'calc(42px - 1em)',         expected: 'calc(42px - 1em)' },
+        { dimension: 'calc(42px - 1em)',         expected: 'calc(42px - 1em)' },
-    { dimension: 'calc(42px)',               expected: 'calc(42px)' },
+        { dimension: 'calc(42px)',               expected: 'calc(42px)' },
-    { dimension: 'calc(42vh)',               expected: 'calc(42vh)' },
+        { dimension: 'calc(42vh)',               expected: 'calc(42vh)' },
-    { dimension: 'min(42px, 1em)',           expected: 'min(42px, 1em)' },
+        { dimension: 'min(42px, 1em)',           expected: 'min(42px, 1em)' },
-    { dimension: 'max(42px, 5rem)',          expected: 'max(42px, 5rem)' },
+        { dimension: 'max(42px, 5rem)',          expected: 'max(42px, 5rem)' },
-    { dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' },
+        { dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' },
-    { dimension: 'calc(42px-1em)',           expected: 'calc(42px-1em)' },
+        { dimension: 'calc(42px-1em)',           expected: 'calc(42px-1em)' },
-    { dimension: 'min(42px,1em)',            expected: 'min(42px,1em)' },
+        { dimension: 'min(42px,1em)',            expected: 'min(42px,1em)' },
-    { dimension: 'max(42px,5rem)',           expected: 'max(42px,5rem)' },
+        { dimension: 'max(42px,5rem)',           expected: 'max(42px,5rem)' },
-    { dimension: 'clamp(42vh,23vw,13cap)',   expected: 'clamp(42vh,23vw,13cap)' },
+        { dimension: 'clamp(42vh,23vw,13cap)',   expected: 'clamp(42vh,23vw,13cap)' },
-    { dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' }
+        { dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' }
-])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => {
+    ])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => {
-    expect(ensureUnit(dimension)).toBe(expected);
+        expect(ensureUnit(dimension)).toBe(expected);
    });
 });
@@ -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 { expect, test } from 'vitest';
 import getCurrentLanguage from '../currentLanguage';
 const locales = [
    { 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'}
 ];
 test.for(locales)('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);
 });
@@ -25,7 +25,7 @@ export const ensureUnit = function (d) {
    // if it ends with a number
    if (/\d$/.test(d)) {
        d += 'px';
-    };
+    }
    return d;
 };
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue'
+import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import { createHtmlPlugin } from 'vite-plugin-html';
@@ -39,4 +39,4 @@ export default defineConfig({
    globals: false,
    environment: 'jsdom'
  }
-})
+});