chore: bump version to 1.4.0

- Fixed inconsistent indentation in `content-card` component.
- Enhanced code readability by restructuring JSX elements properly.

backend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@memegoat/backend",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"description": "",
 	"author": "",
 	"private": true,

backend/src/contents/contents.controller.ts

@@ -174,6 +174,16 @@ export class ContentsController {
 		return this.contentsService.incrementUsage(id);
 	}
 
+	@Patch(":id")
+	@UseGuards(AuthGuard)
+	update(
+		@Param("id") id: string,
+		@Req() req: AuthenticatedRequest,
+		@Body() updateContentDto: any,
+	) {
+		return this.contentsService.update(id, req.user.sub, updateContentDto);
+	}
+
 	@Delete(":id")
 	@UseGuards(AuthGuard)
 	remove(@Param("id") id: string, @Req() req: AuthenticatedRequest) {

backend/src/contents/contents.service.ts

@@ -194,6 +194,25 @@ export class ContentsService {
 		return updated;
 	}
 
+	async update(id: string, userId: string, data: any) {
+		this.logger.log(`Updating content ${id} for user ${userId}`);
+
+		// Vérifier que le contenu appartient à l'utilisateur
+		const existing = await this.contentsRepository.findOne(id, userId);
+		if (!existing || existing.userId !== userId) {
+			throw new BadRequestException(
+				"Contenu non trouvé ou vous n'avez pas la permission de le modifier.",
+			);
+		}
+
+		const updated = await this.contentsRepository.update(id, data);
+
+		if (updated) {
+			await this.clearContentsCache();
+		}
+		return updated;
+	}
+
 	async findOne(idOrSlug: string, userId?: string) {
 		const content = await this.contentsRepository.findOne(idOrSlug, userId);
 		if (!content) return null;

frontend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@memegoat/frontend",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",

frontend/src/components/content-card.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Eye, Heart, MoreHorizontal, Share2 } from "lucide-react";
+import { Edit, Eye, Heart, MoreHorizontal, Share2, Trash2 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -15,20 +15,31 @@ import {
 	CardFooter,
 	CardHeader,
 } from "@/components/ui/card";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { useAuth } from "@/providers/auth-provider";
 import { ContentService } from "@/services/content.service";
 import { FavoriteService } from "@/services/favorite.service";
 import type { Content } from "@/types/content";
+import { UserContentEditDialog } from "./user-content-edit-dialog";
 
 interface ContentCardProps {
 	content: Content;
+	onUpdate?: () => void;
 }
 
-export function ContentCard({ content }: ContentCardProps) {
-	const { isAuthenticated } = useAuth();
+export function ContentCard({ content, onUpdate }: ContentCardProps) {
+	const { isAuthenticated, user } = useAuth();
 	const router = useRouter();
 	const [isLiked, setIsLiked] = React.useState(content.isLiked || false);
 	const [likesCount, setLikesCount] = React.useState(content.favoritesCount);
+	const [editDialogOpen, setEditDialogOpen] = React.useState(false);
+
+	const isAuthor = user?.uuid === content.authorId;
 
 	React.useEffect(() => {
 		setIsLiked(content.isLiked || false);
@@ -71,95 +82,145 @@ export function ContentCard({ content }: ContentCardProps) {
 		}
 	};
 
-	return (
-		<Card className="overflow-hidden border-none shadow-sm hover:shadow-md transition-shadow">
-			<CardHeader className="p-4 flex flex-row items-center space-y-0 gap-3">
-				<Avatar className="h-8 w-8">
-					<AvatarImage src={content.author.avatarUrl} />
-					<AvatarFallback>{content.author.username[0].toUpperCase()}</AvatarFallback>
-				</Avatar>
-				<div className="flex flex-col">
-					<Link
-						href={`/user/${content.author.username}`}
-						className="text-sm font-semibold hover:underline"
-					>
-						{content.author.displayName || content.author.username}
-					</Link>
-					<span className="text-xs text-muted-foreground">
-						{new Date(content.createdAt).toLocaleDateString("fr-FR")}
-					</span>
-				</div>
-				<Button variant="ghost" size="icon" className="ml-auto h-8 w-8">
-					<MoreHorizontal className="h-4 w-4" />
-				</Button>
-			</CardHeader>
-			<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square flex items-center justify-center">
-				<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
-					{content.mimeType.startsWith("image/") ? (
-						<Image
-							src={content.url}
-							alt={content.title}
-							fill
-							className="object-contain"
-							sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-						/>
-					) : (
-						<video
-							src={content.url}
-							controls={false}
-							autoPlay
-							muted
-							loop
-							className="w-full h-full object-contain"
-						/>
-					)}
-				</Link>
-			</CardContent>
-			<CardFooter className="p-4 flex flex-col gap-4">
-				<div className="w-full flex items-center justify-between">
-					<div className="flex items-center gap-2">
-						<Button
-							variant="ghost"
-							size="sm"
-							className={`gap-1.5 h-8 ${isLiked ? "text-red-500 hover:text-red-600" : ""}`}
-							onClick={handleLike}
-						>
-							<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
-							<span className="text-xs">{likesCount}</span>
-						</Button>
-						<Button variant="ghost" size="sm" className="gap-1.5 h-8">
-							<Eye className="h-4 w-4" />
-							<span className="text-xs">{content.views}</span>
-						</Button>
-						<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-							<Share2 className="h-4 w-4" />
-						</Button>
-					</div>
-					<Button
-						size="sm"
-						variant="secondary"
-						className="text-xs h-8"
-						onClick={handleUse}
-					>
-						Utiliser
-					</Button>
-				</div>
+	const handleDelete = async () => {
+		if (!confirm("Êtes-vous sûr de vouloir supprimer ce mème ?")) return;
 
-				<div className="w-full space-y-2">
-					<h3 className="font-medium text-sm line-clamp-2">{content.title}</h3>
-					<div className="flex flex-wrap gap-1">
-						{content.tags.slice(0, 3).map((tag, _i) => (
-							<Badge
-								key={typeof tag === "string" ? tag : tag.id}
-								variant="secondary"
-								className="text-[10px] py-0 px-1.5"
-							>
-								#{typeof tag === "string" ? tag : tag.name}
-							</Badge>
-						))}
+		try {
+			await ContentService.remove(content.id);
+			toast.success("Mème supprimé !");
+			onUpdate?.();
+		} catch (_error) {
+			toast.error("Erreur lors de la suppression.");
+		}
+	};
+
+	return (
+		<>
+			<Card className="overflow-hidden border-none shadow-sm hover:shadow-md transition-shadow">
+				<CardHeader className="p-4 flex flex-row items-center space-y-0 gap-3">
+					<Avatar className="h-8 w-8">
+						<AvatarImage src={content.author.avatarUrl} />
+						<AvatarFallback>
+							{content.author.username[0].toUpperCase()}
+						</AvatarFallback>
+					</Avatar>
+					<div className="flex flex-col">
+						<Link
+							href={`/user/${content.author.username}`}
+							className="text-sm font-semibold hover:underline"
+						>
+							{content.author.displayName || content.author.username}
+						</Link>
+						<span className="text-xs text-muted-foreground">
+							{new Date(content.createdAt).toLocaleDateString("fr-FR")}
+						</span>
 					</div>
-				</div>
-			</CardFooter>
-		</Card>
+
+					<div className="ml-auto flex items-center gap-1">
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button variant="ghost" size="icon" className="h-8 w-8">
+									<MoreHorizontal className="h-4 w-4" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end">
+								{isAuthor && (
+									<>
+										<DropdownMenuItem onClick={() => setEditDialogOpen(true)}>
+											<Edit className="h-4 w-4 mr-2" />
+											Modifier
+										</DropdownMenuItem>
+										<DropdownMenuItem
+											onClick={handleDelete}
+											className="text-destructive focus:text-destructive"
+										>
+											<Trash2 className="h-4 w-4 mr-2" />
+											Supprimer
+										</DropdownMenuItem>
+									</>
+								)}
+								<DropdownMenuItem onClick={() => toast.success("Lien copié !")}>
+									<Share2 className="h-4 w-4 mr-2" />
+									Partager
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</div>
+				</CardHeader>
+				<CardContent className="p-0 relative bg-zinc-200 dark:bg-zinc-900 aspect-square flex items-center justify-center">
+					<Link href={`/meme/${content.slug}`} className="w-full h-full relative">
+						{content.mimeType.startsWith("image/") ? (
+							<Image
+								src={content.url}
+								alt={content.title}
+								fill
+								className="object-contain"
+								sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+							/>
+						) : (
+							<video
+								src={content.url}
+								controls={false}
+								autoPlay
+								muted
+								loop
+								className="w-full h-full object-contain"
+							/>
+						)}
+					</Link>
+				</CardContent>
+				<CardFooter className="p-4 flex flex-col gap-4">
+					<div className="w-full flex items-center justify-between">
+						<div className="flex items-center gap-2">
+							<Button
+								variant="ghost"
+								size="sm"
+								className={`gap-1.5 h-8 ${isLiked ? "text-red-500 hover:text-red-600" : ""}`}
+								onClick={handleLike}
+							>
+								<Heart className={`h-4 w-4 ${isLiked ? "fill-current" : ""}`} />
+								<span className="text-xs">{likesCount}</span>
+							</Button>
+							<Button variant="ghost" size="sm" className="gap-1.5 h-8">
+								<Eye className="h-4 w-4" />
+								<span className="text-xs">{content.views}</span>
+							</Button>
+							<Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+								<Share2 className="h-4 w-4" />
+							</Button>
+						</div>
+						<Button
+							size="sm"
+							variant="secondary"
+							className="text-xs h-8"
+							onClick={handleUse}
+						>
+							Utiliser
+						</Button>
+					</div>
+
+					<div className="w-full space-y-2">
+						<h3 className="font-medium text-sm line-clamp-2">{content.title}</h3>
+						<div className="flex flex-wrap gap-1">
+							{content.tags.slice(0, 3).map((tag, _i) => (
+								<Badge
+									key={typeof tag === "string" ? tag : tag.id}
+									variant="secondary"
+									className="text-[10px] py-0 px-1.5"
+								>
+									#{typeof tag === "string" ? tag : tag.name}
+								</Badge>
+							))}
+						</div>
+					</div>
+				</CardFooter>
+			</Card>
+			<UserContentEditDialog
+				content={content}
+				open={editDialogOpen}
+				onOpenChange={setEditDialogOpen}
+				onSuccess={() => onUpdate?.()}
+			/>
+		</>
 	);
 }

frontend/src/components/content-list.tsx

@@ -20,6 +20,27 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 	const [offset, setOffset] = React.useState(0);
 	const [hasMore, setHasMore] = React.useState(true);
 
+	const fetchInitial = React.useCallback(async () => {
+		setLoading(true);
+		try {
+			const response = await fetchFn({
+				limit: 10,
+				offset: 0,
+			});
+			setContents(response.data);
+			setOffset(0);
+			setHasMore(response.data.length === 10);
+		} catch (error) {
+			console.error("Failed to fetch contents:", error);
+		} finally {
+			setLoading(false);
+		}
+	}, [fetchFn]);
+
+	React.useEffect(() => {
+		fetchInitial();
+	}, [fetchInitial]);
+
 	const loadMore = React.useCallback(async () => {
 		if (!hasMore || loading) return;
 
@@ -46,32 +67,12 @@ export function ContentList({ fetchFn, title }: ContentListProps) {
 		onLoadMore: loadMore,
 	});
 
-	React.useEffect(() => {
-		const fetchInitial = async () => {
-			setLoading(true);
-			try {
-				const response = await fetchFn({
-					limit: 10,
-					offset: 0,
-				});
-				setContents(response.data);
-				setHasMore(response.data.length === 10);
-			} catch (error) {
-				console.error("Failed to fetch contents:", error);
-			} finally {
-				setLoading(false);
-			}
-		};
-
-		fetchInitial();
-	}, [fetchFn]);
-
 	return (
 		<div className="max-w-2xl mx-auto py-8 px-4 space-y-8">
 			{title && <h1 className="text-2xl font-bold">{title}</h1>}
 			<div className="flex flex-col gap-6">
 				{contents.map((content) => (
-					<ContentCard key={content.id} content={content} />
+					<ContentCard key={content.id} content={content} onUpdate={fetchInitial} />
 				))}
 			</div>
 

frontend/src/components/user-content-edit-dialog.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { CategoryService } from "@/services/category.service";
+import { ContentService } from "@/services/content.service";
+import type { Category, Content } from "@/types/content";
+
+interface UserContentEditDialogProps {
+	content: Content | null;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onSuccess: () => void;
+}
+
+export function UserContentEditDialog({
+	content,
+	open,
+	onOpenChange,
+	onSuccess,
+}: UserContentEditDialogProps) {
+	const [loading, setLoading] = useState(false);
+	const [categories, setCategories] = useState<Category[]>([]);
+
+	const form = useForm<{ title: string; categoryId: string }>({
+		defaultValues: {
+			title: "",
+			categoryId: "",
+		},
+	});
+
+	useEffect(() => {
+		CategoryService.getAll().then(setCategories).catch(console.error);
+	}, []);
+
+	useEffect(() => {
+		if (content) {
+			form.reset({
+				title: content.title,
+				categoryId: content.categoryId || "none",
+			});
+		}
+	}, [content, form]);
+
+	const onSubmit = async (values: { title: string; categoryId: string }) => {
+		if (!content) return;
+		setLoading(true);
+		try {
+			const data = {
+				...values,
+				categoryId: values.categoryId === "none" ? null : values.categoryId,
+			};
+			await ContentService.update(content.id, data);
+			toast.success("Mème mis à jour !");
+			onSuccess();
+			onOpenChange(false);
+		} catch (error) {
+			console.error(error);
+			toast.error("Erreur lors de la mise à jour.");
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Modifier mon mème</DialogTitle>
+				</DialogHeader>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+						<FormField
+							control={form.control}
+							name="title"
+							rules={{ required: "Le titre est requis" }}
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Titre</FormLabel>
+									<FormControl>
+										<Input {...field} placeholder="Titre du mème" />
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<FormField
+							control={form.control}
+							name="categoryId"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Catégorie</FormLabel>
+									<Select
+										onValueChange={field.onChange}
+										defaultValue={field.value}
+										value={field.value}
+									>
+										<FormControl>
+											<SelectTrigger>
+												<SelectValue placeholder="Sélectionner une catégorie" />
+											</SelectTrigger>
+										</FormControl>
+										<SelectContent>
+											<SelectItem value="none">Sans catégorie</SelectItem>
+											{categories.map((cat) => (
+												<SelectItem key={cat.id} value={cat.id}>
+													{cat.name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+						<DialogFooter>
+							<Button
+								type="button"
+								variant="outline"
+								onClick={() => onOpenChange(false)}
+							>
+								Annuler
+							</Button>
+							<Button type="submit" disabled={loading}>
+								{loading ? "Enregistrement..." : "Enregistrer"}
+							</Button>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+}

frontend/src/services/content.service.ts

@@ -66,6 +66,15 @@ export const ContentService = {
 		await api.delete(`/contents/${id}/admin`);
 	},
 
+	async update(id: string, update: Partial<Content>): Promise<Content> {
+		const { data } = await api.patch<Content>(`/contents/${id}`, update);
+		return data;
+	},
+
+	async remove(id: string): Promise<void> {
+		await api.delete(`/contents/${id}`);
+	},
+
 	async updateAdmin(id: string, update: Partial<Content>): Promise<Content> {
 		const { data } = await api.patch<Content>(`/contents/${id}/admin`, update);
 		return data;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memegoat/source",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "",
   "scripts": {
     "version:get": "cmake -P version.cmake GET",