From 0c5c4b6c236db6d00f1ead2e52c87a27ffb80c6c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Thu, 9 Oct 2025 16:11:33 +0100
Subject: [PATCH] refactor(highlights): consolidate sync state into relay
 indicator

Show automatic rebroadcast/sync state in the relay indicator instead of separate meta spinner:
- Relay indicator shows spinner during both manual rebroadcast and auto-sync
- Update tooltip to distinguish between manual rebroadcast and auto-sync
- Remove redundant syncing indicator from meta area
- Clean up unused CSS for syncing indicator

This provides a single, consistent visual indicator for all relay broadcast states.
---
 src/components/HighlightItem.tsx | 16 ++++------------
 src/index.css                    |  8 --------
 2 files changed, 4 insertions(+), 20 deletions(-)

diff --git a/src/components/HighlightItem.tsx b/src/components/HighlightItem.tsx
index f01c5389..88bd9fb9 100644
--- a/src/components/HighlightItem.tsx
+++ b/src/components/HighlightItem.tsx
@@ -159,15 +159,16 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
   
   // Determine relay indicator icon and tooltip
   const getRelayIndicatorInfo = () => {
-    if (isRebroadcasting) {
+    // Show spinner if manually rebroadcasting OR auto-syncing
+    if (isRebroadcasting || isSyncing) {
       return {
         icon: faSpinner,
-        tooltip: 'Rebroadcasting to all relays...',
+        tooltip: isRebroadcasting ? 'Rebroadcasting to all relays...' : 'Auto-syncing to remote relays...',
         spin: true
       }
     }
     
-    const isLocalOrOffline = highlight.isLocalOnly || (showOfflineIndicator && !isSyncing)
+    const isLocalOrOffline = highlight.isLocalOnly || showOfflineIndicator
     
     if (isLocalOrOffline) {
       return {
@@ -236,15 +237,6 @@ export const HighlightItem: React.FC<HighlightItemProps> = ({
             {formatDistanceToNow(new Date(highlight.created_at * 1000), { addSuffix: true })}
           </span>
           
-          {isSyncing && (
-            <>
-              <span className="highlight-meta-separator">•</span>
-              <span className="highlight-syncing-indicator" title="Syncing to remote relays...">
-                <FontAwesomeIcon icon={faSpinner} spin />
-              </span>
-            </>
-          )}
-          
           {sourceLink && (
             <a
               href={sourceLink}
diff --git a/src/index.css b/src/index.css
index 3d156510..49c57497 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1653,14 +1653,6 @@ body {
   color: #888;
 }
 
-.highlight-syncing-indicator {
-  display: inline-flex;
-  align-items: center;
-  color: #3b82f6;
-  font-size: 0.8rem;
-  opacity: 0.9;
-}
-
 .highlight-source {
   display: flex;
   align-items: center;