feat(legal): create empty loader module

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

src/App.vue

@@ -35,9 +35,7 @@ watch(colorScheme, val => updateColorScheme(val))
     >
         <Navbar />
 
-        <div class="main-content">
+        <router-view class="main-content" />
-            <router-view />
-        </div>
 
         <Footer />
     </div>
@@ -47,8 +45,7 @@ watch(colorScheme, val => updateColorScheme(val))
 .main-content {
     --main-content-padding-x: 30px;
     --main-content-padding-y: 40px;
-    padding: var(--main-content-padding-y) var(--main-content-padding-x);
+    --main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x) 0;
-    width: calc(100% - var(--main-content-padding-x) * 2);
     flex-grow: 1;
 }
 

src/assets/images/logo.svg

@@ -1,5 +1,5 @@
 <!--
-Copyright [yyyy] [name of copyright owner]
+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.

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -52,7 +52,7 @@ const getTooltipTranslation = function (colorScheme) {
 <style scoped>
 .color-scheme-button {
     background: none;
-    border: 1.5px solid var(--light-d-3);
+    border: 1.5px solid var(--border);
     border-radius: 50%;
     width: 36px;
     height: 36px;
@@ -65,6 +65,6 @@ const getTooltipTranslation = function (colorScheme) {
 }
 
 .color-scheme-button:hover {
-    background: var(--light-d-2);
+    background: var(--light-hover);
 }
 </style>

src/features/footer/components/Footer.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright [yyyy] [name of copyright owner]
+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.
@@ -15,6 +15,10 @@ limitations under the License.
 -->
 
 <script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
 const startYear = 2026
 const currentYear = new Date().getFullYear()
 
@@ -28,19 +32,36 @@ const copyrightPeriod =
 
 <template>
     <footer class="global-footer">
+        <div class="footer-segment">
+            <RouterLink to="settings" class="link">
+                {{ t('preferences.settings') }}
+            </RouterLink>
+        </div>
+        <div class="footer-segment">
             <div class="copyright-note">
                 &copy; {{ copyrightPeriod }} Seekra
             </div>
+        </div>
     </footer>
 </template>
 
 <style scoped>
 .global-footer {
-    --padding-y: 22px;
+    --padding-y: 16px;
+}
+
+.footer-segment {
+    padding: var(--padding-y);
+    background-color: var(--light-bg);
+    border-top: 1px solid var(--border);
+}
+
+.global-footer a {
+    color: var(--dark);
+}
+
+.copyright-note {
     display: flex;
     justify-content: center;
-    padding: var(--padding-y);
-    background-color: var(--light-d-1);
-    margin-top: var(--padding-y);
 }
 </style>

src/features/i18n/components/LanguageSwitchButton.vue

@@ -15,69 +15,68 @@ limitations under the License.
 -->
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { loadLanguage } from '@/i18n';
+import { loadLanguage, LANGUAGES_RTL, SUPPORTED_LANGUAGES } from '@/i18n';
 
-const { locale } = useI18n();
+const { t, locale } = useI18n();
 
 const isOpen = ref(false);
-
+const languageDropdown = ref(null);
-const languages = [
-    { code: 'en', label: 'English',    flag: '🇬🇧' },
-    { code: 'de', label: 'Deutsch',    flag: '🇩🇪' },
-    { code: 'fr', label: 'Français',   flag: '🇫🇷' },
-    { code: 'es', label: 'Español',    flag: '🇪🇸' },
-    { code: 'it', label: 'Italiano',   flag: '🇮🇹' },
-    { code: 'pt', label: 'Português',  flag: '🇵🇹' },
-];
-
-const currentLanguage = computed(
-    () => languages.find(l => l.code === locale.value) ?? languages[0]
-);
 
 async function selectLanguage(code) {
     await loadLanguage(code);
     localStorage.setItem('locale', code);
     document.documentElement.lang = code;
-    document.documentElement.dir = code === 'ar' ? 'rtl' : 'ltr';
+    document.documentElement.dir = LANGUAGES_RTL.includes(code) ? 'rtl' : 'ltr';
+    close();
+};
+
+const close = function () {
+    document.removeEventListener('click', closeWrapperOnClickOutsite);
     isOpen.value = false;
-}
+};
 
-function toggle() {
+const closeWrapperOnClickOutsite = function (e) {
-    isOpen.value = !isOpen.value;
+    if (languageDropdown.value) {
-}
+        if (!languageDropdown.value.contains(e.target)) {
+            close();
+        };
+    };
+};
 
-function closeOnBlur() {
+const open = function () {
-    // Kleines Delay damit Click auf Option noch registriert wird
+    if (!isOpen.value) {
-    setTimeout(() => { isOpen.value = false; }, 150);
+        isOpen.value = true;
-}
+        setTimeout(() => {
+            document.addEventListener('click', closeWrapperOnClickOutsite);
+        }, 0);
+    };
+};
 </script>
 
 <template>
-    <div class="language-switch" @blur="closeOnBlur" tabindex="-1">
+    <div class="language-switch" tabindex="-1">
         <button
             class="language-button button"
-            @click="toggle"
+            @click="open"
             :aria-expanded="isOpen"
             aria-haspopup="listbox"
         >
-            <span class="flag">{{ currentLanguage.flag }}</span>
+            <span class="lang-code">{{ t(`preferences.locale.languages.${locale}`) }}</span>
-            <span class="lang-code">{{ currentLanguage.code.toUpperCase() }}</span>
             <span class="chevron" :class="{ open: isOpen }">▾</span>
         </button>
 
-        <ul v-if="isOpen" class="language-dropdown" role="listbox">
+        <ul v-if="isOpen" ref="languageDropdown" class="language-dropdown" role="listbox">
             <li
-                v-for="lang in languages"
+                v-for="lang in SUPPORTED_LANGUAGES"
-                :key="lang.code"
+                :key="lang"
                 role="option"
-                :aria-selected="lang.code === locale"
+                :aria-selected="lang === locale"
-                :class="{ active: lang.code === locale }"
+                :class="{ active: lang === locale }"
-                @click="selectLanguage(lang.code)"
+                @click="selectLanguage(lang)"
             >
-                <span class="flag">{{ lang.flag }}</span>
+                <span class="lang-label">{{ t(`preferences.locale.languages.${lang}`) }}</span>
-                <span class="lang-label">{{ lang.label }}</span>
             </li>
         </ul>
     </div>
@@ -93,16 +92,15 @@ function closeOnBlur() {
     align-items: center;
     gap: 6px;
     background: none;
-    border: 1px solid var(--dark);
+    border: 1px solid var(--border);
     border-radius: 6px;
     padding: 4px 10px;
     cursor: pointer;
-    font-size: 0.9rem;
     color: var(--dark);
 }
 
 .language-button:hover {
-    background-color: var(--light-d-1);
+    background-color: var(--light-hover);
 }
 
 .chevron {
@@ -120,7 +118,7 @@ function closeOnBlur() {
     right: 0;
     top: calc(100% + 6px);
     background-color: var(--light-bg);
-    border: 1px solid var(--light-d-1);
+    border: 1px solid var(--border);
     border-radius: 8px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
     list-style: none;
@@ -140,7 +138,7 @@ function closeOnBlur() {
 }
 
 .language-dropdown li:hover {
-    background-color: var(--light-d-1);
+    background-color: var(--light-hover);
 }
 
 .language-dropdown li.active {

src/features/legal/services/loader.js

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

src/features/legal/views/ImprintView.vue

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

src/features/legal/views/PrivacyPolicyView.vue

@@ -0,0 +1,69 @@
+```vue
+<!--
+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 { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+// 1. ALLE Sprachen importieren (Verhindert den ReferenceError)
+import de from '@/legal/privacy/de.md?raw';
+import en from '@/legal/privacy/en.md?raw';
+import fr from '@/legal/privacy/fr.md?raw';
+import es from '@/legal/privacy/es.md?raw';
+import it from '@/legal/privacy/it.md?raw';
+import pt from '@/legal/privacy/pt.md?raw';
+
+const { locale } = useI18n();
+
+const content = computed(() => {
+  const map = {
+    de,
+    en,
+    fr,
+    es,
+    it,
+    pt
+  };
+
+  // Falls eine Sprache mal nicht existiert, nutzen wir 'de' oder 'en' als Fallback
+  return map[locale.value] || de;
+});
+</script>
+
+<template>
+  <main class="privacy-policy-content main-content-padding">
+    <h1>{{ $t('legal.privacy.title') }}</h1>
+
+    <div class="markdown-body">{{ content }}</div>
+  </main>
+</template>
+
+<style scoped>
+.privacy-policy-content {
+  max-width: 900px;
+  margin: 0 auto;
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+/* Sorgt dafür, dass die Zeilenumbrüche aus den .md Dateien erhalten bleiben */
+.markdown-body {
+  white-space: pre-wrap;
+  font-family: inherit;
+  line-height: 1.6;
+}
+</style>

src/features/nav/components/Navbar.vue

@@ -15,9 +15,25 @@ 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/language/components/LanguageSwitchButton.vue';
+import LanguageSwitchButton from '@/features/i18n/components/LanguageSwitchButton.vue';
-import logo from '@/assets/logo.svg';
+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 || '';
+    }
+});
 </script>
 
 <template>
@@ -25,6 +41,12 @@ import logo from '@/assets/logo.svg';
         <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
+        />
         <ul class="right-links">
             <li>
                 <LanguageSwitchButton />
@@ -41,7 +63,8 @@ import logo from '@/assets/logo.svg';
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 40px;
+    padding: 18px 40px;
+    height: 42px;
 }
 
 .global-nav .right-links {
@@ -50,11 +73,12 @@ import logo from '@/assets/logo.svg';
     list-style: none;
     margin: 0;
     padding: 0;
+    align-items: center;
 }
 
 .global-nav .right-links a {
     text-decoration: none;
-    color: #000;
+    color: var(--dark);
 }
 
 .global-nav .right-links a:hover{
@@ -65,4 +89,7 @@ import logo from '@/assets/logo.svg';
     height: 24px;
     width: auto;
 }
+.search-bar {
+    width: 70%;
+}
 </style>

src/features/search/components/Searchbar.vue

@@ -36,6 +36,7 @@ const submitSearch = function () {
 </script>
 
 <template>
+    <div>
         <form @submit.prevent="submitSearch">
             <div class="search-wrapper">
                 <input
@@ -47,7 +48,8 @@ const submitSearch = function () {
                 <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
             </div>
         </form>
-    </template>
+    </div>
+</template>
 
 <style scoped>
 .search-wrapper {
@@ -57,8 +59,8 @@ const submitSearch = function () {
     --padding-left: calc(var(--content-height) + var(--padding));
     display: flex;
     align-items: center;
-    border: 1.5px solid var(--light-d-3);
+    border: 1.5px solid var(--border);
-    box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
+    box-shadow: 0 0px 32px var(--blue-box-shadow);
     border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
     padding: var(--padding);
     padding-left: var(--padding-left);

src/features/search/views/SearchResultsView.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright [yyyy] [name of copyright owner]
+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.
@@ -15,21 +15,13 @@ limitations under the License.
 -->
 
 <script setup>
-import Searchbar from '@/features/search/components/Searchbar.vue';
-
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
-
-const props = defineProps(['searchQuery']);
-
-const searchQueryModel = defineModel();
-searchQueryModel.value = props.searchQuery;
 </script>
 
 <template>
-    <Searchbar class="search-bar" v-model="searchQueryModel" auto-submit />
+    <div class="main-content-padding">
-
         <div class="search-results-error-message-container">
             <div class="search-results-error-message">
                 <p>{{ t('search.error.searchNotAvailable') }}</p>
@@ -38,6 +30,7 @@ searchQueryModel.value = props.searchQuery;
         </div>
         <div class="search-results-container">
         </div>
+    </div>
 </template>
 
 <style scoped>
@@ -68,16 +61,16 @@ searchQueryModel.value = props.searchQuery;
 .search-results-error-message {
     padding: var(--error-message-padding);
     font-size: 18px;
-    box-shadow: 0px 0px 42px #cdcdcdb3;
+    box-shadow: 0px 0px 42px var(--gray-box-shadow);
     border-radius: 28px;
     text-align: center;
-    background-color: #f7f7f7;
+    background-color: var(--light-bg);
     animation: fade-in 0.8s ease-out;
     height: var(--error-message-height);
     display: flex;
     justify-content: center;
     flex-direction: column;
-    outline: 1px solid var(--light-d-2);
+    outline: 1px solid var(--border);
 }
 
 @media (max-width: 48rem) {

src/features/settings/composables/useSettingsConfig.js

@@ -0,0 +1,48 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { ref, readonly } from 'vue';
+import { loadSettingsConfig } from '../utils/settingsParser.js';
+
+const config  = ref(null);
+const error   = ref(null);
+const loading = ref(false);
+
+/**
+ * Provides reactive access to the parsed settings configuration.
+ * The config is loaded once and shared across all consumers.
+ */
+export function useSettingsConfig() {
+    async function load() {
+        loading.value = true;
+        error.value   = null;
+        try {
+            config.value = await loadSettingsConfig();
+        } catch (e) {
+            error.value  = e.message;
+            config.value = null;
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    return {
+        config:  readonly(config),
+        error:   readonly(error),
+        loading: readonly(loading),
+        load,
+    };
+}

src/features/settings/settings.json

@@ -0,0 +1,3 @@
+{
+    "contents": []
+}

src/features/settings/types/settingsConfig.js

@@ -0,0 +1,68 @@
+/*
+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.
+*/
+
+/**
+ * @typedef {'bool' | 'number' | 'string' | 'selection' | 'section'} SettingType
+ */
+
+/**
+ * @typedef {Object} SelectionOption
+ * @property {string} name
+ * @property {string} i18n
+ */
+
+/**
+ * @typedef {Object} BaseSettingConfig
+ * @property {SettingType} type
+ * @property {string} name
+ * @property {string} i18n
+ * @property {string} [description]
+ */
+
+/**
+ * @typedef {BaseSettingConfig & {
+ *   default: string | string[],
+ *   allowMultiple: boolean,
+ *   options: SelectionOption[]
+ * }} SelectionSettingConfig
+ */
+
+/**
+ * @typedef {Object} SectionSettingConfig
+ * @property {'section'} type
+ * @property {string} name
+ * @property {string} [i18n]
+ * @property {string} [description]
+ * @property {SettingConfigEntry[]} content
+ */
+
+/**
+ * @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
+ * @typedef {{ type: 'string', name: string, i18n: string, description?: string, default: string }} StringSettingConfig
+ * @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
+ */

src/features/settings/utils/settingsParser.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { validateSettingsConfig } from './settingsValidator.js';
+
+/**
+ * Loads and parses the settings configuration via dynamic import.
+ * @returns {Promise<import('../types/settingsConfig').SettingsConfig>}
+ */
+export async function loadSettingsConfig() {
+    let raw;
+
+    try {
+        raw = (await import('../settings.json')).default;
+    } catch (e) {
+        throw new Error(`[settings] Failed to load settings.json: ${e.message}`);
+    }
+
+    const result = validateSettingsConfig(raw);
+    if (!result.valid) {
+        throw new Error(result.error);
+    }
+
+    return result.config;
+}

src/features/settings/utils/settingsValidator.js

@@ -0,0 +1,99 @@
+/*
+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.
+*/
+
+const VALID_TYPES = ['bool', 'number', 'string', 'selection', 'section'];
+
+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) {
+    if (!VALID_TYPES.includes(value)) {
+        throw new Error(
+            `[settings] "${path}" has invalid type "${value}". Must be one of: ${VALID_TYPES.join(', ')}`
+        );
+    }
+}
+
+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) {
+    assertType(entry.type, `${path}.type`);
+
+    if (entry.type === 'section') {
+        assertString(entry.name, `${path}.name`);
+        if (!Array.isArray(entry.content)) {
+            throw new Error(`[settings] "${path}.content" must be an array`);
+        }
+        entry.content.forEach((child, i) =>
+            validateEntry(child, `${path}.content[${i}]`)
+        );
+        return;
+    }
+
+    assertString(entry.name, `${path}.name`);
+    assertString(entry.i18n, `${path}.i18n`);
+
+    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`);
+             }
+         }
+    }
+}
+
+/**
+ * Validates a raw settings config object.
+ * @param {unknown} raw
+ * @returns {{ valid: true, config: import('../types/settingsConfig').SettingsConfig } | { valid: false, error: string }}
+ */
+export function validateSettingsConfig(raw) {
+    try {
+        if (!raw || typeof raw !== 'object') {
+            throw new Error('[settings] Config must be an object');
+        }
+        if (!Array.isArray(raw.contents)) {
+            throw new Error('[settings] "contents" must be an array');
+        }
+        raw.contents.forEach((entry, i) =>
+            validateEntry(entry, `contents[${i}]`)
+        );
+        return { valid: true, config: raw };
+    } catch (e) {
+        return { valid: false, error: e.message };
+    }
+}

src/features/settings/views/SettingsView.vue

@@ -0,0 +1,56 @@
+<!--
+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 LeftSidebarLayout from '@/layouts/LeftSidebarLayout.vue';
+
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <div class="settings-page-wrapper">
+        <header class="header">
+            <h1>
+                {{ t('preferences.settings') }}
+            </h1>
+        </header>
+        <LeftSidebarLayout class="layout">
+            <template #sidebar>
+            </template>
+        </LeftSidebarLayout>
+    </div>
+</template>
+
+<style scoped>
+.layout {
+    flex-grow: 1;
+}
+
+.settings-page-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    padding: var(--main-content-padding-y) var(--main-content-padding-x);
+}
+
+.header h1 {
+    margin: 0;
+}
+</style>

src/features/sidebar/components/Sidebar.vue

@@ -0,0 +1,28 @@
+<!--
+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.
+-->
+
+<template>
+    <nav class="sidebar">
+        <slot />
+    </nav>
+</template>
+
+<style scoped>
+.sidebar {
+    border-right: 1px solid var(--border);
+    padding: 20px;
+}
+</style>

src/i18n.js

@@ -19,8 +19,17 @@ import getCurrentLanguage from './utils/currentLanguage';
 
 export const fallbackLocale = 'en';
 
-const SUPPORTED_LANGUAGES = [
+
-    'en', 'de', 'fr', 'es', 'it', 'pt', 'zh', 'ja', 'ar', 'hi'
+export const LANGUAGES_RTL = [
+    'ar'
+];
+export const SUPPORTED_LANGUAGES = [
+    'en',
+    'de',
+    'fr',
+    'es',
+    'it',
+    'pt'
 ];
 
 export const i18n = createI18n({

src/layouts/LeftSidebarLayout.vue

@@ -0,0 +1,42 @@
+<!--
+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 Sidebar from '@/features/sidebar/components/Sidebar.vue';
+</script>
+
+<template>
+    <div class="layout-container">
+        <Sidebar>
+            <slot name="sidebar" />
+        </Sidebar>
+        <main class="main-content">
+            <slot />
+        </main>
+    </div>
+</template>
+
+<style scoped>
+.layout-container {
+    display: grid;
+    grid-template-columns: min(24%, 280px) 1fr;
+    border-top: 1px solid var(--border);
+}
+
+.main-content {
+    padding: 20px;
+}
+</style>

src/legal/privacy/de.md

@@ -0,0 +1,3 @@
+# Datenschutzerklärung
+
+Hier steht deine Datenschutzerklärung auf Deutsch.

src/legal/privacy/en.md

@@ -0,0 +1,3 @@
+# Privacy Policy
+
+Here is your privacy policy in English.

src/legal/privacy/es.md

@@ -0,0 +1,3 @@
+# Política de privacidad
+
+Aquí tienes tu política de privacidad en español.

src/legal/privacy/fr.md

@@ -0,0 +1,3 @@
+# Politique de confidentialité
+
+Voici ta politique de confidentialité en français.

src/legal/privacy/it.md

@@ -0,0 +1,3 @@
+# Informativa sulla privacy
+
+Qui trovi la tua informativa sulla privacy in italiano.

src/legal/privacy/pt.md

@@ -0,0 +1,3 @@
+# Política de Privacidade
+
+Aqui está a tua Política de Privacidade em português.

src/locales/de.json

@@ -9,8 +9,8 @@
         }
     },
     "error": {
-        "tryAgainToAnotherTime": "Bitte versuche es zu einem anderen Zeitpunkt erneut.",
+        "tryAgainToAnotherTime": "Bitte versuchen Sie es zu einem anderen Zeitpunkt erneut.",
-        "pageNotFound": "Die gesuchte Seite existiert nicht. Bitte überprüfe die URL oder kehre zur Suchseite zurück."
+        "pageNotFound": "Die gesuchte Seite existiert nicht. Bitte überprüfen Sie die URL oder kehren Sie zur Suchseite zurück."
     },
     "links": {
         "back": {
@@ -18,13 +18,30 @@
         }
     },
     "preferences": {
+        "settings": "Einstellungen",
         "colorScheme": {
             "switch": {
                 "light": "Zum hellen Modus wechseln",
                 "dark": "Zum dunklen Modus wechseln",
                 "auto": "Zum System-Farbschema wechseln"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
-    "slogan": "Gebaut zum Suchen."
+    "slogan": "Gebaut zum Suchen.",
+
+    "legal": {
+        "privacy": {
+            "title": "Datenschutzerklärung"
+        }
+    }
 }

src/locales/en.json

@@ -18,13 +18,30 @@
         }
     },
     "preferences": {
+        "settings": "Settings",
         "colorScheme": {
             "switch": {
                 "light": "Switch to light mode",
                 "dark": "Switch to dark mode",
                 "auto": "Switch to the system color scheme"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
-    "slogan": "Built to search."
+    "slogan": "Built to search.",
+
+    "legal": {
+        "privacy": {
+            "title": "Privacy Policy"
+        }
+    }
 }

src/locales/es.json

@@ -18,13 +18,30 @@
         }
     },
     "preferences": {
+        "settings": "Ajustes",
         "colorScheme": {
             "switch": {
                 "light": "Cambiar al modo claro",
                 "dark": "Cambiar al modo oscuro",
                 "auto": "Usar el esquema de color del sistema"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
-    "slogan": "Hecho para buscar."
+    "slogan": "Hecho para buscar.",
+
+    "legal": {
+        "privacy": {
+            "title": "Política de Privacidad"
+        }
+    }
 }

src/locales/fr.json

@@ -18,13 +18,30 @@
         }
     },
     "preferences": {
+        "settings": "Paramètres",
         "colorScheme": {
             "switch": {
                 "light": "Passer en mode clair",
                 "dark": "Passer en mode sombre",
                 "auto": "Utiliser le thème système"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
-    "slogan": "Conçu pour chercher."
+    "slogan": "Conçu pour chercher.",
+
+    "legal": {
+        "privacy": {
+            "title": "Politique de Confidentialité"
+        }
+     }
 }

src/locales/it.json

@@ -18,13 +18,30 @@
         }
     },
     "preferences": {
+        "settings": "Impostazioni",
         "colorScheme": {
             "switch": {
                 "light": "Passa alla modalità chiara",
                 "dark": "Passa alla modalità scura",
                 "auto": "Usa la combinazione colori di sistema"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
-    "slogan": "Costruito per cercare."
+    "slogan": "Costruito per cercare.",
+
+    "legal": {
+        "privacy": {
+            "title": "Politica di Privacy"
+        }
+    }
 }

src/locales/pt.json

@@ -18,13 +18,30 @@
         }
     },
     "preferences": {
+        "settings": "Configurações",
         "colorScheme": {
             "switch": {
                 "light": "Mudar para modo claro",
                 "dark": "Mudar para modo escuro",
                 "auto": "Usar esquema de cores do sistema"
             }
+        },
+        "locale": {
+            "languages": {
+                "en": "English",
+                "de": "Deutsch",
+                "fr": "Français",
+                "es": "Español",
+                "it": "Italiano",
+                "pt": "Português"
+            }
         }
     },
-    "slogan": "Feito para pesquisar."
+    "slogan": "Feito para pesquisar.",
+
+    "legal": {
+        "privacy": {
+            "title": "Política de Privacidade"
+        }
+    }
 }

src/router/index.js

@@ -15,10 +15,13 @@ limitations under the License.
 */
 
 import { createRouter, createWebHistory } from 'vue-router';
+import { i18n } from '@/i18n';
 
 import SearchView from '../views/SearchView.vue';
 import SearchResultsView from '@/features/search/views/SearchResultsView.vue';
+import SettingsView from '@/features/settings/views/SettingsView.vue';
 import NotFound from '../views/NotFound.vue';
+import PrivacyPolicyView from '@/features/legal/views/PrivacyPolicyView.vue';
 
 const routes = [
     {
@@ -37,11 +40,28 @@ const routes = [
             title: (route) => route.query.q
         }
     },
+    {
+        path: '/settings',
+        name: 'settings',
+        component: SettingsView,
+        meta: {
+            title: () => i18n.global.t('preferences.settings')
+        }
+    },
     {
         path: '/:pathMatch(.*)*',
         name: 'notFound',
         component: NotFound
     },
+    {
+    path: '/privacy',
+    name: 'privacyPolicy',
+    component: PrivacyPolicyView,
+    meta: {
+        title: () => 'Privacy Policy'
+    }
+    },
+
 ];
 
 const router = createRouter({

src/styles/common.css

@@ -30,3 +30,8 @@ body {
 input {
     color: var(--dark);
 }
+
+.main-content-padding {
+    padding: var(--main-content-padding);
+    width: calc(100% - var(--main-content-padding-x) * 2);
+}

src/styles/variables/colors.css

@@ -75,6 +75,13 @@ limitations under the License.
 
     --dark-bg:              var(--black-l-2);
     --light-bg:             var(--white);
+
+    --border:               var(--white-d-3);
+
+    --gray-box-shadow:    oklch(0.8 0.0001 271 / 0.7);
+    --blue-box-shadow:    oklch(0.52 0.15 268 / 0.25);
+
+    --light-hover:          var(--light-d-2);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -90,7 +97,7 @@ limitations under the License.
         --dark:                 var(--white);
 
         --light:                var(--black);
-        --light-d-1:            var(--black-l-1);
+        --light-d-1:            oklch(0.10 0 0);
         --light-d-2:            var(--black-l-2);
         --light-d-3:            var(--black-l-3);
         --light-d-4:            var(--black-l-4);
@@ -100,7 +107,13 @@ limitations under the License.
         --light-d-8:            var(--black-l-8);
 
         --dark-bg:              var(--white);
-        --light-bg:             var(--black);
+        --light-bg:             oklch(0.18 0 0);
+
+        --border:               var(--black-l-6);
+
+        --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
+
+        --light-hover:          var(--light-d-5);
     }
 }
 
@@ -116,7 +129,7 @@ limitations under the License.
     --dark:                 var(--white);
 
     --light:                var(--black);
-    --light-d-1:            var(--black-l-1);
+    --light-d-1:            oklch(0.10 0 0);
     --light-d-2:            var(--black-l-2);
     --light-d-3:            var(--black-l-3);
     --light-d-4:            var(--black-l-4);
@@ -126,5 +139,11 @@ limitations under the License.
     --light-d-8:            var(--black-l-8);
 
     --dark-bg:              var(--white);
-    --light-bg:             var(--black);
+    --light-bg:             oklch(0.18 0 0);
+
+    --border:               var(--black-l-6);
+
+    --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
+
+    --light-hover:          var(--light-d-5);
 }

src/views/NotFound.vue

@@ -1,5 +1,5 @@
 <!--
-Copyright [yyyy] [name of copyright owner]
+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.
@@ -21,7 +21,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <div class="not-found">
+    <div class="not-found main-content-padding">
        <span class="error-message">
             {{ t('error.pageNotFound') }}
         </span>

src/views/SearchView.vue

@@ -19,7 +19,7 @@ import Searchbar from '../features/search/components/Searchbar.vue';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import logo from '@/assets/logo.svg';
+import logo from '@/assets/images/logo.svg';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -32,7 +32,7 @@ const submitSearch = function () {
 </script>
 
 <template>
-    <div class="search-content">
+    <div class="search-content main-content-padding">
     <header class="global-header">
         <img :src="logo" alt="Seekra" class="header-logo" />
         <span class="slogan">