From c3f57db1e5030661871e94ce1bf9b4f2b3a9694c Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:43:09 +0100
Subject: [PATCH] feat(contents): improve table responsiveness and replace
 action buttons with dropdown menu

- Enhanced table layout by hiding columns on smaller screens for better responsiveness.
- Replaced action buttons with `DropdownMenu` for improved accessibility and cleaner UI.
- Adjusted skeleton loaders to align with the updated table structure.
---
 .../app/(dashboard)/admin/contents/page.tsx   | 73 +++++++++++--------
 1 file changed, 44 insertions(+), 29 deletions(-)

diff --git a/frontend/src/app/(dashboard)/admin/contents/page.tsx b/frontend/src/app/(dashboard)/admin/contents/page.tsx
index e614d1c..ed27957 100644
--- a/frontend/src/app/(dashboard)/admin/contents/page.tsx
+++ b/frontend/src/app/(dashboard)/admin/contents/page.tsx
@@ -7,12 +7,21 @@ import {
 	Edit,
 	Eye,
 	Image as ImageIcon,
+	MoreHorizontal,
 	Trash2,
 	Video,
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Table,
@@ -77,10 +86,10 @@ export default function AdminContentsPage() {
 					<TableHeader>
 						<TableRow>
 							<TableHead>Contenu</TableHead>
-							<TableHead>Catégorie</TableHead>
-							<TableHead>Auteur</TableHead>
-							<TableHead>Stats</TableHead>
-							<TableHead>Date</TableHead>
+							<TableHead className="hidden sm:table-cell">Catégorie</TableHead>
+							<TableHead className="hidden md:table-cell">Auteur</TableHead>
+							<TableHead className="hidden lg:table-cell">Stats</TableHead>
+							<TableHead className="hidden xl:table-cell">Date</TableHead>
 							<TableHead className="w-[100px]"></TableHead>
 						</TableRow>
 					</TableHeader>
@@ -92,16 +101,16 @@ export default function AdminContentsPage() {
 									<TableCell>
 										<Skeleton className="h-10 w-[200px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden sm:table-cell">
 										<Skeleton className="h-4 w-[100px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden md:table-cell">
 										<Skeleton className="h-4 w-[100px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden lg:table-cell">
 										<Skeleton className="h-4 w-[80px]" />
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden xl:table-cell">
 										<Skeleton className="h-4 w-[100px]" />
 									</TableCell>
 									<TableCell>
@@ -135,13 +144,15 @@ export default function AdminContentsPage() {
 											</div>
 										</div>
 									</TableCell>
-									<TableCell>
+									<TableCell className="hidden sm:table-cell">
 										<Badge variant="outline">
 											{content.category?.name || "Sans catégorie"}
 										</Badge>
 									</TableCell>
-									<TableCell>@{content.author.username}</TableCell>
-									<TableCell>
+									<TableCell className="hidden md:table-cell">
+										@{content.author.username}
+									</TableCell>
+									<TableCell className="hidden lg:table-cell">
 										<div className="flex flex-col gap-1 text-xs">
 											<div className="flex items-center gap-1">
 												<Eye className="h-3 w-3" /> {content.views}
@@ -151,27 +162,31 @@ export default function AdminContentsPage() {
 											</div>
 										</div>
 									</TableCell>
-									<TableCell className="whitespace-nowrap">
+									<TableCell className="hidden xl:table-cell whitespace-nowrap">
 										{format(new Date(content.createdAt), "dd/MM/yyyy", { locale: fr })}
 									</TableCell>
 									<TableCell>
-										<div className="flex items-center gap-2">
-											<Button
-												variant="ghost"
-												size="icon"
-												onClick={() => handleEdit(content)}
-											>
-												<Edit className="h-4 w-4" />
-											</Button>
-											<Button
-												variant="ghost"
-												size="icon"
-												onClick={() => handleDelete(content.id)}
-												className="text-destructive hover:text-destructive hover:bg-destructive/10"
-											>
-												<Trash2 className="h-4 w-4" />
-											</Button>
-										</div>
+										<DropdownMenu>
+											<DropdownMenuTrigger asChild>
+												<Button variant="ghost" size="icon">
+													<MoreHorizontal className="h-4 w-4" />
+													<span className="sr-only">Actions</span>
+												</Button>
+											</DropdownMenuTrigger>
+											<DropdownMenuContent align="end">
+												<DropdownMenuLabel>Actions</DropdownMenuLabel>
+												<DropdownMenuSeparator />
+												<DropdownMenuItem onClick={() => handleEdit(content)}>
+													<Edit className="mr-2 h-4 w-4" /> Modifier
+												</DropdownMenuItem>
+												<DropdownMenuItem
+													onClick={() => handleDelete(content.id)}
+													className="text-destructive focus:text-destructive"
+												>
+													<Trash2 className="mr-2 h-4 w-4" /> Supprimer
+												</DropdownMenuItem>
+											</DropdownMenuContent>
+										</DropdownMenu>
 									</TableCell>
 								</TableRow>
 							))