feat(fonts): use Inter

feat(fonts): load all fonts specified in font configuration
feat(assets): add assets environment variables
2026-08-04 15:22:48 +02:00 · 2026-08-04 15:01:11 +02:00 · 2026-08-04 13:04:24 +02:00
90 changed files with 1230 additions and 1900 deletions
@@ -1,16 +1,2 @@
-# 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
@@ -42,4 +42,4 @@ jobs:

          printf "Update current build pointer ... "
          echo "$BUILD_ID" | mc pipe "minio/$BUCKET/current"
-          echo "done"
+          echo "done"
@@ -1,3 +1,3 @@
 .vscode/
 node_modules/
-dist/
+dist/
@@ -5,4 +5,4 @@ This software is provided "as is", without warranty of any kind.
 This software uses the Vue.js framework.

 This software makes use of various open-source components.
-See THIRD_PARTY_LICENSES for details.
+See THIRD_PARTY_LICENSES for details.
@@ -8,4 +8,4 @@ Please execute the setup script in `scripts/` for your platform when cloning the

 ## Legal

-After each update to the dependencies, please run the script `scripts/generate-license-files.js` to regenerate the third-party license files.
+After each update to the dependencies, please run the script `scripts/generate-license-files.js` to regenerate the third-party license files.
@@ -13,4 +13,4 @@
 - Internationalization and some major languages
 - Color scheme
 - Search results view with error message which indicates that the search is not available
- Settings renderer
+- Settings renderer
@@ -21,42 +21,8 @@ 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>
@@ -4,4 +4,4 @@
      "@/*": ["./src/*"]
    }
  }
-}
+}
@@ -55,4 +55,4 @@ await generateLicenseFile(
    './THIRD_PARTY_LICENSES_DEV'
 );

-await fs.rename(packageJsonBackup, packageJson);
+await fs.rename(packageJsonBackup, packageJson);
@@ -14,4 +14,4 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.

-git config --local commit.template .gitmessage
+git config --local commit.template .gitmessage
@@ -14,4 +14,4 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.

-git config --local commit.template .gitmessage
+git config --local commit.template .gitmessage
@@ -18,45 +18,36 @@ limitations under the License.
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';

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

 const route = useRoute();

-const { getSetting } = useSettings();
-const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
-
-const updateColorScheme = function updateColorScheme (newColorScheme) {
+const { getColorScheme, updateColorScheme } = useColorScheme();
+const colorScheme = ref(getColorScheme());
+provide('colorScheme', colorScheme);
+watch(colorScheme, (newValue) => {
+    updateColorScheme(newValue);
    document.body.style.setProperty(colorScheme, {
        auto: 'normal',
        dark: 'dark',
        light: 'light'
    });
-    if (newColorScheme === 'dark') {
+    if (newValue === 'dark') {
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
    }
-    if (newColorScheme === 'auto') {
+    if (newValue === '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>
@@ -90,4 +81,4 @@ onMounted(() => {
        --main-content-padding-x: 15px;
    }
 }
-</style>
+</style>
@@ -23,4 +23,4 @@ limitations under the License.
        stroke-linejoin="round"
        d="M5 12 l6 8 l8 -16"
    />
-</svg>
+</svg>
@@ -23,4 +23,4 @@ limitations under the License.
        stroke-linejoin="round"
        d="M4 8 l8 8 l8 -8"
    />
-</svg>
+</svg>
@@ -23,4 +23,4 @@ limitations under the License.
        stroke-linejoin="round"
        d="M8 20 l8 -8 l-8 -8"
    />
-</svg>
+</svg>
@@ -35,4 +35,4 @@ limitations under the License.
            a9 9 0 0 0 -9 -9
        "
    />
-</svg>
+</svg>
@@ -33,4 +33,4 @@ limitations under the License.
            c-2.140625 4.351562000000001 -6.480468999999999 7.058593000000002 -11.328125 7.058593000000002
        "
    />
-</svg>
+</svg>
@@ -33,4 +33,4 @@ limitations under the License.
        cy="8.5"
        r="6.5"
    />
-</svg>
+</svg>
@@ -35,4 +35,4 @@ limitations under the License.
            v16
        "
    />
-</svg>
+</svg>
@@ -42,4 +42,4 @@ limitations under the License.

    <!-- bottom right -->
    <circle fill="currentColor" r="2" cx="18.36396103067893" cy="18.36396103067893" />
-</svg>
+</svg>
@@ -16,4 +16,4 @@ limitations under the License.

 <svg xmlns="http://www.w3.org/2000/svg" width="758.75" height="192.5">
 <defs><linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#4ba8eb"/><stop offset="100%" style="stop-color:#043485"/></linearGradient></defs>
-<path stroke="url(#gradient)" stroke-width="15" fill="none" d=" M94 51 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 1 43.75 43.75 a43.75 43.75 0 0 1 -43.75 43.75 a43.75 43.75 0 0 1 -43.75 -43.75  M138.75 95.25 h43.75 a43.75 43.75 0 0 0 43.75 -43.75 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 v43.75 v43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 0 43.75 -43.75  M270 95.25 h43.75 a43.75 43.75 0 0 0 43.75 -43.75 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 v43.75 v43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 0 43.75 -43.75  M401.25 0 v192.5 m0 -96.125 l87.5 -87.5 m-87.5 87.5 l87.5 87.5  M532.5 192.5 v-192.5 m0 51.25 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75  M663.75 50.25 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 v43.75 v43.75 v43.75 m0 -43.75 a43.75 43.75 0 0 1 -43.75 43.75 a43.75 43.75 0 0 1 -43.75 -43.75 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 v50"/></svg>
+<path stroke="url(#gradient)" stroke-width="15" fill="none" d=" M94 51 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 1 43.75 43.75 a43.75 43.75 0 0 1 -43.75 43.75 a43.75 43.75 0 0 1 -43.75 -43.75  M138.75 95.25 h43.75 a43.75 43.75 0 0 0 43.75 -43.75 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 v43.75 v43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 0 43.75 -43.75  M270 95.25 h43.75 a43.75 43.75 0 0 0 43.75 -43.75 a43.75 43.75 0 0 0 -43.75 -43.75 a43.75 43.75 0 0 0 -43.75 43.75 v43.75 v43.75 a43.75 43.75 0 0 0 43.75 43.75 a43.75 43.75 0 0 0 43.75 -43.75  M401.25 0 v192.5 m0 -96.125 l87.5 -87.5 m-87.5 87.5 l87.5 87.5  M532.5 192.5 v-192.5 m0 51.25 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75  M663.75 50.25 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 v43.75 v43.75 v43.75 m0 -43.75 a43.75 43.75 0 0 1 -43.75 43.75 a43.75 43.75 0 0 1 -43.75 -43.75 a43.75 43.75 0 0 1 43.75 -43.75 a43.75 43.75 0 0 1 43.75 43.75 v50"/></svg>
@@ -1,17 +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 LANGUAGE_PATH = ['general', 'language'];
@@ -17,14 +17,12 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';

-import { useSettings } from '@/features/settings/composables/useSettings';
-import { computed } from 'vue';
+import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';

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

-const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
+const colorScheme = inject('colorScheme');

 const colorSchemeNextMapper = {
    'light': 'dark',
@@ -41,15 +39,11 @@ 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="setColorScheme(colorSchemeNextMapper[colorScheme])"
+        @click="colorScheme = colorSchemeNextMapper[colorScheme]"
        :aria-label="getTooltipTranslation(colorScheme)"
        :title="getTooltipTranslation(colorScheme)"
    >
@@ -78,4 +72,4 @@ const setColorScheme = function setColorScheme (newColorScheme) {
 .color-scheme-button:hover {
    background: var(--light-hover);
 }
-</style>
+</style>
@@ -1,47 +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 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');
-    });
-});
@@ -0,0 +1,39 @@
+/*
+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 currentYear = new Date().getFullYear();
+const startYear = 2026
+const currentYear = new Date().getFullYear()

 const copyrightPeriod =
    startYear === currentYear
        ? `${currentYear}`
-        : `${startYear}-${currentYear}`;
+        : `${startYear}-${currentYear}`


 </script>
@@ -40,20 +40,8 @@ const copyrightPeriod =
            </RouterLink>
            <LanguageSwitchButton />
        </div>
-        <div class="footer-segment legal-segment">
-            <div></div>
-            <div class="copyright-notice">
-                &copy; {{ copyrightPeriod }} Seekra
-            </div>
-            <div class="legal-links">
-                <RouterLink
-                    :to="{ name: 'legalNotice' }"
-                    class="link"
-                    :title="t('legal.notice.title')"
-                >
-                    {{ t('legal.notice.title') }}
-                </RouterLink>
-            </div>
+        <div class="footer-segment">
+            &copy; {{ copyrightPeriod }} Seekra
        </div>
    </footer>
 </template>
@@ -66,7 +54,6 @@ const copyrightPeriod =
 .footer-segment {
    display: flex;
    justify-content: center;
-    align-items: center;
    gap: 32px;
    padding: var(--padding-y);
    background-color: var(--light-bg);
@@ -76,31 +63,4 @@ 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>
+</style>
@@ -17,31 +17,29 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';

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

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

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

-const selectLanguage = function selectLanguage (code) {
-    setSetting(LANGUAGE_PATH, code);
+async function selectLanguage(code) {
+    await loadLanguage(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', closeWrapperOnClickOutside);
+    document.removeEventListener('click', closeWrapperOnClickOutsite);
    isOpen.value = false;
 };

-const closeWrapperOnClickOutside = function (e) {
+const closeWrapperOnClickOutsite = function (e) {
    if (languageDropdown.value) {
        if (!languageDropdown.value.contains(e.target)) {
            close();
@@ -53,7 +51,7 @@ const open = function () {
    if (!isOpen.value) {
        isOpen.value = true;
        setTimeout(() => {
-            document.addEventListener('click', closeWrapperOnClickOutside);
+            document.addEventListener('click', closeWrapperOnClickOutsite);
        }, 0);
    };
 };
@@ -163,4 +161,4 @@ const open = function () {
 .flag {
    font-size: 1.1rem;
 }
-</style>
+</style>
@@ -14,57 +14,84 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

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

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

 describe('LanguageSwitchButton', () => {
-    test('renders correctly with initial state closed', () => {
-        const wrapper = getWrapper();
+    beforeEach(() => {
+        vi.clearAllMocks();
+        localStorage.clear();
+        document.documentElement.lang = '';
+        document.documentElement.dir = '';
+    });

+    test('renders correctly with initial state closed', () => {
+        const wrapper = mount(LanguageSwitchButton);
+        
        expect(wrapper.find('.language-button').exists()).toBe(true);
        expect(wrapper.find('.language-dropdown').exists()).toBe(false);
        expect(wrapper.find('.language-button').attributes('aria-expanded')).toBe('false');
    });

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

-    test('sets the language when clicking it', async () => {
-        const { getSetting } = useSettings();
-
-        const wrapper = getWrapper();
+    const languageTestCases = [
+        { code: 'en', expectedDir: 'ltr' },
+        { 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 = 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);
-
-        const deOption = options.find(opt => opt.text().includes('de'));
-        await deOption.trigger('click');
-        expect(getSetting(LANGUAGE_PATH)).toBe('de');
+        expect(loadLanguage).toHaveBeenCalledWith(code);
+        expect(localStorage.getItem('locale')).toBe(code);
+        expect(document.documentElement.lang).toBe(code);
+        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 = getWrapper();
+        const wrapper = mount(LanguageSwitchButton, {
+            attachTo: document.body
+        });

        await wrapper.find('.language-button').trigger('click');
        expect(wrapper.find('.language-dropdown').exists()).toBe(true);
@@ -73,10 +100,10 @@ describe('LanguageSwitchButton', () => {

        const externalDiv = document.createElement('div');
        document.body.appendChild(externalDiv);
-
+        
        const clickEvent = new MouseEvent('click', { bubbles: true });
        externalDiv.dispatchEvent(clickEvent);
-
+        
        await wrapper.vm.$nextTick();

        expect(wrapper.find('.language-dropdown').exists()).toBe(false);
@@ -84,4 +111,4 @@ describe('LanguageSwitchButton', () => {
        wrapper.unmount();
        externalDiv.remove();
    });
-});
+});
@@ -1,51 +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 { 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);
-    });
-});
@@ -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>
@@ -51,4 +51,4 @@ const size = computed(() => ensureUnit(props.size));
    align-items: center;
    filter: var(--invert);
 }
-</style>
+</style>
@@ -1,22 +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 class FetchError extends Error {
-    constructor (message) {
-        super(message);
-        this.name = 'FetchError';
-    }
-};
@@ -1,110 +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 { 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);
-            });
-        });
-    });
-});
@@ -1,44 +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 { 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;
-};
@@ -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.
-->
-
-<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>
@@ -1,78 +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 { 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);
-    });
-});
@@ -40,4 +40,4 @@ watch(() => route.query.q, q => {
        v-model="searchQueryModel"
        auto-submit
    />
-</template>
+</template>
@@ -24,8 +24,8 @@ import { useI18n } from 'vue-i18n';

 const { t } = useI18n();

-const router = useRouter();
-const props = defineProps(['autoSubmit']);
+const router = useRouter()
+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>
@@ -114,4 +114,4 @@ const submitSearch = function () {
 .search-form {
    width: 100%;
 }
-</style>
+</style>
@@ -94,4 +94,4 @@ const { t } = useI18n();
        transform: scale(1);
    }
 }
-</style>
+</style>
@@ -54,9 +54,10 @@ const props = defineProps({
 const store = useSettingsStore();

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

 const labelId = useId();
@@ -122,4 +123,4 @@ const labelId = useId();
 .option-input:checked + .option-check-mark-wrapper .option-check-mark {
    visibility: visible;
 }
-</style>
+</style>
@@ -16,4 +16,4 @@

 .settings-button:hover {
    background-color: var(--light-hover);
-}
+}
@@ -200,7 +200,7 @@ const apply = function apply () {
            opacity: 1;
        }
    }
-
+    
    @keyframes done-button-disappear {
        0% {
            opacity: 1;
@@ -212,4 +212,4 @@ const apply = function apply () {
        }
    }
 }
-</style>
+</style>
@@ -90,4 +90,4 @@ const props = defineProps({
 .section-heading[aria-level="4"] {
    --size: 1.4em;
 }
-</style>
+</style>
@@ -58,4 +58,4 @@ const followLink = function followLink () {
    align-items: center;
    justify-content: space-between;
 }
-</style>
+</style>
@@ -16,7 +16,7 @@ limitations under the License.

 <script setup>
 import { useSettingsStore } from '../stores/settingsStore';
-import { ref, useId, watch } from 'vue';
+import { useId } from 'vue';
 import { useI18n } from 'vue-i18n';

 const { t } = useI18n();
@@ -35,16 +35,8 @@ 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 () {
-    enabled.value = !enabled.value;
-    store.set(props.path, enabled.value);
+    store.set(props.path, !store.get(props.path));
 };
 </script>

@@ -55,7 +47,7 @@ const toggle = function toggle () {
        </label>
        <div
            class="switch-wrapper"
-            :class="{ enabled }"
+            :class="{ enabled: store.get(props.path) }"
            :title="t('settings.switch.title')"
            :aria-label="t('settings.switch.ariaLabel')"
            :aria-labelledby="labelId"
@@ -106,4 +98,4 @@ const toggle = function toggle () {
 .switch-wrapper.enabled .switch-point {
    margin-left: var(--point-size);
 }
-</style>
+</style>
@@ -90,32 +90,6 @@ 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,
@@ -237,7 +211,7 @@ describe('Selection', () => {
        const inputO2 = inputs[2];

        await check(inputO0);
-        expectSelectionValue(['o0']);
+        expectSelectionValue(['o0'])

        await uncheck(inputO0);
        expectSelectionValue([]);
@@ -290,4 +264,4 @@ describe('Selection', () => {
        const label = wrapper.find('.label');
        expect(label.text()).toBe(translation);
    });
-});
+});
@@ -32,7 +32,7 @@ const getWrapper = function getWrapper({ type = 'string', i18n = 'input', defaul
            path: 'input'
        }
    }, {}, [], piniaOptions);
-};
+}

 describe('SettingsInput', () => {
    test('uses correct input type', () => {
@@ -173,15 +173,15 @@ describe('SettingsInput', () => {

        await form.trigger('submit');
        expect(form.classes('done-button-shown')).toBeFalsy();
-
+        
        await inputElement.setValue('a');
        expect(form.classes('done-button-shown')).toBeTruthy();
-
+        
        const store = useSettingsStore();
        store.set('input', 'a');
        await nextTick();
        expect(form.classes('done-button-shown')).toBeFalsy();
-
+        
        await inputElement.setValue('');
        store.set('input', '');
        await nextTick();
@@ -207,4 +207,4 @@ describe('SettingsInput', () => {
        const label = wrapper.find('label');
        expect(label.text()).toBe(translation);
    });
-});
+});
@@ -157,4 +157,4 @@ describe('SettingsPage', () => {
            }
        });
    });
-});
+});
@@ -56,4 +56,4 @@ describe('SettingsPageLink', () => {

        expect(goToSettingsPage).toHaveBeenCalledWith(target);
    });
-});
+});
@@ -20,23 +20,17 @@ import { useSettingsStore } from '../../stores/settingsStore.js';
 import { expect, describe, test } from 'vitest';
 import { nextTick } from 'vue';

-const getWrapper = function getWrapper ({
-    i18n = 'switch1',
-    defaultValue = undefined,
-    translations = {},
-    piniaOptions = {}
-} = {}) {
+const getWrapper = function getWrapper ({ i18n = 'switch1', translations = {} } = {}) {
    return mountComponent(Switch, {
        attrs: {
            setting: {
                type: 'bool',
                name: 'switch',
-                i18n,
-                default: defaultValue
+                i18n
            },
            path: 'switch'
        }
-    }, translations, [], piniaOptions);
+    }, translations);
 };

 describe('Switch', () => {
@@ -59,67 +53,31 @@ 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();
-
+        
        const switchElement = wrapper.find('.switch-wrapper');
-
+        
        const store = useSettingsStore();
        expect(store.get('switch')).toBeUndefined();
-
+        
        switchElement.trigger('click');
        await nextTick();
        expect(store.get('switch')).toBe(true);
-
+        
        switchElement.trigger('click');
        await nextTick();
        expect(store.get('switch')).toBe(false);
    });
-
+    
    test('shows correct translation', () => {
        const translation = 'Switch';

        const wrapper = getWrapper({
            translations: { switch1: translation }
-        });
+        })

        const label = wrapper.find('label');
        expect(label.text()).toBe(translation);
    });
-});
+});
@@ -1,91 +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 { 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
-        })
-    );
-});
@@ -37,4 +37,4 @@ describe('useSettingsPage', () => {
            });
        });
    });
-});
+});
@@ -1,52 +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 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 };
-};
@@ -0,0 +1,48 @@
+/*
+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,
+    };
+}
@@ -30,4 +30,4 @@ export const useSettingsPage = function useSettingsPage () {
    };

    return { goToSettingsPage };
-};
+};
@@ -1,75 +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 { 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'
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-};
@@ -0,0 +1,3 @@
+{
+    "contents": []
+}
@@ -39,4 +39,4 @@ export const useSettingsStore = defineStore('settings', () => {
    return { set, get, remove, clear, settings };
 }, {
    persist: true
-});
+});
@@ -62,4 +62,4 @@ limitations under the License.
 * @typedef {BoolSettingConfig | NumberSettingConfig | StringSettingConfig | SelectionSettingConfig | SectionSettingConfig} SettingConfigEntry
 * @typedef {{ contents: SettingConfigEntry[] }} FirstLevelSettingConfigEntry
 * @typedef {{ contents: FirstLevelSettingConfigEntry[] }} SettingsConfig
- */
+ */
@@ -15,28 +15,166 @@ limitations under the License.
 */

 import { getSetting, getSettingRecursively } from '../getSetting.js';
-import { describe, test, expect } from 'vitest';
+import { test, expect } from 'vitest';

-describe('getSetting', () => {
-    test.for([
-        ({ settings: [], name: '', expected: undefined }),
-        ({ settings: [], name: 'a', expected: undefined }),
-        ({ settings: [
-            {
-                type: 'bool',
-                name: 'a',
-                i18n: 'a'
-            }
-        ], name: 'a', expected: {
+test.for([
+    ({ settings: [], name: '', expected: undefined }),
+    ({ settings: [], name: 'a', expected: undefined }),
+    ({ settings: [
+        {
            type: 'bool',
            name: 'a',
            i18n: 'a'
-        } })
-    ])('returns $expected', ({ settings, name, expected }) => {
-        expect(getSetting(name, settings)).toStrictEqual(expected);
-    });
+        }
+    ], name: 'a', expected: {
+        type: 'bool',
+        name: 'a',
+        i18n: 'a'
+    } })
+])('returns $expected', ({ settings, name, expected }) => {
+    expect(getSetting(name, settings)).toStrictEqual(expected);
+});

-    const veryNestedSettingsList = [
+const veryNestedSettingsList = [
+    {
+        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: '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: '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',
@@ -53,224 +191,26 @@ describe('getSetting', () => {
                    i18n: '2a'
                },
                {
-                    type: 'section',
+                    type: 'number',
                    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'
-                                                        }
-                                                    ]
-                                                }
-                                            ]
-                                        }
-                                    ]
-                                }
-                            ]
-                        }
-                    ]
+                    default: 42
                }
            ]
        }
-    ];
-
-    test.for([
-        ({ settings: [], path: ['a'], expected: undefined }),
-        ({ settings: [
-            {
-                type: 'bool',
-                name: '1a',
-                i18n: '1a'
-            }
-        ], path: ['1a'], expected: {
+    ], path: ['1b', '2b'], expected: {
+        type: 'number',
+        name: '2b',
+        i18n: '2b',
+        default: 42
+    } }),
+    ({ settings: [
+        {
            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',
@@ -293,236 +233,294 @@ describe('getSetting', () => {
                    ]
                }
            ]
-        } }),
-        ({ 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: {
+        }
+    ], path: ['1b', '2b', '3a'], expected: {
+        type: 'string',
+        name: '3a',
+        i18n: '3a'
+    } }),
+    ({ settings: [
+        {
            type: 'bool',
-            name: '7a',
-            i18n: '7a'
-        } }),
-        ({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4b', '5b'], expected: {
+            name: '1a',
+            i18n: '1a'
+        },
+        {
            type: 'section',
-            name: '5b',
-            i18n: '5b',
+            name: '1b',
+            i18n: '1b',
            content: [
                {
                    type: 'bool',
-                    name: '6a',
-                    i18n: '6a'
+                    name: '2a',
+                    i18n: '2a'
                },
                {
                    type: 'section',
-                    name: '6b',
-                    i18n: '6b',
+                    name: '2b',
+                    i18n: '2b',
                    content: [
                        {
-                            type: 'bool',
-                            name: '7a',
-                            i18n: '7a'
+                            type: 'string',
+                            name: '3a',
+                            i18n: '3a'
                        }
                    ]
                }
            ]
-        } }),
-        ({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4ba', '5b', '6b', '7a'], expected: undefined })
-    ])('returns $expected', ({ settings, path, expected }) => {
-        expect(getSettingRecursively(path, settings)).toStrictEqual(expected);
-    });
-});
+        }
+    ], path: ['1b'], expected: {
+        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'
+                    }
+                ]
+            }
+        ]
+    } }),
+    ({ 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);
        });
-    });
-});
+    })
+})
@@ -20,10 +20,18 @@ import { validateSettingsConfig, validateEntry, validateSelectionOptions, assert
 describe('settingsValidator', () => {
    describe('validateSettingsConfig', () => {
        test.for([
-            { settings: {
+            { raw: false, expected: false },
+            { raw: true, expected: false },
+            { raw: 0, expected: false },
+            { raw: 42, expected: false },
+            { raw: '', expected: false },
+            { raw: ' ', expected: false },
+            { raw: 'a', expected: false },
+            { raw: {}, expected: false },
+            { raw: {
                contents: []
-            } },
-            { settings: {
+            }, expected: true },
+            { raw: {
                contents: [
                    {
                        name: 'general',
@@ -37,8 +45,8 @@ describe('settingsValidator', () => {
                        ]
                    }
                ]
-            } },
-            { settings: {
+            }, expected: true },
+            { raw: {
                contents: [
                    {
                        name: 'general',
@@ -63,8 +71,8 @@ describe('settingsValidator', () => {
                        ]
                    },
                ]
-            } },
-            { settings: {
+            }, expected: true },
+            { raw: {
                contents: [
                    {
                        name: 'general',
@@ -120,12 +128,12 @@ describe('settingsValidator', () => {
                                        default: 'str'
                                    }
                                ]
-                            }
+                            },
                        ]
-                    }
+                    },
                ]
-            } },
-            { settings: {
+            }, expected: true },
+            { raw: {
                contents: [
                    {
                        name: 'general',
@@ -182,283 +190,12 @@ describe('settingsValidator', () => {
                                        default: 'str'
                                    }
                                ]
-                            }
+                            },
                        ]
-                    }
+                    },
                ]
-            } }
-        ])('does not throw an error and returns input', ({ settings }) => {
-            validateSettingsConfig(settings);
-        });
-
-        test.for([
-            { settings: false },
-            { settings: true },
-            { settings: 0 },
-            { settings: 42 },
-            { settings: '' },
-            { settings: ' ' },
-            { settings: 'a' },
-            { settings: {} },
-            { settings: {
-                content: [
-                    {
-                        type: 'sectio',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                allowMultiple: 'false',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 'str'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            } },
-            { settings: {
-                content: [
-                    {
-                        type: 'sectio',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 'str'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            } },
-            { settings: {
-                content: [
-                    {
-                        type: 'section',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 'str'
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            } },
-            { settings: {
-                contents: [
-                    {
-                        type: 'section',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43',
-                                default: 'true'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 42
-                                    }
-                                ]
-                            }
-                        ]
-                    }
-                ]
-            } },
-            { settings: {
+            }, expected: true },
+            { raw: {
                contents: [
                    {
                        type: 'bool',
@@ -521,13 +258,275 @@ describe('settingsValidator', () => {
                                        default: 'str'
                                    }
                                ]
+                            },
+                        ]
+                    },
+                ]
+            }, expected: false },
+            { raw: {
+                contents: [
+                    {
+                        type: 'section',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
                            }
                        ]
-                    }
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43',
+                                default: 'true'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 42
+                                    }
+                                ]
+                            },
+                        ]
+                    },
                ]
-            } }
-        ])('throws error', ({ settings }) => {
-            expect(() => validateSettingsConfig(settings)).toThrow(Error);
+            }, expected: false },
+            { raw: {
+                content: [
+                    {
+                        type: 'section',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 'str'
+                                    }
+                                ]
+                            },
+                        ]
+                    },
+                ]
+            }, expected: false },
+            { raw: {
+                content: [
+                    {
+                        type: 'sectio',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 'str'
+                                    }
+                                ]
+                            },
+                        ]
+                    },
+                ]
+            }, expected: false },
+            { raw: {
+                content: [
+                    {
+                        type: 'sectio',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                allowMultiple: 'false',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 'str'
+                                    }
+                                ]
+                            },
+                        ]
+                    },
+                ]
+            }, expected: false }
+        ])('returns valid: $expected', ({ raw, expected }) => {
+            const result = validateSettingsConfig(raw);
+            if (!result.valid) {
+                console.error('Error message:', result.error);
+            };
+            expect(result.valid).toBe(expected);
        });
    });

@@ -536,12 +535,12 @@ describe('settingsValidator', () => {
            [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable' }],
            [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: true }],
            [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: false }],
-
+        
            [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label' }],
            [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: 42 }],
            [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: 0 }],
            [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: -42.7 }],
-
+        
            [{ name: 'aString', type: 'string', i18n: 'aString.label' }],
            [{ name: 'aString', type: 'string', i18n: 'aString.label', default: '' }],
            [{ name: 'aString', type: 'string', i18n: 'aString.label', default: 'Seekra is great!' }],
@@ -618,7 +617,7 @@ describe('settingsValidator', () => {
            [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: [] }],
            [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: {} }],
            [{ name: 'enableFeature42', type: '', i18n: 'feature.42.enable', default: {} }],
-
+        
            [{ name: '', type: 'number', i18n: 'aNumber.label' }],
            [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: '42' }],
            [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: 'zero' }],
@@ -630,7 +629,7 @@ describe('settingsValidator', () => {
            [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: {} }],
            [{ name: 'aNumber', type: '', i18n: 'aNumber.label', default: {} }],
            [{ name: 'aNumber', type: '', i18n: 'aNumber.label', default: 42 }],
-
+        
            [{ name: 'aString', type: 'string', i18n: '' }],
            [{ name: 'aString', type: 'string', i18n: 'aString.label', default: 42 }],
            [{ name: 'aString', type: 'string', i18n: 'aString.label', default: true }],
@@ -810,4 +809,4 @@ describe('settingsValidator', () => {
            expect(() => assertString(value)).throws(Error);
        });
    });
-});
+});
@@ -31,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, { content: settings });
-};
+};
@@ -28,4 +28,4 @@ export const getSettingsPagePathSegments = function getSettingsPagePathSegments
            (segment) => segment.replace(/[^a-zA-Z0-9-]/g, '')
        )
        .filter(Boolean);
-};
+};
@@ -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.
+*/
+
+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,21 +28,21 @@ 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`);
-
+    
    assertString(entry.name, `${path}.name`);
    assertString(entry.i18n, `${path}.i18n`);

@@ -55,13 +55,13 @@ export const validateEntry = function validateEntry (entry, path) {
        );
        return;
    }
-
+    
    if (entry.type === 'selection') {
        validateSelectionOptions(entry.options, 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`);
@@ -89,14 +89,14 @@ export const validateEntry = function validateEntry (entry, path) {
            } 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);
@@ -104,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}]`)
@@ -117,13 +117,18 @@ export const validateFirstLevelSection = function validateFirstLevelSection (sec
 * @returns {{ valid: true, config: import('../types/settingsConfig').SettingsConfig } | { valid: false, error: string }}
 */
 export function validateSettingsConfig(raw) {
-    if (!raw || typeof raw !== 'object') {
-        throw new Error('[settings] Config must be an object');
+    try {
+        if (!raw || typeof raw !== '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 { computed, onMounted, ref, watch } from 'vue';
+import { loadSettingsConfig } from '../utils/settingsParser';
+import { onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';

@@ -28,31 +28,39 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();

-const settings = settingsConfiguration.contents;
+const settingsLoaded = ref(false)
+const settings = ref([]);
+const activeSectionContent = ref({});
+const activeSection = ref(null);

-const activePath = computed(() => {
+watchEffect(() => {
    const segments = route.path
        .split('/')
        .filter(Boolean);

-    return segments.slice(1, segments.length);
+    activeSection.value = segments.slice(1, segments.length).join('.');
 });

-const activeSection = ref(null);
-const updateSettings = async function updateSettings () {
-    const setting = getSettingRecursively(activePath.value, settings);
-    if (setting) {
-        activeSection.value = setting;
+const updateSettings = function updateSettings () {
+    if (activeSection.value) {
+        const setting = getSettingRecursively(activeSection.value.split('.'), settings.value);
+        if (!setting) {
+            router.push('/settings');
+        } else {
+            activeSectionContent.value = setting;
+        };
    } else {
-        await router.push('/settings');
-    }
+        activeSectionContent.value = { content: [] };
+    };
 };
-watch(route, (newRoute) => updateSettings(newRoute));
-onMounted(updateSettings);

-const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
-    if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
-};
+onMounted(async () => {
+    settings.value = (await loadSettingsConfig()).contents;
+    watchEffect(() => {
+        updateSettings();
+    });
+    settingsLoaded.value = true;
+});
 </script>

 <template>
@@ -63,23 +71,25 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSi
            </h1>
        </header>
        <LeftSidebarLayout class="layout">
-            <template #sidebar="{ toggleSidebar }">
+            <template #sidebar>
                <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 && activeSection.name === section.name }"
-                            @click="toggleSidebarIfSmallScreen(toggleSidebar)"
+                            :class="{ active: activeSection === section.name }"
                        >
                            {{ t(section.i18n) }}
                        </RouterLink>
                    </li>
                </ul>
            </template>
-            <div v-if="activeSection">
+            <div v-if="!settingsLoaded" class="main-content--loading">
+                {{ t('loading') }}
+            </div>
+            <div v-else-if="activeSection" class="main-content--loaded">
                <div class="settings-main-content">
-                    <SettingsPage :setting="activeSection" :path="activePath" />
+                    <SettingsPage :setting="activeSectionContent" :path="activeSection" />
                </div>
            </div>
            <div v-else class="main-content--no-section">
@@ -137,4 +147,4 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSi
        padding: 0;
    }
 }
-</style>
+</style>
@@ -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,8 +197,10 @@ const settings = settingsHoisted.values();
 const originalCurrentSection = 's0';
 let currentSection = originalCurrentSection;

-vi.mock('../../config.js', () => ({
-    default: { contents: settingsHoisted }
+vi.mock('../../utils/settingsParser', () => ({
+    loadSettingsConfig: vi.fn().mockResolvedValue({
+        contents: settingsHoisted
+    })
 }));

 vi.mock('vue-router', async (importOriginal) => {
@@ -233,7 +235,9 @@ 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) => {
@@ -250,27 +254,47 @@ 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();

-                const mainContent = wrapper.find('.settings-main-content');
+                await flushPromises();
+                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(mainContent.exists()).toBe(false);
+                expect(mainContentLoading.exists()).toBe(false);
+                expect(mainContentLoaded.exists()).toBe(false);
                expect(mainContentNoSection.exists()).toBe(true);
            });

            test('shows main content', async () => {
                const wrapper = getWrapper();
-                await nextTick();

-                const mainContent = wrapper.find('.settings-main-content');
+                await flushPromises();
+                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(mainContent.exists()).toBe(true);
+                expect(mainContentLoading.exists()).toBe(false);
+                expect(mainContentLoaded.exists()).toBe(true);
                expect(mainContentNoSection.exists()).toBe(false);
            });
        });
@@ -279,4 +303,4 @@ describe('SettingsView', () => {

 beforeEach(() => {
    currentSection = originalCurrentSection;
-});
+});
@@ -36,7 +36,7 @@ const toggleSidebar = function toggleSidebar () {
        <div class="sidebar-controls">
            <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
        </div>
-        <div class="sidebar-content" v-show="props.expanded">
+        <div class="sidebar-content" v-if="props.expanded">
            <slot />
        </div>
    </nav>
@@ -61,10 +61,6 @@ const toggleSidebar = function toggleSidebar () {
 }

@media (max-width: 48rem) {
-    .sidebar {
-        border: none;
-    }
-
    .sidebar:not(.expanded) .sidebar-expand-button {
        display: none;
    }
@@ -74,4 +70,4 @@ const toggleSidebar = function toggleSidebar () {
    padding: 20px;
    padding-top: 0;
 }
-</style>
+</style>
@@ -38,4 +38,4 @@ const click = function click (event) {
    padding: 4px;
    border-radius: 10px;
 }
-</style>
+</style>
@@ -15,6 +15,7 @@ limitations under the License.
 */

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

 export const fallbackLocale = 'en';

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

 export const i18n = createI18n({
    legacy: false,
-    locale: fallbackLocale,
+    locale: getCurrentLanguage(),
    fallbackLocale: fallbackLocale,
    messages: {}
 });
@@ -48,7 +49,7 @@ export async function loadLanguage (locale) {
    if (loadedLanguages.has(locale)) {
        i18n.global.locale.value = locale;
        return;
-    }
+    };

    const messages = (await import(`./locales/${locale}.json`)).default;

@@ -56,10 +57,4 @@ export async function loadLanguage (locale) {
    i18n.global.locale.value = 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';
-};
+};
@@ -29,7 +29,7 @@ const props = defineProps({

 const expanded = ref(props.expanded);

-const toggleSidebar = function toggleSidebar () {
+const toggleExpanded = function toggleExpanded () {
    expanded.value = !expanded.value;
 };
 </script>
@@ -37,13 +37,13 @@ const toggleSidebar = function toggleSidebar () {
 <template>
    <div class="layout-container" :class="{ expanded }">
        <div class="sidebar-expand-button-container">
-            <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
        </div>
-        <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
-            <slot name="sidebar" :toggleSidebar="toggleSidebar" />
+        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
+            <slot name="sidebar" />
        </Sidebar>
        <main class="main-content">
-            <slot :toggleSidebar="toggleSidebar" />
+            <slot />
        </main>
    </div>
 </template>
@@ -80,7 +80,7 @@ const toggleSidebar = function toggleSidebar () {
    .layout-container.expanded {
        grid-template-columns: 1fr 0;
    }
-
+    
    .layout-container:not(.expanded) .sidebar-expand-button-container {
        justify-content: end;
        display: block;
@@ -100,4 +100,4 @@ const toggleSidebar = function toggleSidebar () {
    grid-area: main-content;
    padding: 20px;
 }
-</style>
+</style>
@@ -60,35 +60,6 @@
            "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."
        }
    }
-}
+}
@@ -60,35 +60,6 @@
            "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."
        }
    }
-}
+}
@@ -62,4 +62,4 @@
            }
        }
    }
-}
+}
@@ -62,4 +62,4 @@
            }
        }
    }
-}
+}
@@ -62,4 +62,4 @@
            }
        }
    }
-}
+}
@@ -62,4 +62,4 @@
            }
        }
    }
-}
+}
@@ -15,23 +15,21 @@ limitations under the License.
 */

 import { getAssetsUrl } from './config/env';
-import { createApp } from 'vue';
+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 router from './router';
-import './styles/common.css';
-import './styles/variables/colors.css';
+import getCurrentLanguage from './utils/currentLanguage';
+import router from './router'
+import './styles/common.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 ?? '',
@@ -52,12 +50,11 @@ import { validateSettingsConfig } from './features/settings/utils/settingsValida
    fonts.forEach((font) => document.fonts.add(font));

    await loadLanguage(fallbackLocale);
-
+    await loadLanguage(getCurrentLanguage());
+    
    const pinia = createPinia();
    pinia.use(piniaPluginPersistedstate);
-
-    validateSettingsConfig(settings);
-
+    
    createApp(App)
        .use(router)
        .use(i18n)
@@ -18,7 +18,6 @@ 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';
@@ -40,14 +39,6 @@ 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',
@@ -78,7 +69,7 @@ export const updatePageTitle = function updatePageTitle (route) {
        document.title = `${title} - Seekra`;
    } else {
        document.title = 'Seekra';
-    }
+    };
 };

 // remove trailing slash(es)
@@ -90,7 +81,7 @@ router.beforeEach((route) => {
            hash: route.hash,
            replace: true
        };
-    }
+    };
 });

-export default router;
+export default router;
@@ -24,7 +24,6 @@ body {

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

 .link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
@@ -87,17 +86,4 @@ 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);
-}
+}
@@ -84,9 +84,6 @@ body {
    --light-hover:          var(--light-d-2);

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

@media (prefers-color-scheme: dark) {
@@ -155,4 +152,4 @@ body.dark {
    --light-hover:          var(--light-d-5);

    --invert: invert(1);
-}
+}
@@ -1,4 +1,4 @@
 :root {
    --input-padding: 0.7em;
    --input-height: 1em;
-}
+}
@@ -59,4 +59,4 @@ export const mountComponent = function mountComponent (component, options = {},
        },
        ...options
    });
-};
+};
@@ -121,4 +121,4 @@ describe('cssDimensions', () => {
    ])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => {
        expect(ensureUnit(dimension)).toBe(expected);
    });
-});
+});
@@ -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.
+*/
+
+import { describe, expect, test } from 'vitest';
+import getCurrentLanguage from '../currentLanguage';
+
+describe('currentLanguage', () => {
+    test.for([
+        { navigatorLanguage: 'en',                      localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'de',                      localStorageLanguage: null, expected: 'de'},
+        { navigatorLanguage: 'fr',                      localStorageLanguage: null, expected: 'fr'},
+
+        { navigatorLanguage: 'en-US',                   localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'en-AU',                   localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'de-DE',                   localStorageLanguage: null, expected: 'de'},
+        { navigatorLanguage: 'fr-FR',                   localStorageLanguage: null, expected: 'fr'},
+
+        { navigatorLanguage: 'en-us',                   localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'en-au',                   localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'de-de',                   localStorageLanguage: null, expected: 'de'},
+        { navigatorLanguage: 'fr-fr',                   localStorageLanguage: null, expected: 'fr'},
+
+        { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: null, expected: 'zh'},
+        { navigatorLanguage: 'zh-Hant-TW',              localStorageLanguage: null, expected: 'zh'},
+        { navigatorLanguage: 'uz-Latn-UZ',              localStorageLanguage: null, expected: 'uz'},
+
+        { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: null, expected: 'en'},
+        { navigatorLanguage: 'de-DE-u-co-phonebk',      localStorageLanguage: null, expected: 'de'},
+        { navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', localStorageLanguage: null, expected: 'zh'},
+
+        { navigatorLanguage: 'en',                      localStorageLanguage: 'de', expected: 'de'},
+        { navigatorLanguage: 'de-DE',                   localStorageLanguage: 'en', expected: 'en'},
+        { navigatorLanguage: 'de-de',                   localStorageLanguage: 'en', expected: 'en'},
+        { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: 'fr', expected: 'fr'},
+        { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: 'zh', expected: 'zh'}
+    ])('returns the language $expected (navigator: $navigatorLanguage; local storage: $localStorageLanguage)', ({ navigatorLanguage, localStorageLanguage, expected }) => {
+        Object.defineProperty(navigator, 'language', {
+            value: navigatorLanguage,
+            configurable: true
+        });
+
+        if (localStorageLanguage) {
+            localStorage.setItem('locale', localStorageLanguage);
+        };
+
+        expect(getCurrentLanguage()).toBe(expected);
+    });
+});
@@ -25,7 +25,7 @@ export const ensureUnit = function (d) {
    // if it ends with a number
    if (/\d$/.test(d)) {
        d += 'px';
-    }
+    };

    return d;
-};
+};
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-export const getNavigatorLanguage = function getNavigatorLanguage () {
+export default function getCurrentLanguage () {
+    const saved = localStorage.getItem('locale');
+    if (saved) return saved;
    const locale = new Intl.Locale(navigator.language);
    return locale.language;
-};
+};
@@ -53,4 +53,4 @@ const { t } = useI18n();
    padding: 10px 20px;
    text-decoration: none;
 }
-</style>
+</style>
@@ -39,7 +39,7 @@ const submitSearch = function () {
            {{ t('slogan') }}
        </span>
    </header>
-
+    
        <div class="search-container">
            <Searchbar v-model="searchQuery" ref="searchbar" class="search-bar" auto-submit />
        </div>
@@ -83,4 +83,4 @@ const submitSearch = function () {
        width: 100%;
    }
 }
-</style>
+</style>
@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite'
+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'
  }
-});
+})
Author	SHA1	Message	Date
jakob.scheid	e7745a9bd3	feat(fonts): use Inter	2026-08-04 15:22:48 +02:00
jakob.scheid	32edb6d55f	feat(fonts): load all fonts specified in font configuration	2026-08-04 15:01:11 +02:00
jakob.scheid	876e661a73	feat(assets): add assets environment variables Added the environment variables VITE_ASSETS_BUILD_ID for the ID of the used build and VITE_ASSETS_BASE_URL for the base URL of the assets. A script for reading this configuration was also added.	2026-08-04 13:04:24 +02:00