feat: support comment deletion

src/components/common/CommentItem.tsx

@@ -1,12 +1,14 @@
 "use client"
 
 import type { CharacterEntity, NoteEntity } from "crossbell"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 import { useAccountState } from "@crossbell/connect-kit"
+import { useQueryClient } from "@tanstack/react-query"
 
 import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
 import { CommentInput } from "~/components/common/CommentInput"
+import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal"
 import PageContent from "~/components/common/PageContent"
 import { ReactionLike } from "~/components/common/ReactionLike"
 import { Titles } from "~/components/common/Titles"
@@ -19,6 +21,7 @@ import { CSB_SCAN } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
 import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
+import { useDeletePage } from "~/queries/page"
 
 export const CommentItem = ({
   comment,
@@ -37,12 +40,23 @@ export const CommentItem = ({
 }) => {
   const [replyOpen, setReplyOpen] = useState(false)
   const [editOpen, setEditOpen] = useState(false)
+  const [deleteConfirmModalOpen, setDeleteConfirmModalOpen] = useState(false)
 
   const { t } = useTranslation("common")
   const date = useDate()
+  const queryClient = useQueryClient()
+  const deletePage = useDeletePage()
 
   const account = useAccountState(({ computed }) => computed.account)
 
+  useEffect(() => {
+    queryClient.refetchQueries([
+      "getComments",
+      originalCharacterId,
+      originalNoteId,
+    ])
+  }, [deletePage.isSuccess, originalCharacterId, originalNoteId, queryClient])
+
   if (!comment.metadata?.content?.content) {
     return null
   }
@@ -156,6 +170,31 @@ export const CommentItem = ({
                 {t(`${editOpen ? "Cancel " : ""}Edit`)}
               </Button>
             )}
+            {comment.characterId === account?.characterId &&
+              !(comment as any)?.fromNotes?.list?.length && (
+                <>
+                  <Button
+                    className="text-gray-500 text-[13px] mt-[-1px]"
+                    variant="text"
+                    onClick={() => setDeleteConfirmModalOpen(true)}
+                    isLoading={deletePage.isLoading}
+                  >
+                    <i className="icon-[mingcute--delete-2-line] mx-1" />{" "}
+                    {t("Delete")}
+                  </Button>
+                  <DeleteConfirmationModal
+                    open={deleteConfirmModalOpen}
+                    setOpen={setDeleteConfirmModalOpen}
+                    onConfirm={() =>
+                      deletePage.mutate({
+                        noteId: comment.noteId,
+                        characterId: comment.characterId,
+                      })
+                    }
+                    type="comment"
+                  />
+                </>
+              )}
           </div>
           {replyOpen && (
             <div className="pt-6">

src/components/common/DeleteConfirmationModal.tsx

@@ -14,7 +14,7 @@ export const DeleteConfirmationModal = ({
   onConfirm: () => void
   type?: string
 }) => {
-  const { t } = useTranslation("dashboard")
+  const { t } = useTranslation("common")
 
   return (
     <Modal open={open} setOpen={setOpen}>

src/components/dashboard/OptionsButton.tsx

@@ -3,11 +3,10 @@ import { useTranslation } from "react-i18next"
 
 import { Menu, Popover, Transition } from "@headlessui/react"
 
+import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal"
 import { NoteType, PageVisibilityEnum } from "~/lib/types"
 import { cn } from "~/lib/utils"
 
-import { DeleteConfirmationModal } from "./DeleteConfirmationModal"
-
 export const OptionsButton = ({
   visibility,
   previewPage,

src/components/dashboard/PagesManagerBatchSelectActionTab.tsx

@@ -4,14 +4,13 @@ import toast from "react-hot-toast"
 import type { InfiniteData } from "@tanstack/react-query"
 import { useQueryClient } from "@tanstack/react-query"
 
+import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal"
 import { type TabItem, Tabs } from "~/components/ui/Tabs"
 import { useTranslation } from "~/lib/i18n/client"
 import { delStorage, getStorage, setStorage } from "~/lib/storage"
 import { ExpandedNote, NoteType } from "~/lib/types"
 import { useDeletePage, useUpdatePage } from "~/queries/page"
 
-import { DeleteConfirmationModal } from "./DeleteConfirmationModal"
-
 function getPageId(page: ExpandedNote) {
   return page.noteId || page.draftKey || 0
 }

src/components/dashboard/PagesManagerMenu.tsx

@@ -5,6 +5,7 @@ import toast from "react-hot-toast"
 import { Menu } from "@headlessui/react"
 import { useQueryClient } from "@tanstack/react-query"
 
+import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal"
 import { useGetState } from "~/hooks/useGetState"
 import { getNoteSlugFromNote, getTwitterShareUrl } from "~/lib/helpers"
 import { useTranslation } from "~/lib/i18n/client"
@@ -13,8 +14,6 @@ import { ExpandedNote, NoteType } from "~/lib/types"
 import { useDeletePage, usePinPage, useUpdatePage } from "~/queries/page"
 import { useGetSite } from "~/queries/site"
 
-import { DeleteConfirmationModal } from "./DeleteConfirmationModal"
-
 const usePageEditLink = (page: ExpandedNote, type: NoteType) => {
   const params = useParams()
   const subdomain = params?.subdomain as string

src/components/dashboard/PublishButton.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useRef, useState } from "react"
 import useOnClickOutside from "use-onclickoutside"
 
+import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal"
 import { useTranslation } from "~/lib/i18n/client"
 import { NoteType } from "~/lib/types"
 
 import { Button, ButtonGroup } from "../ui/Button"
-import { DeleteConfirmationModal } from "./DeleteConfirmationModal"
 
 export const PublishButton = ({
   savePage,

src/lib/i18n/locales/zh/common.json

@@ -101,5 +101,10 @@
   "Blockchain ID": "区块链标识",
   "Confirmed by {{blockNumber}} blocks": "已被 {{blockNumber}} 个区块确认",
   "Current Block Height": "当前区块高度",
-  "Portfolio": "作品"
+  "Portfolio": "作品",
+  "Delete": "删除",
+  "delete_confirmation_post": "你确定要删除这篇文章吗？",
+  "delete_confirmation_page": "你确定要删除这个页面吗？",
+  "delete_confirmation_comment": "你确定要删除这个评论吗？",
+  "delete_confirmation_portfolio": "你确定要删除这个作品吗？"
 }

src/lib/i18n/locales/zh/dashboard.json

@@ -203,11 +203,6 @@
   "This week": "本周",
   "All time": "全部",
   "Confirm Deletion?": "确认删除？",
-  "delete_confirmation_post": "你确定要删除这篇文章吗？",
-  "delete_confirmation_page": "你确定要删除这个页面吗？",
-  "delete_confirmation_portfolio": "你确定要删除这个作品吗？",
-  "Confirm": "确认",
-  "Cancel": "取消",
   "Published a new post on my blockchain blog: {{title}}. Check it out now!": "在我的区块链博客发布了一篇新文章《{{title}}》，快来看看吧！",
   "Comments": "评论",
   "You can subscribe to comments through an RSS reader to receive timely reminders.": "你可以通过 RSS 阅读器订阅评论，以便及时收到提醒。",