feat: sort countries alphabetically by translated name with CH pinned first

js/components/search-box.js

@@ -3,21 +3,23 @@ import { escapeHTML } from '../utils/helpers.js'
 import { categoriesService } from '../services/categories.js'
 
 const COUNTRIES = [
-    // German-speaking
     'ch', 'de', 'at', 'li', 'lu',
-    // French-speaking
     'fr', 'be',
-    // English-speaking
     'gb', 'us', 'ca', 'au', 'nz', 'ie', 'za',
-    // Italian
     'it',
-    // Spanish-speaking
     'es', 'mx', 'ar', 'co', 'cl',
-    // Portuguese-speaking
     'pt', 'br',
-    // Russian-speaking
     'ru', 'by', 'kz'
 ]
+
+// Sort alphabetically by translated name, but pin CH first
+function getSortedCountries() {
+    return [...COUNTRIES].sort((a, b) => {
+        if (a === 'ch') return -1
+        if (b === 'ch') return 1
+        return t(`countries.${a}`).localeCompare(t(`countries.${b}`))
+    })
+}
 const RADIUS_OPTIONS = [5, 10, 20, 50, 100, 200]
 
 class SearchBox extends HTMLElement {
@@ -321,7 +323,7 @@ class SearchBox extends HTMLElement {
                             <option value="current" ${this.useCurrentLocation ? 'selected' : ''}>
                                 📍 ${t('search.currentLocation')}
                             </option>
-                            ${COUNTRIES.map(c => `
+                            ${getSortedCountries().map(c => `
                                 <option value="${c}" ${!this.useCurrentLocation && this.selectedCountry === c ? 'selected' : ''}>
                                     ${t(`countries.${c}`)}
                                 </option>
@@ -356,7 +358,7 @@ class SearchBox extends HTMLElement {
                         <option value="current" ${this.useCurrentLocation ? 'selected' : ''}>
                             📍 ${t('search.currentLocation')}
                         </option>
-                        ${COUNTRIES.map(c => `
+                        ${getSortedCountries().map(c => `
                             <option value="${c}" ${!this.useCurrentLocation && this.selectedCountry === c ? 'selected' : ''}>
                                 ${t(`countries.${c}`)}
                             </option>
@@ -1205,4 +1207,4 @@ style.textContent = /* css */`
 `
 document.head.appendChild(style)
 
-export { SearchBox, COUNTRIES, RADIUS_OPTIONS }
+export { SearchBox, COUNTRIES, getSortedCountries, RADIUS_OPTIONS }