Merge branch 'main' into bug/colors

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -16,6 +16,9 @@ limitations under the License.
 
 <script setup>
 import { inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const colorScheme = inject('colorScheme');
 
@@ -25,24 +28,22 @@ const colorSchemeNextMapper = {
     'auto': 'light'
 };
 
-const colorSchemeTextMapper = {
-    'light': 'Switch to light mode',
-    'dark': 'Switch to dark mode',
-    'auto': 'Switch to the system scheme'
-}
-
 const colorSchemeIconMapper = {
     'dark': '⏾',
     'light': '☀',
     'auto': '◐'
-}
+};
+
+const getTooltipTranslation = function (colorScheme) {
+    return t(`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`);
+};
 </script>
 
 <template>
     <button class="color-scheme-button"
         @click="colorScheme = colorSchemeNextMapper[colorScheme]"
-        :aria-label="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
-        :title="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
+        :aria-label="getTooltipTranslation(colorScheme)"
+        :title="getTooltipTranslation(colorScheme)"
     >
         {{ colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]] }}
     </button>

src/features/i18n/components/LanguageSwitchButton.vue

@@ -0,0 +1,151 @@
+<!--
+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 { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { loadLanguage, LANGUAGES_RTL, SUPPORTED_LANGUAGES } from '@/i18n';
+
+const { t, locale } = useI18n();
+
+const isOpen = ref(false);
+const languageDropdown = ref(null);
+
+async function selectLanguage(code) {
+    await loadLanguage(code);
+    localStorage.setItem('locale', code);
+    document.documentElement.lang = code;
+    document.documentElement.dir = LANGUAGES_RTL.includes(code) ? 'rtl' : 'ltr';
+    close();
+};
+
+const close = function () {
+    document.removeEventListener('click', closeWrapperOnClickOutsite);
+    isOpen.value = false;
+};
+
+const closeWrapperOnClickOutsite = function (e) {
+    if (languageDropdown.value) {
+        if (!languageDropdown.value.contains(e.target)) {
+            close();
+        };
+    };
+};
+
+const open = function () {
+    if (!isOpen.value) {
+        isOpen.value = true;
+        setTimeout(() => {
+            document.addEventListener('click', closeWrapperOnClickOutsite);
+        }, 0);
+    };
+};
+</script>
+
+<template>
+    <div class="language-switch" tabindex="-1">
+        <button
+            class="language-button button"
+            @click="open"
+            :aria-expanded="isOpen"
+            aria-haspopup="listbox"
+        >
+            <span class="lang-code">{{ t(`preferences.locale.languages.${locale}`) }}</span>
+            <span class="chevron" :class="{ open: isOpen }">▾</span>
+        </button>
+
+        <ul v-if="isOpen" ref="languageDropdown" class="language-dropdown" role="listbox">
+            <li
+                v-for="lang in SUPPORTED_LANGUAGES"
+                :key="lang"
+                role="option"
+                :aria-selected="lang === locale"
+                :class="{ active: lang === locale }"
+                @click="selectLanguage(lang)"
+            >
+                <span class="lang-label">{{ t(`preferences.locale.languages.${lang}`) }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style scoped>
+.language-switch {
+    position: relative;
+}
+
+.language-button {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    background: none;
+    border: 1px solid var(--light-d-3);
+    border-radius: 6px;
+    padding: 4px 10px;
+    cursor: pointer;
+    color: var(--dark);
+}
+
+.language-button:hover {
+    background-color: var(--light-d-1);
+}
+
+.chevron {
+    font-size: 0.75rem;
+    transition: transform 0.2s;
+    display: inline-block;
+}
+
+.chevron.open {
+    transform: rotate(180deg);
+}
+
+.language-dropdown {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 6px);
+    background-color: var(--light-bg);
+    border: 1px solid var(--light-d-3);
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    list-style: none;
+    margin: 0;
+    padding: 6px 0;
+    min-width: 160px;
+    z-index: 100;
+}
+
+.language-dropdown li {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.language-dropdown li:hover {
+    background-color: var(--light-d-1);
+}
+
+.language-dropdown li.active {
+    font-weight: bold;
+}
+
+.flag {
+    font-size: 1.1rem;
+}
+</style>

src/features/nav/components/Navbar.vue

@@ -16,19 +16,23 @@ limitations under the License.
 
 <script setup>
 import ColorSchemeButton from '@/features/colorScheme/components/ColorSchemeButton.vue';
-
+import LanguageSwitchButton from '@/features/i18n/components/LanguageSwitchButton.vue';
 import logo from '@/assets/logo.svg';
 </script>
+
 <template>
     <nav class="global-nav">
         <RouterLink to="/" class="link button link">
-        <img :src="logo" alt="Seekra" class="nav-logo" />
+            <img :src="logo" alt="Seekra" class="nav-logo" />
         </RouterLink>
-    <ul class="right-links">
-        <li>
-            <ColorSchemeButton />
-        </li>
-    </ul>
+        <ul class="right-links">
+            <li>
+                <LanguageSwitchButton />
+            </li>
+            <li>
+                <ColorSchemeButton />
+            </li>
+        </ul>
     </nav>
 </template>
 
@@ -46,6 +50,7 @@ import logo from '@/assets/logo.svg';
     list-style: none;
     margin: 0;
     padding: 0;
+    align-items: center;
 }
 
 .global-nav .right-links a {

src/features/search/components/Searchbar.vue

@@ -18,6 +18,9 @@ limitations under the License.
 const searchQuery = defineModel();
 
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const router = useRouter()
 const props = defineProps(['autoSubmit'])
@@ -38,10 +41,10 @@ const submitSearch = function () {
             <input
                 v-model="searchQuery"
                 type="search"
-                placeholder="Search..."
+                :placeholder="t('search.searchBar.placeholder')"
                 required
             />
-            <button type="submit" class="search-button">Search</button>
+            <button type="submit" class="search-button">{{ t('search.searchBar.submit') }}</button>
         </div>
     </form>
     </template>

src/features/search/views/SearchResultsView.vue

@@ -17,6 +17,10 @@ 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();
@@ -28,8 +32,8 @@ searchQueryModel.value = props.searchQuery;
 
     <div class="search-results-error-message-container">
         <div class="search-results-error-message">
-            <p>Search is not available right now.</p>
-            <p>Please try again to another time.</p>
+            <p>{{ t('search.error.searchNotAvailable') }}</p>
+            <p>{{ t('error.tryAgainToAnotherTime') }}</p>
         </div>
     </div>
     <div class="search-results-container">

src/i18n.js

@@ -0,0 +1,60 @@
+/*
+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 { createI18n } from 'vue-i18n';
+import getCurrentLanguage from './utils/currentLanguage';
+
+export const fallbackLocale = 'en';
+
+
+export const LANGUAGES_RTL = [
+    'ar'
+];
+export const SUPPORTED_LANGUAGES = [
+    'en',
+    'de',
+    'fr',
+    'es',
+    'it',
+    'pt'
+];
+
+export const i18n = createI18n({
+    legacy: false,
+    locale: getCurrentLanguage(),
+    fallbackLocale: fallbackLocale,
+    messages: {}
+});
+
+const loadedLanguages = new Set();
+
+export async function loadLanguage (locale) {
+    if (!SUPPORTED_LANGUAGES.includes(locale)) {
+        locale = fallbackLocale;
+    }
+
+    if (loadedLanguages.has(locale)) {
+        i18n.global.locale.value = locale;
+        return;
+    };
+
+    const messages = (await import(`./locales/${locale}.json`)).default;
+
+    i18n.global.setLocaleMessage(locale, messages);
+    i18n.global.locale.value = locale;
+
+    loadedLanguages.add(locale);
+};

src/locales/de.json

@@ -0,0 +1,40 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Suchen",
+            "placeholder": "Suchen..."
+        },
+        "error": {
+            "searchNotAvailable": "Die Suche ist momentan nicht verfügbar."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Bitte versuchen Sie es zu einem anderen Zeitpunkt erneut.",
+        "pageNotFound": "Die gesuchte Seite existiert nicht. Bitte überprüfen Sie die URL oder kehren Sie zur Suchseite zurück."
+    },
+    "links": {
+        "back": {
+            "search": "Zurück zur Suche"
+        }
+    },
+    "preferences": {
+        "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."
+}

src/locales/en.json

@@ -0,0 +1,40 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Search",
+            "placeholder": "Search..."
+        },
+        "error": {
+            "searchNotAvailable": "Search is not available right now."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Please try again to another time.",
+        "pageNotFound": "The page you are looking for does not exist. Please check the URL or return to the search page."
+    },
+    "links": {
+        "back": {
+            "search": "Back to Search"
+        }
+    },
+    "preferences": {
+        "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."
+}

src/locales/es.json

@@ -0,0 +1,40 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Buscar",
+            "placeholder": "Buscar..."
+        },
+        "error": {
+            "searchNotAvailable": "La búsqueda no está disponible en este momento."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Por favor, inténtalo de nuevo más tarde.",
+        "pageNotFound": "La página que buscas no existe. Comprueba la URL o vuelve a la página de búsqueda."
+    },
+    "links": {
+        "back": {
+            "search": "Volver a la búsqueda"
+        }
+    },
+    "preferences": {
+        "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."
+}

src/locales/fr.json

@@ -0,0 +1,40 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Rechercher",
+            "placeholder": "Rechercher..."
+        },
+        "error": {
+            "searchNotAvailable": "La recherche n'est pas disponible pour le moment."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Veuillez réessayer ultérieurement.",
+        "pageNotFound": "La page que vous recherchez n'existe pas. Vérifiez l'URL ou retournez à la page de recherche."
+    },
+    "links": {
+        "back": {
+            "search": "Retour à la recherche"
+        }
+    },
+    "preferences": {
+        "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."
+}

src/locales/it.json

@@ -0,0 +1,40 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Cerca",
+            "placeholder": "Cerca..."
+        },
+        "error": {
+            "searchNotAvailable": "La ricerca non è disponibile al momento."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Per favore riprova più tardi.",
+        "pageNotFound": "La pagina che cerchi non esiste. Controlla l'URL o torna alla pagina di ricerca."
+    },
+    "links": {
+        "back": {
+            "search": "Torna alla ricerca"
+        }
+    },
+    "preferences": {
+        "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."
+}

src/locales/pt.json

@@ -0,0 +1,40 @@
+{
+    "search": {
+        "searchBar": {
+            "submit": "Pesquisar",
+            "placeholder": "Pesquisar..."
+        },
+        "error": {
+            "searchNotAvailable": "A pesquisa não está disponível no momento."
+        }
+    },
+    "error": {
+        "tryAgainToAnotherTime": "Por favor, tente novamente mais tarde.",
+        "pageNotFound": "A página que você procura não existe. Verifique o URL ou volte à página de pesquisa."
+    },
+    "links": {
+        "back": {
+            "search": "Voltar à pesquisa"
+        }
+    },
+    "preferences": {
+        "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."
+}

src/main.js

@@ -16,8 +16,15 @@ limitations under the License.
 
 import { createApp } from 'vue'
 import App from './App.vue'
+import { i18n, loadLanguage } from './i18n';
+import getCurrentLanguage from './utils/currentLanguage';
 import router from './router'
 import './styles/common.css'
 import './styles/variables/colors.css'
 
-createApp(App).use(router).mount('#app')
+await loadLanguage(getCurrentLanguage());
+
+createApp(App)
+    .use(router)
+    .use(i18n)
+    .mount('#app')

src/utils/currentLanguage.js

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

src/views/NotFound.vue

@@ -14,12 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
 <template>
     <div class="not-found">
        <span class="error-message">
-            The page you are looking for does not exist. Please check the URL or return to the search page.
+            {{ t('error.pageNotFound') }}
         </span>
-        <RouterLink to="/" id="link">Back to Search</RouterLink>
+        <RouterLink to="/" id="link">
+            {{ t('links.back.search') }}
+        </RouterLink>
     </div>
 </template>
 

src/views/SearchView.vue

@@ -18,8 +18,10 @@ limitations under the License.
 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';
 
+const { t } = useI18n();
 const router = useRouter();
 
 const searchQuery = ref('');
@@ -34,7 +36,7 @@ const submitSearch = function () {
     <header class="global-header">
         <img :src="logo" alt="Seekra" class="header-logo" />
         <span class="slogan">
-            Built to search.
+            {{ t('slogan') }}
         </span>
     </header>