test(legal): add test for the legal notice view

Added tests for the legal notice view (LegalNoticeView.vue).

.env

@@ -0,0 +1,16 @@
+# Copyright 2026 Seekra
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+VITE_ASSETS_BUILD_ID=2026-08-04-76a067e
+VITE_ASSETS_BASE_URL=https://assets.seekra.jcloud-services.ddns.net

src/config/env.js

@@ -0,0 +1,22 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const getAssetsUrl = function getAssetsUrl () {
+    return new URL(
+        `${import.meta.env.VITE_ASSETS_BUILD_ID}/`,
+        import.meta.env.VITE_ASSETS_BASE_URL
+    ).href;
+};

src/features/footer/components/Footer.vue

@@ -40,9 +40,21 @@ const copyrightPeriod =
             </RouterLink>
             <LanguageSwitchButton />
         </div>
-        <div class="footer-segment">
+        <div class="footer-segment legal-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>
 
@@ -63,4 +75,31 @@ 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

@@ -0,0 +1,22 @@
+/*
+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

@@ -0,0 +1,110 @@
+/*
+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

@@ -0,0 +1,44 @@
+/*
+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

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

@@ -0,0 +1,78 @@
+/*
+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/views/SettingsView.vue

@@ -61,6 +61,10 @@ onMounted(async () => {
     });
     settingsLoaded.value = true;
 });
+
+const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
+    if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
+};
 </script>
 
 <template>
@@ -71,13 +75,14 @@ onMounted(async () => {
             </h1>
         </header>
         <LeftSidebarLayout class="layout">
-            <template #sidebar>
+            <template #sidebar="{ toggleSidebar }">
                 <ul class="sidebar-sections-list">
                     <li v-for="section in settings">
                         <RouterLink
                             :to="`/settings/${section.name}`"
                             class="button button-link link sidebar-section"
                             :class="{ active: activeSection === section.name }"
+                            @click="toggleSidebarIfSmallScreen(toggleSidebar)"
                         >
                             {{ t(section.i18n) }}
                         </RouterLink>

src/features/sidebar/components/Sidebar.vue

@@ -61,6 +61,10 @@ const toggleSidebar = function toggleSidebar () {
 }
 
 @media (max-width: 48rem) {
+    .sidebar {
+        border: none;
+    }
+
     .sidebar:not(.expanded) .sidebar-expand-button {
         display: none;
     }

src/layouts/LeftSidebarLayout.vue

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

src/locales/de.json

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

src/locales/en.json

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

src/main.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { getAssetsUrl } from './config/env';
 import { createApp } from 'vue'
 import { createPinia } from 'pinia';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
@@ -25,10 +26,29 @@ import './styles/common.css'
 import './styles/variables/colors.css'
 import './styles/variables/dimensions.css';
 
+import rawFonts from './styles/fonts.json';
 import './styles/common.css';
 import './styles/variables/colors.css';
 
 (async () => {
+    const fonts = rawFonts.map((font) => new FontFace(
+        font.family ?? '',
+        Array.isArray(font.source)
+            ? font.source.map(
+                (source) => `url('${source.url
+                    ? new URL(source.url, getAssetsUrl()).href
+                    : ''
+                }') format('${source.format ?? ''}')`
+            ).join(',')
+            : '',
+        {
+            weight: font.weight ?? undefined,
+            style: font.style ?? undefined
+        }
+    ));
+    await Promise.all(fonts.map((font) => font.load()));
+    fonts.forEach((font) => document.fonts.add(font));
+
     await loadLanguage(fallbackLocale);
     await loadLanguage(getCurrentLanguage());
     

src/router/index.js

@@ -18,6 +18,7 @@ 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';
@@ -39,6 +40,14 @@ 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

@@ -19,10 +19,12 @@ body {
     color: var(--dark);
     margin: 0;
     font-size: 16px;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 .link {
     text-decoration: none;
+    color: var(--dark);
 }
 
 .link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
@@ -86,3 +88,16 @@ input {
 .button:hover {
     background-color: var(--light-hover);
 }
+
+/* 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);
+}

src/styles/fonts.json

@@ -0,0 +1,32 @@
+[
+    {
+        "family": "Inter",
+        "weight": "100 900",
+        "style": "normal",
+        "source": [
+            {
+                "url": "fonts/Inter/Inter-Variable.woff2",
+                "format": "woff2"
+            },
+            {
+                "url": "fonts/Inter/Inter-Variable.ttf",
+                "format": "truetype"
+            }
+        ]
+    },
+    {
+        "family": "Inter",
+        "weight": "100 900",
+        "style": "italic",
+        "source": [
+            {
+                "url": "fonts/Inter/Inter-Italic-Variable.woff2",
+                "format": "woff2"
+            },
+            {
+                "url": "fonts/Inter/Inter-Italic-Variable.ttf",
+                "format": "truetype"
+            }
+        ]
+    }
+]

src/styles/variables/colors.css

@@ -84,6 +84,9 @@ 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) {