From 1bccf87750ceb32c8bcc016d6a92e2cba1fee438 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 3 Jul 2024 15:36:20 +0200
Subject: [PATCH] feat(post): show edit reason as tooltip over red text

---
 src/components/post-desktop/post-desktop.tsx | 36 +++++++++-----------
 src/components/post-mobile/post-mobile.tsx   | 36 +++++++++-----------
 2 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 8f0d4e2b..7103673c 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -218,7 +218,7 @@ const PostMedia = ({ post }: PostProps) => {
 
 const PostMessage = ({ post }: PostProps) => {
   const { cid, content, commentAuthor, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
-  const banned = commentAuthor?.banExpiresAt;
+  const banned = !!commentAuthor?.banExpiresAt;
   const { t } = useTranslation();
   const params = useParams();
   const location = useLocation();
@@ -242,9 +242,13 @@ const PostMessage = ({ post }: PostProps) => {
     <blockquote className={styles.postMessage}>
       {isReply && !(removed || deleted) && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
       {removed ? (
-        <span className={styles.removedContent}>({t('this_post_was_removed')})</span>
+        <Tooltip
+          children={<span className={styles.removedContent}>({t('this_post_was_removed')})</span>}
+          content={`${_.capitalize(t('reason'))}: "${reason}"`}
+          showTooltip={!!reason}
+        />
       ) : deleted ? (
-        <span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>
+        <Tooltip children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>} content={reason && `${t('reason')}: ${reason}`} />
       ) : (
         <>
           {!showOriginal && <Markdown content={displayContent} spoiler={spoiler} />}
@@ -269,26 +273,20 @@ const PostMessage = ({ post }: PostProps) => {
               )}
             </span>
           )}
-          {banned && (
-            <span className={styles.removedContent}>
-              <br />
-              <Tooltip
-                children={`(${t('user_banned')})`}
-                content={t('ban_expires_at', {
-                  address: subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress),
-                  timestamp: getFormattedDate(commentAuthor?.banExpiresAt),
-                  interpolation: { escapeValue: false },
-                })}
-              />
-            </span>
-          )}
         </>
       )}
-      {(removed || deleted) && reason && (
-        <span>
+      {banned && (
+        <span className={styles.removedContent}>
           <br />
           <br />
-          {t('reason')}: {reason}
+          <Tooltip
+            children={`(${t('user_banned')})`}
+            content={`${t('ban_expires_at', {
+              address: subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress),
+              timestamp: getFormattedDate(commentAuthor?.banExpiresAt),
+              interpolation: { escapeValue: false },
+            })}${reason ? `. ${_.capitalize(t('reason'))}: "${reason}"` : ''}`}
+          />
         </span>
       )}
       {!isReply && content.length > 1000 && !isInPostView && (
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index aa856776..cb0e227d 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/src/components/post-mobile/post-mobile.tsx
@@ -153,7 +153,7 @@ const ReplyBacklinks = ({ post }: PostProps) => {
 const PostMessageMobile = ({ post }: PostProps) => {
   const { t } = useTranslation();
   const { cid, commentAuthor, content, deleted, edit, original, parentCid, postCid, reason, removed, spoiler, state, subplebbitAddress } = post || {};
-  const banned = commentAuthor?.banExpiresAt;
+  const banned = !!commentAuthor?.banExpiresAt;
   const [showOriginal, setShowOriginal] = useState(false);
 
   const params = useParams();
@@ -178,9 +178,13 @@ const PostMessageMobile = ({ post }: PostProps) => {
       <blockquote className={`${styles.postMessage} ${!isReply && styles.clampLines}`}>
         {isReply && !(removed || deleted) && isReplyingToReply && <ReplyQuotePreview isQuotelinkReply={true} quotelinkReply={quotelinkReply} />}
         {removed ? (
-          <span className={styles.removedContent}>({t('this_post_was_removed')})</span>
+          <Tooltip
+            children={<span className={styles.removedContent}>({t('this_post_was_removed')})</span>}
+            content={`${_.capitalize(t('reason'))}: "${reason}"`}
+            showTooltip={!!reason}
+          />
         ) : deleted ? (
-          <span className={styles.removedContent}>{t('user_deleted_this_post')}</span>
+          <Tooltip children={<span className={styles.deletedContent}>{t('user_deleted_this_post')}</span>} content={reason && `${t('reason')}: ${reason}`} />
         ) : (
           <>
             {!showOriginal && <Markdown content={displayContent} spoiler={spoiler} />}
@@ -205,26 +209,20 @@ const PostMessageMobile = ({ post }: PostProps) => {
                 )}
               </span>
             )}
-            {banned && (
-              <span className={styles.removedContent}>
-                <br />
-                <Tooltip
-                  children={`(${t('user_banned')})`}
-                  content={t('ban_expires_at', {
-                    address: subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress),
-                    timestamp: getFormattedDate(commentAuthor?.banExpiresAt),
-                    interpolation: { escapeValue: false },
-                  })}
-                />
-              </span>
-            )}
           </>
         )}
-        {(removed || deleted) && reason && (
-          <span>
+        {banned && (
+          <span className={styles.removedContent}>
             <br />
             <br />
-            reason: {reason}
+            <Tooltip
+              children={`(${t('user_banned')})`}
+              content={`${t('ban_expires_at', {
+                address: subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress),
+                timestamp: getFormattedDate(commentAuthor?.banExpiresAt),
+                interpolation: { escapeValue: false },
+              })}${reason ? `. ${_.capitalize(t('reason'))}: "${reason}"` : ''}`}
+            />
           </span>
         )}
         {!isReply && content.length > 1000 && !isInPostView && (