feat: create HighlightsTab component with color picker

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

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

components/bible/verse-details-panel.tsx

@@ -3,6 +3,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 { HighlightsTab } from './highlights-tab'
 
 interface VersDetailsPanelProps {
   verse: BibleVerse | null
@@ -118,9 +119,13 @@ export function VersDetailsPanel({
         )}
 
         {tabValue === 1 && (
-          <Typography variant="body2" color="text.secondary">
-            Highlight colors coming soon
-          </Typography>
+          <HighlightsTab
+            verse={verse}
+            isHighlighted={false} // TODO: get from state
+            currentColor={null} // TODO: get from state
+            onToggleHighlight={() => {}} // TODO: implement
+            onColorChange={() => {}} // TODO: implement
+          />
         )}
 
         {tabValue === 2 && (