From e84aa8a8db871c274785a70c66068ba1339d2e38 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 14 Jan 2026 22:19:18 +0100
Subject: [PATCH] feat(ui): integrate dynamic tag handling in `MobileFilters`

Add support for fetching and displaying dynamic popular tags in `MobileFilters` using `TagService`. Replace static tag list with API-driven content and handle empty states gracefully.
---
 frontend/src/components/mobile-filters.tsx | 39 ++++++++++++++--------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/mobile-filters.tsx b/frontend/src/components/mobile-filters.tsx
index 0550bf3..af8c55b 100644
--- a/frontend/src/components/mobile-filters.tsx
+++ b/frontend/src/components/mobile-filters.tsx
@@ -16,7 +16,8 @@ import {
 	SheetTrigger,
 } from "@/components/ui/sheet";
 import { CategoryService } from "@/services/category.service";
-import type { Category } from "@/types/content";
+import { TagService } from "@/services/tag.service";
+import type { Category, Tag } from "@/types/content";
 
 export function MobileFilters() {
 	const router = useRouter();
@@ -24,12 +25,16 @@ export function MobileFilters() {
 	const pathname = usePathname();
 
 	const [categories, setCategories] = React.useState<Category[]>([]);
+	const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
 	const [query, setQuery] = React.useState(searchParams.get("query") || "");
 	const [open, setOpen] = React.useState(false);
 
 	React.useEffect(() => {
 		if (open) {
 			CategoryService.getAll().then(setCategories).catch(console.error);
+			TagService.getAll({ limit: 10, sort: "popular" })
+				.then(setPopularTags)
+				.catch(console.error);
 		}
 	}, [open]);
 
@@ -127,19 +132,25 @@ export function MobileFilters() {
 								<div>
 									<h3 className="text-sm font-medium mb-3">Tags populaires</h3>
 									<div className="flex flex-wrap gap-2">
-										{["funny", "coding", "cat", "dog", "work", "relatable", "gaming"].map(
-											(tag) => (
-												<Badge
-													key={tag}
-													variant={searchParams.get("tag") === tag ? "default" : "outline"}
-													className="cursor-pointer"
-													onClick={() =>
-														updateSearch("tag", searchParams.get("tag") === tag ? null : tag)
-													}
-												>
-													#{tag}
-												</Badge>
-											),
+										{popularTags.map((tag) => (
+											<Badge
+												key={tag.id}
+												variant={
+													searchParams.get("tag") === tag.name ? "default" : "outline"
+												}
+												className="cursor-pointer"
+												onClick={() =>
+													updateSearch(
+														"tag",
+														searchParams.get("tag") === tag.name ? null : tag.name,
+													)
+												}
+											>
+												#{tag.name}
+											</Badge>
+										))}
+										{popularTags.length === 0 && (
+											<p className="text-xs text-muted-foreground">Aucun tag trouvé.</p>
 										)}
 									</div>
 								</div>