Blogs listing + Categories

backend/api/blogs/blogs.go

@@ -10,11 +10,17 @@ import (
 )
 
 func HandleGetBlogs(w http.ResponseWriter, r *http.Request) {
+	category := r.URL.Query().Get("category")
 	var blog []models.Blog
-	count, err := core.DB.NewSelect().
+	q := core.DB.NewSelect().
 		Model(&blog).
-		Relation("Author").
-		ScanAndCount(context.Background())
+		Relation("Author")
+
+	if len(category) > 0 {
+		q.Where("category = ?", category)
+	}
+
+	count, err := q.ScanAndCount(context.Background())
 	if err != nil {
 		core.JSONError{
 			Status:  core.Error,

backend/api/blogs/categories.go

@@ -0,0 +1,41 @@
+package blogs
+
+import (
+	"context"
+	"net/http"
+
+	"fr.latosa-escrima/core"
+	"fr.latosa-escrima/core/models"
+)
+
+func HandleCategories(w http.ResponseWriter, r *http.Request) {
+	var categories []struct {
+		Category string `json:"category"`
+		Count    int    `json:"count"`
+	}
+	err := core.DB.NewSelect().
+		Model((*models.Blog)(nil)).
+		Column("category").
+		ColumnExpr("COUNT(*) AS count").
+		Where("category IS NOT NULL AND category != ''").
+		Group("category").
+		// Count the occurrences of each distinct category
+		Having("COUNT(category) > 0").
+		// Sort the results by the count in descending order
+		Order("count DESC").
+		Scan(context.Background(), &categories)
+
+	if err != nil {
+		core.JSONError{
+			Status:  core.Error,
+			Message: err.Error(),
+		}.Respond(w, http.StatusInternalServerError)
+		return
+	}
+
+	core.JSONSuccess{
+		Status:  core.Success,
+		Message: "Categories found.",
+		Data:    categories,
+	}.Respond(w, http.StatusOK)
+}

backend/api/blogs_routes.go

@@ -6,10 +6,18 @@ import (
 )
 
 var BlogsRoutes = map[string]core.Handler{
+	"/blogs": {
+		Handler:     blogs.HandleGetBlogs,
+		Middlewares: []core.Middleware{Methods("GET")},
+	},
 	"/blogs/new": {
 		Handler: blogs.HandleNew,
 		Middlewares: []core.Middleware{Methods(("POST")),
 			HasPermissions("blogs", "insert"), AuthJWT}},
+	"/blogs/categories": {
+		Handler:     blogs.HandleCategories,
+		Middlewares: []core.Middleware{Methods("GET")},
+	},
 	"/blogs/{slug}": {
 		Handler:     blogs.HandleBlog,
 		Middlewares: []core.Middleware{Methods("GET")}},

backend/cmd/migrate/migrations/20250224080441_update_blog_category.go

@@ -0,0 +1,24 @@
+package migrations
+
+import (
+	"context"
+	"fmt"
+
+	"fr.latosa-escrima/core/models"
+	"github.com/uptrace/bun"
+)
+
+func init() {
+	Migrations.MustRegister(func(ctx context.Context, db *bun.DB) error {
+		fmt.Print(" [up migration] ")
+		_, err := db.
+			NewAddColumn().
+			Model((*models.Blog)(nil)).
+			ColumnExpr("category TEXT").
+			Exec(ctx)
+		return err
+	}, func(ctx context.Context, db *bun.DB) error {
+		fmt.Print(" [down migration] ")
+		return nil
+	})
+}

backend/core/models/blogs.go

@@ -18,6 +18,7 @@ type Blog struct {
 	Published time.Time `bun:"published,default:current_timestamp" json:"published"`
 	Summary   string    `bun:"summary" json:"summary"`
 	Image     string    `bun:"image" json:"image"`
+	Category  string    `bun:"category" json:"category,omitempty"`
 
 	Author User `bun:"rel:belongs-to,join:author_id=user_id" json:"author"`
 }

frontend/app/(auth)/dashboard/blogs/new/new.tsx

@@ -4,9 +4,9 @@ import { LocalEditor } from "@/components/editor";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog";
-import useApiMutation from "@/hooks/use-api";
+import useApiMutation, { useApi } from "@/hooks/use-api";
 import sluggify from "@/lib/sluggify";
-import { NewBlog } from "@/types/types";
+import { Category, NewBlog } from "@/types/types";
 import { useEffect, useMemo, useState } from "react";
 import { DialogTitle } from "@radix-ui/react-dialog";
 import { useToast } from "@/hooks/use-toast";
@@ -17,12 +17,28 @@ import {
 	ActionButtonLoading,
 	ActionButtonSuccess,
 } from "@/components/action-button";
+import ComboBox from "@/components/ui/combobox";
 
 export default function BlogEditor() {
 	const { toast } = useToast();
 	const [title, setTitle] = useState("");
 	const [imageUrl, setImageUrl] = useState<string>("/placeholder.svg");
 
+	const [category, setCategory] = useState("");
+
+	const { data } = useApi<Category[]>(
+		"/blogs/categories",
+		undefined,
+		false,
+		false,
+	);
+
+	const [categories, setCategories] = useState<string[]>([]);
+
+	useEffect(() => {
+		if (data) setCategories(data.map((c) => c.category) ?? []);
+	}, [data]);
+
 	const content = localStorage.getItem("blog_draft") ?? "";
 
 	useEffect(() => {
@@ -82,12 +98,38 @@ export default function BlogEditor() {
 						/>
 					</DialogContent>
 				</Dialog>
+				<div className="flex gap-4">
 					<Input
 						type="text"
 						placeholder="Enter a summary"
 						value={summary}
 						onChange={(e) => setSummary(e.target.value)}
 					/>
+					<ComboBox
+						value={category}
+						setValue={setCategory}
+						key={categories.join(",")}
+						elements={categories}
+						trigger={(value) => (
+							<Button>
+								{value ?? "Selectionner une catégorie"}
+							</Button>
+						)}
+						onSubmit={(value) => {
+							setCategories((prev) => {
+								if (prev.includes(value)) return prev;
+								return [...prev, value];
+							});
+							setCategory(value);
+						}}
+					>
+						{(Item, element) => (
+							<Item value={element} key={element} label={element}>
+								{element}
+							</Item>
+						)}
+					</ComboBox>
+				</div>
 			</div>
 			<div className="flex">
 				<div className="flex-1">
@@ -110,6 +152,7 @@ export default function BlogEditor() {
 							image: imageUrl,
 							slug,
 							content: blogContent,
+							category,
 						});
 						if (!res) {
 							toast({ title: "Aucune réponse du serveur." });

frontend/app/(main)/about/page.tsx

@@ -36,8 +36,8 @@ export default async function About() {
 									Nicolas GORUK
 								</CardTitle>
 								<CardDescription>
-									Président l'association française de Latosa
-									Escrima
+									Président de l'association française de
+									Latosa Escrima
 								</CardDescription>
 							</CardHeader>
 							<CardContent className="px-8 sm:px-10 py-14">

frontend/app/(main)/blogs/categories.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useSearchParams, useRouter, usePathname } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import request from "@/lib/request";
+import { useEffect, useState } from "react";
+import { Category } from "@/types/types";
+import { useIsMobile } from "@/hooks/use-mobile";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+} from "@/components/ui/select";
+import { SelectValue } from "@radix-ui/react-select";
+import { CircleXIcon } from "lucide-react";
+
+export default function Categories({
+	selectedCategory,
+}: {
+	selectedCategory?: string;
+}) {
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const [categories, setCategories] = useState<Category[]>([]);
+
+	const [selected, setSelected] = useState<string | undefined>(
+		selectedCategory,
+	);
+
+	useEffect(() => {
+		setSelected(selectedCategory);
+	}, [selectedCategory]); // Sync local state when URL changes
+
+	const [isReady, setIsReady] = useState(false);
+	const isMobile = useIsMobile();
+
+	useEffect(() => {
+		setIsReady(true); // Ensures component renders only after first render
+	}, []);
+
+	// Fetch categories on mount
+	useEffect(() => {
+		const fetchCategories = async () => {
+			const response = await request<Category[]>("/blogs/categories", {
+				requiresAuth: false,
+			});
+			if (response.status !== "Error" && response.data) {
+				setCategories(response.data);
+			}
+		};
+
+		fetchCategories();
+	}, []);
+
+	// Function to update query params
+	const updateQueryParams = (category: string) => {
+		const params = new URLSearchParams(searchParams.toString());
+		if (category === selectedCategory) {
+			params.delete("category");
+		} else {
+			params.set("category", category);
+		}
+		router.push(`${pathname}?${params.toString()}`, { scroll: false });
+	};
+
+	if (!isReady) {
+		return null; // Prevents rendering the wrong section before isMobile is determined
+	}
+
+	if (isMobile) {
+		return (
+			<div
+				className={`p-4 flex flex-row gap-2 ${isReady ? "animate-fadeIn" : ""}`}
+			>
+				<Select
+					key={selected}
+					onValueChange={(value) => {
+						setSelected(value);
+						updateQueryParams(value);
+					}}
+					value={selected}
+				>
+					<SelectTrigger>
+						<SelectValue placeholder="Sélectionner une catégorie" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectGroup>
+							<SelectLabel>Catégories</SelectLabel>
+							{categories.map((c) => (
+								<SelectItem key={c.category} value={c.category}>
+									{c.category}
+								</SelectItem>
+							))}
+						</SelectGroup>
+					</SelectContent>
+				</Select>
+				{selected && (
+					<Button
+						onClick={() => {
+							setSelected(undefined);
+							updateQueryParams(selected);
+						}}
+					>
+						<CircleXIcon />
+					</Button>
+				)}
+			</div>
+		);
+	}
+
+	return (
+		<div
+			className={`flex gap-2 flex-col p-5 lg:p-8 w-1/5 border-r ${isReady ? "animate-fadeIn" : ""}`}
+		>
+			<h2>Catégories</h2>
+			{categories.map((cat) => (
+				<Button
+					className={`w-full flex justify-between ${
+						selectedCategory === cat.category
+							? "bg-blue-500 text-white"
+							: ""
+					}`}
+					key={cat.category}
+					variant="secondary"
+					onClick={() => updateQueryParams(cat.category)}
+				>
+					<span>{cat.category}</span>
+					<span>{cat.count}</span>
+				</Button>
+			))}
+		</div>
+	);
+}

frontend/app/(main)/blogs/no-blogs.tsx

@@ -0,0 +1,27 @@
+"use client";
+import { Button } from "@/components/ui/button"; // You can use your button component from your UI library
+import { Card } from "@/components/ui/card";
+import { CircleXIcon, RotateCwIcon } from "lucide-react"; // Optional icon
+
+export default function NoBlogs() {
+	return (
+		<div className="flex justify-center items-center p-8">
+			<Card className="w-full md:w-96 p-6 bg-transparent border-transparent shadow-none text-center flex flex-col">
+				<h3 className="text-xl font-semibold mb-4">
+					Aucun blog trouvé.
+				</h3>
+				<p className="text-gray-500 mb-6">
+					Nous n'avons pu trouver aucun blog.
+				</p>
+				<Button
+					variant="outline"
+					className="flex items-center justify-center gap-2"
+					onClick={() => window.location.reload()}
+				>
+					<RotateCwIcon className="h-4 w-4" />
+					Réessayer
+				</Button>
+			</Card>
+		</div>
+	);
+}

frontend/app/(main)/blogs/page.tsx

@@ -1,9 +1,34 @@
-import Blog from "@/components/blog";
+"use server";
+import Blogs from "@/components/blog";
+import request from "@/lib/request";
+import { Blog } from "@/types/types";
+import Categories from "./categories";
+import NoBlogs from "./no-blogs";
+
+export default async function History({
+	searchParams,
+}: {
+	searchParams: Promise<{ category?: string }>;
+}) {
+	const { category } = await searchParams;
+	let url = "/blogs";
+	if (category) url += `?category=${category}`;
+	const blogs = await request<Blog[]>(url, {
+		requiresAuth: false,
+	});
+
+	if (!blogs.data || blogs.data.length < 1) {
+		return <NoBlogs />;
+	}
+
+	if (blogs?.status === "Error") {
+		return <p>Un problème est survenue.</p>;
+	}
 
-export default function History() {
 	return (
-		<div className="flex flex-col">
-			<Blog />
+		<div className="flex flex-col md:flex-row">
+			<Categories selectedCategory={category} />
+			<Blogs blogs={blogs.data} />
 		</div>
 	);
 }

frontend/app/globals.css

@@ -77,3 +77,12 @@ body {
 		@apply text-4xl font-bold;
 	}
 }
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

frontend/components/article.tsx

@@ -10,7 +10,9 @@ const BlogArticle: React.FC<{ blog: Blog }> = ({ blog }) => {
 			<div className="space-y-6">
 				<div className="space-y-2">
 					<div className="flex items-center gap-2">
+						{blog.category && (
 							<Badge variant="secondary">{blog.category}</Badge>
+						)}
 						<time className="flex items-center text-sm text-muted-foreground">
 							<CalendarIcon className="mr-1 h-4 w-4" />
 							{new Date(blog.published).toLocaleString()}
@@ -57,7 +59,10 @@ const BlogArticle: React.FC<{ blog: Blog }> = ({ blog }) => {
 					/>
 				</div>
 
-				<div dangerouslySetInnerHTML={{ __html: blog.content }} />
+				<div
+					className="prose prose-lg prose-slate dark:prose-invert"
+					dangerouslySetInnerHTML={{ __html: blog.content }}
+				/>
 			</div>
 		</article>
 	);

frontend/components/blog-card.tsx

@@ -0,0 +1,39 @@
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Blog } from "@/types/types";
+import { ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "./ui/badge";
+
+export function BlogCard({ blog }: { blog: Blog }) {
+	return (
+		<Card className="overflow-hidden border border-border rounded-xl">
+			<Link href={`/blogs/${blog.slug}`} className="block">
+				<img
+					src={blog.image}
+					alt={blog.title}
+					className="aspect-[16/9] w-full object-cover object-center"
+				/>
+			</Link>
+			<CardContent className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
+				<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+					{blog.title}
+				</h3>
+				<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
+					{blog.summary}
+				</p>
+				<Link
+					href={`/blogs/${blog.slug}`}
+					className="flex items-center hover:underline"
+				>
+					En savoir plus
+					<ArrowRight className="ml-2 size-4" />
+				</Link>
+			</CardContent>
+			{blog.category && (
+				<CardFooter>
+					<Badge>{blog.category}</Badge>
+				</CardFooter>
+			)}
+		</Card>
+	);
+}

frontend/components/blog.tsx

@@ -1,72 +1,14 @@
-import { ArrowRight, ArrowDown } from "lucide-react";
+import { ArrowDown } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { Blog } from "@/types/types";
+import { BlogCard } from "./blog-card";
 
-export interface BlogInterface {
-	id: string;
-	slug: string;
-	title: string;
-	content: string;
-	label: string;
-	author: string;
-	published: string;
-}
-
-export interface BlogSummaryInterface extends BlogInterface {
-	summary: string;
-	image: string;
-	href: string;
-}
-
-export const posts: BlogSummaryInterface[] = [
-	{
-		id: "a1b2c3d4-e5f6-7g8h-9i0j-k1l2m3n4o5p6",
-		slug: "tech-advancements-2025",
-		title: "Tech Advancements in 2025",
-		content:
-			"The year 2025 promises groundbreaking technologies that will reshape industries. In this article, we explore the key advancements that could transform how we work, live, and communicate.",
-		label: "Technology",
-		author: "d3f5e6g7-h8i9j0k1-l2m3n4o5p6q7",
-		published: "2025-01-14",
-		summary:
-			"A look at the tech trends to expect in 2025 and beyond, from AI to quantum computing.",
-		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-		href: "history/tech-advancements-2025",
-	},
-	{
-		id: "f7g8h9i0-j1k2l3m4-n5o6p7q8r9s0t1u2v3",
-		slug: "sustainable-fashion-2025",
-		title: "Sustainable Fashion in 2025",
-		content:
-			"Sustainability is no longer a trend, but a movement within the fashion industry. This article discusses how eco-friendly practices are influencing fashion designs and consumer behavior in 2025.",
-		label: "Fashion",
-		author: "w4x5y6z7-a8b9c0d1-e2f3g4h5i6j7",
-		published: "2025-01-12",
-		summary:
-			"Exploring how sustainable fashion is evolving in 2025 with innovative materials and ethical brands.",
-		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-		href: "history/sustainable-fashion-2025",
-	},
-	{
-		id: "v1w2x3y4-z5a6b7c8-d9e0f1g2h3i4j5k6l7",
-		slug: "mental-health-awareness-2025",
-		title: "Mental Health Awareness in 2025",
-		content:
-			"As mental health awareness continues to grow, 2025 brings new challenges and opportunities to address psychological well-being. This article focuses on emerging trends in mental health support and public perception.",
-		label: "Health",
-		author: "m8n9o0p1-q2r3s4t5-u6v7w8x9y0z1a2b3",
-		published: "2025-01-10",
-		summary:
-			"Highlighting the importance of mental health awareness in 2025, focusing on new treatments and societal changes.",
-		image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-		href: "/history/mental-health-awareness-2025",
-	},
-];
-
-const Blog = () => {
+const Blogs: React.FC<{ blogs: Blog[] }> = ({ blogs }) => {
 	return (
-		<section className="self-center lg:md:py-24 sm:py-12">
-			<div className="container flex flex-col items-center gap-16 lg:px-16">
+		<section className="self-center lg:md:py-24 py-12 md:px-16 px-4 mx-auto">
+			<div className="container flex flex-col items-center gap-16 ">
+				{/*
 				<div className="text-center">
 					<h2 className="mb-3 text-pretty text-3xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl">
 						En savoir plus sur ce sport
@@ -76,34 +18,10 @@ const Blog = () => {
 						Elig doloremque mollitia fugiat omnis! Porro facilis quo
 						animi consequatur. Explicabo.
 					</p>
-				</div>
+				</div> */}
 				<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
-					{posts.map((post) => (
-						<a
-							key={post.id}
-							href={post.href}
-							className="flex flex-col overflow-clip rounded-xl border border-border"
-						>
-							<div>
-								<img
-									src={post.image}
-									alt={post.title}
-									className="aspect-[16/9] h-full w-full object-cover object-center"
-								/>
-							</div>
-							<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
-								<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
-									{post.title}
-								</h3>
-								<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
-									{post.summary}
-								</p>
-								<p className="flex items-center hover:underline">
-									Read more
-									<ArrowRight className="ml-2 size-4" />
-								</p>
-							</div>
-						</a>
+					{blogs.map((blog) => (
+						<BlogCard key={blog.blogID} blog={blog} />
 					))}
 				</div>
 				<Button variant="link" className="w-full sm:w-auto">
@@ -115,4 +33,4 @@ const Blog = () => {
 	);
 };
 
-export default Blog;
+export default Blogs;

frontend/components/blogItem.tsx

@@ -1,78 +0,0 @@
-import { Blog } from "@/types/types";
-
-export interface BlogItemParams {
-	title_style: string;
-	subtitle_style: string;
-	p_style: string;
-	default_img: string;
-	blog: Blog;
-}
-
-export default function BlogItem({ params }: { params: BlogItemParams }) {
-	const blog: Blog = params.blog
-	return (
-		<main className="flex flex-col w-full lg:md:py-24 sm:py-24">
-			<section className="container self-center max-w-2xl">
-				<div className="blog-title w-full h-28 justify-center">
-					<h1 className="mb-3 text-pretty text-3xl font-semibold lg:text-5xl">
-						{blog.slug}
-					</h1>
-				</div>
-				<div className="content">
-					{/* blog.content here will be transformed from markdown to actual code */}
-					<div>
-						<h2 className={params.subtitle_style}>Subtitle 1</h2>
-						<p className={params.p_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-					</div>
-					<div>
-						<img
-							src={params.default_img}
-							alt={blog.slug}
-							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
-						/>
-					</div>
-					<div>
-						<h2 className={params.subtitle_style}>Subtitle 2</h2>
-						<p className={params.p_style}>
-							Lorem ipsm dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-					</div>
-					<div>
-						<img
-							src={params.default_img}
-							alt={blog.slug}
-							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
-						/>
-					</div>
-					<div>
-						<h2 className={params.subtitle_style}>Subtitle 3</h2>
-						<p className={params.p_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-						<p className={params.p_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-					</div>
-				</div>
-			</section>
-		</main>
-	);
-}

frontend/components/ui/combobox.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import * as React from "react";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/components/ui/command";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { useState } from "react";
+
+interface ComboBoxProps<T> {
+	elements: T[];
+	trigger: (value?: string) => React.ReactNode;
+	onSubmit?: (value: string) => void;
+	value: string;
+	setValue: React.Dispatch<React.SetStateAction<string>>;
+	children: (
+		ItemComponent: (
+			props: React.ComponentProps<typeof CommandItem> & { label: string },
+		) => React.JSX.Element,
+		element: T,
+	) => React.ReactNode;
+}
+
+const ComboBox = <T,>({
+	elements,
+	trigger,
+	children,
+	onSubmit,
+	value,
+	setValue,
+}: ComboBoxProps<T>) => {
+	const [open, setOpen] = useState(false);
+	const [searchValue, setSearchValue] = useState("");
+
+	const handleSubmit = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key !== "Enter") return;
+		e.preventDefault();
+		setValue(searchValue);
+		onSubmit?.(searchValue);
+	};
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				{trigger(value.length > 0 ? value : undefined)}
+			</PopoverTrigger>
+			<PopoverContent className="w-[200px] p-0">
+				<Command>
+					<CommandInput
+						onKeyDown={handleSubmit}
+						onInput={(e) =>
+							setSearchValue((e.target as HTMLInputElement).value)
+						}
+						placeholder="Search framework..."
+					/>
+					<CommandList>
+						<CommandEmpty>
+							Créer une nouvelle catégorie
+						</CommandEmpty>
+						<CommandGroup>
+							{elements.map((element, index) =>
+								children(
+									({
+										value: elementValue,
+										label,
+										onSelect,
+										...props
+									}) => (
+										<CommandItem
+											key={index}
+											value={elementValue ?? ""}
+											onSelect={(_value) => {
+												setValue(_value);
+												console.log(elementValue);
+												setOpen(false);
+												onSelect?.(_value);
+											}}
+											{...props}
+										>
+											{label}
+											<Check
+												className={cn(
+													"mr-2 h-4 w-4",
+													value === elementValue
+														? "opacity-100"
+														: "opacity-0",
+												)}
+											/>
+										</CommandItem>
+									),
+									element,
+								),
+							)}
+						</CommandGroup>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+};
+
+export default ComboBox;

frontend/components/ui/command.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0 shadow-lg">
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+const CommandInput = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<CommandPrimitive.Input
+			ref={ref}
+			className={cn(
+				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn(
+			"max-h-[300px] overflow-y-auto overflow-x-hidden",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm"
+		{...props}
+	/>
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 h-px bg-border", className)}
+		{...props}
+	/>
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+	React.ComponentRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};

frontend/package-lock.json

@@ -20,7 +20,7 @@
 				"@radix-ui/react-popover": "^1.1.4",
 				"@radix-ui/react-scroll-area": "^1.2.2",
 				"@radix-ui/react-select": "^2.1.4",
-				"@radix-ui/react-separator": "^1.1.1",
+				"@radix-ui/react-separator": "^1.1.2",
 				"@radix-ui/react-slot": "^1.1.2",
 				"@radix-ui/react-switch": "^1.1.2",
 				"@radix-ui/react-tabs": "^1.1.2",
@@ -47,6 +47,7 @@
 				"@tiptap/starter-kit": "^2.11.5",
 				"class-variance-authority": "^0.7.1",
 				"clsx": "^2.1.1",
+				"cmdk": "^1.0.4",
 				"cookies-next": "^5.1.0",
 				"date-fns": "^3.6.0",
 				"embla-carousel-react": "^8.5.2",
@@ -3760,6 +3761,22 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/cmdk": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.4.tgz",
+			"integrity": "sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-dialog": "^1.1.2",
+				"@radix-ui/react-id": "^1.1.0",
+				"@radix-ui/react-primitive": "^2.0.0",
+				"use-sync-external-store": "^1.2.2"
+			},
+			"peerDependencies": {
+				"react": "^18 || ^19 || ^19.0.0-rc",
+				"react-dom": "^18 || ^19 || ^19.0.0-rc"
+			}
+		},
 		"node_modules/color": {
 			"version": "4.2.3",
 			"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",

frontend/package.json

@@ -21,7 +21,7 @@
 		"@radix-ui/react-popover": "^1.1.4",
 		"@radix-ui/react-scroll-area": "^1.2.2",
 		"@radix-ui/react-select": "^2.1.4",
-		"@radix-ui/react-separator": "^1.1.1",
+		"@radix-ui/react-separator": "^1.1.2",
 		"@radix-ui/react-slot": "^1.1.2",
 		"@radix-ui/react-switch": "^1.1.2",
 		"@radix-ui/react-tabs": "^1.1.2",
@@ -48,6 +48,7 @@
 		"@tiptap/starter-kit": "^2.11.5",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
+		"cmdk": "^1.0.4",
 		"cookies-next": "^5.1.0",
 		"date-fns": "^3.6.0",
 		"embla-carousel-react": "^8.5.2",

frontend/tailwind.config.ts

@@ -88,10 +88,15 @@ export default {
 						height: "0",
 					},
 				},
+				fadeIn: {
+					from: { opacity: "0" },
+					to: { opacity: "1" },
+				},
 			},
 			animation: {
 				"accordion-down": "accordion-down 0.2s ease-out",
 				"accordion-up": "accordion-up 0.2s ease-out",
+				fadeIn: "fadeIn 0.5s ease-in-out forwards",
 			},
 		},
 	},

frontend/types/types.tsx

@@ -34,6 +34,11 @@ export interface Blog {
 	author: User; // Relation to User
 }
 
+export interface Category {
+	category: string;
+	count: number;
+}
+
 export type NewBlog = Omit<
 	Blog,
 	"blogID" | "authorID" | "author" | "published"