From 3206631e897218b84e41fd6c33028c2760668e3a Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Fri, 14 Jun 2024 16:58:13 +0200
Subject: [PATCH] feat(post): add block options to mobile menu

---
 .../post-desktop/post-menu-desktop/index.ts   |  2 +-
 .../post-menu-desktop/post-menu-desktop.tsx   |  4 ++--
 .../post-menu-mobile/post-menu-mobile.tsx     | 22 +++++++++----------
 src/views/board/board.module.css              | 11 ++++++++++
 src/views/board/board.tsx                     |  2 +-
 5 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/components/post-desktop/post-menu-desktop/index.ts b/src/components/post-desktop/post-menu-desktop/index.ts
index 54cc808b..14d179a1 100644
--- a/src/components/post-desktop/post-menu-desktop/index.ts
+++ b/src/components/post-desktop/post-menu-desktop/index.ts
@@ -1 +1 @@
-export { default } from './post-menu-desktop';
+export { BlockBoardButton, BlockUserButton, default } from './post-menu-desktop';
diff --git a/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx b/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
index e305831b..d55b00b1 100644
--- a/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+++ b/src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx
@@ -103,7 +103,7 @@ const ViewOnButton = ({ cid, isDescription, isInAllView, isInSubscriptionsView,
   );
 };
 
-const BlockUserButton = ({ address }: { address: string }) => {
+export const BlockUserButton = ({ address }: { address: string }) => {
   const { blocked, unblock, block } = useBlock({ address });
 
   return (
@@ -113,7 +113,7 @@ const BlockUserButton = ({ address }: { address: string }) => {
   );
 };
 
-const BlockBoardButton = ({ address }: { address: string }) => {
+export const BlockBoardButton = ({ address }: { address: string }) => {
   const { blocked, unblock, block } = useBlock({ address });
 
   return (
diff --git a/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx b/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
index 9f2f4e75..751404e3 100644
--- a/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+++ b/src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx
@@ -8,8 +8,9 @@ import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
 import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils';
 import useEditCommentPrivileges from '../../../hooks/use-author-privileges';
 import useHide from '../../../hooks/use-hide';
+import { BlockBoardButton, BlockUserButton } from '../../post-desktop/post-menu-desktop';
 import EditMenu from '../../edit-menu/edit-menu';
-import { isPostPageView } from '../../../lib/utils/view-utils';
+import { isBoardView, isPostPageView } from '../../../lib/utils/view-utils';
 import { useLocation, useParams } from 'react-router-dom';
 
 interface PostMenuMobileProps {
@@ -19,7 +20,7 @@ interface PostMenuMobileProps {
   isRules?: boolean;
   postCid?: string;
   subplebbitAddress?: string;
-  onClose: () => void;
+  onClose?: () => void;
 }
 
 const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps) => {
@@ -30,7 +31,7 @@ const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps
         if (subplebbitAddress) {
           copyShareLinkToClipboard(subplebbitAddress, cid);
         }
-        onClose();
+        onClose && onClose();
       }}
     >
       <div className={styles.postMenuItem}>{t('copy_link')}</div>
@@ -70,19 +71,14 @@ const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose
   );
 };
 
-const HidePostButton = ({ cid, isReply, postCid, onClose }: PostMenuMobileProps) => {
+const HidePostButton = ({ cid, isReply, postCid }: PostMenuMobileProps) => {
   const { t } = useTranslation();
   const { hide, hidden, unhide } = useHide({ cid });
   const isInPostView = isPostPageView(useLocation().pathname, useParams());
 
   return (
     (!isInPostView || isReply) && (
-      <div
-        onClick={() => {
-          hidden ? unhide() : hide();
-          onClose();
-        }}
-      >
+      <div onClick={hidden ? unhide : hide}>
         <div className={styles.postMenuItem}>
           {hidden ? (postCid === cid ? t('unhide_thread') : t('unhide_post')) : postCid === cid ? t('hide_thread') : t('hide_post')}
         </div>
@@ -112,6 +108,8 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
 
   const handleClose = () => setIsMenuOpen(false);
 
+  const isInBoardView = isBoardView(useLocation().pathname, useParams());
+
   return (
     <>
       <span className={styles.postMenuBtn} title='Post menu' onClick={() => setIsMenuOpen((prev) => !prev)} ref={refs.setReference} {...getReferenceProps()}>
@@ -122,7 +120,9 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
           <FloatingFocusManager context={context} modal={false}>
             <div className={styles.postMenu} ref={refs.setFloating} style={floatingStyles} aria-labelledby={headingId} {...getFloatingProps()}>
               {cid && subplebbitAddress && <CopyLinkButton cid={cid} subplebbitAddress={subplebbitAddress} onClose={handleClose} />}
-              {cid && subplebbitAddress && <HidePostButton cid={cid} isReply={parentCid} postCid={post.postCid} onClose={handleClose} />}
+              {cid && subplebbitAddress && <HidePostButton cid={cid} isReply={parentCid} postCid={post.postCid} />}
+              {cid && subplebbitAddress && <BlockUserButton address={author?.address} />}
+              {cid && subplebbitAddress && !isInBoardView && <BlockBoardButton address={subplebbitAddress} />}
               {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButtons url={url} onClose={handleClose} />}
               <ViewOnButtons cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} />
             </div>
diff --git a/src/views/board/board.module.css b/src/views/board/board.module.css
index 7ddc39cc..fedc2cb0 100644
--- a/src/views/board/board.module.css
+++ b/src/views/board/board.module.css
@@ -2,6 +2,17 @@
   padding-top: 10px;
 }
 
+.button {
+  text-transform: capitalize;
+  color: var(--button-desktop-text-color);
+  text-decoration: var(--button-text-decoration);
+}
+
+.button:hover {
+  color: var(--button-desktop-text-color-hover);
+  cursor: pointer;
+}
+
 @media (max-width: 640px) {
   .footer {
     padding-left: 5px;
diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx
index b4f74a81..f5e77894 100644
--- a/src/views/board/board.tsx
+++ b/src/views/board/board.tsx
@@ -108,7 +108,7 @@ const Board = () => {
           <>
             &nbsp;&nbsp;[
             <span
-              className='button'
+              className={styles.button}
               onClick={() => {
                 unblock();
                 reset();