refactor: cards horizontales pleine largeur en mode client

app/admin/dashboard/admin-dashboard-client.tsx

@@ -2,29 +2,33 @@
 
 import { useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
-import { Plus, LogOut, Home, UserPlus, LayoutDashboard, Database, Activity } from "lucide-react"
+import { Plus, LogOut, Home, UserPlus, LayoutDashboard, Database, Activity, Github } from "lucide-react"
 import { AdminProjectCard } from "@/components/admin-project-card"
 import { ProjectDialog } from "@/components/project-dialog"
 import { AdminDialog } from "@/components/admin-dialog"
 import { AdminCard } from "@/components/admin-card"
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"
-import type { Project, Admin } from "@/lib/types"
+import type { Project, Admin, GitHubProject } from "@/lib/types"
 import { logoutAdmin } from "@/lib/admin-auth"
-import { getAdmins, getMaintenanceMode, getAvailability, getProjects } from "@/lib/actions"
+import { getAdmins, getMaintenanceMode, getAvailability, getProjects, getGitHubProjects } from "@/lib/actions"
+import { GitHubProjectDialog } from "@/components/github-project-dialog"
+import { AdminGitHubProjectCard } from "@/components/admin-github-project-card"
 import { MaintenanceToggle } from "@/components/maintenance-toggle"
 import { AvailabilityToggle } from "@/components/availability-toggle"
 import Link from "next/link"
 
 export default function AdminDashboardClient() {
   const [projects, setProjects] = useState<Project[]>([])
   const [admins, setAdmins] = useState<Admin[]>([])
+  const [githubProjects, setGitHubProjects] = useState<GitHubProject[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [addProjectOpen, setAddProjectOpen] = useState(false)
   const [addAdminOpen, setAddAdminOpen] = useState(false)
   const [maintenanceMode, setMaintenanceMode] = useState(false)
   const [maintenanceMessage, setMaintenanceMessage] = useState("")
   const [maintenanceProgress, setMaintenanceProgress] = useState(0)
   const [isAvailable, setIsAvailable] = useState(true)
+  const [addGitHubProjectOpen, setAddGitHubProjectOpen] = useState(false)
 
   const fetchProjects = async () => {
     const result = await getProjects()
@@ -56,6 +60,13 @@ export default function AdminDashboardClient() {
     }
   }
 
+  const fetchGitHubProjects = async () => {
+    const result = await getGitHubProjects()
+    if (result.success) {
+      setGitHubProjects(result.data)
+    }
+  }
+
   const fetchAvailability = async () => {
     const result = await getAvailability()
     if (result.success && result.isAvailable !== undefined) {
@@ -70,12 +81,17 @@ export default function AdminDashboardClient() {
     fetchAdmins()
     fetchMaintenanceMode()
     fetchAvailability()
+    fetchGitHubProjects()
   }, [])
 
   const handleProjectDeleted = (projectId: string) => {
     setProjects((prev) => prev.filter((p) => p.id !== projectId))
   }
 
+  const handleGitHubProjectDeleted = (projectId: string) => {
+    setGitHubProjects((prev) => prev.filter((p) => p.id !== projectId))
+  }
+
   const handleProjectUpdated = () => {
     fetchProjects()
   }
@@ -182,6 +198,41 @@ export default function AdminDashboardClient() {
                   )}
                 </div>
 
+                {/* GitHub Projects Section */}
+                <div className="space-y-8 pt-8 border-t border-white/5">
+                  <div className="flex flex-col md:flex-row md:items-end justify-between gap-8">
+                    <div className="space-y-2">
+                      <h2 className="text-2xl font-bold tracking-tight">GITHUB PROJECTS</h2>
+                      <p className="text-muted-foreground font-medium max-w-xl text-sm">
+                        Add repos from GitHub — name & description are fetched automatically.
+                      </p>
+                    </div>
+                    <Button onClick={() => setAddGitHubProjectOpen(true)} className="rounded-xl h-12 px-6 bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg shadow-primary/25 group self-start md:self-auto transition-all" aria-label="Add GitHub project">
+                      <Plus className="mr-2 h-4 w-4 group-hover:rotate-90 transition-transform duration-300" aria-hidden="true" />
+                      Add Repo
+                    </Button>
+                  </div>
+
+                  {githubProjects.length === 0 ? (
+                    <div className="bg-black/5 dark:bg-white/5 p-12 rounded-3xl border border-black/5 dark:border-white/5 text-center space-y-4 shadow-inner">
+                      <div className="w-16 h-16 rounded-full bg-black/5 dark:bg-white/5 mx-auto flex items-center justify-center text-muted-foreground">
+                        <Github className="h-8 w-8" />
+                      </div>
+                      <p className="text-muted-foreground italic">No GitHub projects added yet.</p>
+                    </div>
+                  ) : (
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                      {githubProjects.map((gp) => (
+                        <AdminGitHubProjectCard
+                          key={gp.id}
+                          project={gp}
+                          onDeleted={handleGitHubProjectDeleted}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+
               </div>
             </AccordionContent>
           </AccordionItem>
@@ -275,6 +326,7 @@ export default function AdminDashboardClient() {
 
       <ProjectDialog open={addProjectOpen} onOpenChange={setAddProjectOpen} onSuccess={fetchProjects} />
       <AdminDialog open={addAdminOpen} onOpenChange={setAddAdminOpen} onSuccess={fetchAdmins} />
+      <GitHubProjectDialog open={addGitHubProjectOpen} onOpenChange={setAddGitHubProjectOpen} onSuccess={fetchGitHubProjects} />
     </div>
   )
 }

app/page.tsx

@@ -1,8 +1,9 @@
 import { db } from "@/db"
-import { projets as projetsTable } from "@/db/schema"
-import { desc } from "drizzle-orm"
-import type { Project } from "@/lib/types"
+import { projets as projetsTable, githubProjects as githubProjectsTable } from "@/db/schema"
+import { desc, eq, or, isNull } from "drizzle-orm"
+import type { Project, GitHubProject } from "@/lib/types"
 import { PortfolioContent } from "@/components/portfolio-content"
+import { GitHubProjectSlider } from "@/components/github-project-slider"
 import { TechStack } from "@/components/tech-stack"
 import { Button } from "@/components/ui/button"
 import { ScrollButton } from "@/components/scroll-button"
@@ -46,17 +47,54 @@ export default async function HomePage() {
     }
   }
 
-  let projects: Project[] = []
+  let featuredProject: Project | null = null
+  let otherProjects: Project[] = []
   let fetchError = false
+  let githubCreated: GitHubProject[] = []
+  let githubUsed: GitHubProject[] = []
 
   try {
-    const rawProjects = await db.select().from(projetsTable).orderBy(desc(projetsTable.created_at))
-    projects = rawProjects.map((p: any) => ({
+    const [rawFeatured] = await db.select().from(projetsTable)
+      .where(eq(projetsTable.featured, true))
+      .limit(1)
+
+    const rawOther = await db.select().from(projetsTable)
+      .where(
+        or(
+          eq(projetsTable.featured, false),
+          isNull(projetsTable.featured)
+        )
+      )
+      .orderBy(desc(projetsTable.created_at))
+
+    featuredProject = rawFeatured ? ({
+      ...rawFeatured,
+      id: rawFeatured.id.toString(),
+      created_at: rawFeatured.created_at?.toISOString() || new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+    }) as unknown as Project : null
+
+    otherProjects = rawOther.map((p: any) => ({
       ...p,
       id: p.id.toString(),
       created_at: p.created_at?.toISOString() || new Date().toISOString(),
       updated_at: new Date().toISOString(),
     })) as unknown as Project[]
+    const rawGithub = await db.select().from(githubProjectsTable).orderBy(desc(githubProjectsTable.created_at))
+    githubCreated = rawGithub
+      .filter((p: any) => p.type === "created")
+      .map((p: any) => ({
+        ...p,
+        id: p.id.toString(),
+        created_at: p.created_at?.toISOString() || new Date().toISOString(),
+      })) as unknown as GitHubProject[]
+    githubUsed = rawGithub
+      .filter((p: any) => p.type === "used")
+      .map((p: any) => ({
+        ...p,
+        id: p.id.toString(),
+        created_at: p.created_at?.toISOString() || new Date().toISOString(),
+      })) as unknown as GitHubProject[]
   } catch (e) {
     console.error("Database connection error:", e)
     fetchError = true
@@ -95,8 +133,8 @@ export default async function HomePage() {
       </header>
 
       <main className="relative z-10 pt-20">
-        <section className="relative min-h-[calc(100dvh-5rem)] flex items-center justify-center overflow-hidden">
-          <div className="container px-6 py-24 mx-auto text-center space-y-12">
+        <section className="relative min-h-[calc(100dvh-5rem)] flex items-start justify-center pt-32 overflow-hidden">
+          <div className="container px-6 mx-auto text-center space-y-10">
 
             <div className="space-y-6">
               <h2 className="text-7xl md:text-8xl lg:text-[10rem] font-black tracking-[calc(-0.05em)] leading-[0.85] animate-fade-in-up font-display">
@@ -113,7 +151,7 @@ export default async function HomePage() {
               </p>
             </div>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-8 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
               <ScrollButton targetId="projects" size="lg" className="rounded-full px-8 bg-primary hover:bg-primary text-white hover:text-white shadow-xl shadow-primary/25 hover:shadow-2xl hover:shadow-primary/50 group w-full sm:w-auto transition-all text-sm font-bold uppercase tracking-widest">
                 Discover Projects
                 <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
@@ -152,10 +190,12 @@ export default async function HomePage() {
               )}
             </div>
 
-            <PortfolioContent projects={projects} />
+            <PortfolioContent featuredProject={featuredProject} otherProjects={otherProjects} />
           </div>
         </section>
 
+        <GitHubProjectSlider created={githubCreated} used={githubUsed} />
+
         <TechStack />
       </main>
     </div >

components/admin-github-project-card.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Trash2, RefreshCw, Github, Star, Loader2, ExternalLink } from "lucide-react"
+import { deleteGitHubProject, refreshGitHubProject } from "@/lib/actions"
+import { DeleteGitHubProjectDialog } from "./delete-github-project-dialog"
+import type { GitHubProject } from "@/lib/types"
+
+interface AdminGitHubProjectCardProps {
+  project: GitHubProject
+  onDeleted: (id: string) => void
+}
+
+export function AdminGitHubProjectCard({ project, onDeleted }: AdminGitHubProjectCardProps) {
+  const [refreshing, setRefreshing] = useState(false)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+
+  const handleRefresh = async () => {
+    setRefreshing(true)
+    await refreshGitHubProject(project.id)
+    setRefreshing(false)
+  }
+
+  return (
+    <>
+      <div className="bg-black/5 dark:bg-white/5 rounded-2xl border border-black/5 dark:border-white/5 p-5 space-y-3 hover:bg-black/10 dark:hover:bg-white/10 transition-colors group">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-2 min-w-0">
+            <Github className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+            <span className="font-semibold text-sm truncate">{project.name}</span>
+          </div>
+          <div className="flex items-center gap-1 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={handleRefresh}
+              disabled={refreshing}
+              title="Refresh from GitHub"
+            >
+              {refreshing ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 text-destructive hover:text-destructive"
+              onClick={() => setDeleteOpen(true)}
+              title="Delete"
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </div>
+        {project.description && (
+          <p className="text-xs text-muted-foreground line-clamp-2">{project.description}</p>
+        )}
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          {project.language && (
+            <div className="flex items-center gap-1">
+              <div className="w-2 h-2 rounded-full bg-primary/60" />
+              <span>{project.language}</span>
+            </div>
+          )}
+          <div className="flex items-center gap-1">
+            <Star className="h-3 w-3" />
+            <span>{project.stars}</span>
+          </div>
+          <a
+            href={project.github_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="ml-auto flex items-center gap-1 hover:text-foreground transition-colors"
+          >
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+        <div className="pt-1">
+          <span className={`text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full ${
+            project.type === "created"
+              ? "bg-blue-500/10 text-blue-500"
+              : "bg-green-500/10 text-green-500"
+          }`}>
+            {project.type === "created" ? "Created" : "Used"}
+          </span>
+        </div>
+      </div>
+      <DeleteGitHubProjectDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        projectId={project.id}
+        projectName={project.name}
+        onDeleted={() => onDeleted(project.id)}
+      />
+    </>
+  )
+}

components/admin-project-card.tsx

@@ -65,6 +65,11 @@ export function AdminProjectCard({ project, onDeleted, onUpdated }: AdminProject
                   Archived
                 </Badge>
               )}
+              {project.featured && (
+                <Badge variant="secondary" className="bg-amber-500/10 text-amber-500 border-amber-500/20 text-[10px]">
+                  Featured
+                </Badge>
+              )}
             </div>
             <p className="text-sm text-muted-foreground line-clamp-2 font-medium">
               {project.description || "No description."}

components/delete-github-project-dialog.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { useState } from "react"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { deleteGitHubProject } from "@/lib/actions"
+
+interface DeleteGitHubProjectDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  projectId: string
+  projectName: string
+  onDeleted: () => void
+}
+
+export function DeleteGitHubProjectDialog({
+  open,
+  onOpenChange,
+  projectId,
+  projectName,
+  onDeleted,
+}: DeleteGitHubProjectDialogProps) {
+  const [loading, setLoading] = useState(false)
+
+  const handleDelete = async () => {
+    setLoading(true)
+    const result = await deleteGitHubProject(projectId)
+    if (result.success) {
+      onDeleted()
+      onOpenChange(false)
+    }
+    setLoading(false)
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete GitHub Project</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to remove <strong>{projectName}</strong> from the list?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleDelete} disabled={loading} className="bg-destructive hover:bg-destructive/90">
+            {loading ? "Deleting..." : "Delete"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}