feat(language-switch-in-footer): show the dropdown menu above instead of below the button

Reviewed-on: #99
Reviewed-by: Johannes D. Vos

docs/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+## [Unreleased]
+
+### Added
+
+- Start page
+- Settings page
+- Footer
+- Navbar
+- Searchbar
+- Icons
+- Internationalization and some major languages
+- Color scheme
+- Search results view with error message which indicates that the search is not available

package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run"
   },
   "dependencies": {
     "terser": "^5.47.1",
@@ -16,7 +18,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.6",
+    "jsdom": "^29.1.1",
     "vite": "^8.0.10",
-    "vite-plugin-html": "^3.2.2"
+    "vite-plugin-html": "^3.2.2",
+    "vitest": "^4.1.7"
   }
 }

src/App.vue

@@ -49,6 +49,12 @@ watch(colorScheme, val => updateColorScheme(val))
     flex-grow: 1;
 }
 
+@media (max-width: 48rem) {
+    .main-content {
+        --main-content-padding-x: 15px;
+    }
+}
+
 #app-wrapper {
     min-height: 100vh;
     display: flex;

src/assets/icons/chevron-down.svg

@@ -0,0 +1,26 @@
+<!--
+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="3"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M4 8 l8 8 l8 -8"
+    />
+</svg>

src/assets/icons/circle-black-white.svg

@@ -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.
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path
+        fill="currentColor"
+        d="
+            M12 2
+            a10 10 0 0 0 -10 10
+            a10 10 0 0 0 10 10
+            a10 10 0 0 0 10 -10
+            a10 10 0 0 0 -10 -10
+        "
+    />
+    <path
+        style="filter: invert(1)"
+        fill="currentColor"
+        d="
+            M12 3
+            v18
+            a9 9 0 0 0 9 -9
+            a9 9 0 0 0 -9 -9
+        "
+    />
+</svg>

src/assets/icons/crescent-moon.svg

@@ -0,0 +1,36 @@
+<!--
+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
+        fill="currentColor"
+        stroke="none"
+        stroke-width="0"
+        d="
+            M12.621094 23.988281
+            c-6.960938 0 -12.621094 -5.664062000000001 -12.621094 -12.621093
+            c0 -4.8203130000000005 2.683594 -9.148438 7.003906 -11.300781800000001
+            c0.19140600000000063 -0.09765619999999942 0.4257819999999999 -0.058593699999999416 0.578125 0.09374980000000058
+            c0.15234400000000026 0.152344 0.19531300000000051 0.38671900000000003 0.09765699999999988 0.582032
+            c-0.7890629999999996 1.601562 -1.1875 3.320312 -1.1875 5.113281000000001
+            c0.0 6.402342999999999 5.207031 11.613281 11.609374000000003 11.613281
+            c1.8125 0.0 3.550781999999998 -0.41015600000000063 5.167968999999999 -1.2148439999999994
+            c0.19531299999999874 -0.09765600000000063 0.42968799999999874 -0.05859399999999937 0.5820310000000006 0.09375
+            c0.15234399999999937 0.15234399999999937 0.1914069999999981 0.38671899999999937 0.0976569999999981 0.5820319999999981
+            c-2.140625 4.351562000000001 -6.480468999999999 7.058593000000002 -11.328125 7.058593000000002
+        "
+    />
+</svg>

src/assets/icons/magnifying-glass.svg

@@ -0,0 +1,36 @@
+<!--
+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="3"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M2 22 l8 -8"
+    />
+    <circle
+        stroke="currentColor"
+        stroke-width="3"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        cx="15.5"
+        cy="8.5"
+        r="6.5"
+    />
+</svg>

src/assets/icons/sun.svg

@@ -0,0 +1,45 @@
+<!--
+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">
+    <circle fill="currentColor" r="6" cx="12" cy="12" />
+
+    <!-- sunbeams -->
+
+    <!-- left -->
+    <circle fill="currentColor" r="2" cx="3" cy="12" />
+
+    <!-- right -->
+    <circle fill="currentColor" r="2" cx="21" cy="12" />
+
+    <!-- top -->
+    <circle fill="currentColor" r="2" cx="12" cy="3" />
+
+    <!-- top -->
+    <circle fill="currentColor" r="2" cx="12" cy="21" />
+
+    <!-- top left -->
+    <circle fill="currentColor" r="2" cx="5.636038969321072" cy="5.636038969321072" />
+
+    <!-- top right -->
+    <circle fill="currentColor" r="2" cx="18.36396103067893" cy="5.636038969321072" />
+
+    <!-- bottom left -->
+    <circle fill="currentColor" r="2" cx="5.636038969321072" cy="18.36396103067893" />
+
+    <!-- bottom right -->
+    <circle fill="currentColor" r="2" cx="18.36396103067893" cy="18.36396103067893" />
+</svg>

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -15,6 +15,8 @@ limitations under the License.
 -->
 
 <script setup>
+import Icon from '@/features/icons/components/Icon.vue';
+
 import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -29,9 +31,9 @@ const colorSchemeNextMapper = {
 };
 
 const colorSchemeIconMapper = {
-    'dark': '⏾',
+    'dark': 'crescent-moon',
-    'light': '☀',
+    'light': 'sun',
-    'auto': '◐'
+    'auto': 'circle-black-white'
 };
 
 const getTooltipTranslation = function (colorScheme) {
@@ -45,7 +47,10 @@ const getTooltipTranslation = function (colorScheme) {
         :aria-label="getTooltipTranslation(colorScheme)"
         :title="getTooltipTranslation(colorScheme)"
     >
-        {{ colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]] }}
+        <Icon
+            :name="colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]]"
+            size="16"
+        />
     </button>
 </template>
 

src/features/footer/components/Footer.vue

@@ -15,6 +15,8 @@ limitations under the License.
 -->
 
 <script setup>
+import LanguageSwitchButton from '@/features/i18n/components/LanguageSwitchButton.vue';
+
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -36,11 +38,10 @@ const copyrightPeriod =
             <RouterLink to="settings" class="link">
                 {{ t('preferences.settings') }}
             </RouterLink>
+            <LanguageSwitchButton />
         </div>
         <div class="footer-segment">
-            <div class="copyright-note">
+            &copy; {{ copyrightPeriod }} Seekra
-                &copy; {{ copyrightPeriod }} Seekra
-            </div>
         </div>
     </footer>
 </template>
@@ -51,6 +52,9 @@ const copyrightPeriod =
 }
 
 .footer-segment {
+    display: flex;
+    justify-content: center;
+    gap: 32px;
     padding: var(--padding-y);
     background-color: var(--light-bg);
     border-top: 1px solid var(--border);
@@ -59,9 +63,4 @@ const copyrightPeriod =
 .global-footer a {
     color: var(--dark);
 }
-
-.copyright-note {
-    display: flex;
-    justify-content: center;
-}
 </style>

src/features/i18n/components/LanguageSwitchButton.vue

@@ -15,6 +15,8 @@ limitations under the License.
 -->
 
 <script setup>
+import Icon from '@/features/icons/components/Icon.vue';
+
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { loadLanguage, LANGUAGES_RTL, SUPPORTED_LANGUAGES } from '@/i18n';
@@ -64,10 +66,20 @@ const open = function () {
             aria-haspopup="listbox"
         >
             <span class="lang-code">{{ t(`preferences.locale.languages.${locale}`) }}</span>
-            <span class="chevron" :class="{ open: isOpen }">▾</span>
+            <span class="chevron" :class="{ open: isOpen }">
+                <Icon name="chevron-down" size="1em" />
+            </span>
         </button>
 
-        <ul v-if="isOpen" ref="languageDropdown" class="language-dropdown" role="listbox">
+        <ul
+            v-if="isOpen"
+            ref="languageDropdown"
+            class="language-dropdown"
+            role="listbox"
+            :style="{
+                bottom: 'calc(var(--offset) + 2 * var(--trigger-padding-y) + 1em)' // easier to add auto adaption to the available space
+            }"
+        >
             <li
                 v-for="lang in SUPPORTED_LANGUAGES"
                 :key="lang"
@@ -84,6 +96,7 @@ const open = function () {
 
 <style scoped>
 .language-switch {
+    --trigger-padding-y: 4px;
     position: relative;
 }
 
@@ -94,7 +107,7 @@ const open = function () {
     background: none;
     border: 1px solid var(--border);
     border-radius: 6px;
-    padding: 4px 10px;
+    padding: var(--trigger-padding-y) 10px;
     cursor: pointer;
     color: var(--dark);
 }
@@ -114,9 +127,9 @@ const open = function () {
 }
 
 .language-dropdown {
+    --offset: 6px;
     position: absolute;
     right: 0;
-    top: calc(100% + 6px);
     background-color: var(--light-bg);
     border: 1px solid var(--border);
     border-radius: 8px;

src/features/icons/components/Icon.vue

@@ -0,0 +1,54 @@
+<!--
+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 { ensureUnit } from '@/utils/cssDimensions';
+
+const props = defineProps({
+    name: {
+        required: true,
+        type: String
+    },
+    size: {
+        type: [Number, String],
+        default: 24
+    }
+})
+
+const icons = import.meta.glob('@/assets/icons/*.svg', {
+    eager: true,
+    import: 'default'
+})
+
+const Icon = computed(() => icons[`/src/assets/icons/${props.name}.svg`])
+
+const size = computed(() => ensureUnit(props.size))
+</script>
+
+<template>
+    <div class="icon-container">
+        <img :src="Icon" :style="{ height: `${size}`, width: `${size}` }" />
+    </div>
+</template>
+
+<style scoped>
+.icon-container {
+    display: flex;
+    align-items: center;
+    filter: var(--invert);
+}
+</style>

src/features/nav/components/Navbar.vue

@@ -15,25 +15,9 @@ 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/i18n/components/LanguageSwitchButton.vue';
 import logo from '@/assets/images/logo.svg';
-import Searchbar from '@/features/search/components/Searchbar.vue';
+import NavbarSearchBarWrapper from './NavbarSearchBarWrapper.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>
@@ -41,21 +25,16 @@ watch(() => route.query.q, q => {
         <RouterLink to="/" class="link button link">
             <img :src="logo" alt="Seekra" class="nav-logo" />
         </RouterLink>
-        <Searchbar
+        <NavbarSearchBarWrapper class="navbar-search-bar-wrapper" />
-            v-if="route.name === 'searchResults'"
-            class="search-bar"
-            v-model="searchQueryModel"
-            auto-submit
-        />
         <ul class="right-links">
-            <li>
-                <LanguageSwitchButton />
-            </li>
             <li>
                 <ColorSchemeButton />
             </li>
         </ul>
     </nav>
+    <div class="navbar-search-bar-wrapper-small-screens-wrapper">
+        <NavbarSearchBarWrapper class="navbar-search-bar-wrapper-small-screens" />
+    </div>
 </template>
 
 <style scoped>
@@ -89,7 +68,27 @@ watch(() => route.query.q, q => {
     height: 24px;
     width: auto;
 }
-.search-bar {
+
-    width: 70%;
+.navbar-search-bar-wrapper {
+    width: 100%;
+    padding: 0 30px;
+}
+
+.navbar-search-bar-wrapper-small-screens-wrapper {
+    padding: 0 15px 15px;
+}
+
+.navbar-search-bar-wrapper-small-screens {
+    display: none;
+}
+
+@media (max-width: 48rem) {
+    .navbar-search-bar-wrapper {
+        display: none;
+    }
+
+    .navbar-search-bar-wrapper-small-screens {
+        display: block;
+    }
 }
 </style>

src/features/nav/components/NavbarSearchBarWrapper.vue

@@ -0,0 +1,43 @@
+<!--
+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 Searchbar from '@/features/search/components/Searchbar.vue';
+
+import { watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+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>
+    <Searchbar
+        v-if="route.name === 'searchResults'"
+        v-model="searchQueryModel"
+        auto-submit
+    />
+</template>

src/features/search/components/Searchbar.vue

@@ -15,6 +15,8 @@ limitations under the License.
 -->
 
 <script setup>
+import Icon from '@/features/icons/components/Icon.vue';
+
 const searchQuery = defineModel();
 
 import { useRouter } from 'vue-router';
@@ -37,7 +39,7 @@ const submitSearch = function () {
 
 <template>
     <div>
-        <form @submit.prevent="submitSearch">
+        <form @submit.prevent="submitSearch" class="search-form">
             <div class="search-wrapper">
                 <input
                 v-model="searchQuery"
@@ -45,7 +47,14 @@ const submitSearch = function () {
                 :placeholder="t('search.searchBar.placeholder')"
                 required
                 />
-                <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
+                <button
+                    type="submit"
+                    class="search-button"
+                    :title="t('search.searchBar.submit')"
+                    :aria-label="t('search.searchBar.submit')"
+                >
+                    <Icon class="search-icon" name="magnifying-glass" size="1.1em" />
+                </button>
             </div>
         </form>
     </div>
@@ -79,6 +88,7 @@ const submitSearch = function () {
 .search-button {
     font-size: 1rem;
     height: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
+    width: calc(var(--content-height) + 2 * var(--submit-button-padding-y));
     border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y));
     border: none;
     padding: var(--submit-button-padding-y) 20px;
@@ -86,9 +96,20 @@ const submitSearch = function () {
     color: var(--white);
     cursor: pointer;
     white-space: nowrap;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.search-button .search-icon {
+    filter: invert(1);
 }
 
 .search-button:hover {
     background: var(--primary-color-l-1);
 }
+
+.search-form {
+    width: 100%;
+}
 </style>

src/styles/variables/colors.css

@@ -82,6 +82,8 @@ limitations under the License.
     --blue-box-shadow:    oklch(0.52 0.15 268 / 0.25);
 
     --light-hover:          var(--light-d-2);
+
+    --invert: invert(0);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -114,6 +116,8 @@ limitations under the License.
         --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
 
         --light-hover:          var(--light-d-5);
+
+        --invert: invert(1);
     }
 }
 
@@ -146,4 +150,6 @@ limitations under the License.
     --gray-box-shadow:    oklch(0.25 0.0001 271 / 0.7);
 
     --light-hover:          var(--light-d-5);
+
+    --invert: invert(1);
 }

src/utils/cssDimensions.js

@@ -0,0 +1,31 @@
+/*
+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 ensureUnit = function (d) {
+    if (!d) d = 0;
+
+    // ensure that it is a string
+    if (typeof d === 'number') d = d.toString();
+
+    if (d === '') d = '0';
+
+    // if it ends with a number
+    if (/\d$/.test(d)) {
+        d += 'px';
+    };
+
+    return d;
+};

vite.config.js

@@ -21,6 +21,9 @@ import { createHtmlPlugin } from 'vite-plugin-html';
 
 // https://vite.dev/config/
 export default defineConfig({
+  build: {
+    target: 'es2020'
+  },
   plugins: [
     vue(),
     createHtmlPlugin({
@@ -31,5 +34,9 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, './src')
     }
+  },
+  test: {
+    globals: false,
+    environment: 'jsdom'
   }
 })