From d919da153f3f80befaa1f964cc0a9de0676e5739 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 16:08:37 +0200
Subject: [PATCH] feat: make quote icon a CompactButton in top-left corner

- Replace static quote icon with CompactButton
- Position top-left with same corner margin as others
- Preserve level-based coloring via CSS (
  - mine: var(--highlight-color-mine)
  - friends: var(--highlight-color-friends)
  - nostrverse: var(--highlight-color-nostrverse)
)
---
 src/components/HighlightItem.tsx | 9 ++++++---
 src/styles/layout/highlights.css | 5 ++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx
index 82d02192..bbb6b7e9 100644
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -314,9 +314,12 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
         </CompactButton>
       </div>
       
-      <div className="highlight-quote-icon">
-        <FontAwesomeIcon icon={faQuoteLeft} />
-      </div>
+      <CompactButton
+        className="highlight-quote-button"
+        icon={faQuoteLeft}
+        title="Quote"
+        onClick={(e) => e.stopPropagation()}
+      />
       
       {/* relay indicator lives in footer for consistent padding/alignment */}
       
diff --git a/src/styles/layout/highlights.css b/src/styles/layout/highlights.css
index 94790909..54c82ef3 100644
--- a/src/styles/layout/highlights.css
+++ b/src/styles/layout/highlights.css
@@ -130,7 +130,10 @@
 .highlight-item.level-nostrverse .highlight-header,
 .highlight-item.level-nostrverse .highlight-footer { border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333); }
 
-.highlight-quote-icon { position: absolute; top: 0.5rem; left: 1rem; color: #646cff; font-size: 0.85rem; opacity: 0.7; z-index: 10; }
+.highlight-quote-button { position: absolute; top: 0.5rem; left: 1rem; z-index: 10; }
+.highlight-item.level-mine .highlight-quote-button { color: var(--highlight-color-mine, #ffff00); }
+.highlight-item.level-friends .highlight-quote-button { color: var(--highlight-color-friends, #f97316); }
+.highlight-item.level-nostrverse .highlight-quote-button { color: var(--highlight-color-nostrverse, #9333ea); }
 .highlight-relay-indicator { flex-shrink: 0; }
 .highlight-relay-indicator:hover { opacity: 1; }