From 6bc6a8f68c0a60a28e13f4878241f37bd5c3f386 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:43:48 +0100
Subject: [PATCH] feat(profile): add "Share Profile" button and improve page
 responsiveness

- Added "Share Profile" button with clipboard copy and success notification.
- Enhanced responsiveness by adjusting avatar sizes, typography, and spacing.
- Refined button styling for consistency and usability.
---
 .../app/(dashboard)/user/[username]/page.tsx  | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/(dashboard)/user/[username]/page.tsx b/frontend/src/app/(dashboard)/user/[username]/page.tsx
index 5e77a07..a77e263 100644
--- a/frontend/src/app/(dashboard)/user/[username]/page.tsx
+++ b/frontend/src/app/(dashboard)/user/[username]/page.tsx
@@ -1,9 +1,11 @@
 "use client";
 
-import { Calendar, User as UserIcon } from "lucide-react";
+import { Calendar, Share2, User as UserIcon } from "lucide-react";
 import * as React from "react";
+import { toast } from "sonner";
 import { ContentList } from "@/components/content-list";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { ContentService } from "@/services/content.service";
 import { UserService } from "@/services/user.service";
@@ -31,6 +33,12 @@ export default function PublicProfilePage({
 		[username],
 	);
 
+	const handleShareProfile = () => {
+		const url = `${window.location.origin}/user/${username}`;
+		navigator.clipboard.writeText(url);
+		toast.success("Lien du profil copié !");
+	};
+
 	if (loading) {
 		return (
 			<div className="flex h-[400px] items-center justify-center">
@@ -55,28 +63,28 @@ export default function PublicProfilePage({
 
 	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">
+			<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">
+					<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>
 					<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 mx-auto md:mx-0">
+							<p className="max-w-md text-sm md:text-base leading-relaxed mx-auto md:mx-0 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", {
@@ -85,12 +93,23 @@ export default function PublicProfilePage({
 								})}
 							</span>
 						</div>
+						<div className="flex justify-center md:justify-start pt-2">
+							<Button
+								variant="outline"
+								size="sm"
+								className="h-9 px-4"
+								onClick={handleShareProfile}
+							>
+								<Share2 className="h-4 w-4 mr-2" />
+								Partager le profil
+							</Button>
+						</div>
 					</div>
 				</div>
 			</div>
 
 			<div className="space-y-8">
-				<h2 className="text-xl font-bold border-b pb-4">Ses mèmes</h2>
+				<h2 className="text-xl md:text-2xl font-bold border-b pb-4">Ses mèmes</h2>
 				<ContentList fetchFn={fetchUserMemes} />
 			</div>
 		</div>