Updated ads, and added delete function

Author: eldadfux

app/(main)/client-page.tsx

@@ -392,13 +392,13 @@ function RotatingAdCopy() {
       description: "Build faster with our fully managed backend platform.",
       linkUrl: "https://appwrite.io"
     },
-    {
-      logoUrl: "https://imagine.dev/favicon.png",
-      logoAlt: "Imagine Logo", 
-      title: "Imagine",
-      description: "Build faster with our fullstack vibe coding platform.",
-      linkUrl: "https://imagine.dev"
-    }
+    // {
+    //   logoUrl: "https://imagine.dev/favicon.png",
+    //   logoAlt: "Imagine Logo", 
+    //   title: "Imagine",
+    //   description: "Build faster with the fullstack vibe coding platform.",
+    //   linkUrl: "https://imagine.dev"
+    // }
   ]
 
   useEffect(() => {

app/(main)/threads/[id]/thread-client-page.tsx

@@ -6,13 +6,14 @@ import { useEffect, useState, useMemo, useCallback, memo } from "react"
 import type { NewsItem, Comment } from "@/lib/data"
 import { type VoteState } from "@/lib/types"
 import { handleVote, fetchUserVotesForResources } from "@/lib/voteHandler"
+import { deleteComment } from "@/lib/commentHandler"
 import { useAuth } from "@/contexts/auth-context"
 import { getCachedJWT } from "@/lib/jwtCache"
 import { PostCard } from "@/components/post-card"
 import { avatars } from "@/lib/appwrite"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { Clock, TrendingUp, Reply, ChevronDown, ChevronUp } from "lucide-react"
+import { Clock, TrendingUp, Reply, ChevronDown, ChevronUp, Trash2 } from "lucide-react"
 
 interface ThreadClientPageProps {
   article: NewsItem
@@ -31,6 +32,8 @@ interface CommentItemProps {
   isOriginalPoster: (commentUserId: string) => boolean
   getCommentVoteState: (commentId: string) => VoteState
   getCommentChildren: (commentId: string) => Comment[]
+  onDeleteComment?: (commentId: string) => void // Add callback for deleting comment
+  currentUserId?: string // Add current user ID for ownership check
 }
 
 const CommentItem = memo<CommentItemProps>(({ 
@@ -42,7 +45,9 @@ const CommentItem = memo<CommentItemProps>(({
   isAuthenticated,
   isOriginalPoster,
   getCommentVoteState,
-  getCommentChildren
+  getCommentChildren,
+  onDeleteComment,
+  currentUserId
 }) => {
   const canReply = depth < 2 // Allow replies up to depth 2 (3 levels total)
 
@@ -86,6 +91,7 @@ const CommentItem = memo<CommentItemProps>(({
               <span className="text-gray-500 text-xs">original poster</span>
             </>
           )}
+          <span className="text-gray-500">• {comment.timeAgo}</span>
         </div>
         <div className="text-gray-700 text-sm mb-3 whitespace-pre-wrap">{comment.text}</div>
 
@@ -100,6 +106,18 @@ const CommentItem = memo<CommentItemProps>(({
             size="sm"
           />
           <div className="text-xs text-gray-500">{comment.timeAgo}</div>
+          {/* Delete button - only show for comment owners, positioned before reply */}
+          {onDeleteComment && comment.userId && currentUserId && comment.userId === currentUserId && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-auto p-1 text-xs text-gray-500 hover:text-red-600 flex items-center gap-1"
+              onClick={() => onDeleteComment(comment.id)}
+            >
+              <Trash2 className="w-3 h-3" />
+              Delete
+            </Button>
+          )}
           {canReply && (
             <Button
               variant="ghost"
@@ -128,6 +146,8 @@ const CommentItem = memo<CommentItemProps>(({
                 isOriginalPoster={isOriginalPoster}
                 getCommentVoteState={getCommentVoteState}
                 getCommentChildren={getCommentChildren}
+                onDeleteComment={onDeleteComment}
+                currentUserId={currentUserId}
               />
             ))}
           </div>
@@ -430,6 +450,55 @@ export function ThreadClientPage({ article }: ThreadClientPageProps) {
     }
   }, [isAuthenticated, isCommentVoting, getCommentVoteState, updateCommentVoteState])
 
+  const handleDeleteComment = useCallback(async (commentId: string) => {
+    if (!isAuthenticated || !user) {
+      return
+    }
+
+    if (confirm('Are you sure you want to delete this comment? This action cannot be undone.')) {
+      try {
+        const result = await deleteComment(commentId)
+        if (result.success) {
+          // Remove the comment from the comment map
+          setCommentMap(prev => {
+            const newMap = new Map(prev)
+            newMap.delete(commentId)
+            return newMap
+          })
+          
+          // Also remove any replies to this comment
+          setCommentMap(prev => {
+            const newMap = new Map(prev)
+            const commentsToRemove: string[] = []
+            
+            // Find all replies to this comment
+            newMap.forEach((comment, id) => {
+              if (comment.parentId === commentId) {
+                commentsToRemove.push(id)
+              }
+            })
+            
+            // Remove all replies
+            commentsToRemove.forEach(id => newMap.delete(id))
+            return newMap
+          })
+          
+          // Remove vote states for deleted comments
+          setCommentVoteStates(prev => {
+            const newStates = { ...prev }
+            delete newStates[commentId]
+            return newStates
+          })
+        } else {
+          alert(`Failed to delete comment: ${result.error}`)
+        }
+      } catch (error) {
+        console.error('Error deleting comment:', error)
+        alert('Failed to delete comment')
+      }
+    }
+  }, [isAuthenticated, user])
+
   const handleSortChange = (newSortType: SortType) => {
     if (sortType === newSortType) {
       // Toggle direction if clicking the same sort type
@@ -547,6 +616,8 @@ export function ThreadClientPage({ article }: ThreadClientPageProps) {
                 isOriginalPoster={isOriginalPoster}
                 getCommentVoteState={getCommentVoteState}
                 getCommentChildren={getCommentChildren}
+                onDeleteComment={handleDeleteComment}
+                currentUserId={user?.$id}
               />
             ))}
           </div>

app/api/comments/[id]/route.ts

@@ -0,0 +1,132 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { Client, Databases, Account } from 'node-appwrite'
+
+// Initialize Appwrite clients for server-side operations
+const apiKeyClient = new Client()
+  .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || '')
+  .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '')
+  .setKey(process.env.APPWRITE_API_KEY || '')
+
+const jwtClient = new Client()
+  .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT || '')
+  .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID || '')
+
+const databases = new Databases(apiKeyClient)
+const account = new Account(jwtClient)
+
+// Database and collection IDs
+const DATABASE_ID = process.env.APPWRITE_DATABASE_ID || ''
+const COMMENTS_COLLECTION_ID = process.env.APPWRITE_COMMENTS_COLLECTION_ID || ''
+const POSTS_COLLECTION_ID = process.env.APPWRITE_POSTS_COLLECTION_ID || ''
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const commentId = params.id
+
+    if (!commentId) {
+      return NextResponse.json(
+        { error: 'Comment ID is required' },
+        { status: 400 }
+      )
+    }
+
+    // Get and validate JWT token from Authorization header
+    const authHeader = request.headers.get('authorization')
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      return NextResponse.json(
+        { error: 'Missing or invalid authorization header' },
+        { status: 401 }
+      )
+    }
+
+    const jwt = authHeader.replace('Bearer ', '')
+
+    // Use the JWT client to validate the token and get user information
+    let user
+    try {
+      jwtClient.setJWT(jwt)
+      user = await account.get()
+    } catch (error) {
+      return NextResponse.json(
+        { error: 'Invalid or expired JWT token' },
+        { status: 401 }
+      )
+    }
+
+    if (!user.$id) {
+      return NextResponse.json(
+        { error: 'Invalid user information' },
+        { status: 401 }
+      )
+    }
+
+    // Get the comment to check ownership and get postId
+    let comment
+    try {
+      comment = await databases.getDocument(
+        DATABASE_ID,
+        COMMENTS_COLLECTION_ID,
+        commentId
+      )
+    } catch (error) {
+      return NextResponse.json(
+        { error: 'Comment not found' },
+        { status: 404 }
+      )
+    }
+
+    // Check if the user owns this comment
+    if (comment.userId !== user.$id) {
+      return NextResponse.json(
+        { error: 'You can only delete your own comments' },
+        { status: 403 }
+      )
+    }
+
+    // Delete the comment
+    try {
+      await databases.deleteDocument(
+        DATABASE_ID,
+        COMMENTS_COLLECTION_ID,
+        commentId
+      )
+    } catch (error) {
+      console.error('Error deleting comment:', error)
+      return NextResponse.json(
+        { error: 'Failed to delete comment' },
+        { status: 500 }
+      )
+    }
+
+    // Decrease the comment count on the post
+    try {
+      await databases.incrementDocumentAttribute(
+        DATABASE_ID,
+        POSTS_COLLECTION_ID,
+        comment.postId,
+        'countComments',
+        -1, // decrement by 1
+        0 // minimum limit of 0
+      )
+    } catch (updateError) {
+      console.error('Error updating comment count for post:', comment.postId, updateError)
+      // Don't fail the deletion if the count update fails
+      // The comment was deleted successfully, just the count couldn't be updated
+    }
+
+    return NextResponse.json({ 
+      success: true,
+      message: 'Comment deleted successfully' 
+    })
+
+  } catch (error) {
+    console.error('Error in comment deletion:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}