feat: implement Phase 1 Bible reader improvements (2025 standards)

## Typography Enhancements - Add letter spacing control (0-2px, default 0.5px for WCAG compliance) - Add word spacing control (0-4px, default 0px) - Add paragraph spacing control (1.0-2.5x line height, default 1.8x) - Add max line length control (50-100ch, default 75ch for optimal readability) - Apply WCAG 2.1 SC 1.4.12 text spacing recommendations ## Multi-Color Highlighting System - Implement 7-color highlight palette (yellow, green, blue, purple, orange, pink, red) - Theme-aware highlight colors (light/dark/sepia modes) - Persistent visual highlights with database storage - Color picker UI with current highlight indicator - Support for highlight notes and tags (infrastructure ready) - Bulk highlight loading for performance - Add/update/remove highlight functionality ## Database Schema - Add Highlight model with verse relationship - Support for color, note, tags, and timestamps - Unique constraint per user-verse pair - Proper indexing for performance ## API Routes - POST /api/highlights - Create new highlight - GET /api/highlights - Get all user highlights - POST /api/highlights/bulk - Bulk fetch highlights for verses - PUT /api/highlights/[id] - Update highlight color/note/tags - DELETE /api/highlights/[id] - Remove highlight ## UI Improvements - Enhanced settings dialog with new typography controls - Highlight color picker menu - Verse menu updated with highlight option - Visual feedback for highlighted verses - Remove highlight button in color picker Note: Database migration pending - run `npx prisma db push` to apply schema 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-10 10:58:12 +00:00
parent a756f0808c
commit fc5d6604ff
5 changed files with 535 additions and 10 deletions
--- a/app/api/highlights/[id]/route.ts
+++ b/app/api/highlights/[id]/route.ts
@@ -0,0 +1,85 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+import { verifyToken } from '@/lib/auth'
+
+// PUT /api/highlights/[id]?locale=en - Update highlight
+// DELETE /api/highlights/[id]?locale=en - Delete highlight
+export async function PUT(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const authHeader = req.headers.get('authorization')
+    if (!authHeader) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const token = authHeader.replace('Bearer ', '')
+    const decoded = await verifyToken(token)
+    if (!decoded) {
+      return NextResponse.json({ success: false, error: 'Invalid token' }, { status: 401 })
+    }
+
+    const body = await req.json()
+    const { color, note, tags } = body
+
+    // Verify ownership
+    const existingHighlight = await prisma.highlight.findUnique({
+      where: { id: params.id }
+    })
+
+    if (!existingHighlight || existingHighlight.userId !== decoded.userId) {
+      return NextResponse.json({ success: false, error: 'Highlight not found' }, { status: 404 })
+    }
+
+    const highlight = await prisma.highlight.update({
+      where: { id: params.id },
+      data: {
+        ...(color && { color }),
+        ...(note !== undefined && { note }),
+        ...(tags && { tags })
+      }
+    })
+
+    return NextResponse.json({ success: true, highlight })
+  } catch (error) {
+    console.error('Error updating highlight:', error)
+    return NextResponse.json({ success: false, error: 'Failed to update highlight' }, { status: 500 })
+  }
+}
+
+export async function DELETE(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const authHeader = req.headers.get('authorization')
+    if (!authHeader) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const token = authHeader.replace('Bearer ', '')
+    const decoded = await verifyToken(token)
+    if (!decoded) {
+      return NextResponse.json({ success: false, error: 'Invalid token' }, { status: 401 })
+    }
+
+    // Verify ownership
+    const existingHighlight = await prisma.highlight.findUnique({
+      where: { id: params.id }
+    })
+
+    if (!existingHighlight || existingHighlight.userId !== decoded.userId) {
+      return NextResponse.json({ success: false, error: 'Highlight not found' }, { status: 404 })
+    }
+
+    await prisma.highlight.delete({
+      where: { id: params.id }
+    })
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error deleting highlight:', error)
+    return NextResponse.json({ success: false, error: 'Failed to delete highlight' }, { status: 500 })
+  }
+}
--- a/app/api/highlights/bulk/route.ts
+++ b/app/api/highlights/bulk/route.ts
@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+import { verifyToken } from '@/lib/auth'
+
+// POST /api/highlights/bulk?locale=en - Get highlights for multiple verses
+export async function POST(req: NextRequest) {
+  try {
+    const authHeader = req.headers.get('authorization')
+    if (!authHeader) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const token = authHeader.replace('Bearer ', '')
+    const decoded = await verifyToken(token)
+    if (!decoded) {
+      return NextResponse.json({ success: false, error: 'Invalid token' }, { status: 401 })
+    }
+
+    const body = await req.json()
+    const { verseIds } = body
+
+    if (!Array.isArray(verseIds)) {
+      return NextResponse.json({ success: false, error: 'verseIds must be an array' }, { status: 400 })
+    }
+
+    const highlights = await prisma.highlight.findMany({
+      where: {
+        userId: decoded.userId,
+        verseId: { in: verseIds }
+      }
+    })
+
+    // Convert array to object keyed by verseId for easier lookup
+    const highlightsMap: { [key: string]: any } = {}
+    highlights.forEach(highlight => {
+      highlightsMap[highlight.verseId] = highlight
+    })
+
+    return NextResponse.json({ success: true, highlights: highlightsMap })
+  } catch (error) {
+    console.error('Error fetching highlights:', error)
+    return NextResponse.json({ success: false, error: 'Failed to fetch highlights' }, { status: 500 })
+  }
+}
--- a/app/api/highlights/route.ts
+++ b/app/api/highlights/route.ts
@@ -0,0 +1,81 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/lib/prisma'
+import { verifyToken } from '@/lib/auth'
+
+// GET /api/highlights?locale=en - Get all highlights for user
+// POST /api/highlights?locale=en - Create new highlight
+export async function GET(req: NextRequest) {
+  try {
+    const authHeader = req.headers.get('authorization')
+    if (!authHeader) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const token = authHeader.replace('Bearer ', '')
+    const decoded = await verifyToken(token)
+    if (!decoded) {
+      return NextResponse.json({ success: false, error: 'Invalid token' }, { status: 401 })
+    }
+
+    const highlights = await prisma.highlight.findMany({
+      where: { userId: decoded.userId },
+      orderBy: { createdAt: 'desc' }
+    })
+
+    return NextResponse.json({ success: true, highlights })
+  } catch (error) {
+    console.error('Error fetching highlights:', error)
+    return NextResponse.json({ success: false, error: 'Failed to fetch highlights' }, { status: 500 })
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const authHeader = req.headers.get('authorization')
+    if (!authHeader) {
+      return NextResponse.json({ success: false, error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const token = authHeader.replace('Bearer ', '')
+    const decoded = await verifyToken(token)
+    if (!decoded) {
+      return NextResponse.json({ success: false, error: 'Invalid token' }, { status: 401 })
+    }
+
+    const body = await req.json()
+    const { verseId, color, note, tags } = body
+
+    if (!verseId || !color) {
+      return NextResponse.json({ success: false, error: 'Missing required fields' }, { status: 400 })
+    }
+
+    // Check if highlight already exists
+    const existingHighlight = await prisma.highlight.findUnique({
+      where: {
+        userId_verseId: {
+          userId: decoded.userId,
+          verseId
+        }
+      }
+    })
+
+    if (existingHighlight) {
+      return NextResponse.json({ success: false, error: 'Highlight already exists' }, { status: 400 })
+    }
+
+    const highlight = await prisma.highlight.create({
+      data: {
+        userId: decoded.userId,
+        verseId,
+        color,
+        note,
+        tags: tags || []
+      }
+    })
+
+    return NextResponse.json({ success: true, highlight })
+  } catch (error) {
+    console.error('Error creating highlight:', error)
+    return NextResponse.json({ success: false, error: 'Failed to create highlight' }, { status: 500 })
+  }
+}