From 743968f7fb19effd464e9cc819c27dbe42221662 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 12:14:25 +0200
Subject: [PATCH] feat: use user's custom highlight color for Highlights tab

---
 src/components/Me.tsx        | 3 +++
 src/styles/components/me.css | 6 ++++++
 2 files changed, 9 insertions(+)

diff --git a/src/components/Me.tsx b/src/components/Me.tsx
index d349b811..29f90609 100644
--- a/src/components/Me.tsx
+++ b/src/components/Me.tsx
@@ -171,6 +171,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
         <div className="me-tabs">
           <button
             className={`me-tab ${activeTab === 'highlights' ? 'active' : ''}`}
+            data-tab="highlights"
             onClick={() => setActiveTab('highlights')}
           >
             <FontAwesomeIcon icon={faHighlighter} />
@@ -178,6 +179,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
           </button>
           <button
             className={`me-tab ${activeTab === 'reading-list' ? 'active' : ''}`}
+            data-tab="reading-list"
             onClick={() => setActiveTab('reading-list')}
           >
             <FontAwesomeIcon icon={faBookmark} />
@@ -185,6 +187,7 @@ const Me: React.FC<MeProps> = ({ relayPool }) => {
           </button>
           <button
             className={`me-tab ${activeTab === 'library' ? 'active' : ''}`}
+            data-tab="library"
             onClick={() => setActiveTab('library')}
           >
             <FontAwesomeIcon icon={faBook} />
diff --git a/src/styles/components/me.css b/src/styles/components/me.css
index 0a624bfd..8928347c 100644
--- a/src/styles/components/me.css
+++ b/src/styles/components/me.css
@@ -37,6 +37,12 @@
   border-bottom-color: var(--primary-color, #8b5cf6);
 }
 
+/* Highlights tab uses the user's custom "my highlights" color */
+.me-tab[data-tab="highlights"].active {
+  color: var(--highlight-color-mine, #ffff00);
+  border-bottom-color: var(--highlight-color-mine, #ffff00);
+}
+
 .me-tab svg {
   font-size: 1rem;
 }