feat: integrate sync status indicator into highlights panel

- Updated HighlightsTab to accept syncStatus and syncErrorMessage props
- Added SyncStatusIndicator component import and display in highlights panel
- Enhanced BibleReaderApp with sync status tracking state (synced/syncing/pending/error)
- Modified performSync function to update sync status based on result
- Updated VersDetailsPanel to pass sync status props through to HighlightsTab
- Sync status now visible to users in the Highlights tab with real-time updates

Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/bible/bible-reader-app.tsx

@@ -36,6 +36,8 @@ export function BibleReaderApp() {
   const [booksLoading, setBooksLoading] = useState(true)
   const [highlights, setHighlights] = useState<Map<string, BibleHighlight>>(new Map())
   const syncManager = useRef<HighlightSyncManager | null>(null)
+  const [syncStatus, setSyncStatus] = useState<'synced' | 'syncing' | 'pending' | 'error'>('synced')
+  const [syncError, setSyncError] = useState<string | null>(null)
 
   // Load books on mount or when locale changes
   useEffect(() => {
@@ -281,17 +283,19 @@ export function BibleReaderApp() {
     if (!syncManager.current) return
 
     try {
-      const pending = await syncManager.current.getPendingSyncItems()
-      if (pending.length === 0) return
+      setSyncStatus('syncing')
+      const result = await syncManager.current.performSync()
 
-      await syncManager.current.markSyncing(pending.map(h => h.id))
-
-      // TODO: POST to /api/highlights/bulk in Phase 2.1B
-
-      await syncManager.current.markSynced(pending.map(h => h.id))
+      if (result.errors > 0) {
+        setSyncStatus('error')
+        setSyncError(`Failed to sync ${result.errors} highlights`)
+      } else {
+        setSyncStatus('synced')
+        setSyncError(null)
+      }
     } catch (error) {
-      console.error('Sync failed:', error)
-      // Mark items with error status
+      setSyncStatus('error')
+      setSyncError(error instanceof Error ? error.message : 'Unknown error')
     }
   }
 
@@ -370,6 +374,8 @@ export function BibleReaderApp() {
         onHighlightVerse={handleHighlightVerse}
         onChangeHighlightColor={handleChangeHighlightColor}
         onRemoveHighlight={handleRemoveHighlight}
+        syncStatus={syncStatus}
+        syncErrorMessage={syncError || undefined}
       />
 
       {/* Settings panel */}