From 5a498cbcb656704c2147c08ab942b45636498165 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Sat, 21 Dec 2024 16:32:14 +0100
Subject: [PATCH] feat(post): enable highlighting an already highlighted post
 by using a different color

---
 .../reply-quote-preview/reply-quote-preview.tsx  | 16 ++++++++++++++--
 src/index.css                                    | 13 ++++++++++++-
 src/themes.css                                   | 14 ++++++++++++++
 src/views/post/post.module.css                   |  3 +++
 4 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/reply-quote-preview/reply-quote-preview.tsx b/src/components/reply-quote-preview/reply-quote-preview.tsx
index 647b547b..77337079 100644
--- a/src/components/reply-quote-preview/reply-quote-preview.tsx
+++ b/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);
diff --git a/src/index.css b/src/index.css
index ff753dd6..b0591088 100644
--- a/src/index.css
+++ b/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;
   }
-}
\ No newline at end of file
+
+  .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;
+  }
+}
diff --git a/src/themes.css b/src/themes.css
index fbc18930..be94e46c 100644
--- a/src/themes.css
+++ b/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;
diff --git a/src/views/post/post.module.css b/src/views/post/post.module.css
index 5f18920a..15f144b2 100644
--- a/src/views/post/post.module.css
+++ b/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 {