feat(sidebar): decrease horizontal padding when sidebar is not expanded

Set the horizontal padding of the unexpanded sidebar to 1em.

.env

@@ -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

src/App.vue

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

src/config/env.js

@@ -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;
-};

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -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)"
     >

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

@@ -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');
-    });
-});

src/features/colorScheme/composables/useColorScheme.js

@@ -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
+    };
+};

src/features/footer/components/Footer.vue

@@ -54,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);

src/features/settings/components/Selection.vue

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

src/features/settings/components/Switch.vue

@@ -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"

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

@@ -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,

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

@@ -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,42 +53,6 @@ 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

@@ -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('../../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

@@ -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 '../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

@@ -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,
+    };
+}

src/features/settings/settings.json

@@ -1,30 +1,3 @@
 {
-    "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"
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-}
+    "contents": []
+}

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

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

src/features/settings/utils/settingsParser.js

@@ -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;
+}

src/features/settings/utils/settingsValidator.js

@@ -73,27 +73,12 @@ 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`);
+            };
         };
     }
 }
@@ -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}]`)
-    );
 }

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 { computed, onMounted, ref, watch } from 'vue';
+import { loadSettingsConfig } from '../utils/settingsParser';
+import { onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -28,31 +28,39 @@ const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
 
-const settings = settingsConfiguration.contents;
+const settingsLoaded = ref(false)
+const settings = ref([]);
+const activeSectionContent = ref({});
+const activeSection = ref(null);
 
-const activePath = computed(() => {
+watchEffect(() => {
     const segments = route.path
         .split('/')
         .filter(Boolean);
 
-    return segments.slice(1, segments.length);
+    activeSection.value = segments.slice(1, segments.length).join('.');
 });
 
-const activeSection = ref(null);
-const updateSettings = async function updateSettings () {
-    const setting = getSettingRecursively(activePath.value, settings);
-    if (setting) {
-        activeSection.value = setting;
+const updateSettings = function updateSettings () {
+    if (activeSection.value) {
+        const setting = getSettingRecursively(activeSection.value.split('.'), settings.value);
+        if (!setting) {
+            router.push('/settings');
+        } else {
+            activeSectionContent.value = setting;
+        };
     } else {
-        await router.push('/settings');
-    }
+        activeSectionContent.value = { content: [] };
+    };
 };
-watch(route, (newRoute) => updateSettings(newRoute));
-onMounted(updateSettings);
 
-const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
-    if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
-};
+onMounted(async () => {
+    settings.value = (await loadSettingsConfig()).contents;
+    watchEffect(() => {
+        updateSettings();
+    });
+    settingsLoaded.value = true;
+});
 </script>
 
 <template>
@@ -63,23 +71,25 @@ const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSi
             </h1>
         </header>
         <LeftSidebarLayout class="layout">
-            <template #sidebar="{ toggleSidebar }">
+            <template #sidebar>
                 <ul class="sidebar-sections-list">
                     <li v-for="section in settings">
                         <RouterLink
                             :to="`/settings/${section.name}`"
                             class="button button-link link sidebar-section"
-                            :class="{ active: activeSection && activeSection.name === section.name }"
-                            @click="toggleSidebarIfSmallScreen(toggleSidebar)"
+                            :class="{ active: activeSection === section.name }"
                         >
                             {{ t(section.i18n) }}
                         </RouterLink>
                     </li>
                 </ul>
             </template>
-            <div v-if="activeSection">
+            <div v-if="!settingsLoaded" class="main-content--loading">
+                {{ t('loading') }}
+            </div>
+            <div v-else-if="activeSection" class="main-content--loaded">
                 <div class="settings-main-content">
-                    <SettingsPage :setting="activeSection" :path="activePath" />
+                    <SettingsPage :setting="activeSectionContent" :path="activeSection" />
                 </div>
             </div>
             <div v-else class="main-content--no-section">

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,8 +197,10 @@ const settings = settingsHoisted.values();
 const originalCurrentSection = 's0';
 let currentSection = originalCurrentSection;
 
-vi.mock('../../settings.json', () => ({
-    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);
             });
         });

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

src/layouts/LeftSidebarLayout.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
 const expanded = ref(props.expanded);
 
-const toggleSidebar = function toggleSidebar () {
+const toggleExpanded = function toggleExpanded () {
     expanded.value = !expanded.value;
 };
 </script>
@@ -37,13 +37,13 @@ const toggleSidebar = function toggleSidebar () {
 <template>
     <div class="layout-container" :class="{ expanded }">
         <div class="sidebar-expand-button-container">
-            <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
         </div>
-        <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
-            <slot name="sidebar" :toggleSidebar="toggleSidebar" />
+        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
+            <slot name="sidebar" />
         </Sidebar>
         <main class="main-content">
-            <slot :toggleSidebar="toggleSidebar" />
+            <slot />
         </main>
     </div>
 </template>

src/locales/de.json

@@ -60,21 +60,6 @@
             "option": {
                 "ariaLabel": "Wählt die Option {option} aus"
             }
-        },
-        "settings": {
-            "appearance": {
-                "title": "Erscheinungsbild",
-                "contents": {
-                    "colorScheme": {
-                        "title": "Farbschema",
-                        "options": {
-                            "auto": "An Systemfarbschema anpassen",
-                            "light": "Hell",
-                            "dark": "Dunkel"
-                        }
-                    }
-                }
-            }
         }
     }
 }

src/locales/en.json

@@ -60,21 +60,6 @@
             "option": {
                 "ariaLabel": "Selects option {option}"
             }
-        },
-        "settings": {
-            "appearance": {
-                "title": "Appearance",
-                "contents": {
-                    "colorScheme": {
-                        "title": "Color Scheme",
-                        "options": {
-                            "auto": "Adapt to system color scheme",
-                            "light": "Light",
-                            "dark": "Dark"
-                        }
-                    }
-                }
-            }
         }
     }
 }

src/main.js

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { getAssetsUrl } from './config/env';
 import { createApp } from 'vue'
 import { createPinia } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
@@ -26,39 +25,15 @@ 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/settings.json';
-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)

src/styles/common.css

@@ -19,7 +19,6 @@ body {
     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 {
@@ -86,9 +85,4 @@ input {
 
 .button:hover {
     background-color: var(--light-hover);
-}
-
-/* Temporary until a custom tap highlight is implemented. */
-* {
-    -webkit-tap-highlight-color: transparent;
 }

src/styles/fonts.json

@@ -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"
-            }
-        ]
-    }
-]