From f2422e96013fca78fdc54f50fd29d28b529e4741 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Sun, 5 Oct 2025 21:54:02 +0100
Subject: [PATCH] feat(highlights): color sidebar highlight items by level
 (mine/friends/nostrverse)

---
 src/components/HighlightItem.tsx |  8 ++++++--
 src/index.css                    | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx
index 8feaeee2..206c1b82 100644
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -4,8 +4,12 @@ import { faQuoteLeft, faLink, faExternalLinkAlt } from '@fortawesome/free-solid-
 import { Highlight } from '../types/highlights'
 import { formatDistanceToNow } from 'date-fns'
 
+interface HighlightWithLevel extends Highlight {
+  level?: 'mine' | 'friends' | 'nostrverse'
+}
+
 interface HighlightItemProps {
-  highlight: Highlight
+  highlight: HighlightWithLevel
   onSelectUrl?: (url: string) => void
   isSelected?: boolean
   onHighlightClick?: (highlightId: string) => void
@@ -45,7 +49,7 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
   return (
     <div 
       ref={itemRef} 
-      className={`highlight-item ${isSelected ? 'selected' : ''}`} 
+      className={`highlight-item ${isSelected ? 'selected' : ''} ${highlight.level ? `level-${highlight.level}` : ''}`} 
       data-highlight-id={highlight.id}
       onClick={handleItemClick}
       style={{ cursor: onHighlightClick ? 'pointer' : 'default' }}
diff --git a/src/index.css b/src/index.css
index 15266e39..07ee08be 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1435,6 +1435,22 @@ body {
   box-shadow: 0 0 0 2px rgba(100, 108, 255, 0.3);
 }
 
+/* Level colors in sidebar items */
+.highlight-item.level-mine {
+  border-color: color-mix(in srgb, var(--highlight-color-mine, #eab308) 60%, #333);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #eab308) 25%, transparent);
+}
+
+.highlight-item.level-friends {
+  border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent);
+}
+
+.highlight-item.level-nostrverse {
+  border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 25%, transparent);
+}
+
 .highlight-quote-icon {
   color: #646cff;
   font-size: 1.2rem;