From 0611ef715c04df907495214e5f9aacc55046ff7b Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 14 Jan 2026 22:18:50 +0100
Subject: [PATCH] feat(ui): add `ViewCounter` component and enhance
 accessibility annotations

Introduce a new `ViewCounter` component to manage view tracking for content. Add biome-ignore comments for accessibility standards in several UI components, enhance semantic element usage, and improve tag handling in `SearchSidebar`.
---
 frontend/src/components/search-sidebar.tsx  | 37 +++++++++++++--------
 frontend/src/components/ui/breadcrumb.tsx   |  2 --
 frontend/src/components/ui/button-group.tsx |  1 +
 frontend/src/components/ui/carousel.tsx     |  2 ++
 frontend/src/components/ui/field.tsx        |  1 +
 frontend/src/components/ui/input-group.tsx  |  2 ++
 frontend/src/components/ui/input-otp.tsx    |  2 +-
 frontend/src/components/ui/item.tsx         |  1 +
 frontend/src/components/ui/sidebar.tsx      |  1 +
 frontend/src/components/view-counter.tsx    | 23 +++++++++++++
 10 files changed, 55 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/view-counter.tsx

diff --git a/frontend/src/components/search-sidebar.tsx b/frontend/src/components/search-sidebar.tsx
index 5acfc49..71da096 100644
--- a/frontend/src/components/search-sidebar.tsx
+++ b/frontend/src/components/search-sidebar.tsx
@@ -8,7 +8,8 @@ import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
 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 SearchSidebar() {
 	const router = useRouter();
@@ -16,10 +17,14 @@ export function SearchSidebar() {
 	const pathname = usePathname();
 
 	const [categories, setCategories] = React.useState<Category[]>([]);
+	const [popularTags, setPopularTags] = React.useState<Tag[]>([]);
 	const [query, setQuery] = React.useState(searchParams.get("query") || "");
 
 	React.useEffect(() => {
 		CategoryService.getAll().then(setCategories).catch(console.error);
+		TagService.getAll({ limit: 10, sort: "popular" })
+			.then(setPopularTags)
+			.catch(console.error);
 	}, []);
 
 	const updateSearch = React.useCallback(
@@ -116,19 +121,23 @@ export function SearchSidebar() {
 					<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 hover:bg-secondary"
-										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 hover:bg-secondary"
+									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>
diff --git a/frontend/src/components/ui/breadcrumb.tsx b/frontend/src/components/ui/breadcrumb.tsx
index acf0a22..e390bd1 100644
--- a/frontend/src/components/ui/breadcrumb.tsx
+++ b/frontend/src/components/ui/breadcrumb.tsx
@@ -53,8 +53,6 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
 	return (
 		<span
 			data-slot="breadcrumb-page"
-			role="link"
-			aria-disabled="true"
 			aria-current="page"
 			className={cn("text-foreground font-normal", className)}
 			{...props}
diff --git a/frontend/src/components/ui/button-group.tsx b/frontend/src/components/ui/button-group.tsx
index 5360458..6a28460 100644
--- a/frontend/src/components/ui/button-group.tsx
+++ b/frontend/src/components/ui/button-group.tsx
@@ -26,6 +26,7 @@ function ButtonGroup({
 	...props
 }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for button groups
 		<div
 			role="group"
 			data-slot="button-group"
diff --git a/frontend/src/components/ui/carousel.tsx b/frontend/src/components/ui/carousel.tsx
index 3da8ff8..4e52a1d 100644
--- a/frontend/src/components/ui/carousel.tsx
+++ b/frontend/src/components/ui/carousel.tsx
@@ -117,6 +117,7 @@ function Carousel({
 				canScrollNext,
 			}}
 		>
+			{/* biome-ignore lint/a11y/useSemanticElements: standard pattern for carousels */}
 			<div
 				onKeyDownCapture={handleKeyDown}
 				className={cn("relative", className)}
@@ -156,6 +157,7 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
 	const { orientation } = useCarousel();
 
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for carousel items
 		<div
 			role="group"
 			aria-roledescription="slide"
diff --git a/frontend/src/components/ui/field.tsx b/frontend/src/components/ui/field.tsx
index d1ed562..44a38db 100644
--- a/frontend/src/components/ui/field.tsx
+++ b/frontend/src/components/ui/field.tsx
@@ -83,6 +83,7 @@ function Field({
 	...props
 }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for field components
 		<div
 			role="group"
 			data-slot="field"
diff --git a/frontend/src/components/ui/input-group.tsx b/frontend/src/components/ui/input-group.tsx
index 7d696a5..8f376f5 100644
--- a/frontend/src/components/ui/input-group.tsx
+++ b/frontend/src/components/ui/input-group.tsx
@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for input groups
 		<div
 			data-slot="input-group"
 			role="group"
@@ -62,6 +63,7 @@ function InputGroupAddon({
 	...props
 }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for input groups
 		<div
 			role="group"
 			data-slot="input-group-addon"
diff --git a/frontend/src/components/ui/input-otp.tsx b/frontend/src/components/ui/input-otp.tsx
index 7ed2461..5977c3d 100644
--- a/frontend/src/components/ui/input-otp.tsx
+++ b/frontend/src/components/ui/input-otp.tsx
@@ -68,7 +68,7 @@ function InputOTPSlot({
 
 function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
 	return (
-		<div data-slot="input-otp-separator" role="separator" {...props}>
+		<div data-slot="input-otp-separator" aria-hidden="true" {...props}>
 			<MinusIcon />
 		</div>
 	);
diff --git a/frontend/src/components/ui/item.tsx b/frontend/src/components/ui/item.tsx
index d974f90..f9451f9 100644
--- a/frontend/src/components/ui/item.tsx
+++ b/frontend/src/components/ui/item.tsx
@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
 	return (
+		// biome-ignore lint/a11y/useSemanticElements: standard pattern for item groups
 		<div
 			role="list"
 			data-slot="item-group"
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index 3a7d1fb..4ebe372 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -82,6 +82,7 @@ function SidebarProvider({
 			}
 
 			// This sets the cookie to keep the sidebar state.
+			// biome-ignore lint/suspicious/noDocumentCookie: persistence of sidebar state
 			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
 		},
 		[setOpenProp, open],
diff --git a/frontend/src/components/view-counter.tsx b/frontend/src/components/view-counter.tsx
new file mode 100644
index 0000000..3fba849
--- /dev/null
+++ b/frontend/src/components/view-counter.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { ContentService } from "@/services/content.service";
+
+interface ViewCounterProps {
+	contentId: string;
+}
+
+export function ViewCounter({ contentId }: ViewCounterProps) {
+	const hasIncremented = useRef(false);
+
+	useEffect(() => {
+		if (!hasIncremented.current) {
+			ContentService.incrementViews(contentId).catch((err) => {
+				console.error("Failed to increment views:", err);
+			});
+			hasIncremented.current = true;
+		}
+	}, [contentId]);
+
+	return null;
+}