feat: add newest dependents tab to GitHub Dependents page

- Updated fetch script to save both top (by stars) and latest dependents
- Modified DependentsPage to support toggle between "Top by Stars" and "Most Recent" views
- Regenerated dependents.json with new data structure containing both topDependents and latestDependents
- Maintains backward compatibility with old data format

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

Co-Authored-By: Claude <[email protected]>

Author: Boshen

apps/dashboard/src/pages/DependentsPage.tsx

@@ -1,6 +1,7 @@
 import { PageHeader } from '@vibe/shared';
 import { Badge, Card, CardGrid } from '@vibe/ui';
-import { GitBranch, Star, Package, Users, ExternalLink } from 'lucide-react';
+import { GitBranch, Star, Package, Users, ExternalLink, Clock, TrendingUp } from 'lucide-react';
+import { useState } from 'react';
 import dependentsData from '../../../../data/dependents.json';
 import { PageContainer } from '../components/layout/PageContainer';
 
@@ -9,42 +10,65 @@ interface Dependent {
   stars: number;
 }
 
+interface DependentsCollection {
+  topDependents: Dependent[];
+  latestDependents: Dependent[];
+}
+
 interface DependentsData {
   [repo: string]: {
-    [pkg: string]: Dependent[];
+    [pkg: string]: DependentsCollection | Dependent[]; // Support both old and new format
   };
 }
 
 interface PackageData {
   repo: string;
   package: string;
-  dependents: Dependent[];
+  topDependents: Dependent[];
+  latestDependents: Dependent[];
 }
 
 function DependentsPage() {
+  const [viewMode, setViewMode] = useState<'top' | 'latest'>('top');
   const data = dependentsData as DependentsData;
 
   // Flatten the data structure to get all packages
   const allPackages: PackageData[] = [];
   Object.entries(data).forEach(([repo, packages]) => {
-    Object.entries(packages).forEach(([pkg, dependents]) => {
-      allPackages.push({
-        repo,
-        package: pkg,
-        dependents
-      });
+    Object.entries(packages).forEach(([pkg, deps]) => {
+      // Handle both old format (array) and new format (object with topDependents/latestDependents)
+      if (Array.isArray(deps)) {
+        // Old format - treat as topDependents
+        allPackages.push({
+          repo,
+          package: pkg,
+          topDependents: deps,
+          latestDependents: []
+        });
+      } else {
+        // New format
+        allPackages.push({
+          repo,
+          package: pkg,
+          topDependents: deps.topDependents || [],
+          latestDependents: deps.latestDependents || []
+        });
+      }
     });
   });
 
-  // Calculate stats
+  // Calculate stats based on current view mode
   const totalRepos = Object.keys(data).length;
   const totalPackages = allPackages.length;
-  const totalDependents = allPackages.reduce((sum, pkg) => sum + pkg.dependents.length, 0);
 
-  // Get top dependent across all packages
+  const currentDependents = viewMode === 'top' ? 'topDependents' : 'latestDependents';
+  const totalDependents = allPackages.reduce((sum, pkg) => sum + pkg[currentDependents].length, 0);
+
+  // Get top dependent across all packages for current view
   const allDependents: Array<Dependent & { package: string; repo: string }> = [];
-  allPackages.forEach(({ repo, package: pkg, dependents }) => {
-    dependents.forEach(dep => {
+  allPackages.forEach(({ repo, package: pkg, topDependents, latestDependents }) => {
+    const deps = viewMode === 'top' ? topDependents : latestDependents;
+    deps.forEach(dep => {
       allDependents.push({ ...dep, package: pkg, repo });
     });
   });
@@ -55,11 +79,41 @@ function DependentsPage() {
       <PageHeader
         icon={<GitBranch className='text-purple-600 dark:text-purple-400' />}
         title='GitHub Dependents'
-        subtitle='Top repositories and packages that depend on our projects'
+        subtitle={viewMode === 'top' ? 'Top repositories by stars that depend on our projects' : 'Most recent repositories that depend on our projects'}
         action={
-          <Badge variant='info' size='md'>
-            {totalDependents} Total Dependents
-          </Badge>
+          <div className='flex items-center gap-4'>
+            <div className='flex rounded-lg bg-slate-100 dark:bg-slate-800 p-1'>
+              <button
+                onClick={() => setViewMode('top')}
+                className={`px-3 py-1 rounded-md text-sm font-medium transition-all ${
+                  viewMode === 'top'
+                    ? 'bg-white dark:bg-slate-700 text-purple-600 dark:text-purple-400 shadow-sm'
+                    : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200'
+                }`}
+              >
+                <span className='flex items-center gap-1'>
+                  <TrendingUp className='w-3.5 h-3.5' />
+                  Top by Stars
+                </span>
+              </button>
+              <button
+                onClick={() => setViewMode('latest')}
+                className={`px-3 py-1 rounded-md text-sm font-medium transition-all ${
+                  viewMode === 'latest'
+                    ? 'bg-white dark:bg-slate-700 text-purple-600 dark:text-purple-400 shadow-sm'
+                    : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200'
+                }`}
+              >
+                <span className='flex items-center gap-1'>
+                  <Clock className='w-3.5 h-3.5' />
+                  Most Recent
+                </span>
+              </button>
+            </div>
+            <Badge variant='info' size='md'>
+              {totalDependents} {viewMode === 'top' ? 'Top' : 'Latest'} Dependents
+            </Badge>
+          </div>
         }
       />
 
@@ -110,7 +164,9 @@ function DependentsPage() {
 
       {/* All Packages in 2 Column Grid */}
       <div className='grid grid-cols-1 lg:grid-cols-2 gap-6'>
-        {allPackages.map(({ repo, package: pkg, dependents }) => (
+        {allPackages.map(({ repo, package: pkg, topDependents, latestDependents }) => {
+          const dependents = viewMode === 'top' ? topDependents : latestDependents;
+          return (
           <Card key={`${repo}/${pkg}`} className='p-6'>
             <div className='mb-4 flex items-center justify-between'>
               <div className='flex items-center gap-2'>
@@ -173,7 +229,8 @@ function DependentsPage() {
               </table>
             </div>
           </Card>
-        ))}
+        );
+        })}
       </div>
     </PageContainer>
   );