From dfe49b5882df043c2f445a82b0e628257f33f76a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 7 Mar 2026 11:19:50 +0100
Subject: [PATCH] feat: allow users to delete their own comments on videos

Shows a delete button on each comment for the comment author and admins.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 packages/frontend/src/lib/i18n/locales/en.ts  |  2 ++
 .../src/routes/videos/[slug]/+page.svelte     | 32 +++++++++++--------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/frontend/src/lib/i18n/locales/en.ts b/packages/frontend/src/lib/i18n/locales/en.ts
index 863e99b..58694db 100644
--- a/packages/frontend/src/lib/i18n/locales/en.ts
+++ b/packages/frontend/src/lib/i18n/locales/en.ts
@@ -303,6 +303,8 @@ export default {
     show: "Show",
     add_comment_placeholder: "Add a comment...",
     toast_comment: "Your comment has been sent",
+    comment_deleted: "Comment deleted",
+    comment_delete_error: "Failed to delete comment",
     comment: "Comment",
     commenting: "Commenting...",
     error: "Heads Up!",
diff --git a/packages/frontend/src/routes/videos/[slug]/+page.svelte b/packages/frontend/src/routes/videos/[slug]/+page.svelte
index 5101a01..c68fe37 100644
--- a/packages/frontend/src/routes/videos/[slug]/+page.svelte
+++ b/packages/frontend/src/routes/videos/[slug]/+page.svelte
@@ -17,6 +17,7 @@
   import { toast } from "svelte-sonner";
   import {
     createCommentForVideo,
+    deleteComment,
     likeVideo,
     unlikeVideo,
     recordVideoPlay,
@@ -104,6 +105,16 @@
     isBookmarked = !isBookmarked;
   }
 
+  async function handleDeleteComment(id: number) {
+    try {
+      await deleteComment(id);
+      toast.success($_("videos.comment_deleted"));
+      invalidateAll();
+    } catch {
+      toast.error($_("videos.comment_delete_error"));
+    }
+  }
+
   async function handleComment(e: Event) {
     e.preventDefault();
     try {
@@ -459,21 +470,14 @@
                           >
                         </div>
                         <p class="text-sm mb-2">{comment.comment}</p>
-                        <div class="flex items-center gap-4 text-xs text-muted-foreground">
-                          <!-- <button
-                            class="flex items-center gap-1 hover:text-primary transition-colors"
+                        {#if data.authStatus.user?.id === comment.user_id || data.authStatus.user?.is_admin}
+                          <button
+                            class="text-xs text-muted-foreground hover:text-destructive transition-colors"
+                            onclick={() => handleDeleteComment(comment.id)}
                           >
-                            <ThumbsUpIcon class="w-3 h-3" />
-                            {comment.likes}
-                          </button> -->
-                          <!-- {#if comment.replies > 0}
-                            <button
-                              class="hover:text-primary transition-colors"
-                            >
-                              {comment.replies} replies
-                            </button>
-                          {/if} -->
-                        </div>
+                            {$_("common.delete")}
+                          </button>
+                        {/if}
                       </div>
                     </div>
                   {/each}