Mathis/memegoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

feat(ui): enhance mobile user experience and authentication handling

Browse Source 
Add `UserNavMobile` component for improved mobile navigation. Update dashboard and profile pages to include authentication checks with loading states and login prompts. Introduce category-specific content tabs on the profile page. Apply sidebar enhancements, including new sections for user favorites and memes.
This commit is contained in:
Mathis HERRIOT
2026-01-14 20:50:38 +01:00
parent 5671ba60a6
commit ff6fc1c6b3
5 changed files with 182 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/app/(dashboard)/profile/page.tsx
View File

@@ -1,19 +1,23 @@
"use client";
import { Calendar, LogOut, Settings } from "lucide-react";
import { Calendar, LogIn, LogOut, Settings } from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { useSearchParams } from "next/navigation";
import * as React from "react";
import { ContentList } from "@/components/content-list";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useAuth } from "@/providers/auth-provider";
import { ContentService } from "@/services/content.service";
import { FavoriteService } from "@/services/favorite.service";
import { Spinner } from "@/components/ui/spinner";
export default function ProfilePage() {
const { user, isAuthenticated, isLoading, logout } = useAuth();
const searchParams = useSearchParams();
const tab = searchParams.get("tab") || "memes";
const fetchMyMemes = React.useCallback(
(params: { limit: number; offset: number }) =>
@@ -26,9 +30,36 @@ export default function ProfilePage() {
[],
);
if (isLoading) return null;
if (isLoading) {
return (
<div className="flex h-[400px] items-center justify-center">
<Spinner className="h-8 w-8 text-primary" />
</div>
);
}
if (!isAuthenticated || !user) {
redirect("/login");
return (
<div className="max-w-2xl mx-auto py-8 px-4 text-center">
<Card className="p-12">
<CardHeader>
<div className="mx-auto bg-primary/10 p-4 rounded-full w-fit mb-4">
<LogIn className="h-8 w-8 text-primary" />
</div>
<CardTitle>Profil inaccessible</CardTitle>
<CardDescription>
Vous devez être connecté pour voir votre profil, vos mèmes et vos
favoris.
</CardDescription>
</CardHeader>
<CardContent>
<Button asChild className="w-full sm:w-auto">
<Link href="/login">Se connecter</Link>
</Button>
</CardContent>
</Card>
</div>
);
}
return (
@@ -79,10 +110,14 @@ export default function ProfilePage() {
</div>
</div>
<Tabs defaultValue="memes" className="w-full">
<Tabs value={tab} 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>
<TabsTrigger value="memes" asChild>
<Link href="/profile?tab=memes">Mes Mèmes</Link>
</TabsTrigger>
<TabsTrigger value="favorites" asChild>
<Link href="/profile?tab=favorites">Mes Favoris</Link>
</TabsTrigger>
</TabsList>
<TabsContent value="memes">
<ContentList fetchFn={fetchMyMemes} />