refactor(app): update application pages and components

ericyangpan · claude · ericyangpan · commit ae59bbec8182 · 2026-01-09T10:08:31.000+08:00
Update all application pages, components, and library modules for improved functionality across CLIs, extensions, IDEs, models, providers, vendors, search, and open-source-rank sections.

Co-Authored-By: Claude &lt;noreply@anthropic.com&gt;
diff --git a/src/app/[locale]/ai-coding-landscape/page.tsx b/src/app/[locale]/ai-coding-landscape/page.tsx
@@ -33,7 +33,7 @@ type Props = {
 export default async function Page({ params }: Props) {
   const { locale } = await params
   const tNav = await getTranslations({ locale, namespace: 'components.header' })
-  const tOverview = await getTranslations({ locale, namespace: 'pages.overview' })
+  const tOverview = await getTranslations({ locale, namespace: 'pages.stacks.overview' })
 
   // Build vendor matrix data
   const matrixData = buildVendorMatrix()
diff --git a/src/app/[locale]/ai-coding-stack/page.tsx b/src/app/[locale]/ai-coding-stack/page.tsx
@@ -9,7 +9,7 @@ import type { LocalePageProps } from '@/types/locale'
 
 export async function generateMetadata({ params }: LocalePageProps) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'pages.overview' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.overview' })
 
   const title = buildTitle({ title: t('title') })
   const description = t('subtitle')
@@ -27,7 +27,7 @@ export async function generateMetadata({ params }: LocalePageProps) {
 
 export default async function AICodingStackPage({ params }: LocalePageProps) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'pages.overview' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.overview' })
 
   return (
     <>
diff --git a/src/app/[locale]/clis/[slug]/page.tsx b/src/app/[locale]/clis/[slug]/page.tsx
@@ -68,7 +68,7 @@ export default async function CLIPage({
     notFound()
   }
 
-  const t = await getTranslations({ locale, namespace: 'pages.cliDetail' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.cliDetail' })
   const tGlobal = await getTranslations({ locale })
 
   // Transform URLs for component props
@@ -99,8 +99,8 @@ export default async function CLIPage({
 
   // Breadcrumb items
   const breadcrumbItems = [
-    { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-    { name: tGlobal('shared.stacks.clis'), href: '/clis' },
+    { name: tGlobal('shared.terms.aiCodingStack'), href: '/ai-coding-stack' },
+    { name: tGlobal('shared.categories.plural.clis'), href: '/clis' },
     { name: cli.name, href: `clis/${cli.id}` },
   ]
 
diff --git a/src/app/[locale]/clis/comparison/page.client.tsx b/src/app/[locale]/clis/comparison/page.client.tsx
@@ -280,9 +280,9 @@ export default function CLIComparisonPageClient({ locale: _locale }: Props) {
 
       <Breadcrumb
         items={[
-          { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-          { name: tGlobal('shared.stacks.clis'), href: '/clis' },
-          { name: tGlobal('shared.common.comparison'), href: '/clis/comparison' },
+          { name: tGlobal('shared.terms.aiCodingStack'), href: '/ai-coding-stack' },
+          { name: tGlobal('shared.categories.plural.clis'), href: '/clis' },
+          { name: tGlobal('shared.terms.comparison'), href: '/clis/comparison' },
         ]}
       />
 
diff --git a/src/app/[locale]/clis/opengraph-image.tsx b/src/app/[locale]/clis/opengraph-image.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export default async function Image({ params }: Props) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'pages.clis' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.clis' })
 
   return new ImageResponse(
     <OGImageTemplate
diff --git a/src/app/[locale]/clis/page.client.tsx b/src/app/[locale]/clis/page.client.tsx
@@ -19,7 +19,7 @@ type Props = {
 }
 
 export default function CLIsPageClient({ locale }: Props) {
-  const t = useTranslations('pages.clis')
+  const t = useTranslations('pages.stacks.clis')
   const tGlobal = useTranslations()
   const [sortOrder, setSortOrder] = useState<'default' | 'name-asc' | 'name-desc'>('default')
   const [licenseFilters, setLicenseFilters] = useState<string[]>([])
diff --git a/src/app/[locale]/clis/page.tsx b/src/app/[locale]/clis/page.tsx
@@ -10,7 +10,7 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
   return await generateListPageMetadata({
     locale: locale as Locale,
     category: 'clis',
-    translationNamespace: 'pages.clis',
+    translationNamespace: 'pages.stacks.clis',
     additionalKeywords: ['Gemini CLI', 'GitHub Copilot CLI', 'command line AI tools'],
   })
 }
diff --git a/src/app/[locale]/extensions/[slug]/page.tsx b/src/app/[locale]/extensions/[slug]/page.tsx
@@ -73,7 +73,7 @@ export default async function ExtensionPage({
     notFound()
   }
 
-  const t = await getTranslations({ locale, namespace: 'pages.extensionDetail' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.extensionDetail' })
   const tGlobal = await getTranslations({ locale })
 
   // Transform URLs for component props
@@ -120,8 +120,8 @@ export default async function ExtensionPage({
 
   // Breadcrumb items
   const breadcrumbItems = [
-    { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-    { name: tGlobal('shared.stacks.extensions'), href: '/extensions' },
+    { name: tGlobal('shared.terms.aiCodingStack'), href: '/ai-coding-stack' },
+    { name: tGlobal('shared.categories.plural.extensions'), href: '/extensions' },
     { name: extension.name, href: `extensions/${extension.id}` },
   ]
 
diff --git a/src/app/[locale]/extensions/comparison/page.client.tsx b/src/app/[locale]/extensions/comparison/page.client.tsx
@@ -266,9 +266,9 @@ export default function ExtensionComparisonPageClient({ locale: _locale }: Props
 
       <Breadcrumb
         items={[
-          { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-          { name: tGlobal('shared.stacks.extensions'), href: '/extensions' },
-          { name: tGlobal('shared.common.comparison'), href: '/extensions/comparison' },
+          { name: tGlobal('shared.terms.aiCodingStack'), href: '/ai-coding-stack' },
+          { name: tGlobal('shared.categories.plural.extensions'), href: '/extensions' },
+          { name: tGlobal('shared.terms.comparison'), href: '/extensions/comparison' },
         ]}
       />
 
diff --git a/src/app/[locale]/extensions/opengraph-image.tsx b/src/app/[locale]/extensions/opengraph-image.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export default async function Image({ params }: Props) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'pages.extensions' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.extensions' })
 
   return new ImageResponse(
     <OGImageTemplate
diff --git a/src/app/[locale]/extensions/page.client.tsx b/src/app/[locale]/extensions/page.client.tsx
@@ -19,7 +19,7 @@ type Props = {
 }
 
 export default function ExtensionsPageClient({ locale }: Props) {
-  const t = useTranslations('pages.extensions')
+  const t = useTranslations('pages.stacks.extensions')
   const tGlobal = useTranslations()
   const [sortOrder, setSortOrder] = useState<'default' | 'name-asc' | 'name-desc'>('default')
   const [licenseFilters, setLicenseFilters] = useState<string[]>([])
diff --git a/src/app/[locale]/extensions/page.tsx b/src/app/[locale]/extensions/page.tsx
@@ -10,7 +10,7 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
   return await generateListPageMetadata({
     locale: locale as Locale,
     category: 'extensions',
-    translationNamespace: 'pages.extensions',
+    translationNamespace: 'pages.stacks.extensions',
     additionalKeywords: ['AI code completion', 'VS Code extensions', 'JetBrains AI'],
   })
 }
diff --git a/src/app/[locale]/ides/[slug]/page.tsx b/src/app/[locale]/ides/[slug]/page.tsx
@@ -68,7 +68,7 @@ export default async function IDEPage({
     notFound()
   }
 
-  const t = await getTranslations({ locale, namespace: 'pages.ideDetail' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.ideDetail' })
   const tGlobal = await getTranslations({ locale })
 
   // Transform URLs for component props
@@ -99,8 +99,8 @@ export default async function IDEPage({
 
   // Breadcrumb items
   const breadcrumbItems = [
-    { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-    { name: tGlobal('shared.stacks.ides'), href: '/ides' },
+    { name: tGlobal('shared.terms.aiCodingStack'), href: '/ai-coding-stack' },
+    { name: tGlobal('shared.categories.plural.ides'), href: '/ides' },
     { name: ide.name, href: `ides/${ide.id}` },
   ]
 
diff --git a/src/app/[locale]/ides/comparison/page.client.tsx b/src/app/[locale]/ides/comparison/page.client.tsx
@@ -279,9 +279,9 @@ export default function IDEComparisonPageClient({ locale: _locale }: Props) {
 
       <Breadcrumb
         items={[
-          { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-          { name: tGlobal('shared.stacks.ides'), href: '/ides' },
-          { name: tGlobal('shared.common.comparison'), href: '/ides/comparison' },
+          { name: tGlobal('shared.terms.aiCodingStack'), href: '/ai-coding-stack' },
+          { name: tGlobal('shared.categories.plural.ides'), href: '/ides' },
+          { name: tGlobal('shared.terms.comparison'), href: '/ides/comparison' },
         ]}
       />
 
diff --git a/src/app/[locale]/ides/opengraph-image.tsx b/src/app/[locale]/ides/opengraph-image.tsx
@@ -11,10 +11,10 @@ interface Props {
 
 export default async function Image({ params }: Props) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'pages.ides' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.ides' })
 
   return new ImageResponse(
-    <OGImageTemplate category="AI-POWERED IDES" title={t('title')} description={t('subtitle')} />,
+    <OGImageTemplate category="AI-POWERED IDEs" title={t('title')} description={t('subtitle')} />,
     { ...size }
   )
 }
diff --git a/src/app/[locale]/ides/page.client.tsx b/src/app/[locale]/ides/page.client.tsx
@@ -19,7 +19,7 @@ type Props = {
 }
 
 export default function IDEsPageClient({ locale }: Props) {
-  const t = useTranslations('pages.ides')
+  const t = useTranslations('pages.stacks.ides')
   const tGlobal = useTranslations()
   const [sortOrder, setSortOrder] = useState<'default' | 'name-asc' | 'name-desc'>('default')
   const [licenseFilters, setLicenseFilters] = useState<string[]>([])
diff --git a/src/app/[locale]/ides/page.tsx b/src/app/[locale]/ides/page.tsx
@@ -11,7 +11,7 @@ export async function generateMetadata({ params }: LocalePageProps) {
   return await generateListPageMetadata({
     locale: locale as Locale,
     category: 'ides',
-    translationNamespace: 'pages.ides',
+    translationNamespace: 'pages.stacks.ides',
   })
 }
 
diff --git a/src/app/[locale]/manifesto/page.tsx b/src/app/[locale]/manifesto/page.tsx
@@ -25,7 +25,7 @@ export async function generateMetadata({ params }: LocalePageProps) {
 export default async function ManifestoPage({ params }: LocalePageProps) {
   const { locale } = await params
   const t = await getTranslations({ locale, namespace: 'pages.manifesto' })
-  const tStack = await getTranslations({ locale, namespace: 'pages.overview' })
+  const tStack = await getTranslations({ locale, namespace: 'pages.stacks.overview' })
   const ManifestoContent = await getManifestoComponent(locale)
 
   return (
diff --git a/src/app/[locale]/model-providers/[slug]/page.tsx b/src/app/[locale]/model-providers/[slug]/page.tsx
@@ -57,7 +57,7 @@ export default async function ProviderPage({
     notFound()
   }
 
-  const t = await getTranslations({ locale, namespace: 'pages.modelProviderDetail' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.modelProviderDetail' })
   const tGlobal = await getTranslations({ locale })
 
   // Generate JSON-LD schema
@@ -72,8 +72,8 @@ export default async function ProviderPage({
 
   // Breadcrumb items
   const breadcrumbItems = [
-    { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-    { name: tGlobal('shared.stacks.modelProviders'), href: '/model-providers' },
+    { name: tGlobal('shared.terms.aiCodingStack'), href: '/ai-coding-stack' },
+    { name: tGlobal('shared.categories.plural.modelProviders'), href: '/model-providers' },
     { name: provider.name, href: `model-providers/${provider.id}` },
   ]
 
diff --git a/src/app/[locale]/model-providers/opengraph-image.tsx b/src/app/[locale]/model-providers/opengraph-image.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export default async function Image({ params }: Props) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'pages.modelProviders' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.modelProviders' })
 
   return new ImageResponse(
     <OGImageTemplate
diff --git a/src/app/[locale]/model-providers/page.client.tsx b/src/app/[locale]/model-providers/page.client.tsx
@@ -18,7 +18,7 @@ type Props = {
 }
 
 export default function ModelProvidersPageClient({ locale }: Props) {
-  const t = useTranslations('pages.modelProviders')
+  const t = useTranslations('pages.stacks.modelProviders')
   const [searchQuery, setSearchQuery] = useState('')
 
   // Localize providers
diff --git a/src/app/[locale]/model-providers/page.tsx b/src/app/[locale]/model-providers/page.tsx
@@ -11,7 +11,7 @@ export async function generateMetadata({ params }: LocalePageProps) {
   return await generateListPageMetadata({
     locale: locale as Locale,
     category: 'modelProviders',
-    translationNamespace: 'pages.modelProviders',
+    translationNamespace: 'pages.stacks.modelProviders',
     additionalKeywords: ['OpenAI', 'Anthropic', 'model API', 'AI provider comparison'],
   })
 }
diff --git a/src/app/[locale]/models/[slug]/page.tsx b/src/app/[locale]/models/[slug]/page.tsx
@@ -50,7 +50,7 @@ export async function generateMetadata({
           }
         : undefined,
     },
-    translationNamespace: 'pages.modelDetail',
+    translationNamespace: 'pages.stacks.modelDetail',
   })
 }
 
@@ -66,7 +66,7 @@ export default async function ModelPage({
     notFound()
   }
 
-  const t = await getTranslations({ locale, namespace: 'pages.modelDetail' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.modelDetail' })
   const tGlobal = await getTranslations({ locale })
 
   // Generate JSON-LD schema
@@ -96,8 +96,8 @@ export default async function ModelPage({
 
   // Breadcrumb items
   const breadcrumbItems = [
-    { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-    { name: tGlobal('shared.stacks.models'), href: '/models' },
+    { name: tGlobal('shared.terms.aiCodingStack'), href: '/ai-coding-stack' },
+    { name: tGlobal('shared.categories.plural.models'), href: '/models' },
     { name: model.name, href: `models/${model.id}` },
   ]
 
diff --git a/src/app/[locale]/models/comparison/page.client.tsx b/src/app/[locale]/models/comparison/page.client.tsx
@@ -246,9 +246,9 @@ export default function ModelComparisonPageClient({ locale: _locale }: Props) {
 
       <Breadcrumb
         items={[
-          { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
-          { name: tGlobal('shared.stacks.models'), href: '/models' },
-          { name: tGlobal('shared.common.comparison'), href: '/models/comparison' },
+          { name: tGlobal('shared.terms.aiCodingStack'), href: '/ai-coding-stack' },
+          { name: tGlobal('shared.categories.plural.models'), href: '/models' },
+          { name: tGlobal('shared.terms.comparison'), href: '/models/comparison' },
         ]}
       />
 
diff --git a/src/app/[locale]/models/opengraph-image.tsx b/src/app/[locale]/models/opengraph-image.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export default async function Image({ params }: Props) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'pages.models' })
+  const t = await getTranslations({ locale, namespace: 'pages.stacks.models' })
 
   return new ImageResponse(
     <OGImageTemplate category="AI MODELS" title={t('title')} description={t('subtitle')} />,
diff --git a/src/app/[locale]/models/page.client.tsx b/src/app/[locale]/models/page.client.tsx
@@ -19,7 +19,7 @@ type Props = {
 }
 
 export default function ModelsPageClient({ locale }: Props) {
-  const t = useTranslations('pages.models')
+  const t = useTranslations('pages.stacks.models')
   const [searchQuery, setSearchQuery] = useState('')
 
   // Localize models
diff --git a/src/app/[locale]/models/page.tsx b/src/app/[locale]/models/page.tsx
@@ -10,7 +10,7 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
   return await generateListPageMetadata({
     locale: locale as Locale,
     category: 'models',
-    translationNamespace: 'pages.models',
+    translationNamespace: 'pages.stacks.models',
     additionalKeywords: ['LLM for coding', 'Claude Sonnet', 'GPT-4', 'coding AI models 2025'],
   })
 }
diff --git a/src/app/[locale]/open-source-rank/page.client.tsx b/src/app/[locale]/open-source-rank/page.client.tsx
@@ -41,7 +41,7 @@ function getProductTypeName(type: ProductType, t: (key: string) => string): stri
 }
 
 export function OpenSourceRankPage() {
-  const t = useTranslations('components.openSourceRank')
+  const t = useTranslations('pages.openSourceRank')
   const [selectedType, setSelectedType] = useState<ProductType | 'all'>('all')
 
   const { openSourceProjects, proprietaryProjects } = useMemo(() => {
diff --git a/src/app/[locale]/open-source-rank/page.tsx b/src/app/[locale]/open-source-rank/page.tsx
@@ -10,7 +10,7 @@ export const revalidate = 3600
 
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'components.openSourceRank.meta' })
+  const t = await getTranslations({ locale, namespace: 'pages.openSourceRank.meta' })
 
   const title = buildTitle({ title: t('title') })
   const description = t('description')
@@ -30,7 +30,7 @@ type Props = {
 
 export default async function Page({ params }: Props) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'components.openSourceRank' })
+  const t = await getTranslations({ locale, namespace: 'pages.openSourceRank' })
 
   return (
     <>
diff --git a/src/app/[locale]/search/page.client.tsx b/src/app/[locale]/search/page.client.tsx
@@ -16,7 +16,7 @@ type Props = {
 }
 
 export default function SearchPageClient({ locale, initialQuery }: Props) {
-  const t = useTranslations('components.search')
+  const t = useTranslations('pages.search')
   const router = useRouter()
   const searchParams = useSearchParams()
   const [query, setQuery] = useState(initialQuery)
diff --git a/src/app/[locale]/search/page.tsx b/src/app/[locale]/search/page.tsx
@@ -14,7 +14,7 @@ type Props = {
 export async function generateMetadata({ params, searchParams }: Props): Promise<Metadata> {
   const { locale } = await params
   const { q } = await searchParams
-  const t = await getTranslations({ locale, namespace: 'components.search' })
+  const t = await getTranslations({ locale, namespace: 'pages.search' })
 
   const title = q ? t('resultsCountFor', { count: 0, query: q }) : t('title')
   const description = t('placeholder')
diff --git a/src/app/[locale]/vendors/[slug]/page.tsx b/src/app/[locale]/vendors/[slug]/page.tsx
diff --git a/src/app/[locale]/vendors/opengraph-image.tsx b/src/app/[locale]/vendors/opengraph-image.tsx
diff --git a/src/app/[locale]/vendors/page.client.tsx b/src/app/[locale]/vendors/page.client.tsx
diff --git a/src/app/[locale]/vendors/page.tsx b/src/app/[locale]/vendors/page.tsx
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
diff --git a/src/components/controls/SearchDialog.tsx b/src/components/controls/SearchDialog.tsx
diff --git a/src/components/controls/SearchInput.tsx b/src/components/controls/SearchInput.tsx
diff --git a/src/components/navigation/StackMegaMenu.tsx b/src/components/navigation/StackMegaMenu.tsx
diff --git a/src/components/navigation/StackTabs.tsx b/src/components/navigation/StackTabs.tsx
diff --git a/src/components/product/ComparisonTable.tsx b/src/components/product/ComparisonTable.tsx
diff --git a/src/components/product/ModelBenchmarks.tsx b/src/components/product/ModelBenchmarks.tsx
diff --git a/src/lib/generated/metadata.ts b/src/lib/generated/metadata.ts
diff --git a/src/lib/license.tsx b/src/lib/license.tsx
diff --git a/src/lib/metadata/index.ts b/src/lib/metadata/index.ts
diff --git a/src/lib/metadata/schemas/validators.ts b/src/lib/metadata/schemas/validators.ts

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ type Props = {`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`export default function CLIsPageClient({ locale }: Props) {`
`22`		`- const t = useTranslations('pages.clis')`
	`22`	`+ const t = useTranslations('pages.stacks.clis')`
`23`	`23`	`const tGlobal = useTranslations()`
`24`	`24`	`const [sortOrder, setSortOrder] = useState<'default' \| 'name-asc' \| 'name-desc'>('default')`
`25`	`25`	`const [licenseFilters, setLicenseFilters] = useState<string[]>([])`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s`
`10`	`10`	`return await generateListPageMetadata({`
`11`	`11`	`locale: locale as Locale,`
`12`	`12`	`category: 'clis',`
`13`		`- translationNamespace: 'pages.clis',`
	`13`	`+ translationNamespace: 'pages.stacks.clis',`
`14`	`14`	`additionalKeywords: ['Gemini CLI', 'GitHub Copilot CLI', 'command line AI tools'],`
`15`	`15`	`})`
`16`	`16`	`}`