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

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