feat: implement VersDetailsPanel with notes, bookmarks, and tabs

__tests__/components/verse-details-panel.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import { VersDetailsPanel } from '@/components/bible/verse-details-panel'
+
+const mockVerse = {
+  id: 'v1',
+  verseNum: 1,
+  text: 'In the beginning...',
+  bookId: 1,
+  chapter: 1
+}
+
+describe('VersDetailsPanel', () => {
+  it('renders when open with verse data', () => {
+    render(
+      <VersDetailsPanel
+        verse={mockVerse}
+        isOpen={true}
+        onClose={() => {}}
+        isBookmarked={false}
+        onToggleBookmark={() => {}}
+        onAddNote={() => {}}
+      />
+    )
+    expect(screen.getByText(/In the beginning/)).toBeInTheDocument()
+  })
+
+  it('does not render when closed', () => {
+    const { container } = render(
+      <VersDetailsPanel
+        verse={mockVerse}
+        isOpen={false}
+        onClose={() => {}}
+        isBookmarked={false}
+        onToggleBookmark={() => {}}
+        onAddNote={() => {}}
+      />
+    )
+    expect(container.firstChild).toBeNull()
+  })
+})