diff --git a/app/[locale]/apps/page.tsx b/app/[locale]/apps/page.tsx
index 1e00616903e..b2aeccede8d 100644
--- a/app/[locale]/apps/page.tsx
+++ b/app/[locale]/apps/page.tsx
@@ -5,7 +5,7 @@ import {
setRequestLocale,
} from "next-intl/server"
-import { Lang, PageParams } from "@/lib/types"
+import { AppCategory, AppData, Lang, PageParams } from "@/lib/types"
import AppCard from "@/components/AppCard"
import Breadcrumbs from "@/components/Breadcrumbs"
@@ -62,6 +62,26 @@ const Page = async (props: { params: Promise
}) => {
// Get translations
const t = await getTranslations("page-apps")
+ const tSubcategory = await getTranslations("app-subcategories")
+
+ // Translate subcategory tags, falling back to the raw string
+ const translateSubcategories = (tag: string) => {
+ const key = `subcategory-${slugify(tag)}`
+ return tSubcategory.has(key) ? tSubcategory(key) : tag
+ }
+
+ const translateApp = (app: AppData) =>
+ ({
+ ...app,
+ subCategory: app.subCategory.map(translateSubcategories),
+ }) as AppData
+
+ const translatedAppsData = Object.fromEntries(
+ Object.entries(appsData).map(([category, apps]) => [
+ category,
+ (apps as AppData[]).map(translateApp),
+ ])
+ ) as Record
// Get i18n messages
const allMessages = await getMessages({ locale })
@@ -94,7 +114,7 @@ const Page = async (props: { params: Promise }) => {
{t("page-apps-highlights-title")}
-
+
@@ -108,7 +128,7 @@ const Page = async (props: { params: Promise
}) => {
thumbnail={app.image}
category={app.category}
categoryTagStatus={APP_TAG_VARIANTS[app.category]}
- tags={app.subCategory}
+ tags={app.subCategory.map(translateSubcategories)}
href={`/apps/${slugify(app.name)}`}
imageSize="large"
customEventOptions={{
@@ -128,7 +148,7 @@ const Page = async (props: { params: Promise }) => {
{t("page-apps-applications-title")}
-
+
{/* Note: Implemented this instead of swiper from design to allow for SSR */}
@@ -156,7 +176,7 @@ const Page = async (props: { params: Promise }) => {
{t("page-apps-community-picks-title")}