feat(post): enable highlighting an already highlighted post by using a different color

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

@@ -33,10 +33,20 @@ const handleQuoteHover = (cid: string, onElementOutOfView: () => void) => {
   targetElements.forEach((element) => {
     const htmlElement = element as HTMLElement;
     if (isInViewport(htmlElement)) {
-      htmlElement.classList.add('highlight');
+      const hasHighlight = Array.from(htmlElement.classList).some((className) => className.includes('highlight') && !className.includes('double-highlight'));
+      if (hasHighlight) {
+        console.log('contains highlight');
+        htmlElement.classList.remove('highlight');
+        htmlElement.classList.add('double-highlight');
+      } else {
+        console.log("doesn't contain highlight", htmlElement.classList);
+        htmlElement.classList.remove('double-highlight');
+        htmlElement.classList.add('highlight');
+      }
       anyInView = true;
     } else {
-      htmlElement.classList.remove('highlight');
+      // If not in view, remove both classes
+      htmlElement.classList.remove('highlight', 'double-highlight');
     }
   });
 
@@ -112,6 +122,7 @@ const DesktopQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, i
       const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
       targetElements.forEach((element) => {
         element.classList.remove('highlight');
+        element.classList.remove('double-highlight');
       });
     }
     setHoveredCid(null);
@@ -215,6 +226,7 @@ const MobileQuotePreview = ({ backlinkReply, quotelinkReply, isBacklinkReply, is
       const targetElements = document.querySelectorAll(`[data-cid="${cid}"]`);
       targetElements.forEach((element) => {
         element.classList.remove('highlight');
+        element.classList.remove('double-highlight');
       });
     }
     setHoveredCid(null);

src/index.css

@@ -71,6 +71,10 @@ hr {
   .highlight {
     background: var(--reply-highlight-background-color) !important;
   }
+
+  .double-highlight {
+    background: var(--reply-double-highlight-background-color) !important;
+  }
 }
 
 @media (min-width: 640px) {
@@ -92,4 +96,11 @@ hr {
     border-left: var(--reply-highlight-border-left, revert) !important;
     border-top: var(--reply-highlight-border-top, revert) !important;
   }
-}
+
+  .double-highlight {
+    background: var(--reply-double-highlight-background-color) !important;
+    border: var(--reply-double-highlight-border) !important;
+    border-left: var(--reply-double-highlight-border-left, revert) !important;
+    border-top: var(--reply-double-highlight-border-top, revert) !important;
+  }
+}

src/themes.css

@@ -175,6 +175,8 @@
   /* reply highlight */
   --reply-highlight-background-color: #f0c0b0;
   --reply-highlight-border: 1px solid #d99f91;
+  --reply-double-highlight-background-color: #e8a690;
+  --reply-double-highlight-border: 1px solid #d99f91;
 
   /* reply modal */
   --reply-modal-field-input-border: 1px solid #aaa;
@@ -382,6 +384,8 @@
   /* reply highlight */
   --reply-highlight-background-color: #d6bad0;
   --reply-highlight-border: 1px solid #ba9dbf;
+  --reply-double-highlight-background-color: #bfa6ba;
+  --reply-double-highlight-border: 1px solid #ba9dbf;
 
   /* reply modal */
   --reply-modal-field-input-border: 1px solid #aaa;
@@ -564,6 +568,7 @@
 
   /* reply highlight */
   --reply-highlight-background-color: #f0c0b0;
+  --reply-double-highlight-background-color: #e8a690;
 
   /* settings modal */
   --settings-modal-background-color: #f0e0d6;
@@ -748,6 +753,7 @@
 
   /* reply highlight */
   --reply-highlight-background-color: #d6bad0;
+  --reply-double-highlight-background-color: #bfa6ba;
 
   /* settings modal */
   --settings-modal-background-color: #d6daf0;
@@ -962,6 +968,10 @@
   --reply-highlight-border: 1px solid #111;
   --reply-highlight-border-left: 1px solid #111;
   --reply-highlight-border-top: 1px solid #111;
+  --reply-double-highlight-background-color: #111;
+  --reply-double-highlight-border: 1px solid #111;
+  --reply-double-highlight-border-left: 1px solid #111;
+  --reply-double-highlight-border-top: 1px solid #111;
 
   /* settings modal */
   --settings-modal-font-size: 14px;
@@ -1154,6 +1164,10 @@
   --reply-highlight-border: 1px solid #ccc;
   --reply-highlight-border-left: 1px solid #ccc;
   --reply-highlight-border-top: 1px solid #ccc;
+  --reply-double-highlight-background-color: #bbb;
+  --reply-double-highlight-border: 1px solid #ccc;
+  --reply-double-highlight-border-left: 1px solid #ccc;
+  --reply-double-highlight-border-top: 1px solid #ccc;
 
   /* reply modal */
   --reply-modal-field-input-border: 1px solid #aaa;

src/views/post/post.module.css

@@ -490,6 +490,9 @@
 
 .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;
 }
 
 .replyQuotePreview {