feat: create HighlightsTab component with color picker

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

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

__tests__/components/highlights-tab.test.tsx

@@ -0,0 +1,58 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { HighlightsTab } from '@/components/bible/highlights-tab'
+import { BibleVerse } from '@/types'
+
+describe('HighlightsTab', () => {
+  const mockVerse: BibleVerse = {
+    id: 'v-1',
+    verseNum: 1,
+    text: 'In the beginning God created the heavens and the earth'
+  }
+
+  it('should render highlight button when verse not highlighted', () => {
+    render(
+      <HighlightsTab
+        verse={mockVerse}
+        isHighlighted={false}
+        currentColor={null}
+        onToggleHighlight={() => {}}
+        onColorChange={() => {}}
+      />
+    )
+
+    expect(screen.getByText(/Highlight/i)).toBeInTheDocument()
+  })
+
+  it('should render color picker when verse is highlighted', () => {
+    render(
+      <HighlightsTab
+        verse={mockVerse}
+        isHighlighted={true}
+        currentColor="yellow"
+        onToggleHighlight={() => {}}
+        onColorChange={() => {}}
+      />
+    )
+
+    expect(screen.getByText(/Remove highlight/i)).toBeInTheDocument()
+  })
+
+  it('should call onColorChange when color is selected', () => {
+    const onColorChange = jest.fn()
+
+    render(
+      <HighlightsTab
+        verse={mockVerse}
+        isHighlighted={true}
+        currentColor="yellow"
+        onToggleHighlight={() => {}}
+        onColorChange={onColorChange}
+      />
+    )
+
+    const blueButton = screen.getByTestId('color-blue')
+    fireEvent.click(blueButton)
+
+    expect(onColorChange).toHaveBeenCalledWith('blue')
+  })
+})