feat: hide input after commenting

src/components/common/CommentInput.tsx

@@ -16,7 +16,8 @@ import { useTranslation } from "next-i18next"
 export const CommentInput: React.FC<{
   pageId?: string
   originalId?: string
-}> = ({ pageId, originalId }) => {
+  onSubmitted?: () => void
+}> = ({ pageId, originalId, onSubmitted }) => {
   const account = useAccountState((s) => s.computed.account)
   const userSites = useAccountSites()
   const commentPage = useCommentPage()
@@ -50,8 +51,9 @@ export const CommentInput: React.FC<{
   useEffect(() => {
     if (commentPage.isSuccess) {
       form.reset()
+      onSubmitted?.()
     }
-  }, [commentPage.isSuccess, form])
+  }, [commentPage.isSuccess, form, onSubmitted])
 
   return (
     <div className="xlog-comment-input flex">

src/components/common/CommentItem.tsx

@@ -24,11 +24,12 @@ export const CommentItem: React.FC<{
   const { t } = useTranslation("common")
   const date = useDate()
 
+  if (!comment.metadata?.content?.content) {
+    return null
+  }
+
   return (
-    <div
-      key={comment.transactionHash}
-      className={depth > 0 ? "" : "border-b border-dashed pb-6"}
-    >
+    <div className={depth > 0 ? "" : "border-b border-dashed pb-6"}>
       <div className="flex group">
         <div>
           <CharacterFloatCard siteId={comment?.character?.handle}>
@@ -107,6 +108,7 @@ export const CommentItem: React.FC<{
               <CommentInput
                 originalId={originalId}
                 pageId={`${comment.characterId}-${comment.noteId}`}
+                onSubmitted={() => setReplyOpen(false)}
               />
             </div>
           )}