Merge pull request 'Fix top-level await in main.js' (#119) from chore/Old-browser-incompatibility into main

Reviewed-on: #119
Reviewed-by: Jakob Scheid

package.json

@@ -17,10 +17,11 @@
     "vue-router": "^5.0.6"
   },
   "devDependencies": {
+    "@vue/test-utils": "^2.4.6",
     "@vitejs/plugin-vue": "^6.0.6",
     "jsdom": "^29.1.1",
     "vite": "^8.0.10",
     "vite-plugin-html": "^3.2.2",
     "vitest": "^4.1.7"
   }
-}
+}

src/App.vue

@@ -42,15 +42,18 @@ watch(colorScheme, val => updateColorScheme(val))
 </template>
 
 <style scoped>
-.main-content {
+#app-wrapper {
     --main-content-padding-x: 30px;
     --main-content-padding-y: 40px;
-    --main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x) 0;
+    --main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x);
+}
+
+.main-content {
     flex-grow: 1;
 }
 
 @media (max-width: 48rem) {
-    .main-content {
+    #app-wrapper {
         --main-content-padding-x: 15px;
     }
 }

src/features/footer/components/Footer.vue

@@ -15,6 +15,8 @@ limitations under the License.
 -->
 
 <script setup>
+import LanguageSwitchButton from '@/features/i18n/components/LanguageSwitchButton.vue';
+
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -36,11 +38,10 @@ const copyrightPeriod =
             <RouterLink to="settings" class="link">
                 {{ t('preferences.settings') }}
             </RouterLink>
+            <LanguageSwitchButton />
         </div>
         <div class="footer-segment">
-            <div class="copyright-note">
-                &copy; {{ copyrightPeriod }} Seekra
-            </div>
+            &copy; {{ copyrightPeriod }} Seekra
         </div>
     </footer>
 </template>
@@ -51,6 +52,9 @@ const copyrightPeriod =
 }
 
 .footer-segment {
+    display: flex;
+    justify-content: center;
+    gap: 32px;
     padding: var(--padding-y);
     background-color: var(--light-bg);
     border-top: 1px solid var(--border);
@@ -59,9 +63,4 @@ const copyrightPeriod =
 .global-footer a {
     color: var(--dark);
 }
-
-.copyright-note {
-    display: flex;
-    justify-content: center;
-}
 </style>

src/features/i18n/components/LanguageSwitchButton.vue

@@ -71,7 +71,15 @@ const open = function () {
             </span>
         </button>
 
-        <ul v-if="isOpen" ref="languageDropdown" class="language-dropdown" role="listbox">
+        <ul
+            v-if="isOpen"
+            ref="languageDropdown"
+            class="language-dropdown"
+            role="listbox"
+            :style="{
+                bottom: 'calc(var(--offset) + 2 * var(--trigger-padding-y) + 1em)' // easier to add auto adaption to the available space
+            }"
+        >
             <li
                 v-for="lang in SUPPORTED_LANGUAGES"
                 :key="lang"
@@ -88,6 +96,7 @@ const open = function () {
 
 <style scoped>
 .language-switch {
+    --trigger-padding-y: 4px;
     position: relative;
 }
 
@@ -98,7 +107,7 @@ const open = function () {
     background: none;
     border: 1px solid var(--border);
     border-radius: 6px;
-    padding: 4px 10px;
+    padding: var(--trigger-padding-y) 10px;
     cursor: pointer;
     color: var(--dark);
 }
@@ -118,9 +127,9 @@ const open = function () {
 }
 
 .language-dropdown {
+    --offset: 6px;
     position: absolute;
     right: 0;
-    top: calc(100% + 6px);
     background-color: var(--light-bg);
     border: 1px solid var(--border);
     border-radius: 8px;

src/features/i18n/components/__tests__/LanguageSwitchButton.test.js

@@ -0,0 +1,114 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { expect, test, describe, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import LanguageSwitchButton from '../LanguageSwitchButton.vue';
+import { loadLanguage } from '@/i18n';
+
+vi.mock('@/i18n', () => ({
+    loadLanguage: vi.fn(() => Promise.resolve()),
+    LANGUAGES_RTL: ['ar', 'he'],
+    SUPPORTED_LANGUAGES: ['en', 'de', 'ar']
+}));
+
+vi.mock('vue-i18n', () => ({
+    useI18n: () => ({
+        t: (key) => key,
+        locale: { value: 'de' }
+    })
+}));
+
+vi.mock('@/features/icons/components/Icon.vue', () => ({
+    default: {
+        name: 'Icon',
+        template: '<span>Icon</span>'
+    }
+}));
+
+describe('LanguageSwitchButton.vue', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        localStorage.clear();
+        document.documentElement.lang = '';
+        document.documentElement.dir = '';
+    });
+
+    test('renders correctly with initial state closed', () => {
+        const wrapper = mount(LanguageSwitchButton);
+        
+        expect(wrapper.find('.language-button').exists()).toBe(true);
+        expect(wrapper.find('.language-dropdown').exists()).toBe(false);
+        expect(wrapper.find('.language-button').attributes('aria-expanded')).toBe('false');
+    });
+
+    test('opens the dropdown when language button is clicked', async () => {
+        const wrapper = mount(LanguageSwitchButton);
+        const button = wrapper.find('.language-button');
+        
+        await button.trigger('click');
+        
+        expect(wrapper.find('.language-dropdown').exists()).toBe(true);
+        expect(button.attributes('aria-expanded')).toBe('true');
+    });
+
+    const languageTestCases = [
+        { code: 'en', expectedDir: 'ltr' },
+        { code: 'de', expectedDir: 'ltr' },
+        { code: 'ar', expectedDir: 'rtl' }
+    ];
+
+    test.for(languageTestCases)('selectLanguage($code) sets localStorage, html attributes and changes layout direction to $expectedDir', async ({ code, expectedDir }) => {
+        const wrapper = mount(LanguageSwitchButton);
+        
+        await wrapper.find('.language-button').trigger('click');
+        
+        const options = wrapper.findAll('.language-dropdown li');
+        const optionToClick = options.find(opt => opt.text().includes(code));
+        
+        await optionToClick.trigger('click');
+
+        expect(loadLanguage).toHaveBeenCalledWith(code);
+        expect(localStorage.getItem('locale')).toBe(code);
+        expect(document.documentElement.lang).toBe(code);
+        expect(document.documentElement.dir).toBe(expectedDir);
+        expect(wrapper.find('.language-dropdown').exists()).toBe(false);
+    });
+
+    test('closes the dropdown when clicking outside the component', async () => {
+        const wrapper = mount(LanguageSwitchButton, {
+            attachTo: document.body
+        });
+
+        await wrapper.find('.language-button').trigger('click');
+        expect(wrapper.find('.language-dropdown').exists()).toBe(true);
+
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        const externalDiv = document.createElement('div');
+        document.body.appendChild(externalDiv);
+        
+        const clickEvent = new MouseEvent('click', { bubbles: true });
+        externalDiv.dispatchEvent(clickEvent);
+        
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.find('.language-dropdown').exists()).toBe(false);
+
+        wrapper.unmount();
+        externalDiv.remove();
+    });
+});

src/features/nav/components/Navbar.vue

@@ -15,25 +15,9 @@ limitations under the License.
 -->
 
 <script setup>
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
 import ColorSchemeButton from '@/features/colorScheme/components/ColorSchemeButton.vue';
-import LanguageSwitchButton from '@/features/i18n/components/LanguageSwitchButton.vue';
 import logo from '@/assets/images/logo.svg';
-import Searchbar from '@/features/search/components/Searchbar.vue';
-
-const route = useRoute();
-const searchQueryModel = defineModel();
-
-watch(() => route.name, name => {
-    searchQueryModel.value = name === 'searchResults' ? route.query.q || '' : '';
-});
-
-watch(() => route.query.q, q => {
-    if (route.name === 'searchResults') {
-        searchQueryModel.value = q || '';
-    }
-});
+import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.vue';
 </script>
 
 <template>
@@ -41,21 +25,16 @@ watch(() => route.query.q, q => {
         <RouterLink to="/" class="link button link">
             <img :src="logo" alt="Seekra" class="nav-logo" />
         </RouterLink>
-        <Searchbar
-            v-if="route.name === 'searchResults'"
-            class="search-bar"
-            v-model="searchQueryModel"
-            auto-submit
-        />
+        <NavbarSearchBarWrapper class="navbar-search-bar-wrapper" />
         <ul class="right-links">
-            <li>
-                <LanguageSwitchButton />
-            </li>
             <li>
                 <ColorSchemeButton />
             </li>
         </ul>
     </nav>
+    <div class="navbar-search-bar-wrapper-small-screens-wrapper">
+        <NavbarSearchBarWrapper class="navbar-search-bar-wrapper-small-screens" />
+    </div>
 </template>
 
 <style scoped>
@@ -63,7 +42,7 @@ watch(() => route.query.q, q => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 18px 40px;
+    padding: 18px var(--main-content-padding-x);
     height: 42px;
 }
 
@@ -89,7 +68,27 @@ watch(() => route.query.q, q => {
     height: 24px;
     width: auto;
 }
-.search-bar {
-    width: 70%;
+
+.navbar-search-bar-wrapper {
+    width: 100%;
+    padding: 0 30px;
+}
+
+.navbar-search-bar-wrapper-small-screens-wrapper {
+    padding: 0 15px 15px;
+}
+
+.navbar-search-bar-wrapper-small-screens {
+    display: none;
+}
+
+@media (max-width: 48rem) {
+    .navbar-search-bar-wrapper {
+        display: none;
+    }
+
+    .navbar-search-bar-wrapper-small-screens {
+        display: block;
+    }
 }
 </style>

src/features/nav/components/NavbarSearchBarWrapper.vue

@@ -0,0 +1,43 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import Searchbar from '@/features/search/components/Searchbar.vue';
+
+import { watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const searchQueryModel = defineModel();
+
+watch(() => route.name, name => {
+    searchQueryModel.value = name === 'searchResults' ? route.query.q || '' : '';
+});
+
+watch(() => route.query.q, q => {
+    if (route.name === 'searchResults') {
+        searchQueryModel.value = q || '';
+    }
+});
+</script>
+
+<template>
+    <Searchbar
+        v-if="route.name === 'searchResults'"
+        v-model="searchQueryModel"
+        auto-submit
+    />
+</template>

src/features/search/components/Searchbar.vue

@@ -39,7 +39,7 @@ const submitSearch = function () {
 
 <template>
     <div>
-        <form @submit.prevent="submitSearch">
+        <form @submit.prevent="submitSearch" class="search-form">
             <div class="search-wrapper">
                 <input
                 v-model="searchQuery"
@@ -73,7 +73,8 @@ const submitSearch = function () {
     border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
     padding: var(--padding);
     padding-left: var(--padding-left);
-    width: calc(100% - var(--padding-left));
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .search-wrapper input {
@@ -83,6 +84,7 @@ const submitSearch = function () {
     font-size: 1rem;
     background: transparent;
     height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
+    padding-left: 12px;
 }
 
 .search-button {
@@ -108,4 +110,8 @@ const submitSearch = function () {
 .search-button:hover {
     background: var(--primary-color-l-1);
 }
+
+.search-form {
+    width: 100%;
+}
 </style>

src/features/search/views/SearchResultsView.vue

@@ -53,9 +53,7 @@ const { t } = useI18n();
     --error-message-padding: 2em;
     display: flex;
     justify-content: center;
-    width: calc(100% - 2 * var(--main-content-padding-x));
-    position: absolute;
-    top: calc(50vh - 0.5 * var(--error-message-height) - var(--error-message-padding));
+    width: 100%;
 }
 
 .search-results-error-message {

src/features/settings/types/settingsConfig.js

@@ -53,10 +53,6 @@ limitations under the License.
  * @typedef {BoolSettingConfig | NumberSettingConfig | StringSettingConfig | SelectionSettingConfig | SectionSettingConfig} SettingConfigEntry
  */
 
-/**
- * @typedef {Object} SettingsConfig
- * @property {SettingConfigEntry[]} contents
- */
 /**
  * @typedef {{ type: 'bool', name: string, i18n: string, description?: string, default: boolean }} BoolSettingConfig
  * @typedef {{ type: 'number', name: string, i18n: string, description?: string, default: number }} NumberSettingConfig
@@ -64,5 +60,6 @@ limitations under the License.
  * @typedef {{ type: 'selection', name: string, i18n: string, description?: string, default: string | string[], allowMultiple?: boolean, options: SelectionOption[] }} SelectionSettingConfig
  * @typedef {{ type: 'section', name: string, i18n?: string, description?: string, content: SettingConfigEntry[] }} SectionSettingConfig
  * @typedef {BoolSettingConfig | NumberSettingConfig | StringSettingConfig | SelectionSettingConfig | SectionSettingConfig} SettingConfigEntry
- * @typedef {{ contents: SettingConfigEntry[] }} SettingsConfig
+ * @typedef {{ contents: SettingConfigEntry[] }} FirstLevelSettingConfigEntry
+ * @typedef {{ contents: FirstLevelSettingConfigEntry[] }} SettingsConfig
  */

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

@@ -0,0 +1,758 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, test, expect } from 'vitest';
+import { validateSettingsConfig, validateEntry, validateSelectionOptions, assertType, assertString } from '../settingsValidator';
+
+describe('validateSettingsConfig', () => {
+    test.for([
+        { 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: []
+        }, expected: true },
+        { raw: {
+            contents: [
+                {
+                    name: 'general',
+                    i18n: 'settings.settings.general',
+                    content: [
+                        {
+                            type: 'bool',
+                            name: 'Enable feature 42',
+                            i18n: 'settings.settings.general.enableFeature42'
+                        }
+                    ]
+                }
+            ]
+        }, expected: true },
+        { raw: {
+            contents: [
+                {
+                    name: 'general',
+                    i18n: 'settings.settings.general',
+                    content: [
+                        {
+                            type: 'bool',
+                            name: 'Enable feature 42',
+                            i18n: 'settings.settings.general.enableFeature42'
+                        }
+                    ]
+                },
+                {
+                    name: 'copyOfGeneral',
+                    i18n: 'settings.settings.copyOfGeneral',
+                    content: [
+                        {
+                            type: 'bool',
+                            name: 'Enable feature 42',
+                            i18n: 'settings.settings.general.enableFeature42'
+                        }
+                    ]
+                },
+            ]
+        }, expected: true },
+        { raw: {
+            contents: [
+                {
+                    name: 'general',
+                    i18n: 'settings.settings.general',
+                    content: [
+                        {
+                            type: 'bool',
+                            name: 'Enable feature 42',
+                            i18n: 'settings.settings.general.enableFeature42'
+                        }
+                    ]
+                },
+                {
+                    name: 'copyOfGeneral',
+                    i18n: 'settings.settings.copyOfGeneral',
+                    content: [
+                        {
+                            type: 'bool',
+                            name: 'Enable feature 42',
+                            default: false,
+                            i18n: 'settings.settings.general.enableFeature42'
+                        }
+                    ]
+                },
+                {
+                    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: true },
+        { raw: {
+            contents: [
+                {
+                    name: 'general',
+                    i18n: 'settings.settings.general',
+                    content: [
+                        {
+                            type: 'bool',
+                            name: 'Enable feature 42',
+                            i18n: 'settings.settings.general.enableFeature42'
+                        }
+                    ]
+                },
+                {
+                    name: 'copyOfGeneral',
+                    i18n: 'settings.settings.copyOfGeneral',
+                    content: [
+                        {
+                            type: 'bool',
+                            name: 'Enable feature 42',
+                            default: false,
+                            i18n: 'settings.settings.general.enableFeature42'
+                        }
+                    ]
+                },
+                {
+                    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: {
+            contents: [
+                {
+                    type: 'bool',
+                    name: 'aStandaloneBooleanSetting',
+                    i18n: 'settings.settings.aStandaloneBooleanSetting',
+                    default: true
+                },
+                {
+                    name: 'general',
+                    i18n: 'settings.settings.general',
+                    content: [
+                        {
+                            type: 'bool',
+                            name: 'Enable feature 42',
+                            i18n: 'settings.settings.general.enableFeature42'
+                        }
+                    ]
+                },
+                {
+                    name: 'copyOfGeneral',
+                    i18n: 'settings.settings.copyOfGeneral',
+                    content: [
+                        {
+                            type: 'bool',
+                            name: 'Enable feature 42',
+                            default: false,
+                            i18n: 'settings.settings.general.enableFeature42'
+                        }
+                    ]
+                },
+                {
+                    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 },
+        { 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
+                                }
+                            ]
+                        },
+                    ]
+                },
+            ]
+        }, 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', () => {
+    test.for([
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable' }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: true }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: false }],
+    
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label' }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: 42 }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: 0 }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: -42.7 }],
+    
+        [{ name: 'aString', type: 'string', i18n: 'aString.label' }],
+        [{ name: 'aString', type: 'string', i18n: 'aString.label', default: '' }],
+        [{ name: 'aString', type: 'string', i18n: 'aString.label', default: 'Seekra is great!' }],
+
+        [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', options: [
+            { name: 'yes', i18n: 'selectSomething.options.yes' },
+            { name: 'no', i18n: 'selectSomething.options.no' },
+            { name: 'maybe', i18n: 'selectSomething.options.maybe' }
+        ] }],
+
+        [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: 'no', options: [
+            { name: 'yes', i18n: 'selectSomething.options.yes' },
+            { name: 'no', i18n: 'selectSomething.options.no' },
+            { name: 'maybe', i18n: 'selectSomething.options.maybe' }
+        ] }],
+
+        [{ 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 }
+        ] }],
+        [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: [
+            { name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: true },
+            { name: 'enableFeature43', type: 'bool', i18n: 'feature.43.enable', default: true }
+        ] }],
+        [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: [
+            { name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: true },
+            { name: 'enableFeature43', type: 'bool', i18n: 'feature.43.enable', default: true },
+            { name: 'aSecondSection', type: 'section', i18n: 'sections.aSecondSection.title', content: [
+                { name: 'enableFeature44', type: 'bool', i18n: 'feature.44.enable', default: true },
+            ] }
+        ] }]
+    ])('throws no error for the entry %s', ([ entry ]) => {
+        expect(() => validateEntry(entry)).not.throws(Error);
+    });
+
+    test.for([
+        [{ name: 'enableFeature42', type: 'bool', i18n: '' }],
+        [{ name: 'enableFeature42', type: 'thisTypeDoesNotExistAndHasAVeryLongName', i18n: 'feature.42.enable' }],
+        [{ name: '', type: 'thisTypeDoesNotExistAndHasAVeryLongName', i18n: 'feature.42.enable' }],
+        [{ name: '', type: 'thisTypeDoesNotExistAndHasAVeryLongName', i18n: '' }],
+        [{ name: '', type: 'bool', i18n: '' }],
+        [{ name: '', type: 'bool', i18n: '' }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: 42 }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: '42' }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: 'Seekra' }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: 'true' }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: 'false' }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: 'undefined' }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: 'null' }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: [] }],
+        [{ name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: {} }],
+        [{ name: 'enableFeature42', type: '', i18n: 'feature.42.enable', default: {} }],
+    
+        [{ name: '', type: 'number', i18n: 'aNumber.label' }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: '42' }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: 'zero' }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: 'undefined' }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: 'false' }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: true }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: false }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: [] }],
+        [{ name: 'aNumber', type: 'number', i18n: 'aNumber.label', default: {} }],
+        [{ name: 'aNumber', type: '', i18n: 'aNumber.label', default: {} }],
+        [{ name: 'aNumber', type: '', i18n: 'aNumber.label', default: 42 }],
+    
+        [{ name: 'aString', type: 'string', i18n: '' }],
+        [{ name: 'aString', type: 'string', i18n: 'aString.label', default: 42 }],
+        [{ name: 'aString', type: 'string', i18n: 'aString.label', default: true }],
+        [{ name: 'aString', type: 'string', i18n: 'aString.label', default: false }],
+        [{ name: 'aString', type: 'string', i18n: 'aString.label', default: [] }],
+        [{ name: 'aString', type: 'string', i18n: 'aString.label', default: {} }],
+        [{ name: 'aString', type: 'string', i18n: '', default: {} }],
+
+        [{ 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: 'c', options: [
+            { name: 'a', i18n: 'a' },
+            { name: 'b', i18n: 'b' }
+        ] }],
+        [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: 'a', options: [
+            { name: 'a', i18n: 'a' },
+            { name: 'b', i18n: '' },
+            { name: 'c' }
+        ] }],
+        [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: 'a', allowMultiple: 'false', options: [
+            { name: 'a', i18n: 'a' },
+            { name: 'b', i18n: '' },
+            { name: 'c' }
+        ] }],
+
+        [{ name: 'selectSomething', type: 'selection', i18n: 'selectSomething.title', default: 'no', options: [
+            { name: 'yes', i18n: '' },
+            { name: '', i18n: 'selectSomething.options.no' },
+            { name: 'maybe', i18n: 'selectSomething.options.maybe' },
+            { name: '', i18n: '' },
+            { name: 42, i18n: 43 },
+            { name: '' },
+            { i18n: '' },
+            {}
+        ] }],
+
+        [{ name: 'aSection', type: 'section', i18n: '', content: [] }],
+        [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: '' }],
+        [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: '[]' }],
+        [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: 'a' }],
+        [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: [
+            { name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: true },
+            { name: 'enableFeature43', type: 'bool', i18n: 'feature.42.enable', default: 0 },
+            { name: 'enableFeature44', type: 'bool' }
+        ] }],
+        [{ name: 'aSection', type: 'section', i18n: 'sections.aSection.title', content: [
+            { name: 'enableFeature42', type: 'bool', i18n: 'feature.42.enable', default: true },
+            { name: 'enableFeature43', type: 'bool', i18n: 'feature.43.enable', default: true },
+            { name: 'aSecondSection', type: 'section', i18n: 'sections.aSecondSection.title', content: 'Hello' },
+            { name: 'aSecondSection', type: 'section', i18n: '', content: [] },
+            { name: 'aSecondSection', type: 'section', i18n: 'i18n', content: [] },
+            { name: 'aSecondSection', type: 'section', content: [] }
+        ] }]
+    ])('throws an error for the entry %s', ([ entry ]) => {
+        expect(() => validateEntry(entry)).throws(Error);
+    });
+});
+
+describe('validateSelectionOptions', () => {
+    test.for([
+        [[{ name: 'test', i18n: 'test.label' }]],
+        [[{ name: 'test', i18n: 'test.label' }, { name: 'test2', i18n: 'test2.label' }]],
+        [[{ name: 'test', i18n: 'test.label' }, { name: 'test', i18n: 'test2.label' }, { name: 'test3', i18n: 'test.label' }]]
+    ])('throws no error for the options %s', ([ options ]) => {
+        expect(() => validateSelectionOptions(options)).not.throws(Error);
+    });
+
+    test.for([
+        [[{}]],
+        [[{ i18n: '' }]],
+        [[{ i18n: 'a' }]],
+        [[{ name: 'a' }]],
+        [[{ name: '' }]],
+        [[{ name: '', i18n: 'test.label' }]],
+        [[{ name: 'test', i18n: '' }]],
+        [[{ name: '', i18n: '' }]],
+        [[{ name: '', i18n: 'test.label' }, { name: 'test2', i18n: '' }]],
+        [[{ name: 'test', i18n: '' }, { name: '', i18n: 'test2.label' }, { name: '', i18n: '  ' }, { name: '42', i18n: '42.i18n' }]],
+        [[]]
+    ])('throws an error for the options %s', ([ options ]) => {
+        expect(() => validateSelectionOptions(options)).throws(Error);
+    });
+});
+
+describe('assertType', () => {
+    test.for([
+        ['bool'],
+        ['number'],
+        ['string'],
+        ['selection'],
+        ['section']
+    ])('throws no error for the value %s', ([ value ]) => {
+        expect(() => assertType(value)).not.throw(Error);
+    });
+
+    test.for([
+        [''],
+        [' '],
+        ['  '],
+        ['   '],
+
+        ['42'],
+        ['0'],
+        ['-42'],
+        ['-42.0'],
+        ['-0.0'],
+
+        ['a'],
+        ['ab'],
+        ['SeekraIsGreat!'],
+        ['Seekra is great!'],
+
+        [undefined],
+        [null]
+    ])('throws an error for the value %s', ([ value ]) => {
+        expect(() => assertType(value)).throw(Error);
+    });
+});
+
+describe('assertString', () => {
+    test.for([
+        ['a'],
+        ['b'],
+        ['ab'],
+
+        ['0'],
+        ['42'],
+
+        ['null'],
+        ['undefined'],
+
+        ['()&%())']
+    ])('throws no error for the value %s', ([ value ]) => {
+        expect(() => assertString(value)).not.throw(Error);
+    });
+
+    test.for([
+        [0],
+        [1],
+        [42],
+        [-1],
+        [-42],
+
+        [''],
+        [' '],
+        ['  '],
+        ['     ']
+    ])('throws an error for the value %s', ([ value ]) => {
+        expect(() => assertString(value)).throws(Error);
+    });
+});

src/features/settings/utils/settingsValidator.js

@@ -16,13 +16,13 @@ limitations under the License.
 
 const VALID_TYPES = ['bool', 'number', 'string', 'selection', 'section'];
 
-function assertString(value, path) {
+export const assertString = function assertString (value, path) {
     if (typeof value !== 'string' || value.trim() === '') {
         throw new Error(`[settings] "${path}" must be a non-empty string`);
     }
 }
 
-function assertType(value, path) {
+export const assertType = function assertType (value, path) {
     if (!VALID_TYPES.includes(value)) {
         throw new Error(
             `[settings] "${path}" has invalid type "${value}". Must be one of: ${VALID_TYPES.join(', ')}`
@@ -30,21 +30,23 @@ function assertType(value, path) {
     }
 }
 
-function validateSelectionOptions(options, path) {
+export const validateSelectionOptions = function validateSelectionOptions (options, path) {
     if (!Array.isArray(options) || options.length === 0) {
         throw new Error(`[settings] "${path}.options" must be a non-empty array`);
-    }
+    };
     options.forEach((opt, i) => {
         assertString(opt.name, `${path}.options[${i}].name`);
         assertString(opt.i18n, `${path}.options[${i}].i18n`);
     });
 }
 
-function validateEntry(entry, path) {
+export const validateEntry = function validateEntry (entry, path) {
     assertType(entry.type, `${path}.type`);
+    
+    assertString(entry.name, `${path}.name`);
+    assertString(entry.i18n, `${path}.i18n`);
 
     if (entry.type === 'section') {
-        assertString(entry.name, `${path}.name`);
         if (!Array.isArray(entry.content)) {
             throw new Error(`[settings] "${path}.content" must be an array`);
         }
@@ -53,29 +55,47 @@ function validateEntry(entry, path) {
         );
         return;
     }
-
-    assertString(entry.name, `${path}.name`);
-    assertString(entry.i18n, `${path}.i18n`);
-
+    
+    if (entry.type === 'selection') {
+        validateSelectionOptions(entry.options, path);
+        if (typeof entry.allowMultiple !== 'boolean' && entry.allowMultiple) {
+            throw new Error(`[settings] "${path}.allowMultiple" must be a boolean`);
+        }
+    };
     if (entry.default !== undefined) {
         if (entry.type === 'bool' && typeof entry.default !== 'boolean') {
-             throw new Error(`[settings] "${path}.default" must be a boolean`);
-         }
-         if (entry.type === 'number' && typeof entry.default !== 'number') {
-             throw new Error(`[settings] "${path}.default" must be a number`);
-         }
-         if (entry.type === 'string' && typeof entry.default !== 'string') {
-             throw new Error(`[settings] "${path}.default" must be a string`);
-         }
-         if (entry.type === 'selection') {
-             validateSelectionOptions(entry.options, path);
-             if (typeof entry.allowMultiple !== 'boolean') {
-                 throw new Error(`[settings] "${path}.allowMultiple" must be a boolean`);
-             }
-         }
+            throw new Error(`[settings] "${path}.default" must be a boolean`);
+        }
+        if (entry.type === 'number' && typeof entry.default !== 'number') {
+            throw new Error(`[settings] "${path}.default" must be a number`);
+        }
+        if (entry.type === 'string' && typeof entry.default !== 'string') {
+            throw new Error(`[settings] "${path}.default" must be a string`);
+        }
+        if (entry.type === 'selection') {
+            if (typeof entry.default !== 'string') {
+                throw new Error(`[settings] "${path}.default" must be a string`);
+            };
+            if (!entry.options.map((option) => option.name).includes(entry.default)) {
+                throw new Error(`[settings] option "${path}.default" does not exist`);
+            };
+        };
     }
 }
 
+export const validateFirstLevelSection = function validateFirstLevelSection (section, path) {
+    assertString(section.name);
+    assertString(section.i18n);
+
+    if (!Array.isArray(section.content)) {
+        throw new Error(`[settings] "${path}.content" must be an array`);
+    };
+
+    section.content.forEach((entry, i) =>
+        validateEntry(entry, `${path}.content[${i}]`)
+    );
+};
+
 /**
  * Validates a raw settings config object.
  * @param {unknown} raw
@@ -90,7 +110,7 @@ export function validateSettingsConfig(raw) {
             throw new Error('[settings] "contents" must be an array');
         }
         raw.contents.forEach((entry, i) =>
-            validateEntry(entry, `contents[${i}]`)
+            validateFirstLevelSection(entry, `contents[${i}]`)
         );
         return { valid: true, config: raw };
     } catch (e) {

src/main.js

@@ -16,15 +16,18 @@ limitations under the License.
 
 import { createApp } from 'vue'
 import App from './App.vue'
-import { i18n, loadLanguage } from './i18n';
-import getCurrentLanguage from './utils/currentLanguage';
+import { i18n, loadLanguage } from './i18n'
+import getCurrentLanguage from './utils/currentLanguage'
 import router from './router'
+
 import './styles/common.css'
 import './styles/variables/colors.css'
 
-await loadLanguage(getCurrentLanguage());
+(async () => {
+  await loadLanguage(getCurrentLanguage())
 
-createApp(App)
+  createApp(App)
     .use(router)
     .use(i18n)
-    .mount('#app')
+    .mount('#app')
+})()

src/utils/__tests__/cssDimensions.test.js

@@ -0,0 +1,122 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { expect,  test } from 'vitest';
+import { ensureUnit } from '../cssDimensions';
+
+test.for([
+    { dimension: null,                       expected: '0px' },
+    { dimension: undefined,                  expected: '0px' },
+
+    { dimension: 0,                          expected: '0px' },
+    { dimension: -0,                         expected: '0px' },
+    { dimension: -1,                         expected: '-1px' },
+    { dimension: -42,                        expected: '-42px' },
+    { dimension: 1,                          expected: '1px' },
+    { dimension: 42,                         expected: '42px' },
+
+    { dimension: 0.0,                        expected: '0px' },
+    { dimension: -0.0,                       expected: '0px' },
+    { dimension: -1.0,                       expected: '-1px' },
+    { dimension: -42.0,                      expected: '-42px' },
+    { dimension: 1.0,                        expected: '1px' },
+    { dimension: 42.0,                       expected: '42px' },
+
+    { dimension: 0.42,                       expected: '0.42px' },
+    { dimension: -0.42,                      expected: '-0.42px' },
+    { dimension: -1.42,                      expected: '-1.42px' },
+    { dimension: -42.42,                     expected: '-42.42px' },
+    { dimension: 1.42,                       expected: '1.42px' },
+    { dimension: 42.42,                      expected: '42.42px' },
+
+    { dimension: '0',                        expected: '0px' },
+    { dimension: '-0',                       expected: '-0px' },
+    { dimension: '-1',                       expected: '-1px' },
+    { dimension: '-42',                      expected: '-42px' },
+    { dimension: '1',                        expected: '1px' },
+    { dimension: '42',                       expected: '42px' },
+
+    { dimension: '0.0',                      expected: '0.0px' },
+    { dimension: '-0.0',                     expected: '-0.0px' },
+    { dimension: '-1.0',                     expected: '-1.0px' },
+    { dimension: '-42.0',                    expected: '-42.0px' },
+    { dimension: '1.0',                      expected: '1.0px' },
+    { dimension: '42.0',                     expected: '42.0px' },
+
+    { dimension: '0.42',                     expected: '0.42px' },
+    { dimension: '-0.42',                    expected: '-0.42px' },
+    { dimension: '-1.42',                    expected: '-1.42px' },
+    { dimension: '-42.42',                   expected: '-42.42px' },
+    { dimension: '1.42',                     expected: '1.42px' },
+    { dimension: '42.42',                    expected: '42.42px' },
+
+    { dimension: '0px',                      expected: '0px' },
+    { dimension: '-0px',                     expected: '-0px' },
+    { dimension: '-1px',                     expected: '-1px' },
+    { dimension: '-42px',                    expected: '-42px' },
+    { dimension: '1px',                      expected: '1px' },
+    { dimension: '42px',                     expected: '42px' },
+
+    { dimension: '0.0px',                    expected: '0.0px' },
+    { dimension: '-0.0px',                   expected: '-0.0px' },
+    { dimension: '-1.0px',                   expected: '-1.0px' },
+    { dimension: '-42.0px',                  expected: '-42.0px' },
+    { dimension: '1.0px',                    expected: '1.0px' },
+    { dimension: '42.0px',                   expected: '42.0px' },
+
+    { dimension: '0.42px',                   expected: '0.42px' },
+    { dimension: '-0.42px',                  expected: '-0.42px' },
+    { dimension: '-1.42px',                  expected: '-1.42px' },
+    { dimension: '-42.42px',                 expected: '-42.42px' },
+    { dimension: '1.42px',                   expected: '1.42px' },
+    { dimension: '42.42px',                  expected: '42.42px' },
+
+    { dimension: '0em',                      expected: '0em' },
+    { dimension: '-0em',                     expected: '-0em' },
+    { dimension: '-1em',                     expected: '-1em' },
+    { dimension: '-42em',                    expected: '-42em' },
+    { dimension: '1em',                      expected: '1em' },
+    { dimension: '42em',                     expected: '42em' },
+
+    { dimension: '0.0em',                    expected: '0.0em' },
+    { dimension: '-0.0em',                   expected: '-0.0em' },
+    { dimension: '-1.0em',                   expected: '-1.0em' },
+    { dimension: '-42.0em',                  expected: '-42.0em' },
+    { dimension: '1.0em',                    expected: '1.0em' },
+    { dimension: '42.0em',                   expected: '42.0em' },
+
+    { dimension: '0.42em',                   expected: '0.42em' },
+    { dimension: '-0.42em',                  expected: '-0.42em' },
+    { dimension: '-1.42em',                  expected: '-1.42em' },
+    { dimension: '-42.42em',                 expected: '-42.42em' },
+    { dimension: '1.42em',                   expected: '1.42em' },
+    { dimension: '42.42em',                  expected: '42.42em' },
+
+    { dimension: 'calc(42px - 1em)',         expected: 'calc(42px - 1em)' },
+    { dimension: 'calc(42px)',               expected: 'calc(42px)' },
+    { dimension: 'calc(42vh)',               expected: 'calc(42vh)' },
+    { dimension: 'min(42px, 1em)',           expected: 'min(42px, 1em)' },
+    { dimension: 'max(42px, 5rem)',          expected: 'max(42px, 5rem)' },
+    { dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' },
+
+    { dimension: 'calc(42px-1em)',           expected: 'calc(42px-1em)' },
+    { dimension: 'min(42px,1em)',            expected: 'min(42px,1em)' },
+    { dimension: 'max(42px,5rem)',           expected: 'max(42px,5rem)' },
+    { dimension: 'clamp(42vh,23vw,13cap)',   expected: 'clamp(42vh,23vw,13cap)' },
+    { dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' }
+])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => {
+    expect(ensureUnit(dimension)).toBe(expected);
+});

src/utils/__tests__/currentLanguage.test.js

@@ -0,0 +1,61 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { expect, test } from 'vitest';
+import getCurrentLanguage from '../currentLanguage';
+
+const locales = [
+    { navigatorLanguage: 'en',                      localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de',                      localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'fr',                      localStorageLanguage: null, expected: 'fr'},
+
+    { navigatorLanguage: 'en-US',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'en-AU',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de-DE',                   localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'fr-FR',                   localStorageLanguage: null, expected: 'fr'},
+
+    { navigatorLanguage: 'en-us',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'en-au',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de-de',                   localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'fr-fr',                   localStorageLanguage: null, expected: 'fr'},
+
+    { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: null, expected: 'zh'},
+    { navigatorLanguage: 'zh-Hant-TW',              localStorageLanguage: null, expected: 'zh'},
+    { navigatorLanguage: 'uz-Latn-UZ',              localStorageLanguage: null, expected: 'uz'},
+
+    { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de-DE-u-co-phonebk',      localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', localStorageLanguage: null, expected: 'zh'},
+
+    { navigatorLanguage: 'en',                      localStorageLanguage: 'de', expected: 'de'},
+    { navigatorLanguage: 'de-DE',                   localStorageLanguage: 'en', expected: 'en'},
+    { navigatorLanguage: 'de-de',                   localStorageLanguage: 'en', expected: 'en'},
+    { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: 'fr', expected: 'fr'},
+    { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: 'zh', expected: 'zh'}
+];
+
+test.for(locales)('returns the language $expected (navigator: $navigatorLanguage; local storage: $localStorageLanguage)', ({ navigatorLanguage, localStorageLanguage, expected }) => {
+    Object.defineProperty(navigator, 'language', {
+        value: navigatorLanguage,
+        configurable: true
+    });
+
+    if (localStorageLanguage) {
+        localStorage.setItem('locale', localStorageLanguage);
+    };
+
+    expect(getCurrentLanguage()).toBe(expected);
+});

src/views/NotFound.vue

@@ -43,7 +43,7 @@ const { t } = useI18n();
 .error-message{
     margin: 0;
     font-weight: 600;
-    font-size: 2vw;
+    font-size: 1.75rem;
 }
 #link {
     align-items: center;

src/views/SearchView.vue

@@ -67,9 +67,10 @@ const submitSearch = function () {
     max-width: 100%;
 }
 
-.slogan{
-    margin: 0;
+.slogan {
+    margin-top: 1rem;
     font-size: small;
+    line-height: normal;
 }
 
 .search-container {