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

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.

frontend/src/app/(dashboard)/layout.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { AppSidebar } from "@/components/app-sidebar";
 import { MobileFilters } from "@/components/mobile-filters";
 import { SearchSidebar } from "@/components/search-sidebar";
+import { UserNavMobile } from "@/components/user-nav-mobile";
 import {
 	SidebarInset,
 	SidebarProvider,
@@ -16,26 +17,31 @@ export default function DashboardLayout({
 	modal: React.ReactNode;
 }) {
 	return (
-		<SidebarProvider>
+		<React.Suspense fallback={null}>
-			<AppSidebar />
+			<SidebarProvider>
-			<SidebarInset className="flex flex-row overflow-hidden">
+				<AppSidebar />
-				<div className="flex-1 flex flex-col min-w-0">
+				<SidebarInset className="flex flex-row overflow-hidden">
-					<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 lg:hidden">
+					<div className="flex-1 flex flex-col min-w-0">
-						<SidebarTrigger />
+						<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 lg:hidden sticky top-0 bg-background z-40">
-						<div className="flex-1" />
+							<SidebarTrigger />
-					</header>
+							<div className="flex-1 flex justify-center">
-					<main className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
+								<span className="font-bold text-primary text-lg">MemeGoat</span>
-						{children}
+							</div>
-						{modal}
+							<UserNavMobile />
-					</main>
+						</header>
+						<main className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
+							{children}
+							{modal}
+						</main>
+						<React.Suspense fallback={null}>
+							<MobileFilters />
+						</React.Suspense>
+					</div>
 					<React.Suspense fallback={null}>
-						<MobileFilters />
+						<SearchSidebar />
 					</React.Suspense>
-				</div>
+				</SidebarInset>
-				<React.Suspense fallback={null}>
+			</SidebarProvider>
-					<SearchSidebar />
+		</React.Suspense>
-				</React.Suspense>
-			</SidebarInset>
-		</SidebarProvider>
 	);
 }

frontend/src/app/(dashboard)/profile/page.tsx

@@ -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="memes" asChild>
-					<TabsTrigger value="favorites">Mes Favoris</TabsTrigger>
+						<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} />

frontend/src/app/(dashboard)/upload/page.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Image as ImageIcon, Loader2, Upload, X } from "lucide-react";
+import { Image as ImageIcon, Loader2, LogIn, Upload, X } from "lucide-react";
 import NextImage from "next/image";
+import Link from "next/link";
 import { useRouter } from "next/navigation";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
 	Form,
 	FormControl,
@@ -27,8 +28,10 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { useAuth } from "@/providers/auth-provider";
 import { CategoryService } from "@/services/category.service";
 import { ContentService } from "@/services/content.service";
+import { Spinner } from "@/components/ui/spinner";
 import type { Category } from "@/types/content";
 
 const uploadSchema = z.object({
@@ -42,6 +45,7 @@ type UploadFormValues = z.infer<typeof uploadSchema>;
 
 export default function UploadPage() {
 	const router = useRouter();
+	const { isAuthenticated, isLoading } = useAuth();
 	const [categories, setCategories] = React.useState<Category[]>([]);
 	const [file, setFile] = React.useState<File | null>(null);
 	const [preview, setPreview] = React.useState<string | null>(null);
@@ -57,8 +61,42 @@ export default function UploadPage() {
 	});
 
 	React.useEffect(() => {
-		CategoryService.getAll().then(setCategories).catch(console.error);
+		if (isAuthenticated) {
-	}, []);
+			CategoryService.getAll().then(setCategories).catch(console.error);
+		}
+	}, [isAuthenticated]);
+
+	if (isLoading) {
+		return (
+			<div className="flex h-[400px] items-center justify-center">
+				<Spinner className="h-8 w-8 text-primary" />
+			</div>
+		);
+	}
+
+	if (!isAuthenticated) {
+		return (
+			<div className="max-w-2xl mx-auto py-8 px-4">
+				<Card className="text-center 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>Connexion requise</CardTitle>
+						<CardDescription>
+							Vous devez être connecté pour partager vos meilleurs mèmes avec la
+							communauté.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Button asChild className="w-full sm:w-auto">
+							<Link href="/login">Se connecter</Link>
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
 
 	const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const selectedFile = e.target.files?.[0];

frontend/src/components/app-sidebar.tsx

@@ -3,7 +3,9 @@
 import {
 	ChevronRight,
 	Clock,
+	Heart,
 	HelpCircle,
+	History,
 	Home,
 	LayoutGrid,
 	LogIn,
@@ -14,7 +16,7 @@ import {
 	User as UserIcon,
 } from "lucide-react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useSearchParams } from "next/navigation";
 import * as React from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
@@ -68,6 +70,7 @@ const mainNav = [
 
 export function AppSidebar() {
 	const pathname = usePathname();
+	const searchParams = useSearchParams();
 	const { user, logout, isAuthenticated } = useAuth();
 	const [categories, setCategories] = React.useState<Category[]>([]);
 
@@ -149,6 +152,36 @@ export function AppSidebar() {
 						</SidebarMenuItem>
 					</SidebarMenu>
 				</SidebarGroup>
+
+				<SidebarGroup>
+					<SidebarGroupLabel>Ma Bibliothèque</SidebarGroupLabel>
+					<SidebarMenu>
+						<SidebarMenuItem>
+							<SidebarMenuButton
+								asChild
+								isActive={pathname === "/profile" && searchParams.get("tab") === "favorites"}
+								tooltip="Mes Favoris"
+							>
+								<Link href="/profile?tab=favorites">
+									<Heart />
+									<span>Mes Favoris</span>
+								</Link>
+							</SidebarMenuButton>
+						</SidebarMenuItem>
+						<SidebarMenuItem>
+							<SidebarMenuButton
+								asChild
+								isActive={pathname === "/profile" && searchParams.get("tab") === "memes"}
+								tooltip="Mes Mèmes"
+							>
+								<Link href="/profile?tab=memes">
+									<History />
+									<span>Mes Mèmes</span>
+								</Link>
+							</SidebarMenuButton>
+						</SidebarMenuItem>
+					</SidebarMenu>
+				</SidebarGroup>
 			</SidebarContent>
 			<SidebarFooter>
 				<SidebarMenu>

frontend/src/components/user-nav-mobile.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { LogIn, User as UserIcon } from "lucide-react";
+import Link from "next/link";
+import * as React from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/providers/auth-provider";
+
+export function UserNavMobile() {
+	const { user, isAuthenticated, isLoading } = useAuth();
+
+	if (isLoading) {
+		return <div className="h-8 w-8 rounded-full bg-zinc-200 animate-pulse" />;
+	}
+
+	if (!isAuthenticated || !user) {
+		return (
+			<Button variant="ghost" size="icon" asChild className="h-9 w-9">
+				<Link href="/login">
+					<LogIn className="h-5 w-5" />
+				</Link>
+			</Button>
+		);
+	}
+
+	return (
+		<Button variant="ghost" size="icon" asChild className="h-9 w-9 p-0">
+			<Link href="/profile">
+				<Avatar className="h-8 w-8 border">
+					<AvatarImage src={user.avatarUrl} alt={user.username} />
+					<AvatarFallback>
+						{user.username.slice(0, 2).toUpperCase()}
+					</AvatarFallback>
+				</Avatar>
+			</Link>
+		</Button>
+	);
+}