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

@@ -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!",

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">
+                        {#if data.authStatus.user?.id === comment.user_id || data.authStatus.user?.is_admin}
-                          <!-- <button
+                          <button
-                            class="flex items-center gap-1 hover:text-primary transition-colors"
+                            class="text-xs text-muted-foreground hover:text-destructive transition-colors"
+                            onclick={() => handleDeleteComment(comment.id)}
                           >
-                            <ThumbsUpIcon class="w-3 h-3" />
+                            {$_("common.delete")}
-                            {comment.likes}
+                          </button>
-                          </button> -->
+                        {/if}
-                          <!-- {#if comment.replies > 0}
-                            <button
-                              class="hover:text-primary transition-colors"
-                            >
-                              {comment.replies} replies
-                            </button>
-                          {/if} -->
-                        </div>
                       </div>
                     </div>
                   {/each}