feat: introduce new app routes with modular structure and enhanced features

Added modular app routes including `login`, `dashboard`, `categories`, `trends`, and `upload`. Introduced reusable components such as `ContentList`, `ContentSkeleton`, and `AppSidebar` for improved UI consistency. Enhanced authentication with `AuthProvider` and implemented lazy loading, dynamic layouts, and infinite scrolling for better performance.
2026-01-14 13:52:08 +01:00
parent 0c045e8d3c
commit 0b07320974
41 changed files with 2341 additions and 43 deletions
--- a/frontend/src/app/(dashboard)/meme/[slug]/page.tsx
+++ b/frontend/src/app/(dashboard)/meme/[slug]/page.tsx
@@ -0,0 +1,90 @@
+import * as React from "react";
+import type { Metadata } from "next";
+import { ContentService } from "@/services/content.service";
+import { ContentCard } from "@/components/content-card";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft } from "lucide-react";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+export const revalidate = 3600; // ISR: Revalider toutes les heures
+
+export async function generateMetadata({ 
+  params 
+}: { 
+  params: Promise<{ slug: string }> 
+}): Promise<Metadata> {
+  const { slug } = await params;
+  try {
+    const content = await ContentService.getOne(slug);
+    return {
+      title: `${content.title} | MemeGoat`,
+      description: content.description || `Regardez ce mème : ${content.title}`,
+      openGraph: {
+        images: [content.thumbnailUrl || content.url],
+      },
+    };
+  } catch (error) {
+    return { title: "Mème non trouvé | MemeGoat" };
+  }
+}
+
+export default async function MemePage({ 
+  params 
+}: { 
+  params: Promise<{ slug: string }> 
+}) {
+  const { slug } = await params;
+  
+  try {
+    const content = await ContentService.getOne(slug);
+    
+    return (
+      <div className="max-w-4xl mx-auto py-8 px-4">
+        <Link href="/" className="inline-flex items-center text-sm mb-6 hover:text-primary transition-colors">
+          <ChevronLeft className="h-4 w-4 mr-1" />
+          Retour au flux
+        </Link>
+        
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2">
+            <ContentCard content={content} />
+          </div>
+          
+          <div className="space-y-6">
+            <div className="bg-white dark:bg-zinc-900 p-6 rounded-xl shadow-sm border">
+              <h2 className="font-bold text-lg mb-4">À propos de ce mème</h2>
+              <div className="space-y-4 text-sm">
+                <div>
+                  <p className="text-muted-foreground">Publié par</p>
+                  <p className="font-medium">{content.author.displayName || content.author.username}</p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground">Date</p>
+                  <p className="font-medium">{new Date(content.createdAt).toLocaleDateString('fr-FR', {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric'
+                  })}</p>
+                </div>
+                {content.description && (
+                  <div>
+                    <p className="text-muted-foreground">Description</p>
+                    <p>{content.description}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+            
+            <div className="bg-white dark:bg-zinc-900 p-6 rounded-xl shadow-sm border text-center">
+              <p className="text-sm text-muted-foreground mb-4">Envie de créer votre propre mème ?</p>
+              <Button className="w-full">Utiliser ce template</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  } catch (error) {
+    notFound();
+  }
+}