feat: implement three-level highlight system

- Add three highlight levels: nostrverse (all), friends (followed), and mine (user's own)
- Create contactService to fetch user's follow list from kind 3 events
- Add three configurable colors in settings (purple, orange, yellow defaults)
- Replace mode switcher with independent toggle buttons for each level
- Update highlight rendering to apply level-specific colors using CSS custom properties
- Add CSS styles for three-level highlights in both marker and underline modes
- Classify highlights dynamically based on user's context and follow list
- All three levels can be shown/hidden independently via toggle buttons

src/components/Bookmarks.tsx

@@ -8,6 +8,7 @@ import { Highlight } from '../types/highlights'
 import { BookmarkList } from './BookmarkList'
 import { fetchBookmarks } from '../services/bookmarkService'
 import { fetchHighlights, fetchHighlightsForArticle } from '../services/highlightService'
+import { fetchContacts } from '../services/contactService'
 import ContentPanel from './ContentPanel'
 import { HighlightsPanel } from './HighlightsPanel'
 import { ReadableContent } from '../services/readerService'
@@ -16,7 +17,7 @@ import Toast from './Toast'
 import { useSettings } from '../hooks/useSettings'
 import { useArticleLoader } from '../hooks/useArticleLoader'
 import { loadContent, BookmarkReference } from '../utils/contentLoader'
-import { HighlightMode } from './HighlightsPanel'
+import { HighlightVisibility } from './HighlightsPanel'
 export type ViewMode = 'compact' | 'cards' | 'large'
 
 interface BookmarksProps {
@@ -40,7 +41,12 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
   const [showSettings, setShowSettings] = useState(false)
   const [currentArticleCoordinate, setCurrentArticleCoordinate] = useState<string | undefined>(undefined)
   const [currentArticleEventId, setCurrentArticleEventId] = useState<string | undefined>(undefined)
-  const [highlightMode, setHighlightMode] = useState<HighlightMode>('others')
+  const [highlightVisibility, setHighlightVisibility] = useState<HighlightVisibility>({
+    nostrverse: true,
+    friends: true,
+    mine: true
+  })
+  const [followedPubkeys, setFollowedPubkeys] = useState<Set<string>>(new Set())
   const activeAccount = Hooks.useActiveAccount()
   const accountManager = Hooks.useAccountManager()
   const eventStore = useEventStore()
@@ -72,8 +78,15 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     if (!relayPool || !activeAccount) return
     handleFetchBookmarks()
     handleFetchHighlights()
+    handleFetchContacts()
   }, [relayPool, activeAccount?.pubkey])
 
+  const handleFetchContacts = async () => {
+    if (!relayPool || !activeAccount) return
+    const contacts = await fetchContacts(relayPool, activeAccount.pubkey)
+    setFollowedPubkeys(contacts)
+  }
+
   // Apply UI settings
   useEffect(() => {
     if (settings.defaultViewMode) setViewMode(settings.defaultViewMode)
@@ -194,8 +207,9 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
             onRefresh={handleFetchHighlights}
             onHighlightClick={setSelectedHighlightId}
             currentUserPubkey={activeAccount?.pubkey}
-            highlightMode={highlightMode}
-            onHighlightModeChange={setHighlightMode}
+            highlightVisibility={highlightVisibility}
+            onHighlightVisibilityChange={setHighlightVisibility}
+            followedPubkeys={followedPubkeys}
           />
         </div>
       </div>

src/components/HighlightsPanel.tsx

@@ -1,10 +1,14 @@
 import React, { useMemo, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faHighlighter, faEye, faEyeSlash, faRotate, faUser, faUserGroup } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faHighlighter, faEye, faEyeSlash, faRotate, faUser, faUserGroup, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { HighlightItem } from './HighlightItem'
 
-export type HighlightMode = 'mine' | 'others'
+export interface HighlightVisibility {
+  nostrverse: boolean
+  friends: boolean
+  mine: boolean
+}
 
 interface HighlightsPanelProps {
   highlights: Highlight[]
@@ -18,8 +22,9 @@ interface HighlightsPanelProps {
   onRefresh?: () => void
   onHighlightClick?: (highlightId: string) => void
   currentUserPubkey?: string
-  highlightMode?: HighlightMode
-  onHighlightModeChange?: (mode: HighlightMode) => void
+  highlightVisibility?: HighlightVisibility
+  onHighlightVisibilityChange?: (visibility: HighlightVisibility) => void
+  followedPubkeys?: Set<string>
 }
 
 export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
@@ -34,8 +39,9 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
   onRefresh,
   onHighlightClick,
   currentUserPubkey,
-  highlightMode = 'others',
-  onHighlightModeChange
+  highlightVisibility = { nostrverse: true, friends: true, mine: true },
+  onHighlightVisibilityChange,
+  followedPubkeys = new Set()
 }) => {
   const [showUnderlines, setShowUnderlines] = useState(true)
   
@@ -45,7 +51,7 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
     onToggleUnderlines?.(newValue)
   }
   
-  // Filter highlights based on mode and URL
+  // Filter highlights based on visibility levels and URL
   const filteredHighlights = useMemo(() => {
     if (!selectedUrl) return highlights
     
@@ -75,18 +81,25 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
       })
     }
     
-    // Filter by mode (mine vs others)
-    if (!currentUserPubkey) {
-      // If no user is logged in, show all highlights (others mode only makes sense)
-      return urlFiltered
-    }
-    
-    if (highlightMode === 'mine') {
-      return urlFiltered.filter(h => h.pubkey === currentUserPubkey)
-    } else {
-      return urlFiltered.filter(h => h.pubkey !== currentUserPubkey)
-    }
-  }, [highlights, selectedUrl, highlightMode, currentUserPubkey])
+    // Classify and filter by visibility levels
+    return urlFiltered
+      .map(h => {
+        // Classify highlight level
+        let level: 'mine' | 'friends' | 'nostrverse' = 'nostrverse'
+        if (h.pubkey === currentUserPubkey) {
+          level = 'mine'
+        } else if (followedPubkeys.has(h.pubkey)) {
+          level = 'friends'
+        }
+        return { ...h, level }
+      })
+      .filter(h => {
+        // Filter by visibility settings
+        if (h.level === 'mine') return highlightVisibility.mine
+        if (h.level === 'friends') return highlightVisibility.friends
+        return highlightVisibility.nostrverse
+      })
+  }, [highlights, selectedUrl, highlightVisibility, currentUserPubkey, followedPubkeys])
   
   if (isCollapsed) {
     const hasHighlights = filteredHighlights.length > 0
@@ -115,24 +128,46 @@ export const HighlightsPanel: React.FC<HighlightsPanelProps> = ({
           {!loading && <span className="count">({filteredHighlights.length})</span>}
         </div>
         <div className="highlights-actions">
-          {currentUserPubkey && onHighlightModeChange && (
-            <div className="highlight-mode-toggle">
+          {onHighlightVisibilityChange && (
+            <div className="highlight-level-toggles">
               <button
-                onClick={() => onHighlightModeChange('mine')}
-                className={`mode-btn ${highlightMode === 'mine' ? 'active' : ''}`}
-                title="My highlights"
-                aria-label="Show my highlights"
+                onClick={() => onHighlightVisibilityChange({ 
+                  ...highlightVisibility, 
+                  nostrverse: !highlightVisibility.nostrverse 
+                })}
+                className={`level-toggle-btn ${highlightVisibility.nostrverse ? 'active' : ''}`}
+                title="Toggle nostrverse highlights"
+                aria-label="Toggle nostrverse highlights"
+                style={{ color: highlightVisibility.nostrverse ? 'var(--highlight-color-nostrverse, #9333ea)' : undefined }}
               >
-                <FontAwesomeIcon icon={faUser} />
+                <FontAwesomeIcon icon={faGlobe} />
               </button>
               <button
-                onClick={() => onHighlightModeChange('others')}
-                className={`mode-btn ${highlightMode === 'others' ? 'active' : ''}`}
-                title="Other highlights"
-                aria-label="Show highlights from others"
+                onClick={() => onHighlightVisibilityChange({ 
+                  ...highlightVisibility, 
+                  friends: !highlightVisibility.friends 
+                })}
+                className={`level-toggle-btn ${highlightVisibility.friends ? 'active' : ''}`}
+                title="Toggle friends highlights"
+                aria-label="Toggle friends highlights"
+                style={{ color: highlightVisibility.friends ? 'var(--highlight-color-friends, #f97316)' : undefined }}
               >
                 <FontAwesomeIcon icon={faUserGroup} />
               </button>
+              {currentUserPubkey && (
+                <button
+                  onClick={() => onHighlightVisibilityChange({ 
+                    ...highlightVisibility, 
+                    mine: !highlightVisibility.mine 
+                  })}
+                  className={`level-toggle-btn ${highlightVisibility.mine ? 'active' : ''}`}
+                  title="Toggle my highlights"
+                  aria-label="Toggle my highlights"
+                  style={{ color: highlightVisibility.mine ? 'var(--highlight-color-mine, #eab308)' : undefined }}
+                >
+                  <FontAwesomeIcon icon={faUser} />
+                </button>
+              )}
             </div>
           )}
           {onRefresh && (

src/components/Settings.tsx

@@ -122,13 +122,37 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
             </div>
 
             <div className="setting-group setting-inline">
-              <label>Highlight Color</label>
+              <label>Highlight Color (Legacy)</label>
               <ColorPicker
                 selectedColor={localSettings.highlightColor || '#ffff00'}
                 onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColor: color })}
               />
             </div>
 
+            <div className="setting-group setting-inline">
+              <label>My Highlights Color</label>
+              <ColorPicker
+                selectedColor={localSettings.highlightColorMine || '#eab308'}
+                onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorMine: color })}
+              />
+            </div>
+
+            <div className="setting-group setting-inline">
+              <label>Friends Highlights Color</label>
+              <ColorPicker
+                selectedColor={localSettings.highlightColorFriends || '#f97316'}
+                onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorFriends: color })}
+              />
+            </div>
+
+            <div className="setting-group setting-inline">
+              <label>Nostrverse Highlights Color</label>
+              <ColorPicker
+                selectedColor={localSettings.highlightColorNostrverse || '#9333ea'}
+                onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorNostrverse: color })}
+              />
+            </div>
+
             <div className="setting-preview">
               <div className="preview-label">Preview</div>
               <div