test(settings): add tests for selection reactivity

Selection now uses computed with getter and setter.

src/App.vue

@@ -19,33 +19,36 @@ import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
 
 import { updatePageTitle } from './router';
-import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
+import { useSettings } from './features/settings/composables/useSettings.js';
-import { ref, provide, watch, watchEffect } from 'vue';
+import { computed, watch, watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
-const { getColorScheme, updateColorScheme } = useColorScheme();
+const { getSetting } = useSettings();
-const colorScheme = ref(getColorScheme());
+const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
-provide('colorScheme', colorScheme);
+
-watch(colorScheme, (newValue) => {
+const updateColorScheme = function updateColorScheme (newColorScheme) {
-    updateColorScheme(newValue);
     document.body.style.setProperty(colorScheme, {
         auto: 'normal',
         dark: 'dark',
         light: 'light'
     });
-    if (newValue === 'dark') {
+    if (newColorScheme === 'dark') {
         document.body.classList.add('dark');
     } else {
         document.body.classList.remove('dark');
     }
-    if (newValue === 'auto') {
+    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));
 </script>

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -17,12 +17,14 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';
 
-import { inject } from 'vue';
+import { useSettings } from '@/features/settings/composables/useSettings';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
+const { getSetting, setSetting } = useSettings();
 
-const colorScheme = inject('colorScheme');
+const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
 
 const colorSchemeNextMapper = {
     'light': 'dark',
@@ -39,11 +41,15 @@ const colorSchemeIconMapper = {
 const getTooltipTranslation = function (colorScheme) {
     return t(`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`);
 };
+
+const setColorScheme = function setColorScheme (newColorScheme) {
+    setSetting(['appearance', 'colorScheme'], newColorScheme);
+};
 </script>
 
 <template>
     <button class="color-scheme-button"
-        @click="colorScheme = colorSchemeNextMapper[colorScheme]"
+        @click="setColorScheme(colorSchemeNextMapper[colorScheme])"
         :aria-label="getTooltipTranslation(colorScheme)"
         :title="getTooltipTranslation(colorScheme)"
     >

src/features/colorScheme/components/__tests__/ColorSchemeButton.test.js

@@ -0,0 +1,47 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import ColorSchemeButton from '../ColorSchemeButton.vue';
+import { useSettings } from '@/features/settings/composables/useSettings.js';
+import { mountComponent } from '@/test-utils/mountComponent';
+import { describe, expect, test } from 'vitest';
+
+const { getSetting } = useSettings();
+
+const colorSchemeSettingPath = ['appearance', 'colorScheme']
+
+const getWrapper = function getWrapper () {
+    return mountComponent(ColorSchemeButton);
+};
+
+describe('ColorSchemeButton', () => {
+    test('sets color scheme setting', async () => {
+        const wrapper = getWrapper();
+
+        expect(getSetting(colorSchemeSettingPath)).toBe('auto');
+        
+        const colorSchemeButton = wrapper.find('button');
+
+        await colorSchemeButton.trigger('click');
+        expect(getSetting(colorSchemeSettingPath)).toBe('light');
+
+        await colorSchemeButton.trigger('click');
+        expect(getSetting(colorSchemeSettingPath)).toBe('dark');
+
+        await colorSchemeButton.trigger('click');
+        expect(getSetting(colorSchemeSettingPath)).toBe('auto');
+    });
+});

src/features/colorScheme/composables/useColorScheme.js

@@ -1,39 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-export const useColorScheme = function () {
-    const getColorScheme = function () {
-        let colorScheme = localStorage.getItem('colorScheme') || 'auto';
-        if (!(colorScheme === 'dark' || colorScheme === 'light' || colorScheme === 'auto')) {
-            colorScheme = 'auto';
-        };
-        return colorScheme;
-    };
-
-    const updateColorScheme = function (newScheme) {
-        let actualNewScheme = newScheme;
-        if (!(actualNewScheme === 'dark' || actualNewScheme === 'light' || actualNewScheme === 'auto')) {
-            actualNewScheme = 'auto';
-        };
-
-        localStorage.setItem('colorScheme', actualNewScheme);
-    };
-
-    return {
-        getColorScheme,
-        updateColorScheme
-    };
-};

src/features/footer/components/Footer.vue

@@ -54,6 +54,7 @@ const copyrightPeriod =
 .footer-segment {
     display: flex;
     justify-content: center;
+    align-items: center;
     gap: 32px;
     padding: var(--padding-y);
     background-color: var(--light-bg);

src/features/settings/components/Selection.vue

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

src/features/settings/components/Switch.vue

@@ -16,7 +16,7 @@ limitations under the License.
 
 <script setup>
 import { useSettingsStore } from '../stores/settingsStore';
-import { useId } from 'vue';
+import { ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -35,8 +35,16 @@ const switchId = useId();
 
 const store = useSettingsStore();
 
+const enabled = ref(null);
+watch(store, (newStore) => {
+    enabled.value = newStore.get(props.path);
+});
+// set value after registering watcher to avoid immediate value change
+enabled.value = store.get(props.path) ?? props.setting.default;
+
 const toggle = function toggle () {
-    store.set(props.path, !store.get(props.path));
+    enabled.value = !enabled.value;
+    store.set(props.path, enabled.value);
 };
 </script>
 
@@ -47,7 +55,7 @@ const toggle = function toggle () {
         </label>
         <div
             class="switch-wrapper"
-            :class="{ enabled: store.get(props.path) }"
+            :class="{ enabled }"
             :title="t('settings.switch.title')"
             :aria-label="t('settings.switch.ariaLabel')"
             :aria-labelledby="labelId"

src/features/settings/components/__tests__/Selection.test.js

@@ -90,6 +90,32 @@ describe('Selection', () => {
         expect(inputsChecked).toStrictEqual([false, true, false]);
     });
 
+    test('reacts on store change', async () => {
+        const wrapper = getWrapper({
+            options: exampleOptions,
+            piniaOptions: {
+                setupStores: () => {
+                    const store = useSettingsStore();
+                    store.set('selection', 'o1');
+                }
+            }
+        });
+        const settings = useSettingsStore();
+
+        {
+            const inputs = wrapper.findAll('input');
+            const inputsChecked = getChecked(inputs);
+            expect(inputsChecked).toStrictEqual([false, true, false]);
+        }
+        {
+            settings.set('selection', 'o2');
+            await nextTick();
+            const inputs = wrapper.findAll('input');
+            const inputsChecked = getChecked(inputs);
+            expect(inputsChecked).toStrictEqual([false, false, true]);
+        }
+    });
+
     test('shows multiple values from store', () => {
         const wrapper = getWrapper({
             options: exampleOptions,

src/features/settings/components/__tests__/Switch.test.js

@@ -20,17 +20,23 @@ import { useSettingsStore } from '../../stores/settingsStore.js';
 import { expect, describe, test } from 'vitest';
 import { nextTick } from 'vue';
 
-const getWrapper = function getWrapper ({ i18n = 'switch1', translations = {} } = {}) {
+const getWrapper = function getWrapper ({
+    i18n = 'switch1',
+    defaultValue = undefined,
+    translations = {},
+    piniaOptions = {}
+} = {}) {
     return mountComponent(Switch, {
         attrs: {
             setting: {
                 type: 'bool',
                 name: 'switch',
-                i18n
+                i18n,
+                default: defaultValue
             },
             path: 'switch'
         }
-    }, translations);
+    }, translations, [], piniaOptions);
 };
 
 describe('Switch', () => {
@@ -53,6 +59,42 @@ describe('Switch', () => {
         expect(switchElementClasses2).not.toContain('enabled');
     });
 
+    test('shows default value', () => {
+        const wrapper = getWrapper({
+            defaultValue: true
+        });
+
+        const switchElement = wrapper.find('.switch-wrapper');
+        expect(switchElement.classes('enabled')).toBeTruthy();
+    });
+
+    test('shows stored value instead of default value', () => {
+        const wrapper = getWrapper({
+            defaultValue: true,
+            piniaOptions: {
+                setupStores: () => {
+                    const store = useSettingsStore();
+                    store.set('switch', false);
+                }
+            }
+        });
+
+        const switchElement = wrapper.find('.switch-wrapper');
+        expect(switchElement.classes('enabled')).toBeFalsy();
+    });
+
+    test('reacts on store change', async () => {
+        const wrapper = getWrapper();
+        const store = useSettingsStore();
+
+        const switchElement = wrapper.find('.switch-wrapper');
+        expect(switchElement.classes('enabled')).toBeFalsy();
+        
+        store.set('switch', true);
+        await nextTick();
+        expect(switchElement.classes('enabled')).toBeTruthy();
+    });
+
     test('toggles value in store', async () => {
         const wrapper = getWrapper();
         

src/features/settings/composables/__tests__/useSettings.test.js

@@ -0,0 +1,91 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useSettings } from '../useSettings';
+import { createTestingPinia } from '@pinia/testing';
+import { setActivePinia } from 'pinia';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+
+const settingDefaultValue = vi.hoisted(() => 42);
+const settingPath = ['test', 'number'];
+
+vi.mock('../../settings.json', () => ({
+    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
+        })
+    );
+});

src/features/settings/composables/useSettings.js

@@ -0,0 +1,52 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import settings from '../settings.json';
+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 };
+};

src/features/settings/composables/useSettingsConfig.js

@@ -1,48 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { ref, readonly } from 'vue';
-import { loadSettingsConfig } from '../utils/settingsParser.js';
-
-const config  = ref(null);
-const error   = ref(null);
-const loading = ref(false);
-
-/**
- * Provides reactive access to the parsed settings configuration.
- * The config is loaded once and shared across all consumers.
- */
-export function useSettingsConfig() {
-    async function load() {
-        loading.value = true;
-        error.value   = null;
-        try {
-            config.value = await loadSettingsConfig();
-        } catch (e) {
-            error.value  = e.message;
-            config.value = null;
-        } finally {
-            loading.value = false;
-        }
-    }
-
-    return {
-        config:  readonly(config),
-        error:   readonly(error),
-        loading: readonly(loading),
-        load,
-    };
-}

src/features/settings/settings.json

@@ -1,3 +1,30 @@
 {
-    "contents": []
+    "contents": [
-}
+        {
+            "name": "appearance",
+            "i18n": "settings.settings.appearance.title",
+            "content": [
+                {
+                    "name": "colorScheme",
+                    "type": "selection",
+                    "i18n": "settings.settings.appearance.contents.colorScheme.title",
+                    "default": "auto",
+                    "options": [
+                        {
+                            "name": "auto",
+                            "i18n": "settings.settings.appearance.contents.colorScheme.options.auto"
+                        },
+                        {
+                            "name": "light",
+                            "i18n": "settings.settings.appearance.contents.colorScheme.options.light"
+                        },
+                        {
+                            "name": "dark",
+                            "i18n": "settings.settings.appearance.contents.colorScheme.options.dark"
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}

src/features/settings/utils/__tests__/settingsValidator.test.js

@@ -20,18 +20,10 @@ import { validateSettingsConfig, validateEntry, validateSelectionOptions, assert
 describe('settingsValidator', () => {
     describe('validateSettingsConfig', () => {
         test.for([
-            { raw: false, expected: false },
+            { settings: {
-            { raw: true, expected: false },
-            { raw: 0, expected: false },
-            { raw: 42, expected: false },
-            { raw: '', expected: false },
-            { raw: ' ', expected: false },
-            { raw: 'a', expected: false },
-            { raw: {}, expected: false },
-            { raw: {
                 contents: []
-            }, expected: true },
+            } },
-            { raw: {
+            { settings: {
                 contents: [
                     {
                         name: 'general',
@@ -45,8 +37,8 @@ describe('settingsValidator', () => {
                         ]
                     }
                 ]
-            }, expected: true },
+            } },
-            { raw: {
+            { settings: {
                 contents: [
                     {
                         name: 'general',
@@ -71,8 +63,8 @@ describe('settingsValidator', () => {
                         ]
                     },
                 ]
-            }, expected: true },
+            } },
-            { raw: {
+            { settings: {
                 contents: [
                     {
                         name: 'general',
@@ -128,12 +120,12 @@ describe('settingsValidator', () => {
                                         default: 'str'
                                     }
                                 ]
-                            },
+                            }
                         ]
-                    },
+                    }
                 ]
-            }, expected: true },
+            } },
-            { raw: {
+            { settings: {
                 contents: [
                     {
                         name: 'general',
@@ -190,12 +182,283 @@ describe('settingsValidator', () => {
                                         default: 'str'
                                     }
                                 ]
-                            },
+                            }
+                        ]
+                    }
+                ]
+            } }
+        ])('does not throw an error and returns input', ({ settings }) => {
+            validateSettingsConfig(settings);
+        });
+
+        test.for([
+            { settings: false },
+            { settings: true },
+            { settings: 0 },
+            { settings: 42 },
+            { settings: '' },
+            { settings: ' ' },
+            { settings: 'a' },
+            { settings: {} },
+            { settings: {
+                content: [
+                    {
+                        type: 'sectio',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
                         ]
                     },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                allowMultiple: 'false',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 'str'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
                 ]
-            }, expected: true },
+            } },
-            { raw: {
+            { settings: {
+                content: [
+                    {
+                        type: 'sectio',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 'str'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            } },
+            { settings: {
+                content: [
+                    {
+                        type: 'section',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 'str'
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            } },
+            { settings: {
+                contents: [
+                    {
+                        type: 'section',
+                        name: 'general',
+                        i18n: 'settings.settings.general',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'copyOfGeneral',
+                        i18n: 'settings.settings.copyOfGeneral',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 42',
+                                default: false,
+                                i18n: 'settings.settings.general.enableFeature42'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'section',
+                        name: 'aSection',
+                        i18n: 'settings.settings.aSection',
+                        content: [
+                            {
+                                type: 'bool',
+                                name: 'Enable feature 43',
+                                i18n: 'settings.settings.aSection.enableFeature43',
+                                default: 'true'
+                            },
+                            {
+                                type: 'selection',
+                                name: 'language',
+                                i18n: 'settings.settings.aSection.language.label',
+                                default: 'en',
+                                options: [
+                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
+                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
+                                ]
+                            },
+                            {
+                                type: 'section',
+                                name: 'section2',
+                                i18n: 'settings.settings.aSection.section2.label',
+                                content: [
+                                    {
+                                        type: 'string',
+                                        name: 'string',
+                                        i18n: 'settings.settings.aSection.sections.string',
+                                        default: 42
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            } },
+            { settings: {
                 contents: [
                     {
                         type: 'bool',
@@ -258,276 +521,14 @@ describe('settingsValidator', () => {
                                         default: 'str'
                                     }
                                 ]
-                            },
+                            }
                         ]
-                    },
+                    }
                 ]
-            }, expected: false },
+            } }
-            { raw: {
+        ])('throws error', ({ settings }) => {
-                contents: [
+            expect(() => validateSettingsConfig(settings)).toThrow(Error)
-                    {
+        })
-                        type: 'section',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43',
-                                default: 'true'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 42
-                                    }
-                                ]
-                            },
-                        ]
-                    },
-                ]
-            }, expected: false },
-            { raw: {
-                content: [
-                    {
-                        type: 'section',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 'str'
-                                    }
-                                ]
-                            },
-                        ]
-                    },
-                ]
-            }, expected: false },
-            { raw: {
-                content: [
-                    {
-                        type: 'sectio',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 'str'
-                                    }
-                                ]
-                            },
-                        ]
-                    },
-                ]
-            }, expected: false },
-            { raw: {
-                content: [
-                    {
-                        type: 'sectio',
-                        name: 'general',
-                        i18n: 'settings.settings.general',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'copyOfGeneral',
-                        i18n: 'settings.settings.copyOfGeneral',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 42',
-                                default: false,
-                                i18n: 'settings.settings.general.enableFeature42'
-                            }
-                        ]
-                    },
-                    {
-                        type: 'section',
-                        name: 'aSection',
-                        i18n: 'settings.settings.aSection',
-                        content: [
-                            {
-                                type: 'bool',
-                                name: 'Enable feature 43',
-                                i18n: 'settings.settings.aSection.enableFeature43'
-                            },
-                            {
-                                type: 'selection',
-                                name: 'language',
-                                i18n: 'settings.settings.aSection.language.label',
-                                default: 'en',
-                                allowMultiple: 'false',
-                                options: [
-                                    { name: 'en', i18n: 'settings.settings.aSection.language.options.en' },
-                                    { name: 'de', i18n: 'settings.settings.aSection.language.options.de' },
-                                ]
-                            },
-                            {
-                                type: 'section',
-                                name: 'section2',
-                                i18n: 'settings.settings.aSection.section2.label',
-                                content: [
-                                    {
-                                        type: 'string',
-                                        name: 'string',
-                                        i18n: 'settings.settings.aSection.sections.string',
-                                        default: 'str'
-                                    }
-                                ]
-                            },
-                        ]
-                    },
-                ]
-            }, expected: false }
-        ])('returns valid: $expected', ({ raw, expected }) => {
-            const result = validateSettingsConfig(raw);
-            if (!result.valid) {
-                console.error('Error message:', result.error);
-            };
-            expect(result.valid).toBe(expected);
-        });
     });
 
     describe('validateEntry', () => {

src/features/settings/utils/settingsParser.js

@@ -1,38 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { validateSettingsConfig } from './settingsValidator.js';
-
-/**
- * Loads and parses the settings configuration via dynamic import.
- * @returns {Promise<import('../types/settingsConfig').SettingsConfig>}
- */
-export async function loadSettingsConfig() {
-    let raw;
-
-    try {
-        raw = (await import('../settings.json')).default;
-    } catch (e) {
-        throw new Error(`[settings] Failed to load settings.json: ${e.message}`);
-    }
-
-    const result = validateSettingsConfig(raw);
-    if (!result.valid) {
-        throw new Error(result.error);
-    }
-
-    return result.config;
-}

src/features/settings/utils/settingsValidator.js

@@ -117,18 +117,13 @@ export const validateFirstLevelSection = function validateFirstLevelSection (sec
  * @returns {{ valid: true, config: import('../types/settingsConfig').SettingsConfig } | { valid: false, error: string }}
  */
 export function validateSettingsConfig(raw) {
-    try {
+    if (!raw || typeof raw !== 'object') {
-        if (!raw || typeof raw !== 'object') {
+        throw new Error('[settings] Config must be an object');
-            throw new Error('[settings] Config must be an object');
-        }
-        if (!Array.isArray(raw.contents)) {
-            throw new Error('[settings] "contents" must be an array');
-        }
-        raw.contents.forEach((entry, i) =>
-            validateFirstLevelSection(entry, `contents[${i}]`)
-        );
-        return { valid: true, config: raw };
-    } catch (e) {
-        return { valid: false, error: e.message };
     }
+    if (!Array.isArray(raw.contents)) {
+        throw new Error('[settings] "contents" must be an array');
+    }
+    raw.contents.forEach((entry, i) =>
+        validateFirstLevelSection(entry, `contents[${i}]`)
+    );
 }

src/features/settings/views/SettingsView.vue

@@ -18,9 +18,9 @@ limitations under the License.
 import LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
 import SettingsPage from '../components/SettingsPage.vue';
 
+import settingsConfiguration from '../settings.json';
 import { getSettingRecursively } from '../utils/getSetting.js';
-import { loadSettingsConfig } from '../utils/settingsParser';
+import { computed, onMounted, ref, watch } from 'vue';
-import { onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -28,39 +28,27 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
-const settingsLoaded = ref(false)
+const settings = settingsConfiguration.contents;
-const settings = ref([]);
-const activeSectionContent = ref({});
-const activeSection = ref(null);
 
-watchEffect(() => {
+const activePath = computed(() => {
     const segments = route.path
         .split('/')
         .filter(Boolean);
 
-    activeSection.value = segments.slice(1, segments.length).join('.');
+    return segments.slice(1, segments.length);
 });
 
-const updateSettings = function updateSettings () {
+const activeSection = ref(null);
-    if (activeSection.value) {
+const updateSettings = async function updateSettings () {
-        const setting = getSettingRecursively(activeSection.value.split('.'), settings.value);
+    const setting = getSettingRecursively(activePath.value, settings);
-        if (!setting) {
+    if (setting) {
-            router.push('/settings');
+        activeSection.value = setting;
-        } else {
-            activeSectionContent.value = setting;
-        };
     } else {
-        activeSectionContent.value = { content: [] };
+        await router.push('/settings');
-    };
+    }
 };
-
+watch(route, (newRoute) => updateSettings(newRoute));
-onMounted(async () => {
+onMounted(updateSettings);
-    settings.value = (await loadSettingsConfig()).contents;
-    watchEffect(() => {
-        updateSettings();
-    });
-    settingsLoaded.value = true;
-});
 
 const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
     if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
@@ -81,7 +69,7 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSi
                         <RouterLink
                             :to="`/settings/${section.name}`"
                             class="button button-link link sidebar-section"
-                            :class="{ active: activeSection === section.name }"
+                            :class="{ active: activeSection && activeSection.name === section.name }"
                             @click="toggleSidebarIfSmallScreen(toggleSidebar)"
                         >
                             {{ t(section.i18n) }}
@@ -89,12 +77,9 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSi
                     </li>
                 </ul>
             </template>
-            <div v-if="!settingsLoaded" class="main-content--loading">
+            <div v-if="activeSection">
-                {{ t('loading') }}
-            </div>
-            <div v-else-if="activeSection" class="main-content--loaded">
                 <div class="settings-main-content">
-                    <SettingsPage :setting="activeSectionContent" :path="activeSection" />
+                    <SettingsPage :setting="activeSection" :path="activePath" />
                 </div>
             </div>
             <div v-else class="main-content--no-section">

src/features/settings/views/__tests__/SettingsView.test.js

@@ -16,8 +16,8 @@ limitations under the License.
 
 import SettingsView from '../SettingsView.vue';
 import { mountComponent } from '@/test-utils/mountComponent.js';
-import { flushPromises } from '@vue/test-utils';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { nextTick } from 'vue';
 
 const settingsHoisted = vi.hoisted(() => [
     {
@@ -197,10 +197,8 @@ const settings = settingsHoisted.values();
 const originalCurrentSection = 's0';
 let currentSection = originalCurrentSection;
 
-vi.mock('../../utils/settingsParser', () => ({
+vi.mock('../../settings.json', () => ({
-    loadSettingsConfig: vi.fn().mockResolvedValue({
+    default: { contents: settingsHoisted }
-        contents: settingsHoisted
-    })
 }));
 
 vi.mock('vue-router', async (importOriginal) => {
@@ -235,9 +233,7 @@ describe('SettingsView', () => {
     describe('sidebar', () => {
         test('shows all top-level sections', async () => {
             const wrapper = getWrapper();
-
+            await nextTick();
-            await flushPromises();
-            await wrapper.vm.$nextTick();
 
             const sidebarItems = wrapper.findAll('.sidebar-sections-list > li');
             settings.forEach((setting, index) => {
@@ -254,47 +250,27 @@ describe('SettingsView', () => {
 
     describe('main', () => {
         describe('correct element', () => {
-            test('shows that it is loading', () => {
-                const wrapper = getWrapper();
-
-                const mainContentLoading = wrapper.find('.main-content--loading');
-                const mainContentLoaded = wrapper.find('.main-content--loaded');
-                const mainContentNoSection = wrapper.find('.main-content--no-section');
-
-                expect(mainContentLoading.exists()).toBe(true);
-                expect(mainContentLoaded.exists()).toBe(false);
-                expect(mainContentNoSection.exists()).toBe(false);
-            });
-
             test('shows that no section is selected', async () => {
                 currentSection = '';
 
                 const wrapper = getWrapper();
+                await nextTick();
 
-                await flushPromises();
+                const mainContent = wrapper.find('.settings-main-content');
-                await wrapper.vm.$nextTick();
-
-                const mainContentLoading = wrapper.find('.main-content--loading');
-                const mainContentLoaded = wrapper.find('.main-content--loaded');
                 const mainContentNoSection = wrapper.find('.main-content--no-section');
 
-                expect(mainContentLoading.exists()).toBe(false);
+                expect(mainContent.exists()).toBe(false);
-                expect(mainContentLoaded.exists()).toBe(false);
                 expect(mainContentNoSection.exists()).toBe(true);
             });
 
             test('shows main content', async () => {
                 const wrapper = getWrapper();
+                await nextTick();
 
-                await flushPromises();
+                const mainContent = wrapper.find('.settings-main-content');
-                await wrapper.vm.$nextTick();
-
-                const mainContentLoading = wrapper.find('.main-content--loading');
-                const mainContentLoaded = wrapper.find('.main-content--loaded');
                 const mainContentNoSection = wrapper.find('.main-content--no-section');
 
-                expect(mainContentLoading.exists()).toBe(false);
+                expect(mainContent.exists()).toBe(true);
-                expect(mainContentLoaded.exists()).toBe(true);
                 expect(mainContentNoSection.exists()).toBe(false);
             });
         });

src/features/sidebar/components/Sidebar.vue

@@ -36,7 +36,7 @@ const toggleSidebar = function toggleSidebar () {
         <div class="sidebar-controls">
             <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
         </div>
-        <div class="sidebar-content" v-if="props.expanded">
+        <div class="sidebar-content" v-show="props.expanded">
             <slot />
         </div>
     </nav>
@@ -61,6 +61,10 @@ const toggleSidebar = function toggleSidebar () {
 }
 
 @media (max-width: 48rem) {
+    .sidebar {
+        border: none;
+    }
+
     .sidebar:not(.expanded) .sidebar-expand-button {
         display: none;
     }

src/locales/de.json

@@ -60,6 +60,21 @@
             "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"
+                        }
+                    }
+                }
+            }
         }
     }
 }

src/locales/en.json

@@ -60,6 +60,21 @@
             "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"
+                        }
+                    }
+                }
+            }
         }
     }
 }

src/main.js

@@ -30,6 +30,9 @@ import rawFonts from './styles/fonts.json';
 import './styles/common.css';
 import './styles/variables/colors.css';
 
+import settings from './features/settings/settings.json';
+import { validateSettingsConfig } from './features/settings/utils/settingsValidator';
+
 (async () => {
     const fonts = rawFonts.map((font) => new FontFace(
         font.family ?? '',
@@ -54,6 +57,8 @@ import './styles/variables/colors.css';
     
     const pinia = createPinia();
     pinia.use(piniaPluginPersistedstate);
+
+    validateSettingsConfig(settings);
     
     createApp(App)
         .use(router)