update styling, count/highlight logic depending on params and post id

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

@@ -118,7 +118,7 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po
   return (
     <>
       <span className={`${styles.checkbox} ${isReply && styles.replyCheckbox}`} ref={refs.setReference} {...(cid && getReferenceProps())}>
-        <input type='checkbox' onChange={() => cid && setIsEditMenuOpen(!isEditMenuOpen)} checked={isEditMenuOpen} disabled={!isAccountCommentAuthor && !isAccountMod} />
+        <input type='checkbox' onChange={() => cid && setIsEditMenuOpen(!isEditMenuOpen)} checked={isEditMenuOpen} />
       </span>
       {isEditMenuOpen && (isAccountCommentAuthor || isAccountMod) && (
         <FloatingFocusManager context={context} modal={false}>

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

@@ -40,8 +40,8 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
   const params = useParams();
   const location = useLocation();
   const isInAllView = isAllView(location.pathname, params);
-  const isInPostView = isPostPageView(location.pathname, params);
-  const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
+  const isInPostPageView = isPostPageView(location.pathname, params);
+  const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
 
   const account = useAccount();
   const accountShortAddress = account?.author?.shortAddress; // if reply by account is pending, it doesn't have an author yet
@@ -49,7 +49,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
   const { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor } = useEditCommentPrivileges({ commentAuthorAddress: address, subplebbitAddress });
 
   const handleUserAddressClick = useAuthorAddressClick();
-  const numberOfPostsByAuthor = document.querySelectorAll(`.${shortAddress}`).length;
+  let numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length;
 
   return (
     <div className={styles.postInfo}>
@@ -93,6 +93,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
                 </span>
               }
               content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`}
+              showTooltip={isInPostPageView}
             />
             ){' '}
           </>
@@ -133,7 +134,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
             <img src='assets/icons/closed.gif' alt='' className={styles.closedIcon} title={t('closed')} />
           </span>
         )}
-        {!isInPostView && !isReply && !isHidden && (
+        {!isInPostPageView && !isReply && !isHidden && (
           <span className={styles.replyButton}>
             [
             <Link
@@ -294,13 +295,9 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
     <div className={styles.replyDesktop}>
       <div className={styles.sideArrows}>{'>>'}</div>
       <div
-        className={`
-            ${styles.reply}
-            ${isRouteLinkToReply && styles.highlight}
-            ${hidden && styles.postDesktopHidden}
-            ${cid}
-            ${post?.author?.shortAddress}
-          `}
+        className={`${styles.reply} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
+        data-cid={cid}
+        data-author-address={post?.author?.shortAddress}
       >
         <PostInfo openReplyModal={openReplyModal} post={post} roles={roles} />
         {link && !hidden && isValidURL(link) && <PostMedia post={post} />}
@@ -351,10 +348,12 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies, showReplies
             <span className={`${styles.hideButton} ${hidden ? styles.unhideThread : styles.hideThread}`} onClick={hidden ? unhide : hide} />
           </span>
         )}
-        {link && !isHidden && isValidURL(link) && <PostMedia post={post} />}
-        <PostInfo isHidden={isHidden} openReplyModal={openReplyModal} post={post} roles={roles} />
-        {!isHidden && !content && <div className={styles.spacer} />}
-        {!isHidden && content && <PostMessage post={post} />}
+        <div data-cid={cid} data-author-address={post?.author?.shortAddress}>
+          {link && !isHidden && isValidURL(link) && <PostMedia post={post} />}
+          <PostInfo isHidden={isHidden} openReplyModal={openReplyModal} post={post} roles={roles} />
+          {!isHidden && !content && <div className={styles.spacer} />}
+          {!isHidden && content && <PostMessage post={post} />}
+        </div>
         {!isHidden && !isDescription && !isRules && !isInPendingPostView && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPageView && (
           <span className={styles.summary}>
             <span className={styles.expandButtonWrapper}>

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

@@ -30,9 +30,11 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
   const displayName = author?.displayName?.trim();
   const authorRole = roles?.[address]?.role;
 
+  const params = useParams();
   const location = useLocation();
-  const isInAllView = isAllView(location.pathname, useParams());
-  const isInSubscriptionsView = isSubscriptionsView(location.pathname, useParams());
+  const isInAllView = isAllView(location.pathname, params);
+  const isInPostPageView = isPostPageView(location.pathname, params);
+  const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
 
   const commentMediaInfo = getCommentMediaInfo(post);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
@@ -47,7 +49,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
   const stateString = useStateString(post);
 
   const handleUserAddressClick = useAuthorAddressClick();
-  const numberOfPostsByAuthor = document.querySelectorAll(`.${shortAddress}`).length;
+  const numberOfPostsByAuthor = document.querySelectorAll(`[data-author-address="${shortAddress}"]`).length;
 
   return (
     <>
@@ -83,6 +85,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
                   </span>
                 }
                 content={`${numberOfPostsByAuthor} ${numberOfPostsByAuthor === 1 ? 'post' : 'posts'} by this user address`}
+                showTooltip={isInPostPageView}
               />
               ){' '}
             </>
@@ -246,13 +249,9 @@ const Reply = ({ openReplyModal, reply, roles }: PostProps) => {
     <div className={styles.replyMobile}>
       <div className={styles.reply}>
         <div
-          className={`
-            ${styles.replyContainer}
-            ${isRouteLinkToReply && styles.highlight}
-            ${hidden && styles.postDesktopHidden}
-            ${cid}
-            ${post?.author?.shortAddress}
-          `}
+          className={`${styles.replyContainer} ${isRouteLinkToReply && styles.highlight} ${hidden && styles.postDesktopHidden}`}
+          data-cid={cid}
+          data-author-address={post?.author?.shortAddress}
         >
           <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
           {content && !hidden && <PostMessageMobile post={post} />}
@@ -307,7 +306,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies, showReplies =
           )}
           <div className={showReplies ? styles.thread : styles.quotePreview}>
             <div className={styles.postContainer}>
-              <div className={styles.postOp}>
+              <div className={styles.postOp} data-cid={cid} data-author-address={post?.author?.shortAddress}>
                 <PostInfoAndMedia openReplyModal={openReplyModal} post={post} roles={roles} />
                 {content && <PostMessageMobile post={post} />}
               </div>

src/components/reply-quote-preview/reply-quote-preview.tsx

@@ -15,7 +15,7 @@ interface ReplyQuotePreviewProps {
 }
 
 const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
-  const targetElements = document.querySelectorAll(`.${cid}`);
+  const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
 
   if (targetElements.length === 0) return;
 
@@ -97,7 +97,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
 
   const handleMouseLeave = (cid: string | null) => {
     if (cid) {
-      const targetElements = document.querySelectorAll(`.${cid}`);
+      const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
       targetElements.forEach((element) => {
         element.classList.remove('highlight');
       });
@@ -183,7 +183,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
 
   const handleMouseLeave = (cid: string | null) => {
     if (cid) {
-      const targetElements = document.querySelectorAll(`.${cid}`);
+      const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
       targetElements.forEach((element) => {
         element.classList.remove('highlight');
       });

src/components/tooltip/tooltip.tsx

@@ -5,9 +5,10 @@ import styles from './tooltip.module.css';
 interface TooltipProps {
   content: string;
   children: ReactNode;
+  showTooltip?: boolean;
 }
 
-const Tooltip = ({ content, children }: TooltipProps) => {
+const Tooltip = ({ content, children, showTooltip = true }: TooltipProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const { refs, floatingStyles, context } = useFloating({
@@ -36,13 +37,15 @@ const Tooltip = ({ content, children }: TooltipProps) => {
       <span ref={refs.setReference} {...getReferenceProps()}>
         {children}
       </span>
-      <FloatingPortal>
-        {isOpen && (
-          <div className={styles.tooltip} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
-            {content}
-          </div>
-        )}
-      </FloatingPortal>
+      {showTooltip && (
+        <FloatingPortal>
+          {isOpen && (
+            <div className={styles.tooltip} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
+              {content}
+            </div>
+          )}
+        </FloatingPortal>
+      )}
     </>
   );
 };