refactor(highlights): consolidate relay/status indicators into single icon

Replace multiple redundant indicators (flight mode, local only, relay info) with a single relay indicator icon in the bottom-left of each highlight:
- Show plane icon for local-only or offline-created highlights
- Show server icon for highlights published to remote relays
- Keep spinner in meta area for actively syncing highlights
- Remove duplicate indicators from meta area
- Clean up unused CSS and imports

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, faServer } from '@fortawesome/free-solid-svg-icons'
+import { faQuoteLeft, faExternalLinkAlt, 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,17 +83,34 @@ 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'
+  // Determine relay indicator icon and tooltip
+  const getRelayIndicatorInfo = () => {
+    const isLocalOrOffline = highlight.isLocalOnly || (showOfflineIndicator && !isSyncing)
+    
+    if (isLocalOrOffline) {
+      return {
+        icon: faPlane,
+        tooltip: highlight.isLocalOnly 
+          ? 'Local only (not published to remote relays)'
+          : 'Created in flight mode'
+      }
     }
+    
+    if (!highlight.publishedRelays || highlight.publishedRelays.length === 0) {
+      return null
+    }
+    
     const relayNames = highlight.publishedRelays.map(url => 
       url.replace(/^wss?:\/\//, '').replace(/\/$/, '')
     )
-    return `Published to ${relayNames.length} relay(s):\n${relayNames.join('\n')}`
+    return {
+      icon: faServer,
+      tooltip: `Published to ${relayNames.length} relay(s):\n${relayNames.join('\n')}`
+    }
   }
   
+  const relayIndicator = getRelayIndicatorInfo()
+  
   return (
     <div 
       ref={itemRef} 
@@ -104,9 +121,9 @@ 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} />
+        {relayIndicator && (
+          <div className="highlight-relay-indicator" title={relayIndicator.tooltip}>
+            <FontAwesomeIcon icon={relayIndicator.icon} />
           </div>
         )}
       </div>
@@ -132,16 +149,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
             {formatDistanceToNow(new Date(highlight.created_at * 1000), { addSuffix: true })}
           </span>
           
-          {highlight.isLocalOnly && (
-            <>
-              <span className="highlight-meta-separator">•</span>
-              <span className="highlight-local-indicator" title="This highlight is only stored on your local relay">
-                <FontAwesomeIcon icon={faHouseSignal} />
-                <span className="highlight-local-text">Local</span>
-              </span>
-            </>
-          )}
-          
           {isSyncing && (
             <>
               <span className="highlight-meta-separator">•</span>
@@ -151,15 +158,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({ highlight, onSelec
             </>
           )}
           
-          {!isSyncing && showOfflineIndicator && (
-            <>
-              <span className="highlight-meta-separator">•</span>
-              <span className="highlight-offline-indicator" title="Created while in flight mode">
-                <FontAwesomeIcon icon={faPlane} />
-              </span>
-            </>
-          )}
-          
           {sourceLink && (
             <a
               href={sourceLink}

src/index.css

@@ -1648,27 +1648,6 @@ body {
   color: #888;
 }
 
-.highlight-local-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  color: #f59e0b;
-  font-weight: 500;
-  font-size: 0.8rem;
-  padding: 0.15rem 0.5rem;
-  background: rgba(245, 158, 11, 0.1);
-  border-radius: 4px;
-  border: 1px solid rgba(245, 158, 11, 0.3);
-}
-
-.highlight-offline-indicator {
-  display: inline-flex;
-  align-items: center;
-  color: #fbbf24;
-  font-size: 0.8rem;
-  opacity: 0.8;
-}
-
 .highlight-syncing-indicator {
   display: inline-flex;
   align-items: center;
@@ -1677,12 +1656,6 @@ body {
   opacity: 0.9;
 }
 
-.highlight-local-text {
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
 .highlight-source {
   display: flex;
   align-items: center;