From 73556894f8e1b02897886ea33143626ed3c0be11 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:42:35 +0100
Subject: [PATCH] feat(content-card): improve UI and add tooltips for
 interaction elements

- Introduced tooltips for like, views, and share buttons for better user guidance.
- Added support for category display and improved tag styling.
- Adjusted `CardContent` aspect ratios for better responsiveness.
- Enhanced share button functionality with copy-to-clipboard feedback.
---
 frontend/src/components/content-card.tsx | 99 ++++++++++++++++++------
 1 file changed, 77 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/content-card.tsx b/frontend/src/components/content-card.tsx
index cac2a3b..75c4de1 100644
--- a/frontend/src/components/content-card.tsx
+++ b/frontend/src/components/content-card.tsx
@@ -21,6 +21,12 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useAuth } from "@/providers/auth-provider";
 import { ContentService } from "@/services/content.service";
 import { FavoriteService } from "@/services/favorite.service";
@@ -88,7 +94,12 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 		try {
 			await ContentService.remove(content.id);
 			toast.success("Mème supprimé !");
-			onUpdate?.();
+			if (onUpdate) {
+				onUpdate();
+			} else {
+				// Si pas de onUpdate, on est probablement sur la page de détail
+				router.push("/");
+			}
 		} catch (_error) {
 			toast.error("Erreur lors de la suppression.");
 		}
@@ -147,7 +158,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 						</DropdownMenu>
 					</div>
 				</CardHeader>
-				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square flex items-center justify-center">
+				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square sm:aspect-video md:aspect-square flex items-center justify-center">
 					<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
 						{content.mimeType.startsWith("image/") ? (
 							<Image
@@ -156,6 +167,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 								fill
 								className="object-contain"
 								sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+								priority={false}
 							/>
 						) : (
 							<video
@@ -164,6 +176,7 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 								autoPlay
 								muted
 								loop
+								playsInline
 								className="w-full h-full object-contain"
 							/>
 						)}
@@ -172,27 +185,60 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 				<CardFooter className="p-4 flex flex-col gap-4">
 					<div className="w-full flex items-center justify-between">
 						<div className="flex items-center gap-2">
-							<Button
-								variant="ghost"
-								size="sm"
-								className={`gap-1.5 h-8 ${isLiked ? "text-red-500 hover:text-red-600" : ""}`}
-								onClick={handleLike}
-							>
-								<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
-								<span className="text-xs">{likesCount}</span>
-							</Button>
-							<Button variant="ghost" size="sm" className="gap-1.5 h-8">
-								<Eye className="h-4 w-4" />
-								<span className="text-xs">{content.views}</span>
-							</Button>
-							<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-								<Share2 className="h-4 w-4" />
-							</Button>
+							<TooltipProvider>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											variant="ghost"
+											size="sm"
+											className={`gap-1.5 h-8 px-2 ${isLiked ? "text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/20" : ""}`}
+											onClick={handleLike}
+										>
+											<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
+											<span className="text-xs font-medium">{likesCount}</span>
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>Liker</TooltipContent>
+								</Tooltip>
+
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											variant="ghost"
+											size="sm"
+											className="gap-1.5 h-8 px-2 cursor-default"
+										>
+											<Eye className="h-4 w-4 text-muted-foreground" />
+											<span className="text-xs font-medium">{content.views}</span>
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>Vues</TooltipContent>
+								</Tooltip>
+
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											variant="ghost"
+											size="sm"
+											className="h-8 w-8 p-0"
+											onClick={() => {
+												navigator.clipboard.writeText(
+													`${window.location.origin}/meme/${content.slug}`,
+												);
+												toast.success("Lien copié !");
+											}}
+										>
+											<Share2 className="h-4 w-4" />
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>Partager</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
 						</div>
 						<Button
 							size="sm"
 							variant="secondary"
-							className="text-xs h-8"
+							className="text-xs h-8 font-semibold"
 							onClick={handleUse}
 						>
 							Utiliser
@@ -200,13 +246,22 @@ export function ContentCard({ content, onUpdate }: ContentCardProps) {
 					</div>
 
 					<div className="w-full space-y-2">
-						<h3 className="font-medium text-sm line-clamp-2">{content.title}</h3>
-						<div className="flex flex-wrap gap-1">
+						<Link href={`/meme/${content.slug}`}>
+							<h3 className="font-semibold text-base line-clamp-2 hover:text-primary transition-colors">
+								{content.title}
+							</h3>
+						</Link>
+						<div className="flex flex-wrap gap-1.5">
+							{content.category && (
+								<Badge variant="outline" className="text-[10px] py-0 px-2 bg-muted/50">
+									{content.category.name}
+								</Badge>
+							)}
 							{content.tags.slice(0, 3).map((tag, _i) => (
 								<Badge
 									key={typeof tag === "string" ? tag : tag.id}
 									variant="secondary"
-									className="text-[10px] py-0 px-1.5"
+									className="text-[10px] py-0 px-2"
 								>
 									#{typeof tag === "string" ? tag : tag.name}
 								</Badge>