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/verse-details-panel.tsx

@@ -17,6 +17,8 @@ interface VersDetailsPanelProps {
   onHighlightVerse?: (color: HighlightColor) => void
   onChangeHighlightColor?: (color: HighlightColor) => void
   onRemoveHighlight?: () => void
+  syncStatus?: 'synced' | 'syncing' | 'pending' | 'error'
+  syncErrorMessage?: string
 }
 
 export function VersDetailsPanel({
@@ -31,6 +33,8 @@ export function VersDetailsPanel({
   onHighlightVerse,
   onChangeHighlightColor,
   onRemoveHighlight,
+  syncStatus,
+  syncErrorMessage,
 }: VersDetailsPanelProps) {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
@@ -141,6 +145,8 @@ export function VersDetailsPanel({
               }
             }}
             onColorChange={(color) => onChangeHighlightColor?.(color)}
+            syncStatus={syncStatus}
+            syncErrorMessage={syncErrorMessage}
           />
         )}