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)/profile/page.tsx
+++ b/frontend/src/app/(dashboard)/profile/page.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import { useAuth } from "@/providers/auth-provider";
+import { ContentList } from "@/components/content-list";
+import { ContentService } from "@/services/content.service";
+import { FavoriteService } from "@/services/favorite.service";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Settings, LogOut, Calendar } from "lucide-react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+export default function ProfilePage() {
+  const { user, isAuthenticated, isLoading, logout } = useAuth();
+
+  if (isLoading) return null;
+  if (!isAuthenticated || !user) {
+    redirect("/login");
+  }
+
+  const fetchMyMemes = React.useCallback((params: { limit: number; offset: number }) => 
+    ContentService.getExplore({ ...params, author: user.username }), 
+  [user.username]);
+
+  const fetchMyFavorites = React.useCallback((params: { limit: number; offset: number }) => 
+    FavoriteService.list(params), 
+  []);
+
+  return (
+    <div className="max-w-4xl mx-auto py-8 px-4">
+      <div className="bg-white dark:bg-zinc-900 rounded-2xl p-8 border shadow-sm mb-8">
+        <div className="flex flex-col md:flex-row items-center gap-8">
+          <Avatar className="h-32 w-32 border-4 border-primary/10">
+            <AvatarImage src={user.avatarUrl} alt={user.username} />
+            <AvatarFallback className="text-4xl">
+              {user.username.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex-1 text-center md:text-left space-y-4">
+            <div>
+              <h1 className="text-3xl font-bold">{user.displayName || user.username}</h1>
+              <p className="text-muted-foreground">@{user.username}</p>
+            </div>
+            <div className="flex flex-wrap justify-center md:justify-start gap-4 text-sm text-muted-foreground">
+              <span className="flex items-center gap-1">
+                <Calendar className="h-4 w-4" />
+                Membre depuis {new Date(user.createdAt).toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' })}
+              </span>
+            </div>
+            <div className="flex flex-wrap justify-center md:justify-start gap-2">
+              <Button asChild variant="outline" size="sm">
+                <Link href="/settings">
+                  <Settings className="h-4 w-4 mr-2" />
+                  Paramètres
+                </Link>
+              </Button>
+              <Button variant="ghost" size="sm" onClick={() => logout()} className="text-red-500 hover:text-red-600 hover:bg-red-50">
+                <LogOut className="h-4 w-4 mr-2" />
+                Déconnexion
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Tabs defaultValue="memes" className="w-full">
+        <TabsList className="grid w-full grid-cols-2 mb-8">
+          <TabsTrigger value="memes">Mes Mèmes</TabsTrigger>
+          <TabsTrigger value="favorites">Mes Favoris</TabsTrigger>
+        </TabsList>
+        <TabsContent value="memes">
+          <ContentList fetchFn={fetchMyMemes} />
+        </TabsContent>
+        <TabsContent value="favorites">
+          <ContentList fetchFn={fetchMyFavorites} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}