test(settings): add test cases for empty setting value return value

Added a store to cache the settings configuration. The getSetting
function from useSettings is now synchronous and uses this cache.
The settings cache is set when loading the settings initially
(asnychronously).

src/App.vue

@@ -26,7 +26,7 @@ import { useRoute } from 'vue-router';
 const route = useRoute();
 
 const { getColorScheme, updateColorScheme } = useColorScheme();
-const colorScheme = ref(null);
+const colorScheme = ref(getColorScheme());
 provide('colorScheme', colorScheme);
 watch(colorScheme, (newValue) => {
     updateColorScheme(newValue);
@@ -46,7 +46,6 @@ watch(colorScheme, (newValue) => {
         document.body.classList.remove('color-scheme-auto');
     }
 });
-colorScheme.value = getColorScheme();
 
 watchEffect(() => updatePageTitle(route));
 </script>

src/features/footer/components/Footer.vue

@@ -40,21 +40,9 @@ const copyrightPeriod =
             </RouterLink>
             <LanguageSwitchButton />
         </div>
-        <div class="footer-segment legal-segment">
+        <div class="footer-segment">
-            <div></div>
-            <div class="copyright-notice">
             &copy; {{ copyrightPeriod }} Seekra
         </div>
-            <div class="legal-links">
-                <RouterLink
-                    :to="{ name: 'legalNotice' }"
-                    class="link"
-                    :title="t('legal.notice.title')"
-                >
-                    {{ t('legal.notice.title') }}
-                </RouterLink>
-            </div>
-        </div>
     </footer>
 </template>
 
@@ -66,7 +54,6 @@ const copyrightPeriod =
 .footer-segment {
     display: flex;
     justify-content: center;
-    align-items: center;
     gap: 32px;
     padding: var(--padding-y);
     background-color: var(--light-bg);
@@ -76,31 +63,4 @@ const copyrightPeriod =
 .global-footer a {
     color: var(--dark);
 }
-
-.legal-segment {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    text-align: center;
-}
-
-.copyright-notice {
-    justify-self: center;
-}
-
-.legal-links {
-    justify-self: end;
-}
-
-@media (max-width: 48rem) {
-    .legal-segment {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 0;
-    }
-
-    .legal-links {
-        margin-top: 0.8em;
-    }
-}
 </style>

src/features/legal/errors.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 class FetchError extends Error {
-    constructor (message) {
-        super(message);
-        this.name = 'FetchError';
-    };
-};

src/features/legal/services/__tests__/fetchLegalContent.test.js

@@ -1,110 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FetchError } from '../../errors';
-import { getLegalNotice } from '../fetchLegalContent';
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-
-let fetchSpy;
-
-beforeEach(() => {
-    fetchSpy = vi.spyOn(globalThis, 'fetch');
-});
-
-afterEach(() => {
-    fetchSpy.mockRestore();
-});
-
-const exampleHtml = `<h1>Heading</h1>
-<p>
-    <a>...</a>
-</p>`;
-
-const exampleHtmlWithLinkClass = `<h1>Heading</h1>
-<p>
-    <a class="link">...</a>
-</p>`;
-const exampleHtmlDocument = `<html>
-    <head>
-        <title>Legal Notice</title>
-    </head>
-    <body>
-        ${exampleHtml}
-    </body>
-</html>`;
-const exampleHtmlDocumentWithMain = `<html>
-    <head>
-        <title>Legal Notice</title>
-    </head>
-    <body>
-        <main>
-            ${exampleHtml}
-        </main>
-    </body>
-</html>`;
-
-describe('fetchLegalContent', () => {
-    describe('getLegalNotice', () => {
-        describe('success', () => {
-            test('returns HTML body', async () => {
-                fetchSpy.mockResolvedValue(
-                    new Response(exampleHtmlDocument)
-                );
-
-                expect(
-                    (await getLegalNotice()).trim()
-                ).toBe(exampleHtmlWithLinkClass);
-            });
-
-            test('returns HTML <main>', async () => {
-                fetchSpy.mockResolvedValue(
-                    new Response(exampleHtmlDocumentWithMain)
-                );
-
-                expect(
-                    (await getLegalNotice()).trim()
-                ).toBe(exampleHtmlWithLinkClass);
-            });
-
-            test('does not fail on success status code', async () => {
-                fetchSpy.mockResolvedValue(
-                    new Response(null, { status: 206 })
-                );
-
-                await getLegalNotice();
-            });
-        });
-
-        describe('error', () => {
-            test('throws FetchError when fetch fails', async () => {
-                fetchSpy.mockRejectedValue(new TypeError());
-                await expect(getLegalNotice()).rejects.toThrow(FetchError);
-            });
-
-            test('throws FetchError on HTTP error', async () => {
-                fetchSpy.mockResolvedValue(
-                    new Response(null, { status: 404 })
-                )
-                await expect(getLegalNotice()).rejects.toThrow(FetchError);
-            });
-
-            test('does not throw FetchError when fetch throws another error than TypeError', async () => {
-                fetchSpy.mockRejectedValue(new Error());
-                await expect(getLegalNotice()).rejects.toThrow(Error);
-            });
-        });
-    });
-});

src/features/legal/services/fetchLegalContent.js

@@ -1,44 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FetchError } from '../errors';
-import { getAssetsUrl } from '@/config/env';
-
-const fetchHtml = async function fetchHtml (url, options) {
-    let response;
-    try {
-        response = await fetch(url, options);
-    } catch (err) {
-        if (err instanceof TypeError) throw new FetchError(err);
-        else throw err;
-    }
-    if (response.ok) return await response.text();
-    else throw new FetchError();
-};
-
-export const getLegalNotice = async function getLegalNotice () {
-    const legalNoticeUrl = new URL('legal/legal_notice.html', getAssetsUrl()).href;
-    const html = await fetchHtml(legalNoticeUrl);
-
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-
-    const legalNoticeContainer = doc.querySelector('main') ?? doc.body;
-    legalNoticeContainer.querySelectorAll('a').forEach(
-        (link) => link.classList.add('link')
-    );
-    return legalNoticeContainer.innerHTML;
-};

src/features/legal/views/LegalNoticeView.vue

@@ -1,61 +0,0 @@
-<!--
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<script setup>
-import { getLegalNotice } from '../services/fetchLegalContent';
-import { onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const loading = ref(true);
-const legalNoticeError = ref(null);
-const legalNoticeHtml = ref(null);
-onMounted(async () => {
-    try {
-        legalNoticeHtml.value = await getLegalNotice();
-    } catch {
-        legalNoticeError.value = 'legal.notice.loadError';
-    } finally {
-        loading.value = false;
-    }
-});
-</script>
-
-<template>
-    <div class="main-content-padding legal-notice-container">
-        <header class="header">
-            <h1>
-                {{ t('legal.notice.title') }}
-            </h1>
-        </header>
-        <main>
-            <div class="legal-notice-loading" v-if="loading">
-                {{ t('loading') }}
-            </div>
-            <div class="error" v-else-if="legalNoticeError">
-                {{ t(legalNoticeError) }}
-            </div>
-            <div class="legal-notice" v-html="legalNoticeHtml" v-else></div>
-        </main>
-    </div>
-</template>
-
-<style scoped>
-.header h1 {
-    margin-top: 0;
-}
-</style>

src/features/legal/views/__tests__/LegalNoticeView.test.js

@@ -1,78 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FetchError } from '../../errors.js';
-import LegalNoticeView from '../LegalNoticeView.vue';
-import { mountComponent } from '@/test-utils/mountComponent';
-import { flushPromises } from '@vue/test-utils';
-import { afterEach, describe, expect, test, vi } from 'vitest';
-
-const getLegalNotice = vi.hoisted(() => vi.fn().mockResolvedValue('legal notice'));
-vi.mock('../../services/fetchLegalContent', async (importOriginal) => {
-    const actual = await importOriginal();
-    return {
-        ...actual,
-        getLegalNotice
-    };
-});
-
-afterEach(() => getLegalNotice.mockRestore());
-
-describe('LegalNoticeView', () => {
-    test('shows loading indicator', () => {
-        const wrapper = mountComponent(LegalNoticeView);
-
-        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
-        const legalNoticeError = wrapper.find('.error');
-        const legalNotice = wrapper.find('.legal-notice');
-
-        expect(legalNoticeLoading.exists()).toBe(true);
-        expect(legalNoticeError.exists()).toBe(false);
-        expect(legalNotice.exists()).toBe(false);
-    });
-
-    test('shows error', async () => {
-        getLegalNotice.mockRejectedValue(new FetchError());
-
-        const wrapper = mountComponent(LegalNoticeView);
-
-        await flushPromises();
-        await wrapper.vm.$nextTick();
-
-        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
-        const legalNoticeError = wrapper.find('.error');
-        const legalNotice = wrapper.find('.legal-notice');
-
-        expect(legalNoticeLoading.exists()).toBe(false);
-        expect(legalNoticeError.exists()).toBe(true);
-        expect(legalNotice.exists()).toBe(false);
-    });
-
-    test('shows legal notice', async () => {
-        const wrapper = mountComponent(LegalNoticeView);
-
-        await flushPromises();
-        await wrapper.vm.$nextTick();
-
-        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
-        const legalNoticeError = wrapper.find('.error');
-        const legalNotice = wrapper.find('.legal-notice');
-
-        expect(legalNoticeLoading.exists()).toBe(false);
-        expect(legalNoticeError.exists()).toBe(false);
-        expect(legalNotice.exists()).toBe(true);
-    });
-});

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, !store.get(props.path));
-    store.set(props.path, enabled.value);
 };
 </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__/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 ({
+const getWrapper = function getWrapper ({ i18n = 'switch1', translations = {} } = {}) {
-    i18n = 'switch1',
-    defaultValue = undefined,
-    translations = {},
-    piniaOptions = {}
-} = {}) {
     return mountComponent(Switch, {
         attrs: {
             setting: {
                 type: 'bool',
                 name: 'switch',
-                i18n,
+                i18n
-                default: defaultValue
             },
             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/useSettings.js

@@ -40,15 +40,5 @@ export const useSettings = function useSettings () {
         );
     };
 
-    /**
+    return { getSetting };
-     * 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/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/locales/de.json

@@ -61,11 +61,5 @@
                 "ariaLabel": "Wählt die Option {option} aus"
             }
         }
-    },
-    "legal": {
-        "notice": {
-            "title": "Impressum",
-            "loadError": "Das Impressum konnte nicht geladen werden."
-        }
     }
 }

src/locales/en.json

@@ -61,11 +61,5 @@
                 "ariaLabel": "Selects option {option}"
             }
         }
-    },
-    "legal": {
-        "notice": {
-            "title": "Legal Notice",
-            "loadError": "The legal notice could not be loaded."
-        }
     }
 }

src/router/index.js

@@ -18,7 +18,6 @@ import { createRouter, createWebHistory } from 'vue-router';
 import { i18n } from '@/i18n';
 
 import SearchView from '../views/SearchView.vue';
-import LegalNoticeView from '@/features/legal/views/LegalNoticeView.vue';
 import SearchResultsView from '@/features/search/views/SearchResultsView.vue';
 import SettingsView from '@/features/settings/views/SettingsView.vue';
 import NotFound from '../views/NotFound.vue';
@@ -40,14 +39,6 @@ const routes = [
             title: (route) => route.query.q
         }
     },
-    {
-        path: '/legal/notice',
-        name: 'legalNotice',
-        component: LegalNoticeView,
-        meta: {
-            title: () => i18n.global.t('legal.notice.title')
-        }
-    },
     {
         path: '/settings/:rest(.*)*',
         name: 'settings',

src/styles/common.css

@@ -24,7 +24,6 @@ body {
 
 .link {
     text-decoration: none;
-    color: var(--dark);
 }
 
 .link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
@@ -93,11 +92,3 @@ input {
 * {
     -webkit-tap-highlight-color: transparent;
 }
-
-.error {
-    background-color: var(--color-negative-bg);
-    border: 1px solid var(--color-negative-border);
-    padding: 1em 2em;
-    border-radius: 1.2em;
-    color: var(--white);
-}

src/styles/variables/colors.css

@@ -84,9 +84,6 @@ body {
     --light-hover:          var(--light-d-2);
 
     --invert: invert(0);
-
-    --color-negative-bg:     oklch(59% 0.22706 29.244);
-    --color-negative-border: oklch(51% 0.22706 29.244);
 }
 
 @media (prefers-color-scheme: dark) {