test(settings): refactor switch component test

Added and used getWrapper function to switch component test to mount the component and avoid repeating code.
test(settings): refactor selection component test
2026-07-28 12:53:41 +02:00 · 2026-07-28 12:43:41 +02:00 · 2026-07-28 12:41:42 +02:00 · 2026-07-28 12:35:27 +02:00 · 2026-07-28 12:33:40 +02:00 · 2026-07-28 12:28:06 +02:00
94 changed files with 9473 additions and 11164 deletions
@@ -1,16 +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.
-
-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.
@@ -4,8 +4,4 @@ The frontend of the search engine Seekra.

 ## Setup

-Please execute the setup script in `scripts/` for your platform when cloning the repository.
-
-## Legal
-
-After each update to the dependencies, please run the script `scripts/generate-license-files.js` to regenerate the third-party license files.
+Please execute the setup script in `scripts/` for your platform when cloning the repository.
@@ -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/*"]
    }
  }
-}
+}
@@ -1,58 +0,0 @@
-#!/usr/bin/env node
-
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import fs from 'node:fs/promises';
-import { generateLicenseFile } from 'generate-license-file';
-
-const packageJson = './package.json';
-const packageJsonBackup = `${packageJson}~`;
-
-await generateLicenseFile(
-    packageJson,
-    'THIRD_PARTY_LICENSES'
-);
-
-const pkg = JSON.parse(
-    await fs.readFile(packageJson, 'utf-8')
-);
-
-await fs.rename(packageJson, packageJsonBackup);
-
-const devPackage = {
-    ...pkg,
-    dependencies: pkg.devDependencies ?? {},
-    devDependencies: {}
-};
-
-/*
-  The file including the dependencies for the current license file has
-  to be always package.json due to a bug of generate-license file. See
-
-    https://github.com/TobyAndToby/generate-license-file/issues/752
-*/
-await fs.writeFile(
-    packageJson,
-    JSON.stringify(devPackage)
-);
-
-await generateLicenseFile(
-    packageJson,
-    './THIRD_PARTY_LICENSES_DEV'
-);
-
-await fs.rename(packageJsonBackup, packageJson);
@@ -1,17 +1,3 @@
 #!/usr/bin/env pwsh

-# Copyright 2026 Seekra
-
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-
-#     http://www.apache.org/licenses/LICENSE-2.0
-
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-git config --local commit.template .gitmessage
+git config --local commit.template .gitmessage
@@ -1,17 +1,3 @@
 #!/usr/bin/bash

-# Copyright 2026 Seekra
-
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-
-#     http://www.apache.org/licenses/LICENSE-2.0
-
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-
-git config --local commit.template .gitmessage
+git config --local commit.template .gitmessage
@@ -18,49 +18,21 @@ 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 { useRoute } from 'vue-router';
+import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
+import { ref, provide, watch } from 'vue';

-const route = useRoute();
-
-const { getSetting } = useSettings();
-const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
-
-const updateColorScheme = function updateColorScheme (newColorScheme) {
-    document.body.style.setProperty(colorScheme, {
-        auto: 'normal',
-        dark: 'dark',
-        light: 'light'
-    });
-    if (newColorScheme === 'dark') {
-        document.body.classList.add('dark');
-    } else {
-        document.body.classList.remove('dark');
-    }
-    if (newColorScheme === 'auto') {
-        document.body.classList.add('color-scheme-auto');
-    } else {
-        document.body.classList.remove('color-scheme-auto');
-    }
-};
-watch(colorScheme, (newColorScheme) => {
-    updateColorScheme(newColorScheme);
-});
-updateColorScheme(colorScheme.value);
-
-watchEffect(() => updatePageTitle(route));
-
-onMounted(() => {
-    setLocale(getSetting(LANGUAGE_PATH));
-});
+const { getColorScheme, updateColorScheme } = useColorScheme();
+const colorScheme = ref(getColorScheme());
+provide('colorScheme', colorScheme);
+watch(colorScheme, val => updateColorScheme(val))
 </script>

 <template>
-    <div id="app-wrapper">
+    <div
+        :style="{ colorScheme: colorScheme === 'auto' ? 'normal' : (colorScheme === 'dark' ? 'dark' : 'light')}"
+        :class="{ dark: colorScheme === 'dark', 'color-scheme-auto': colorScheme === 'auto' }"
+        id="app-wrapper"
+    >
        <Navbar />

        <router-view class="main-content" />
@@ -74,11 +46,6 @@ onMounted(() => {
    --main-content-padding-x: 30px;
    --main-content-padding-y: 40px;
    --main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x);
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--light-bg);
-    color: var(--dark);
 }

 .main-content {
@@ -90,4 +57,12 @@ onMounted(() => {
        --main-content-padding-x: 15px;
    }
 }
-</style>
+
+#app-wrapper {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--light-bg);
+    color: var(--dark);
+}
+</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>
@@ -1,38 +0,0 @@
-<!--
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-->
-
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-    <path
-        stroke="currentColor"
-        stroke-width="2"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="
-            M6 4
-            h12
-            a4 4 0 0 1 4 4
-            v8
-            a4 4 0 0 1 -4 4
-            h-12
-            a4 4 0 0 1 -4 -4
-            v-8
-            a4 4 0 0 1 4 -4
-            m2 0
-            v16
-        "
-    />
-</svg>
@@ -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,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 const getAssetsUrl = function getAssetsUrl () {
-    return new URL(
-        `${import.meta.env.VITE_ASSETS_BUILD_ID}/`,
-        import.meta.env.VITE_ASSETS_BASE_URL
-    ).href;
-};
@@ -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.vue', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        localStorage.clear();
+        document.documentElement.lang = '';
+        document.documentElement.dir = '';
+    });

-describe('LanguageSwitchButton', () => {
    test('renders correctly with initial state closed', () => {
-        const wrapper = getWrapper();
-
+        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>
@@ -17,7 +17,7 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';
 import { useSettingsStore } from '../stores/settingsStore';
-import { computed, ref, useId, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

 const { t } = useI18n();
@@ -54,26 +54,21 @@ 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));

-const labelId = useId();
+watch(selected, (newValue, oldValue) => {
+    store.set(props.path, newValue);
+});
 </script>

 <template>
    <div>
-        <div class="label" :id="labelId">
+        <div class="label">
            {{ t(props.setting.i18n) }}
        </div>
-        <ul class="options-list" :aria-labelledby="labelId">
+        <ul class="options-list">
            <li v-for="option in props.setting.options" :key="option.name">
-                <label
-                    class="settings-button"
-                    :title="t(option.i18n)"
-                    :aria-label="t('settings.selection.option.ariaLabel', { option: t(option.i18n) })"
-                >
+                <label class="settings-button">
                    <input
                        :type="optionType"
                        :name="props.path"
@@ -122,4 +117,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);
        });
-    });
-});
+    })
+})
@@ -21,7 +21,9 @@ export const getSetting = function getSetting (name, settings) {
 export const getSettingRecursively = function getSettingRecursively (sectionPath, settings) {
    const oneSettingsLevel = function oneSettingsLevel (cursor, acc) {
        const setting = getSetting(cursor[0], acc.content);
-        if (!setting) return;
+        if (!setting) {
+            return;
+        };

        if (setting.type === undefined) setting.type = 'section';
        if (setting.type === 'section') {
@@ -31,12 +33,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 });
-};
+    return oneSettingsLevel(sectionPath.split('.'), { 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`);
@@ -73,30 +73,15 @@ export const validateEntry = function validateEntry (entry, path) {
            throw new Error(`[settings] "${path}.default" must be a string`);
        }
        if (entry.type === 'selection') {
-            if (entry.allowMultiple) {
-                if (!Array.isArray(entry.default)) {
-                    throw new Error(`[settings] "${path}.default" must be an array`);
-                }
-                const allOptions = entry.options.map((option) => option.name);
-                entry.default.forEach((defaultValue, index) => {
-                    if (typeof defaultValue !== 'string') {
-                        throw new Error(`[settings] "${path}.default[${index}]" must be a string`);
-                    }
-                    if (!allOptions.includes(defaultValue)) {
-                        throw new Error(`[settings] option "${path}.default[${index}]" does not exist`);
-                    }
-                });
-            } else {
-                if (typeof entry.default !== 'string') {
-                    throw new Error(`[settings] "${path}.default" must be a string`);
-                }
-                if (!entry.options.map((option) => option.name).includes(entry.default)) {
-                    throw new Error(`[settings] option "${path}.default" does not exist`);
-                }
-            }
-        }
+            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 +89,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 +102,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, 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;
-});
+});
@@ -14,64 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->

-<script setup>
-import SidebarExpandButton from './SidebarExpandButton.vue';
-
-const props = defineProps({
-    'expanded': {
-        default: false,
-        required: false,
-        type: Boolean
-    }
-});
-const emit = defineEmits(['toggleExpanded']);
-
-const toggleSidebar = function toggleSidebar () {
-    emit('toggleExpanded');
-};
-</script>
-
 <template>
-    <nav class="sidebar" :class="{ expanded }">
-        <div class="sidebar-controls">
-            <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
-        </div>
-        <div class="sidebar-content" v-show="props.expanded">
-            <slot />
-        </div>
+    <nav class="sidebar">
+        <slot />
    </nav>
 </template>

 <style scoped>
 .sidebar {
    border-right: 1px solid var(--border);
-}
-
-.sidebar-controls {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    padding: 1em 20px;
-    padding-bottom: 0;
-    margin-bottom: 8px;
-}
-
-.sidebar:not(.expanded) .sidebar-controls {
-    padding: 1em;
-}
-
-@media (max-width: 48rem) {
-    .sidebar {
-        border: none;
-    }
-
-    .sidebar:not(.expanded) .sidebar-expand-button {
-        display: none;
-    }
-}
-
-.sidebar-content {
    padding: 20px;
-    padding-top: 0;
 }
-</style>
+</style>
@@ -1,41 +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 Icon from '@/features/icons/components/Icon.vue';
-
-const emit = defineEmits(['click']);
-
-const click = function click (event) {
-    emit('click', event);
-};
-</script>
-
-<template>
-    <button class="button sidebar-expand-button">
-        <Icon name="sidebar-expand" @click="click" />
-    </button>
-</template>
-
-<style scoped>
-.sidebar-expand-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 4px;
-    border-radius: 10px;
-}
-</style>
@@ -15,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';
-};
+};
@@ -16,34 +16,15 @@ limitations under the License.

 <script setup>
 import Sidebar from '@/features/sidebar/components/Sidebar.vue';
-import SidebarExpandButton from '@/features/sidebar/components/SidebarExpandButton.vue';
-import { ref } from 'vue';
-
-const props = defineProps({
-    'expanded': {
-        default: false,
-        required: false,
-        type: Boolean
-    }
-});
-
-const expanded = ref(props.expanded);
-
-const toggleSidebar = function toggleSidebar () {
-    expanded.value = !expanded.value;
-};
 </script>

 <template>
-    <div class="layout-container" :class="{ expanded }">
-        <div class="sidebar-expand-button-container">
-            <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
-        </div>
-        <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
-            <slot name="sidebar" :toggleSidebar="toggleSidebar" />
+    <div class="layout-container">
+        <Sidebar>
+            <slot name="sidebar" />
        </Sidebar>
        <main class="main-content">
-            <slot :toggleSidebar="toggleSidebar" />
+            <slot />
        </main>
    </div>
 </template>
@@ -51,53 +32,11 @@ const toggleSidebar = function toggleSidebar () {
 <style scoped>
 .layout-container {
    display: grid;
-    grid-template-columns: calc(32px + 2em) 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas:
-        "sidebar-expand sidebar-expand"
-        "sidebar main-content";
+    grid-template-columns: min(24%, 280px) 1fr;
    border-top: 1px solid var(--border);
 }

-.layout-container.expanded {
-    grid-template-columns: min(24%, 280px) 1fr;
-}
-
-.sidebar-expand-button-container {
-    grid-area: sidebar-expand;
-    display: none;
-}
-
-.sidebar {
-    grid-area: sidebar;
-}
-
-@media (max-width: 48rem) {
-    .layout-container {
-        grid-template-columns: 0 1fr;
-    }
-
-    .layout-container.expanded {
-        grid-template-columns: 1fr 0;
-    }
-
-    .layout-container:not(.expanded) .sidebar-expand-button-container {
-        justify-content: end;
-        display: block;
-        padding: 20px;
-    }
-
-    .layout-container:not(.expanded) .main-content {
-        padding-top: 0;
-    }
-
-    .layout-container.expanded .main-content {
-        display: none;
-    }
-}
-
 .main-content {
-    grid-area: main-content;
    padding: 20px;
 }
-</style>
+</style>
@@ -55,40 +55,6 @@
                "ariaLabel": "Geht zur Einstellungsseite {page}"
            }
        },
-        "noSectionSelected": "Kein Einstellungsabschnitt ist ausgewählt.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Wählt die Option {option} aus"
-            }
-        },
-        "settings": {
-            "appearance": {
-                "title": "Erscheinungsbild",
-                "contents": {
-                    "colorScheme": {
-                        "title": "Farbschema",
-                        "options": {
-                            "auto": "An Systemfarbschema anpassen",
-                            "light": "Hell",
-                            "dark": "Dunkel"
-                        }
-                    }
-                }
-            },
-            "general": {
-                "title": "Allgemein",
-                "settings": {
-                    "language": {
-                        "title": "Sprache"
-                    }
-                }
-            }
-        }
-    },
-    "legal": {
-        "notice": {
-            "title": "Impressum",
-            "loadError": "Das Impressum konnte nicht geladen werden."
-        }
+        "noSectionSelected": "Kein Einstellungsabschnitt ist ausgewählt."
    }
-}
+}
@@ -55,40 +55,6 @@
                "ariaLabel": "Goes to settings page {page}"
            }
        },
-        "noSectionSelected": "No settings section is selected.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Selects option {option}"
-            }
-        },
-        "settings": {
-            "appearance": {
-                "title": "Appearance",
-                "contents": {
-                    "colorScheme": {
-                        "title": "Color Scheme",
-                        "options": {
-                            "auto": "Adapt to system color scheme",
-                            "light": "Light",
-                            "dark": "Dark"
-                        }
-                    }
-                }
-            },
-            "general": {
-                "title": "General",
-                "settings": {
-                    "language": {
-                        "title": "Language"
-                    }
-                }
-            }
-        }
-    },
-    "legal": {
-        "notice": {
-            "title": "Legal Notice",
-            "loadError": "The legal notice could not be loaded."
-        }
+        "noSectionSelected": "No settings section is selected."
    }
-}
+}
@@ -38,28 +38,5 @@
            }
        }
    },
-    "slogan": "Hecho para buscar.",
-    "settings": {
-        "input": {
-            "done": {
-                "title": "Guardar valor",
-                "ariaLabel": "Guarda el valor introducido"
-            }
-        },
-        "switch": {
-            "title": "Cambiar valor",
-            "ariaLabel": "Cambia el valor"
-        },
-        "pages": {
-            "link": {
-                "ariaLabel": "Va a la página de configuración {page}"
-            }
-        },
-        "noSectionSelected": "No se ha seleccionado ninguna sección de configuración.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Selecciona la opción {option}"
-            }
-        }
-    }
-}
+    "slogan": "Hecho para buscar."
+}
@@ -38,28 +38,5 @@
            }
        }
    },
-    "slogan": "Conçu pour chercher.",
-    "settings": {
-        "input": {
-            "done": {
-                "title": "Enregistrer la valeur",
-                "ariaLabel": "Enregistre la valeur saisie"
-            }
-        },
-        "switch": {
-            "title": "Basculer la valeur",
-            "ariaLabel": "Bascule la valeur"
-        },
-        "pages": {
-            "link": {
-                "ariaLabel": "Accéder à la page de paramètres {page}"
-            }
-        },
-        "noSectionSelected": "Aucune section des paramètres n'est sélectionnée.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Sélectionne l'option {option}"
-            }
-        }
-    }
-}
+    "slogan": "Conçu pour chercher."
+}
@@ -38,28 +38,5 @@
            }
        }
    },
-    "slogan": "Costruito per cercare.",
-    "settings": {
-        "input": {
-            "done": {
-            "title": "Salva valore",
-                "ariaLabel": "Salva il valore inserito"
-            }
-        },
-        "switch": {
-            "title": "Attiva/disattiva valore",
-            "ariaLabel": "Attiva o disattiva il valore"
-        },
-        "pages": {
-            "link": {
-                "ariaLabel": "Vai alla pagina delle impostazioni {page}"
-            }
-        },
-        "noSectionSelected": "Nessuna sezione delle impostazioni è selezionata.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Seleziona l'opzione {option}"
-            }
-        }
-    }
-}
+    "slogan": "Costruito per cercare."
+}
@@ -38,28 +38,5 @@
            }
        }
    },
-    "slogan": "Feito para pesquisar.",
-    "settings": {
-        "input": {
-            "done": {
-            "title": "Guardar valor",
-                "ariaLabel": "Guarda o valor introduzido"
-            }
-        },
-        "switch": {
-            "title": "Alternar valor",
-            "ariaLabel": "Alterna o valor"
-        },
-        "pages": {
-            "link": {
-                "ariaLabel": "Ir para a página de definições {page}"
-            }
-        },
-        "noSectionSelected": "Nenhuma secção de definições está selecionada.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Seleciona a opção {option}"
-            }
-        }
-    }
-}
+    "slogan": "Feito para pesquisar."
+}
@@ -14,53 +14,30 @@ See the License for the specific language governing permissions and
 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 ?? '',
-        Array.isArray(font.source)
-            ? font.source.map(
-                (source) => `url('${source.url
-                    ? new URL(source.url, getAssetsUrl()).href
-                    : ''
-                }') format('${source.format ?? ''}')`
-            ).join(',')
-            : '',
-        {
-            weight: font.weight ?? undefined,
-            style: font.style ?? undefined
-        }
-    ));
-    await Promise.all(fonts.map((font) => font.load()));
-    fonts.forEach((font) => document.fonts.add(font));
-
    await loadLanguage(fallbackLocale);
+    await loadLanguage(getCurrentLanguage());

    const pinia = createPinia();
    pinia.use(piniaPluginPersistedstate);

-    validateSettingsConfig(settings);
-
    createApp(App)
        .use(router)
        .use(i18n)
        .use(pinia)
        .mount('#app');
-})();
+})();
@@ -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',
@@ -68,19 +59,6 @@ const router = createRouter({
    routes
 });

-export const updatePageTitle = function updatePageTitle (route) {
-    const title =
-        typeof route.meta.title === 'function'
-        ? route.meta.title(route)
-        : route.meta.title;
-
-    if (title) {
-        document.title = `${title} - Seekra`;
-    } else {
-        document.title = 'Seekra';
-    }
-};
-
 // remove trailing slash(es)
 router.beforeEach((route) => {
    if (route.path !== '/' && route.path.endsWith('/')) {
@@ -90,7 +68,21 @@ router.beforeEach((route) => {
            hash: route.hash,
            replace: true
        };
-    }
+    };
 });

-export default router;
+// set page title
+router.afterEach(to => {
+    const title =
+        typeof to.meta.title === 'function'
+        ? to.meta.title(to)
+        : to.meta.title;
+
+    if (title) {
+        document.title = `${title} - Seekra`;
+    } else {
+        document.title = 'Seekra';
+    };
+});
+
+export default router;
@@ -15,19 +15,15 @@ limitations under the License.
 */

 body {
-    background-color: var(--light-bg);
-    color: var(--dark);
    margin: 0;
    font-size: 16px;
-    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

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

-.link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
+.link:hover:not(.button-link), .link:focus:not(.button-link) {
    outline: none;
    text-decoration: underline;
 }
@@ -80,24 +76,11 @@ input {
    color: inherit;
 }

-.button:focus-visible {
+.button:focus {
    background-color: var(--light-hover);
    outline: none;
 }

 .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);
-}
+}
@@ -1,32 +0,0 @@
-[
-    {
-        "family": "Inter",
-        "weight": "100 900",
-        "style": "normal",
-        "source": [
-            {
-                "url": "fonts/Inter/Inter-Variable.woff2",
-                "format": "woff2"
-            },
-            {
-                "url": "fonts/Inter/Inter-Variable.ttf",
-                "format": "truetype"
-            }
-        ]
-    },
-    {
-        "family": "Inter",
-        "weight": "100 900",
-        "style": "italic",
-        "source": [
-            {
-                "url": "fonts/Inter/Inter-Italic-Variable.woff2",
-                "format": "woff2"
-            },
-            {
-                "url": "fonts/Inter/Inter-Italic-Variable.ttf",
-                "format": "truetype"
-            }
-        ]
-    }
-]
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-body {
+#app-wrapper {
    --primary-color-l-8:  oklch(0.897 0.202 260);
    --primary-color-l-7:  oklch(0.847 0.202 260);
    --primary-color-l-6:  oklch(0.797 0.202 260);
@@ -84,13 +84,10 @@ 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) {
-    body.color-scheme-auto {
+    #app-wrapper.color-scheme-auto {
        --dark-l-8:             var(--white-d-8);
        --dark-l-7:             var(--white-d-7);
        --dark-l-6:             var(--white-d-6);
@@ -124,7 +121,7 @@ body {
    }
 }

-body.dark {
+#app-wrapper.dark {
    --dark-l-8:             var(--white-d-8);
    --dark-l-7:             var(--white-d-7);
    --dark-l-6:             var(--white-d-6);
@@ -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
    });
-};
+};
@@ -14,111 +14,109 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { describe, expect,  test } from 'vitest';
+import { expect,  test } from 'vitest';
 import { ensureUnit } from '../cssDimensions';

-describe('cssDimensions', () => {
-    test.for([
-        { dimension: null,                       expected: '0px' },
-        { dimension: undefined,                  expected: '0px' },
+test.for([
+    { dimension: null,                       expected: '0px' },
+    { dimension: undefined,                  expected: '0px' },

-        { dimension: 0,                          expected: '0px' },
-        { dimension: -0,                         expected: '0px' },
-        { dimension: -1,                         expected: '-1px' },
-        { dimension: -42,                        expected: '-42px' },
-        { dimension: 1,                          expected: '1px' },
-        { dimension: 42,                         expected: '42px' },
+    { dimension: 0,                          expected: '0px' },
+    { dimension: -0,                         expected: '0px' },
+    { dimension: -1,                         expected: '-1px' },
+    { dimension: -42,                        expected: '-42px' },
+    { dimension: 1,                          expected: '1px' },
+    { dimension: 42,                         expected: '42px' },

-        { dimension: 0.0,                        expected: '0px' },
-        { dimension: -0.0,                       expected: '0px' },
-        { dimension: -1.0,                       expected: '-1px' },
-        { dimension: -42.0,                      expected: '-42px' },
-        { dimension: 1.0,                        expected: '1px' },
-        { dimension: 42.0,                       expected: '42px' },
+    { dimension: 0.0,                        expected: '0px' },
+    { dimension: -0.0,                       expected: '0px' },
+    { dimension: -1.0,                       expected: '-1px' },
+    { dimension: -42.0,                      expected: '-42px' },
+    { dimension: 1.0,                        expected: '1px' },
+    { dimension: 42.0,                       expected: '42px' },

-        { dimension: 0.42,                       expected: '0.42px' },
-        { dimension: -0.42,                      expected: '-0.42px' },
-        { dimension: -1.42,                      expected: '-1.42px' },
-        { dimension: -42.42,                     expected: '-42.42px' },
-        { dimension: 1.42,                       expected: '1.42px' },
-        { dimension: 42.42,                      expected: '42.42px' },
+    { dimension: 0.42,                       expected: '0.42px' },
+    { dimension: -0.42,                      expected: '-0.42px' },
+    { dimension: -1.42,                      expected: '-1.42px' },
+    { dimension: -42.42,                     expected: '-42.42px' },
+    { dimension: 1.42,                       expected: '1.42px' },
+    { dimension: 42.42,                      expected: '42.42px' },

-        { dimension: '0',                        expected: '0px' },
-        { dimension: '-0',                       expected: '-0px' },
-        { dimension: '-1',                       expected: '-1px' },
-        { dimension: '-42',                      expected: '-42px' },
-        { dimension: '1',                        expected: '1px' },
-        { dimension: '42',                       expected: '42px' },
+    { dimension: '0',                        expected: '0px' },
+    { dimension: '-0',                       expected: '-0px' },
+    { dimension: '-1',                       expected: '-1px' },
+    { dimension: '-42',                      expected: '-42px' },
+    { dimension: '1',                        expected: '1px' },
+    { dimension: '42',                       expected: '42px' },

-        { dimension: '0.0',                      expected: '0.0px' },
-        { dimension: '-0.0',                     expected: '-0.0px' },
-        { dimension: '-1.0',                     expected: '-1.0px' },
-        { dimension: '-42.0',                    expected: '-42.0px' },
-        { dimension: '1.0',                      expected: '1.0px' },
-        { dimension: '42.0',                     expected: '42.0px' },
+    { dimension: '0.0',                      expected: '0.0px' },
+    { dimension: '-0.0',                     expected: '-0.0px' },
+    { dimension: '-1.0',                     expected: '-1.0px' },
+    { dimension: '-42.0',                    expected: '-42.0px' },
+    { dimension: '1.0',                      expected: '1.0px' },
+    { dimension: '42.0',                     expected: '42.0px' },

-        { dimension: '0.42',                     expected: '0.42px' },
-        { dimension: '-0.42',                    expected: '-0.42px' },
-        { dimension: '-1.42',                    expected: '-1.42px' },
-        { dimension: '-42.42',                   expected: '-42.42px' },
-        { dimension: '1.42',                     expected: '1.42px' },
-        { dimension: '42.42',                    expected: '42.42px' },
+    { dimension: '0.42',                     expected: '0.42px' },
+    { dimension: '-0.42',                    expected: '-0.42px' },
+    { dimension: '-1.42',                    expected: '-1.42px' },
+    { dimension: '-42.42',                   expected: '-42.42px' },
+    { dimension: '1.42',                     expected: '1.42px' },
+    { dimension: '42.42',                    expected: '42.42px' },

-        { dimension: '0px',                      expected: '0px' },
-        { dimension: '-0px',                     expected: '-0px' },
-        { dimension: '-1px',                     expected: '-1px' },
-        { dimension: '-42px',                    expected: '-42px' },
-        { dimension: '1px',                      expected: '1px' },
-        { dimension: '42px',                     expected: '42px' },
+    { dimension: '0px',                      expected: '0px' },
+    { dimension: '-0px',                     expected: '-0px' },
+    { dimension: '-1px',                     expected: '-1px' },
+    { dimension: '-42px',                    expected: '-42px' },
+    { dimension: '1px',                      expected: '1px' },
+    { dimension: '42px',                     expected: '42px' },

-        { dimension: '0.0px',                    expected: '0.0px' },
-        { dimension: '-0.0px',                   expected: '-0.0px' },
-        { dimension: '-1.0px',                   expected: '-1.0px' },
-        { dimension: '-42.0px',                  expected: '-42.0px' },
-        { dimension: '1.0px',                    expected: '1.0px' },
-        { dimension: '42.0px',                   expected: '42.0px' },
+    { dimension: '0.0px',                    expected: '0.0px' },
+    { dimension: '-0.0px',                   expected: '-0.0px' },
+    { dimension: '-1.0px',                   expected: '-1.0px' },
+    { dimension: '-42.0px',                  expected: '-42.0px' },
+    { dimension: '1.0px',                    expected: '1.0px' },
+    { dimension: '42.0px',                   expected: '42.0px' },

-        { dimension: '0.42px',                   expected: '0.42px' },
-        { dimension: '-0.42px',                  expected: '-0.42px' },
-        { dimension: '-1.42px',                  expected: '-1.42px' },
-        { dimension: '-42.42px',                 expected: '-42.42px' },
-        { dimension: '1.42px',                   expected: '1.42px' },
-        { dimension: '42.42px',                  expected: '42.42px' },
+    { dimension: '0.42px',                   expected: '0.42px' },
+    { dimension: '-0.42px',                  expected: '-0.42px' },
+    { dimension: '-1.42px',                  expected: '-1.42px' },
+    { dimension: '-42.42px',                 expected: '-42.42px' },
+    { dimension: '1.42px',                   expected: '1.42px' },
+    { dimension: '42.42px',                  expected: '42.42px' },

-        { dimension: '0em',                      expected: '0em' },
-        { dimension: '-0em',                     expected: '-0em' },
-        { dimension: '-1em',                     expected: '-1em' },
-        { dimension: '-42em',                    expected: '-42em' },
-        { dimension: '1em',                      expected: '1em' },
-        { dimension: '42em',                     expected: '42em' },
+    { dimension: '0em',                      expected: '0em' },
+    { dimension: '-0em',                     expected: '-0em' },
+    { dimension: '-1em',                     expected: '-1em' },
+    { dimension: '-42em',                    expected: '-42em' },
+    { dimension: '1em',                      expected: '1em' },
+    { dimension: '42em',                     expected: '42em' },

-        { dimension: '0.0em',                    expected: '0.0em' },
-        { dimension: '-0.0em',                   expected: '-0.0em' },
-        { dimension: '-1.0em',                   expected: '-1.0em' },
-        { dimension: '-42.0em',                  expected: '-42.0em' },
-        { dimension: '1.0em',                    expected: '1.0em' },
-        { dimension: '42.0em',                   expected: '42.0em' },
+    { dimension: '0.0em',                    expected: '0.0em' },
+    { dimension: '-0.0em',                   expected: '-0.0em' },
+    { dimension: '-1.0em',                   expected: '-1.0em' },
+    { dimension: '-42.0em',                  expected: '-42.0em' },
+    { dimension: '1.0em',                    expected: '1.0em' },
+    { dimension: '42.0em',                   expected: '42.0em' },

-        { dimension: '0.42em',                   expected: '0.42em' },
-        { dimension: '-0.42em',                  expected: '-0.42em' },
-        { dimension: '-1.42em',                  expected: '-1.42em' },
-        { dimension: '-42.42em',                 expected: '-42.42em' },
-        { dimension: '1.42em',                   expected: '1.42em' },
-        { dimension: '42.42em',                  expected: '42.42em' },
+    { dimension: '0.42em',                   expected: '0.42em' },
+    { dimension: '-0.42em',                  expected: '-0.42em' },
+    { dimension: '-1.42em',                  expected: '-1.42em' },
+    { dimension: '-42.42em',                 expected: '-42.42em' },
+    { dimension: '1.42em',                   expected: '1.42em' },
+    { dimension: '42.42em',                  expected: '42.42em' },

-        { dimension: 'calc(42px - 1em)',         expected: 'calc(42px - 1em)' },
-        { dimension: 'calc(42px)',               expected: 'calc(42px)' },
-        { dimension: 'calc(42vh)',               expected: 'calc(42vh)' },
-        { dimension: 'min(42px, 1em)',           expected: 'min(42px, 1em)' },
-        { dimension: 'max(42px, 5rem)',          expected: 'max(42px, 5rem)' },
-        { dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' },
+    { dimension: 'calc(42px - 1em)',         expected: 'calc(42px - 1em)' },
+    { dimension: 'calc(42px)',               expected: 'calc(42px)' },
+    { dimension: 'calc(42vh)',               expected: 'calc(42vh)' },
+    { dimension: 'min(42px, 1em)',           expected: 'min(42px, 1em)' },
+    { dimension: 'max(42px, 5rem)',          expected: 'max(42px, 5rem)' },
+    { dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' },

-        { dimension: 'calc(42px-1em)',           expected: 'calc(42px-1em)' },
-        { dimension: 'min(42px,1em)',            expected: 'min(42px,1em)' },
-        { dimension: 'max(42px,5rem)',           expected: 'max(42px,5rem)' },
-        { dimension: 'clamp(42vh,23vw,13cap)',   expected: 'clamp(42vh,23vw,13cap)' },
-        { dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' }
-    ])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => {
-        expect(ensureUnit(dimension)).toBe(expected);
-    });
-});
+    { dimension: 'calc(42px-1em)',           expected: 'calc(42px-1em)' },
+    { dimension: 'min(42px,1em)',            expected: 'min(42px,1em)' },
+    { dimension: 'max(42px,5rem)',           expected: 'max(42px,5rem)' },
+    { dimension: 'clamp(42vh,23vw,13cap)',   expected: 'clamp(42vh,23vw,13cap)' },
+    { dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' }
+])('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 { expect, test } from 'vitest';
+import getCurrentLanguage from '../currentLanguage';
+
+const locales = [
+    { navigatorLanguage: 'en',                      localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de',                      localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'fr',                      localStorageLanguage: null, expected: 'fr'},
+
+    { navigatorLanguage: 'en-US',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'en-AU',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de-DE',                   localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'fr-FR',                   localStorageLanguage: null, expected: 'fr'},
+
+    { navigatorLanguage: 'en-us',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'en-au',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de-de',                   localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'fr-fr',                   localStorageLanguage: null, expected: 'fr'},
+
+    { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: null, expected: 'zh'},
+    { navigatorLanguage: 'zh-Hant-TW',              localStorageLanguage: null, expected: 'zh'},
+    { navigatorLanguage: 'uz-Latn-UZ',              localStorageLanguage: null, expected: 'uz'},
+
+    { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de-DE-u-co-phonebk',      localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', localStorageLanguage: null, expected: 'zh'},
+
+    { navigatorLanguage: 'en',                      localStorageLanguage: 'de', expected: 'de'},
+    { navigatorLanguage: 'de-DE',                   localStorageLanguage: 'en', expected: 'en'},
+    { navigatorLanguage: 'de-de',                   localStorageLanguage: 'en', expected: 'en'},
+    { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: 'fr', expected: 'fr'},
+    { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: 'zh', expected: 'zh'}
+];
+
+test.for(locales)('returns the language $expected (navigator: $navigatorLanguage; local storage: $localStorageLanguage)', ({ navigatorLanguage, localStorageLanguage, expected }) => {
+    Object.defineProperty(navigator, 'language', {
+        value: navigatorLanguage,
+        configurable: true
+    });
+
+    if (localStorageLanguage) {
+        localStorage.setItem('locale', localStorageLanguage);
+    };
+
+    expect(getCurrentLanguage()).toBe(expected);
+});
@@ -25,7 +25,7 @@ export const ensureUnit = function (d) {
    // if it ends with a number
    if (/\d$/.test(d)) {
        d += 'px';
-    }
+    };

    return d;
-};
+};
@@ -14,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	312734233b	test(settings): refactor switch component test Added and used getWrapper function to switch component test to mount the component and avoid repeating code.	2026-07-28 12:53:41 +02:00
jakob.scheid	c72c5dac46	test(settings): refactor selection component test Use exampleOptions instead of an own options array, which was equal to exampleOptions.	2026-07-28 12:43:41 +02:00
jakob.scheid	a73cc925fd	test(settings): refactor selection test getWrapper function Updated the getWrapper function to use object destructuring.	2026-07-28 12:41:42 +02:00
jakob.scheid	9473a42037	style(settings): remove unnecessary commas Removed unnecessary commas in settings input component and settings page component.	2026-07-28 12:35:27 +02:00
jakob.scheid	702f6d4787	style(settings): remove unnecessary comma Removed unnecessary trailing comma in the selection component.	2026-07-28 12:33:40 +02:00
jakob.scheid	98a07496f9	fix(settings): update settings input to use default value The SettingsInput component now uses the default value if there is a default value. Tests for this were added.	2026-07-28 12:28:06 +02:00
jakob.scheid	67981f6181	test(settings): refactor getWrapper function in settings input test Updated the getWrapper function to use object destructuring.	2026-07-28 12:20:17 +02:00
jakob.scheid	f33f00d7a8	docs(changelog): add settings renderer	2026-07-28 11:20:50 +02:00
jakob.scheid	bce7f98cdb	test(settings): add tests for settings page Added tests for the SettingsPage component: - correct heading - correct settings	2026-07-28 11:01:39 +02:00
jakob.scheid	20a6245cb6	test(settings): add tests for settings page link	2026-07-27 19:22:58 +02:00
jakob.scheid	b96bafa8bf	test(settings): add tests for settings view Added tests for the settings view (SettingsView.vue): - heading translation - sidebar top-level sections - correct main element	2026-07-27 19:05:07 +02:00
jakob.scheid	2d7d521e18	refactor(settings): move setttings path normalization utility to a separate file Moved the normalizePagePath utility from the settings page composable to a separate utility file and restructured tests accordingly.	2026-07-27 19:05:06 +02:00
jakob.scheid	afa7b11534	refactor(settings): remove unused utility Removed the utility getSectionHeadingLevel and its tests.	2026-07-27 19:05:06 +02:00
jakob.scheid	72c88838cb	feat(settings): add page path normalization type check Added a type check to the normalizePagePath function. The function now returns an empty array if the path is not a string.	2026-07-27 19:05:05 +02:00
jakob.scheid	e14ce45849	feat(settings): omit empty settings page segments The composable useSettingsPage now omits empty segments in the path.	2026-07-27 19:05:04 +02:00
jakob.scheid	966a984eb0	feat(settings): filter characters that would cause a broken URL from settings page path	2026-07-27 19:05:04 +02:00
jakob.scheid	d094ec1f0a	test(settings): distinguish between unit tests and integration tests Separated unit tests and integration tests in the test for useSettingsPage more clearly.	2026-07-27 19:05:03 +02:00
jakob.scheid	0d38e02767	refactor(settings): push route object instead of raw string Modified the useSettingsPage composable to use a route object instead of a raw string in goToSettingsPage and moved settings route child routes into the settings route itself using 'rest(.)'.	2026-07-27 19:05:02 +02:00
jakob.scheid	61a41ec813	feat(settings): make settings page composable more compatible The composable now uses replace instead of replaceAll which is not supported by some old browsers.	2026-07-27 19:05:01 +02:00
jakob.scheid	a1da2eb2e6	fix(settings): omit leading/trailing and consecuting dots in noralizePagePath	2026-07-27 19:05:00 +02:00
jakob.scheid	89dbf8f0e7	fix(settings): return router.push promise The settings page composable function to go to a settings page now returns the promise router.push returns.	2026-07-26 18:45:04 +02:00
jakob.scheid	f5af9b3675	test(settings): add tests for settings page composable	2026-07-26 16:04:23 +02:00
jakob.scheid	cd6f2da17f	test(settings): add tests for selection setting Added tests for the selection setting component: - correct display of options - shows values correctly - store of values - correct translation	2026-07-26 15:44:41 +02:00
jakob.scheid	32b9b860f6	feat(settings): wrap selection option label Added a wrapper for the settings selection option label to make it easier to identify (internal).	2026-07-25 16:47:43 +02:00
jakob.scheid	eb50936a06	fix(settings): use wrapper only if settings shown The .settings-main-content wrapper in the settings view is now only used if there are settings shown. It is not used if the settings are still loading or no section is selected.	2026-07-25 16:13:47 +02:00
jakob.scheid	5e37cdd778	feat(settings): wrap selection setting label Added a wrapper for the selection setting label to make it easier to find (internal).	2026-07-25 15:07:08 +02:00
jakob.scheid	bce61bcafb	fix(settings): add section fallback Added a simple message as a fallback that is used if no section is selected.	2026-07-25 15:06:41 +02:00
jakob.scheid	9ff74157e8	fix(settings): fix handling of non-existent paths Previously, the settings view now does not check whether the settings content is falsy. But, if the setting does not exist, the setting itself is undefined. So, if the specified settings path did not exist, an error was thrown. Now, the setting is checked for being falsy, not the setting content.	2026-07-25 13:45:43 +02:00
jakob.scheid	443967d314	chore: resolve merge conflicts	2026-07-25 13:42:04 +02:00
jakob.scheid	35f9a7363d	Merge branch 'main' into feature/settings-renderer	2026-07-25 13:33:41 +02:00
jakob.scheid	61cb9d1790	Merge remote-tracking branch 'refs/remotes/origin/feature/settings-renderer' into feature/settings-renderer	2026-07-24 12:53:23 +02:00
jakob.scheid	06fa759df3	test(settings): add settings input tests	2026-07-24 12:52:54 +02:00
jakob.scheid	68e8ff3e7d	feat(test-utils): add store setup functionality to mountComponent utility	2026-07-24 12:52:54 +02:00
jakob.scheid	62fa9e8799	fix(settings): prevent setting input done button from animating initially when mounting	2026-07-24 12:52:53 +02:00
jakob.scheid	53326b7e2f	feat(settings): make setting input reactive to stored setting	2026-07-24 12:52:53 +02:00
jakob.scheid	bcc4afe7fa	feat(test-utils): add pinia options to mountComponent test utility	2026-07-24 12:52:37 +02:00
jakob.scheid	99393c08f7	test(settings): add settings input tests	2026-07-24 12:49:17 +02:00
jakob.scheid	f2d228c24e	feat(test-utils): add store setup functionality to mountComponent utility	2026-07-24 12:19:17 +02:00
jakob.scheid	9ce4cec0bf	fix(settings): prevent setting input done button from animating initially when mounting	2026-07-24 12:17:48 +02:00
jakob.scheid	f81ce63062	feat(settings): make setting input reactive to stored setting	2026-07-24 12:04:42 +02:00
jakob.scheid	7abf25aa19	feat(tests): add pinia options to mountComponent test utility	2026-07-24 11:36:50 +02:00
jakob.scheid	bbae64771a	test(settings): add switch component tests	2026-07-23 14:54:19 +02:00
jakob.scheid	e6f5f5083f	chore(dependencies): add @pinia/testing dependency	2026-07-23 13:18:34 +02:00
jakob.scheid	a9e9bffd50	feat(settings): add settings page link	2026-07-23 12:42:10 +02:00
jakob.scheid	fe7453ef10	fix(settings): add key prop to settings in settings page	2026-07-23 12:40:33 +02:00
jakob.scheid	d0f86bfcec	feat(settings): implement settings pages navigation	2026-07-23 12:32:31 +02:00
jakob.scheid	5c46f1bba4	feat(settigns): add settings page composable	2026-07-23 12:23:49 +02:00
jakob.scheid	60c1f290ff	feat(settings): add utility functions to get settings Utility function getSetting for getting a first-level setting from a list of settings and unit tests. Utility function getSettingRecursively to get any setting from a list of settings. The setting can be at any nesting level in the settings list and unit tests.	2026-07-23 11:38:58 +02:00
jakob.scheid	ff0a6502fc	feat(icons): add chevron right icon	2026-07-22 14:04:38 +02:00
jakob.scheid	840d01e1a1	refactor(settings): move settings button style into a CSS module	2026-07-22 13:53:08 +02:00
jakob.scheid	2a1ebcf343	fix(settings): fix switch label cursor	2026-07-22 13:36:34 +02:00
jakob.scheid	129d380f56	feat(settings): add selection setting	2026-07-22 13:27:57 +02:00
jakob.scheid	dc366d9efa	fix(settings): prevent input setting done button from extending beyond viewport border	2026-07-22 00:42:40 +02:00
jakob.scheid	6385842b54	fix(settings): make switch setting style scoped	2026-07-21 19:28:55 +02:00
jakob.scheid	601e8284c1	refactor(settings): rename variable Renamed the variable 'inputClass' to 'inputType' because this name is more accurate	2026-07-21 18:37:39 +02:00
jakob.scheid	82a11af017	feat(settings): improve switch setting accessibility	2026-07-21 17:29:05 +02:00
jakob.scheid	45b52c2c11	feat(settings): improve input setting accessibility	2026-07-21 17:17:59 +02:00
jakob.scheid	e365e1750a	feat(settings): add animation to settings input done button	2026-07-21 16:50:15 +02:00
jakob.scheid	71a2d5a8d7	feat(settings): add settings component for inputs	2026-07-21 16:37:45 +02:00
jakob.scheid	4281942ea2	feat(icons): add check mark icon	2026-07-21 16:36:18 +02:00
jakob.scheid	dda36061ab	feat(style): add common input style	2026-07-21 16:32:20 +02:00
jakob.scheid	1f9d7ebc86	refactor(settings): remove unused setting class	2026-07-21 01:52:11 +02:00
jakob.scheid	4c64459488	feat(settings): remove large settings padding on small screens	2026-07-21 01:49:03 +02:00
jakob.scheid	c805228523	feat(settings): add support for boolean settings	2026-07-20 17:37:10 +02:00
jakob.scheid	10dc005cce	feat(settings): make switch use the settings store	2026-07-20 17:36:46 +02:00
jakob.scheid	267f009d2f	feat(settings): display current settings page	2026-07-20 17:33:56 +02:00
jakob.scheid	f71ebb174b	feat(settings): add settings store	2026-07-20 17:30:24 +02:00
jakob.scheid	ea8faa5deb	Revert "feat(dependencies): add lodash and its types to package.json and package-lock.json"	2026-07-20 17:12:02 +02:00
jakob.scheid	e7972e5689	chore(dependencies): add pinia-plugin-persistedstate dependency	2026-07-20 16:40:27 +02:00
jakob.scheid	34010ebd27	feat(dependencies): add lodash and its types to package.json and package-lock.json	2026-06-07 21:59:10 +02:00
jakob.scheid	1270291364	set up Pinia	2026-06-07 16:17:53 +02:00
jakob.scheid	5b9f32c5ee	feat(settings): add switch transitions	2026-06-06 23:32:55 +02:00
jakob.scheid	a3dd10582b	feat(settings): add switch component	2026-06-06 23:32:09 +02:00
jakob.scheid	443567237d	feat(settings): add utility function to determine the level of a settings section heading	2026-06-06 18:35:26 +02:00
jakob.scheid	b0b2678dff	feat(settings): get current section using watchEffect	2026-06-06 11:19:02 +02:00
jakob.scheid	4738f59a00	feat(settings): make active section content reactive	2026-06-06 01:52:10 +02:00
jakob.scheid	42ff52a4de	set button cursor to pointer	2026-06-06 01:34:33 +02:00
jakob.scheid	980805730a	feat(settings): go to the settings route if the settings sub-route does not exist	2026-06-05 15:31:25 +02:00
jakob.scheid	96d4d92f68	feat(settings): focus sidebar section button that is currently active	2026-06-05 15:28:57 +02:00
jakob.scheid	f947c4bd33	feat(settings): remove sidebar section link button container	2026-06-05 15:18:48 +02:00
jakob.scheid	2c81a7cdf7	feat(settings): show first-level sections in the sidebar	2026-06-05 13:51:58 +02:00
jakob.scheid	1a13b78eff	add common class for button links	2026-06-05 13:49:56 +02:00
jakob.scheid	c38b38707c	underline focused links that are no buttons	2026-06-05 13:47:14 +02:00
jakob.scheid	3ea55d24dc	add button CSS class	2026-06-05 13:45:54 +02:00
jakob.scheid	1f4037f64c	feature(router): remove trailing slash(es)	2026-06-05 13:45:31 +02:00
jakob.scheid	cf781ff3f5	feature(settings): load settings configuration	2026-06-05 13:45:11 +02:00
jakob.scheid	8acb675a03	fix(footer): update settings router link target	2026-06-05 13:02:26 +02:00
jakob.scheid	8d6e87af16	feature(settings): catch all subpaths of the settings path in the router	2026-06-05 12:51:08 +02:00