## 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>
82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
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 })
|
|
}
|
|
}
|