test(settings): refactor switch component test

Added and used getWrapper function to switch component test to mount the
component and avoid repeating code.

README.md

@@ -4,8 +4,4 @@ The frontend of the search engine Seekra.
 
 ## Setup
 
-Please execute the setup script in `scripts/` for your platform when cloning the repository.
-
-## Legal
-
-After each update to the dependencies, please run the script `scripts/generate-license-files.js` to regenerate the third-party license files.
+Please execute the setup script in `scripts/` for your platform when cloning the repository.

scripts/generate-license-files.js

@@ -1,58 +0,0 @@
-#!/usr/bin/env node
-
-/*
-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 fs from 'node:fs/promises';
-import { generateLicenseFile } from 'generate-license-file';
-
-const packageJson = './package.json';
-const packageJsonBackup = `${packageJson}~`;
-
-await generateLicenseFile(
-    packageJson,
-    'THIRD_PARTY_LICENSES'
-);
-
-const pkg = JSON.parse(
-    await fs.readFile(packageJson, 'utf-8')
-);
-
-await fs.rename(packageJson, packageJsonBackup);
-
-const devPackage = {
-    ...pkg,
-    dependencies: pkg.devDependencies ?? {},
-    devDependencies: {}
-};
-
-/*
-  The file including the dependencies for the current license file has
-  to be always package.json due to a bug of generate-license file. See
-
-    https://github.com/TobyAndToby/generate-license-file/issues/752
-*/
-await fs.writeFile(
-    packageJson,
-    JSON.stringify(devPackage)
-);
-
-await generateLicenseFile(
-    packageJson,
-    './THIRD_PARTY_LICENSES_DEV'
-);
-
-await fs.rename(packageJsonBackup, packageJson);

scripts/setup.ps1

@@ -1,17 +1,3 @@
 #!/usr/bin/env pwsh
 
-# 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.
-
 git config --local commit.template .gitmessage

scripts/setup.sh

@@ -1,17 +1,3 @@
 #!/usr/bin/bash
 
-# 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.
-
 git config --local commit.template .gitmessage

src/App.vue

@@ -18,40 +18,21 @@ limitations under the License.
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
 
-import { updatePageTitle } from './router';
 import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
-import { ref, provide, watch, watchEffect } from 'vue';
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
+import { ref, provide, watch } from 'vue';
 
 const { getColorScheme, updateColorScheme } = useColorScheme();
 const colorScheme = ref(getColorScheme());
 provide('colorScheme', colorScheme);
-watch(colorScheme, (newValue) => {
-    updateColorScheme(newValue);
-    document.body.style.setProperty(colorScheme, {
-        auto: 'normal',
-        dark: 'dark',
-        light: 'light'
-    });
-    if (newValue === 'dark') {
-        document.body.classList.add('dark');
-    } else {
-        document.body.classList.remove('dark');
-    }
-    if (newValue === 'auto') {
-        document.body.classList.add('color-scheme-auto');
-    } else {
-        document.body.classList.remove('color-scheme-auto');
-    }
-});
-
-watchEffect(() => updatePageTitle(route));
+watch(colorScheme, val => updateColorScheme(val))
 </script>
 
 <template>
-    <div id="app-wrapper">
+    <div
+        :style="{ colorScheme: colorScheme === 'auto' ? 'normal' : (colorScheme === 'dark' ? 'dark' : 'light')}"
+        :class="{ dark: colorScheme === 'dark', 'color-scheme-auto': colorScheme === 'auto' }"
+        id="app-wrapper"
+    >
         <Navbar />
 
         <router-view class="main-content" />
@@ -65,11 +46,6 @@ watchEffect(() => updatePageTitle(route));
     --main-content-padding-x: 30px;
     --main-content-padding-y: 40px;
     --main-content-padding: var(--main-content-padding-y) var(--main-content-padding-x);
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--light-bg);
-    color: var(--dark);
 }
 
 .main-content {
@@ -81,4 +57,12 @@ watchEffect(() => updatePageTitle(route));
         --main-content-padding-x: 15px;
     }
 }
+
+#app-wrapper {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--light-bg);
+    color: var(--dark);
+}
 </style>

src/assets/icons/sidebar-expand.svg

@@ -1,38 +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.
--->
-
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-    <path
-        stroke="currentColor"
-        stroke-width="2"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="
-            M6 4
-            h12
-            a4 4 0 0 1 4 4
-            v8
-            a4 4 0 0 1 -4 4
-            h-12
-            a4 4 0 0 1 -4 -4
-            v-8
-            a4 4 0 0 1 4 -4
-            m2 0
-            v16
-        "
-    />
-</svg>

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

@@ -39,7 +39,7 @@ vi.mock('@/features/icons/components/Icon.vue', () => ({
     }
 }));
 
-describe('LanguageSwitchButton', () => {
+describe('LanguageSwitchButton.vue', () => {
     beforeEach(() => {
         vi.clearAllMocks();
         localStorage.clear();

src/features/settings/components/Selection.vue

@@ -17,7 +17,7 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';
 import { useSettingsStore } from '../stores/settingsStore';
-import { computed, ref, useId, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -56,25 +56,19 @@ const store = useSettingsStore();
 const optionType = computed(() => props.setting.allowMultiple ? 'checkbox' : 'radio');
 const selected = ref(normalizeSelectedValue(store.get(props.path) ?? props.setting.default));
 
-watch(selected, (newValue) => {
+watch(selected, (newValue, oldValue) => {
     store.set(props.path, newValue);
 });
-
-const labelId = useId();
 </script>
 
 <template>
     <div>
-        <div class="label" :id="labelId">
+        <div class="label">
             {{ t(props.setting.i18n) }}
         </div>
-        <ul class="options-list" :aria-labelledby="labelId">
+        <ul class="options-list">
             <li v-for="option in props.setting.options" :key="option.name">
-                <label
-                    class="settings-button"
-                    :title="t(option.i18n)"
-                    :aria-label="t('settings.selection.option.ariaLabel', { option: t(option.i18n) })"
-                >
+                <label class="settings-button">
                     <input
                         :type="optionType"
                         :name="props.path"

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

@@ -116,14 +116,14 @@ const veryNestedSettingsList = [
 ];
 
 test.for([
-    ({ settings: [], path: ['a'], expected: undefined }),
+    ({ settings: [], path: 'a', expected: undefined }),
     ({ settings: [
         {
             type: 'bool',
             name: '1a',
             i18n: '1a'
         }
-    ], path: ['1a'], expected: {
+    ], path: '1a', expected: {
         type: 'bool',
         name: '1a',
         i18n: '1a'
@@ -146,7 +146,7 @@ test.for([
                 }
             ]
         }
-    ], path: ['1a'], expected: {
+    ], path: '1a', expected: {
         type: 'bool',
         name: '1a',
         i18n: '1a'
@@ -169,7 +169,7 @@ test.for([
                 }
             ]
         }
-    ], path: ['1b', '2a'], expected: {
+    ], path: '1b.2a', expected: {
         type: 'bool',
         name: '2a',
         i18n: '2a'
@@ -198,7 +198,7 @@ test.for([
                 }
             ]
         }
-    ], path: ['1b', '2b'], expected: {
+    ], path: '1b.2b', expected: {
         type: 'number',
         name: '2b',
         i18n: '2b',
@@ -234,7 +234,7 @@ test.for([
                 }
             ]
         }
-    ], path: ['1b', '2b', '3a'], expected: {
+    ], path: '1b.2b.3a', expected: {
         type: 'string',
         name: '3a',
         i18n: '3a'
@@ -269,7 +269,7 @@ test.for([
                 }
             ]
         }
-    ], path: ['1b'], expected: {
+    ], path: '1b', expected: {
         type: 'section',
         name: '1b',
         i18n: '1b',
@@ -323,7 +323,7 @@ test.for([
                 }
             ]
         }
-    ], path: ['1b', '2b'], expected: {
+    ], path: '1b.2b', expected: {
         type: 'section',
         name: '2b',
         i18n: '2b',
@@ -366,7 +366,7 @@ test.for([
                 }
             ]
         }
-    ], path: ['1b', '2b', '3b'], expected: undefined }),
+    ], path: '1b.2b.3b', expected: undefined }),
     ({ settings: [
         {
             type: 'bool',
@@ -397,7 +397,7 @@ test.for([
                 }
             ]
         }
-    ], path: ['1b', '2a', '3a'], expected: undefined }),
+    ], path: '1b.2a.3a', expected: undefined }),
     ({ settings: [
         {
             type: 'bool',
@@ -428,7 +428,7 @@ test.for([
                 }
             ]
         }
-    ], path: ['1b', '2c', '3a'], expected: undefined }),
+    ], path: '1b.2c.3a', expected: undefined }),
     ({ settings: [
         {
             type: 'bool',
@@ -459,7 +459,7 @@ test.for([
                 }
             ]
         }
-    ], path: ['1a', '2b', '3a'], expected: undefined }),
+    ], path: '1a.2b.3a', expected: undefined }),
     ({ settings: [
         {
             type: 'bool',
@@ -490,13 +490,13 @@ test.for([
                 }
             ]
         }
-    ], path: ['1c', '2b', '3a'], expected: undefined }),
-    ({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4b', '5b', '6b', '7a'], expected: {
+    ], path: '1c.2b.3a', expected: undefined }),
+    ({ settings: veryNestedSettingsList, path: '1b.2b.3b.4b.5b.6b.7a', expected: {
         type: 'bool',
         name: '7a',
         i18n: '7a'
     } }),
-    ({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4b', '5b'], expected: {
+    ({ settings: veryNestedSettingsList, path: '1b.2b.3b.4b.5b', expected: {
         type: 'section',
         name: '5b',
         i18n: '5b',
@@ -520,7 +520,7 @@ test.for([
             }
         ]
     } }),
-    ({ settings: veryNestedSettingsList, path: ['1b', '2b', '3b', '4ba', '5b', '6b', '7a'], expected: undefined })
+    ({ settings: veryNestedSettingsList, path: '1b.2b.3b.4ba.5b.6b.7a', expected: undefined })
 ])('returns $expected', ({ settings, path, expected }) => {
     expect(getSettingRecursively(path, settings)).toStrictEqual(expected);
 });

src/features/settings/utils/getSetting.js

@@ -21,7 +21,9 @@ export const getSetting = function getSetting (name, settings) {
 export const getSettingRecursively = function getSettingRecursively (sectionPath, settings) {
     const oneSettingsLevel = function oneSettingsLevel (cursor, acc) {
         const setting = getSetting(cursor[0], acc.content);
-        if (!setting) return;
+        if (!setting) {
+            return;
+        };
 
         if (setting.type === undefined) setting.type = 'section';
         if (setting.type === 'section') {
@@ -38,5 +40,5 @@ export const getSettingRecursively = function getSettingRecursively (sectionPath
             return;
         };
     };
-    return oneSettingsLevel(sectionPath, { content: settings });
+    return oneSettingsLevel(sectionPath.split('.'), { content: settings });
 };

src/features/settings/utils/settingsValidator.js

@@ -73,27 +73,12 @@ export const validateEntry = function validateEntry (entry, path) {
             throw new Error(`[settings] "${path}.default" must be a string`);
         }
         if (entry.type === 'selection') {
-            if (entry.allowMultiple) {
-                if (!Array.isArray(entry.default)) {
-                    throw new Error(`[settings] "${path}.default" must be an array`);
-                }
-                const allOptions = entry.options.map((option) => option.name);
-                entry.default.forEach((defaultValue, index) => {
-                    if (typeof defaultValue !== 'string') {
-                        throw new Error(`[settings] "${path}.default[${index}]" must be a string`);
-                    }
-                    if (!allOptions.includes(defaultValue)) {
-                        throw new Error(`[settings] option "${path}.default[${index}]" does not exist`);
-                    }
-                });
-            } else {
-                if (typeof entry.default !== 'string') {
-                    throw new Error(`[settings] "${path}.default" must be a string`);
-                };
-                if (!entry.options.map((option) => option.name).includes(entry.default)) {
-                    throw new Error(`[settings] option "${path}.default" does not exist`);
-                };
-            }
+            if (typeof entry.default !== 'string') {
+                throw new Error(`[settings] "${path}.default" must be a string`);
+            };
+            if (!entry.options.map((option) => option.name).includes(entry.default)) {
+                throw new Error(`[settings] option "${path}.default" does not exist`);
+            };
         };
     }
 }

src/features/settings/views/SettingsView.vue

@@ -43,7 +43,7 @@ watchEffect(() => {
 
 const updateSettings = function updateSettings () {
     if (activeSection.value) {
-        const setting = getSettingRecursively(activeSection.value.split('.'), settings.value);
+        const setting = getSettingRecursively(activeSection.value, settings.value);
         if (!setting) {
             router.push('/settings');
         } else {

src/features/sidebar/components/Sidebar.vue

@@ -14,60 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<script setup>
-import SidebarExpandButton from './SidebarExpandButton.vue';
-
-const props = defineProps({
-    'expanded': {
-        default: false,
-        required: false,
-        type: Boolean
-    }
-});
-const emit = defineEmits(['toggleExpanded']);
-
-const toggleSidebar = function toggleSidebar () {
-    emit('toggleExpanded');
-};
-</script>
-
 <template>
-    <nav class="sidebar" :class="{ expanded }">
-        <div class="sidebar-controls">
-            <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
-        </div>
-        <div class="sidebar-content" v-if="props.expanded">
-            <slot />
-        </div>
+    <nav class="sidebar">
+        <slot />
     </nav>
 </template>
 
 <style scoped>
 .sidebar {
     border-right: 1px solid var(--border);
-}
-
-.sidebar-controls {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-    padding: 1em 20px;
-    padding-bottom: 0;
-    margin-bottom: 8px;
-}
-
-.sidebar:not(.expanded) .sidebar-controls {
-    padding: 1em;
-}
-
-@media (max-width: 48rem) {
-    .sidebar:not(.expanded) .sidebar-expand-button {
-        display: none;
-    }
-}
-
-.sidebar-content {
     padding: 20px;
-    padding-top: 0;
 }
 </style>

src/features/sidebar/components/SidebarExpandButton.vue

@@ -1,41 +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 Icon from '@/features/icons/components/Icon.vue';
-
-const emit = defineEmits(['click']);
-
-const click = function click (event) {
-    emit('click', event);
-};
-</script>
-
-<template>
-    <button class="button sidebar-expand-button">
-        <Icon name="sidebar-expand" @click="click" />
-    </button>
-</template>
-
-<style scoped>
-.sidebar-expand-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 4px;
-    border-radius: 10px;
-}
-</style>

src/layouts/LeftSidebarLayout.vue

@@ -16,30 +16,11 @@ limitations under the License.
 
 <script setup>
 import Sidebar from '@/features/sidebar/components/Sidebar.vue';
-import SidebarExpandButton from '@/features/sidebar/components/SidebarExpandButton.vue';
-import { ref } from 'vue';
-
-const props = defineProps({
-    'expanded': {
-        default: false,
-        required: false,
-        type: Boolean
-    }
-});
-
-const expanded = ref(props.expanded);
-
-const toggleExpanded = function toggleExpanded () {
-    expanded.value = !expanded.value;
-};
 </script>
 
 <template>
-    <div class="layout-container" :class="{ expanded }">
-        <div class="sidebar-expand-button-container">
-            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
-        </div>
-        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
+    <div class="layout-container">
+        <Sidebar>
             <slot name="sidebar" />
         </Sidebar>
         <main class="main-content">
@@ -51,53 +32,11 @@ const toggleExpanded = function toggleExpanded () {
 <style scoped>
 .layout-container {
     display: grid;
-    grid-template-columns: calc(32px + 2em) 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas:
-        "sidebar-expand sidebar-expand"
-        "sidebar main-content";
+    grid-template-columns: min(24%, 280px) 1fr;
     border-top: 1px solid var(--border);
 }
 
-.layout-container.expanded {
-    grid-template-columns: min(24%, 280px) 1fr;
-}
-
-.sidebar-expand-button-container {
-    grid-area: sidebar-expand;
-    display: none;
-}
-
-.sidebar {
-    grid-area: sidebar;
-}
-
-@media (max-width: 48rem) {
-    .layout-container {
-        grid-template-columns: 0 1fr;
-    }
-
-    .layout-container.expanded {
-        grid-template-columns: 1fr 0;
-    }
-    
-    .layout-container:not(.expanded) .sidebar-expand-button-container {
-        justify-content: end;
-        display: block;
-        padding: 20px;
-    }
-
-    .layout-container:not(.expanded) .main-content {
-        padding-top: 0;
-    }
-
-    .layout-container.expanded .main-content {
-        display: none;
-    }
-}
-
 .main-content {
-    grid-area: main-content;
     padding: 20px;
 }
 </style>

src/locales/de.json

@@ -55,11 +55,6 @@
                 "ariaLabel": "Geht zur Einstellungsseite {page}"
             }
         },
-        "noSectionSelected": "Kein Einstellungsabschnitt ist ausgewählt.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Wählt die Option {option} aus"
-            }
-        }
+        "noSectionSelected": "Kein Einstellungsabschnitt ist ausgewählt."
     }
 }

src/locales/en.json

@@ -55,11 +55,6 @@
                 "ariaLabel": "Goes to settings page {page}"
             }
         },
-        "noSectionSelected": "No settings section is selected.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Selects option {option}"
-            }
-        }
+        "noSectionSelected": "No settings section is selected."
     }
 }

src/locales/es.json

@@ -38,28 +38,5 @@
             }
         }
     },
-    "slogan": "Hecho para buscar.",
-    "settings": {
-        "input": {
-            "done": {
-                "title": "Guardar valor",
-                "ariaLabel": "Guarda el valor introducido"
-            }
-        },
-        "switch": {
-            "title": "Cambiar valor",
-            "ariaLabel": "Cambia el valor"
-        },
-        "pages": {
-            "link": {
-                "ariaLabel": "Va a la página de configuración {page}"
-            }
-        },
-        "noSectionSelected": "No se ha seleccionado ninguna sección de configuración.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Selecciona la opción {option}"
-            }
-        }
-    }
+    "slogan": "Hecho para buscar."
 }

src/locales/fr.json

@@ -38,28 +38,5 @@
             }
         }
     },
-    "slogan": "Conçu pour chercher.",
-    "settings": {
-        "input": {
-            "done": {
-                "title": "Enregistrer la valeur",
-                "ariaLabel": "Enregistre la valeur saisie"
-            }
-        },
-        "switch": {
-            "title": "Basculer la valeur",
-            "ariaLabel": "Bascule la valeur"
-        },
-        "pages": {
-            "link": {
-                "ariaLabel": "Accéder à la page de paramètres {page}"
-            }
-        },
-        "noSectionSelected": "Aucune section des paramètres n'est sélectionnée.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Sélectionne l'option {option}"
-            }
-        }
-    }
+    "slogan": "Conçu pour chercher."
 }

src/locales/it.json

@@ -38,28 +38,5 @@
             }
         }
     },
-    "slogan": "Costruito per cercare.",
-    "settings": {
-        "input": {
-            "done": {
-            "title": "Salva valore",
-                "ariaLabel": "Salva il valore inserito"
-            }
-        },
-        "switch": {
-            "title": "Attiva/disattiva valore",
-            "ariaLabel": "Attiva o disattiva il valore"
-        },
-        "pages": {
-            "link": {
-                "ariaLabel": "Vai alla pagina delle impostazioni {page}"
-            }
-        },
-        "noSectionSelected": "Nessuna sezione delle impostazioni è selezionata.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Seleziona l'opzione {option}"
-            }
-        }
-    }
+    "slogan": "Costruito per cercare."
 }

src/locales/pt.json

@@ -38,28 +38,5 @@
             }
         }
     },
-    "slogan": "Feito para pesquisar.",
-    "settings": {
-        "input": {
-            "done": {
-            "title": "Guardar valor",
-                "ariaLabel": "Guarda o valor introduzido"
-            }
-        },
-        "switch": {
-            "title": "Alternar valor",
-            "ariaLabel": "Alterna o valor"
-        },
-        "pages": {
-            "link": {
-                "ariaLabel": "Ir para a página de definições {page}"
-            }
-        },
-        "noSectionSelected": "Nenhuma secção de definições está selecionada.",
-        "selection": {
-            "option": {
-                "ariaLabel": "Seleciona a opção {option}"
-            }
-        }
-    }
+    "slogan": "Feito para pesquisar."
 }

src/main.js

@@ -31,13 +31,13 @@ import './styles/variables/colors.css';
 (async () => {
     await loadLanguage(fallbackLocale);
     await loadLanguage(getCurrentLanguage());
-    
+
     const pinia = createPinia();
     pinia.use(piniaPluginPersistedstate);
-    
+
     createApp(App)
         .use(router)
         .use(i18n)
         .use(pinia)
         .mount('#app');
-})();
+})();

src/router/index.js

@@ -59,19 +59,6 @@ const router = createRouter({
     routes
 });
 
-export const updatePageTitle = function updatePageTitle (route) {
-    const title =
-        typeof route.meta.title === 'function'
-        ? route.meta.title(route)
-        : route.meta.title;
-
-    if (title) {
-        document.title = `${title} - Seekra`;
-    } else {
-        document.title = 'Seekra';
-    };
-};
-
 // remove trailing slash(es)
 router.beforeEach((route) => {
     if (route.path !== '/' && route.path.endsWith('/')) {
@@ -84,4 +71,18 @@ router.beforeEach((route) => {
     };
 });
 
+// set page title
+router.afterEach(to => {
+    const title =
+        typeof to.meta.title === 'function'
+        ? to.meta.title(to)
+        : to.meta.title;
+
+    if (title) {
+        document.title = `${title} - Seekra`;
+    } else {
+        document.title = 'Seekra';
+    };
+});
+
 export default router;

src/styles/common.css

@@ -15,8 +15,6 @@ limitations under the License.
 */
 
 body {
-    background-color: var(--light-bg);
-    color: var(--dark);
     margin: 0;
     font-size: 16px;
 }
@@ -25,7 +23,7 @@ body {
     text-decoration: none;
 }
 
-.link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
+.link:hover:not(.button-link), .link:focus:not(.button-link) {
     outline: none;
     text-decoration: underline;
 }
@@ -78,7 +76,7 @@ input {
     color: inherit;
 }
 
-.button:focus-visible {
+.button:focus {
     background-color: var(--light-hover);
     outline: none;
 }

src/styles/variables/colors.css

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-body {
+#app-wrapper {
     --primary-color-l-8:  oklch(0.897 0.202 260);
     --primary-color-l-7:  oklch(0.847 0.202 260);
     --primary-color-l-6:  oklch(0.797 0.202 260);
@@ -87,7 +87,7 @@ body {
 }
 
 @media (prefers-color-scheme: dark) {
-    body.color-scheme-auto {
+    #app-wrapper.color-scheme-auto {
         --dark-l-8:             var(--white-d-8);
         --dark-l-7:             var(--white-d-7);
         --dark-l-6:             var(--white-d-6);
@@ -121,7 +121,7 @@ body {
     }
 }
 
-body.dark {
+#app-wrapper.dark {
     --dark-l-8:             var(--white-d-8);
     --dark-l-7:             var(--white-d-7);
     --dark-l-6:             var(--white-d-6);

src/utils/__tests__/cssDimensions.test.js

@@ -14,111 +14,109 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { describe, expect,  test } from 'vitest';
+import { expect,  test } from 'vitest';
 import { ensureUnit } from '../cssDimensions';
 
-describe('cssDimensions', () => {
-    test.for([
-        { dimension: null,                       expected: '0px' },
-        { dimension: undefined,                  expected: '0px' },
+test.for([
+    { dimension: null,                       expected: '0px' },
+    { dimension: undefined,                  expected: '0px' },
 
-        { dimension: 0,                          expected: '0px' },
-        { dimension: -0,                         expected: '0px' },
-        { dimension: -1,                         expected: '-1px' },
-        { dimension: -42,                        expected: '-42px' },
-        { dimension: 1,                          expected: '1px' },
-        { dimension: 42,                         expected: '42px' },
+    { dimension: 0,                          expected: '0px' },
+    { dimension: -0,                         expected: '0px' },
+    { dimension: -1,                         expected: '-1px' },
+    { dimension: -42,                        expected: '-42px' },
+    { dimension: 1,                          expected: '1px' },
+    { dimension: 42,                         expected: '42px' },
 
-        { dimension: 0.0,                        expected: '0px' },
-        { dimension: -0.0,                       expected: '0px' },
-        { dimension: -1.0,                       expected: '-1px' },
-        { dimension: -42.0,                      expected: '-42px' },
-        { dimension: 1.0,                        expected: '1px' },
-        { dimension: 42.0,                       expected: '42px' },
+    { dimension: 0.0,                        expected: '0px' },
+    { dimension: -0.0,                       expected: '0px' },
+    { dimension: -1.0,                       expected: '-1px' },
+    { dimension: -42.0,                      expected: '-42px' },
+    { dimension: 1.0,                        expected: '1px' },
+    { dimension: 42.0,                       expected: '42px' },
 
-        { dimension: 0.42,                       expected: '0.42px' },
-        { dimension: -0.42,                      expected: '-0.42px' },
-        { dimension: -1.42,                      expected: '-1.42px' },
-        { dimension: -42.42,                     expected: '-42.42px' },
-        { dimension: 1.42,                       expected: '1.42px' },
-        { dimension: 42.42,                      expected: '42.42px' },
+    { dimension: 0.42,                       expected: '0.42px' },
+    { dimension: -0.42,                      expected: '-0.42px' },
+    { dimension: -1.42,                      expected: '-1.42px' },
+    { dimension: -42.42,                     expected: '-42.42px' },
+    { dimension: 1.42,                       expected: '1.42px' },
+    { dimension: 42.42,                      expected: '42.42px' },
 
-        { dimension: '0',                        expected: '0px' },
-        { dimension: '-0',                       expected: '-0px' },
-        { dimension: '-1',                       expected: '-1px' },
-        { dimension: '-42',                      expected: '-42px' },
-        { dimension: '1',                        expected: '1px' },
-        { dimension: '42',                       expected: '42px' },
+    { dimension: '0',                        expected: '0px' },
+    { dimension: '-0',                       expected: '-0px' },
+    { dimension: '-1',                       expected: '-1px' },
+    { dimension: '-42',                      expected: '-42px' },
+    { dimension: '1',                        expected: '1px' },
+    { dimension: '42',                       expected: '42px' },
 
-        { dimension: '0.0',                      expected: '0.0px' },
-        { dimension: '-0.0',                     expected: '-0.0px' },
-        { dimension: '-1.0',                     expected: '-1.0px' },
-        { dimension: '-42.0',                    expected: '-42.0px' },
-        { dimension: '1.0',                      expected: '1.0px' },
-        { dimension: '42.0',                     expected: '42.0px' },
+    { dimension: '0.0',                      expected: '0.0px' },
+    { dimension: '-0.0',                     expected: '-0.0px' },
+    { dimension: '-1.0',                     expected: '-1.0px' },
+    { dimension: '-42.0',                    expected: '-42.0px' },
+    { dimension: '1.0',                      expected: '1.0px' },
+    { dimension: '42.0',                     expected: '42.0px' },
 
-        { dimension: '0.42',                     expected: '0.42px' },
-        { dimension: '-0.42',                    expected: '-0.42px' },
-        { dimension: '-1.42',                    expected: '-1.42px' },
-        { dimension: '-42.42',                   expected: '-42.42px' },
-        { dimension: '1.42',                     expected: '1.42px' },
-        { dimension: '42.42',                    expected: '42.42px' },
+    { dimension: '0.42',                     expected: '0.42px' },
+    { dimension: '-0.42',                    expected: '-0.42px' },
+    { dimension: '-1.42',                    expected: '-1.42px' },
+    { dimension: '-42.42',                   expected: '-42.42px' },
+    { dimension: '1.42',                     expected: '1.42px' },
+    { dimension: '42.42',                    expected: '42.42px' },
 
-        { dimension: '0px',                      expected: '0px' },
-        { dimension: '-0px',                     expected: '-0px' },
-        { dimension: '-1px',                     expected: '-1px' },
-        { dimension: '-42px',                    expected: '-42px' },
-        { dimension: '1px',                      expected: '1px' },
-        { dimension: '42px',                     expected: '42px' },
+    { dimension: '0px',                      expected: '0px' },
+    { dimension: '-0px',                     expected: '-0px' },
+    { dimension: '-1px',                     expected: '-1px' },
+    { dimension: '-42px',                    expected: '-42px' },
+    { dimension: '1px',                      expected: '1px' },
+    { dimension: '42px',                     expected: '42px' },
 
-        { dimension: '0.0px',                    expected: '0.0px' },
-        { dimension: '-0.0px',                   expected: '-0.0px' },
-        { dimension: '-1.0px',                   expected: '-1.0px' },
-        { dimension: '-42.0px',                  expected: '-42.0px' },
-        { dimension: '1.0px',                    expected: '1.0px' },
-        { dimension: '42.0px',                   expected: '42.0px' },
+    { dimension: '0.0px',                    expected: '0.0px' },
+    { dimension: '-0.0px',                   expected: '-0.0px' },
+    { dimension: '-1.0px',                   expected: '-1.0px' },
+    { dimension: '-42.0px',                  expected: '-42.0px' },
+    { dimension: '1.0px',                    expected: '1.0px' },
+    { dimension: '42.0px',                   expected: '42.0px' },
 
-        { dimension: '0.42px',                   expected: '0.42px' },
-        { dimension: '-0.42px',                  expected: '-0.42px' },
-        { dimension: '-1.42px',                  expected: '-1.42px' },
-        { dimension: '-42.42px',                 expected: '-42.42px' },
-        { dimension: '1.42px',                   expected: '1.42px' },
-        { dimension: '42.42px',                  expected: '42.42px' },
+    { dimension: '0.42px',                   expected: '0.42px' },
+    { dimension: '-0.42px',                  expected: '-0.42px' },
+    { dimension: '-1.42px',                  expected: '-1.42px' },
+    { dimension: '-42.42px',                 expected: '-42.42px' },
+    { dimension: '1.42px',                   expected: '1.42px' },
+    { dimension: '42.42px',                  expected: '42.42px' },
 
-        { dimension: '0em',                      expected: '0em' },
-        { dimension: '-0em',                     expected: '-0em' },
-        { dimension: '-1em',                     expected: '-1em' },
-        { dimension: '-42em',                    expected: '-42em' },
-        { dimension: '1em',                      expected: '1em' },
-        { dimension: '42em',                     expected: '42em' },
+    { dimension: '0em',                      expected: '0em' },
+    { dimension: '-0em',                     expected: '-0em' },
+    { dimension: '-1em',                     expected: '-1em' },
+    { dimension: '-42em',                    expected: '-42em' },
+    { dimension: '1em',                      expected: '1em' },
+    { dimension: '42em',                     expected: '42em' },
 
-        { dimension: '0.0em',                    expected: '0.0em' },
-        { dimension: '-0.0em',                   expected: '-0.0em' },
-        { dimension: '-1.0em',                   expected: '-1.0em' },
-        { dimension: '-42.0em',                  expected: '-42.0em' },
-        { dimension: '1.0em',                    expected: '1.0em' },
-        { dimension: '42.0em',                   expected: '42.0em' },
+    { dimension: '0.0em',                    expected: '0.0em' },
+    { dimension: '-0.0em',                   expected: '-0.0em' },
+    { dimension: '-1.0em',                   expected: '-1.0em' },
+    { dimension: '-42.0em',                  expected: '-42.0em' },
+    { dimension: '1.0em',                    expected: '1.0em' },
+    { dimension: '42.0em',                   expected: '42.0em' },
 
-        { dimension: '0.42em',                   expected: '0.42em' },
-        { dimension: '-0.42em',                  expected: '-0.42em' },
-        { dimension: '-1.42em',                  expected: '-1.42em' },
-        { dimension: '-42.42em',                 expected: '-42.42em' },
-        { dimension: '1.42em',                   expected: '1.42em' },
-        { dimension: '42.42em',                  expected: '42.42em' },
+    { dimension: '0.42em',                   expected: '0.42em' },
+    { dimension: '-0.42em',                  expected: '-0.42em' },
+    { dimension: '-1.42em',                  expected: '-1.42em' },
+    { dimension: '-42.42em',                 expected: '-42.42em' },
+    { dimension: '1.42em',                   expected: '1.42em' },
+    { dimension: '42.42em',                  expected: '42.42em' },
 
-        { dimension: 'calc(42px - 1em)',         expected: 'calc(42px - 1em)' },
-        { dimension: 'calc(42px)',               expected: 'calc(42px)' },
-        { dimension: 'calc(42vh)',               expected: 'calc(42vh)' },
-        { dimension: 'min(42px, 1em)',           expected: 'min(42px, 1em)' },
-        { dimension: 'max(42px, 5rem)',          expected: 'max(42px, 5rem)' },
-        { dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' },
+    { dimension: 'calc(42px - 1em)',         expected: 'calc(42px - 1em)' },
+    { dimension: 'calc(42px)',               expected: 'calc(42px)' },
+    { dimension: 'calc(42vh)',               expected: 'calc(42vh)' },
+    { dimension: 'min(42px, 1em)',           expected: 'min(42px, 1em)' },
+    { dimension: 'max(42px, 5rem)',          expected: 'max(42px, 5rem)' },
+    { dimension: 'clamp(42vh, 23vw, 13cap)', expected: 'clamp(42vh, 23vw, 13cap)' },
 
-        { dimension: 'calc(42px-1em)',           expected: 'calc(42px-1em)' },
-        { dimension: 'min(42px,1em)',            expected: 'min(42px,1em)' },
-        { dimension: 'max(42px,5rem)',           expected: 'max(42px,5rem)' },
-        { dimension: 'clamp(42vh,23vw,13cap)',   expected: 'clamp(42vh,23vw,13cap)' },
-        { dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' }
-    ])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => {
-        expect(ensureUnit(dimension)).toBe(expected);
-    });
+    { dimension: 'calc(42px-1em)',           expected: 'calc(42px-1em)' },
+    { dimension: 'min(42px,1em)',            expected: 'min(42px,1em)' },
+    { dimension: 'max(42px,5rem)',           expected: 'max(42px,5rem)' },
+    { dimension: 'clamp(42vh,23vw,13cap)',   expected: 'clamp(42vh,23vw,13cap)' },
+    { dimension: 'clamp( 42vh,23vw,13cap )', expected: 'clamp( 42vh,23vw,13cap )' }
+])('ensureUnit returns $expected with input $dimension', ({ dimension, expected }) => {
+    expect(ensureUnit(dimension)).toBe(expected);
 });

src/utils/__tests__/currentLanguage.test.js

@@ -14,48 +14,48 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { describe, expect, test } from 'vitest';
+import { expect, test } from 'vitest';
 import getCurrentLanguage from '../currentLanguage';
 
-describe('currentLanguage', () => {
-    test.for([
-        { navigatorLanguage: 'en',                      localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'de',                      localStorageLanguage: null, expected: 'de'},
-        { navigatorLanguage: 'fr',                      localStorageLanguage: null, expected: 'fr'},
+const locales = [
+    { navigatorLanguage: 'en',                      localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de',                      localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'fr',                      localStorageLanguage: null, expected: 'fr'},
 
-        { navigatorLanguage: 'en-US',                   localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'en-AU',                   localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'de-DE',                   localStorageLanguage: null, expected: 'de'},
-        { navigatorLanguage: 'fr-FR',                   localStorageLanguage: null, expected: 'fr'},
+    { navigatorLanguage: 'en-US',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'en-AU',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de-DE',                   localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'fr-FR',                   localStorageLanguage: null, expected: 'fr'},
 
-        { navigatorLanguage: 'en-us',                   localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'en-au',                   localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'de-de',                   localStorageLanguage: null, expected: 'de'},
-        { navigatorLanguage: 'fr-fr',                   localStorageLanguage: null, expected: 'fr'},
+    { navigatorLanguage: 'en-us',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'en-au',                   localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de-de',                   localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'fr-fr',                   localStorageLanguage: null, expected: 'fr'},
 
-        { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: null, expected: 'zh'},
-        { navigatorLanguage: 'zh-Hant-TW',              localStorageLanguage: null, expected: 'zh'},
-        { navigatorLanguage: 'uz-Latn-UZ',              localStorageLanguage: null, expected: 'uz'},
+    { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: null, expected: 'zh'},
+    { navigatorLanguage: 'zh-Hant-TW',              localStorageLanguage: null, expected: 'zh'},
+    { navigatorLanguage: 'uz-Latn-UZ',              localStorageLanguage: null, expected: 'uz'},
 
-        { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: null, expected: 'en'},
-        { navigatorLanguage: 'de-DE-u-co-phonebk',      localStorageLanguage: null, expected: 'de'},
-        { navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', localStorageLanguage: null, expected: 'zh'},
+    { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: null, expected: 'en'},
+    { navigatorLanguage: 'de-DE-u-co-phonebk',      localStorageLanguage: null, expected: 'de'},
+    { navigatorLanguage: 'zh-Hant-TW-u-co-phonebk', localStorageLanguage: null, expected: 'zh'},
 
-        { navigatorLanguage: 'en',                      localStorageLanguage: 'de', expected: 'de'},
-        { navigatorLanguage: 'de-DE',                   localStorageLanguage: 'en', expected: 'en'},
-        { navigatorLanguage: 'de-de',                   localStorageLanguage: 'en', expected: 'en'},
-        { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: 'fr', expected: 'fr'},
-        { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: 'zh', expected: 'zh'}
-    ])('returns the language $expected (navigator: $navigatorLanguage; local storage: $localStorageLanguage)', ({ navigatorLanguage, localStorageLanguage, expected }) => {
-        Object.defineProperty(navigator, 'language', {
-            value: navigatorLanguage,
-            configurable: true
-        });
+    { navigatorLanguage: 'en',                      localStorageLanguage: 'de', expected: 'de'},
+    { navigatorLanguage: 'de-DE',                   localStorageLanguage: 'en', expected: 'en'},
+    { navigatorLanguage: 'de-de',                   localStorageLanguage: 'en', expected: 'en'},
+    { navigatorLanguage: 'zh-Hans-CN',              localStorageLanguage: 'fr', expected: 'fr'},
+    { navigatorLanguage: 'en-US-u-ca-gregory',      localStorageLanguage: 'zh', expected: 'zh'}
+];
 
-        if (localStorageLanguage) {
-            localStorage.setItem('locale', localStorageLanguage);
-        };
-
-        expect(getCurrentLanguage()).toBe(expected);
+test.for(locales)('returns the language $expected (navigator: $navigatorLanguage; local storage: $localStorageLanguage)', ({ navigatorLanguage, localStorageLanguage, expected }) => {
+    Object.defineProperty(navigator, 'language', {
+        value: navigatorLanguage,
+        configurable: true
     });
+
+    if (localStorageLanguage) {
+        localStorage.setItem('locale', localStorageLanguage);
+    };
+
+    expect(getCurrentLanguage()).toBe(expected);
 });