feat(highlights): add relay indicator icon to highlight items

Add a small server icon at the bottom-left of each highlight that shows which relays the highlight was published to. The icon appears when publishedRelays information is available (for user-created highlights) and displays a tooltip with the list of relay URLs on hover.

- Import faServer icon from FontAwesome
- Add relay indicator to HighlightItem component
- Display formatted relay list in tooltip
- Add CSS styling for the indicator with hover effects
- Support both dark and light modes

src/components/HighlightItem.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faQuoteLeft, faExternalLinkAlt, faHouseSignal, faPlane, faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, faHouseSignal, faPlane, faSpinner, faServer } from '@fortawesome/free-solid-svg-icons'
 import { Highlight } from '../types/highlights'
 import { formatDistanceToNow } from 'date-fns'
 import { useEventModel } from 'applesauce-react/hooks'
@@ -83,6 +83,17 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
   
   const sourceLink = getSourceLink()
   
+  // Format relay list for tooltip
+  const getRelayTooltip = () => {
+    if (!highlight.publishedRelays || highlight.publishedRelays.length === 0) {
+      return 'No relay information available'
+    }
+    const relayNames = highlight.publishedRelays.map(url => 
+      url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
+    )
+    return `Published to ${relayNames.length} relay(s):\n${relayNames.join('\n')}`
+  }
+  
   return (
     <div 
       ref={itemRef} 
@@ -93,6 +104,11 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
     >
       <div className="highlight-quote-icon">
         <FontAwesomeIcon icon={faQuoteLeft} />
+        {highlight.publishedRelays && highlight.publishedRelays.length > 0 && (
+          <div className="highlight-relay-indicator" title={getRelayTooltip()}>
+            <FontAwesomeIcon icon={faServer} />
+          </div>
+        )}
       </div>
       
       <div className="highlight-content">

src/index.css

@@ -1257,6 +1257,14 @@ body {
     color: #646cff;
   }
   
+  .highlight-relay-indicator {
+    color: #666;
+  }
+  
+  .highlight-relay-indicator:hover {
+    color: #333;
+  }
+  
   .highlight-text {
     color: #213547;
   }
@@ -1557,6 +1565,23 @@ body {
   font-size: 1.2rem;
   flex-shrink: 0;
   margin-top: 0.25rem;
+  position: relative;
+}
+
+.highlight-relay-indicator {
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  font-size: 0.7rem;
+  color: #888;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+  cursor: help;
+}
+
+.highlight-relay-indicator:hover {
+  opacity: 1;
+  color: #aaa;
 }
 
 /* Level-colored quote icon */