added user address highlighting

src/components/views/Board.jsx

@@ -14,6 +14,7 @@ import SettingsModal from '../SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import getDate from '../../utils/getDate';
+import handleAddressClick from '../../utils/handleAddressClick';
 import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import renderComments from '../../utils/renderComments';
@@ -449,7 +450,10 @@ const Board = () => {
                             Anonymous</span>}
                           &nbsp;
                           (u/
-                          <span key={`pa-${thread.cid}`} className="poster-address">
+                          <span key={`pa-${thread.cid}`} className="poster-address address-desktop"
+                          id="reply-button" style={{cursor: "pointer"}}
+                            onClick={() => handleAddressClick(thread.author.shortAddress)}
+                          >
                             {thread.author.shortAddress}
                           </span>)
                           &nbsp;
@@ -542,7 +546,10 @@ const Board = () => {
                                 : <span key={`mob-n-${reply.cid}`} className="name">
                                   Anonymous</span>}
                               &nbsp;
-                              <span key={`pa-${reply.cid}`} className="poster-address">
+                              <span key={`pa-${reply.cid}`} className="poster-address address-desktop"
+                                id="reply-button" style={{cursor: "pointer"}}
+                                onClick={() => handleAddressClick(reply.author.shortAddress)}
+                              >
                                 (u/
                                   <span key={`mob-ha-${reply.cid}`}>
                                     {reply.author.shortAddress}
@@ -675,7 +682,10 @@ const Board = () => {
                           : <span key={`mob-n-${thread.cid}`} className="name-mobile">
                             Anonymous</span>}
                           &nbsp;
-                          <span key={`mob-pa-${thread.cid}`} className="poster-address-mobile">
+                          <span key={`mob-pa-${thread.cid}`} className="poster-address-mobile address-mobile"
+                            id="reply-button" style={{cursor: "pointer"}}
+                            onClick={() => handleAddressClick(thread.author.shortAddress)}
+                          >
                             (u/
                             <span key={`mob-ha-${thread.cid}`} className="highlight-address-mobile">
                               {thread.author.shortAddress}
@@ -801,7 +811,10 @@ const Board = () => {
                             : <span key={`mob-n-${reply.cid}`} className="name-mobile">
                               Anonymous</span>}
                             &nbsp;
-                            <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
+                            <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile address-mobile"
+                              id="reply-button" style={{cursor: "pointer"}}
+                              onClick={() => handleAddressClick(reply.author.shortAddress)}
+                            >
                               (u/
                               <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
                                 {reply.author.shortAddress}

src/components/views/Thread.jsx

@@ -14,6 +14,7 @@ import SettingsModal from '../SettingsModal';
 import findShortParentCid from '../../utils/findShortParentCid';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import getDate from '../../utils/getDate';
+import handleAddressClick from '../../utils/handleAddressClick';
 import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import renderThreadComments from '../../utils/renderThreadComments';
@@ -467,7 +468,9 @@ const Thread = () => {
                           Anonymous</span>}
                         &nbsp;
                       &nbsp;
-                      <span className="poster-address">
+                      <span className="poster-address address-desktop"
+                        id="reply-button" style={{cursor: "pointer"}}
+                        onClick={() => handleAddressClick(comment.author?.shortAddress)}>
                         (u/
                           <span key={`pa-${comment.cid}`} className="poster-address">
                           {comment.author?.shortAddress}
@@ -532,7 +535,10 @@ const Thread = () => {
                           : <span key={`mob-n-${reply.cid}`} className="name">
                             Anonymous</span>}
                             &nbsp;
-                            <span key={`pa-${reply.cid}`} className="poster-address">
+                            <span key={`pa-${reply.cid}`} className="poster-address address-desktop"
+                              id="reply-button" style={{cursor: "pointer"}}
+                              onClick={() => handleAddressClick(reply.author?.shortAddress)}
+                            >
                               (u/
                               <span key={`mob-ha-${reply.cid}`}>
                                 {reply.author?.shortAddress ?? reply.author.address}
@@ -649,7 +655,10 @@ const Thread = () => {
                         : <span key={`mob-n-${comment.cid}`} className="name-mobile">
                           Anonymous</span>}
                         &nbsp;
-                        <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile">
+                        <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
+                          id="reply-button" style={{cursor: "pointer"}}
+                          onClick={() => handleAddressClick(comment.author?.shortAddress)}
+                        >
                           (u/
                           <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
                             {comment.author?.shortAddress}
@@ -745,7 +754,10 @@ const Thread = () => {
                           : <span key={`mob-n-${reply.cid}`} className="name-mobile">
                             Anonymous</span>}
                           &nbsp;
-                          <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile">
+                          <span key={`mob-pa-${reply.cid}`} className="poster-address-mobile address-mobile"
+                            id="reply-button" style={{cursor: "pointer"}}
+                            onClick={() => handleAddressClick(reply.author?.shortAddress)}
+                          >
                             (u/
                             <span key={`mob-ha-${reply.cid}`} className="highlight-address-mobile">
                               {reply.author?.shortAddress}

src/utils/handleAddressClick.js

@@ -0,0 +1,29 @@
+function handleAddressClick(shortAddress) {
+  const isMobile = window.innerWidth <= 480;
+  const addressSelector = isMobile ? '.address-mobile' : '.address-desktop';
+  const postReplySelector = isMobile ? '.post-reply-mobile' : '.post-reply-desktop';
+  const opSelector = isMobile ? '.op-mobile' : '.op-desktop';
+
+  const matchingElements = [...document.querySelectorAll(postReplySelector + ',' + opSelector)].filter(el => {
+    const addressElement = el.querySelector(addressSelector);
+    return addressElement && addressElement.textContent.includes(shortAddress);
+  });
+
+  if (matchingElements.length === 0) {
+    console.log('Could not find any matching elements');
+    return;
+  }
+
+  const highlightedElements = document.querySelectorAll('.highlighted');
+  highlightedElements.forEach(el => {
+    el.classList.remove('highlighted');
+  });
+
+  matchingElements.forEach(el => {
+    if (!el.classList.contains('op-mobile') && !el.classList.contains('op-desktop')) {
+      el.classList.add('highlighted');
+    }
+  });
+}
+
+export default handleAddressClick;