refactor(ui): update page components to work with new GitHub stars data structure

Updates all product page components to be compatible with the new centralized GitHub
stars data architecture. The components now receive stars data that has been looked up
from the centralized storage by the data layer.

Updated components:
- AI Coding Landscape page
- CLI detail and comparison pages
- Extension detail and comparison pages
- IDE detail and comparison pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ericyangpan

src/app/[locale]/ai-coding-landscape/components/LandscapePage.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { Link } from '@/i18n/navigation';
 import LandscapeViewTabs from './LandscapeViewTabs';
 import { BackToNavigation } from '@/components/controls/BackToNavigation';
 import type {

src/app/[locale]/clis/[slug]/page.tsx

@@ -14,6 +14,7 @@ import { generateSoftwareDetailMetadata } from '@/lib/metadata';
 import type { Locale } from '@/i18n/config';
 import type { ManifestCLI, ManifestPricingTier, ComponentResourceUrls, ComponentCommunityUrls } from '@/types/manifests';
 import { clisData as clis } from '@/lib/generated';
+import { getGithubStars } from '@/lib/generated/github-stars';
 
 export const revalidate = 3600;
 
@@ -138,7 +139,7 @@ export default async function CLIPage({ params }: { params: Promise<{ locale: st
         categoryLabel={tHero('categories.CLI')}
         latestVersion={cli.latestVersion}
         license={cli.license}
-        githubStars={cli.githubStars as number | null | undefined}
+        githubStars={getGithubStars('clis', cli.id)}
         platforms={cli.platforms?.map(p => p.os)}
         websiteUrl={websiteUrl}
         docsUrl={docsUrl}

src/app/[locale]/clis/comparison/page.client.tsx

@@ -11,6 +11,7 @@ import ComparisonTable, { type ComparisonColumn } from '@/components/ComparisonT
 import { formatPrice, type PricingTier } from '@/lib/pricing';
 import { renderLicense } from '@/lib/license';
 import { clisData as clis } from '@/lib/generated';
+import { getGithubStars } from '@/lib/generated/github-stars';
 
 type Props = {
   locale: string;
@@ -101,8 +102,9 @@ export default function CLIComparisonPageClient({ locale }: Props) {
     {
       key: 'githubStars',
       label: tComparison('columns.githubStars'),
-      render: (value: unknown, item: Record<string, unknown>) => {
-        const stars = value as number | null;
+      render: (_: unknown, item: Record<string, unknown>) => {
+        const id = item.id as string;
+        const stars = getGithubStars('clis', id);
         const communityUrls = item.communityUrls as {
           github?: string;
         } | undefined;

src/app/[locale]/extensions/[slug]/page.tsx

@@ -13,6 +13,7 @@ import { generateSoftwareDetailMetadata } from '@/lib/metadata';
 import type { Locale } from '@/i18n/config';
 import type { ManifestExtension } from '@/types/manifests';
 import { extensionsData as extensions } from '@/lib/generated';
+import { getGithubStars } from '@/lib/generated/github-stars';
 
 export const revalidate = 3600;
 
@@ -126,7 +127,7 @@ export default async function ExtensionPage({ params }: { params: Promise<{ loca
         categoryLabel={tHero('categories.EXTENSION')}
         latestVersion={extension.latestVersion}
         license={extension.license}
-        githubStars={extension.githubStars as number | null | undefined}
+        githubStars={getGithubStars('extensions', extension.id)}
         additionalInfo={extension.supportedIdes && extension.supportedIdes.length > 0 ? [{
           label: tHero('supportedIdes'),
           value: extension.supportedIdes.map(ideSupport => ideSupport.ideId).join(', ')

src/app/[locale]/extensions/comparison/page.client.tsx

@@ -10,6 +10,7 @@ import ComparisonTable, { type ComparisonColumn } from '@/components/ComparisonT
 import { formatPrice, type PricingTier } from '@/lib/pricing';
 import { renderLicense } from '@/lib/license';
 import { extensionsData as extensions } from '@/lib/generated';
+import { getGithubStars } from '@/lib/generated/github-stars';
 
 type Props = {
   locale: string;
@@ -87,8 +88,9 @@ export default function ExtensionComparisonPageClient({ locale }: Props) {
     {
       key: 'githubStars',
       label: tComparison('columns.githubStars'),
-      render: (value: unknown, item: Record<string, unknown>) => {
-        const stars = value as number | null;
+      render: (_: unknown, item: Record<string, unknown>) => {
+        const id = item.id as string;
+        const stars = getGithubStars('extensions', id);
         const communityUrls = item.communityUrls as {
           github?: string;
         } | undefined;

src/app/[locale]/ides/[slug]/page.tsx

@@ -14,6 +14,7 @@ import { generateSoftwareDetailMetadata } from '@/lib/metadata';
 import type { Locale } from '@/i18n/config';
 import type { ManifestIDE, ManifestPricingTier, ComponentResourceUrls, ComponentCommunityUrls } from '@/types/manifests';
 import { idesData as ides } from '@/lib/generated';
+import { getGithubStars } from '@/lib/generated/github-stars';
 
 export const revalidate = 3600;
 
@@ -140,7 +141,7 @@ export default async function IDEPage({ params }: { params: Promise<{ locale: st
         categoryLabel={tHero('categories.IDE')}
         latestVersion={ide.latestVersion}
         license={ide.license}
-        githubStars={ide.githubStars as number | null | undefined}
+        githubStars={getGithubStars('ides', ide.id)}
         platforms={ide.platforms?.map(p => p.os)}
         websiteUrl={websiteUrl}
         docsUrl={docsUrl}

src/app/[locale]/ides/comparison/page.client.tsx

@@ -11,6 +11,7 @@ import ComparisonTable, { type ComparisonColumn } from '@/components/ComparisonT
 import { formatPrice, type PricingTier } from '@/lib/pricing';
 import { renderLicense } from '@/lib/license';
 import { idesData as ides } from '@/lib/generated';
+import { getGithubStars } from '@/lib/generated/github-stars';
 
 type Props = {
   locale: string;
@@ -100,8 +101,9 @@ export default function IDEComparisonPageClient({ locale }: Props) {
     {
       key: 'githubStars',
       label: tComparison('columns.githubStars'),
-      render: (value: unknown, item: Record<string, unknown>) => {
-        const stars = value as number | null;
+      render: (_: unknown, item: Record<string, unknown>) => {
+        const id = item.id as string;
+        const stars = getGithubStars('ides', id);
         const communityUrls = item.communityUrls as {
           github?: string;
         } | undefined;