feat(footer): align footer segment items vertically centered

2026-08-05 20:46:43 +02:00
19 changed files with 11 additions and 621 deletions
@@ -26,7 +26,7 @@ import { useRoute } from 'vue-router';
 const route = useRoute();
 const { getColorScheme, updateColorScheme } = useColorScheme();
-const colorScheme = ref('auto');
+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>
@@ -40,20 +40,8 @@ const copyrightPeriod =
            </RouterLink>
            <LanguageSwitchButton />
        </div>
-        <div class="footer-segment legal-segment">
+        <div class="footer-segment">
-            <div></div>
+            &copy; {{ copyrightPeriod }} Seekra
            <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>
@@ -76,31 +64,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>
@@ -1,22 +0,0 @@
 /*
 Copyright 2026 Seekra
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 export class FetchError extends Error {
    constructor (message) {
        super(message);
        this.name = 'FetchError';
    };
 };
@@ -1,110 +0,0 @@
 /*
 Copyright 2026 Seekra
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { FetchError } from '../../errors';
 import { getLegalNotice } from '../fetchLegalContent';
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 let fetchSpy;
 beforeEach(() => {
    fetchSpy = vi.spyOn(globalThis, 'fetch');
 });
 afterEach(() => {
    fetchSpy.mockRestore();
 });
 const exampleHtml = `<h1>Heading</h1>
 <p>
    <a>...</a>
 </p>`;
 const exampleHtmlWithLinkClass = `<h1>Heading</h1>
 <p>
    <a class="link">...</a>
 </p>`;
 const exampleHtmlDocument = `<html>
    <head>
        <title>Legal Notice</title>
    </head>
    <body>
        ${exampleHtml}
    </body>
 </html>`;
 const exampleHtmlDocumentWithMain = `<html>
    <head>
        <title>Legal Notice</title>
    </head>
    <body>
        <main>
            ${exampleHtml}
        </main>
    </body>
 </html>`;
 describe('fetchLegalContent', () => {
    describe('getLegalNotice', () => {
        describe('success', () => {
            test('returns HTML body', async () => {
                fetchSpy.mockResolvedValue(
                    new Response(exampleHtmlDocument)
                );
                expect(
                    (await getLegalNotice()).trim()
                ).toBe(exampleHtmlWithLinkClass);
            });
            test('returns HTML <main>', async () => {
                fetchSpy.mockResolvedValue(
                    new Response(exampleHtmlDocumentWithMain)
                );
                expect(
                    (await getLegalNotice()).trim()
                ).toBe(exampleHtmlWithLinkClass);
            });
            test('does not fail on success status code', async () => {
                fetchSpy.mockResolvedValue(
                    new Response(null, { status: 206 })
                );
                await getLegalNotice();
            });
        });
        describe('error', () => {
            test('throws FetchError when fetch fails', async () => {
                fetchSpy.mockRejectedValue(new TypeError());
                await expect(getLegalNotice()).rejects.toThrow(FetchError);
            });
            test('throws FetchError on HTTP error', async () => {
                fetchSpy.mockResolvedValue(
                    new Response(null, { status: 404 })
                )
                await expect(getLegalNotice()).rejects.toThrow(FetchError);
            });
            test('does not throw FetchError when fetch throws another error than TypeError', async () => {
                fetchSpy.mockRejectedValue(new Error());
                await expect(getLegalNotice()).rejects.toThrow(Error);
            });
        });
    });
 });
@@ -1,44 +0,0 @@
 /*
 Copyright 2026 Seekra
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { FetchError } from '../errors';
 import { getAssetsUrl } from '@/config/env';
 const fetchHtml = async function fetchHtml (url, options) {
    let response;
    try {
        response = await fetch(url, options);
    } catch (err) {
        if (err instanceof TypeError) throw new FetchError(err);
        else throw err;
    }
    if (response.ok) return await response.text();
    else throw new FetchError();
 };
 export const getLegalNotice = async function getLegalNotice () {
    const legalNoticeUrl = new URL('legal/legal_notice.html', getAssetsUrl()).href;
    const html = await fetchHtml(legalNoticeUrl);
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const legalNoticeContainer = doc.querySelector('main') ?? doc.body;
    legalNoticeContainer.querySelectorAll('a').forEach(
        (link) => link.classList.add('link')
    );
    return legalNoticeContainer.innerHTML;
 };
@@ -1,61 +0,0 @@
 <!--
 Copyright 2026 Seekra
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <script setup>
 import { getLegalNotice } from '../services/fetchLegalContent';
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 const loading = ref(true);
 const legalNoticeError = ref(null);
 const legalNoticeHtml = ref(null);
 onMounted(async () => {
    try {
        legalNoticeHtml.value = await getLegalNotice();
    } catch {
        legalNoticeError.value = 'legal.notice.loadError';
    } finally {
        loading.value = false;
    }
 });
 </script>
 <template>
    <div class="main-content-padding legal-notice-container">
        <header class="header">
            <h1>
                {{ t('legal.notice.title') }}
            </h1>
        </header>
        <main>
            <div class="legal-notice-loading" v-if="loading">
                {{ t('loading') }}
            </div>
            <div class="error" v-else-if="legalNoticeError">
                {{ t(legalNoticeError) }}
            </div>
            <div class="legal-notice" v-html="legalNoticeHtml" v-else></div>
        </main>
    </div>
 </template>
 <style scoped>
 .header h1 {
    margin-top: 0;
 }
 </style>
@@ -1,78 +0,0 @@
 /*
 Copyright 2026 Seekra
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { FetchError } from '../../errors.js';
 import LegalNoticeView from '../LegalNoticeView.vue';
 import { mountComponent } from '@/test-utils/mountComponent';
 import { flushPromises } from '@vue/test-utils';
 import { afterEach, describe, expect, test, vi } from 'vitest';
 const getLegalNotice = vi.hoisted(() => vi.fn().mockResolvedValue('legal notice'));
 vi.mock('../../services/fetchLegalContent', async (importOriginal) => {
    const actual = await importOriginal();
    return {
        ...actual,
        getLegalNotice
    };
 });
 afterEach(() => getLegalNotice.mockRestore());
 describe('LegalNoticeView', () => {
    test('shows loading indicator', () => {
        const wrapper = mountComponent(LegalNoticeView);
        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
        const legalNoticeError = wrapper.find('.error');
        const legalNotice = wrapper.find('.legal-notice');
        expect(legalNoticeLoading.exists()).toBe(true);
        expect(legalNoticeError.exists()).toBe(false);
        expect(legalNotice.exists()).toBe(false);
    });
    test('shows error', async () => {
        getLegalNotice.mockRejectedValue(new FetchError());
        const wrapper = mountComponent(LegalNoticeView);
        await flushPromises();
        await wrapper.vm.$nextTick();
        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
        const legalNoticeError = wrapper.find('.error');
        const legalNotice = wrapper.find('.legal-notice');
        expect(legalNoticeLoading.exists()).toBe(false);
        expect(legalNoticeError.exists()).toBe(true);
        expect(legalNotice.exists()).toBe(false);
    });
    test('shows legal notice', async () => {
        const wrapper = mountComponent(LegalNoticeView);
        await flushPromises();
        await wrapper.vm.$nextTick();
        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
        const legalNoticeError = wrapper.find('.error');
        const legalNotice = wrapper.find('.legal-notice');
        expect(legalNoticeLoading.exists()).toBe(false);
        expect(legalNoticeError.exists()).toBe(false);
        expect(legalNotice.exists()).toBe(true);
    });
 });
@@ -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"
@@ -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();
@@ -1,94 +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 { useSettingsConfigCacheStore } from '../../stores/settingsConfigCacheStore';
 import { useSettingsStore } from '../../stores/settingsStore';
 import { useSettings } from '../useSettings';
 import { createTestingPinia } from '@pinia/testing';
 import { setActivePinia } from 'pinia';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 const settingDefaultValue = 42;
 const settingPath = ['test', 'number'];
 describe('useSettings', () => {
    describe('getSetting', () => {
        test('returns stored value', () => {
            const { getSetting } = useSettings();
            const settings = useSettingsStore();
            const key = 'setting';
            const value = 42;
            settings.set(key, value);
            expect(getSetting(key)).toBe(value);
        });
        test('returns default value', () => {
            const { getSetting } = useSettings();
            expect(getSetting(settingPath)).toBe(settingDefaultValue);
        });
        test('returns stored value instead of default value', () => {
            const { getSetting } = useSettings();
            const settings = useSettingsStore();
            const value = 43;
            expect(getSetting(settingPath)).toBe(settingDefaultValue);
            settings.set(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
        })
    );
    const settingsConfigCache = useSettingsConfigCacheStore();
    settingsConfigCache.set({
        contents: [
            {
                name: 'test',
                i18n: '',
                content: [
                    {
                        type: 'number',
                        i18n: '',
                        name: 'number',
                        default: settingDefaultValue
                    },
                    {
                        type: 'bool',
                        i18n: '',
                        name: 'bool'
                    }
                ]
            }
        ]
    });
 });
@@ -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 { useSettingsConfigCacheStore } from '../stores/settingsConfigCacheStore';
 import { useSettingsStore } from '../stores/settingsStore';
 import { getSettingRecursively } from '../utils/getSetting';
 import { loadSettingsConfig } from '../utils/settingsParser';
 /**
 * 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();
        const settings = useSettingsConfigCacheStore().get();
        return (
            settingsStore.get(key) ??
            getSettingRecursively(
                key, settings.contents ?? []
            )?.default
        );
    };
    return { getSetting };
 };
@@ -1,31 +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 { defineStore } from 'pinia';
 export const useSettingsConfigCacheStore = defineStore('settingsConfigCache', () => {
    let settingsConfig = undefined;
    const set = function set (value) {
        settingsConfig = value;
    };
    const get = function get () {
        return settingsConfig;
    };
    return { set, get };
 });
@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { useSettingsConfigCacheStore } from '../stores/settingsConfigCacheStore';
 import { validateSettingsConfig } from './settingsValidator.js';
 /**
@@ -22,12 +21,10 @@ import { validateSettingsConfig } from './settingsValidator.js';
 * @returns {Promise<import('../types/settingsConfig').SettingsConfig>}
 */
 export async function loadSettingsConfig() {
    const settingsConfigCache = useSettingsConfigCacheStore();
    let raw;
    try {
        raw = (await import('../settings.json')).default;
        settingsConfigCache.set(raw);
    } catch (e) {
        throw new Error(`[settings] Failed to load settings.json: ${e.message}`);
    }
@@ -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,11 +61,5 @@
                "ariaLabel": "Wählt die Option {option} aus"
            }
        }
    },
    "legal": {
        "notice": {
            "title": "Impressum",
            "loadError": "Das Impressum konnte nicht geladen werden."
        }
    }
 }
@@ -61,11 +61,5 @@
                "ariaLabel": "Selects option {option}"
            }
        }
    },
    "legal": {
        "notice": {
            "title": "Legal Notice",
            "loadError": "The legal notice could not be loaded."
        }
    }
 }
@@ -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',
@@ -24,7 +24,6 @@ body {
 .link {
    text-decoration: none;
    color: var(--dark);
 }
 .link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
@@ -92,12 +91,4 @@ input {
 /* Temporary until a custom tap highlight is implemented. */
 * {
    -webkit-tap-highlight-color: transparent;
-}
+}
 .error {
    background-color: var(--color-negative-bg);
    border: 1px solid var(--color-negative-border);
    padding: 1em 2em;
    border-radius: 1.2em;
    color: var(--white);
 }
@@ -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) {