From 7dce7ec2865afef3040e603a8670cbb47c5a04a3 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:43:34 +0100
Subject: [PATCH] feat(profile): add profile sharing feature and enhance UI
 responsiveness

- Implemented the "Share Profile" button with clipboard copy functionality and success notification.
- Improved profile page responsiveness by adjusting avatar, text sizes, and spacing.
- Added consistent button styling and updated tabs for better usability and design.
---
 frontend/src/app/(dashboard)/profile/page.tsx | 68 +++++++++++++------
 1 file changed, 48 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/(dashboard)/profile/page.tsx b/frontend/src/app/(dashboard)/profile/page.tsx
index daf04fb..562e669 100644
--- a/frontend/src/app/(dashboard)/profile/page.tsx
+++ b/frontend/src/app/(dashboard)/profile/page.tsx
@@ -1,6 +1,13 @@
 "use client";
 
-import { Calendar, Camera, LogIn, LogOut, Settings } from "lucide-react";
+import {
+	Calendar,
+	Camera,
+	LogIn,
+	LogOut,
+	Settings,
+	Share2,
+} from "lucide-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import * as React from "react";
@@ -59,6 +66,12 @@ export default function ProfilePage() {
 		[],
 	);
 
+	const handleShareProfile = () => {
+		const url = `${window.location.origin}/user/${user?.username}`;
+		navigator.clipboard.writeText(url);
+		toast.success("Lien du profil copié !");
+	};
+
 	if (isLoading) {
 		return (
 			<div className="flex h-[400px] items-center justify-center">
@@ -93,12 +106,12 @@ export default function ProfilePage() {
 
 	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">
-					<div className="relative group">
-						<Avatar className="h-32 w-32 border-4 border-primary/10">
+			<div className="bg-white dark:bg-zinc-900 rounded-2xl p-6 md:p-8 border shadow-sm mb-8">
+				<div className="flex flex-col md:flex-row items-center md:items-start gap-6 md:gap-8">
+					<div className="relative group shrink-0">
+						<Avatar className="h-24 w-24 md:h-32 md:w-32 border-4 border-primary/10">
 							<AvatarImage src={user.avatarUrl} alt={user.username} />
-							<AvatarFallback className="text-4xl">
+							<AvatarFallback className="text-3xl md:text-4xl">
 								{user.username.slice(0, 2).toUpperCase()}
 							</AvatarFallback>
 						</Avatar>
@@ -106,8 +119,9 @@ export default function ProfilePage() {
 							type="button"
 							onClick={handleAvatarClick}
 							className="absolute inset-0 flex items-center justify-center bg-black/40 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
+							title="Changer l'avatar"
 						>
-							<Camera className="h-8 w-8" />
+							<Camera className="h-6 w-6 md:h-8 md:w-8" />
 						</button>
 						<input
 							type="file"
@@ -118,17 +132,21 @@ export default function ProfilePage() {
 						/>
 					</div>
 					<div className="flex-1 text-center md:text-left space-y-4">
-						<div>
-							<h1 className="text-3xl font-bold">
+						<div className="space-y-1">
+							<h1 className="text-2xl md:text-3xl font-bold tracking-tight">
 								{user.displayName || user.username}
 							</h1>
-							<p className="text-muted-foreground">@{user.username}</p>
+							<p className="text-muted-foreground font-medium">@{user.username}</p>
 						</div>
+
 						{user.bio && (
-							<p className="max-w-md text-sm leading-relaxed">{user.bio}</p>
+							<p className="max-w-md text-sm md:text-base leading-relaxed text-balance">
+								{user.bio}
+							</p>
 						)}
+
 						<div className="flex flex-wrap justify-center md:justify-start gap-4 text-sm text-muted-foreground">
-							<span className="flex items-center gap-1">
+							<span className="flex items-center gap-1.5">
 								<Calendar className="h-4 w-4" />
 								Membre depuis{" "}
 								{new Date(user.createdAt).toLocaleDateString("fr-FR", {
@@ -137,18 +155,28 @@ export default function ProfilePage() {
 								})}
 							</span>
 						</div>
-						<div className="flex flex-wrap justify-center md:justify-start gap-2">
-							<Button asChild variant="outline" size="sm">
+
+						<div className="flex flex-wrap justify-center md:justify-start gap-2 pt-2">
+							<Button asChild variant="outline" size="sm" className="h-9 px-4">
 								<Link href="/settings">
 									<Settings className="h-4 w-4 mr-2" />
 									Paramètres
 								</Link>
 							</Button>
+							<Button
+								variant="outline"
+								size="sm"
+								className="h-9 px-4"
+								onClick={handleShareProfile}
+							>
+								<Share2 className="h-4 w-4 mr-2" />
+								Partager
+							</Button>
 							<Button
 								variant="ghost"
 								size="sm"
 								onClick={() => logout()}
-								className="text-red-500 hover:text-red-600 hover:bg-red-50"
+								className="h-9 px-4 text-destructive hover:text-destructive hover:bg-destructive/10"
 							>
 								<LogOut className="h-4 w-4 mr-2" />
 								Déconnexion
@@ -159,18 +187,18 @@ export default function ProfilePage() {
 			</div>
 
 			<Tabs value={tab} className="w-full">
-				<TabsList className="grid w-full grid-cols-2 mb-8">
-					<TabsTrigger value="memes" asChild>
+				<TabsList className="grid w-full grid-cols-2 mb-8 h-11">
+					<TabsTrigger value="memes" asChild className="text-sm font-semibold">
 						<Link href="/profile?tab=memes">Mes Mèmes</Link>
 					</TabsTrigger>
-					<TabsTrigger value="favorites" asChild>
+					<TabsTrigger value="favorites" asChild className="text-sm font-semibold">
 						<Link href="/profile?tab=favorites">Mes Favoris</Link>
 					</TabsTrigger>
 				</TabsList>
-				<TabsContent value="memes">
+				<TabsContent value="memes" className="mt-0 outline-none">
 					<ContentList fetchFn={fetchMyMemes} />
 				</TabsContent>
-				<TabsContent value="favorites">
+				<TabsContent value="favorites" className="mt-0 outline-none">
 					<ContentList fetchFn={fetchMyFavorites} />
 				</TabsContent>
 			</Tabs>