add highlight distinction

src/components/styled/views/Board.styled.jsx

@@ -1734,7 +1734,7 @@ export const BoardForm = styled.div`
     ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #f0c0b0 !important;
         border: 1px solid #d99f91 !important;
         border-left: none !important;
@@ -1761,7 +1761,7 @@ export const BoardForm = styled.div`
       }`;
 
       case 'Yotsuba-B':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #d6bad0 !important;
         border: 1px solid #ba9dbf !important;
         border-left: none !important;
@@ -1788,7 +1788,7 @@ export const BoardForm = styled.div`
       }`;
 
       case 'Futaba':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #f0c0b0 !important;
       }
 
@@ -1812,7 +1812,7 @@ export const BoardForm = styled.div`
       }`;
 
       case 'Burichan':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #d6bad0 !important;
       }
 
@@ -1836,7 +1836,7 @@ export const BoardForm = styled.div`
       }`;
 
       case 'Tomorrow':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #1d1d21 !important;
         outline: 1px solid #111 !important;
       }
@@ -1860,7 +1860,7 @@ export const BoardForm = styled.div`
       }`;
 
       case 'Photon':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #ccc !important;
         outline: 1px solid #ccc !important;
       }
@@ -3228,32 +3228,32 @@ export const BoardForm = styled.div`
     ${({ selectedStyle }) => {
       switch (selectedStyle) {
         case 'Yotsuba':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #f0c0b0 !important;
         }`;
 
         case 'Yotsuba-B':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #d6bad0 !important;
         }`;
 
         case 'Futaba':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #f0c0b0 !important;
         }`;
 
         case 'Burichan':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #d6bad0 !important;
         }`;
 
         case 'Tomorrow':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #1d1d21 !important;
         }`;
 
         case 'Photon':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #ccc !important;
         }`;
         

src/components/styled/views/Catalog.styled.jsx

@@ -114,7 +114,7 @@ export const PostMenuCatalog = styled.div`
   ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #f0c0b0 !important;
         border: 1px solid #d99f91 !important;
         border-left: none !important;
@@ -137,7 +137,7 @@ export const PostMenuCatalog = styled.div`
       }`;
 
       case 'Yotsuba-B':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #d6bad0 !important;
         border: 1px solid #ba9dbf !important;
         border-left: none !important;
@@ -160,7 +160,7 @@ export const PostMenuCatalog = styled.div`
       }`;
 
       case 'Futaba':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #f0c0b0 !important;
       }
       
@@ -180,7 +180,7 @@ export const PostMenuCatalog = styled.div`
       }`;
 
       case 'Burichan':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #d6bad0 !important;
       }
       
@@ -200,7 +200,7 @@ export const PostMenuCatalog = styled.div`
       }`;
 
       case 'Tomorrow':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #1d1d21 !important;
         border: 1px solid #111 !important;
       }
@@ -220,7 +220,7 @@ export const PostMenuCatalog = styled.div`
       }`;
 
       case 'Photon':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #ccc !important;
         border: 1px solid #ccc !important;
       }

src/components/styled/views/Thread.styled.jsx

@@ -923,7 +923,7 @@ export const BoardForm = styled.div`
     ${({ selectedStyle }) => {
     switch (selectedStyle) {
       case 'Yotsuba':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #f0c0b0 !important;
         border: 1px solid #d99f91 !important;
         border-left: none !important;
@@ -948,7 +948,7 @@ export const BoardForm = styled.div`
       }`;
 
       case 'Yotsuba-B':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #d6bad0 !important;
         border: 1px solid #ba9dbf !important;
         border-left: none !important;
@@ -972,7 +972,7 @@ export const BoardForm = styled.div`
       }`;
 
       case 'Futaba':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #f0c0b0 !important;
       }
       
@@ -995,7 +995,7 @@ export const BoardForm = styled.div`
       }`;
 
       case 'Burichan':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #d6bad0 !important;
       }
       
@@ -1018,7 +1018,7 @@ export const BoardForm = styled.div`
       }`;
 
       case 'Tomorrow':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #1d1d21 !important;
         outline: 1px solid #111 !important;
       }
@@ -1040,7 +1040,7 @@ export const BoardForm = styled.div`
       }`;
 
       case 'Photon':
-        return `.highlighted {
+        return `.highlighted, .highlighted-click, .highlighted-address {
         background-color: #ccc !important;
         outline: 1px solid #ccc !important;
       }
@@ -2372,32 +2372,32 @@ export const BoardForm = styled.div`
     ${({ selectedStyle }) => {
       switch (selectedStyle) {
         case 'Yotsuba':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #f0c0b0 !important;
         }`;
 
         case 'Yotsuba-B':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #d6bad0 !important;
         }`;
 
         case 'Futaba':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #f0c0b0 !important;
         }`;
 
         case 'Burichan':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #d6bad0 !important;
         }`;
 
         case 'Tomorrow':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #1d1d21 !important;
         }`;
 
         case 'Photon':
-          return `.highlighted {
+          return `.highlighted, .highlighted-click, .highlighted-address {
           background-color: #ccc !important;
         }`;
         

src/utils/handleAddressClick.js

@@ -13,16 +13,26 @@ function handleAddressClick(shortAddress) {
     return;
   }
 
-  const highlightedElements = document.querySelectorAll('.highlighted');
+  const highlightedElements = document.querySelectorAll('.highlighted-address');
-  highlightedElements.forEach(el => {
-    el.classList.remove('highlighted');
-  });
 
+  let allHighlighted = true;
   matchingElements.forEach(el => {
-    if (!el.classList.contains('op-mobile') && !el.classList.contains('op-desktop')) {
+    if (!el.classList.contains('highlighted-address')) {
-      el.classList.add('highlighted');
+      allHighlighted = false;
     }
   });
+
+  highlightedElements.forEach(el => {
+    el.classList.remove('highlighted-address');
+  });
+
+  if (!allHighlighted) {
+    matchingElements.forEach(el => {
+      if (!el.classList.contains('op-mobile') && !el.classList.contains('op-desktop')) {
+        el.classList.add('highlighted-address');
+      }
+    });
+  }
 }
 
 export default handleAddressClick;

src/utils/handleQuoteClick.js

@@ -36,21 +36,20 @@ function handleQuoteClick(reply, parentCid, threadCid) {
     });
 
   if (targetElement) {
-    const highlightedElements = document.querySelectorAll('.highlighted');
+    const highlightedElements = document.querySelectorAll('.highlighted-click');
-
+  
     highlightedElements.forEach(el => {
-      el.classList.remove('highlighted');
+      el.classList.remove('highlighted-click');
     });
-
+  
     targetElement.scrollIntoView({ behavior: "auto", block: "start" });
-
+  
     if (!targetElement.classList.contains('op-mobile') && !targetElement.classList.contains('op-desktop')) {
-      targetElement.classList.add('highlighted');
+      targetElement.classList.add('highlighted-click');
     }
-
   } else {
     return;
-  }
+  }    
 };
 
 export default handleQuoteClick;