feat: integrate highlight management into reader app

- Added HighlightSyncManager and highlight state management to BibleReaderApp
- Implemented highlight handlers: add, update color, remove, and sync
- Connected highlight state from BibleReaderApp to VersDetailsPanel
- Updated VersDetailsPanel to pass highlight props to HighlightsTab
- Added auto-sync initialization with 30-second interval
- Prepared for Phase 2.1B API integration

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

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

components/bible/verse-details-panel.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect } from 'react'
 import { Box, Paper, Typography, Tabs, Tab, IconButton, useMediaQuery, useTheme, TextField, Button } from '@mui/material'
 import { Close, Bookmark, BookmarkBorder } from '@mui/icons-material'
-import { BibleVerse } from '@/types'
+import { BibleVerse, HighlightColor } from '@/types'
 import { HighlightsTab } from './highlights-tab'
 
 interface VersDetailsPanelProps {
@@ -12,6 +12,11 @@ interface VersDetailsPanelProps {
   isBookmarked: boolean
   onToggleBookmark: () => void
   onAddNote: (note: string) => void
+  isHighlighted?: boolean
+  currentHighlightColor?: HighlightColor | null
+  onHighlightVerse?: (color: HighlightColor) => void
+  onChangeHighlightColor?: (color: HighlightColor) => void
+  onRemoveHighlight?: () => void
 }
 
 export function VersDetailsPanel({
@@ -21,6 +26,11 @@ export function VersDetailsPanel({
   isBookmarked,
   onToggleBookmark,
   onAddNote,
+  isHighlighted,
+  currentHighlightColor,
+  onHighlightVerse,
+  onChangeHighlightColor,
+  onRemoveHighlight,
 }: VersDetailsPanelProps) {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
@@ -121,10 +131,16 @@ export function VersDetailsPanel({
         {tabValue === 1 && (
           <HighlightsTab
             verse={verse}
-            isHighlighted={false} // TODO: get from state
-            currentColor={null} // TODO: get from state
-            onToggleHighlight={() => {}} // TODO: implement
-            onColorChange={() => {}} // TODO: implement
+            isHighlighted={isHighlighted || false}
+            currentColor={currentHighlightColor || null}
+            onToggleHighlight={() => {
+              if (isHighlighted) {
+                onRemoveHighlight?.()
+              } else {
+                onHighlightVerse?.('yellow')
+              }
+            }}
+            onColorChange={(color) => onChangeHighlightColor?.(color)}
           />
         )}