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

@@ -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 */}
       

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; }