From 0e9edd4bfc4e090eec18f0ebbbe059c19363b7c6 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 14 Jan 2026 21:44:25 +0100
Subject: [PATCH] feat(app): enhance metadata and add admin sidebar section

Update app metadata with multilingual support, SEO improvements, and structured OpenGraph and Twitter metadata. Add an "Administration" section in the sidebar for authenticated admin users. Improve role display and enable dynamic sorting in `HomeContent`. Extend UI badges with a success variant.
---
 frontend/src/app/layout.tsx              | 33 +++++++++++++++++++++++-
 frontend/src/components/app-sidebar.tsx  | 23 ++++++++++++++++-
 frontend/src/components/home-content.tsx |  8 ++++--
 frontend/src/components/ui/badge.tsx     |  2 ++
 4 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 97044bd..b3fdb29 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -16,7 +16,38 @@ const ubuntuMono = Ubuntu_Mono({
 });
 
 export const metadata: Metadata = {
-	title: "MemeGoat",
+	title: {
+		default: "MemeGoat | Partagez vos meilleurs mèmes",
+		template: "%s | MemeGoat",
+	},
+	description:
+		"MemeGoat est la plateforme ultime pour découvrir, créer et partager les mèmes les plus drôles de la communauté des chèvres.",
+	keywords: ["meme", "drôle", "goat", "chèvre", "humour", "partage", "gif"],
+	authors: [{ name: "MemeGoat Team" }],
+	creator: "MemeGoat Team",
+	openGraph: {
+		type: "website",
+		locale: "fr_FR",
+		url: "https://memegoat.local",
+		siteName: "MemeGoat",
+		title: "MemeGoat | Partagez vos meilleurs mèmes",
+		description:
+			"La plateforme ultime pour les mèmes. Rejoignez le troupeau !",
+		images: [
+			{
+				url: "/memegoat-og.png",
+				width: 1200,
+				height: 630,
+				alt: "MemeGoat",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: "MemeGoat | Partagez vos meilleurs mèmes",
+		description: "La plateforme ultime pour les mèmes. Rejoignez le troupeau !",
+		images: ["/memegoat-og.png"],
+	},
 	icons: "/memegoat-color.svg",
 };
 
diff --git a/frontend/src/components/app-sidebar.tsx b/frontend/src/components/app-sidebar.tsx
index c89c51b..ad67847 100644
--- a/frontend/src/components/app-sidebar.tsx
+++ b/frontend/src/components/app-sidebar.tsx
@@ -12,6 +12,7 @@ import {
 	LogOut,
 	PlusCircle,
 	Settings,
+	ShieldCheck,
 	TrendingUp,
 	User as UserIcon,
 } from "lucide-react";
@@ -186,6 +187,26 @@ export function AppSidebar() {
 						</SidebarMenuItem>
 					</SidebarMenu>
 				</SidebarGroup>
+
+				{isAuthenticated && user?.role === "admin" && (
+					<SidebarGroup>
+						<SidebarGroupLabel>Administration</SidebarGroupLabel>
+						<SidebarMenu>
+							<SidebarMenuItem>
+								<SidebarMenuButton
+									asChild
+									isActive={pathname.startsWith("/admin")}
+									tooltip="Dashboard Admin"
+								>
+									<Link href="/admin">
+										<ShieldCheck />
+										<span>Admin</span>
+									</Link>
+								</SidebarMenuButton>
+							</SidebarMenuItem>
+						</SidebarMenu>
+					</SidebarGroup>
+				)}
 			</SidebarContent>
 			<SidebarFooter>
 				<SidebarMenu>
@@ -230,7 +251,7 @@ export function AppSidebar() {
 												<span className="truncate font-semibold">
 													{user.displayName || user.username}
 												</span>
-												<span className="truncate text-xs">{user.email}</span>
+												<span className="truncate text-xs">{user.role}</span>
 											</div>
 										</div>
 									</DropdownMenuLabel>
diff --git a/frontend/src/components/home-content.tsx b/frontend/src/components/home-content.tsx
index e297093..d0bccee 100644
--- a/frontend/src/components/home-content.tsx
+++ b/frontend/src/components/home-content.tsx
@@ -5,10 +5,14 @@ import * as React from "react";
 import { ContentList } from "@/components/content-list";
 import { ContentService } from "@/services/content.service";
 
-export function HomeContent() {
+export function HomeContent({
+	defaultSort = "trend",
+}: {
+	defaultSort?: "trend" | "recent";
+}) {
 	const searchParams = useSearchParams();
 
-	const sort = (searchParams.get("sort") as "trend" | "recent") || "trend";
+	const sort = (searchParams.get("sort") as "trend" | "recent") || defaultSort;
 	const category = searchParams.get("category") || undefined;
 	const tag = searchParams.get("tag") || undefined;
 	const query = searchParams.get("query") || undefined;
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
index 7fa2c18..bd2d173 100644
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -15,6 +15,8 @@ const badgeVariants = cva(
 					"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
 				destructive:
 					"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				success:
+					"border-transparent bg-emerald-500 text-white [a&]:hover:bg-emerald-500/90",
 				outline:
 					"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
 			},