From 189240355450ea2d3e5933dac0299d9e093bb71e Mon Sep 17 00:00:00 2001
From: Andrei <andrei@cloudz.ro>
Date: Tue, 11 Nov 2025 19:48:13 +0000
Subject: [PATCH] feat: implement VersDetailsPanel with notes, bookmarks, and
 tabs

---
 .../components/verse-details-panel.test.tsx   |  40 +++++
 components/bible/verse-details-panel.tsx      | 162 ++++++++++++++++++
 2 files changed, 202 insertions(+)
 create mode 100644 __tests__/components/verse-details-panel.test.tsx
 create mode 100644 components/bible/verse-details-panel.tsx

diff --git a/__tests__/components/verse-details-panel.test.tsx b/__tests__/components/verse-details-panel.test.tsx
new file mode 100644
index 0000000..7199145
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/components/bible/verse-details-panel.tsx b/components/bible/verse-details-panel.tsx
new file mode 100644
index 0000000..a9d475d
--- /dev/null
+++ b/components/bible/verse-details-panel.tsx
@@ -0,0 +1,162 @@
+'use client'
+import { useState } 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'
+
+interface VersDetailsPanelProps {
+  verse: BibleVerse | null
+  isOpen: boolean
+  onClose: () => void
+  isBookmarked: boolean
+  onToggleBookmark: () => void
+  onAddNote: (note: string) => void
+}
+
+export function VersDetailsPanel({
+  verse,
+  isOpen,
+  onClose,
+  isBookmarked,
+  onToggleBookmark,
+  onAddNote,
+}: VersDetailsPanelProps) {
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  const [tabValue, setTabValue] = useState(0)
+  const [noteText, setNoteText] = useState('')
+
+  if (!verse || !isOpen) return null
+
+  const handleAddNote = () => {
+    if (noteText.trim()) {
+      onAddNote(noteText)
+      setNoteText('')
+    }
+  }
+
+  const PanelContent = (
+    <Box sx={{ p: 2 }}>
+      {/* Verse Header */}
+      <Box sx={{ mb: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
+        <Typography variant="subtitle1" fontWeight={600}>
+          Verse {verse.verseNum}
+        </Typography>
+        <IconButton size="small" onClick={onClose}>
+          <Close />
+        </IconButton>
+      </Box>
+
+      {/* Verse Text */}
+      <Paper sx={{ p: 2, mb: 2, bgcolor: 'grey.100' }} elevation={0}>
+        <Typography variant="body2" sx={{ mb: 1, fontStyle: 'italic' }}>
+          {verse.text}
+        </Typography>
+      </Paper>
+
+      {/* Bookmark Button */}
+      <Box sx={{ mb: 2 }}>
+        <Button
+          startIcon={isBookmarked ? <Bookmark /> : <BookmarkBorder />}
+          onClick={onToggleBookmark}
+          variant={isBookmarked ? 'contained' : 'outlined'}
+          size="small"
+          fullWidth={isMobile}
+        >
+          {isBookmarked ? 'Bookmarked' : 'Bookmark'}
+        </Button>
+      </Box>
+
+      {/* Tabs */}
+      <Tabs
+        value={tabValue}
+        onChange={(_, newValue) => setTabValue(newValue)}
+        variant={isMobile ? 'fullWidth' : 'standard'}
+        sx={{ borderBottom: 1, borderColor: 'divider' }}
+      >
+        <Tab label="Notes" />
+        <Tab label="Highlights" />
+        <Tab label="References" />
+      </Tabs>
+
+      {/* Tab Content */}
+      <Box sx={{ pt: 2 }}>
+        {tabValue === 0 && (
+          <Box>
+            <TextField
+              fullWidth
+              multiline
+              rows={3}
+              placeholder="Add a note..."
+              value={noteText}
+              onChange={(e) => setNoteText(e.target.value)}
+              size="small"
+              sx={{ mb: 1 }}
+            />
+            <Button
+              variant="contained"
+              size="small"
+              onClick={handleAddNote}
+              disabled={!noteText.trim()}
+            >
+              Save Note
+            </Button>
+          </Box>
+        )}
+
+        {tabValue === 1 && (
+          <Typography variant="body2" color="text.secondary">
+            Highlight colors coming soon
+          </Typography>
+        )}
+
+        {tabValue === 2 && (
+          <Typography variant="body2" color="text.secondary">
+            Cross-references coming soon
+          </Typography>
+        )}
+      </Box>
+    </Box>
+  )
+
+  if (isMobile) {
+    return (
+      <Box
+        sx={{
+          position: 'fixed',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          zIndex: 100,
+          maxHeight: '70vh',
+          backgroundColor: 'white',
+          borderTopLeftRadius: 16,
+          borderTopRightRadius: 16,
+          boxShadow: '0 -4px 20px rgba(0,0,0,0.1)',
+          overflow: 'auto',
+        }}
+      >
+        {PanelContent}
+      </Box>
+    )
+  }
+
+  return (
+    <Paper
+      sx={{
+        position: 'fixed',
+        right: 0,
+        top: 0,
+        bottom: 0,
+        width: 350,
+        zIndex: 100,
+        borderRadius: 0,
+        boxShadow: '-4px 0 20px rgba(0,0,0,0.1)',
+        overflow: 'auto',
+        backgroundColor: 'white',
+      }}
+    >
+      {PanelContent}
+    </Paper>
+  )
+}