Performance improvements

frontend/app/pages/art/index.vue

@@ -1,11 +1,45 @@
 <script setup lang="ts">
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
+
 const { locale } = useI18n();
-const localePath = useLocalePath()
-const {data: posts} = useAsyncData('art-posts', async () => 
-await queryCollection(`art`).where('path', 'LIKE', `/art/${locale.value}/%`).order('date', 'DESC').all()
-, {watch: [locale, () => useRoute().path]});
+const localePath = useLocalePath();
+
+const { data: posts } = useAsyncData('art-posts', async () => {
+  const currentLocale = locale.value;
+
+  // Always fetch English articles as the base
+  const enPosts = await queryCollection('art')
+    .where('path', 'LIKE', `/art/en/%`)
+    .order('date', 'DESC')
+    .all();
+
+  // If we're already on English, no need for a second query
+  if (currentLocale === 'en') return enPosts;
+
+  // Fetch translated articles for the current locale
+  const localePosts = await queryCollection('art')
+    .where('path', 'LIKE', `/art/${currentLocale}/%`)
+    .order('date', 'DESC')
+    .all();
+
+  // Build a set of slugs that have a translation
+  const translatedSlugs = new Set(
+    localePosts.map((p) => p.path.replace(`/art/${currentLocale}/`, ''))
+  );
+
+  // Keep English articles that have no translation in the current locale
+  const enFallbacks = enPosts.filter(
+    (p) => !translatedSlugs.has(p.path.replace('/art/en/', ''))
+  );
+
+  // Merge: translated first, then English fallbacks, re-sorted by date
+  return [...localePosts, ...enFallbacks].sort(
+    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+}, { watch: [locale, () => useRoute().path] });
+
+const isFallback = (art) => art.path.startsWith('/art/en/') && locale.value !== 'en';
 </script>
 
 <template>
@@ -16,7 +50,7 @@ await queryCollection(`art`).where('path', 'LIKE', `/art/${locale.value}/%`).ord
                 <NuxtLink v-for="art in posts"
                 :key="art.slug"
                 class="selector"
-                :to="localePath(`/art/${art.slug}`)">
+                :to="isFallback(art) ? `/art/${art.slug}` : localePath(`/art/${art.slug}`)">
                     <NuxtImg
                         :src="art.thumb"
                         :alt="art.title"