feat: translate remaining hardcoded strings + optimize category batch query

onmax · onmax · commit f8e6fdac5afb · 2025-12-08T19:57:59.000+01:00
diff --git a/app/components/PhotoCarousel.vue b/app/components/PhotoCarousel.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { uuid } = defineProps<{ uuid: string }>()
+const { t } = useI18n()
 
 // Try up to 3 photos (blob endpoint limits to 0-2)
 const MAX_PHOTOS = 3
@@ -17,7 +18,7 @@ const availablePhotos = computed(() => Array.from({ length: MAX_PHOTOS }, (_, i)
     <div v-for="(photoIndex, i) in availablePhotos" :key="photoIndex" shrink-0 snap-start first:ps-24 last:pe-24>
       <img
         :src="`/blob/location/${uuid}/${photoIndex}`"
-        :alt="`Photo ${photoIndex + 1}`"
+        :alt="t('photo.alt', { number: photoIndex + 1 })"
         :loading="i === 0 ? 'eager' : 'lazy'"
         w-280 aspect-0.8 object-cover f-rounded-lg outline="1.5 offset--1.5 white/14"
         @error="onError(photoIndex)"
diff --git a/app/composables/useSearchHistory.ts b/app/composables/useSearchHistory.ts
@@ -6,11 +6,11 @@ interface SearchHistoryItem {
 
 const MAX_ITEMS = 8
 
-const DEFAULT_CATEGORIES: QuickCategoryItem[] = [
-  { category: 'restaurant', label: 'Restaurant', icon: 'i-tabler:tools-kitchen-2', color: 'orange' },
-  { category: 'cafe', label: 'Cafe', icon: 'i-tabler:coffee', color: 'gold' },
-  { category: 'bar', label: 'Bar', icon: 'i-tabler:beer', color: 'green' },
-  { category: 'pharmacy', label: 'Pharmacy', icon: 'i-tabler:pill', color: 'purple' },
+const DEFAULT_CATEGORY_IDS = [
+  { category: 'restaurant', icon: 'i-tabler:tools-kitchen-2', color: 'orange' as const },
+  { category: 'cafe', icon: 'i-tabler:coffee', color: 'gold' as const },
+  { category: 'bar', icon: 'i-tabler:beer', color: 'green' as const },
+  { category: 'pharmacy', icon: 'i-tabler:pill', color: 'purple' as const },
 ]
 
 export function useSearchHistory() {
@@ -36,7 +36,12 @@ export function useSearchHistory() {
     })
 
     const remaining = 4 - historyItems.length
-    const defaults = DEFAULT_CATEGORIES.slice(0, remaining)
+    const defaults = DEFAULT_CATEGORY_IDS.slice(0, remaining).map(({ category, icon, color }): QuickCategoryItem => ({
+      category,
+      label: formatCategoryLabel(category),
+      icon,
+      color,
+    }))
     return [...historyItems, ...defaults]
   }
 
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -2,6 +2,7 @@
 import type { Map } from 'maplibre-gl'
 import { consola } from 'consola'
 
+const { t } = useI18n()
 const logger = consola.withTag('map')
 
 definePageMeta({
@@ -221,7 +222,7 @@ async function onMapLoad(event: { map: Map }) {
       <template #fallback>
         <div flex="~ items-center justify-center" bg-neutral-100 size-screen>
           <p text-neutral-700>
-            Loading map...
+            {{ t('map.loading') }}
           </p>
         </div>
       </template>
diff --git a/app/plugins/locale-query.ts b/app/plugins/locale-query.ts
@@ -5,21 +5,21 @@ function isSupportedLocale(lang: unknown): lang is SupportedLocale {
   return typeof lang === 'string' && supportedLocales.includes(lang as SupportedLocale)
 }
 
-export default defineNuxtPlugin(async () => {
-  const { setLocale, locale } = useI18n()
+export default defineNuxtPlugin(() => {
+  const { $i18n } = useNuxtApp()
   const route = useRoute()
   const localeCookie = useCookie<SupportedLocale | null>('i18n_locale', { maxAge: 60 * 60 * 24 * 365 })
 
   const lang = route.query.lang
-  if (isSupportedLocale(lang) && lang !== locale.value) {
-    await setLocale(lang)
+  if (isSupportedLocale(lang) && lang !== $i18n.locale.value) {
+    $i18n.setLocale(lang)
     localeCookie.value = lang
   }
 
   // Watch for client navigation with ?lang param
   watch(() => route.query.lang, async (newLang) => {
-    if (isSupportedLocale(newLang) && newLang !== locale.value) {
-      await setLocale(newLang)
+    if (isSupportedLocale(newLang) && newLang !== $i18n.locale.value) {
+      await $i18n.setLocale(newLang)
       localeCookie.value = newLang
     }
   })
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
@@ -1,6 +1,13 @@
 {
   "search": {
-    "placeholder": "Hier suchen"
+    "placeholder": "Hier suchen",
+    "nearYou": "{query} in deiner Nähe"
+  },
+  "map": {
+    "loading": "Karte wird geladen..."
+  },
+  "photo": {
+    "alt": "Foto {number}"
   },
   "countries": {
     "SV": "El Salvador",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -1,6 +1,13 @@
 {
   "search": {
-    "placeholder": "Search here"
+    "placeholder": "Search here",
+    "nearYou": "{query} near you"
+  },
+  "map": {
+    "loading": "Loading map..."
+  },
+  "photo": {
+    "alt": "Photo {number}"
   },
   "countries": {
     "SV": "El Salvador",
diff --git a/i18n/locales/es.json b/i18n/locales/es.json
@@ -1,6 +1,13 @@
 {
   "search": {
-    "placeholder": "Buscar aquí"
+    "placeholder": "Buscar aquí",
+    "nearYou": "{query} cerca de ti"
+  },
+  "map": {
+    "loading": "Cargando mapa..."
+  },
+  "photo": {
+    "alt": "Foto {number}"
   },
   "countries": {
     "SV": "El Salvador",
diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json
@@ -1,6 +1,13 @@
 {
   "search": {
-    "placeholder": "Rechercher ici"
+    "placeholder": "Rechercher ici",
+    "nearYou": "{query} près de vous"
+  },
+  "map": {
+    "loading": "Chargement de la carte..."
+  },
+  "photo": {
+    "alt": "Photo {number}"
   },
   "countries": {
     "SV": "El Salvador",
diff --git a/i18n/locales/pt.json b/i18n/locales/pt.json
@@ -1,6 +1,13 @@
 {
   "search": {
-    "placeholder": "Pesquisar aqui"
+    "placeholder": "Pesquisar aqui",
+    "nearYou": "{query} perto de você"
+  },
+  "map": {
+    "loading": "Carregando mapa..."
+  },
+  "photo": {
+    "alt": "Foto {number}"
   },
   "countries": {
     "SV": "El Salvador",
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -93,8 +93,5 @@ export default defineNuxtConfig({
       include: ['maplibre-gl'],
     },
   },
-  nitro: {
-    preset: 'cloudflare-module',
-  },
   compatibilityDate: '2025-10-01',
 })
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "pathe": "catalog:utils",
     "postgres": "catalog:database",
     "reka-ui": "catalog:ui",
+    "unstorage": "catalog:",
     "valibot": "catalog:utils",
     "vaul-vue": "catalog:ui",
     "vue-sonner": "catalog:ui",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,7 +1,10 @@
+patchedDependencies:
+  '@nuxthub/core-nightly@0.10.0-20251205-001323-943b30c': patches/@nuxthub__core-nightly.patch
 catalog:
   '@iconify-json/flag': ^1.2.10
   '@protomaps/basemaps': ^5.7.0
   '@vueuse/core': ^13.8.0
+  unstorage: ^0.0.0
   zod: ^3.25.56
 
 catalogs:
@@ -66,6 +69,3 @@ onlyBuiltDependencies:
   - unrs-resolver
   - vue-demi
   - workerd
-
-patchedDependencies:
-  '@nuxthub/core-nightly@0.10.0-20251205-001323-943b30c': patches/@nuxthub__core-nightly.patch
diff --git a/server/utils/category-hierarchy.ts b/server/utils/category-hierarchy.ts
@@ -46,19 +46,76 @@ export async function getMostSpecificCategory(categoryIds: string[]): Promise<st
 
 /**
  * Batch version of getMostSpecificCategory for processing multiple locations efficiently.
+ * Single query fetches all hierarchy relations, then computes leaf categories in-memory.
  * @param locationCategories - Map of location UUIDs to their category ID arrays
  * @returns Map of location UUIDs to their most specific category ID
  */
 export async function getMostSpecificCategoriesBatch(locationCategories: Map<string, string[]>): Promise<Map<string, string>> {
   const result = new Map<string, string>()
 
-  // For now, process each location individually
-  // Future optimization: fetch all hierarchies in one query
+  if (locationCategories.size === 0)
+    return result
+
+  // Collect all unique category IDs across all locations
+  const allCategoryIds = new Set<string>()
+  for (const categoryIds of locationCategories.values()) {
+    for (const id of categoryIds) {
+      allCategoryIds.add(id)
+    }
+  }
+
+  if (allCategoryIds.size === 0)
+    return result
+
+  // Single query: fetch all hierarchy relations for all categories at once
+  const db = useDrizzle()
+  const hierarchyRelations = await db
+    .select({
+      childId: tables.categoryHierarchies.childId,
+      parentId: tables.categoryHierarchies.parentId,
+    })
+    .from(tables.categoryHierarchies)
+    .where(
+      and(
+        inArray(tables.categoryHierarchies.childId, Array.from(allCategoryIds)),
+        inArray(tables.categoryHierarchies.parentId, Array.from(allCategoryIds)),
+      ),
+    )
+
+  // Build parent->children map for quick lookup
+  const childToParents = new Map<string, Set<string>>()
+  for (const { childId, parentId } of hierarchyRelations) {
+    if (!childToParents.has(childId))
+      childToParents.set(childId, new Set())
+    childToParents.get(childId)!.add(parentId)
+  }
+
+  // For each location, find the most specific category (leaf node within its set)
   for (const [uuid, categoryIds] of locationCategories) {
-    const mostSpecific = await getMostSpecificCategory(categoryIds)
-    if (mostSpecific) {
-      result.set(uuid, mostSpecific)
+    if (categoryIds.length === 0)
+      continue
+    if (categoryIds.length === 1) {
+      result.set(uuid, categoryIds[0]!)
+      continue
     }
+
+    const categorySet = new Set(categoryIds)
+    // A category is a "parent" if another category in this set has it as parent
+    const parentsInSet = new Set<string>()
+    for (const id of categoryIds) {
+      const parents = childToParents.get(id)
+      if (parents) {
+        for (const p of parents) {
+          if (categorySet.has(p))
+            parentsInSet.add(p)
+        }
+      }
+    }
+
+    // Leaf = not a parent of any other category in this set
+    const leaf = categoryIds.find(id => !parentsInSet.has(id))
+    if (leaf)
+      result.set(uuid, leaf)
   }
 
   return result
