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>
+      )}
     </>
   );
 };

src/hooks/use-author-address-click.ts

@@ -1,9 +1,11 @@
-const useAuthorAddressClick = () => {
-  const handleUserAddressClick = (shortAddress: string | undefined) => {
-    if (!shortAddress) return;
+import { useParams } from 'react-router-dom';
 
+const useAuthorAddressClick = () => {
+  const { commentCid } = useParams<{ commentCid: string }>();
+
+  const handleUserAddressClick = (shortAddress: string) => {
     // Select the elements corresponding to the clicked short address
-    const elements = document.querySelectorAll(`.${shortAddress}`);
+    const elements = document.querySelectorAll(`[data-author-address="${shortAddress}"]`);
 
     // Check if the clicked address is already highlighted
     const isAlreadyHighlighted = Array.from(elements).some((element) => element.classList.contains('highlight'));
@@ -17,9 +19,11 @@ const useAuthorAddressClick = () => {
     // If the clicked address was already highlighted, don't add the highlight back
     if (isAlreadyHighlighted) return;
 
-    // Highlight the new elements
+    // Highlight the new elements, excluding the element matching the cid if it is the OP post
     elements.forEach((element) => {
-      element.classList.add('highlight');
+      if (element.getAttribute('data-cid') !== commentCid) {
+        element.classList.add('highlight');
+      }
     });
   };
 

src/index.css

@@ -26,10 +26,6 @@ hr {
   color: var(--post-greentext-color);
 }
 
-.highlight {
-  background: var(--reply-highlight-background-color) !important;
-}
-
 .capitalize {
   text-transform: capitalize;
 }
@@ -55,6 +51,10 @@ hr {
   select {
     filter: var(--filter80);
   }
+
+  .highlight {
+    background: var(--reply-highlight-background-color) !important;
+  }
 }
 
 @media (min-width: 640px) {
@@ -69,4 +69,11 @@ hr {
     color: var(--button-desktop-text-color-hover);
     cursor: pointer;
   }
+
+  .highlight {
+    background: var(--reply-highlight-background-color) !important;
+    border: var(--reply-highlight-border) !important;
+    border-left: var(--reply-highlight-border-left, revert) !important;
+    border-top: var(--reply-highlight-border-top, revert) !important;
+  }
 }

src/themes.css

@@ -170,6 +170,7 @@
 
   /* reply highlight */
   --reply-highlight-background-color: #f0c0b0;
+  --reply-highlight-border: 1px solid #d99f91;
 
   /* reply modal */
   --reply-modal-field-input-border: 1px solid #aaa;
@@ -375,6 +376,7 @@
 
   /* reply highlight */
   --reply-highlight-background-color: #d6bad0;
+  --reply-highlight-border: 1px solid #ba9dbf;
 
   /* reply modal */
   --reply-modal-field-input-border: 1px solid #aaa;
@@ -549,9 +551,7 @@
   --quote-preview-border-bottom: 2px solid rgba(0,0,0,.2);
 
   /* reply desktop */
-  --side-arrows-color: #e0bfb7;
   --reply-desktop-background-color: #f0e0d6;
-  --reply-desktop-border: 1px solid #d9bfb7;
 
   /* reply highlight */
   --reply-highlight-background-color: #f0c0b0;
@@ -734,9 +734,7 @@
   --quote-preview-border-bottom: 2px solid rgba(0,0,0,.2);
 
   /* reply desktop */
-  --side-arrows-color: #b7c5d9;
   --reply-desktop-background-color: #d6daf0;
-  --reply-desktop-border: 1px solid #b7c5d9;
 
   /* reply highlight */
   --reply-highlight-background-color: #d6bad0;
@@ -937,6 +935,8 @@
   --side-arrows-color: #c5c8c6;
   --reply-desktop-background-color: #282a2e;
   --reply-desktop-border: 1px solid #282a2e;
+  --reply-desktop-border-left: 1px solid #282a2e;
+  --reply-desktop-border-top: 1px solid #282a2e;
 
   /* reply modal */
   --reply-modal-field-input-border: 1px solid #515151;
@@ -945,6 +945,9 @@
 
   /* reply highlight */
   --reply-highlight-background-color: #1d1d21;
+  --reply-highlight-border: 1px solid #111;
+  --reply-highlight-border-left: 1px solid #111;
+  --reply-highlight-border-top: 1px solid #111;
 
   /* select */
   --select-border: 1px solid #575a60;
@@ -1133,9 +1136,14 @@
   --side-arrows-color: #333;
   --reply-desktop-background-color: #ddd;
   --reply-desktop-border: 1px solid #ccc;
+  --reply-desktop-border-left: 1px solid #ccc;
+  --reply-desktop-border-top: 1px solid #ccc;
 
   /* reply highlight */
   --reply-highlight-background-color: #ccc;
+  --reply-highlight-border: 1px solid #ccc;
+  --reply-highlight-border-left: 1px solid #ccc;
+  --reply-highlight-border-top: 1px solid #ccc;
 
   /* reply modal */
   --reply-modal-field-input-border: 1px solid #aaa;

src/views/post/post.module.css

@@ -350,8 +350,8 @@
 .replyDesktop .reply {
   background-color: var(--reply-desktop-background-color);
   border: var(--reply-desktop-border);
-  border-left: none;
-  border-top: none;
+  border-top: var(--reply-desktop-border-top, revert);
+  border-left: var(--reply-desktop-border-left, revert);
   display: table;
   padding: 0 2px 2px 2px;
 }