feat: add i18n support for Italian, Spanish, Portuguese and Russian

js/components/pages/page-home.js

@@ -377,6 +377,21 @@ class PageHome extends HTMLElement {
             })
         }
 
+        const priceBtn = this.querySelector('#toggle-price-filter span')
+        if (priceBtn) priceBtn.textContent = t('search.priceRange')
+
+        const clearBtn = this.querySelector('#clear-filters')
+        if (clearBtn) clearBtn.textContent = t('search.clearAll')
+
+        const applyBtn = this.querySelector('#apply-price')
+        if (applyBtn) applyBtn.textContent = t('search.apply')
+
+        const minInput = this.querySelector('#min-price')
+        if (minInput) minInput.placeholder = t('search.min')
+
+        const maxInput = this.querySelector('#max-price')
+        if (maxInput) maxInput.placeholder = t('search.max')
+
         const searchBox = this.querySelector('search-box')
         if (searchBox) searchBox.loadAndRender()
     }

js/i18n.js

@@ -5,9 +5,28 @@
  */
 
 /**
- * @typedef {'de' | 'en' | 'fr'} Locale
+ * @typedef {'de' | 'en' | 'fr' | 'it' | 'es' | 'pt' | 'ru'} Locale
  */
 
+/**
+ * Mapping from short locale codes (used in frontend) to
+ * Directus long locale codes (used in categories_translations etc.)
+ * @type {Object<Locale, string>}
+ */
+const LOCALE_TO_DIRECTUS = {
+    de: 'de-DE',
+    en: 'en-US',
+    fr: 'fr-FR',
+    it: 'it-IT',
+    es: 'es-ES',
+    pt: 'pt-BR',
+    ru: 'ru-RU'
+}
+
+const DIRECTUS_TO_LOCALE = Object.fromEntries(
+    Object.entries(LOCALE_TO_DIRECTUS).map(([k, v]) => [v, k])
+)
+
 /**
  * I18n Service class
  * @class
@@ -21,7 +40,7 @@ class I18n {
         /** @type {Locale} */
         this.fallbackLocale = 'de'
         /** @type {Locale[]} */
-        this.supportedLocales = ['de', 'en', 'fr']
+        this.supportedLocales = ['de', 'en', 'fr', 'it', 'es', 'pt', 'ru']
         /** @type {Set<Function>} */
         this.subscribers = new Set()
         /** @type {boolean} */
@@ -198,12 +217,35 @@ class I18n {
         const names = {
             de: 'Deutsch',
             en: 'English',
-            fr: 'Français'
+            fr: 'Français',
+            it: 'Italiano',
+            es: 'Español',
+            pt: 'Português',
+            ru: 'Русский'
         }
         return names[locale] || locale
     }
+
+    /**
+     * Get the Directus language code for a frontend locale
+     * @param {Locale} [locale] - Frontend locale (defaults to current)
+     * @returns {string} Directus language code (e.g. 'de-DE')
+     */
+    getDirectusLocale(locale) {
+        return LOCALE_TO_DIRECTUS[locale || this.currentLocale] || LOCALE_TO_DIRECTUS[this.fallbackLocale]
+    }
+
+    /**
+     * Get the frontend locale for a Directus language code
+     * @param {string} directusCode - Directus code (e.g. 'it-IT')
+     * @returns {Locale}
+     */
+    fromDirectusLocale(directusCode) {
+        return DIRECTUS_TO_LOCALE[directusCode] || directusCode?.split('-')[0] || this.fallbackLocale
+    }
 }
 
 export const i18n = new I18n()
 export const t = (key, params) => i18n.t(key, params)
 export const getCurrentLanguage = () => i18n.getLocale()
+export { LOCALE_TO_DIRECTUS, DIRECTUS_TO_LOCALE }

js/services/categories.js

@@ -3,7 +3,7 @@
  */
 
 import { directus } from './directus.js'
-import { getCurrentLanguage } from '../i18n.js'
+import { getCurrentLanguage, LOCALE_TO_DIRECTUS } from '../i18n.js'
 
 class CategoriesService {
     constructor() {
@@ -126,10 +126,13 @@ class CategoriesService {
 
     getTranslatedName(category, lang = null) {
         const currentLang = lang || getCurrentLanguage()
+        const directusCode = LOCALE_TO_DIRECTUS[currentLang] || currentLang
         
         if (category.translations && Array.isArray(category.translations)) {
             const translation = category.translations.find(
-                t => t.languages_code === currentLang || t.languages_code?.startsWith(currentLang)
+                t => t.languages_code === directusCode
+                    || t.languages_code === currentLang
+                    || t.languages_code?.startsWith(currentLang)
             )
             if (translation?.name) {
                 return translation.name