feat: add edit menu on mobile

src/components/post/edit-menu/edit-menu.module.css

@@ -88,4 +88,17 @@
   .banInput {
     width: 3.5em;
   }
+}
+
+
+@media (max-width: 640px) {
+  .checkbox {
+    padding-left: 0;
+    padding-bottom: 0;
+  }
+
+  .replyCheckbox {
+    padding-left: 5px;
+    padding-top: 0;
+  }
 }

src/components/post/edit-menu/edit-menu.tsx

@@ -1,5 +1,5 @@
-import { Trans, useTranslation } from 'react-i18next';
 import { useEffect, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { PublishCommentEditOptions, useComment, useEditedComment, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks';
 import styles from './edit-menu.module.css';
@@ -58,13 +58,6 @@ const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentA
     },
   };
 
-  useEffect(() => {
-    if (!isEditMenuOpen) {
-      setPublishCommentEditOptions(defaultPublishOptions);
-      setIsContentEditorOpen(false);
-    }
-  }, [isEditMenuOpen]);
-
   const [publishCommentEditOptions, setPublishCommentEditOptions] = useState(defaultPublishOptions);
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
@@ -130,7 +123,7 @@ const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentA
 
   return (
     <>
-      <span className={styles.checkbox} ref={refs.setReference} {...(commentCid && getReferenceProps())}>
+      <span className={`${styles.checkbox} ${isReply && styles.replyCheckbox}`} ref={refs.setReference} {...(commentCid && getReferenceProps())}>
         <input
           type='checkbox'
           onChange={() => commentCid && setIsEditMenuOpen(!isEditMenuOpen)}

src/components/post/post-desktop/post-desktop.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router-dom';
 import { Link } from 'react-router-dom';
-import { useAccount, useBlock, useEditedComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useBlock, useEditedComment } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import styles from '../post.module.css';
 import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils';
@@ -10,6 +10,7 @@ import { getFormattedDate } from '../../../lib/utils/time-utils';
 import { isValidURL } from '../../../lib/utils/url-utils';
 import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils';
 import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies';
+import useEditCommentPrivileges from '../../../hooks/use-edit-comment-privileges';
 import useReplies from '../../../hooks/use-replies';
 import useStateString from '../../../hooks/use-state-string';
 import CommentMedia from '../../comment-media';
@@ -41,12 +42,8 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
 
   const account = useAccount();
   const accountShortAddress = account?.author?.shortAddress; // if reply by account is pending, it doesn't have an author yet
-  const subplebbit = useSubplebbit({ subplebbitAddress });
+
-  const commentAuthorRole = subplebbit?.roles?.[author?.address]?.role;
+  const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: address, subplebbitAddress });
-  const isCommentAuthorMod = commentAuthorRole === 'admin' || commentAuthorRole === 'owner' || commentAuthorRole === 'moderator';
-  const accountAuthorRole = subplebbit?.roles?.[account?.author?.address]?.role;
-  const isAccountMod = accountAuthorRole === 'admin' || accountAuthorRole === 'owner' || accountAuthorRole === 'moderator';
-  const isAccountCommentAuthor = account?.author?.address === author?.address;
 
   return (
     <div className={styles.postInfo}>

src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx

@@ -1,11 +1,13 @@
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
-import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { useTranslation } from 'react-i18next';
 import { Comment } from '@plebbit/plebbit-react-hooks';
+import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import styles from './post-menu-mobile.module.css';
 import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
 import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
+import useEditCommentPrivileges from '../../../../hooks/use-edit-comment-privileges';
+import EditMenu from '../../edit-menu/edit-menu';
 
 interface PostMenuMobileProps {
   cid: string;
@@ -62,7 +64,8 @@ const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose
 };
 
 const PostMenuMobile = ({ post }: { post: Comment }) => {
-  const { cid, isDescription, isRules, link, subplebbitAddress } = post || {};
+  const { author, cid, isDescription, isRules, link, subplebbitAddress } = post || {};
+  const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: author?.address, subplebbitAddress });
   const commentMediaInfo = getCommentMediaInfo(post);
   const { thumbnail, type, url } = commentMediaInfo || {};
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -98,6 +101,9 @@ const PostMenuMobile = ({ post }: { post: Comment }) => {
           </FloatingFocusManager>,
           document.body,
         )}
+      {(isAccountMod || isAccountCommentAuthor) && (
+        <EditMenu commentCid={cid} isAccountCommentAuthor={isAccountCommentAuthor} isAccountMod={isAccountMod} isCommentAuthorMod={isCommentAuthorMod} />
+      )}
     </>
   );
 };

src/hooks/use-edit-comment-privileges.ts

@@ -0,0 +1,21 @@
+import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+
+interface EditCommentPrivileges {
+  commentAuthorAddress: string;
+  subplebbitAddress: string;
+}
+
+const useEditCommentPrivileges = ({ commentAuthorAddress, subplebbitAddress }: EditCommentPrivileges) => {
+  const accountAuthorAddress = useAccount().author?.address;
+  const { roles } = useSubplebbit({ subplebbitAddress }) || {};
+
+  const commentAuthorRole = roles?.[commentAuthorAddress]?.role;
+  const isCommentAuthorMod = commentAuthorRole === 'admin' || commentAuthorRole === 'owner' || commentAuthorRole === 'moderator';
+  const accountAuthorRole = roles?.[accountAuthorAddress]?.role;
+  const isAccountMod = accountAuthorRole === 'admin' || accountAuthorRole === 'owner' || accountAuthorRole === 'moderator';
+  const isAccountCommentAuthor = accountAuthorAddress === commentAuthorAddress;
+
+  return { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor };
+};
+
+export default useEditCommentPrivileges;