Archived
Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Marko (Hermes Implementer)
|
9bf2fa8e31 | ||
  markoandreid
|
f84a593c5d |
@@ -1,38 +1,57 @@
|
||||
# Cloud Reader
|
||||
|
||||
A full-stack cloud-based e-book reader application with cross-device synchronization.
|
||||
A full-stack e-book reader application with cross-device sync. Upload EPUB/PDF files, track reading progress, bookmark passages, take notes, and customize your reading experience.
|
||||
|
||||
## Architecture
|
||||
|
||||
- **Backend**: Django 5.x + Django REST Framework
|
||||
- **Frontend**: React with TypeScript
|
||||
- **Database**: PostgreSQL
|
||||
- **Monorepo**: Yarn workspaces
|
||||
```
|
||||
cloud-reader/
|
||||
├── backend/ # Django REST API (canonical backend)
|
||||
│ ├── config/ # Django project settings
|
||||
│ ├── apps/
|
||||
│ │ ├── users/ # User auth (JWT)
|
||||
│ │ ├── books/ # Books, e-books, reading progress, settings
|
||||
│ │ └── annotations/ # Bookmarks and notes
|
||||
│ ├── manage.py
|
||||
│ └── requirements.txt
|
||||
├── frontend/ # React + Vite + TypeScript (canonical frontend)
|
||||
│ ├── src/
|
||||
│ │ ├── api/ # API client (axios with JWT refresh)
|
||||
│ │ ├── components/ # Reusable components
|
||||
│ │ ├── context/ # Auth and annotations context
|
||||
│ │ ├── hooks/ # Custom hooks
|
||||
│ │ ├── pages/ # Route pages (Library, Reader, AddBook, Auth, Settings)
|
||||
│ │ └── types/ # TypeScript type definitions
|
||||
│ └── package.json
|
||||
└── docker-compose.yml
|
||||
```
|
||||
|
||||
## Getting Started
|
||||
## Quick Start
|
||||
|
||||
### Prerequisites
|
||||
- Python 3.12+
|
||||
- Node.js 20+
|
||||
- PostgreSQL 15+
|
||||
### Docker (recommended)
|
||||
```bash
|
||||
docker compose up --build
|
||||
```
|
||||
- **Frontend:** http://localhost:5173
|
||||
- **Backend API:** http://localhost:8000/api/
|
||||
|
||||
### Backend Setup
|
||||
### Backend (standalone)
|
||||
```bash
|
||||
cd backend
|
||||
python -m venv .venv
|
||||
source .venv/bin/activate
|
||||
pip install -r requirements.txt
|
||||
python manage.py migrate
|
||||
python manage.py runserver
|
||||
```
|
||||
|
||||
### Frontend Setup
|
||||
### Frontend (standalone)
|
||||
```bash
|
||||
cd frontend
|
||||
yarn install
|
||||
yarn dev
|
||||
```
|
||||
|
||||
## Projects
|
||||
|
||||
See [Gitea Issues](https://gitea-dev.codescripters.org/crisleo-hermes/cloud-reader/issues) for the full roadmap.
|
||||
## Migration Notes
|
||||
Consolidated from duplicate `api/` + `web/` into single `backend/` + `frontend/` canonical structure.
|
||||
- `backend/` kept as canonical; `api/` features (e-book uploads, reading progress, reading settings) merged in.
|
||||
- `frontend/` kept as canonical; `web/` pages (Library, Reader, AddBook, Auth, Settings) merged in.
|
||||
- `api/` and `web/` directories removed.
|
||||
@@ -1,20 +0,0 @@
|
||||
from django.contrib import admin
|
||||
|
||||
from books.models import Book, ReadingProgress, ReadingSettings
|
||||
|
||||
|
||||
@admin.register(Book)
|
||||
class BookAdmin(admin.ModelAdmin):
|
||||
list_display = ["title", "author", "user", "created_at"]
|
||||
list_filter = ["created_at", "user"]
|
||||
search_fields = ["title", "author"]
|
||||
|
||||
|
||||
@admin.register(ReadingProgress)
|
||||
class ReadingProgressAdmin(admin.ModelAdmin):
|
||||
list_display = ["book", "user", "current_position", "updated_at"]
|
||||
|
||||
|
||||
@admin.register(ReadingSettings)
|
||||
class ReadingSettingsAdmin(admin.ModelAdmin):
|
||||
list_display = ["user", "font_size", "font_style", "background_color"]
|
||||
@@ -1,6 +0,0 @@
|
||||
from django.apps import AppConfig
|
||||
|
||||
|
||||
class BooksConfig(AppConfig):
|
||||
default_auto_field = "django.db.models.BigAutoField"
|
||||
name = "books"
|
||||
@@ -1 +0,0 @@
|
||||
# management/__init__.py
|
||||
@@ -1 +0,0 @@
|
||||
# management/commands/__init__.py
|
||||
@@ -1,134 +0,0 @@
|
||||
"""
|
||||
Management command to seed sample book data for development and testing.
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
from typing import Any
|
||||
|
||||
from django.core.management.base import BaseCommand
|
||||
|
||||
from books.models import Book, ReadingStatus
|
||||
|
||||
SAMPLE_BOOKS: list[dict[str, Any]] = [
|
||||
{
|
||||
"title": "The Great Gatsby",
|
||||
"author": "F. Scott Fitzgerald",
|
||||
"genre": "Classic Literature",
|
||||
"description": "A story of the mysteriously wealthy Jay Gatsby and his love for the beautiful Daisy Buchanan.",
|
||||
"reading_status": ReadingStatus.FINISHED,
|
||||
},
|
||||
{
|
||||
"title": "To Kill a Mockingbird",
|
||||
"author": "Harper Lee",
|
||||
"genre": "Classic Literature",
|
||||
"description": "The unforgettable novel of a childhood in a sleepy Southern town and the crisis of conscience that rocked it.",
|
||||
"reading_status": ReadingStatus.FINISHED,
|
||||
},
|
||||
{
|
||||
"title": "1984",
|
||||
"author": "George Orwell",
|
||||
"genre": "Science Fiction",
|
||||
"description": "A dystopian social science fiction novel and cautionary tale about the future of totalitarianism.",
|
||||
"reading_status": ReadingStatus.READING,
|
||||
},
|
||||
{
|
||||
"title": "Dune",
|
||||
"author": "Frank Herbert",
|
||||
"genre": "Science Fiction",
|
||||
"description": "Set on the desert planet Arrakis, it is one of the world's best-selling science fiction novels.",
|
||||
"reading_status": ReadingStatus.FINISHED,
|
||||
},
|
||||
{
|
||||
"title": "The Hobbit",
|
||||
"author": "J.R.R. Tolkien",
|
||||
"genre": "Fantasy",
|
||||
"description": "Bilbo Baggins is swept into a quest to reclaim the lost Dwarf Kingdom of Erebor from the fearsome dragon Smaug.",
|
||||
"reading_status": ReadingStatus.FINISHED,
|
||||
},
|
||||
{
|
||||
"title": "Pride and Prejudice",
|
||||
"author": "Jane Austen",
|
||||
"genre": "Romance",
|
||||
"description": "A romantic novel of manners that follows the character development of Elizabeth Bennet.",
|
||||
"reading_status": ReadingStatus.WANT_TO_READ,
|
||||
},
|
||||
{
|
||||
"title": "The Martian",
|
||||
"author": "Andy Weir",
|
||||
"genre": "Science Fiction",
|
||||
"description": "An astronaut becomes stranded alone on Mars and must find a way to signal that he is alive.",
|
||||
"reading_status": ReadingStatus.READING,
|
||||
},
|
||||
{
|
||||
"title": "The Catcher in the Rye",
|
||||
"author": "J.D. Salinger",
|
||||
"genre": "Classic Literature",
|
||||
"description": "The story of Holden Caulfield's experiences in New York City after being expelled from prep school.",
|
||||
"reading_status": ReadingStatus.DNF,
|
||||
},
|
||||
{
|
||||
"title": "The Alchemist",
|
||||
"author": "Paulo Coelho",
|
||||
"genre": "Philosophy",
|
||||
"description": "A young Andalusian shepherd follows his dream to find treasure at the Egyptian pyramids.",
|
||||
"reading_status": ReadingStatus.WANT_TO_READ,
|
||||
},
|
||||
{
|
||||
"title": "Neuromancer",
|
||||
"author": "William Gibson",
|
||||
"genre": "Science Fiction",
|
||||
"description": "The novel that launched the cyberpunk genre, following washed-up computer hacker Henry Case.",
|
||||
"reading_status": ReadingStatus.FINISHED,
|
||||
},
|
||||
{
|
||||
"title": "The Name of the Wind",
|
||||
"author": "Patrick Rothfuss",
|
||||
"genre": "Fantasy",
|
||||
"description": "The tale of the magically gifted young man who grows to be the most notorious wizard his world has ever seen.",
|
||||
"reading_status": ReadingStatus.READING,
|
||||
},
|
||||
{
|
||||
"title": "Gone Girl",
|
||||
"author": "Gillian Flynn",
|
||||
"genre": "Thriller",
|
||||
"description": "A mystery thriller about a wife's disappearance on the day of her fifth wedding anniversary.",
|
||||
"reading_status": ReadingStatus.FINISHED,
|
||||
},
|
||||
{
|
||||
"title": "Sapiens",
|
||||
"author": "Yuval Noah Harari",
|
||||
"genre": "Non-Fiction",
|
||||
"description": "A brief history of humankind, exploring how biology and history have defined us.",
|
||||
"reading_status": ReadingStatus.FINISHED,
|
||||
},
|
||||
{
|
||||
"title": "The Road",
|
||||
"author": "Cormac McCarthy",
|
||||
"genre": "Post-Apocalyptic",
|
||||
"description": "A father and his young son walk alone through burned America heading toward the coast.",
|
||||
"reading_status": ReadingStatus.WANT_TO_READ,
|
||||
},
|
||||
{
|
||||
"title": "The Three-Body Problem",
|
||||
"author": "Cixin Liu",
|
||||
"genre": "Science Fiction",
|
||||
"description": "The first novel in the Remembrance of Earth's Past trilogy, a blend of physics and alien contact.",
|
||||
"reading_status": ReadingStatus.READING,
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
class Command(BaseCommand):
|
||||
"""Seed the database with sample books."""
|
||||
|
||||
help = "Seeds the database with sample books for development and testing."
|
||||
|
||||
def handle(self, *args: Any, **options: Any) -> str | None:
|
||||
for i, book_data in enumerate(SAMPLE_BOOKS):
|
||||
Book.objects.get_or_create(
|
||||
title=book_data["title"],
|
||||
author=book_data["author"],
|
||||
defaults=book_data,
|
||||
)
|
||||
count = Book.objects.count()
|
||||
self.stdout.write(self.style.SUCCESS(f"Seeded {count} books into the database."))
|
||||
@@ -1,56 +0,0 @@
|
||||
import django.db.models.deletion
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
initial = True
|
||||
|
||||
dependencies: list = []
|
||||
|
||||
operations = [
|
||||
migrations.CreateModel(
|
||||
name="Book",
|
||||
fields=[
|
||||
(
|
||||
"id",
|
||||
models.BigAutoField(
|
||||
auto_created=True,
|
||||
primary_key=True,
|
||||
serialize=False,
|
||||
verbose_name="ID",
|
||||
),
|
||||
),
|
||||
("title", models.CharField(db_index=True, max_length=500)),
|
||||
("author", models.CharField(db_index=True, max_length=300)),
|
||||
("genre", models.CharField(db_index=True, max_length=100)),
|
||||
("description", models.TextField(blank=True, default="")),
|
||||
(
|
||||
"reading_status",
|
||||
models.CharField(
|
||||
choices=[
|
||||
("want_to_read", "Want to Read"),
|
||||
("reading", "Reading"),
|
||||
("finished", "Finished"),
|
||||
("dnf", "Did Not Finish"),
|
||||
],
|
||||
db_index=True,
|
||||
default="want_to_read",
|
||||
max_length=20,
|
||||
),
|
||||
),
|
||||
("cover_url", models.URLField(blank=True, default="")),
|
||||
("created_at", models.DateTimeField(auto_now_add=True)),
|
||||
("updated_at", models.DateTimeField(auto_now=True)),
|
||||
],
|
||||
options={
|
||||
"ordering": ["title"],
|
||||
"indexes": [
|
||||
models.Index(
|
||||
fields=["title", "author", "genre"],
|
||||
name="books_book_title_2cc25e_idx",
|
||||
)
|
||||
],
|
||||
},
|
||||
),
|
||||
]
|
||||
@@ -1 +0,0 @@
|
||||
# migrations/__init__.py
|
||||
@@ -1,111 +0,0 @@
|
||||
from enum import StrEnum
|
||||
from pathlib import Path
|
||||
|
||||
from django.conf import settings
|
||||
from django.core.validators import FileExtensionValidator
|
||||
from django.db import models
|
||||
from django.db.models.signals import post_delete
|
||||
from django.dispatch import receiver
|
||||
|
||||
|
||||
class FontStyle(StrEnum):
|
||||
SANS_SERIF = "sans-serif"
|
||||
SERIF = "serif"
|
||||
MONOSPACE = "monospace"
|
||||
|
||||
|
||||
class BackgroundColor(StrEnum):
|
||||
WHITE = "#ffffff"
|
||||
SEPIA = "#f4e4c1"
|
||||
DARK = "#1a1a2e"
|
||||
GREEN = "#c7edcc"
|
||||
|
||||
|
||||
class Book(models.Model):
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="books",
|
||||
)
|
||||
title = models.CharField(max_length=512)
|
||||
author = models.CharField(max_length=256, blank=True, default="")
|
||||
file = models.FileField(
|
||||
upload_to="books/%Y/%m/%d/",
|
||||
validators=[FileExtensionValidator(allowed_extensions=["epub", "pdf"])],
|
||||
)
|
||||
cover_image = models.ImageField(upload_to="covers/%Y/%m/%d/", blank=True, null=True)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
ordering = ["-created_at"]
|
||||
indexes = [
|
||||
models.Index(fields=["user", "-created_at"]),
|
||||
]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return self.title
|
||||
|
||||
def filename(self) -> str:
|
||||
return Path(self.file.name).name
|
||||
|
||||
|
||||
@receiver(post_delete, sender=Book)
|
||||
def _auto_delete_file_on_delete(sender: type[Book], instance: Book, **kwargs: object) -> None:
|
||||
"""Delete the uploaded file when the Book record is deleted."""
|
||||
if instance.file:
|
||||
instance.file.delete(save=False)
|
||||
if instance.cover_image:
|
||||
instance.cover_image.delete(save=False)
|
||||
|
||||
|
||||
class ReadingProgress(models.Model):
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="reading_progress",
|
||||
)
|
||||
book = models.OneToOneField(
|
||||
Book,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="reading_progress",
|
||||
)
|
||||
current_position = models.FloatField(default=0.0)
|
||||
"""Position in the book as a percentage (0.0 to 100.0)"""
|
||||
last_page = models.IntegerField(default=0)
|
||||
"""Last page/paragraph index for granular tracking"""
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
verbose_name_plural = "reading progress"
|
||||
unique_together = [("user", "book")]
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"{self.book.title} — {self.current_position:.1f}%"
|
||||
|
||||
|
||||
class ReadingSettings(models.Model):
|
||||
user = models.OneToOneField(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="reading_settings",
|
||||
)
|
||||
font_size = models.IntegerField(default=18)
|
||||
"""Font size in pixels (min 12, max 36)"""
|
||||
font_style = models.CharField(
|
||||
max_length=20,
|
||||
choices=[(s.value, s.name.replace("_", " ").title()) for s in FontStyle],
|
||||
default=FontStyle.SANS_SERIF.value,
|
||||
)
|
||||
background_color = models.CharField(
|
||||
max_length=7,
|
||||
choices=[(c.value, c.name.title()) for c in BackgroundColor],
|
||||
default=BackgroundColor.WHITE.value,
|
||||
)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
verbose_name_plural = "reading settings"
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"Settings for {self.user}"
|
||||
@@ -1,136 +0,0 @@
|
||||
from rest_framework import serializers
|
||||
|
||||
from books.models import Book, FontStyle, BackgroundColor, ReadingProgress, ReadingSettings
|
||||
|
||||
|
||||
class BookListSerializer(serializers.ModelSerializer):
|
||||
"""Lightweight serializer for the library listing — no file or progress data."""
|
||||
|
||||
filename = serializers.CharField(read_only=True)
|
||||
progress = serializers.SerializerMethodField()
|
||||
|
||||
class Meta:
|
||||
model = Book
|
||||
fields = [
|
||||
"id",
|
||||
"title",
|
||||
"author",
|
||||
"filename",
|
||||
"cover_image",
|
||||
"created_at",
|
||||
"progress",
|
||||
]
|
||||
|
||||
def get_progress(self, obj: Book) -> float | None:
|
||||
try:
|
||||
return obj.reading_progress.current_position
|
||||
except ReadingProgress.DoesNotExist:
|
||||
return None
|
||||
|
||||
|
||||
class BookDetailSerializer(serializers.ModelSerializer):
|
||||
"""Full serializer for the reader view — includes file URL and progress."""
|
||||
|
||||
filename = serializers.CharField(read_only=True)
|
||||
file_url = serializers.SerializerMethodField()
|
||||
progress = serializers.SerializerMethodField()
|
||||
|
||||
class Meta:
|
||||
model = Book
|
||||
fields = [
|
||||
"id",
|
||||
"title",
|
||||
"author",
|
||||
"filename",
|
||||
"file_url",
|
||||
"cover_image",
|
||||
"created_at",
|
||||
"updated_at",
|
||||
"progress",
|
||||
]
|
||||
|
||||
def get_file_url(self, obj: Book) -> str:
|
||||
request = self.context.get("request")
|
||||
if request and obj.file:
|
||||
return request.build_absolute_uri(obj.file.url)
|
||||
return ""
|
||||
|
||||
def get_progress(self, obj: Book) -> dict | None:
|
||||
try:
|
||||
rp = obj.reading_progress
|
||||
return {
|
||||
"current_position": rp.current_position,
|
||||
"last_page": rp.last_page,
|
||||
}
|
||||
except ReadingProgress.DoesNotExist:
|
||||
return None
|
||||
|
||||
|
||||
class BookUploadSerializer(serializers.ModelSerializer):
|
||||
"""Serializer for uploading a new book."""
|
||||
|
||||
class Meta:
|
||||
model = Book
|
||||
fields = ["title", "author", "file", "cover_image"]
|
||||
extra_kwargs = {
|
||||
"title": {"required": True},
|
||||
"file": {"required": True},
|
||||
}
|
||||
|
||||
def validate_file(self, value: object) -> object:
|
||||
import os
|
||||
if isinstance(value, type(None)):
|
||||
return value
|
||||
ext = os.path.splitext(str(getattr(value, 'name', '')))[1].lower()
|
||||
if ext not in (".epub", ".pdf"):
|
||||
raise serializers.ValidationError(
|
||||
"Only EPUB and PDF files are supported."
|
||||
)
|
||||
return value
|
||||
|
||||
def create(self, validated_data: dict) -> Book:
|
||||
validated_data["user"] = self.context["request"].user
|
||||
return super().create(validated_data)
|
||||
|
||||
|
||||
class ReadingProgressSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = ReadingProgress
|
||||
fields = ["current_position", "last_page"]
|
||||
extra_kwargs = {
|
||||
"current_position": {"required": True, "min_value": 0.0, "max_value": 100.0},
|
||||
}
|
||||
|
||||
def validate_current_position(self, value: float) -> float:
|
||||
if value < 0.0 or value > 100.0:
|
||||
raise serializers.ValidationError(
|
||||
"Position must be between 0.0 and 100.0."
|
||||
)
|
||||
return value
|
||||
|
||||
|
||||
class ReadingSettingsSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = ReadingSettings
|
||||
fields = ["font_size", "font_style", "background_color"]
|
||||
|
||||
def validate_font_size(self, value: int) -> int:
|
||||
if value < 12 or value > 36:
|
||||
raise serializers.ValidationError("Font size must be between 12 and 36.")
|
||||
return value
|
||||
|
||||
def validate_font_style(self, value: str) -> str:
|
||||
valid = [s.value for s in FontStyle]
|
||||
if value not in valid:
|
||||
raise serializers.ValidationError(
|
||||
f"Font style must be one of: {', '.join(valid)}"
|
||||
)
|
||||
return value
|
||||
|
||||
def validate_background_color(self, value: str) -> str:
|
||||
valid = [c.value for c in BackgroundColor]
|
||||
if value not in valid:
|
||||
raise serializers.ValidationError(
|
||||
f"Background color must be one of: {', '.join(valid)}"
|
||||
)
|
||||
return value
|
||||
@@ -1,15 +0,0 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from books.views import BookViewSet, ReadingSettingsViewSet
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register(r"books", BookViewSet, basename="book")
|
||||
|
||||
urlpatterns = [
|
||||
path("", include(router.urls)),
|
||||
path("settings/", ReadingSettingsViewSet.as_view({
|
||||
"get": "list",
|
||||
"patch": "partial_update",
|
||||
}), name="reading-settings"),
|
||||
]
|
||||
@@ -1,88 +0,0 @@
|
||||
from django.shortcuts import get_object_or_404
|
||||
from rest_framework import parsers, permissions, status, viewsets
|
||||
from rest_framework.decorators import action
|
||||
from rest_framework.request import Request
|
||||
from rest_framework.response import Response
|
||||
|
||||
from books.models import Book, ReadingProgress, ReadingSettings
|
||||
from books.serializers import (
|
||||
BookDetailSerializer,
|
||||
BookListSerializer,
|
||||
BookUploadSerializer,
|
||||
ReadingProgressSerializer,
|
||||
ReadingSettingsSerializer,
|
||||
)
|
||||
|
||||
|
||||
class IsBookOwner(permissions.BasePermission):
|
||||
"""Only the owner of a book can access it."""
|
||||
|
||||
def has_object_permission(
|
||||
self, request: Request, view: object, obj: Book
|
||||
) -> bool:
|
||||
return obj.user == request.user
|
||||
|
||||
|
||||
class BookViewSet(viewsets.ModelViewSet):
|
||||
"""API endpoint for managing user books."""
|
||||
|
||||
parser_classes = [parsers.MultiPartParser, parsers.FormParser, parsers.JSONParser]
|
||||
permission_classes = [permissions.IsAuthenticated, IsBookOwner]
|
||||
|
||||
def get_serializer_class(self) -> type:
|
||||
if self.action == "create":
|
||||
return BookUploadSerializer
|
||||
if self.action == "list":
|
||||
return BookListSerializer
|
||||
return BookDetailSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
return (
|
||||
Book.objects.filter(user=self.request.user)
|
||||
.select_related("reading_progress", "user")
|
||||
.prefetch_related()
|
||||
)
|
||||
|
||||
@action(detail=True, methods=["get", "patch"])
|
||||
def progress(self, request: Request, pk: int | None = None) -> Response:
|
||||
"""Get or update reading progress for a specific book."""
|
||||
book = self.get_object()
|
||||
progress, _created = ReadingProgress.objects.get_or_create(
|
||||
user=request.user,
|
||||
book=book,
|
||||
)
|
||||
|
||||
if request.method == "GET":
|
||||
serializer = ReadingProgressSerializer(progress)
|
||||
return Response(serializer.data)
|
||||
|
||||
serializer = ReadingProgressSerializer(progress, data=request.data, partial=True)
|
||||
serializer.is_valid(raise_exception=True)
|
||||
serializer.save()
|
||||
return Response(serializer.data)
|
||||
|
||||
|
||||
class ReadingSettingsViewSet(viewsets.GenericViewSet):
|
||||
"""API endpoint for user reading settings."""
|
||||
|
||||
permission_classes = [permissions.IsAuthenticated]
|
||||
serializer_class = ReadingSettingsSerializer
|
||||
|
||||
def get_queryset(self):
|
||||
return ReadingSettings.objects.filter(user=self.request.user)
|
||||
|
||||
def list(self, request: Request) -> Response:
|
||||
settings, _created = ReadingSettings.objects.get_or_create(
|
||||
user=request.user,
|
||||
)
|
||||
serializer = self.get_serializer(settings)
|
||||
return Response(serializer.data)
|
||||
|
||||
def partial_update(self, request: Request) -> Response:
|
||||
settings, _created = ReadingSettings.objects.get_or_create(
|
||||
user=request.user,
|
||||
)
|
||||
serializer = self.get_serializer(settings, data=request.data, partial=True)
|
||||
serializer.is_valid(raise_exception=True)
|
||||
serializer.save()
|
||||
return Response(serializer.data)
|
||||
@@ -1,21 +0,0 @@
|
||||
#!/usr/bin/env python
|
||||
"""Django's command-line utility for administrative tasks."""
|
||||
import os
|
||||
import sys
|
||||
|
||||
|
||||
def main() -> None:
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "project.settings")
|
||||
try:
|
||||
from django.core.management import execute_from_command_line
|
||||
except ImportError as exc:
|
||||
raise ImportError(
|
||||
"Couldn't import Django. Are you sure it's installed and "
|
||||
"available on your PYTHONPATH environment variable? Did you "
|
||||
"forget to activate a virtual environment?"
|
||||
) from exc
|
||||
execute_from_command_line(sys.argv)
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
@@ -1,109 +0,0 @@
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
BASE_DIR = Path(__file__).resolve().parent.parent
|
||||
|
||||
SECRET_KEY = os.environ.get("DJANGO_SECRET_KEY", "django-insecure-dev-change-me")
|
||||
DEBUG = os.environ.get("DJANGO_DEBUG", "True").lower() in ("true", "1", "yes")
|
||||
ALLOWED_HOSTS: list[str] = ["*"]
|
||||
|
||||
INSTALLED_APPS = [
|
||||
"django.contrib.admin",
|
||||
"django.contrib.auth",
|
||||
"django.contrib.contenttypes",
|
||||
"django.contrib.sessions",
|
||||
"django.contrib.messages",
|
||||
"django.contrib.staticfiles",
|
||||
# Third-party
|
||||
"rest_framework",
|
||||
"rest_framework.authtoken",
|
||||
"corsheaders",
|
||||
# Local
|
||||
"books",
|
||||
]
|
||||
|
||||
MIDDLEWARE = [
|
||||
"corsheaders.middleware.CorsMiddleware",
|
||||
"django.middleware.security.SecurityMiddleware",
|
||||
"django.contrib.sessions.middleware.SessionMiddleware",
|
||||
"django.middleware.common.CommonMiddleware",
|
||||
"django.middleware.csrf.CsrfViewMiddleware",
|
||||
"django.contrib.auth.middleware.AuthenticationMiddleware",
|
||||
"django.contrib.messages.middleware.MessageMiddleware",
|
||||
"django.middleware.clickjacking.XFrameOptionsMiddleware",
|
||||
]
|
||||
|
||||
ROOT_URLCONF = "project.urls"
|
||||
|
||||
TEMPLATES = [
|
||||
{
|
||||
"BACKEND": "django.template.backends.django.DjangoTemplates",
|
||||
"DIRS": [],
|
||||
"APP_DIRS": True,
|
||||
"OPTIONS": {
|
||||
"context_processors": [
|
||||
"django.template.context_processors.debug",
|
||||
"django.template.context_processors.request",
|
||||
"django.contrib.auth.context_processors.auth",
|
||||
"django.contrib.messages.context_processors.messages",
|
||||
],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
WSGI_APPLICATION = "project.wsgi.application"
|
||||
|
||||
# ── Database ──────────────────────────────────────────────
|
||||
_database_url = os.environ.get(
|
||||
"DATABASE_URL",
|
||||
"postgres://cloudreader:cloudreader@localhost:5432/cloudreader",
|
||||
)
|
||||
_db_parts = _database_url.replace("postgres://", "").split("@")
|
||||
_credentials, _host_db = _db_parts[0], _db_parts[1]
|
||||
_db_user, _db_pass = _credentials.split(":")
|
||||
_host_port, _db_name = _host_db.split("/")
|
||||
_db_host = _host_port.split(":")[0]
|
||||
_db_port = _host_port.split(":")[1] if ":" in _host_port else "5432"
|
||||
|
||||
DATABASES = {
|
||||
"default": {
|
||||
"ENGINE": "django.db.backends.postgresql",
|
||||
"NAME": _db_name,
|
||||
"USER": _db_user,
|
||||
"PASSWORD": _db_pass,
|
||||
"HOST": _db_host,
|
||||
"PORT": _db_port,
|
||||
}
|
||||
}
|
||||
|
||||
DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
|
||||
|
||||
# ── Auth / Password Validation ────────────────────────────
|
||||
AUTH_PASSWORD_VALIDATORS = [
|
||||
{"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator"},
|
||||
]
|
||||
|
||||
# ── DRF ───────────────────────────────────────────────────
|
||||
REST_FRAMEWORK = {
|
||||
"DEFAULT_AUTHENTICATION_CLASSES": [
|
||||
"rest_framework.authentication.TokenAuthentication",
|
||||
"rest_framework.authentication.SessionAuthentication",
|
||||
],
|
||||
"DEFAULT_PERMISSION_CLASSES": [
|
||||
"rest_framework.permissions.IsAuthenticated",
|
||||
],
|
||||
}
|
||||
|
||||
# ── CORS ──────────────────────────────────────────────────
|
||||
CORS_ALLOW_ALL_ORIGINS = True # dev only
|
||||
|
||||
# ── Media / Uploads ───────────────────────────────────────
|
||||
MEDIA_URL = "/media/"
|
||||
MEDIA_ROOT = BASE_DIR / "media"
|
||||
|
||||
# ── i18n / Static ─────────────────────────────────────────
|
||||
LANGUAGE_CODE = "en-us"
|
||||
TIME_ZONE = "UTC"
|
||||
USE_I18N = True
|
||||
USE_TZ = True
|
||||
STATIC_URL = "static/"
|
||||
@@ -1,7 +0,0 @@
|
||||
from django.contrib import admin
|
||||
from django.urls import include, path
|
||||
|
||||
urlpatterns = [
|
||||
path("admin/", admin.site.urls),
|
||||
path("api/", include("books.urls")),
|
||||
]
|
||||
@@ -1,6 +0,0 @@
|
||||
import os
|
||||
|
||||
from django.core.wsgi import get_wsgi_application
|
||||
|
||||
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "project.settings")
|
||||
application = get_wsgi_application()
|
||||
@@ -1,21 +0,0 @@
|
||||
[project]
|
||||
name = "api"
|
||||
version = "1.0.0"
|
||||
description = "Cloud Reader API — Book Search and Discovery"
|
||||
requires-python = ">=3.12"
|
||||
dependencies = [
|
||||
"django>=5.1,<6.0",
|
||||
"djangorestframework>=3.15,<4.0",
|
||||
"django-cors-headers>=4.4,<5.0",
|
||||
"django-filter>=24.3,<25.0",
|
||||
"psycopg2-binary>=2.9,<3.0",
|
||||
"pydantic>=2.0,<3.0",
|
||||
"pydantic-settings>=2.0,<3.0",
|
||||
]
|
||||
|
||||
[build-system]
|
||||
requires = ["setuptools"]
|
||||
build-backend = "setuptools.build_meta"
|
||||
|
||||
[tool.setuptools.packages.find]
|
||||
include = ["books*", "project*"]
|
||||
Generated
-290
@@ -1,290 +0,0 @@
|
||||
version = 1
|
||||
revision = 3
|
||||
requires-python = ">=3.12"
|
||||
|
||||
[[package]]
|
||||
name = "annotated-types"
|
||||
version = "0.7.0"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/ee/67/531ea369ba64dcff5ec9c3402f9f51bf748cec26dde048a2f973a4eea7f5/annotated_types-0.7.0.tar.gz", hash = "sha256:aff07c09a53a08bc8cfccb9c85b05f1aa9a2a6f23728d790723543408344ce89", size = 16081, upload-time = "2024-05-20T21:33:25.928Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/78/b6/6307fbef88d9b5ee7421e68d78a9f162e0da4900bc5f5793f6d3d0e34fb8/annotated_types-0.7.0-py3-none-any.whl", hash = "sha256:1f02e8b43a8fbbc3f3e0d4f0f4bfc8131bcb4eebe8849b8e5c773f3a1c582a53", size = 13643, upload-time = "2024-05-20T21:33:24.1Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "api"
|
||||
version = "1.0.0"
|
||||
source = { editable = "." }
|
||||
dependencies = [
|
||||
{ name = "django" },
|
||||
{ name = "django-cors-headers" },
|
||||
{ name = "django-filter" },
|
||||
{ name = "djangorestframework" },
|
||||
{ name = "psycopg2-binary" },
|
||||
{ name = "pydantic" },
|
||||
{ name = "pydantic-settings" },
|
||||
]
|
||||
|
||||
[package.metadata]
|
||||
requires-dist = [
|
||||
{ name = "django", specifier = ">=5.1,<6.0" },
|
||||
{ name = "django-cors-headers", specifier = ">=4.4,<5.0" },
|
||||
{ name = "django-filter", specifier = ">=24.3,<25.0" },
|
||||
{ name = "djangorestframework", specifier = ">=3.15,<4.0" },
|
||||
{ name = "psycopg2-binary", specifier = ">=2.9,<3.0" },
|
||||
{ name = "pydantic", specifier = ">=2.0,<3.0" },
|
||||
{ name = "pydantic-settings", specifier = ">=2.0,<3.0" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "asgiref"
|
||||
version = "3.11.1"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/63/40/f03da1264ae8f7cfdbf9146542e5e7e8100a4c66ab48e791df9a03d3f6c0/asgiref-3.11.1.tar.gz", hash = "sha256:5f184dc43b7e763efe848065441eac62229c9f7b0475f41f80e207a114eda4ce", size = 38550, upload-time = "2026-02-03T13:30:14.33Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/5c/0a/a72d10ed65068e115044937873362e6e32fab1b7dce0046aeb224682c989/asgiref-3.11.1-py3-none-any.whl", hash = "sha256:e8667a091e69529631969fd45dc268fa79b99c92c5fcdda727757e52146ec133", size = 24345, upload-time = "2026-02-03T13:30:13.039Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "django"
|
||||
version = "5.2.14"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
dependencies = [
|
||||
{ name = "asgiref" },
|
||||
{ name = "sqlparse" },
|
||||
{ name = "tzdata", marker = "sys_platform == 'win32'" },
|
||||
]
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/65/95/95f7faa0950867afaa0bef2460c6263afd6a2c78cc9434046ed28160b015/django-5.2.14.tar.gz", hash = "sha256:58a63ba841662e5c686b57ba1fec52ddd68c0b93bd96ac3029d55728f00bf8a2", size = 10895118, upload-time = "2026-05-05T13:57:31.104Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/14/44/f172870cf87aa25afef48fb72adba89ee8b77fcab6f3b23d240b923f1528/django-5.2.14-py3-none-any.whl", hash = "sha256:6f712143bd3064310d1f50fac859c3e9a274bdcfc9595339853be7779297fc76", size = 8311320, upload-time = "2026-05-05T13:57:25.795Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "django-cors-headers"
|
||||
version = "4.9.0"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
dependencies = [
|
||||
{ name = "asgiref" },
|
||||
{ name = "django" },
|
||||
]
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/21/39/55822b15b7ec87410f34cd16ce04065ff390e50f9e29f31d6d116fc80456/django_cors_headers-4.9.0.tar.gz", hash = "sha256:fe5d7cb59fdc2c8c646ce84b727ac2bca8912a247e6e68e1fb507372178e59e8", size = 21458, upload-time = "2025-09-18T10:40:52.326Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/30/d8/19ed1e47badf477d17fb177c1c19b5a21da0fd2d9f093f23be3fb86c5fab/django_cors_headers-4.9.0-py3-none-any.whl", hash = "sha256:15c7f20727f90044dcee2216a9fd7303741a864865f0c3657e28b7056f61b449", size = 12809, upload-time = "2025-09-18T10:40:50.843Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "django-filter"
|
||||
version = "24.3"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
dependencies = [
|
||||
{ name = "django" },
|
||||
]
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/50/bc/dc19ae39c235332926dd0efe0951f663fa1a9fc6be8430737ff7fd566b20/django_filter-24.3.tar.gz", hash = "sha256:d8ccaf6732afd21ca0542f6733b11591030fa98669f8d15599b358e24a2cd9c3", size = 144444, upload-time = "2024-08-02T13:27:58.132Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/09/b1/92f1c30b47c1ebf510c35a2ccad9448f73437e5891bbd2b4febe357cc3de/django_filter-24.3-py3-none-any.whl", hash = "sha256:c4852822928ce17fb699bcfccd644b3574f1a2d80aeb2b4ff4f16b02dd49dc64", size = 95011, upload-time = "2024-08-02T13:27:55.616Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "djangorestframework"
|
||||
version = "3.17.1"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
dependencies = [
|
||||
{ name = "django" },
|
||||
]
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/ca/d7/c016e69fac19ff8afdc89db9d31d9ae43ae031e4d1993b20aca179b8301a/djangorestframework-3.17.1.tar.gz", hash = "sha256:a6def5f447fe78ff853bff1d47a3c59bf38f5434b031780b351b0c73a62db1a5", size = 905742, upload-time = "2026-03-24T16:58:33.705Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/5a/e1/2c516bdc83652b1a60c6119366ac2c0607b479ed05cd6093f916ca8928f8/djangorestframework-3.17.1-py3-none-any.whl", hash = "sha256:c3c74dd3e83a5a3efc37b3c18d92bd6f86a6791c7b7d4dff62bb068500e76457", size = 898844, upload-time = "2026-03-24T16:58:31.845Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "psycopg2-binary"
|
||||
version = "2.9.12"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/2a/60/a3624f79acea344c16fbef3a94d28b89a8042ddfb8f3e4ca83f538671409/psycopg2_binary-2.9.12.tar.gz", hash = "sha256:5ac9444edc768c02a6b6a591f070b8aae28ff3a99be57560ac996001580f294c", size = 379686, upload-time = "2026-04-21T09:40:34.304Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/e2/9f/ef4ef3c8e15083df90ca35265cfd1a081a2f0cc07bb229c6314c6af817f4/psycopg2_binary-2.9.12-cp312-cp312-macosx_10_13_x86_64.whl", hash = "sha256:5cdc05117180c5fa9c40eea8ea559ce64d73824c39d928b7da9fb5f6a9392433", size = 3712459, upload-time = "2026-04-20T23:34:30.549Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/b5/01/3dd14e46ba48c1e1a6ec58ee599fa1b5efa00c246d5046cd903d0eeb1af1/psycopg2_binary-2.9.12-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:d3227a3bc228c10d21011a99245edca923e4e8bf461857e869a507d9a41fe9f6", size = 3822936, upload-time = "2026-04-20T23:34:32.77Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/a6/f7/0640e4901119d8a9f7a1784b927f494e2198e213ceb593753d1f2c8b1b30/psycopg2_binary-2.9.12-cp312-cp312-manylinux2014_ppc64le.manylinux_2_17_ppc64le.whl", hash = "sha256:995ce929eede89db6254b50827e2b7fd61e50d11f0b116b29fffe4a2e53c4580", size = 4578676, upload-time = "2026-04-20T23:34:35.18Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/b0/55/44df3965b5f297c50cc0b1b594a31c67d6127a9d133045b8a66611b14dfb/psycopg2_binary-2.9.12-cp312-cp312-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:9fe06d93e72f1c048e731a2e3e7854a5bfaa58fc736068df90b352cefe66f03f", size = 4274917, upload-time = "2026-04-20T23:34:37.982Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/b0/4b/74535248b1eac0c9336862e8617c765ac94dac76f9e25d7c4a79588c8907/psycopg2_binary-2.9.12-cp312-cp312-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:40e7b28b63aaf737cb3a1edc3a9bbc9a9f4ad3dcb7152e8c1130e4050eddcb7d", size = 5894843, upload-time = "2026-04-20T23:34:40.856Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/f2/ba/f1bf8d2ae71868ad800b661099086ee52bc0f8d9f05be1acd8ebb06757cc/psycopg2_binary-2.9.12-cp312-cp312-manylinux_2_38_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:89d19a9f7899e8eb0656a2b3a08e0da04c720a06db6e0033eab5928aabe60fa9", size = 4110556, upload-time = "2026-04-20T23:34:44.016Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/45/46/c15706c338403b7c420bcc0c2905aad116cc064545686d8bf85f1999ea00/psycopg2_binary-2.9.12-cp312-cp312-musllinux_1_2_aarch64.whl", hash = "sha256:612b965daee295ae2da8f8218ce1d274645dc76ef3f1abf6a0a94fd57eff876d", size = 3655714, upload-time = "2026-04-20T23:34:46.233Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/b3/7c/a2d5dc09b64a4564db242a0fe418fde7d33f6f8259dd2c5b9d7def00fb5a/psycopg2_binary-2.9.12-cp312-cp312-musllinux_1_2_ppc64le.whl", hash = "sha256:b9a339b79d37c1b45f3235265f07cdeb0cb5ad7acd2ac7720a5920989c17c24e", size = 3301154, upload-time = "2026-04-20T23:34:49.528Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c0/e8/cc8c9a4ce71461f9ec548d38cadc41dc184b34c73e6455450775a9334ccd/psycopg2_binary-2.9.12-cp312-cp312-musllinux_1_2_riscv64.whl", hash = "sha256:3471336e1acfd9c7fe507b8bad5af9317b6a89294f9eb37bd9a030bb7bebcdc6", size = 3048882, upload-time = "2026-04-20T23:34:51.86Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/19/6a/31e2296bc0787c5ab75d3d118e40b239db8151b5192b90b77c72bc9256e9/psycopg2_binary-2.9.12-cp312-cp312-musllinux_1_2_x86_64.whl", hash = "sha256:7af18183109e23502c8b2ae7f6926c0882766f35b5175a4cd737ad825e4d7a1b", size = 3351298, upload-time = "2026-04-20T23:34:54.124Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/5f/a8/75f4e3e11203b590150abed2cf7794b9c9c9f7eceddae955191138b44dde/psycopg2_binary-2.9.12-cp312-cp312-win_amd64.whl", hash = "sha256:398fcd4db988c7d7d3713e2b8e18939776fd3fb447052daae4f24fa39daede4c", size = 2757230, upload-time = "2026-04-20T23:34:56.242Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/91/bb/4608c96f970f6e0c56572e87027ef4404f709382a3503e9934526d7ba051/psycopg2_binary-2.9.12-cp313-cp313-macosx_10_13_x86_64.whl", hash = "sha256:7c729a73c7b1b84de3582f73cdd27d905121dc2c531f3d9a3c32a3011033b965", size = 3712419, upload-time = "2026-04-20T23:34:58.754Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/5e/af/48f76af9d50d61cf390f8cd657b503168b089e2e9298e48465d029fcc713/psycopg2_binary-2.9.12-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:4413d0caef93c5cf50b96863df4c2efe8c269bf2267df353225595e7e15e8df7", size = 3822990, upload-time = "2026-04-20T23:35:00.821Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/7a/df/aba0f99397cd811d32e06fc0cc781f1f3ce98bc0e729cb423925085d781a/psycopg2_binary-2.9.12-cp313-cp313-manylinux2014_ppc64le.manylinux_2_17_ppc64le.whl", hash = "sha256:4dfcf8e45ebb0c663be34a3442f65e17311f3367089cd4e5e3a3e8e62c978777", size = 4578696, upload-time = "2026-04-20T23:35:03.409Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/95/9c/eaa74021ac4e4d5c2f83d82fc6615a63f4fe6c94dc4e94c3990427053f67/psycopg2_binary-2.9.12-cp313-cp313-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:c41321a14dd74aceb6a9a643b9253a334521babfa763fa873e33d89cfa122fb5", size = 4274982, upload-time = "2026-04-20T23:35:05.583Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/35/ed/c25deff98bd26187ba48b3b250a3ffc3037c46c5b89362534a15d200e0db/psycopg2_binary-2.9.12-cp313-cp313-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:83946ba43979ebfdc99a3cd0ee775c89f221df026984ba19d46133d8d75d3cd9", size = 5894867, upload-time = "2026-04-20T23:35:07.902Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/9a/81/8d0e21ca77373c6c9589e5c4528f6e8f0c08c62cafc76fb0bddb7a2cee22/psycopg2_binary-2.9.12-cp313-cp313-manylinux_2_38_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:411e85815652d13560fbe731878daa5d92378c4995a22302071890ec3397d019", size = 4110578, upload-time = "2026-04-20T23:35:10.149Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/00/fc/f481e2435bd8f742d0123309174aae4165160ad3ef17c1b99c3622c241d2/psycopg2_binary-2.9.12-cp313-cp313-musllinux_1_2_aarch64.whl", hash = "sha256:1c8ad4c08e00f7679559eaed7aff1edfffc60c086b976f93972f686384a95e2c", size = 3655816, upload-time = "2026-04-20T23:35:12.56Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/53/79/b9f46466bdbe9f239c96cde8be33c1aace4842f06013b47b730dc9759187/psycopg2_binary-2.9.12-cp313-cp313-musllinux_1_2_ppc64le.whl", hash = "sha256:00814e40fa23c2b37ef0a1e3c749d89982c73a9cb5046137f0752a22d432e82f", size = 3301307, upload-time = "2026-04-20T23:35:15.029Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/3f/19/7dc003b32fe35024df89b658104f7c8538a8b2dcbde7a4e746ce929742e7/psycopg2_binary-2.9.12-cp313-cp313-musllinux_1_2_riscv64.whl", hash = "sha256:98062447aebc20ed20add1f547a364fd0ef8933640d5372ff1873f8deb9b61be", size = 3048968, upload-time = "2026-04-20T23:35:16.757Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/91/58/2dbd7db5c604d45f4950d988506aae672a14126ec22998ced5021cbb76bb/psycopg2_binary-2.9.12-cp313-cp313-musllinux_1_2_x86_64.whl", hash = "sha256:66a7685d7e548f10fb4ce32fb01a7b7f4aa702134de92a292c7bd9e0d3dbd290", size = 3351369, upload-time = "2026-04-20T23:35:18.933Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/42/ee/dee8dcaad07f735824de3d6563bc67119fa6c28257b17977a8d624f02fab/psycopg2_binary-2.9.12-cp313-cp313-win_amd64.whl", hash = "sha256:b6937f5fe4e180aeee87de907a2fa982ded6f7f15d7218f78a083e4e1d68f2a0", size = 2757347, upload-time = "2026-04-20T23:35:21.283Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/13/1b/708c0dca874acfad6d65314271859899a79007686f3a1f74e82a2ed4b645/psycopg2_binary-2.9.12-cp314-cp314-macosx_10_15_x86_64.whl", hash = "sha256:6f3b3de8a74ef8db215f22edffb19e32dc6fa41340456de7ec99efdc8a7b3ec2", size = 3712428, upload-time = "2026-04-20T23:35:23.453Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/d6/39/ddbea9d4b4de6aca9431b6ed253f530f8a02d3b8f9bcfd0dbfe2b3de6fe4/psycopg2_binary-2.9.12-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:1006fb62f0f0bc5ce256a832356c6262e91be43f5e4eb15b5eaf38079464caf2", size = 3823184, upload-time = "2026-04-20T23:35:25.92Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/bf/a0/bc2fef74b106fa345567122a0659e6d94512ed7dc0131ec44c9e5aba3725/psycopg2_binary-2.9.12-cp314-cp314-manylinux2014_ppc64le.manylinux_2_17_ppc64le.whl", hash = "sha256:840066105706cd2eb29b9a1c2329620056582a4bf3e8169dec5c447042d0869f", size = 4579157, upload-time = "2026-04-20T23:35:28.542Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/57/d7/d4e3b2005d3de607ca4fbb0e8742e248056e52184a6b94ebda3c1c2c329b/psycopg2_binary-2.9.12-cp314-cp314-manylinux2014_x86_64.manylinux_2_17_x86_64.whl", hash = "sha256:863f5d12241ebe1c76a72a04c2113b6dc905f90b9cef0e9be0efd994affd9354", size = 4274970, upload-time = "2026-04-20T23:35:30.418Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/2e/42/c9853f8db3967fe08bcde11f53d53b85d351750cae726ce001cb68afa9c1/psycopg2_binary-2.9.12-cp314-cp314-manylinux_2_27_aarch64.manylinux_2_28_aarch64.whl", hash = "sha256:a99eaab34a9010f1a086b126de467466620a750634d114d20455f3a824aae033", size = 5895175, upload-time = "2026-04-20T23:35:33.584Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/eb/fd/b82b5601a97630308bef079f545ffec481bbbc795c2ba5ec416a01d03f60/psycopg2_binary-2.9.12-cp314-cp314-manylinux_2_38_riscv64.manylinux_2_39_riscv64.whl", hash = "sha256:ffdd7dc5463ccd61845ac37b7012d0f35a1548df9febe14f8dd549be4a0bc81e", size = 4110658, upload-time = "2026-04-20T23:35:35.638Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/62/8c/32ca69b0389ef25dd22937bf9e8fbe2ce27aea20b05ded48c4ce4cb42475/psycopg2_binary-2.9.12-cp314-cp314-musllinux_1_2_aarch64.whl", hash = "sha256:54a0dfecab1b48731f934e06139dfe11e24219fb6d0ceb32177cf0375f14c7b5", size = 3656251, upload-time = "2026-04-20T23:35:37.854Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c4/29/96992a2b59e3b9d730fcf9612d0a387305025dc867a9fc490a9e496e074e/psycopg2_binary-2.9.12-cp314-cp314-musllinux_1_2_ppc64le.whl", hash = "sha256:96937c9c5d891f772430f418a7a8b4691a90c3e6b93cf72b5bd7cad8cbca32a5", size = 3301810, upload-time = "2026-04-20T23:35:39.927Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/56/ad/44b06659949b243ae10112cd3b20a197f9bf3e81d5651379b9eb889bfaad/psycopg2_binary-2.9.12-cp314-cp314-musllinux_1_2_riscv64.whl", hash = "sha256:77b348775efd4cdab410ec6609d81ccecd1139c90265fa583a7255c8064bc03d", size = 3048977, upload-time = "2026-04-20T23:35:41.806Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/1d/f2/10a1bcebadb6aa55e280e1f58975c36a7b560ea525184c7aa4064c466633/psycopg2_binary-2.9.12-cp314-cp314-musllinux_1_2_x86_64.whl", hash = "sha256:527e6342b3e44c2f0544f6b8e927d60de7f163f5723b8f1dfa7d2a84298738cd", size = 3351466, upload-time = "2026-04-20T23:35:43.993Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/20/be/b732c8418ffa5bcfda002890f5dc4c869fc17db66ff11f53b17cfe44afc0/psycopg2_binary-2.9.12-cp314-cp314-win_amd64.whl", hash = "sha256:f12ae41fcafadb39b2785e64a40f9db05d6de2ac114077457e0e7c597f3af980", size = 2848762, upload-time = "2026-04-20T23:35:46.421Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "pydantic"
|
||||
version = "2.13.4"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
dependencies = [
|
||||
{ name = "annotated-types" },
|
||||
{ name = "pydantic-core" },
|
||||
{ name = "typing-extensions" },
|
||||
{ name = "typing-inspection" },
|
||||
]
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/18/a5/b60d21ac674192f8ab0ba4e9fd860690f9b4a6e51ca5df118733b487d8d6/pydantic-2.13.4.tar.gz", hash = "sha256:c40756b57adaa8b1efeeced5c196f3f3b7c435f90e84ea7f443901bec8099ef6", size = 844775, upload-time = "2026-05-06T13:43:05.343Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/fd/7b/122376b1fd3c62c1ed9dc80c931ace4844b3c55407b6fb2d199377c9736f/pydantic-2.13.4-py3-none-any.whl", hash = "sha256:45a282cde31d808236fd7ea9d919b128653c8b38b393d1c4ab335c62924d9aba", size = 472262, upload-time = "2026-05-06T13:43:02.641Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "pydantic-core"
|
||||
version = "2.46.4"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
dependencies = [
|
||||
{ name = "typing-extensions" },
|
||||
]
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/9d/56/921726b776ace8d8f5db44c4ef961006580d91dc52b803c489fafd1aa249/pydantic_core-2.46.4.tar.gz", hash = "sha256:62f875393d7f270851f20523dd2e29f082bcc82292d66db2b64ea71f64b6e1c1", size = 471464, upload-time = "2026-05-06T13:37:06.98Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/ce/8c/af022f0af448d7747c5154288d46b5f2bc5f17366eaa0e23e9aa04d59f3b/pydantic_core-2.46.4-cp312-cp312-macosx_10_12_x86_64.whl", hash = "sha256:3245406455a5d98187ec35530fd772b1d799b26667980872c8d4614991e2c4a2", size = 2106158, upload-time = "2026-05-06T13:38:57.215Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/19/95/6195171e385007300f0f5574592e467c568becce2d937a0b6804f218bc49/pydantic_core-2.46.4-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:962ccbab7b642487b1d8b7df90ef677e03134cf1fd8880bf698649b22a69371f", size = 1951724, upload-time = "2026-05-06T13:37:02.697Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/8e/bc/f47d1ff9cbb1620e1b5b697eef06010035735f07820180e74178226b27b3/pydantic_core-2.46.4-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:8233f2947cf85404441fd7e0085f53b10c93e0ee78611099b5c7237e36aacbf7", size = 1975742, upload-time = "2026-05-06T13:37:09.448Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/5b/11/9b9a5b0306345664a2da6410877af6e8082481b5884b3ddd78d47c6013ce/pydantic_core-2.46.4-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:3a233125ac121aa3ffba9a2b59edfc4a985a76092dc8279586ab4b71390875e7", size = 2052418, upload-time = "2026-05-06T13:37:38.234Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/f1/b7/a65fec226f5d78fc39f4a13c4cc0c768c22b113438f60c14adc9d2865038/pydantic_core-2.46.4-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:5b712b53160b79a5850310b912a5ef8e57e56947c8ad690c227f5c9d7e561712", size = 2232274, upload-time = "2026-05-06T13:38:27.753Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/68/f0/92039db98b907ef49269a8271f67db9cb78ae2fc68062ef7e4e77adb5f61/pydantic_core-2.46.4-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:9401557acd873c3a7f3eb9383edef8ac4968f9510e340f4808d427e75667e7b4", size = 2309940, upload-time = "2026-05-06T13:38:05.353Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/5f/97/2aab507d3d00ca626e8e57c1eac6a79e4e5fbcc63eb99733ff55d1717f65/pydantic_core-2.46.4-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:926c9541b14b12b1681dca8a0b75feb510b06c6341b70a8e500c2fdcff837cce", size = 2094516, upload-time = "2026-05-06T13:39:10.577Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/22/37/a8aca44d40d737dde2bc05b3c6c07dff0de07ce6f82e9f3167aeaf4d5dea/pydantic_core-2.46.4-cp312-cp312-manylinux_2_31_riscv64.whl", hash = "sha256:56cb4851bcaf3d117eddcef4fe66afd750a50274b0da8e22be256d10e5611987", size = 2136854, upload-time = "2026-05-06T13:40:22.59Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/24/99/fcef1b79238c06a8cbec70819ac722ba76e02bc8ada9b0fd66eba40da01b/pydantic_core-2.46.4-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:c68fcd102d71ea85c5b2dfac3f4f8476eff42a9e078fd5faefff6d145063536b", size = 2180306, upload-time = "2026-05-06T13:40:10.666Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/ae/6c/fc44000918855b42779d007ae63b0532794739027b2f417321cddbc44f6a/pydantic_core-2.46.4-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:b2f69dec1725e79a012d920df1707de5caf7ed5e08f3be4435e25803efc47458", size = 2190044, upload-time = "2026-05-06T13:40:43.231Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/6b/65/d9cadc9f1920d7a127ad2edba16c1db7916e59719285cd6c94600b0080ba/pydantic_core-2.46.4-cp312-cp312-musllinux_1_1_armv7l.whl", hash = "sha256:8d0820e8192167f80d88d64038e609c31452eeca865b4e1d9950a27a4609b00b", size = 2329133, upload-time = "2026-05-06T13:39:57.365Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/d0/cf/c873d91679f3a30bcf5e7ac280ce5573483e72295307685120d0d5ad3416/pydantic_core-2.46.4-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:fbdb89b3e1c94a30cc5edfce477c6e6a5dc4d8f84665b455c27582f211a1c72c", size = 2374464, upload-time = "2026-05-06T13:38:06.976Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/47/bd/6f2fc8188f31bf10590f1e98e7b306336161fac930a8c514cd7bd828c7dc/pydantic_core-2.46.4-cp312-cp312-win32.whl", hash = "sha256:9aa768456404a8bf48a4406685ac2bec8e72b62c69313734fa3b73cf33b3a894", size = 1974823, upload-time = "2026-05-06T13:40:47.985Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/40/8c/985c1d41ea1107c2534abd9870e4ed5c8e7669b5c308297835c001e7a1c4/pydantic_core-2.46.4-cp312-cp312-win_amd64.whl", hash = "sha256:e9c26f834c65f5752f3f06cb08cb86a913ceb7274d0db6e267808a708b46bc89", size = 2072919, upload-time = "2026-05-06T13:39:21.153Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c4/ba/f463d006e0c47373ca7ec5e1a261c59dc01ef4d62b2657af925fb0deee3a/pydantic_core-2.46.4-cp312-cp312-win_arm64.whl", hash = "sha256:4fc73cb559bdb54b1134a706a2802a4cddd27a0633f5abb7e53056268751ac6a", size = 2027604, upload-time = "2026-05-06T13:39:03.753Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/51/a2/5d30b469c5267a17b39dec53208222f76a8d351dfac4af661888c5aee77d/pydantic_core-2.46.4-cp313-cp313-macosx_10_12_x86_64.whl", hash = "sha256:5d5902252db0d3cedf8d4a1bc68f70eeb430f7e4c7104c8c476753519b423008", size = 2106306, upload-time = "2026-05-06T13:37:48.029Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c1/81/4fa520eaffa8bd7d1525e644cd6d39e7d60b1592bc5b516693c7340b50f1/pydantic_core-2.46.4-cp313-cp313-macosx_11_0_arm64.whl", hash = "sha256:c94f0688e7b8d0a67abf40e57a7eaaecd17cc9586706a31b76c031f63df052b4", size = 1951906, upload-time = "2026-05-06T13:37:17.012Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/03/d5/fd02da45b659668b05923b17ba3a0100a0a3d5541e3bd8fcc4ecb711309e/pydantic_core-2.46.4-cp313-cp313-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f027324c56cd5406ca49c124b0db10e56c69064fec039acc571c29020cc87c76", size = 1976802, upload-time = "2026-05-06T13:37:35.113Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/21/f2/95727e1368be3d3ed485eaab7adbd7dda408f33f7a36e8b48e0144002b91/pydantic_core-2.46.4-cp313-cp313-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:e739fee756ba1010f8bcccb534252e85a35fe45ae92c295a06059ce58b74ccd3", size = 2052446, upload-time = "2026-05-06T13:37:12.313Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/9c/86/5d99feea3f77c7234b8718075b23db11532773c1a0dbd9b9490215dc2eeb/pydantic_core-2.46.4-cp313-cp313-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:9d56801be94b86a9da183e5f3766e6310752b99ff647e38b09a9500d88e46e76", size = 2232757, upload-time = "2026-05-06T13:39:01.149Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/d2/3a/508ac615935ef7588cf6d9e9b91309fdc2da751af865e02a9098de88258c/pydantic_core-2.46.4-cp313-cp313-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:2412e734dcb48da14d4e4006b82b46b74f2518b8a26ee7e58c6844a6cd6d03c4", size = 2309275, upload-time = "2026-05-06T13:37:41.406Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/07/f8/41db9de19d7987d6b04715a02b3b40aea467000275d9d758ffaa31af7d50/pydantic_core-2.46.4-cp313-cp313-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9551187363ffc0de2a00b2e47c25aeaeb1020b69b668762966df15fc5659dd5a", size = 2094467, upload-time = "2026-05-06T13:39:18.847Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/2c/e2/f35033184cb11d0052daf4416e8e10a502ea2ac006fc4f459aee872727d1/pydantic_core-2.46.4-cp313-cp313-manylinux_2_31_riscv64.whl", hash = "sha256:0186750b482eefa11d7f435892b09c5c606193ef3375bcf94aa00ae6bfb66262", size = 2134417, upload-time = "2026-05-06T13:40:17.944Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/7e/7b/6ceeb1cc90e193862f444ebe373d8fdf613f0a82572dde03fb10734c6c71/pydantic_core-2.46.4-cp313-cp313-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:5855698a4856556d86e8e6cd8434bc3ac0314ee8e12089ae0e143f64c6256e4e", size = 2179782, upload-time = "2026-05-06T13:40:32.618Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/5a/f2/c8d7773ede6af08036423a00ae0ceffce266c3c52a096c435d68c896083f/pydantic_core-2.46.4-cp313-cp313-musllinux_1_1_aarch64.whl", hash = "sha256:cbaf13819775b7f769bf4a1f066cb6df7a28d4480081a589828ef190226881cd", size = 2188782, upload-time = "2026-05-06T13:36:51.018Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/59/31/0c864784e31f09f05cdd87606f08923b9c9e7f6e51dd27f20f62f975ce9f/pydantic_core-2.46.4-cp313-cp313-musllinux_1_1_armv7l.whl", hash = "sha256:633147d34cf4550417f12e2b1a0383973bdf5cdfde212cb09e9a581cf10820be", size = 2328334, upload-time = "2026-05-06T13:40:37.764Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c2/eb/4f6c8a41efa30baa755590f4141abf3a8c370fab610915733e74134a7270/pydantic_core-2.46.4-cp313-cp313-musllinux_1_1_x86_64.whl", hash = "sha256:82cf5301172168103724d49a1444d3378cb20cdee30b116a1bd6031236298a5d", size = 2372986, upload-time = "2026-05-06T13:39:34.152Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/5b/24/b375a480d53113860c299764bfe9f349a3dc9108b3adc0d7f0d786492ebf/pydantic_core-2.46.4-cp313-cp313-win32.whl", hash = "sha256:9fa8ae11da9e2b3126c6426f147e0fba88d96d65921799bb30c6abd1cb2c97fb", size = 1973693, upload-time = "2026-05-06T13:37:55.072Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/7e/e8/cff247591966f2d22ec8c003cd7587e27b7ba7b81ab2fb888e3ab75dc285/pydantic_core-2.46.4-cp313-cp313-win_amd64.whl", hash = "sha256:6b3ace8194b0e5204818c92802dcdca7fc6d88aabbb799d7c795540d9cd6d292", size = 2071819, upload-time = "2026-05-06T13:38:49.139Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c6/1a/f4aee670d5670e9e148e0c82c7db98d780be566c6e6a97ee8035528ca0b3/pydantic_core-2.46.4-cp313-cp313-win_arm64.whl", hash = "sha256:184c081504d17f1c1066e430e117142b2c77d9448a97f7b65c6ac9fd9aee238d", size = 2027411, upload-time = "2026-05-06T13:40:45.796Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/8d/74/228a26ddad29c6672b805d9fd78e8d251cd04004fa7eed0e622096cd0250/pydantic_core-2.46.4-cp314-cp314-macosx_10_12_x86_64.whl", hash = "sha256:428e04521a40150c85216fc8b85e8d39fece235a9cf5e383761238c7fa9b96fb", size = 2102079, upload-time = "2026-05-06T13:38:41.019Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/ad/1f/8970b150a4b4365623ae00fc88603491f763c627311ae8031e3111356d6e/pydantic_core-2.46.4-cp314-cp314-macosx_11_0_arm64.whl", hash = "sha256:23ace664830ee0bfe014a0c7bc248b1f7f25ed7ad103852c317624a1083af462", size = 1952179, upload-time = "2026-05-06T13:36:59.812Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/95/30/5211a831ae054928054b2f79731661087a2bc5c01e825c672b3a4a8f1b3e/pydantic_core-2.46.4-cp314-cp314-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ce5c1d2a8b27468f433ca974829c44060b8097eedc39933e3c206a90ee49c4a9", size = 1978926, upload-time = "2026-05-06T13:37:39.933Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/57/e9/689668733b1eb67adeef047db3c2e8788fcf65a7fd9c9e2b46b7744fe245/pydantic_core-2.46.4-cp314-cp314-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:7283d57845ecf5a163403eb0702dfc220cc4fbdd18919cb5ccea4f95ee1cdab4", size = 2046785, upload-time = "2026-05-06T13:38:01.995Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/60/d9/6715260422ff50a2109878fd24d948a6c3446bb2664f34ee78cd972b3acd/pydantic_core-2.46.4-cp314-cp314-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:8daafc69c93ee8a0204506a3b6b30f586ef54028f52aeeeb5c4cfc5184fd5914", size = 2228733, upload-time = "2026-05-06T13:40:50.371Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/18/ae/fdb2f64316afca925640f8e70bb1a564b0ec2721c1389e25b8eb4bf9a299/pydantic_core-2.46.4-cp314-cp314-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:cd2213145bcc2ba85884d0ac63d222fece9209678f77b9b4d76f054c561adb28", size = 2307534, upload-time = "2026-05-06T13:37:21.531Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/89/1d/8eff589b45bb8190a9d12c49cfad0f176a5cbd1534908a6b5125e2886239/pydantic_core-2.46.4-cp314-cp314-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7a5f930472650a82629163023e630d160863fce524c616f4e5186e5de9d9a49b", size = 2099732, upload-time = "2026-05-06T13:39:31.942Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/06/d5/ee5a3366637fee41dee51a1fc91562dcf12ddbc68fda34e6b253da2324bb/pydantic_core-2.46.4-cp314-cp314-manylinux_2_31_riscv64.whl", hash = "sha256:c1b3f518abeca3aa13c712fd202306e145abf59a18b094a6bafb2d2bbf59192c", size = 2129627, upload-time = "2026-05-06T13:37:25.033Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/94/33/2414be571d2c6a6c4d08be21f9292b6d3fdb08949a97b6dfe985017821db/pydantic_core-2.46.4-cp314-cp314-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:1a7dd0b3ee80d90150e3495a3a13ac34dbcbfd4f012996a6a1d8900e91b5c0fb", size = 2179141, upload-time = "2026-05-06T13:37:14.046Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/7b/79/7daa95be995be0eecc4cf75064cb33f9bbbfe3fe0158caf2f0d4a996a5c7/pydantic_core-2.46.4-cp314-cp314-musllinux_1_1_aarch64.whl", hash = "sha256:3fb702cd90b0446a3a1c5e470bfa0dd23c0233b676a9099ddcc964fa6ca13898", size = 2184325, upload-time = "2026-05-06T13:36:53.615Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/9f/cb/d0a382f5c0de8a222dc61c65348e0ce831b1f68e0a018450d31c2cace3a5/pydantic_core-2.46.4-cp314-cp314-musllinux_1_1_armv7l.whl", hash = "sha256:b8458003118a712e66286df6a707db01c52c0f52f7db8e4a38f0da1d3b94fc4e", size = 2323990, upload-time = "2026-05-06T13:40:29.971Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/05/db/d9ba624cc4a5aced1598e88c04fdbd8310c8a69b9d38b9a3d39ce3a61ed7/pydantic_core-2.46.4-cp314-cp314-musllinux_1_1_x86_64.whl", hash = "sha256:372429a130e469c9cd698925ce5fc50940b7a1336b0d82038e63d5bbc4edc519", size = 2369978, upload-time = "2026-05-06T13:37:23.027Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/f2/20/d15df15ba918c423461905802bfd2981c3af0bfa0e40d05e13edbfa48bc3/pydantic_core-2.46.4-cp314-cp314-win32.whl", hash = "sha256:85bb3611ff1802f3ee7fdd7dbff26b56f343fb432d57a4728fdd49b6ef35e2f4", size = 1966354, upload-time = "2026-05-06T13:38:03.499Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/fc/b6/6b8de4c0a7d7ab3004c439c80c5c1e0a3e8d78bbae19379b01960383d9e5/pydantic_core-2.46.4-cp314-cp314-win_amd64.whl", hash = "sha256:811ff8e9c313ab425368bcbb36e5c4ebd7108c2bbf4e4089cfbb0b01eff63fac", size = 2072238, upload-time = "2026-05-06T13:39:40.807Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/32/36/51eb763beec1f4cf59b1db243a7dcc39cbb41230f050a09b9d69faaf0a48/pydantic_core-2.46.4-cp314-cp314-win_arm64.whl", hash = "sha256:bfec22eab3c8cc2ceec0248aec886624116dc079afa027ecc8ad4a7e62010f8a", size = 2018251, upload-time = "2026-05-06T13:37:26.72Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/e8/91/855af51d625b23aa987116a19e231d2aaef9c4a415273ddc189b79a45fee/pydantic_core-2.46.4-cp314-cp314t-macosx_10_12_x86_64.whl", hash = "sha256:af8244b2bef6aaad6d92cda81372de7f8c8d36c9f0c3ea36e827c60e7d9467a0", size = 2099593, upload-time = "2026-05-06T13:39:47.682Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/fb/1b/8784a54c65edb5f49f0a14d6977cf1b209bba85a4c77445b255c2de58ab3/pydantic_core-2.46.4-cp314-cp314t-macosx_11_0_arm64.whl", hash = "sha256:5a4330cdbc57162e4b3aa303f588ba752257694c9c9be3e7ebb11b4aca659b5d", size = 1935226, upload-time = "2026-05-06T13:40:40.428Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/e8/e7/1955d28d1afc56dd4b3ad7cc0cf39df1b9852964cf16e5d13912756d6d6b/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:29c61fc04a3d840155ff08e475a04809278972fe6aef51e2720554e96367e34b", size = 1974605, upload-time = "2026-05-06T13:37:32.029Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/93/e2/3fedbf0ba7a22850e6e9fd78117f1c0f10f950182344d8a6c535d468fdd8/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:c50f2528cf200c5eed56faf3f4e22fcd5f38c157a8b78576e6ba3168ec35f000", size = 2030777, upload-time = "2026-05-06T13:38:55.239Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/f8/61/46be275fcaaba0b4f5b9669dd852267ce1ff616592dccf7a7845588df091/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:0cbe8b01f948de4286c74cdd6c667aceb38f5c1e26f0693b3983d9d74887c65e", size = 2236641, upload-time = "2026-05-06T13:37:08.096Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/60/db/12e93e46a8bac9988be3c016860f83293daea8c716c029c9ace279036f2f/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:617d7e2ca7dcb8c5cf6bcb8c59b8832c94b36196bbf1cbd1bfb56ed341905edd", size = 2286404, upload-time = "2026-05-06T13:40:20.221Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/e2/4a/4d8b19008f38d31c53b8219cfedc2e3d5de5fe99d90076b7e767de29274f/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7027560ee92211647d0d34e3f7cd6f50da56399d26a9c8ad0da286d3869a53f3", size = 2109219, upload-time = "2026-05-06T13:38:12.153Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/88/70/3cbc40978fefb7bb09c6708d40d4ad1a5d70fd7213c3d17f971de868ec1f/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_31_riscv64.whl", hash = "sha256:f99626688942fb746e545232e7726926f3be91b5975f8b55327665fafda991c7", size = 2110594, upload-time = "2026-05-06T13:40:02.971Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/9d/20/b8d36736216e29491125531685b2f9e61aa5b4b2599893f8268551da3338/pydantic_core-2.46.4-cp314-cp314t-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:fc3e9034a63de20e15e8ade85358bc6efc614008cab72898b4b4952bea0509ff", size = 2159542, upload-time = "2026-05-06T13:39:27.506Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/1d/a2/367df868eb584dacf6bf82a389272406d7178e301c4ac82545ab98bc2dd9/pydantic_core-2.46.4-cp314-cp314t-musllinux_1_1_aarch64.whl", hash = "sha256:97e7cf2be5c77b7d1a9713a05605d49460d02c6078d38d8bef3cbe323c548424", size = 2168146, upload-time = "2026-05-06T13:38:31.93Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/c1/b8/4460f77f7e201893f649a29ab355dddd3beee8a97bcb1a320db414f9a06e/pydantic_core-2.46.4-cp314-cp314t-musllinux_1_1_armv7l.whl", hash = "sha256:3bf92c5d0e00fefaab325a4d27828fe6b6e2a21848686b5b60d2d9eeb09d76c6", size = 2306309, upload-time = "2026-05-06T13:37:44.717Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/64/c4/be2639293acd87dc8ddbcec41a73cee9b2ebf996fe6d892a1a74e88ad3f7/pydantic_core-2.46.4-cp314-cp314t-musllinux_1_1_x86_64.whl", hash = "sha256:3ecbc122d18468d06ca279dc26a8c2e2d5acb10943bb35e36ae92096dc3b5565", size = 2369736, upload-time = "2026-05-06T13:37:05.645Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/30/a6/9f9f380dbb301f67023bf8f707aaa75daadf84f7152d95c410fd7e81d994/pydantic_core-2.46.4-cp314-cp314t-win32.whl", hash = "sha256:e846ae7835bf0703ae43f534ab79a867146dadd59dc9ca5c8b53d5c8f7c9ef02", size = 1955575, upload-time = "2026-05-06T13:38:51.116Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/40/1f/f1eb9eb350e795d1af8586289746f5c5677d16043040d63710e22abc43c9/pydantic_core-2.46.4-cp314-cp314t-win_amd64.whl", hash = "sha256:2108ba5c1c1eca18030634489dc544844144ee36357f2f9f780b93e7ddbb44b5", size = 2051624, upload-time = "2026-05-06T13:38:21.672Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/f6/d2/42dd53d0a85c27606f316d3aa5d2869c4e8470a5ed6dec30e4a1abe19192/pydantic_core-2.46.4-cp314-cp314t-win_arm64.whl", hash = "sha256:4fcbe087dbc2068af7eda3aa87634eba216dbda64d1ae73c8684b621d33f6596", size = 2017325, upload-time = "2026-05-06T13:40:52.723Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/9d/1d/8987ad40f65ae1432753072f214fb5c74fe47ffbd0698bb9cbbb585664f8/pydantic_core-2.46.4-graalpy312-graalpy250_312_native-macosx_10_12_x86_64.whl", hash = "sha256:1d8ba486450b14f3b1d63bc521d410ec7565e52f887b9fb671791886436a42f7", size = 2095527, upload-time = "2026-05-06T13:39:52.283Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/64/d3/84c282a7eee1d3ac4c0377546ef5a1ea436ce26840d9ac3b7ed54a377507/pydantic_core-2.46.4-graalpy312-graalpy250_312_native-macosx_11_0_arm64.whl", hash = "sha256:3009f12e4e90b7f88b4f9adb1b0c4a3d58fe7820f3238c190047209d148026df", size = 1936024, upload-time = "2026-05-06T13:40:15.671Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/d7/ca/eac61596cdeb4d7e174d3dc0bd8a6238f14f75f97a24e7b7db4c7e7340a0/pydantic_core-2.46.4-graalpy312-graalpy250_312_native-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:ad785e92e6dc634c21555edc8bd6b64957ab844541bcb96a1366c202951ae526", size = 1990696, upload-time = "2026-05-06T13:38:34.717Z" },
|
||||
{ url = "https://files.pythonhosted.org/packages/fa/c3/7c8b240552251faf6b3a957db200fcfbbcec36763c050428b601e0c9b83b/pydantic_core-2.46.4-graalpy312-graalpy250_312_native-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:00c603d540afdd6b80eb39f078f33ebd46211f02f33e34a32d9f053bba711de0", size = 2147590, upload-time = "2026-05-06T13:39:29.883Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "pydantic-settings"
|
||||
version = "2.14.1"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
dependencies = [
|
||||
{ name = "pydantic" },
|
||||
{ name = "python-dotenv" },
|
||||
{ name = "typing-inspection" },
|
||||
]
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/07/60/1d1e59c9c90d54591469ada7d268251f71c24bdb765f1a8a832cee8c6653/pydantic_settings-2.14.1.tar.gz", hash = "sha256:e874d3bec7e787b0c9958277956ed9b4dd5de6a80e162188fdaff7c5e26fd5fa", size = 235551, upload-time = "2026-05-08T13:40:06.542Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/ae/8d/f1af3832f5e6eb13ba94ee809e72b8ecb5eef226d27ee0bef7d963d943c7/pydantic_settings-2.14.1-py3-none-any.whl", hash = "sha256:6e3c7edfd8277687cdc598f56e5cff0e9bfff0910a3749deaa8d4401c3a2b9de", size = 60964, upload-time = "2026-05-08T13:40:04.958Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "python-dotenv"
|
||||
version = "1.2.2"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/82/ed/0301aeeac3e5353ef3d94b6ec08bbcabd04a72018415dcb29e588514bba8/python_dotenv-1.2.2.tar.gz", hash = "sha256:2c371a91fbd7ba082c2c1dc1f8bf89ca22564a087c2c287cd9b662adde799cf3", size = 50135, upload-time = "2026-03-01T16:00:26.196Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/0b/d7/1959b9648791274998a9c3526f6d0ec8fd2233e4d4acce81bbae76b44b2a/python_dotenv-1.2.2-py3-none-any.whl", hash = "sha256:1d8214789a24de455a8b8bd8ae6fe3c6b69a5e3d64aa8a8e5d68e694bbcb285a", size = 22101, upload-time = "2026-03-01T16:00:25.09Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "sqlparse"
|
||||
version = "0.5.5"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/90/76/437d71068094df0726366574cf3432a4ed754217b436eb7429415cf2d480/sqlparse-0.5.5.tar.gz", hash = "sha256:e20d4a9b0b8585fdf63b10d30066c7c94c5d7a7ec47c889a2d83a3caa93ff28e", size = 120815, upload-time = "2025-12-19T07:17:45.073Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/49/4b/359f28a903c13438ef59ebeee215fb25da53066db67b305c125f1c6d2a25/sqlparse-0.5.5-py3-none-any.whl", hash = "sha256:12a08b3bf3eec877c519589833aed092e2444e68240a3577e8e26148acc7b1ba", size = 46138, upload-time = "2025-12-19T07:17:46.573Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "typing-extensions"
|
||||
version = "4.15.0"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/72/94/1a15dd82efb362ac84269196e94cf00f187f7ed21c242792a923cdb1c61f/typing_extensions-4.15.0.tar.gz", hash = "sha256:0cea48d173cc12fa28ecabc3b837ea3cf6f38c6d1136f85cbaaf598984861466", size = 109391, upload-time = "2025-08-25T13:49:26.313Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/18/67/36e9267722cc04a6b9f15c7f3441c2363321a3ea07da7ae0c0707beb2a9c/typing_extensions-4.15.0-py3-none-any.whl", hash = "sha256:f0fa19c6845758ab08074a0cfa8b7aecb71c999ca73d62883bc25cc018c4e548", size = 44614, upload-time = "2025-08-25T13:49:24.86Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "typing-inspection"
|
||||
version = "0.4.2"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
dependencies = [
|
||||
{ name = "typing-extensions" },
|
||||
]
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/55/e3/70399cb7dd41c10ac53367ae42139cf4b1ca5f36bb3dc6c9d33acdb43655/typing_inspection-0.4.2.tar.gz", hash = "sha256:ba561c48a67c5958007083d386c3295464928b01faa735ab8547c5692e87f464", size = 75949, upload-time = "2025-10-01T02:14:41.687Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/dc/9b/47798a6c91d8bdb567fe2698fe81e0c6b7cb7ef4d13da4114b41d239f65d/typing_inspection-0.4.2-py3-none-any.whl", hash = "sha256:4ed1cacbdc298c220f1bd249ed5287caa16f34d44ef4e9c3d0cbad5b521545e7", size = 14611, upload-time = "2025-10-01T02:14:40.154Z" },
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tzdata"
|
||||
version = "2026.2"
|
||||
source = { registry = "https://pypi.org/simple" }
|
||||
sdist = { url = "https://files.pythonhosted.org/packages/ba/19/1b9b0e29f30c6d35cb345486df41110984ea67ae69dddbc0e8a100999493/tzdata-2026.2.tar.gz", hash = "sha256:9173fde7d80d9018e02a662e168e5a2d04f87c41ea174b139fbef642eda62d10", size = 198254, upload-time = "2026-04-24T15:22:08.651Z" }
|
||||
wheels = [
|
||||
{ url = "https://files.pythonhosted.org/packages/ce/e4/dccd7f47c4b64213ac01ef921a1337ee6e30e8c6466046018326977efd95/tzdata-2026.2-py2.py3-none-any.whl", hash = "sha256:bbe9af844f658da81a5f95019480da3a89415801f6cc966806612cc7169bffe7", size = 349321, upload-time = "2026-04-24T15:22:05.876Z" },
|
||||
]
|
||||
@@ -6,10 +6,10 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
|
||||
libpq-dev gcc && \
|
||||
rm -rf /var/lib/apt/lists/*
|
||||
|
||||
COPY pyproject.toml ./
|
||||
RUN pip install uv && uv sync --frozen
|
||||
COPY requirements.txt ./
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
COPY . .
|
||||
COPY . ./
|
||||
|
||||
RUN mkdir -p media
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
# Generated by Django 5.1.7 on 2026-05-26 03:33
|
||||
|
||||
import django.db.models.deletion
|
||||
from django.conf import settings
|
||||
from django.db import migrations, models
|
||||
|
||||
|
||||
class Migration(migrations.Migration):
|
||||
|
||||
initial = True
|
||||
|
||||
dependencies = [
|
||||
migrations.swappable_dependency(settings.AUTH_USER_MODEL),
|
||||
]
|
||||
|
||||
operations = [
|
||||
migrations.CreateModel(
|
||||
name='Book',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('title', models.CharField(db_index=True, max_length=512)),
|
||||
('author', models.CharField(blank=True, db_index=True, default='', max_length=256)),
|
||||
('genre', models.CharField(blank=True, db_index=True, default='', max_length=128)),
|
||||
('description', models.TextField(blank=True, default='')),
|
||||
('reading_status', models.CharField(choices=[('want_to_read', 'Want to Read'), ('reading', 'Reading'), ('finished', 'Finished'), ('dnf', 'Did Not Finish')], db_index=True, default='want_to_read', max_length=20)),
|
||||
('total_pages', models.PositiveIntegerField(default=0)),
|
||||
('cover_image', models.URLField(blank=True, default='')),
|
||||
('created_at', models.DateTimeField(auto_now_add=True)),
|
||||
('updated_at', models.DateTimeField(auto_now=True)),
|
||||
],
|
||||
options={
|
||||
'verbose_name': 'Book',
|
||||
'verbose_name_plural': 'Books',
|
||||
'db_table': 'books_book',
|
||||
'ordering': ['title'],
|
||||
'indexes': [models.Index(fields=['title', 'author', 'genre'], name='books_book_title_9fddc2_idx')],
|
||||
},
|
||||
),
|
||||
migrations.CreateModel(
|
||||
name='EBook',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('title', models.CharField(max_length=512)),
|
||||
('author', models.CharField(blank=True, default='', max_length=256)),
|
||||
('file', models.FileField(upload_to='ebooks/%Y/%m/%d/')),
|
||||
('cover_image', models.ImageField(blank=True, null=True, upload_to='ebook_covers/%Y/%m/%d/')),
|
||||
('created_at', models.DateTimeField(auto_now_add=True)),
|
||||
('updated_at', models.DateTimeField(auto_now=True)),
|
||||
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='ebooks', to=settings.AUTH_USER_MODEL)),
|
||||
],
|
||||
options={
|
||||
'verbose_name': 'E-Book',
|
||||
'verbose_name_plural': 'E-Books',
|
||||
'db_table': 'books_ebook',
|
||||
'ordering': ['-created_at'],
|
||||
},
|
||||
),
|
||||
migrations.CreateModel(
|
||||
name='ReadingProgress',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('current_position', models.FloatField(default=0.0)),
|
||||
('last_page', models.IntegerField(default=0)),
|
||||
('updated_at', models.DateTimeField(auto_now=True)),
|
||||
('ebook', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, related_name='reading_progress', to='books.ebook')),
|
||||
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='reading_progress', to=settings.AUTH_USER_MODEL)),
|
||||
],
|
||||
options={
|
||||
'verbose_name_plural': 'reading progress',
|
||||
'db_table': 'books_reading_progress',
|
||||
},
|
||||
),
|
||||
migrations.CreateModel(
|
||||
name='ReadingSettings',
|
||||
fields=[
|
||||
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||
('font_size', models.IntegerField(default=18)),
|
||||
('font_style', models.CharField(choices=[('sans-serif', 'Sans Serif'), ('serif', 'Serif'), ('monospace', 'Monospace')], default='sans-serif', max_length=20)),
|
||||
('background_color', models.CharField(choices=[('#ffffff', 'White'), ('#f4e4c1', 'Sepia'), ('#1a1a2e', 'Dark'), ('#c7edcc', 'Green')], default='#ffffff', max_length=7)),
|
||||
('updated_at', models.DateTimeField(auto_now=True)),
|
||||
('user', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, related_name='reading_settings', to=settings.AUTH_USER_MODEL)),
|
||||
],
|
||||
options={
|
||||
'verbose_name_plural': 'reading settings',
|
||||
'db_table': 'books_reading_settings',
|
||||
},
|
||||
),
|
||||
migrations.AddIndex(
|
||||
model_name='ebook',
|
||||
index=models.Index(fields=['user', '-created_at'], name='books_ebook_user_id_0b6bdb_idx'),
|
||||
),
|
||||
migrations.AlterUniqueTogether(
|
||||
name='readingprogress',
|
||||
unique_together={('user', 'ebook')},
|
||||
),
|
||||
]
|
||||
@@ -49,12 +49,8 @@ class Book(models.Model):
|
||||
|
||||
class EBook(models.Model):
|
||||
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="ebooks")
|
||||
title = models.CharField(max_length=512, db_index=True)
|
||||
author = models.CharField(max_length=256, blank=True, default="", db_index=True)
|
||||
format = models.CharField(max_length=20, blank=True, default="", editable=False)
|
||||
page_count = models.PositiveIntegerField(default=0)
|
||||
file_size = models.BigIntegerField(default=0)
|
||||
metadata_json = models.JSONField(blank=True, default=dict)
|
||||
title = models.CharField(max_length=512)
|
||||
author = models.CharField(max_length=256, blank=True, default="")
|
||||
file = models.FileField(upload_to="ebooks/%Y/%m/%d/")
|
||||
cover_image = models.ImageField(upload_to="ebook_covers/%Y/%m/%d/", blank=True, null=True)
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
@@ -74,24 +70,6 @@ class EBook(models.Model):
|
||||
return Path(self.file.name).name if self.file else ""
|
||||
|
||||
|
||||
class BookChapter(models.Model):
|
||||
ebook = models.ForeignKey(EBook, on_delete=models.CASCADE, related_name="chapters")
|
||||
title = models.CharField(max_length=512)
|
||||
index = models.IntegerField(default=0)
|
||||
href = models.CharField(max_length=1024, blank=True, default="")
|
||||
children = models.JSONField(blank=True, default=list)
|
||||
|
||||
class Meta:
|
||||
db_table = "books_book_chapter"
|
||||
verbose_name = "Book Chapter"
|
||||
verbose_name_plural = "Book Chapters"
|
||||
ordering = ["index"]
|
||||
indexes = [models.Index(fields=["ebook", "index"])]
|
||||
|
||||
def __str__(self):
|
||||
return f"{self.ebook.title} - {self.title}"
|
||||
|
||||
|
||||
@receiver(post_delete, sender=EBook)
|
||||
def _auto_delete_ebook_file(sender, instance, **kwargs):
|
||||
if instance.file:
|
||||
@@ -100,33 +78,11 @@ def _auto_delete_ebook_file(sender, instance, **kwargs):
|
||||
instance.cover_image.delete(save=False)
|
||||
|
||||
|
||||
class DownloadRecord(models.Model):
|
||||
"""Tracks book downloads for offline access management."""
|
||||
|
||||
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="download_records")
|
||||
ebook = models.ForeignKey(EBook, on_delete=models.CASCADE, related_name="download_records")
|
||||
file_size = models.BigIntegerField(default=0)
|
||||
downloaded_at = models.DateTimeField(auto_now_add=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "books_download_record"
|
||||
verbose_name = "Download Record"
|
||||
verbose_name_plural = "Download Records"
|
||||
ordering = ["-downloaded_at"]
|
||||
unique_together = [("user", "ebook")]
|
||||
|
||||
def __str__(self):
|
||||
return f"{self.user} - {self.ebook.title}"
|
||||
|
||||
|
||||
class ReadingProgress(models.Model):
|
||||
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="reading_progress")
|
||||
ebook = models.OneToOneField(EBook, on_delete=models.CASCADE, related_name="reading_progress")
|
||||
current_position = models.FloatField(default=0.0)
|
||||
last_page = models.IntegerField(default=0)
|
||||
device_id = models.CharField(max_length=128, blank=True, default="")
|
||||
device_name = models.CharField(max_length=128, blank=True, default="")
|
||||
version = models.PositiveIntegerField(default=1)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
@@ -137,36 +93,6 @@ class ReadingProgress(models.Model):
|
||||
def __str__(self):
|
||||
return f"{self.ebook.title} - {self.current_position:.1f}%"
|
||||
|
||||
def update_with_sync(self, position: float, last_page: int,
|
||||
device_id: str, device_name: str,
|
||||
client_updated_at: str | None = None) -> tuple["ReadingProgress", bool]:
|
||||
"""Update progress with conflict resolution (last-write-wins by timestamp).
|
||||
|
||||
Returns (instance, applied) where applied is True if the update was applied.
|
||||
"""
|
||||
if client_updated_at and self.updated_at:
|
||||
try:
|
||||
from django.utils.timezone import is_naive, make_aware
|
||||
from datetime import datetime
|
||||
client_dt = datetime.fromisoformat(client_updated_at.replace("Z", "+00:00"))
|
||||
if is_naive(client_dt):
|
||||
client_dt = make_aware(client_dt)
|
||||
if client_dt <= self.updated_at:
|
||||
return self, False
|
||||
except (ValueError, TypeError):
|
||||
pass
|
||||
|
||||
self.current_position = position
|
||||
self.last_page = last_page
|
||||
self.device_id = device_id
|
||||
self.device_name = device_name
|
||||
self.version += 1
|
||||
self.save(update_fields=[
|
||||
"current_position", "last_page",
|
||||
"device_id", "device_name", "version", "updated_at",
|
||||
])
|
||||
return self, True
|
||||
|
||||
|
||||
class ReadingSettings(models.Model):
|
||||
user = models.OneToOneField(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="reading_settings")
|
||||
@@ -181,78 +107,3 @@ class ReadingSettings(models.Model):
|
||||
|
||||
def __str__(self):
|
||||
return f"Settings for {self.user}"
|
||||
|
||||
|
||||
class Chapter(models.Model):
|
||||
"""A chapter within a book, containing the text/markdown content.
|
||||
|
||||
This is distinct from BookChapter (which tracks EPUB TOC entries).
|
||||
Chapter represents user-authored chapter content for a Book.
|
||||
"""
|
||||
|
||||
book = models.ForeignKey(
|
||||
Book,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="chapters",
|
||||
db_index=True,
|
||||
)
|
||||
title = models.CharField(max_length=512)
|
||||
number = models.PositiveIntegerField()
|
||||
content = models.TextField(blank=True, default="")
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "books_chapter"
|
||||
verbose_name = "Chapter"
|
||||
verbose_name_plural = "Chapters"
|
||||
ordering = ["book", "number"]
|
||||
constraints = [
|
||||
models.UniqueConstraint(
|
||||
fields=["book", "number"],
|
||||
name="uq_book_chapter_number",
|
||||
)
|
||||
]
|
||||
|
||||
def __str__(self):
|
||||
return f"{self.book.title} — Ch. {self.number}: {self.title}"
|
||||
|
||||
|
||||
class BookReadingProgress(models.Model):
|
||||
"""Tracks a user's reading progress within a book's chapters.
|
||||
|
||||
This is distinct from ReadingProgress (which tracks ebook progress).
|
||||
BookReadingProgress tracks chapter-based reading for Books.
|
||||
"""
|
||||
|
||||
user = models.ForeignKey(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="book_reading_progress",
|
||||
db_index=True,
|
||||
)
|
||||
book = models.ForeignKey(
|
||||
Book,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="book_reading_progress",
|
||||
db_index=True,
|
||||
)
|
||||
current_chapter = models.PositiveIntegerField(default=1)
|
||||
current_position = models.PositiveIntegerField(default=0)
|
||||
percentage = models.FloatField(default=0.0)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "books_book_reading_progress"
|
||||
verbose_name = "Book Reading Progress"
|
||||
verbose_name_plural = "Book Reading Progress"
|
||||
ordering = ["-updated_at"]
|
||||
constraints = [
|
||||
models.UniqueConstraint(
|
||||
fields=["user", "book"],
|
||||
name="uq_book_reading_progress_user_book",
|
||||
)
|
||||
]
|
||||
|
||||
def __str__(self):
|
||||
return f"{self.user} — {self.book.title} ({self.percentage:.0f}%)"
|
||||
@@ -1,26 +1,6 @@
|
||||
from rest_framework import serializers
|
||||
|
||||
from apps.books.models import Book, BookChapter, BookReadingProgress, Chapter, EBook, FontStyle, BackgroundColor, ReadingProgress, ReadingSettings, ReadingStatus, DownloadRecord
|
||||
|
||||
|
||||
class BookChapterSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = BookChapter
|
||||
fields = ["id", "title", "index", "href", "children"]
|
||||
|
||||
|
||||
class EBookContentSerializer(serializers.Serializer):
|
||||
page = serializers.IntegerField()
|
||||
total_pages = serializers.IntegerField()
|
||||
content = serializers.CharField()
|
||||
chapter_title = serializers.CharField()
|
||||
format = serializers.CharField()
|
||||
|
||||
|
||||
class EBookTocSerializer(serializers.Serializer):
|
||||
chapters = serializers.ListField(child=BookChapterSerializer())
|
||||
format = serializers.CharField()
|
||||
page_count = serializers.IntegerField()
|
||||
from apps.books.models import Book, EBook, FontStyle, BackgroundColor, ReadingProgress, ReadingSettings, ReadingStatus
|
||||
|
||||
|
||||
class BookListSerializer(serializers.ModelSerializer):
|
||||
@@ -49,12 +29,11 @@ class BookSerializer(serializers.ModelSerializer):
|
||||
|
||||
class EBookListSerializer(serializers.ModelSerializer):
|
||||
filename = serializers.CharField(read_only=True)
|
||||
format = serializers.CharField(read_only=True)
|
||||
progress = serializers.SerializerMethodField()
|
||||
|
||||
class Meta:
|
||||
model = EBook
|
||||
fields = ["id", "title", "author", "filename", "format", "page_count", "file_size", "cover_image", "created_at", "progress"]
|
||||
fields = ["id", "title", "author", "filename", "cover_image", "created_at", "progress"]
|
||||
|
||||
def get_progress(self, obj):
|
||||
try:
|
||||
@@ -65,13 +44,12 @@ class EBookListSerializer(serializers.ModelSerializer):
|
||||
|
||||
class EBookDetailSerializer(serializers.ModelSerializer):
|
||||
filename = serializers.CharField(read_only=True)
|
||||
format = serializers.CharField(read_only=True)
|
||||
file_url = serializers.SerializerMethodField()
|
||||
progress = serializers.SerializerMethodField()
|
||||
|
||||
class Meta:
|
||||
model = EBook
|
||||
fields = ["id", "title", "author", "filename", "format", "page_count", "file_size", "file_url", "cover_image", "created_at", "updated_at", "progress"]
|
||||
fields = ["id", "title", "author", "filename", "file_url", "cover_image", "created_at", "updated_at", "progress"]
|
||||
|
||||
def get_file_url(self, obj):
|
||||
request = self.context.get("request")
|
||||
@@ -104,20 +82,13 @@ class EBookUploadSerializer(serializers.ModelSerializer):
|
||||
|
||||
def create(self, validated_data):
|
||||
validated_data["user"] = self.context["request"].user
|
||||
# Auto-detect format from file extension
|
||||
import os
|
||||
name = str(getattr(validated_data.get("file"), "name", ""))
|
||||
ext = os.path.splitext(name)[1].lower().lstrip(".")
|
||||
if ext:
|
||||
validated_data["format"] = ext
|
||||
return super().create(validated_data)
|
||||
|
||||
|
||||
class ReadingProgressSerializer(serializers.ModelSerializer):
|
||||
class Meta:
|
||||
model = ReadingProgress
|
||||
fields = ["current_position", "last_page", "device_id", "device_name", "version", "updated_at"]
|
||||
read_only_fields = ["version", "updated_at"]
|
||||
fields = ["current_position", "last_page"]
|
||||
extra_kwargs = {"current_position": {"required": True, "min_value": 0.0, "max_value": 100.0}}
|
||||
|
||||
def validate_current_position(self, value):
|
||||
@@ -147,82 +118,3 @@ class ReadingSettingsSerializer(serializers.ModelSerializer):
|
||||
if value not in valid:
|
||||
raise serializers.ValidationError(f"Background color must be one of: {', '.join(valid)}")
|
||||
return value
|
||||
|
||||
|
||||
class DownloadRecordSerializer(serializers.ModelSerializer):
|
||||
ebook_id = serializers.IntegerField(source="ebook.id", read_only=True)
|
||||
ebook_title = serializers.CharField(source="ebook.title", read_only=True)
|
||||
author = serializers.CharField(source="ebook.author", read_only=True)
|
||||
filename = serializers.SerializerMethodField()
|
||||
cover_image = serializers.ImageField(source="ebook.cover_image", read_only=True)
|
||||
format = serializers.CharField(source="ebook.format", read_only=True)
|
||||
progress = serializers.SerializerMethodField()
|
||||
file_url = serializers.SerializerMethodField()
|
||||
|
||||
class Meta:
|
||||
model = DownloadRecord
|
||||
fields = [
|
||||
"id", "ebook_id", "ebook_title", "author", "filename", "file_url",
|
||||
"file_size", "cover_image", "format", "downloaded_at", "progress",
|
||||
]
|
||||
|
||||
def get_filename(self, obj):
|
||||
return obj.ebook.filename()
|
||||
|
||||
def get_file_url(self, obj):
|
||||
request = self.context.get("request")
|
||||
if request and obj.ebook.file:
|
||||
return request.build_absolute_uri(obj.ebook.file.url)
|
||||
return ""
|
||||
|
||||
def get_progress(self, obj):
|
||||
try:
|
||||
rp = obj.ebook.reading_progress
|
||||
return {"current_position": rp.current_position, "last_page": rp.last_page}
|
||||
except ReadingProgress.DoesNotExist:
|
||||
return None
|
||||
|
||||
|
||||
class StorageSummarySerializer(serializers.Serializer):
|
||||
total_downloads = serializers.IntegerField()
|
||||
total_size_bytes = serializers.IntegerField()
|
||||
ebooks = serializers.ListField(child=serializers.DictField())
|
||||
|
||||
|
||||
class ChapterSummarySerializer(serializers.ModelSerializer):
|
||||
"""Compact serializer for TOC listing — no content body."""
|
||||
|
||||
class Meta:
|
||||
model = Chapter
|
||||
fields = ["id", "book", "title", "number"]
|
||||
|
||||
|
||||
class ChapterDetailSerializer(serializers.ModelSerializer):
|
||||
"""Full serializer with chapter content for reading view."""
|
||||
|
||||
class Meta:
|
||||
model = Chapter
|
||||
fields = ["id", "book", "title", "number", "content", "created_at", "updated_at"]
|
||||
read_only_fields = ["id", "created_at", "updated_at"]
|
||||
|
||||
|
||||
class BookReadingProgressSerializer(serializers.ModelSerializer):
|
||||
"""Serialize chapter-based reading progress for a book."""
|
||||
|
||||
class Meta:
|
||||
model = BookReadingProgress
|
||||
fields = [
|
||||
"id", "book", "current_chapter", "current_position",
|
||||
"percentage", "updated_at",
|
||||
]
|
||||
read_only_fields = ["id", "updated_at"]
|
||||
|
||||
def validate_percentage(self, value):
|
||||
if value < 0.0 or value > 100.0:
|
||||
raise serializers.ValidationError("Percentage must be between 0 and 100.")
|
||||
return value
|
||||
|
||||
def validate_current_chapter(self, value):
|
||||
if value < 1:
|
||||
raise serializers.ValidationError("Chapter number must be positive.")
|
||||
return value
|
||||
@@ -0,0 +1,255 @@
|
||||
"""Tests for the Book search & discovery endpoints."""
|
||||
|
||||
import pytest
|
||||
from django.urls import reverse
|
||||
from rest_framework import status
|
||||
from rest_framework.test import APIClient
|
||||
|
||||
from apps.books.models import Book, ReadingStatus
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Fixtures
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def api_client():
|
||||
return APIClient()
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def user(django_user_model):
|
||||
return django_user_model.objects.create_user(
|
||||
email="reader@example.com",
|
||||
password="testpass123",
|
||||
)
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def auth_client(api_client, user):
|
||||
api_client.force_authenticate(user=user)
|
||||
return api_client
|
||||
|
||||
|
||||
@pytest.fixture
|
||||
def books():
|
||||
books_data = [
|
||||
Book.objects.create(
|
||||
title="Dune",
|
||||
author="Frank Herbert",
|
||||
genre="Science Fiction",
|
||||
reading_status=ReadingStatus.FINISHED,
|
||||
total_pages=688,
|
||||
description="A desert planet saga.",
|
||||
),
|
||||
Book.objects.create(
|
||||
title="Neuromancer",
|
||||
author="William Gibson",
|
||||
genre="Science Fiction",
|
||||
reading_status=ReadingStatus.READING,
|
||||
total_pages=271,
|
||||
description="Cyberpunk classic.",
|
||||
),
|
||||
Book.objects.create(
|
||||
title="The Hobbit",
|
||||
author="J.R.R. Tolkien",
|
||||
genre="Fantasy",
|
||||
reading_status=ReadingStatus.WANT_TO_READ,
|
||||
total_pages=310,
|
||||
description="A hobbit's adventure.",
|
||||
),
|
||||
Book.objects.create(
|
||||
title="1984",
|
||||
author="George Orwell",
|
||||
genre="Dystopian",
|
||||
reading_status=ReadingStatus.FINISHED,
|
||||
total_pages=328,
|
||||
description="Big Brother is watching.",
|
||||
),
|
||||
]
|
||||
return books_data
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Search tests
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@pytest.mark.django_db
|
||||
class TestBookSearch:
|
||||
"""Verify the search endpoint returns correct results."""
|
||||
|
||||
def test_search_by_title(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"q": "Dune"})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
titles = [b["title"] for b in response.data["results"]]
|
||||
assert "Dune" in titles
|
||||
assert "Neuromancer" not in titles
|
||||
|
||||
def test_search_by_author(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"q": "Tolkien"})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
titles = [b["title"] for b in response.data["results"]]
|
||||
assert "The Hobbit" in titles
|
||||
|
||||
def test_search_by_genre(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"q": "Fantasy"})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
titles = [b["title"] for b in response.data["results"]]
|
||||
assert "The Hobbit" in titles
|
||||
|
||||
def test_search_case_insensitive(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"q": "dune"})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert any(b["title"] == "Dune" for b in response.data["results"])
|
||||
|
||||
def test_search_partial_match(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"q": "Neu"})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
titles = [b["title"] for b in response.data["results"]]
|
||||
assert "Neuromancer" in titles
|
||||
|
||||
def test_search_empty_query_returns_all(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"q": ""})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert len(response.data["results"]) == 4
|
||||
|
||||
def test_search_no_results(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"q": "zzzznotfound"})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert len(response.data["results"]) == 0
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Filter tests
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@pytest.mark.django_db
|
||||
class TestBookFilters:
|
||||
"""Verify filters for genre, author, and reading_status."""
|
||||
|
||||
def test_filter_by_genre(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"genre": "Science Fiction"})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
titles = [b["title"] for b in response.data["results"]]
|
||||
assert "Dune" in titles
|
||||
assert "Neuromancer" in titles
|
||||
assert "The Hobbit" not in titles
|
||||
|
||||
def test_filter_by_author(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"author": "George Orwell"})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
titles = [b["title"] for b in response.data["results"]]
|
||||
assert "1984" in titles
|
||||
assert "Dune" not in titles
|
||||
|
||||
def test_filter_by_reading_status(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"reading_status": ReadingStatus.FINISHED})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
titles = [b["title"] for b in response.data["results"]]
|
||||
assert "Dune" in titles
|
||||
assert "1984" in titles
|
||||
assert "Neuromancer" not in titles
|
||||
assert "The Hobbit" not in titles
|
||||
|
||||
def test_filter_combined_with_search(self, auth_client, books):
|
||||
"""Search + filter should intersect results."""
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"q": "Dune", "reading_status": ReadingStatus.FINISHED})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
titles = [b["title"] for b in response.data["results"]]
|
||||
assert "Dune" in titles
|
||||
# 1984 matches reading_status but not search
|
||||
assert "1984" not in titles
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Discovery endpoints
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@pytest.mark.django_db
|
||||
class TestBookDiscovery:
|
||||
"""Verify genre and author discovery endpoints."""
|
||||
|
||||
def test_genres_endpoint(self, auth_client, books):
|
||||
url = reverse("book-genres")
|
||||
response = auth_client.get(url)
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert isinstance(response.data, list)
|
||||
assert "Science Fiction" in response.data
|
||||
assert "Fantasy" in response.data
|
||||
assert "Dystopian" in response.data
|
||||
# No duplicate genres
|
||||
assert response.data.count("Science Fiction") == 1
|
||||
|
||||
def test_authors_endpoint(self, auth_client, books):
|
||||
url = reverse("book-authors")
|
||||
response = auth_client.get(url)
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert isinstance(response.data, list)
|
||||
assert "Frank Herbert" in response.data
|
||||
assert "J.R.R. Tolkien" in response.data
|
||||
|
||||
def test_genres_requires_auth(self, api_client, books):
|
||||
url = reverse("book-genres")
|
||||
response = api_client.get(url)
|
||||
assert response.status_code == status.HTTP_401_UNAUTHORIZED
|
||||
|
||||
def test_authors_requires_auth(self, api_client, books):
|
||||
url = reverse("book-authors")
|
||||
response = api_client.get(url)
|
||||
assert response.status_code == status.HTTP_401_UNAUTHORIZED
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Detail view
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@pytest.mark.django_db
|
||||
class TestBookDetail:
|
||||
"""Verify the book detail endpoint."""
|
||||
|
||||
def test_retrieve_book(self, auth_client, books):
|
||||
book = books[0]
|
||||
url = reverse("book-detail", kwargs={"pk": book.pk})
|
||||
response = auth_client.get(url)
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert response.data["title"] == "Dune"
|
||||
assert response.data["author"] == "Frank Herbert"
|
||||
assert response.data["description"] == "A desert planet saga."
|
||||
assert response.data["total_pages"] == 688
|
||||
|
||||
def test_retrieve_nonexistent_returns_404(self, auth_client, books):
|
||||
url = reverse("book-detail", kwargs={"pk": 99999})
|
||||
response = auth_client.get(url)
|
||||
assert response.status_code == status.HTTP_404_NOT_FOUND
|
||||
|
||||
def test_pagination(self, auth_client, books):
|
||||
"""List with small page size should paginate."""
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(f"{url}?page_size=2")
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
assert "count" in response.data
|
||||
assert "results" in response.data
|
||||
assert response.data["count"] == 4
|
||||
|
||||
def test_ordering(self, auth_client, books):
|
||||
url = reverse("book-list")
|
||||
response = auth_client.get(url, {"ordering": "title"})
|
||||
assert response.status_code == status.HTTP_200_OK
|
||||
titles = [b["title"] for b in response.data["results"]]
|
||||
assert titles == sorted(titles)
|
||||
@@ -1,11 +1,16 @@
|
||||
from django.urls import include, path
|
||||
from rest_framework.routers import DefaultRouter
|
||||
|
||||
from apps.books.views import BookViewSet
|
||||
from apps.books.views import BookViewSet, EBookViewSet, ReadingSettingsViewSet
|
||||
|
||||
router = DefaultRouter()
|
||||
router.register(r"", BookViewSet, basename="book")
|
||||
|
||||
ebook_router = DefaultRouter()
|
||||
ebook_router.register(r"ebooks", EBookViewSet, basename="ebook")
|
||||
|
||||
urlpatterns = [
|
||||
path("", include(router.urls)),
|
||||
path("", include(ebook_router.urls)),
|
||||
path("settings/", ReadingSettingsViewSet.as_view({"get": "list", "patch": "partial_update"}), name="reading-settings"),
|
||||
]
|
||||
+4
-105
@@ -12,13 +12,12 @@ from rest_framework.permissions import AllowAny, IsAuthenticated
|
||||
from rest_framework.request import Request
|
||||
from rest_framework.response import Response
|
||||
|
||||
from apps.books.models import Book, BookChapter, BookReadingProgress, DownloadRecord, EBook, Chapter, ReadingProgress, ReadingSettings
|
||||
from apps.books.models import Book, BookChapter, EBook, ReadingProgress, ReadingSettings
|
||||
from apps.books.serializers import (
|
||||
BookChapterSerializer, BookDetailSerializer, BookListSerializer, BookSerializer,
|
||||
BookReadingProgressSerializer, ChapterDetailSerializer, ChapterSummarySerializer,
|
||||
DownloadRecordSerializer, EBookContentSerializer, EBookDetailSerializer,
|
||||
BookDetailSerializer, BookListSerializer, BookSerializer,
|
||||
BookChapterSerializer, EBookContentSerializer, EBookDetailSerializer,
|
||||
EBookListSerializer, EBookTocSerializer, EBookUploadSerializer,
|
||||
ReadingProgressSerializer, ReadingSettingsSerializer, StorageSummarySerializer,
|
||||
ReadingProgressSerializer, ReadingSettingsSerializer,
|
||||
)
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
@@ -57,64 +56,6 @@ class BookViewSet(viewsets.ModelViewSet):
|
||||
author_list = Book.objects.values_list("author", flat=True).distinct().order_by("author")
|
||||
return Response([a for a in author_list if a])
|
||||
|
||||
@action(detail=False, methods=["get"])
|
||||
def storage(self, request: Request) -> Response:
|
||||
"""Return storage usage summary for the current user."""
|
||||
download_records = DownloadRecord.objects.filter(user=request.user).select_related("ebook")
|
||||
total_size = sum(r.file_size for r in download_records)
|
||||
ebook_list = [
|
||||
{"id": r.ebook.id, "title": r.ebook.title, "file_size": r.file_size}
|
||||
for r in download_records
|
||||
]
|
||||
serializer = StorageSummarySerializer(data={
|
||||
"total_downloads": download_records.count(),
|
||||
"total_size_bytes": total_size,
|
||||
"ebooks": ebook_list,
|
||||
})
|
||||
serializer.is_valid(raise_exception=True)
|
||||
return Response(serializer.data)
|
||||
|
||||
|
||||
@action(detail=True, methods=["get"])
|
||||
def chapters(self, request: Request, pk: int | None = None) -> Response:
|
||||
"""List all chapters for this book (TOC)."""
|
||||
book = self.get_object()
|
||||
chapter_qs = Chapter.objects.filter(book=book).order_by("number")
|
||||
serializer = ChapterSummarySerializer(chapter_qs, many=True)
|
||||
return Response(serializer.data)
|
||||
|
||||
@action(detail=True, methods=["get"], url_path=r"chapters/(?P<chapter_number>[0-9]+)")
|
||||
def chapter_detail(self, request: Request, pk: int | None = None, chapter_number: str | None = None) -> Response:
|
||||
"""Get a specific chapter with full content."""
|
||||
book = self.get_object()
|
||||
try:
|
||||
chapter = Chapter.objects.get(book=book, number=int(chapter_number or "0"))
|
||||
except Chapter.DoesNotExist:
|
||||
return Response(
|
||||
{"detail": "Chapter not found."}, status=status.HTTP_404_NOT_FOUND
|
||||
)
|
||||
serializer = ChapterDetailSerializer(chapter)
|
||||
return Response(serializer.data)
|
||||
|
||||
@action(detail=True, methods=["get", "put"])
|
||||
def progress(self, request: Request, pk: int | None = None) -> Response:
|
||||
"""Get or update chapter-based reading progress for this book."""
|
||||
book = self.get_object()
|
||||
progress_obj, _created = BookReadingProgress.objects.get_or_create(
|
||||
user=request.user, book=book
|
||||
)
|
||||
|
||||
if request.method == "GET":
|
||||
serializer = BookReadingProgressSerializer(progress_obj)
|
||||
return Response(serializer.data)
|
||||
|
||||
serializer = BookReadingProgressSerializer(
|
||||
progress_obj, data=request.data, partial=True
|
||||
)
|
||||
serializer.is_valid(raise_exception=True)
|
||||
serializer.save()
|
||||
return Response(serializer.data, status=status.HTTP_200_OK)
|
||||
|
||||
|
||||
class IsEBookOwner(permissions.BasePermission):
|
||||
def has_object_permission(self, request: Request, view: object, obj: EBook) -> bool:
|
||||
@@ -228,48 +169,6 @@ class EBookViewSet(viewsets.ModelViewSet):
|
||||
serializer.is_valid(raise_exception=True)
|
||||
return Response(serializer.data)
|
||||
|
||||
@action(detail=True, methods=["post"])
|
||||
def download(self, request: Request, pk: int | None = None) -> Response:
|
||||
"""Track download of an e-book. Creates a DownloadRecord and returns file info."""
|
||||
ebook = self.get_object()
|
||||
if not ebook.file:
|
||||
return Response({"error": "No file found for this e-book."}, status=status.HTTP_400_BAD_REQUEST)
|
||||
|
||||
download, created = DownloadRecord.objects.get_or_create(
|
||||
user=request.user,
|
||||
ebook=ebook,
|
||||
defaults={"file_size": ebook.file.size if ebook.file else 0},
|
||||
)
|
||||
if not created:
|
||||
download.file_size = ebook.file.size if ebook.file else 0
|
||||
download.save(update_fields=["file_size"])
|
||||
|
||||
serializer = DownloadRecordSerializer(download, context={"request": request})
|
||||
return Response(serializer.data, status=status.HTTP_200_OK)
|
||||
|
||||
@action(detail=False, methods=["get"])
|
||||
def downloads(self, request: Request) -> Response:
|
||||
"""List all e-books the current user has downloaded."""
|
||||
records = DownloadRecord.objects.filter(user=request.user).select_related(
|
||||
"ebook", "ebook__reading_progress"
|
||||
).prefetch_related("ebook__chapters")
|
||||
page = self.paginate_queryset(records)
|
||||
if page is not None:
|
||||
serializer = DownloadRecordSerializer(page, many=True, context={"request": request})
|
||||
return self.get_paginated_response(serializer.data)
|
||||
serializer = DownloadRecordSerializer(records, many=True, context={"request": request})
|
||||
return Response(serializer.data)
|
||||
|
||||
@action(detail=False, methods=["delete"], url_path="downloads/(?P<download_pk>[^/.]+)")
|
||||
def delete_download(self, request: Request, download_pk: str | None = None) -> Response:
|
||||
"""Delete a download record."""
|
||||
try:
|
||||
download = DownloadRecord.objects.get(pk=download_pk, user=request.user)
|
||||
except DownloadRecord.DoesNotExist:
|
||||
return Response({"error": "Download record not found."}, status=status.HTTP_404_NOT_FOUND)
|
||||
download.delete()
|
||||
return Response(status=status.HTTP_204_NO_CONTENT)
|
||||
|
||||
|
||||
def _store_chapters(ebook: EBook, toc: list[dict[str, Any]], parent_index: int = 0) -> None:
|
||||
"""Recursively store TOC entries as BookChapter records."""
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
from django.apps import AppConfig
|
||||
|
||||
|
||||
class ReaderConfig(AppConfig):
|
||||
default_auto_field = "django.db.models.BigAutoField"
|
||||
name = "apps.reader"
|
||||
verbose_name = "Reader Settings"
|
||||
@@ -1,53 +0,0 @@
|
||||
from django.conf import settings
|
||||
from django.db import models
|
||||
|
||||
|
||||
class ReadingSettings(models.Model):
|
||||
"""Per-user reading preferences for the e-book reader view."""
|
||||
|
||||
THEME_CHOICES = [
|
||||
("sepia", "Sepia"),
|
||||
("dark", "Dark"),
|
||||
("light", "Light"),
|
||||
("paper", "Paper"),
|
||||
]
|
||||
|
||||
FONT_CHOICES = [
|
||||
("sans-serif", "Sans-serif"),
|
||||
("serif", "Serif"),
|
||||
("monospace", "Monospace"),
|
||||
]
|
||||
|
||||
ORIENTATION_CHOICES = [
|
||||
("auto", "Auto"),
|
||||
("portrait", "Portrait"),
|
||||
("landscape", "Landscape"),
|
||||
]
|
||||
|
||||
user = models.OneToOneField(
|
||||
settings.AUTH_USER_MODEL,
|
||||
on_delete=models.CASCADE,
|
||||
related_name="reading_settings",
|
||||
primary_key=True,
|
||||
)
|
||||
font_family = models.CharField(max_length=32, choices=FONT_CHOICES, default="serif")
|
||||
font_size = models.PositiveSmallIntegerField(default=18)
|
||||
line_height = models.FloatField(default=1.6)
|
||||
margin_width = models.PositiveSmallIntegerField(default=16)
|
||||
background_color = models.CharField(max_length=7, default="#f5f0eb")
|
||||
text_color = models.CharField(max_length=7, default="#1a1a1a")
|
||||
brightness = models.PositiveSmallIntegerField(default=100)
|
||||
orientation_lock = models.CharField(
|
||||
max_length=16, choices=ORIENTATION_CHOICES, default="auto"
|
||||
)
|
||||
theme = models.CharField(max_length=32, choices=THEME_CHOICES, default="sepia")
|
||||
created_at = models.DateTimeField(auto_now_add=True)
|
||||
updated_at = models.DateTimeField(auto_now=True)
|
||||
|
||||
class Meta:
|
||||
db_table = "reader_reading_settings"
|
||||
verbose_name = "Reading Settings"
|
||||
verbose_name_plural = "Reading Settings"
|
||||
|
||||
def __str__(self) -> str:
|
||||
return f"{self.user} — {self.theme} ({self.font_size}px)"
|
||||
@@ -1,63 +0,0 @@
|
||||
from rest_framework import serializers
|
||||
|
||||
from apps.reader.models import ReadingSettings
|
||||
|
||||
# Theme presets mapped to colors
|
||||
THEME_COLORS = {
|
||||
"sepia": {"background_color": "#f5f0eb", "text_color": "#1a1a1a"},
|
||||
"dark": {"background_color": "#1a1a2e", "text_color": "#e0e0e0"},
|
||||
"light": {"background_color": "#ffffff", "text_color": "#1a1a1a"},
|
||||
"paper": {"background_color": "#e8e0d4", "text_color": "#2c2c2c"},
|
||||
}
|
||||
|
||||
|
||||
class ReadingSettingsSerializer(serializers.ModelSerializer):
|
||||
"""Serialize ReadingSettings for the current user."""
|
||||
|
||||
class Meta:
|
||||
model = ReadingSettings
|
||||
fields = [
|
||||
"font_family",
|
||||
"font_size",
|
||||
"line_height",
|
||||
"margin_width",
|
||||
"background_color",
|
||||
"text_color",
|
||||
"brightness",
|
||||
"orientation_lock",
|
||||
"theme",
|
||||
"created_at",
|
||||
"updated_at",
|
||||
]
|
||||
read_only_fields = ["created_at", "updated_at"]
|
||||
|
||||
def validate_font_size(self, value: int) -> int:
|
||||
if value < 12 or value > 32:
|
||||
raise serializers.ValidationError("Font size must be between 12 and 32.")
|
||||
return value
|
||||
|
||||
def validate_line_height(self, value: float) -> float:
|
||||
if value < 1.2 or value > 2.0:
|
||||
raise serializers.ValidationError("Line height must be between 1.2 and 2.0.")
|
||||
return value
|
||||
|
||||
def validate_margin_width(self, value: int) -> int:
|
||||
if value < 8 or value > 48:
|
||||
raise serializers.ValidationError("Margin width must be between 8 and 48.")
|
||||
return value
|
||||
|
||||
def validate_brightness(self, value: int) -> int:
|
||||
if value < 0 or value > 100:
|
||||
raise serializers.ValidationError("Brightness must be between 0 and 100.")
|
||||
return value
|
||||
|
||||
def validate(self, attrs):
|
||||
"""Sync theme colors when theme changes, unless explicit colors provided."""
|
||||
theme = attrs.get("theme")
|
||||
if theme and theme in THEME_COLORS:
|
||||
# Only auto-set colors if not explicitly provided
|
||||
if "background_color" not in attrs:
|
||||
attrs["background_color"] = THEME_COLORS[theme]["background_color"]
|
||||
if "text_color" not in attrs:
|
||||
attrs["text_color"] = THEME_COLORS[theme]["text_color"]
|
||||
return attrs
|
||||
@@ -1,7 +0,0 @@
|
||||
from django.urls import path
|
||||
|
||||
from apps.reader.views import reading_settings_view
|
||||
|
||||
urlpatterns = [
|
||||
path("settings/", reading_settings_view, name="reading-settings"),
|
||||
]
|
||||
@@ -1,33 +0,0 @@
|
||||
from rest_framework import permissions, status
|
||||
from rest_framework.decorators import api_view, permission_classes
|
||||
from rest_framework.request import Request
|
||||
from rest_framework.response import Response
|
||||
|
||||
from apps.reader.models import ReadingSettings
|
||||
from apps.reader.serializers import ReadingSettingsSerializer
|
||||
|
||||
|
||||
@api_view(["GET", "PUT", "PATCH"])
|
||||
@permission_classes([permissions.IsAuthenticated])
|
||||
def reading_settings_view(request: Request) -> Response:
|
||||
"""Get or update the current user's reading settings.
|
||||
|
||||
GET → return existing settings (auto-create defaults if missing)
|
||||
PUT → create or fully replace settings
|
||||
PATCH → partial update
|
||||
"""
|
||||
user = request.user
|
||||
settings, created = ReadingSettings.objects.get_or_create(user=user)
|
||||
|
||||
if request.method == "GET":
|
||||
serializer = ReadingSettingsSerializer(settings)
|
||||
return Response(serializer.data)
|
||||
|
||||
if request.method == "PUT":
|
||||
serializer = ReadingSettingsSerializer(settings, data=request.data)
|
||||
elif request.method == "PATCH":
|
||||
serializer = ReadingSettingsSerializer(settings, data=request.data, partial=True)
|
||||
|
||||
serializer.is_valid(raise_exception=True)
|
||||
serializer.save()
|
||||
return Response(serializer.data, status=status.HTTP_200_OK)
|
||||
@@ -40,7 +40,6 @@ INSTALLED_APPS = [
|
||||
"apps.users",
|
||||
"apps.books",
|
||||
"apps.annotations",
|
||||
"apps.reader",
|
||||
]
|
||||
|
||||
MIDDLEWARE = [
|
||||
@@ -141,13 +140,17 @@ USE_I18N = True
|
||||
USE_TZ = True
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Static / Media
|
||||
# Static / Media / Uploads
|
||||
# ---------------------------------------------------------------------------
|
||||
STATIC_URL = "static/"
|
||||
STATIC_ROOT = BASE_DIR / "staticfiles"
|
||||
MEDIA_URL = "media/"
|
||||
MEDIA_ROOT = BASE_DIR / "media"
|
||||
|
||||
# Maximum upload size: 50MB
|
||||
DATA_UPLOAD_MAX_MEMORY_SIZE = 52_428_800
|
||||
FILE_UPLOAD_MAX_MEMORY_SIZE = 52_428_800
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Default primary key
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
@@ -6,5 +6,4 @@ urlpatterns = [
|
||||
path("api/auth/", include("apps.users.urls")),
|
||||
path("api/books/", include("apps.books.urls")),
|
||||
path("api/annotations/", include("apps.annotations.urls")),
|
||||
path("api/reader/", include("apps.reader.urls")),
|
||||
]
|
||||
@@ -8,6 +8,7 @@ pydantic==2.10.5
|
||||
pydantic-settings==2.7.1
|
||||
python-dotenv==1.0.1
|
||||
gunicorn==23.0.0
|
||||
Pillow>=11.0.0
|
||||
pytest==8.3.4
|
||||
pytest-django==4.9.0
|
||||
pytest-cov==6.0.0
|
||||
|
||||
+21
-15
@@ -5,48 +5,54 @@ services:
|
||||
volumes:
|
||||
- postgres_data:/var/lib/postgresql/data
|
||||
environment:
|
||||
POSTGRES_DB: cloudreader
|
||||
POSTGRES_USER: cloudreader
|
||||
POSTGRES_PASSWORD: cloudreader
|
||||
POSTGRES_DB: cloud_reader
|
||||
POSTGRES_USER: postgres
|
||||
POSTGRES_PASSWORD: postgres
|
||||
ports:
|
||||
- "5432:5432"
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U cloudreader -d cloudreader"]
|
||||
test: ["CMD-SHELL", "pg_isready -U postgres -d cloud_reader"]
|
||||
interval: 5s
|
||||
timeout: 5s
|
||||
retries: 10
|
||||
|
||||
api:
|
||||
backend:
|
||||
build:
|
||||
context: ./api
|
||||
context: ./backend
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "8000:8000"
|
||||
environment:
|
||||
DATABASE_URL: "postgres://cloudreader:cloudreader@db:5432/cloudreader"
|
||||
DJANGO_SECRET_KEY: "dev-secret-key-change-in-production"
|
||||
DJANGO_DEBUG: "True"
|
||||
DB_NAME: cloud_reader
|
||||
DB_USER: postgres
|
||||
DB_PASSWORD: postgres
|
||||
DB_HOST: db
|
||||
DB_PORT: "5432"
|
||||
volumes:
|
||||
- ./api:/app
|
||||
- book_uploads:/app/media
|
||||
- ./backend:/app
|
||||
- book_media:/app/media
|
||||
command: >
|
||||
sh -c "python manage.py migrate && python manage.py runserver 0.0.0.0:8000"
|
||||
depends_on:
|
||||
db:
|
||||
condition: service_healthy
|
||||
|
||||
web:
|
||||
frontend:
|
||||
build:
|
||||
context: ./web
|
||||
context: ./frontend
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "3000:3000"
|
||||
- "5173:5173"
|
||||
environment:
|
||||
VITE_API_URL: "http://localhost:8000"
|
||||
volumes:
|
||||
- ./web:/app
|
||||
- ./frontend:/app
|
||||
- /app/node_modules
|
||||
depends_on:
|
||||
- api
|
||||
- backend
|
||||
|
||||
volumes:
|
||||
postgres_data:
|
||||
book_uploads:
|
||||
book_media:
|
||||
@@ -1,246 +0,0 @@
|
||||
# US: Customizable Mobile Reading Experience
|
||||
|
||||
**Issue:** https://gitea-dev.codescripters.org/HermesFactory/cloud-reader/issues (TBD)
|
||||
|
||||
## Overview
|
||||
|
||||
Add a full-screen reading view for ebooks with customizable typography, themes,
|
||||
table of contents navigation, and orientation support. Mobile-first, responsive
|
||||
design that adapts to any screen size.
|
||||
|
||||
---
|
||||
|
||||
## Backend Specification
|
||||
|
||||
### New Models
|
||||
|
||||
#### `apps.books.models.Chapter`
|
||||
|
||||
| Field | Type | Notes |
|
||||
|-------------|--------------------|--------------------------------|
|
||||
| id | AutoField (PK) | |
|
||||
| book | FK -> Book | related_name="chapters" |
|
||||
| title | CharField(512) | Chapter title |
|
||||
| number | PositiveIntegerField | Chapter ordering / TOC index |
|
||||
| content | TextField | Chapter text/markdown content |
|
||||
| created_at | DateTimeField | auto_now_add |
|
||||
| updated_at | DateTimeField | auto_now |
|
||||
|
||||
**Constraints:** UniqueConstraint(book, chapter_number)
|
||||
**Ordering:** [book, number]
|
||||
**Index:** FK to book with db_index
|
||||
|
||||
#### `apps.books.models.ReadingProgress`
|
||||
|
||||
| Field | Type | Notes |
|
||||
|------------------|--------------------|--------------------------------|
|
||||
| id | AutoField (PK) | |
|
||||
| user | FK -> User | related_name="reading_progress"|
|
||||
| book | FK -> Book | related_name="reading_progress"|
|
||||
| current_chapter | PositiveIntegerField | Last chapter number |
|
||||
| current_position | PositiveIntegerField | Position within chapter (paragraph) |
|
||||
| percentage | FloatField | 0.0 - 100.0 overall progress |
|
||||
| updated_at | DateTimeField | auto_now |
|
||||
|
||||
**Constraints:** UniqueConstraint(user, book)
|
||||
**Indexes:** (user, book) composite, (user) filter for list queries
|
||||
|
||||
#### `apps.reader.models.ReadingSettings`
|
||||
|
||||
New app `apps/reader/` for reading preferences, isolated from book data model.
|
||||
|
||||
| Field | Type | Notes |
|
||||
|-------------------|--------------------|-------------------------------|
|
||||
| id | AutoField (PK) | |
|
||||
| user | OneToOneField -> User | related_name="reading_settings" |
|
||||
| font_family | CharField(32) | "sans-serif", "serif", "monospace" |
|
||||
| font_size | PositiveSmallIntegerField | 12-32, default 18 |
|
||||
| line_height | FloatField | 1.2 - 2.0, default 1.6 |
|
||||
| margin_width | PositiveSmallIntegerField | 8-48, default 16 (px) |
|
||||
| background_color | CharField(7) | Hex color, default "#f5f0eb" |
|
||||
| text_color | CharField(7) | Hex color, default "#1a1a1a" |
|
||||
| brightness | PositiveSmallIntegerField | 0-100, default 100 |
|
||||
| orientation_lock | CharField(16) | "auto", "portrait", "landscape" |
|
||||
| theme | CharField(32) | "sepia", "dark", "light", "paper" |
|
||||
| created_at | DateTimeField | auto_now_add |
|
||||
| updated_at | DateTimeField | auto_now |
|
||||
|
||||
### New API Endpoints
|
||||
|
||||
All under `/api/` prefix, authenticated with JWT.
|
||||
|
||||
#### Reader Settings (`/api/reader/settings/`)
|
||||
|
||||
| Method | URL | Action |
|
||||
|--------|------------------------------|---------------------------|
|
||||
| GET | /api/reader/settings/ | Get current user settings |
|
||||
| PUT | /api/reader/settings/ | Create/update settings |
|
||||
| PATCH | /api/reader/settings/ | Partial update settings |
|
||||
|
||||
- Single-object endpoint (one settings record per user, auto-created on first GET)
|
||||
- Validation: font_size 12-32, line_height 1.2-2.0, margin_width 8-48
|
||||
|
||||
#### Reading Progress (`/api/books/{id}/progress/`)
|
||||
|
||||
| Method | URL | Action |
|
||||
|--------|----------------------------------------|------------------------------|
|
||||
| GET | /api/books/{id}/progress/ | Get reading progress for book|
|
||||
| PUT | /api/books/{id}/progress/ | Create/update reading progress|
|
||||
|
||||
- Nested under book detail
|
||||
- Auto-creates progress record on first PUT
|
||||
|
||||
#### Chapters (`/api/books/{id}/chapters/`)
|
||||
|
||||
| Method | URL | Action |
|
||||
|--------|----------------------------------------|------------------------------|
|
||||
| GET | /api/books/{id}/chapters/ | List chapters for book (TOC) |
|
||||
| GET | /api/books/{id}/chapters/{number}/ | Get specific chapter content |
|
||||
|
||||
- Ordering by `number`
|
||||
- Used by frontend TOC sidebar and content loading
|
||||
|
||||
---
|
||||
|
||||
## Frontend Specification
|
||||
|
||||
### New Pages
|
||||
|
||||
#### `/reader/:bookId` — ReadingPage
|
||||
|
||||
Full-screen reading view with:
|
||||
- Chapter content display (left/right swiping or scroll)
|
||||
- Bottom toolbar: TOC toggle, Settings toggle, Progress indicator
|
||||
- Top bar: Back button, Book title, Chapter title
|
||||
- Swipe/tap/page navigation between chapters
|
||||
|
||||
### New Components
|
||||
|
||||
#### `ReaderToolbar`
|
||||
- Fixed bottom toolbar
|
||||
- TOC button (opens TOC drawer)
|
||||
- Settings/theme button (opens settings panel)
|
||||
- Progress bar showing overall reading progress
|
||||
|
||||
#### `TableOfContents`
|
||||
- Slide-in drawer from left
|
||||
- Lists all chapters with current chapter highlighted
|
||||
- Tap on chapter to navigate
|
||||
- Shows reading progress per chapter
|
||||
|
||||
#### `ReadingSettingsPanel`
|
||||
- Slide-in drawer from right (or bottom sheet on mobile)
|
||||
- Controls:
|
||||
- Theme presets: Sepia, Dark, Light, Paper
|
||||
- Font family: Sans-serif, Serif, Monospace
|
||||
- Font size slider (12-32)
|
||||
- Line height slider (1.2-2.0)
|
||||
- Margin/padding control
|
||||
- Orientation lock toggle (Auto / Portrait / Landscape)
|
||||
- All changes persist immediately via API
|
||||
- LocalStorage fallback when offline
|
||||
|
||||
### New Hooks
|
||||
|
||||
#### `useReadingSettings(bookId)`
|
||||
- Fetches user reading settings from API
|
||||
- Returns current settings + update function
|
||||
- Applies CSS custom properties to document root
|
||||
- Falls back to defaults if API unavailable
|
||||
|
||||
#### `useChapters(bookId)`
|
||||
- Fetches chapter list for TOC
|
||||
- Returns chapters array, current chapter, navigate function
|
||||
- Prefetches next/prev chapter content
|
||||
|
||||
#### `useReadingProgress(bookId)`
|
||||
- Fetches/updates reading progress
|
||||
- Auto-saves position on chapter change and periodic interval
|
||||
|
||||
### New Types
|
||||
|
||||
```typescript
|
||||
interface Chapter {
|
||||
id: number;
|
||||
book: number;
|
||||
title: string;
|
||||
number: number;
|
||||
content?: string; // Only present when fetching individual chapter
|
||||
}
|
||||
|
||||
interface ChapterSummary {
|
||||
id: number;
|
||||
book: number;
|
||||
title: string;
|
||||
number: number;
|
||||
}
|
||||
|
||||
interface ReadingSettings {
|
||||
font_family: "sans-serif" | "serif" | "monospace";
|
||||
font_size: number;
|
||||
line_height: number;
|
||||
margin_width: number;
|
||||
background_color: string;
|
||||
text_color: string;
|
||||
brightness: number;
|
||||
orientation_lock: "auto" | "portrait" | "landscape";
|
||||
theme: "sepia" | "dark" | "light" | "paper";
|
||||
}
|
||||
|
||||
interface ReadingProgress {
|
||||
current_chapter: number;
|
||||
current_position: number;
|
||||
percentage: number;
|
||||
updated_at: string;
|
||||
}
|
||||
```
|
||||
|
||||
### CSS / Theming
|
||||
|
||||
Reading view uses CSS custom properties driven by reading settings:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--reader-bg: var(--bg-color, #f5f0eb);
|
||||
--reader-text: var(--text-color, #1a1a1a);
|
||||
--reader-font-family: var(--font-family, "Georgia", serif);
|
||||
--reader-font-size: var(--font-size, 18px);
|
||||
--reader-line-height: var(--line-height, 1.6);
|
||||
--reader-margin: var(--margin-width, 16px);
|
||||
}
|
||||
```
|
||||
|
||||
Three theme presets:
|
||||
- **Sepia**: `bg:#f5f0eb`, `text:#1a1a1a` — warm, easy on eyes
|
||||
- **Dark**: `bg:#1a1a2e`, `text:#e0e0e0` — for low-light reading
|
||||
- **Light**: `bg:#ffffff`, `text:#1a1a1a` — crisp and clean
|
||||
- **Paper**: `bg:#e8e0d4`, `text:#2c2c2c` — book-like feel
|
||||
|
||||
### Orientation Support
|
||||
|
||||
- CSS `@media (orientation: portrait)` and `@media (orientation: landscape)` breakpoints
|
||||
- Reading settings panel includes orientation lock toggle
|
||||
- On mobile, landscape mode expands content horizontally with wider margins
|
||||
- Portrait mode stacks controls vertically for thumb-reachable UI
|
||||
|
||||
### Routing
|
||||
|
||||
Add to App.tsx:
|
||||
```
|
||||
/ → LibraryPage
|
||||
/books/:bookId → BookDetailPage
|
||||
/reader/:bookId → ReadingPage
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Implementation Order
|
||||
|
||||
1. Backend models + migrations (Chapter, ReadingProgress, ReadingSettings)
|
||||
2. Backend serializers + views + URLs
|
||||
3. Frontend types + API client
|
||||
4. Frontend hooks (useReadingSettings, useChapters, useReadingProgress)
|
||||
5. Frontend components (ReadingSettingsPanel, TableOfContents, ReaderToolbar)
|
||||
6. Frontend page (ReadingPage)
|
||||
7. Routing updates
|
||||
8. CSS / theming
|
||||
@@ -0,0 +1,98 @@
|
||||
# Book Search & Discovery — Spec
|
||||
|
||||
## Overview
|
||||
Enable users to search books within the library and discover new books via filters and a dedicated detail view.
|
||||
|
||||
## Backend API Contracts
|
||||
|
||||
### Book List & Search
|
||||
`GET /api/books/`
|
||||
|
||||
**Query Parameters:**
|
||||
| Param | Type | Description |
|
||||
|-------|------|-------------|
|
||||
| `q` | string | Full-text search across title, author, genre |
|
||||
| `genre` | string | Exact filter by genre |
|
||||
| `author` | string | Exact filter by author |
|
||||
| `reading_status` | string | Filter: `want_to_read`, `reading`, `finished`, `dnf` |
|
||||
| `ordering` | string | `title`, `author`, `genre`, `created_at` (prefix `-` for desc) |
|
||||
| `page` | int | Page number (default: 1) |
|
||||
|
||||
**Response (paginated):**
|
||||
```json
|
||||
{
|
||||
"count": 42,
|
||||
"next": "http://.../?page=2",
|
||||
"previous": null,
|
||||
"results": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "Dune",
|
||||
"author": "Frank Herbert",
|
||||
"genre": "Science Fiction",
|
||||
"reading_status": "finished",
|
||||
"reading_status_display": "Finished",
|
||||
"cover_image": "https://..."
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Book Detail
|
||||
`GET /api/books/{id}/`
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"id": 1,
|
||||
"title": "Dune",
|
||||
"author": "Frank Herbert",
|
||||
"genre": "Science Fiction",
|
||||
"description": "...",
|
||||
"reading_status": "finished",
|
||||
"reading_status_display": "Finished",
|
||||
"cover_image": "https://...",
|
||||
"total_pages": 688,
|
||||
"created_at": "2025-01-01T00:00:00Z",
|
||||
"updated_at": "2025-01-15T00:00:00Z"
|
||||
}
|
||||
```
|
||||
|
||||
### Genre / Author Discovery
|
||||
`GET /api/books/genres/` → `["Fiction", "Science Fiction", ...]`
|
||||
|
||||
`GET /api/books/authors/` → `["Frank Herbert", "Ursula K. Le Guin", ...]`
|
||||
|
||||
## Frontend Components
|
||||
|
||||
### LibraryPage (enhanced)
|
||||
- **Search bar** at top: text input with debounced `onChange` → calls API with `q` param
|
||||
- **Filter row**: genre dropdown, author dropdown, reading status dropdown
|
||||
- Genre/Author dropdowns populated from `/api/books/genres/` and `/api/books/authors/`
|
||||
- Reading status uses static enum values
|
||||
- **Results grid**: card layout showing cover, title, author, reading status badge
|
||||
- **Empty state**: "No books found" with clear message when results are empty
|
||||
- **Loading state**: spinner/skeleton while fetching
|
||||
- **Click card → navigate to** `/books/{id}`
|
||||
|
||||
### BookDetailPage (new)
|
||||
- Shows full book info: cover, title, author, genre, description, reading status, total pages
|
||||
- Back button to return to library
|
||||
- Clean, mobile-responsive layout
|
||||
|
||||
## Routes (Frontend)
|
||||
| Path | Component | Auth |
|
||||
|------|-----------|------|
|
||||
| `/` | LibraryPage | Protected |
|
||||
| `/books/:id` | BookDetailPage | Protected |
|
||||
|
||||
## Data Flow
|
||||
1. User types in search bar → 300ms debounce → `GET /api/books/?q=...`
|
||||
2. User selects filter → `GET /api/books/?genre=...&author=...&reading_status=...`
|
||||
3. User clicks result → navigate to `/books/:id`
|
||||
4. BookDetailPage → `GET /api/books/{id}/`
|
||||
|
||||
## Mobile Optimizations
|
||||
- Filters collapse into a toggleable panel on small screens
|
||||
- Cards stack in single column on mobile
|
||||
- Touch-friendly tap targets (min 44px)
|
||||
@@ -0,0 +1,12 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json yarn.lock ./
|
||||
RUN yarn install --frozen-lockfile
|
||||
|
||||
COPY . ./
|
||||
|
||||
EXPOSE 5173
|
||||
|
||||
CMD ["yarn", "dev", "--host"]
|
||||
@@ -6,10 +6,8 @@ const LibraryPage = lazy(() => import("./pages/Library").then((m) => ({ default:
|
||||
const BookDetailPage = lazy(() => import("./pages/BookDetailPage").then((m) => ({ default: m.BookDetailPage })));
|
||||
const ReaderPage = lazy(() => import("./pages/Reader").then((m) => ({ default: m.ReaderPage })));
|
||||
const AddBookPage = lazy(() => import("./pages/AddBook").then((m) => ({ default: m.AddBookPage })));
|
||||
const EditEBookPage = lazy(() => import("./pages/EditEBook").then((m) => ({ default: m.EditEBookPage })));
|
||||
const SettingsPage = lazy(() => import("./pages/Settings").then((m) => ({ default: m.SettingsPage })));
|
||||
const BookmarksNotesPage = lazy(() => import("./components/annotations/BookmarksNotesPage").then((m) => ({ default: m.BookmarksNotesPage })));
|
||||
const ReadingPage = lazy(() => import("./pages/ReadingPage").then((m) => ({ default: m.default })));
|
||||
|
||||
const AuthPage = lazy(() =>
|
||||
import("./pages/AuthPage").then((m) => ({
|
||||
@@ -40,9 +38,7 @@ function AppRoutes() {
|
||||
<Route path="/" element={<ProtectedRoute><LibraryPage /></ProtectedRoute>} />
|
||||
<Route path="/books/:id" element={<ProtectedRoute><BookDetailPage /></ProtectedRoute>} />
|
||||
<Route path="/reader/:id" element={<ProtectedRoute><ReaderPage /></ProtectedRoute>} />
|
||||
<Route path="/read/:id" element={<ProtectedRoute><ReadingPage /></ProtectedRoute>} />
|
||||
<Route path="/add" element={<ProtectedRoute><AddBookPage /></ProtectedRoute>} />
|
||||
<Route path="/edit/:id" element={<ProtectedRoute><EditEBookPage /></ProtectedRoute>} />
|
||||
<Route path="/settings" element={<ProtectedRoute><SettingsPage /></ProtectedRoute>} />
|
||||
<Route path="/bookmarks-notes/:bookId?" element={<ProtectedRoute><BookmarksNotesPage /></ProtectedRoute>} />
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
import api from "./client";
|
||||
import type { ContentResponse, EBookDetail, EBookListItem, ReadingProgress, ReadingSettings, TocResponse } from "../types/book";
|
||||
|
||||
export const booksApi = {
|
||||
async getEBooks(): Promise<EBookListItem[]> {
|
||||
const { data } = await api.get<EBookListItem[]>("/books/ebooks/");
|
||||
return data;
|
||||
},
|
||||
|
||||
async getEBook(id: number): Promise<EBookDetail> {
|
||||
const { data } = await api.get<EBookDetail>(`/books/ebooks/${id}/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async uploadEBook(
|
||||
file: File,
|
||||
title: string,
|
||||
author: string,
|
||||
coverImage?: File | null,
|
||||
): Promise<EBookDetail> {
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
formData.append("title", title);
|
||||
if (author) formData.append("author", author);
|
||||
if (coverImage) formData.append("cover_image", coverImage);
|
||||
|
||||
const { data } = await api.post<EBookDetail>("/books/ebooks/", formData, {
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
});
|
||||
return data;
|
||||
},
|
||||
|
||||
async deleteEBook(id: number): Promise<void> {
|
||||
await api.delete(`/books/ebooks/${id}/`);
|
||||
},
|
||||
|
||||
async processEBook(id: number): Promise<{ status: string }> {
|
||||
const { data } = await api.post<{ status: string }>(`/books/ebooks/${id}/process/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getToc(id: number): Promise<TocResponse> {
|
||||
const { data } = await api.get<TocResponse>(`/books/ebooks/${id}/toc/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getContent(id: number, page: number): Promise<ContentResponse> {
|
||||
const { data } = await api.get<ContentResponse>(`/books/ebooks/${id}/content/?page=${page}`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getProgress(ebookId: number): Promise<ReadingProgress> {
|
||||
const { data } = await api.get<ReadingProgress>(`/books/ebooks/${ebookId}/progress/`);
|
||||
return data;
|
||||
},
|
||||
|
||||
async updateProgress(ebookId: number, progressData: Partial<ReadingProgress>): Promise<ReadingProgress> {
|
||||
const { data } = await api.patch<ReadingProgress>(`/books/ebooks/${ebookId}/progress/`, progressData);
|
||||
return data;
|
||||
},
|
||||
|
||||
async getSettings(): Promise<ReadingSettings> {
|
||||
const { data } = await api.get<ReadingSettings>("/books/settings/");
|
||||
return data;
|
||||
},
|
||||
|
||||
async updateSettings(settingsData: Partial<ReadingSettings>): Promise<ReadingSettings> {
|
||||
const { data } = await api.patch<ReadingSettings>("/books/settings/", settingsData);
|
||||
return data;
|
||||
},
|
||||
};
|
||||
@@ -1,112 +0,0 @@
|
||||
/**
|
||||
* API client for the reader module — reading settings, chapters, and progress.
|
||||
*/
|
||||
|
||||
import type {
|
||||
ChapterDetail,
|
||||
ChapterSummary,
|
||||
ReadingProgress,
|
||||
ReadingSettings,
|
||||
} from "../types/reader";
|
||||
|
||||
const API_BASE = "/api";
|
||||
|
||||
/**
|
||||
* Fetch the current user's reading settings.
|
||||
* Auto-creates defaults on the server if none exist.
|
||||
*/
|
||||
export async function getReadingSettings(): Promise<ReadingSettings> {
|
||||
const response = await fetch(`${API_BASE}/reader/settings/`);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch reading settings: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ReadingSettings>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update (full or partial) the user's reading settings.
|
||||
*/
|
||||
export async function updateReadingSettings(
|
||||
settings: Partial<ReadingSettings>
|
||||
): Promise<ReadingSettings> {
|
||||
const method = settings.theme !== undefined ? "PUT" : "PATCH";
|
||||
const response = await fetch(`${API_BASE}/reader/settings/`, {
|
||||
method,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(settings),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to update reading settings: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ReadingSettings>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch the table of contents (chapter list) for a book.
|
||||
*/
|
||||
export async function getChapters(bookId: number): Promise<ChapterSummary[]> {
|
||||
const response = await fetch(`${API_BASE}/books/${bookId}/chapters/`);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch chapters: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ChapterSummary[]>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch a specific chapter with full content for reading.
|
||||
*/
|
||||
export async function getChapterContent(
|
||||
bookId: number,
|
||||
chapterNumber: number
|
||||
): Promise<ChapterDetail> {
|
||||
const response = await fetch(
|
||||
`${API_BASE}/books/${bookId}/chapters/${chapterNumber}/`
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch chapter ${chapterNumber}: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ChapterDetail>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch reading progress for a book.
|
||||
*/
|
||||
export async function getReadingProgress(
|
||||
bookId: number
|
||||
): Promise<ReadingProgress> {
|
||||
const response = await fetch(`${API_BASE}/books/${bookId}/progress/`);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch reading progress: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ReadingProgress>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update reading progress for a book.
|
||||
*/
|
||||
export async function updateReadingProgress(
|
||||
bookId: number,
|
||||
progress: Partial<ReadingProgress>
|
||||
): Promise<ReadingProgress> {
|
||||
const response = await fetch(`${API_BASE}/books/${bookId}/progress/`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(progress),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to update reading progress: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ReadingProgress>;
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
/**
|
||||
* ReaderToolbar — fixed bottom toolbar for the reading view.
|
||||
* Provides TOC toggle, settings toggle, and progress indicator.
|
||||
*/
|
||||
|
||||
import type { ReadingProgress } from "../../types/reader";
|
||||
|
||||
interface ReaderToolbarProps {
|
||||
bookTitle: string;
|
||||
chapterTitle: string;
|
||||
progress: ReadingProgress | null;
|
||||
onToggleToc: () => void;
|
||||
onToggleSettings: () => void;
|
||||
}
|
||||
|
||||
export default function ReaderToolbar({
|
||||
bookTitle,
|
||||
chapterTitle,
|
||||
progress,
|
||||
onToggleToc,
|
||||
onToggleSettings,
|
||||
}: ReaderToolbarProps) {
|
||||
const percentage = progress?.percentage ?? 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Top bar */}
|
||||
<header className="reader-top-bar">
|
||||
<button
|
||||
type="button"
|
||||
className="reader-bar-btn"
|
||||
onClick={onToggleToc}
|
||||
aria-label="Table of contents"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="reader-bar-title">
|
||||
<span className="reader-bar-book">{bookTitle}</span>
|
||||
<span className="reader-bar-chapter">{chapterTitle}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="reader-bar-btn"
|
||||
onClick={onToggleSettings}
|
||||
aria-label="Reading settings"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Bottom progress bar */}
|
||||
<div className="reader-progress-bar">
|
||||
<div
|
||||
className="reader-progress-fill"
|
||||
style={{ width: `${Math.min(percentage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,232 +0,0 @@
|
||||
/**
|
||||
* ReadingSettingsPanel — slide-in drawer from the right for customizing
|
||||
* the reading experience: theme, font, sizing, orientation.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
import type {
|
||||
FontFamily,
|
||||
OrientationLock,
|
||||
ReadingSettings,
|
||||
ThemePreset,
|
||||
} from "../../types/reader";
|
||||
|
||||
interface ReadingSettingsPanelProps {
|
||||
settings: ReadingSettings;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onUpdate: (partial: Partial<ReadingSettings>) => Promise<void>;
|
||||
}
|
||||
|
||||
const THEME_OPTIONS: { value: ThemePreset; label: string }[] = [
|
||||
{ value: "sepia", label: "Sepia" },
|
||||
{ value: "dark", label: "Dark" },
|
||||
{ value: "light", label: "Light" },
|
||||
{ value: "paper", label: "Paper" },
|
||||
];
|
||||
|
||||
const FONT_OPTIONS: { value: FontFamily; label: string }[] = [
|
||||
{ value: "sans-serif", label: "Sans-serif" },
|
||||
{ value: "serif", label: "Serif" },
|
||||
{ value: "monospace", label: "Monospace" },
|
||||
];
|
||||
|
||||
const ORIENTATION_OPTIONS: { value: OrientationLock; label: string }[] = [
|
||||
{ value: "auto", label: "Auto" },
|
||||
{ value: "portrait", label: "Portrait" },
|
||||
{ value: "landscape", label: "Landscape" },
|
||||
];
|
||||
|
||||
export default function ReadingSettingsPanel({
|
||||
settings,
|
||||
isOpen,
|
||||
onClose,
|
||||
onUpdate,
|
||||
}: ReadingSettingsPanelProps) {
|
||||
const [saving, setSaving] = useState<Record<string, boolean>>({});
|
||||
|
||||
const handleChange = async (
|
||||
key: keyof ReadingSettings,
|
||||
value: string | number
|
||||
) => {
|
||||
setSaving((prev) => ({ ...prev, [key]: true }));
|
||||
try {
|
||||
await onUpdate({ [key]: value as never });
|
||||
} finally {
|
||||
setSaving((prev) => ({ ...prev, [key]: false }));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Overlay */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="settings-overlay"
|
||||
onClick={onClose}
|
||||
onKeyDown={(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
}}
|
||||
role="presentation"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Drawer */}
|
||||
<aside
|
||||
className={`settings-drawer ${isOpen ? "settings-drawer--open" : ""}`}
|
||||
>
|
||||
<div className="settings-header">
|
||||
<h2 className="settings-title">Reading Settings</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="settings-close-btn"
|
||||
onClick={onClose}
|
||||
aria-label="Close settings"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="settings-body">
|
||||
{/* Theme Presets */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">Theme</h3>
|
||||
<div className="theme-grid">
|
||||
{THEME_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
className={`theme-btn ${
|
||||
settings.theme === opt.value ? "theme-btn--active" : ""
|
||||
}`}
|
||||
onClick={() => handleChange("theme", opt.value)}
|
||||
disabled={saving.theme}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Font Family */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">Font</h3>
|
||||
<div className="font-grid">
|
||||
{FONT_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
className={`font-btn ${
|
||||
settings.font_family === opt.value ? "font-btn--active" : ""
|
||||
}`}
|
||||
onClick={() => handleChange("font_family", opt.value)}
|
||||
disabled={saving.font_family}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Font Size Slider */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">
|
||||
Font Size: {settings.font_size}px
|
||||
</h3>
|
||||
<input
|
||||
type="range"
|
||||
min="12"
|
||||
max="32"
|
||||
value={settings.font_size}
|
||||
onChange={(e) =>
|
||||
handleChange("font_size", Number(e.target.value))
|
||||
}
|
||||
className="settings-slider"
|
||||
aria-label="Font size"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Line Height Slider */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">
|
||||
Line Height: {settings.line_height.toFixed(1)}
|
||||
</h3>
|
||||
<input
|
||||
type="range"
|
||||
min="1.2"
|
||||
max="2.0"
|
||||
step="0.1"
|
||||
value={settings.line_height}
|
||||
onChange={(e) =>
|
||||
handleChange("line_height", Number(e.target.value))
|
||||
}
|
||||
className="settings-slider"
|
||||
aria-label="Line height"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Margin Width Slider */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">
|
||||
Margins: {settings.margin_width}px
|
||||
</h3>
|
||||
<input
|
||||
type="range"
|
||||
min="8"
|
||||
max="48"
|
||||
value={settings.margin_width}
|
||||
onChange={(e) =>
|
||||
handleChange("margin_width", Number(e.target.value))
|
||||
}
|
||||
className="settings-slider"
|
||||
aria-label="Margin width"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Brightness Slider */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">
|
||||
Brightness: {settings.brightness}%
|
||||
</h3>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={settings.brightness}
|
||||
onChange={(e) =>
|
||||
handleChange("brightness", Number(e.target.value))
|
||||
}
|
||||
className="settings-slider"
|
||||
aria-label="Brightness"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Orientation Lock */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">Orientation</h3>
|
||||
<div className="orientation-grid">
|
||||
{ORIENTATION_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
className={`orientation-btn ${
|
||||
settings.orientation_lock === opt.value
|
||||
? "orientation-btn--active"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => handleChange("orientation_lock", opt.value)}
|
||||
disabled={saving.orientation_lock}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
/**
|
||||
* TableOfContents — slide-in drawer listing all chapters.
|
||||
* Tap a chapter to navigate. Current chapter is highlighted.
|
||||
*/
|
||||
|
||||
import type { ChapterSummary } from "../../types/reader";
|
||||
|
||||
interface TableOfContentsProps {
|
||||
chapters: ChapterSummary[];
|
||||
currentChapterNumber: number;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onNavigate: (number: number) => void;
|
||||
}
|
||||
|
||||
export default function TableOfContents({
|
||||
chapters,
|
||||
currentChapterNumber,
|
||||
isOpen,
|
||||
onClose,
|
||||
onNavigate,
|
||||
}: TableOfContentsProps) {
|
||||
const handleChapterClick = (number: number) => {
|
||||
onNavigate(number);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Overlay */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="toc-overlay"
|
||||
onClick={onClose}
|
||||
onKeyDown={(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
}}
|
||||
role="presentation"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Drawer */}
|
||||
<aside className={`toc-drawer ${isOpen ? "toc-drawer--open" : ""}`}>
|
||||
<div className="toc-header">
|
||||
<h2 className="toc-title">Contents</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="toc-close-btn"
|
||||
onClick={onClose}
|
||||
aria-label="Close table of contents"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="toc-list">
|
||||
{chapters.length === 0 && (
|
||||
<p className="toc-empty">No chapters available.</p>
|
||||
)}
|
||||
{chapters.map((chapter) => (
|
||||
<button
|
||||
key={chapter.number}
|
||||
type="button"
|
||||
className={`toc-item ${
|
||||
chapter.number === currentChapterNumber ? "toc-item--active" : ""
|
||||
}`}
|
||||
onClick={() => handleChapterClick(chapter.number)}
|
||||
>
|
||||
<span className="toc-item-number">{chapter.number}</span>
|
||||
<span className="toc-item-title">{chapter.title}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
|
||||
import api from "../api/client";
|
||||
|
||||
interface AuthContextValue {
|
||||
isAuthenticated: boolean;
|
||||
loading: boolean;
|
||||
user: { email: string } | null;
|
||||
login: (email: string, password: string) => Promise<void>;
|
||||
register: (email: string, password: string) => Promise<void>;
|
||||
logout: () => void;
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const [user, setUser] = useState<{ email: string } | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (token) {
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split(".")[1] ?? ""));
|
||||
setUser({ email: payload.email ?? payload.sub ?? "user" });
|
||||
} catch {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const login = useCallback(async (email: string, password: string) => {
|
||||
const { data } = await api.post<{ access: string; refresh: string }>("/auth/token/", { email, password });
|
||||
localStorage.setItem("access_token", data.access);
|
||||
localStorage.setItem("refresh_token", data.refresh);
|
||||
const payload = JSON.parse(atob(data.access.split(".")[1] ?? ""));
|
||||
setUser({ email: payload.email ?? payload.sub ?? "user" });
|
||||
}, []);
|
||||
|
||||
const register = useCallback(async (email: string, password: string) => {
|
||||
await api.post("/auth/register/", { email, password });
|
||||
await login(email, password);
|
||||
}, [login]);
|
||||
|
||||
const logout = useCallback(() => {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("refresh_token");
|
||||
setUser(null);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ isAuthenticated: !!user, loading, user, login, register, logout }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAuth(): AuthContextValue {
|
||||
const ctx = useContext(AuthContext);
|
||||
if (!ctx) throw new Error("useAuth must be used within an AuthProvider");
|
||||
return ctx;
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
/**
|
||||
* useChapters — fetch chapter list and manage current chapter navigation.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { getChapterContent, getChapters } from "../api/reader";
|
||||
import type { ChapterDetail, ChapterSummary } from "../types/reader";
|
||||
|
||||
export interface UseChaptersReturn {
|
||||
chapters: ChapterSummary[];
|
||||
currentChapter: ChapterDetail | null;
|
||||
currentChapterNumber: number;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
navigateToChapter: (number: number) => Promise<void>;
|
||||
goToNextChapter: () => Promise<void>;
|
||||
goToPreviousChapter: () => Promise<void>;
|
||||
hasNext: boolean;
|
||||
hasPrevious: boolean;
|
||||
}
|
||||
|
||||
export function useChapters(
|
||||
bookId: number,
|
||||
initialChapter: number = 1
|
||||
): UseChaptersReturn {
|
||||
const [chapters, setChapters] = useState<ChapterSummary[]>([]);
|
||||
const [currentChapter, setCurrentChapter] = useState<ChapterDetail | null>(
|
||||
null
|
||||
);
|
||||
const [currentChapterNumber, setCurrentChapterNumber] =
|
||||
useState<number>(initialChapter);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Fetch chapter list on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsLoading(true);
|
||||
getChapters(bookId)
|
||||
.then((data) => {
|
||||
if (!cancelled) {
|
||||
setChapters(data);
|
||||
// If chapters exist and initial chapter is valid, fetch it
|
||||
if (
|
||||
data.length > 0 &&
|
||||
data.some((c) => c.number === currentChapterNumber)
|
||||
) {
|
||||
return getChapterContent(bookId, currentChapterNumber);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.then((chapter) => {
|
||||
if (!cancelled && chapter) {
|
||||
setCurrentChapter(chapter);
|
||||
}
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load chapters"
|
||||
);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [bookId, currentChapterNumber]);
|
||||
|
||||
const fetchChapter = useCallback(
|
||||
async (number: number) => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const chapter = await getChapterContent(bookId, number);
|
||||
setCurrentChapter(chapter);
|
||||
setCurrentChapterNumber(number);
|
||||
} catch (err: unknown) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load chapter"
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[bookId]
|
||||
);
|
||||
|
||||
const navigateToChapter = useCallback(
|
||||
(number: number) => {
|
||||
fetchChapter(number);
|
||||
},
|
||||
[fetchChapter]
|
||||
);
|
||||
|
||||
const goToNextChapter = useCallback(() => {
|
||||
const next = currentChapterNumber + 1;
|
||||
if (chapters.some((c) => c.number === next)) {
|
||||
fetchChapter(next);
|
||||
}
|
||||
}, [currentChapterNumber, chapters, fetchChapter]);
|
||||
|
||||
const goToPreviousChapter = useCallback(() => {
|
||||
const prev = currentChapterNumber - 1;
|
||||
if (prev >= 1 && chapters.some((c) => c.number === prev)) {
|
||||
fetchChapter(prev);
|
||||
}
|
||||
}, [currentChapterNumber, chapters, fetchChapter]);
|
||||
|
||||
const hasNext = chapters.some((c) => c.number === currentChapterNumber + 1);
|
||||
const hasPrevious = chapters.some((c) => c.number === currentChapterNumber - 1);
|
||||
|
||||
return {
|
||||
chapters,
|
||||
currentChapter,
|
||||
currentChapterNumber,
|
||||
isLoading,
|
||||
error,
|
||||
navigateToChapter,
|
||||
goToNextChapter,
|
||||
goToPreviousChapter,
|
||||
hasNext,
|
||||
hasPrevious,
|
||||
};
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
/**
|
||||
* useReadingProgress — fetch and update reading progress for a book.
|
||||
* Auto-saves when chapter or position changes.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { getReadingProgress, updateReadingProgress } from "../api/reader";
|
||||
import type { ReadingProgress } from "../types/reader";
|
||||
|
||||
export interface UseReadingProgressReturn {
|
||||
progress: ReadingProgress | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
saveProgress: (
|
||||
chapter: number,
|
||||
position: number,
|
||||
percentage: number
|
||||
) => Promise<void>;
|
||||
/** Schedule a debounced save — fires at most once per 3 seconds */
|
||||
debouncedSave: (
|
||||
chapter: number,
|
||||
position: number,
|
||||
percentage: number
|
||||
) => void;
|
||||
}
|
||||
|
||||
export function useReadingProgress(
|
||||
bookId: number
|
||||
): UseReadingProgressReturn {
|
||||
const [progress, setProgress] = useState<ReadingProgress | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// Fetch progress on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsLoading(true);
|
||||
getReadingProgress(bookId)
|
||||
.then((data) => {
|
||||
if (!cancelled) setProgress(data);
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load progress"
|
||||
);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [bookId]);
|
||||
|
||||
const saveProgress = useCallback(
|
||||
async (chapter: number, position: number, percentage: number) => {
|
||||
try {
|
||||
const updated = await updateReadingProgress(bookId, {
|
||||
current_chapter: chapter,
|
||||
current_position: position,
|
||||
percentage,
|
||||
});
|
||||
setProgress(updated);
|
||||
setError(null);
|
||||
} catch (err: unknown) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to save progress"
|
||||
);
|
||||
}
|
||||
},
|
||||
[bookId]
|
||||
);
|
||||
|
||||
const debouncedSave = useCallback(
|
||||
(chapter: number, position: number, percentage: number) => {
|
||||
if (debounceTimer.current) {
|
||||
clearTimeout(debounceTimer.current);
|
||||
}
|
||||
debounceTimer.current = setTimeout(() => {
|
||||
saveProgress(chapter, position, percentage);
|
||||
}, 3000);
|
||||
},
|
||||
[saveProgress]
|
||||
);
|
||||
|
||||
// Cleanup timer on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimer.current) {
|
||||
clearTimeout(debounceTimer.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { progress, isLoading, error, saveProgress, debouncedSave };
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
/**
|
||||
* useReadingSettings — fetch and manage user reading preferences.
|
||||
* Applies settings as CSS custom properties on the document root.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
getReadingSettings,
|
||||
updateReadingSettings,
|
||||
} from "../api/reader";
|
||||
import type { ReadingSettings } from "../types/reader";
|
||||
|
||||
const DEFAULT_SETTINGS: ReadingSettings = {
|
||||
font_family: "serif",
|
||||
font_size: 18,
|
||||
line_height: 1.6,
|
||||
margin_width: 16,
|
||||
background_color: "#f5f0eb",
|
||||
text_color: "#1a1a1a",
|
||||
brightness: 100,
|
||||
orientation_lock: "auto",
|
||||
theme: "sepia",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
};
|
||||
|
||||
function applyCssVariables(settings: ReadingSettings): void {
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty("--reader-bg", settings.background_color);
|
||||
root.style.setProperty("--reader-text", settings.text_color);
|
||||
root.style.setProperty("--reader-font-family", settings.font_family);
|
||||
root.style.setProperty("--reader-font-size", `${settings.font_size}px`);
|
||||
root.style.setProperty("--reader-line-height", String(settings.line_height));
|
||||
root.style.setProperty("--reader-margin", `${settings.margin_width}px`);
|
||||
root.style.setProperty("--reader-brightness", `${settings.brightness}%`);
|
||||
}
|
||||
|
||||
export interface UseReadingSettingsReturn {
|
||||
settings: ReadingSettings;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
updateSettings: (partial: Partial<ReadingSettings>) => Promise<void>;
|
||||
}
|
||||
|
||||
export function useReadingSettings(): UseReadingSettingsReturn {
|
||||
const [settings, setSettings] = useState<ReadingSettings>(DEFAULT_SETTINGS);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Fetch settings on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsLoading(true);
|
||||
getReadingSettings()
|
||||
.then((data) => {
|
||||
if (!cancelled) {
|
||||
setSettings(data);
|
||||
applyCssVariables(data);
|
||||
}
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load reading settings"
|
||||
);
|
||||
// Apply defaults
|
||||
applyCssVariables(DEFAULT_SETTINGS);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const updateSettings = useCallback(
|
||||
async (partial: Partial<ReadingSettings>) => {
|
||||
try {
|
||||
const updated = await updateReadingSettings(partial);
|
||||
setSettings(updated);
|
||||
applyCssVariables(updated);
|
||||
setError(null);
|
||||
} catch (err: unknown) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to update reading settings"
|
||||
);
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
return { settings, isLoading, error, updateSettings };
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
|
||||
export function AddBookPage() {
|
||||
const navigate = useNavigate();
|
||||
const [title, setTitle] = useState("");
|
||||
const [author, setAuthor] = useState("");
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selected = e.target.files?.[0] ?? null;
|
||||
if (selected) {
|
||||
const ext = selected.name.split(".").pop()?.toLowerCase();
|
||||
if (ext !== "epub" && ext !== "pdf") { setError("Only EPUB and PDF files are supported."); setFile(null); return; }
|
||||
setFile(selected); setError(null);
|
||||
if (!title) setTitle(selected.name.replace(/\.(epub|pdf)$/i, ""));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!file || !title.trim()) { setError("Title and file are required."); return; }
|
||||
setUploading(true); setError(null);
|
||||
try { await booksApi.uploadEBook(file, title.trim(), author.trim()); navigate("/"); }
|
||||
catch (err) { setError(err instanceof Error ? err.message : "Upload failed."); }
|
||||
finally { setUploading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Back</button>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>Add Book</h1>
|
||||
</header>
|
||||
<form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 20 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>File (EPUB or PDF) *</label>
|
||||
<input type="file" accept=".epub,.pdf" onChange={handleFileChange} style={{ padding: "10px 0" }} />
|
||||
{file && <p style={{ fontSize: 13, color: "#666", marginTop: 4 }}>Selected: {file.name}</p>}
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Title *</label>
|
||||
<input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Book title" style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Author</label>
|
||||
<input type="text" value={author} onChange={(e) => setAuthor(e.target.value)} placeholder="Author name" style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
<button type="submit" disabled={uploading} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: uploading ? 0.6 : 1, marginTop: 8 }}>{uploading ? "Uploading..." : "Upload Book"}</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import React, { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
function AuthForm({ isLogin, onToggle }: { isLogin: boolean; onToggle: () => void }) {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { login, register } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault(); setError(null);
|
||||
if (!isLogin && password !== confirmPassword) { setError("Passwords do not match."); return; }
|
||||
setLoading(true);
|
||||
try {
|
||||
if (isLogin) await login(email, password);
|
||||
else await register(email, password);
|
||||
navigate("/");
|
||||
} catch (err) { setError(err instanceof Error ? err.message : isLogin ? "Login failed" : "Registration failed"); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", background: "#f8f9fa", padding: 16 }}>
|
||||
<div style={{ width: "100%", maxWidth: 400, background: "#fff", borderRadius: 12, padding: 32, boxShadow: "0 2px 16px rgba(0,0,0,0.08)" }}>
|
||||
<h1 style={{ fontSize: 28, fontWeight: 700, color: "#1a1a2e", textAlign: "center", marginBottom: 4 }}>Cloud Reader</h1>
|
||||
<h2 style={{ fontSize: 16, color: "#888", textAlign: "center", marginBottom: 24, fontWeight: 400 }}>{isLogin ? "Sign In" : "Create Account"}</h2>
|
||||
<form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Email</label>
|
||||
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" required style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Password</label>
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="At least 8 characters" required minLength={8} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>
|
||||
{!isLogin && <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Confirm Password</label>
|
||||
<input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} placeholder="Repeat your password" required minLength={8} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, outline: "none" }} />
|
||||
</div>}
|
||||
<button type="submit" disabled={loading} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: loading ? 0.6 : 1, marginTop: 8 }}>{loading ? (isLogin ? "Signing in..." : "Creating account...") : (isLogin ? "Sign In" : "Create Account")}</button>
|
||||
</form>
|
||||
<p style={{ textAlign: "center", marginTop: 20, color: "#888", fontSize: 14 }}>
|
||||
{isLogin ? "Don't have an account? " : "Already have an account? "}
|
||||
<button onClick={onToggle} style={{ background: "none", border: "none", color: "#1a1a2e", fontWeight: 600, cursor: "pointer", fontSize: 14, textDecoration: "underline" }}>{isLogin ? "Register" : "Sign In"}</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LoginPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={true} onToggle={onToggle} />; }
|
||||
export function RegisterPage({ onToggle }: { onToggle: () => void }) { return <AuthForm isLogin={false} onToggle={onToggle} />; }
|
||||
@@ -0,0 +1,159 @@
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { BookDetail } from "../types/book";
|
||||
|
||||
export function BookDetailPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [book, setBook] = useState<BookDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadBook = useCallback(async () => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const bookId = Number(id);
|
||||
if (Number.isNaN(bookId)) {
|
||||
setError("Invalid book ID");
|
||||
return;
|
||||
}
|
||||
const data = await booksApi.getBook(bookId);
|
||||
setBook(data);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load book details");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadBook();
|
||||
}, [loadBook]);
|
||||
|
||||
const statusColors: Record<string, { bg: string; text: string }> = {
|
||||
want_to_read: { bg: "#dbeafe", text: "#1d4ed8" },
|
||||
reading: { bg: "#dcfce7", text: "#16a34a" },
|
||||
finished: { bg: "#f3e8ff", text: "#9333ea" },
|
||||
dnf: { bg: "#fef3c7", text: "#b45309" },
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<div style={{ height: 32, width: 80, background: "#e5e7eb", borderRadius: 6, marginBottom: 24 }} />
|
||||
<div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
|
||||
<div style={{ width: 240, height: 360, background: "#e5e7eb", borderRadius: 12, flexShrink: 0 }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ height: 28, background: "#e5e7eb", borderRadius: 6, marginBottom: 12, width: "60%" }} />
|
||||
<div style={{ height: 18, background: "#e5e7eb", borderRadius: 4, marginBottom: 8, width: "40%" }} />
|
||||
<div style={{ height: 18, background: "#e5e7eb", borderRadius: 4, marginBottom: 8, width: "30%" }} />
|
||||
<div style={{ height: 14, background: "#e5e7eb", borderRadius: 4, marginBottom: 4, width: "90%" }} />
|
||||
<div style={{ height: 14, background: "#e5e7eb", borderRadius: 4, marginBottom: 4, width: "80%" }} />
|
||||
<div style={{ height: 14, background: "#e5e7eb", borderRadius: 4, width: "70%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !book) {
|
||||
return (
|
||||
<div style={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<button onClick={() => navigate("/")} className="btn btn-secondary" style={{ marginBottom: 24 }}>← Back to Library</button>
|
||||
<div style={{ textAlign: "center", padding: "80px 20px" }}>
|
||||
<div style={{ fontSize: 64, marginBottom: 16 }}>😕</div>
|
||||
<h2 style={{ fontSize: 20, color: "#1f2937", marginBottom: 8 }}>Book not found</h2>
|
||||
<p style={{ color: "#6b7280", marginBottom: 20 }}>{error || "The book you're looking for doesn't exist or has been removed."}</p>
|
||||
<button onClick={() => void loadBook()} className="btn" style={{ padding: "10px 24px" }}>Retry</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sc = statusColors[book.reading_status] ?? { bg: "#f3f4f6", text: "#6b7280" };
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
{/* Back button */}
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
style={{
|
||||
display: "inline-flex", alignItems: "center", gap: 4, padding: "8px 16px",
|
||||
borderRadius: 8, border: "1px solid #e5e7eb", background: "#fff",
|
||||
color: "#374151", fontSize: 14, cursor: "pointer", marginBottom: 24,
|
||||
}}
|
||||
>
|
||||
← Back to Library
|
||||
</button>
|
||||
|
||||
{/* Book Detail */}
|
||||
<div style={{ display: "flex", gap: 32, flexWrap: "wrap" }}>
|
||||
{/* Cover */}
|
||||
<div style={{ flexShrink: 0 }}>
|
||||
<div style={{
|
||||
width: 240, height: 360, borderRadius: 12, overflow: "hidden",
|
||||
background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center",
|
||||
boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
|
||||
}}>
|
||||
{book.cover_image
|
||||
? <img src={book.cover_image} alt={book.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
|
||||
: <span style={{ fontSize: 80 }}>📖</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div style={{ flex: 1, minWidth: 240 }}>
|
||||
<h1 style={{ fontSize: 28, fontWeight: 700, color: "#1f2937", marginBottom: 8, lineHeight: 1.2 }}>
|
||||
{book.title}
|
||||
</h1>
|
||||
|
||||
{book.author && (
|
||||
<p style={{ fontSize: 18, color: "#4b5563", marginBottom: 6 }}>
|
||||
by {book.author}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 16, marginTop: 12 }}>
|
||||
<span style={{ background: sc.bg, color: sc.text, fontSize: 13, fontWeight: 600, padding: "4px 12px", borderRadius: 999 }}>
|
||||
{book.reading_status_display}
|
||||
</span>
|
||||
{book.genre && (
|
||||
<span style={{ background: "#eef2ff", color: "#4f46e5", fontSize: 13, padding: "4px 12px", borderRadius: 999 }}>
|
||||
{book.genre}
|
||||
</span>
|
||||
)}
|
||||
{book.total_pages > 0 && (
|
||||
<span style={{ background: "#f3f4f6", color: "#6b7280", fontSize: 13, padding: "4px 12px", borderRadius: 999 }}>
|
||||
{book.total_pages} pages
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{book.description && (
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<h3 style={{ fontSize: 16, fontWeight: 600, color: "#1f2937", marginBottom: 8 }}>Description</h3>
|
||||
<p style={{ fontSize: 15, color: "#4b5563", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>
|
||||
{book.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ marginTop: 24, paddingTop: 16, borderTop: "1px solid #e5e7eb" }}>
|
||||
<p style={{ fontSize: 13, color: "#9ca3af" }}>
|
||||
Added {new Date(book.created_at).toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" })}
|
||||
{book.created_at !== book.updated_at && ` · Updated ${new Date(book.updated_at).toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" })}`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Mobile-only: open in reader if it's an ebook, or just navigate back */}
|
||||
<div style={{ marginTop: 24, display: "none" }}>
|
||||
<button onClick={() => navigate("/")} className="btn btn-block">Back to Library</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,305 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { BookListItem, BookSearchParams } from "../types/book";
|
||||
import { READING_STATUS_OPTIONS } from "../types/book";
|
||||
import { useAuth } from "../context/AuthContext";
|
||||
|
||||
interface FilterState {
|
||||
genre: string;
|
||||
author: string;
|
||||
reading_status: string;
|
||||
}
|
||||
|
||||
function useDebounce<T>(value: T, delay: number): T {
|
||||
const [debounced, setDebounced] = useState(value);
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setDebounced(value), delay);
|
||||
return () => clearTimeout(timer);
|
||||
}, [value, delay]);
|
||||
return debounced;
|
||||
}
|
||||
|
||||
export function LibraryPage() {
|
||||
const navigate = useNavigate();
|
||||
const { logout } = useAuth();
|
||||
|
||||
const [books, setBooks] = useState<BookListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [filters, setFilters] = useState<FilterState>({ genre: "", author: "", reading_status: "" });
|
||||
const [genres, setGenres] = useState<string[]>([]);
|
||||
const [authors, setAuthors] = useState<string[]>([]);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
const debouncedSearch = useDebounce(searchQuery, 300);
|
||||
const loadedRef = useRef(false);
|
||||
|
||||
// Load filter options once
|
||||
useEffect(() => {
|
||||
if (loadedRef.current) return;
|
||||
loadedRef.current = true;
|
||||
void Promise.all([booksApi.getGenres(), booksApi.getAuthors()]).then(
|
||||
([genreList, authorList]) => {
|
||||
setGenres(genreList);
|
||||
setAuthors(authorList);
|
||||
},
|
||||
() => {
|
||||
// Filters degrade gracefully if discovery endpoints fail
|
||||
},
|
||||
);
|
||||
}, []);
|
||||
|
||||
const loadBooks = useCallback(async (params: BookSearchParams) => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await booksApi.searchBooks(params);
|
||||
setBooks(response.results);
|
||||
setTotalCount(response.count);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load books");
|
||||
setBooks([]);
|
||||
setTotalCount(0);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Reload when search or filters change
|
||||
useEffect(() => {
|
||||
const params: BookSearchParams = {};
|
||||
if (debouncedSearch) params.q = debouncedSearch;
|
||||
if (filters.genre) params.genre = filters.genre;
|
||||
if (filters.author) params.author = filters.author;
|
||||
if (filters.reading_status) params.reading_status = filters.reading_status;
|
||||
void loadBooks(params);
|
||||
}, [debouncedSearch, filters, loadBooks]);
|
||||
|
||||
const handleFilterChange = (key: keyof FilterState, value: string) => {
|
||||
setFilters((prev) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
|
||||
const clearAllFilters = () => {
|
||||
setSearchQuery("");
|
||||
setFilters({ genre: "", author: "", reading_status: "" });
|
||||
};
|
||||
|
||||
const hasActiveFilters = !!searchQuery || !!filters.genre || !!filters.author || !!filters.reading_status;
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 960, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
{/* Header */}
|
||||
<header style={{
|
||||
display: "flex", justifyContent: "space-between", alignItems: "center",
|
||||
marginBottom: 20, padding: "16px 0", borderBottom: "1px solid #e5e7eb", flexWrap: "wrap", gap: 8,
|
||||
}}>
|
||||
<div>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1f2937", margin: 0 }}>Library</h1>
|
||||
{!loading && <p style={{ fontSize: 13, color: "#6b7280", marginTop: 2 }}>{totalCount} book{totalCount !== 1 ? "s" : ""}</p>}
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
|
||||
<button onClick={() => navigate("/add")} className="btn">+ Add Book</button>
|
||||
<button onClick={() => navigate("/bookmarks-notes")} className="btn btn-secondary">Bookmarks</button>
|
||||
<button onClick={() => navigate("/settings")} className="btn btn-secondary">Settings</button>
|
||||
<button onClick={logout} className="btn btn-danger">Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
|
||||
<div style={{ flex: 1, position: "relative" }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by title, author, or genre..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
style={{
|
||||
width: "100%", padding: "12px 16px 12px 44px", borderRadius: 10,
|
||||
border: "1px solid #e5e7eb", fontSize: 15, background: "#fff",
|
||||
outline: "none", boxSizing: "border-box",
|
||||
}}
|
||||
/>
|
||||
<span style={{
|
||||
position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)",
|
||||
fontSize: 18, color: "#9ca3af", pointerEvents: "none",
|
||||
}}>🔍</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={`btn ${showFilters ? "" : "btn-secondary"}`}
|
||||
title="Toggle filters"
|
||||
>
|
||||
{showFilters ? "▲ Filters" : "▼ Filters"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters Panel */}
|
||||
{showFilters && (
|
||||
<div style={{
|
||||
background: "#fff", borderRadius: 10, padding: 16, marginBottom: 16,
|
||||
border: "1px solid #e5e7eb", display: "flex", gap: 12, flexWrap: "wrap", alignItems: "end",
|
||||
}}>
|
||||
<div style={{ minWidth: 160, flex: 1 }}>
|
||||
<label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "#6b7280", marginBottom: 4 }}>Genre</label>
|
||||
<select
|
||||
value={filters.genre}
|
||||
onChange={(e) => handleFilterChange("genre", e.target.value)}
|
||||
style={{
|
||||
width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid #e5e7eb",
|
||||
fontSize: 14, background: "#fff", cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<option value="">All Genres</option>
|
||||
{genres.map((g) => <option key={g} value={g}>{g}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ minWidth: 160, flex: 1 }}>
|
||||
<label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "#6b7280", marginBottom: 4 }}>Author</label>
|
||||
<select
|
||||
value={filters.author}
|
||||
onChange={(e) => handleFilterChange("author", e.target.value)}
|
||||
style={{
|
||||
width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid #e5e7eb",
|
||||
fontSize: 14, background: "#fff", cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<option value="">All Authors</option>
|
||||
{authors.map((a) => <option key={a} value={a}>{a}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ minWidth: 160, flex: 1 }}>
|
||||
<label style={{ display: "block", fontSize: 12, fontWeight: 600, color: "#6b7280", marginBottom: 4 }}>Status</label>
|
||||
<select
|
||||
value={filters.reading_status}
|
||||
onChange={(e) => handleFilterChange("reading_status", e.target.value)}
|
||||
style={{
|
||||
width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid #e5e7eb",
|
||||
fontSize: 14, background: "#fff", cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
{READING_STATUS_OPTIONS.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
{hasActiveFilters && (
|
||||
<button onClick={clearAllFilters} className="btn btn-secondary" style={{ whiteSpace: "nowrap" }}>
|
||||
✕ Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error State */}
|
||||
{error && (
|
||||
<div style={{ background: "#fef2f2", padding: 16, borderRadius: 8, marginBottom: 16, textAlign: "center" }}>
|
||||
<p style={{ color: "#dc2626", fontSize: 14 }}>{error}</p>
|
||||
<button onClick={() => void loadBooks({})} style={{ marginTop: 8, padding: "8px 16px", border: "none", borderRadius: 6, background: "#dc2626", color: "#fff", cursor: "pointer", fontSize: 13 }}>Retry</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && (
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 16, opacity: 0.6 }}>
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} style={{ background: "#fff", borderRadius: 12, overflow: "hidden", boxShadow: "0 2px 8px rgba(0,0,0,0.06)" }}>
|
||||
<div style={{ height: 180, background: "#f0f0f0" }} />
|
||||
<div style={{ padding: 12 }}>
|
||||
<div style={{ height: 14, background: "#f0f0f0", borderRadius: 4, marginBottom: 6, width: "70%" }} />
|
||||
<div style={{ height: 12, background: "#f0f0f0", borderRadius: 4, width: "40%" }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!loading && !error && books.length === 0 && (
|
||||
<div style={{ textAlign: "center", padding: "80px 20px" }}>
|
||||
<div style={{ fontSize: 64, marginBottom: 16 }}>{hasActiveFilters ? "🔍" : "📚"}</div>
|
||||
<h2 style={{ fontSize: 20, color: "#1f2937", marginBottom: 8 }}>
|
||||
{hasActiveFilters ? "No books found" : "Your library is empty"}
|
||||
</h2>
|
||||
<p style={{ color: "#6b7280", marginBottom: 20, fontSize: 15, lineHeight: 1.5 }}>
|
||||
{hasActiveFilters
|
||||
? "Try adjusting your search query or filters to discover more books."
|
||||
: "Add a book to get started building your collection."}
|
||||
</p>
|
||||
{hasActiveFilters ? (
|
||||
<button onClick={clearAllFilters} className="btn" style={{ padding: "10px 24px" }}>
|
||||
Clear All Filters
|
||||
</button>
|
||||
) : (
|
||||
<button onClick={() => navigate("/add")} className="btn" style={{ padding: "10px 24px" }}>
|
||||
Add Your First Book
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results Grid */}
|
||||
{!loading && books.length > 0 && (
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 16 }}>
|
||||
{books.map((book) => {
|
||||
const statusColors: Record<string, { bg: string; text: string }> = {
|
||||
want_to_read: { bg: "#dbeafe", text: "#1d4ed8" },
|
||||
reading: { bg: "#dcfce7", text: "#16a34a" },
|
||||
finished: { bg: "#f3e8ff", text: "#9333ea" },
|
||||
dnf: { bg: "#fef3c7", text: "#b45309" },
|
||||
};
|
||||
const sc = statusColors[book.reading_status] ?? { bg: "#f3f4f6", text: "#6b7280" };
|
||||
|
||||
return (
|
||||
<div
|
||||
key={book.id}
|
||||
onClick={() => navigate(`/books/${book.id}`)}
|
||||
style={{
|
||||
background: "#fff", borderRadius: 12, overflow: "hidden",
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.06)", cursor: "pointer",
|
||||
transition: "transform 0.15s, box-shadow 0.15s",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = "translateY(-2px)";
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = "0 4px 16px rgba(0,0,0,0.1)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = "";
|
||||
(e.currentTarget as HTMLElement).style.boxShadow = "0 2px 8px rgba(0,0,0,0.06)";
|
||||
}}
|
||||
>
|
||||
<div style={{ height: 180, background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
|
||||
{book.cover_image
|
||||
? <img src={book.cover_image} alt={book.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
|
||||
: <span style={{ fontSize: 48 }}>📖</span>}
|
||||
<span style={{
|
||||
position: "absolute", top: 8, right: 8,
|
||||
background: sc.bg, color: sc.text, fontSize: 11, fontWeight: 600,
|
||||
padding: "2px 8px", borderRadius: 999, lineHeight: "18px",
|
||||
}}>
|
||||
{book.reading_status_display}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ padding: 12 }}>
|
||||
<h3 style={{ fontSize: 14, fontWeight: 600, color: "#1f2937", marginBottom: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{book.title}
|
||||
</h3>
|
||||
<p style={{ fontSize: 12, color: "#6b7280", marginBottom: 4 }}>
|
||||
{book.author || "Unknown Author"}
|
||||
</p>
|
||||
{book.genre && (
|
||||
<span style={{ fontSize: 11, color: "#4f46e5", background: "#eef2ff", padding: "1px 6px", borderRadius: 4 }}>
|
||||
{book.genre}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { EBookDetail } from "../types/book";
|
||||
|
||||
export function ReaderPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [book, setBook] = useState<EBookDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const progressTimer = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const scrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const bookId = Number(id);
|
||||
|
||||
const saveProgress = useCallback(async () => {
|
||||
if (!scrollRef.current || !book) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
|
||||
const position = Math.min(100, Math.round((scrollTop / (scrollHeight - clientHeight)) * 100));
|
||||
try { await booksApi.updateProgress(bookId, { current_position: position }); } catch { /* silent */ }
|
||||
}, [bookId, book]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadBook = async () => {
|
||||
setLoading(true); setError(null);
|
||||
try {
|
||||
const data = await booksApi.getEBook(bookId);
|
||||
setBook(data);
|
||||
document.title = data.title;
|
||||
} catch (err) { setError(err instanceof Error ? err.message : "Failed to load book"); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
void loadBook();
|
||||
return () => { document.title = "Cloud Reader"; };
|
||||
}, [bookId]);
|
||||
|
||||
useEffect(() => {
|
||||
progressTimer.current = setInterval(() => { void saveProgress(); }, 5000);
|
||||
return () => { if (progressTimer.current) clearInterval(progressTimer.current); };
|
||||
}, [saveProgress]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleBeforeUnload = () => { void saveProgress(); };
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
return () => window.removeEventListener("beforeunload", handleBeforeUnload);
|
||||
}, [saveProgress]);
|
||||
|
||||
if (loading) return <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh", color: "#888" }}><p>Loading book...</p></div>;
|
||||
if (error) return <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", height: "100vh", gap: 16 }}><p style={{ color: "#e74c3c", fontSize: 16 }}>{error}</p><button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer" }}>← Back to Library</button></div>;
|
||||
if (!book) return null;
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", height: "100vh", background: "#fff" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", padding: "12px 16px", borderBottom: "1px solid #eee", gap: 12, flexShrink: 0 }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Library</button>
|
||||
<div style={{ flex: 1 }}><h1 style={{ fontSize: 18, fontWeight: 600, color: "#1a1a2e", margin: 0 }}>{book.title}</h1><p style={{ fontSize: 14, color: "#888", margin: "4px 0 0" }}>{book.author}</p></div>
|
||||
<button onClick={() => navigate(`/bookmarks-notes/${bookId}`)} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>📑 Bookmarks & Notes</button>
|
||||
</header>
|
||||
<div ref={scrollRef} style={{ flex: 1, overflow: "auto", background: "#fafafa" }}>
|
||||
{book.file_url ? <iframe src={book.file_url} style={{ width: "100%", height: "100%", border: "none" }} title={book.title} /> : <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%", color: "#888" }}><p>No file available.</p></div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,213 +0,0 @@
|
||||
/**
|
||||
* ReadingPage — full-screen reading view for ebooks.
|
||||
* Integrates TOC drawer, settings panel, chapter navigation, and progress tracking.
|
||||
*/
|
||||
|
||||
import { lazy, Suspense, useCallback, useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useChapters } from "../hooks/useChapters";
|
||||
import { useReadingProgress } from "../hooks/useReadingProgress";
|
||||
import { useReadingSettings } from "../hooks/useReadingSettings";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { BookDetail } from "../types/book";
|
||||
import "../reader.css";
|
||||
|
||||
const ReaderToolbar = lazy(() => import("../components/reader/ReaderToolbar"));
|
||||
const TableOfContents = lazy(() => import("../components/reader/TableOfContents"));
|
||||
const ReadingSettingsPanel = lazy(
|
||||
() => import("../components/reader/ReadingSettingsPanel")
|
||||
);
|
||||
|
||||
export default function ReadingPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const bookId = Number(id);
|
||||
const [book, setBook] = useState<BookDetail | null>(null);
|
||||
const [bookLoading, setBookLoading] = useState(true);
|
||||
|
||||
// Fetch book details
|
||||
useEffect(() => {
|
||||
if (!bookId || Number.isNaN(bookId)) return;
|
||||
setBookLoading(true);
|
||||
booksApi.getBook(bookId)
|
||||
.then(setBook)
|
||||
.catch(() => { /* handled by useChapters error */ })
|
||||
.finally(() => setBookLoading(false));
|
||||
}, [bookId]);
|
||||
|
||||
const [tocOpen, setTocOpen] = useState(false);
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
|
||||
const { settings, updateSettings } = useReadingSettings();
|
||||
const {
|
||||
chapters,
|
||||
currentChapter,
|
||||
currentChapterNumber,
|
||||
isLoading,
|
||||
error,
|
||||
navigateToChapter,
|
||||
goToNextChapter,
|
||||
goToPreviousChapter,
|
||||
hasNext,
|
||||
hasPrevious,
|
||||
} = useChapters(bookId, 1);
|
||||
|
||||
const { progress, debouncedSave } = useReadingProgress(bookId);
|
||||
|
||||
// Auto-save progress when chapter changes
|
||||
useEffect(() => {
|
||||
if (currentChapter && currentChapterNumber > 0) {
|
||||
debouncedSave(currentChapterNumber, 0, (currentChapterNumber / Math.max(chapters.length, 1)) * 100);
|
||||
}
|
||||
}, [currentChapterNumber, currentChapter?.id]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.key === "ArrowLeft" && hasPrevious) {
|
||||
goToPreviousChapter();
|
||||
} else if (e.key === "ArrowRight" && hasNext) {
|
||||
goToNextChapter();
|
||||
} else if (e.key === "Escape") {
|
||||
setTocOpen(false);
|
||||
setSettingsOpen(false);
|
||||
}
|
||||
},
|
||||
[hasNext, hasPrevious, goToNextChapter, goToPreviousChapter]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [handleKeyDown]);
|
||||
|
||||
// Lock/unlock orientation via CSS
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (settings.orientation_lock !== "auto") {
|
||||
root.style.setProperty(
|
||||
"--reader-orientation",
|
||||
settings.orientation_lock === "portrait" ? "portrait" : "landscape"
|
||||
);
|
||||
} else {
|
||||
root.style.removeProperty("--reader-orientation");
|
||||
}
|
||||
}, [settings.orientation_lock]);
|
||||
|
||||
// Show loading state
|
||||
if (bookLoading || (isLoading && !currentChapter)) {
|
||||
return (
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
<p>Loading reader...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="reader-loading">
|
||||
<p className="reader-error">{error}</p>
|
||||
<button type="button" className="back-button" onClick={() => navigate(`/books/${bookId}`)}>
|
||||
Back to book
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="reader-container">
|
||||
<ReaderToolbar
|
||||
bookTitle={book.title}
|
||||
chapterTitle={currentChapter?.title ?? "Loading..."}
|
||||
progress={progress}
|
||||
onToggleToc={() => setTocOpen((v) => !v)}
|
||||
onToggleSettings={() => setSettingsOpen((v) => !v)}
|
||||
/>
|
||||
|
||||
<TableOfContents
|
||||
chapters={chapters}
|
||||
currentChapterNumber={currentChapterNumber}
|
||||
isOpen={tocOpen}
|
||||
onClose={() => setTocOpen(false)}
|
||||
onNavigate={navigateToChapter}
|
||||
/>
|
||||
|
||||
<ReadingSettingsPanel
|
||||
settings={settings}
|
||||
isOpen={settingsOpen}
|
||||
onClose={() => setSettingsOpen(false)}
|
||||
onUpdate={updateSettings}
|
||||
/>
|
||||
|
||||
{/* Main reading area */}
|
||||
<main className="reader-content">
|
||||
{isLoading ? (
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
<p>Loading chapter...</p>
|
||||
</div>
|
||||
) : currentChapter ? (
|
||||
<article className="reader-chapter">
|
||||
<h1 className="reader-chapter-title">{currentChapter.title}</h1>
|
||||
<div
|
||||
className="reader-chapter-body"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: currentChapter.content,
|
||||
}}
|
||||
/>
|
||||
</article>
|
||||
) : (
|
||||
<div className="reader-loading">
|
||||
<p>Select a chapter from the table of contents to start reading.</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* Bottom navigation bar */}
|
||||
<nav className="reader-nav">
|
||||
<button
|
||||
type="button"
|
||||
className={`reader-nav-btn ${!hasPrevious ? "reader-nav-btn--disabled" : ""}`}
|
||||
onClick={goToPreviousChapter}
|
||||
disabled={!hasPrevious}
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="15 18 9 12 15 6" />
|
||||
</svg>
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="reader-nav-btn reader-nav-btn--back"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M20 12H4M10 18l-6-6 6-6" />
|
||||
</svg>
|
||||
Library
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`reader-nav-btn ${!hasNext ? "reader-nav-btn--disabled" : ""}`}
|
||||
onClick={goToNextChapter}
|
||||
disabled={!hasNext}
|
||||
>
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { booksApi } from "../api/books";
|
||||
import type { ReadingSettings } from "../types/book";
|
||||
|
||||
const BG_COLORS = [
|
||||
{ value: "#ffffff", label: "White" },
|
||||
{ value: "#f4e4c1", label: "Sepia" },
|
||||
{ value: "#1a1a2e", label: "Dark" },
|
||||
{ value: "#c7edcc", label: "Green" },
|
||||
];
|
||||
|
||||
export function SettingsPage() {
|
||||
const navigate = useNavigate();
|
||||
const [settings, setSettings] = useState<ReadingSettings | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
try { const data = await booksApi.getSettings(); setSettings(data); }
|
||||
catch (err) { setError(err instanceof Error ? err.message : "Failed to load settings"); }
|
||||
finally { setLoading(false); }
|
||||
};
|
||||
void load();
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!settings) return;
|
||||
setSaving(true); setError(null); setSuccess(false);
|
||||
try { await booksApi.updateSettings(settings); setSuccess(true); setTimeout(() => setSuccess(false), 2000); }
|
||||
catch (err) { setError(err instanceof Error ? err.message : "Failed to save settings"); }
|
||||
finally { setSaving(false); }
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}><p>Loading settings...</p></div>;
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 500, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
|
||||
<header style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24, padding: "16px 0", borderBottom: "1px solid #eee" }}>
|
||||
<button onClick={() => navigate("/")} style={{ padding: "8px 16px", borderRadius: 6, border: "1px solid #ddd", background: "#fff", cursor: "pointer", fontSize: 14 }}>← Back</button>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, color: "#1a1a2e", margin: 0 }}>Reading Settings</h1>
|
||||
</header>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
|
||||
{error && <div style={{ background: "#fde8e8", padding: 12, borderRadius: 6, color: "#e74c3c", fontSize: 14 }}>{error}</div>}
|
||||
{success && <div style={{ background: "#d4edda", padding: 12, borderRadius: 6, color: "#155724", fontSize: 14 }}>Settings saved!</div>}
|
||||
|
||||
{settings && <>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Font Size ({settings.font_size}px)</label>
|
||||
<input type="range" min={12} max={36} value={settings.font_size} onChange={(e) => setSettings({ ...settings, font_size: Number(e.target.value) })} style={{ width: "100%", cursor: "pointer" }} />
|
||||
<div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#999" }}><span>12px</span><span>36px</span></div>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Font Style</label>
|
||||
<select value={settings.font_style} onChange={(e) => setSettings({ ...settings, font_style: e.target.value as ReadingSettings["font_style"] })} style={{ padding: "10px 12px", borderRadius: 6, border: "1px solid #ddd", fontSize: 16, background: "#fff", outline: "none" }}>
|
||||
<option value="sans-serif">Sans Serif</option><option value="serif">Serif</option><option value="monospace">Monospace</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
<label style={{ fontSize: 14, fontWeight: 600, color: "#555" }}>Background Color</label>
|
||||
<div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
|
||||
{BG_COLORS.map((bg) => (
|
||||
<button key={bg.value} onClick={() => setSettings({ ...settings, background_color: bg.value })}
|
||||
style={{ width: 48, height: 48, borderRadius: "50%", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", background: bg.value, border: settings.background_color === bg.value ? "3px solid #1a1a2e" : "3px solid #ddd" }}
|
||||
title={bg.label}>
|
||||
{settings.background_color === bg.value && <span style={{ fontSize: 20, fontWeight: 700, color: bg.value === "#ffffff" || bg.value === "#f4e4c1" ? "#1a1a2e" : "#fff" }}>✓</span>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>}
|
||||
|
||||
<button onClick={handleSave} disabled={saving} style={{ padding: "12px 24px", borderRadius: 8, border: "none", background: "#1a1a2e", color: "#fff", fontSize: 16, fontWeight: 600, cursor: "pointer", opacity: saving ? 0.6 : 1, marginTop: 8 }}>{saving ? "Saving..." : "Save Settings"}</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,621 +0,0 @@
|
||||
/* ============================================================
|
||||
Cloud Reader — Reading View Styles
|
||||
Mobile-first reading experience with theme support
|
||||
============================================================ */
|
||||
|
||||
/* --- CSS Custom Properties (overridden by JS) --- */
|
||||
:root {
|
||||
--reader-bg: #f5f0eb;
|
||||
--reader-text: #1a1a1a;
|
||||
--reader-font-family: Georgia, "Times New Roman", serif;
|
||||
--reader-font-size: 18px;
|
||||
--reader-line-height: 1.6;
|
||||
--reader-margin: 16px;
|
||||
--reader-brightness: 100%;
|
||||
--reader-toolbar-bg: rgba(26, 26, 26, 0.95);
|
||||
--reader-toolbar-text: #e0e0e0;
|
||||
--reader-accent: #6c8cff;
|
||||
}
|
||||
|
||||
/* --- Reading Container --- */
|
||||
.reader-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--reader-bg);
|
||||
color: var(--reader-text);
|
||||
font-family: var(--reader-font-family);
|
||||
font-size: var(--reader-font-size);
|
||||
line-height: var(--reader-line-height);
|
||||
filter: brightness(var(--reader-brightness));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Orientation lock */
|
||||
@supports (--reader-orientation: portrait) {
|
||||
.reader-container {
|
||||
orientation: var(--reader-orientation);
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landascape) {
|
||||
.reader-container {
|
||||
--reader-margin: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Top Toolbar --- */
|
||||
.reader-top-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 52px;
|
||||
background: var(--reader-toolbar-bg);
|
||||
color: var(--reader-toolbar-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
z-index: 120;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.reader-bar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--reader-toolbar-text);
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.reader-bar-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.reader-bar-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.reader-bar-book {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.reader-bar-chapter {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* --- Progress Bar --- */
|
||||
.reader-progress-bar {
|
||||
position: fixed;
|
||||
top: 52px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
z-index: 120;
|
||||
}
|
||||
|
||||
.reader-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--reader-accent);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* --- Main Content Area --- */
|
||||
.reader-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 72px var(--reader-margin) 72px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* --- Chapter Article --- */
|
||||
.reader-chapter {
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.reader-chapter-title {
|
||||
font-size: 1.6em;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.75em;
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
color: var(--reader-text);
|
||||
}
|
||||
|
||||
/* Chapter body — content from API (could be HTML/markdown-rendered) */
|
||||
.reader-chapter-body {
|
||||
font-size: 1em;
|
||||
line-height: var(--reader-line-height);
|
||||
}
|
||||
|
||||
.reader-chapter-body p {
|
||||
margin-bottom: 1.2em;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.reader-chapter-body h2,
|
||||
.reader-chapter-body h3,
|
||||
.reader-chapter-body h4 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.6em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.reader-chapter-body blockquote {
|
||||
border-left: 3px solid var(--reader-accent);
|
||||
padding-left: 1em;
|
||||
margin: 1em 0;
|
||||
opacity: 0.85;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reader-chapter-body img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.reader-chapter-body ul,
|
||||
.reader-chapter-body ol {
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
||||
.reader-chapter-body li {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
/* --- Navigation Bar (Bottom) --- */
|
||||
.reader-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 56px;
|
||||
background: var(--reader-toolbar-bg);
|
||||
color: var(--reader-toolbar-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
z-index: 120;
|
||||
gap: 8px;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.reader-nav-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
color: var(--reader-toolbar-text);
|
||||
font-size: 0.85rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.reader-nav-btn:hover:not(.reader-nav-btn--disabled) {
|
||||
border-color: var(--reader-accent);
|
||||
color: var(--reader-accent);
|
||||
}
|
||||
|
||||
.reader-nav-btn--disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.reader-nav-btn--back {
|
||||
background: rgba(108, 140, 255, 0.15);
|
||||
border-color: rgba(108, 140, 255, 0.3);
|
||||
}
|
||||
|
||||
.reader-nav-btn--back:hover {
|
||||
background: rgba(108, 140, 255, 0.25);
|
||||
color: var(--reader-accent);
|
||||
}
|
||||
|
||||
/* --- TOC Drawer --- */
|
||||
.toc-overlay,
|
||||
.settings-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 130;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.toc-drawer,
|
||||
.settings-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 300px;
|
||||
max-width: 85vw;
|
||||
background: var(--reader-toolbar-bg);
|
||||
color: var(--reader-toolbar-text);
|
||||
z-index: 140;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.toc-drawer {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.toc-drawer--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.settings-drawer {
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.settings-drawer--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.toc-header,
|
||||
.settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.toc-title,
|
||||
.settings-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.toc-close-btn,
|
||||
.settings-close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--reader-toolbar-text);
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.toc-close-btn:hover,
|
||||
.settings-close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* --- TOC List --- */
|
||||
.toc-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.toc-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
opacity: 0.6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.toc-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--reader-toolbar-text);
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.toc-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.toc-item--active {
|
||||
background: rgba(108, 140, 255, 0.15);
|
||||
color: var(--reader-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toc-item-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.toc-item-title {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* --- Settings Panel --- */
|
||||
.settings-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 16px 32px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.settings-section-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 8px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* Theme grid */
|
||||
.theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--reader-toolbar-text);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.theme-btn:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.theme-btn--active {
|
||||
border-color: var(--reader-accent);
|
||||
background: rgba(108, 140, 255, 0.15);
|
||||
color: var(--reader-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Font grid */
|
||||
.font-grid,
|
||||
.orientation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.font-btn,
|
||||
.orientation-btn {
|
||||
padding: 10px 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--reader-toolbar-text);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.font-btn:hover,
|
||||
.orientation-btn:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.font-btn--active,
|
||||
.orientation-btn--active {
|
||||
border-color: var(--reader-accent);
|
||||
background: rgba(108, 140, 255, 0.15);
|
||||
color: var(--reader-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Sliders */
|
||||
.settings-slider {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--reader-accent);
|
||||
border: 2px solid white;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.settings-slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--reader-accent);
|
||||
border: 2px solid white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --- Start Reading Button (in book detail) --- */
|
||||
.start-reading-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 24px;
|
||||
background: var(--reader-accent);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.start-reading-btn:hover {
|
||||
background: #5a7ae8;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(108, 140, 255, 0.3);
|
||||
}
|
||||
|
||||
/* --- Loading State --- */
|
||||
.reader-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 48px;
|
||||
color: var(--reader-text);
|
||||
}
|
||||
|
||||
.reader-error {
|
||||
color: #ef4444;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- Responsive --- */
|
||||
@media (max-width: 480px) {
|
||||
.reader-chapter {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.reader-nav-btn {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.reader-nav-btn span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toc-drawer,
|
||||
.settings-drawer {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.reader-chapter-title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.reader-chapter {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.reader-chapter-body {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Landscape on Mobile --- */
|
||||
@media (orientation: landscape) and (max-height: 500px) {
|
||||
.reader-top-bar {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.reader-content {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.reader-chapter-title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Dark mode theme override when reader uses light theme but system is dark --- */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.reader-container[data-theme="light"] {
|
||||
--reader-toolbar-bg: rgba(255, 255, 255, 0.95);
|
||||
--reader-toolbar-text: #1a1a1a;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
export interface BookListItem {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
genre: string;
|
||||
reading_status: string;
|
||||
reading_status_display: string;
|
||||
cover_image: string | null;
|
||||
}
|
||||
|
||||
export interface BookDetail {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
genre: string;
|
||||
description: string;
|
||||
reading_status: string;
|
||||
reading_status_display: string;
|
||||
cover_image: string | null;
|
||||
total_pages: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface EBookListItem {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
filename: string;
|
||||
format: string;
|
||||
page_count: number;
|
||||
cover_image: string | null;
|
||||
created_at: string;
|
||||
progress: number | null;
|
||||
}
|
||||
|
||||
export interface EBookDetail {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
filename: string;
|
||||
file_url: string;
|
||||
format: string;
|
||||
page_count: number;
|
||||
file_size: number;
|
||||
metadata_json: Record<string, unknown>;
|
||||
cover_image: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
progress: ReadingProgress | null;
|
||||
}
|
||||
|
||||
export interface ReadingProgress {
|
||||
current_position: number;
|
||||
last_page: number;
|
||||
}
|
||||
|
||||
export interface ReadingSettings {
|
||||
font_size: number;
|
||||
font_style: "sans-serif" | "serif" | "monospace";
|
||||
background_color: string;
|
||||
}
|
||||
|
||||
export interface BookChapter {
|
||||
id: number;
|
||||
title: string;
|
||||
index: number;
|
||||
href: string;
|
||||
children: BookChapter[];
|
||||
}
|
||||
|
||||
export interface TocResponse {
|
||||
chapters: BookChapter[];
|
||||
format: string;
|
||||
page_count: number;
|
||||
}
|
||||
|
||||
export interface ContentResponse {
|
||||
page: number;
|
||||
total_pages: number;
|
||||
content: string;
|
||||
chapter_title: string;
|
||||
format: string;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
/**
|
||||
* TypeScript interfaces for the Cloud Reader reader module.
|
||||
* Reading view, settings, chapters, and progress types.
|
||||
*/
|
||||
|
||||
export interface ChapterSummary {
|
||||
id: number;
|
||||
book: number;
|
||||
title: string;
|
||||
number: number;
|
||||
}
|
||||
|
||||
export interface ChapterDetail extends ChapterSummary {
|
||||
content: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface ReadingSettings {
|
||||
font_family: "sans-serif" | "serif" | "monospace";
|
||||
font_size: number;
|
||||
line_height: number;
|
||||
margin_width: number;
|
||||
background_color: string;
|
||||
text_color: string;
|
||||
brightness: number;
|
||||
orientation_lock: "auto" | "portrait" | "landscape";
|
||||
theme: "sepia" | "dark" | "light" | "paper";
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export type ThemePreset = ReadingSettings["theme"];
|
||||
export type FontFamily = ReadingSettings["font_family"];
|
||||
export type OrientationLock = ReadingSettings["orientation_lock"];
|
||||
|
||||
export interface ReadingProgress {
|
||||
id: number;
|
||||
book: number;
|
||||
current_chapter: number;
|
||||
current_position: number;
|
||||
percentage: number;
|
||||
updated_at: string;
|
||||
}
|
||||
+3
-6
@@ -3,10 +3,7 @@
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"workspaces": [
|
||||
"web"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "yarn --cwd web dev",
|
||||
"build": "yarn --cwd web build"
|
||||
}
|
||||
"frontend",
|
||||
"backend"
|
||||
]
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Cloud Reader</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,23 +0,0 @@
|
||||
{
|
||||
"name": "web",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"@vitejs/plugin-react": "^4.3.0",
|
||||
"typescript": "^5.6.0",
|
||||
"vite": "^6.0.0"
|
||||
}
|
||||
}
|
||||
-515
@@ -1,515 +0,0 @@
|
||||
/* ============================================================
|
||||
Cloud Reader — Book Search & Discovery Styles
|
||||
============================================================ */
|
||||
|
||||
/* --- Reset & Base --- */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-bg: #0f1117;
|
||||
--color-surface: #1a1d27;
|
||||
--color-surface-hover: #242736;
|
||||
--color-border: #2a2d3a;
|
||||
--color-text: #e1e4ed;
|
||||
--color-text-secondary: #8b8fa3;
|
||||
--color-primary: #6c8cff;
|
||||
--color-primary-hover: #8ba3ff;
|
||||
--color-accent-green: #34d399;
|
||||
--color-accent-yellow: #fbbf24;
|
||||
--color-accent-blue: #60a5fa;
|
||||
--color-accent-gray: #6b7280;
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
sans-serif;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
/* --- Library Header --- */
|
||||
.library-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.library-header h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.library-header p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* --- Search Bar --- */
|
||||
.search-bar {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--color-text-secondary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px 12px 44px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* --- Filters --- */
|
||||
.book-filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.filter-group select {
|
||||
padding: 8px 12px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.filter-group select:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.clear-filters-btn {
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.clear-filters-btn:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* --- Book Grid --- */
|
||||
.book-list {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.book-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.book-card {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.book-card:hover {
|
||||
background: var(--color-surface-hover);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.book-card-cover {
|
||||
flex-shrink: 0;
|
||||
width: 60px;
|
||||
height: 90px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: var(--color-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.book-card-cover img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
color: var(--color-text-secondary);
|
||||
opacity: 0.5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.book-card-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.book-card-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.book-card-author {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.book-card-genre {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* --- Status Badges --- */
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 100px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.status-want_to_read {
|
||||
background: rgba(96, 165, 250, 0.15);
|
||||
color: var(--color-accent-blue);
|
||||
}
|
||||
|
||||
.status-reading {
|
||||
background: rgba(52, 211, 153, 0.15);
|
||||
color: var(--color-accent-green);
|
||||
}
|
||||
|
||||
.status-finished {
|
||||
background: rgba(107, 114, 128, 0.15);
|
||||
color: var(--color-accent-gray);
|
||||
}
|
||||
|
||||
.status-dnf {
|
||||
background: rgba(251, 191, 36, 0.15);
|
||||
color: var(--color-accent-yellow);
|
||||
}
|
||||
|
||||
/* --- Empty State --- */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.empty-state svg {
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
max-width: 360px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* --- Loading --- */
|
||||
.loading-spinner {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid var(--color-border);
|
||||
border-top-color: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.7s linear infinite;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Pagination --- */
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-top: 24px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
padding: 8px 18px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.pagination-btn:hover:not(:disabled) {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.pagination-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-indicator {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* --- Book Detail --- */
|
||||
.book-detail {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 24px;
|
||||
transition: all 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.book-detail-content {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.book-detail-cover {
|
||||
flex-shrink: 0;
|
||||
width: 180px;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.book-detail-cover img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cover-placeholder.large {
|
||||
width: 180px;
|
||||
height: 270px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-text-secondary);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.book-detail-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.book-detail-title {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.book-detail-author {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.book-detail-genre {
|
||||
display: inline-block;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.book-detail-status {
|
||||
margin-bottom: 20px;
|
||||
font-size: 0.95rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.book-detail-status .status-badge {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.book-detail-description {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.book-detail-description h2 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.book-detail-description p {
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.book-detail-meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.book-detail-meta p {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* --- Error State --- */
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* --- Responsive --- */
|
||||
@media (max-width: 640px) {
|
||||
.book-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.book-detail-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.book-detail-cover {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.cover-placeholder.large {
|
||||
width: 140px;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
.book-filters {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.filter-group select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
/**
|
||||
* App — root component with page navigation (library ↔ book detail ↔ reading view).
|
||||
*/
|
||||
|
||||
import { useState, lazy, Suspense } from "react";
|
||||
import "./App.css";
|
||||
import "./reader.css";
|
||||
|
||||
const LibraryPage = lazy(() => import("./pages/LibraryPage"));
|
||||
const BookDetailPage = lazy(() => import("./pages/BookDetailPage"));
|
||||
const ReadingPage = lazy(() => import("./pages/ReadingPage"));
|
||||
|
||||
type View =
|
||||
| { kind: "library" }
|
||||
| { kind: "detail"; bookId: number }
|
||||
| { kind: "reader"; book: import("./types").BookDetail };
|
||||
|
||||
function LoadingFallback() {
|
||||
return (
|
||||
<div className="loading-spinner">
|
||||
<div className="spinner" />
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [view, setView] = useState<View>({ kind: "library" });
|
||||
|
||||
const handleBookSelect = (id: number) => {
|
||||
setView({ kind: "detail", bookId: id });
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
setView({ kind: "library" });
|
||||
};
|
||||
|
||||
const handleStartReading = (book: import("./types").BookDetail) => {
|
||||
setView({ kind: "reader", book });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<Suspense fallback={<LoadingFallback />}>
|
||||
{view.kind === "library" && (
|
||||
<LibraryPage onBookSelect={handleBookSelect} />
|
||||
)}
|
||||
{view.kind === "detail" && view.bookId !== undefined && (
|
||||
<BookDetailPage
|
||||
bookId={view.bookId}
|
||||
onBack={handleBack}
|
||||
onStartReading={handleStartReading}
|
||||
/>
|
||||
)}
|
||||
{view.kind === "reader" && view.book !== undefined && (
|
||||
<ReadingPage book={view.book} onBack={handleBack} />
|
||||
)}
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
/**
|
||||
* API client for the Cloud Reader backend.
|
||||
* All requests are proxied through Vite's dev server in development.
|
||||
*/
|
||||
|
||||
import type {
|
||||
BookDetail,
|
||||
BookSummary,
|
||||
PaginatedResponse,
|
||||
SearchParams,
|
||||
} from "../types";
|
||||
|
||||
const API_BASE = "/api";
|
||||
|
||||
function buildSearchQuery(params: SearchParams): string {
|
||||
const searchParams = new URLSearchParams();
|
||||
if (params.q) searchParams.set("q", params.q);
|
||||
if (params.genre) searchParams.set("genre", params.genre);
|
||||
if (params.author) searchParams.set("author", params.author);
|
||||
if (params.reading_status) searchParams.set("reading_status", params.reading_status);
|
||||
if (params.page && params.page > 1) searchParams.set("page", String(params.page));
|
||||
return searchParams.toString();
|
||||
}
|
||||
|
||||
export async function searchBooks(
|
||||
params: SearchParams,
|
||||
): Promise<PaginatedResponse<BookSummary>> {
|
||||
const query = buildSearchQuery(params);
|
||||
const response = await fetch(`${API_BASE}/books/?${query}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Search failed: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
return response.json() as Promise<PaginatedResponse<BookSummary>>;
|
||||
}
|
||||
|
||||
export async function getBook(id: number): Promise<BookDetail> {
|
||||
const response = await fetch(`${API_BASE}/books/${id}/`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch book: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
return response.json() as Promise<BookDetail>;
|
||||
}
|
||||
|
||||
export async function getGenres(): Promise<string[]> {
|
||||
const response = await fetch(`${API_BASE}/books/genres/`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch genres: ${response.status}`);
|
||||
}
|
||||
return response.json() as Promise<string[]>;
|
||||
}
|
||||
|
||||
export async function getAuthors(): Promise<string[]> {
|
||||
const response = await fetch(`${API_BASE}/books/authors/`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch authors: ${response.status}`);
|
||||
}
|
||||
return response.json() as Promise<string[]>;
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
/**
|
||||
* API client for the reader module — reading settings, chapters, and progress.
|
||||
*/
|
||||
|
||||
import type {
|
||||
ChapterDetail,
|
||||
ChapterSummary,
|
||||
ReadingProgress,
|
||||
ReadingSettings,
|
||||
} from "../types/reader";
|
||||
|
||||
const API_BASE = "/api";
|
||||
|
||||
/**
|
||||
* Fetch the current user's reading settings.
|
||||
* Auto-creates defaults on the server if none exist.
|
||||
*/
|
||||
export async function getReadingSettings(): Promise<ReadingSettings> {
|
||||
const response = await fetch(`${API_BASE}/reader/settings/`);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch reading settings: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ReadingSettings>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update (full or partial) the user's reading settings.
|
||||
*/
|
||||
export async function updateReadingSettings(
|
||||
settings: Partial<ReadingSettings>
|
||||
): Promise<ReadingSettings> {
|
||||
const method = settings.theme !== undefined ? "PUT" : "PATCH";
|
||||
const response = await fetch(`${API_BASE}/reader/settings/`, {
|
||||
method,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(settings),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to update reading settings: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ReadingSettings>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch the table of contents (chapter list) for a book.
|
||||
*/
|
||||
export async function getChapters(bookId: number): Promise<ChapterSummary[]> {
|
||||
const response = await fetch(`${API_BASE}/books/${bookId}/chapters/`);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch chapters: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ChapterSummary[]>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch a specific chapter with full content for reading.
|
||||
*/
|
||||
export async function getChapterContent(
|
||||
bookId: number,
|
||||
chapterNumber: number
|
||||
): Promise<ChapterDetail> {
|
||||
const response = await fetch(
|
||||
`${API_BASE}/books/${bookId}/chapters/${chapterNumber}/`
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch chapter ${chapterNumber}: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ChapterDetail>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch reading progress for a book.
|
||||
*/
|
||||
export async function getReadingProgress(
|
||||
bookId: number
|
||||
): Promise<ReadingProgress> {
|
||||
const response = await fetch(`${API_BASE}/books/${bookId}/progress/`);
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch reading progress: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ReadingProgress>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update reading progress for a book.
|
||||
*/
|
||||
export async function updateReadingProgress(
|
||||
bookId: number,
|
||||
progress: Partial<ReadingProgress>
|
||||
): Promise<ReadingProgress> {
|
||||
const response = await fetch(`${API_BASE}/books/${bookId}/progress/`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(progress),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
`Failed to update reading progress: ${response.status} ${response.statusText}`
|
||||
);
|
||||
}
|
||||
return response.json() as Promise<ReadingProgress>;
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
/**
|
||||
* BookDetail component — full book information display with reading action.
|
||||
*/
|
||||
|
||||
import type { BookDetail as BookDetailType } from "../types";
|
||||
import { READING_STATUS_LABELS } from "../types";
|
||||
|
||||
interface BookDetailProps {
|
||||
book: BookDetailType;
|
||||
onBack: () => void;
|
||||
onStartReading: (book: BookDetailType) => void;
|
||||
}
|
||||
|
||||
export default function BookDetail({ book, onBack, onStartReading }: BookDetailProps) {
|
||||
return (
|
||||
<div className="book-detail">
|
||||
<button
|
||||
type="button"
|
||||
className="back-button"
|
||||
onClick={onBack}
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="m15 18-6-6 6-6" />
|
||||
</svg>
|
||||
Back to search
|
||||
</button>
|
||||
|
||||
<div className="book-detail-content">
|
||||
<div className="book-detail-cover">
|
||||
{book.cover_url ? (
|
||||
<img src={book.cover_url} alt={`${book.title} cover`} />
|
||||
) : (
|
||||
<div className="cover-placeholder large">
|
||||
<svg
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
|
||||
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="book-detail-info">
|
||||
<h1 className="book-detail-title">{book.title}</h1>
|
||||
<p className="book-detail-author">by {book.author}</p>
|
||||
<p className="book-detail-genre">{book.genre}</p>
|
||||
<p className="book-detail-status">
|
||||
Status:{" "}
|
||||
<span className={`status-badge status-${book.reading_status}`}>
|
||||
{READING_STATUS_LABELS[book.reading_status]}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
{book.description && (
|
||||
<div className="book-detail-description">
|
||||
<h2>Description</h2>
|
||||
<p>{book.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="start-reading-btn"
|
||||
onClick={() => onStartReading(book)}
|
||||
>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
stroke="none"
|
||||
>
|
||||
<polygon points="5 3 19 12 5 21 5 3" />
|
||||
</svg>
|
||||
Start Reading
|
||||
</button>
|
||||
|
||||
<div className="book-detail-meta">
|
||||
<p>
|
||||
<strong>Added:</strong>{" "}
|
||||
{new Date(book.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Updated:</strong>{" "}
|
||||
{new Date(book.updated_at).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
/**
|
||||
* BookFilters component — dropdown filters for genre, author, and reading status.
|
||||
*/
|
||||
|
||||
import type { ReadingStatus } from "../types";
|
||||
import { READING_STATUS_LABELS } from "../types";
|
||||
|
||||
interface BookFiltersProps {
|
||||
genres: string[];
|
||||
authors: string[];
|
||||
selectedGenre: string;
|
||||
selectedAuthor: string;
|
||||
selectedStatus: ReadingStatus | "";
|
||||
onGenreChange: (genre: string) => void;
|
||||
onAuthorChange: (author: string) => void;
|
||||
onStatusChange: (status: ReadingStatus | "") => void;
|
||||
}
|
||||
|
||||
export default function BookFilters({
|
||||
genres,
|
||||
authors,
|
||||
selectedGenre,
|
||||
selectedAuthor,
|
||||
selectedStatus,
|
||||
onGenreChange,
|
||||
onAuthorChange,
|
||||
onStatusChange,
|
||||
}: BookFiltersProps) {
|
||||
const handleGenreChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
onGenreChange(e.target.value);
|
||||
};
|
||||
|
||||
const handleAuthorChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
onAuthorChange(e.target.value);
|
||||
};
|
||||
|
||||
const handleStatusChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
onStatusChange(e.target.value as ReadingStatus | "");
|
||||
};
|
||||
|
||||
const handleClearFilters = () => {
|
||||
onGenreChange("");
|
||||
onAuthorChange("");
|
||||
onStatusChange("");
|
||||
};
|
||||
|
||||
const hasActiveFilters = selectedGenre || selectedAuthor || selectedStatus;
|
||||
|
||||
return (
|
||||
<div className="book-filters">
|
||||
<div className="filter-group">
|
||||
<label htmlFor="filter-genre">Genre</label>
|
||||
<select
|
||||
id="filter-genre"
|
||||
value={selectedGenre}
|
||||
onChange={handleGenreChange}
|
||||
>
|
||||
<option value="">All Genres</option>
|
||||
{genres.map((g) => (
|
||||
<option key={g} value={g}>
|
||||
{g}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="filter-group">
|
||||
<label htmlFor="filter-author">Author</label>
|
||||
<select
|
||||
id="filter-author"
|
||||
value={selectedAuthor}
|
||||
onChange={handleAuthorChange}
|
||||
>
|
||||
<option value="">All Authors</option>
|
||||
{authors.map((a) => (
|
||||
<option key={a} value={a}>
|
||||
{a}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="filter-group">
|
||||
<label htmlFor="filter-status">Status</label>
|
||||
<select
|
||||
id="filter-status"
|
||||
value={selectedStatus}
|
||||
onChange={handleStatusChange}
|
||||
>
|
||||
<option value="">All Statuses</option>
|
||||
{(Object.keys(READING_STATUS_LABELS) as ReadingStatus[]).map((s) => (
|
||||
<option key={s} value={s}>
|
||||
{READING_STATUS_LABELS[s]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
type="button"
|
||||
className="clear-filters-btn"
|
||||
onClick={handleClearFilters}
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
/**
|
||||
* BookList component — displays search results with click-to-detail navigation.
|
||||
*/
|
||||
|
||||
import type { BookSummary } from "../types";
|
||||
import { READING_STATUS_LABELS } from "../types";
|
||||
|
||||
interface BookListProps {
|
||||
books: BookSummary[];
|
||||
isLoading: boolean;
|
||||
totalCount: number;
|
||||
onBookClick: (id: number) => void;
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: BookSummary["reading_status"] }) {
|
||||
const className = `status-badge status-${status}`;
|
||||
return <span className={className}>{READING_STATUS_LABELS[status]}</span>;
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div className="empty-state">
|
||||
<svg
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
|
||||
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
|
||||
<line x1="8" y1="7" x2="16" y2="7" />
|
||||
<line x1="8" y1="11" x2="14" y2="11" />
|
||||
</svg>
|
||||
<h3>No books found</h3>
|
||||
<p>
|
||||
Try adjusting your search query or filters to find what you're looking
|
||||
for.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LoadingSpinner() {
|
||||
return (
|
||||
<div className="loading-spinner">
|
||||
<div className="spinner" />
|
||||
<p>Searching books...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BookList({
|
||||
books,
|
||||
isLoading,
|
||||
totalCount,
|
||||
onBookClick,
|
||||
}: BookListProps) {
|
||||
if (isLoading) return <LoadingSpinner />;
|
||||
|
||||
if (totalCount === 0) return <EmptyState />;
|
||||
|
||||
return (
|
||||
<div className="book-list">
|
||||
<p className="result-count">
|
||||
{totalCount} book{totalCount !== 1 ? "s" : ""} found
|
||||
</p>
|
||||
<div className="book-grid">
|
||||
{books.map((book) => (
|
||||
<button
|
||||
key={book.id}
|
||||
type="button"
|
||||
className="book-card"
|
||||
onClick={() => onBookClick(book.id)}
|
||||
>
|
||||
<div className="book-card-cover">
|
||||
{book.cover_url ? (
|
||||
<img src={book.cover_url} alt={`${book.title} cover`} />
|
||||
) : (
|
||||
<div className="cover-placeholder">
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
|
||||
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="book-card-info">
|
||||
<h3 className="book-card-title">{book.title}</h3>
|
||||
<p className="book-card-author">{book.author}</p>
|
||||
<p className="book-card-genre">{book.genre}</p>
|
||||
<StatusBadge status={book.reading_status} />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
/**
|
||||
* ReaderToolbar — fixed bottom toolbar for the reading view.
|
||||
* Provides TOC toggle, settings toggle, and progress indicator.
|
||||
*/
|
||||
|
||||
import type { ReadingProgress } from "../types/reader";
|
||||
|
||||
interface ReaderToolbarProps {
|
||||
bookTitle: string;
|
||||
chapterTitle: string;
|
||||
progress: ReadingProgress | null;
|
||||
onToggleToc: () => void;
|
||||
onToggleSettings: () => void;
|
||||
}
|
||||
|
||||
export default function ReaderToolbar({
|
||||
bookTitle,
|
||||
chapterTitle,
|
||||
progress,
|
||||
onToggleToc,
|
||||
onToggleSettings,
|
||||
}: ReaderToolbarProps) {
|
||||
const percentage = progress?.percentage ?? 0;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Top bar */}
|
||||
<header className="reader-top-bar">
|
||||
<button
|
||||
type="button"
|
||||
className="reader-bar-btn"
|
||||
onClick={onToggleToc}
|
||||
aria-label="Table of contents"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="reader-bar-title">
|
||||
<span className="reader-bar-book">{bookTitle}</span>
|
||||
<span className="reader-bar-chapter">{chapterTitle}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="reader-bar-btn"
|
||||
onClick={onToggleSettings}
|
||||
aria-label="Reading settings"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{/* Bottom progress bar */}
|
||||
<div className="reader-progress-bar">
|
||||
<div
|
||||
className="reader-progress-fill"
|
||||
style={{ width: `${Math.min(percentage, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,232 +0,0 @@
|
||||
/**
|
||||
* ReadingSettingsPanel — slide-in drawer from the right for customizing
|
||||
* the reading experience: theme, font, sizing, orientation.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
import type {
|
||||
FontFamily,
|
||||
OrientationLock,
|
||||
ReadingSettings,
|
||||
ThemePreset,
|
||||
} from "../types/reader";
|
||||
|
||||
interface ReadingSettingsPanelProps {
|
||||
settings: ReadingSettings;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onUpdate: (partial: Partial<ReadingSettings>) => Promise<void>;
|
||||
}
|
||||
|
||||
const THEME_OPTIONS: { value: ThemePreset; label: string }[] = [
|
||||
{ value: "sepia", label: "Sepia" },
|
||||
{ value: "dark", label: "Dark" },
|
||||
{ value: "light", label: "Light" },
|
||||
{ value: "paper", label: "Paper" },
|
||||
];
|
||||
|
||||
const FONT_OPTIONS: { value: FontFamily; label: string }[] = [
|
||||
{ value: "sans-serif", label: "Sans-serif" },
|
||||
{ value: "serif", label: "Serif" },
|
||||
{ value: "monospace", label: "Monospace" },
|
||||
];
|
||||
|
||||
const ORIENTATION_OPTIONS: { value: OrientationLock; label: string }[] = [
|
||||
{ value: "auto", label: "Auto" },
|
||||
{ value: "portrait", label: "Portrait" },
|
||||
{ value: "landscape", label: "Landscape" },
|
||||
];
|
||||
|
||||
export default function ReadingSettingsPanel({
|
||||
settings,
|
||||
isOpen,
|
||||
onClose,
|
||||
onUpdate,
|
||||
}: ReadingSettingsPanelProps) {
|
||||
const [saving, setSaving] = useState<Record<string, boolean>>({});
|
||||
|
||||
const handleChange = async (
|
||||
key: keyof ReadingSettings,
|
||||
value: string | number
|
||||
) => {
|
||||
setSaving((prev) => ({ ...prev, [key]: true }));
|
||||
try {
|
||||
await onUpdate({ [key]: value as never });
|
||||
} finally {
|
||||
setSaving((prev) => ({ ...prev, [key]: false }));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Overlay */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="settings-overlay"
|
||||
onClick={onClose}
|
||||
onKeyDown={(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
}}
|
||||
role="presentation"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Drawer */}
|
||||
<aside
|
||||
className={`settings-drawer ${isOpen ? "settings-drawer--open" : ""}`}
|
||||
>
|
||||
<div className="settings-header">
|
||||
<h2 className="settings-title">Reading Settings</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="settings-close-btn"
|
||||
onClick={onClose}
|
||||
aria-label="Close settings"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="settings-body">
|
||||
{/* Theme Presets */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">Theme</h3>
|
||||
<div className="theme-grid">
|
||||
{THEME_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
className={`theme-btn ${
|
||||
settings.theme === opt.value ? "theme-btn--active" : ""
|
||||
}`}
|
||||
onClick={() => handleChange("theme", opt.value)}
|
||||
disabled={saving.theme}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Font Family */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">Font</h3>
|
||||
<div className="font-grid">
|
||||
{FONT_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
className={`font-btn ${
|
||||
settings.font_family === opt.value ? "font-btn--active" : ""
|
||||
}`}
|
||||
onClick={() => handleChange("font_family", opt.value)}
|
||||
disabled={saving.font_family}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Font Size Slider */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">
|
||||
Font Size: {settings.font_size}px
|
||||
</h3>
|
||||
<input
|
||||
type="range"
|
||||
min="12"
|
||||
max="32"
|
||||
value={settings.font_size}
|
||||
onChange={(e) =>
|
||||
handleChange("font_size", Number(e.target.value))
|
||||
}
|
||||
className="settings-slider"
|
||||
aria-label="Font size"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Line Height Slider */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">
|
||||
Line Height: {settings.line_height.toFixed(1)}
|
||||
</h3>
|
||||
<input
|
||||
type="range"
|
||||
min="1.2"
|
||||
max="2.0"
|
||||
step="0.1"
|
||||
value={settings.line_height}
|
||||
onChange={(e) =>
|
||||
handleChange("line_height", Number(e.target.value))
|
||||
}
|
||||
className="settings-slider"
|
||||
aria-label="Line height"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Margin Width Slider */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">
|
||||
Margins: {settings.margin_width}px
|
||||
</h3>
|
||||
<input
|
||||
type="range"
|
||||
min="8"
|
||||
max="48"
|
||||
value={settings.margin_width}
|
||||
onChange={(e) =>
|
||||
handleChange("margin_width", Number(e.target.value))
|
||||
}
|
||||
className="settings-slider"
|
||||
aria-label="Margin width"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Brightness Slider */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">
|
||||
Brightness: {settings.brightness}%
|
||||
</h3>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={settings.brightness}
|
||||
onChange={(e) =>
|
||||
handleChange("brightness", Number(e.target.value))
|
||||
}
|
||||
className="settings-slider"
|
||||
aria-label="Brightness"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Orientation Lock */}
|
||||
<section className="settings-section">
|
||||
<h3 className="settings-section-title">Orientation</h3>
|
||||
<div className="orientation-grid">
|
||||
{ORIENTATION_OPTIONS.map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
className={`orientation-btn ${
|
||||
settings.orientation_lock === opt.value
|
||||
? "orientation-btn--active"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => handleChange("orientation_lock", opt.value)}
|
||||
disabled={saving.orientation_lock}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
/**
|
||||
* SearchBar component — real-time text input for search queries.
|
||||
*/
|
||||
|
||||
import { useCallback, useRef } from "react";
|
||||
|
||||
interface SearchBarProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export default function SearchBar({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "Search by title, author, or genre...",
|
||||
}: SearchBarProps) {
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newValue = e.target.value;
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current);
|
||||
debounceRef.current = setTimeout(() => {
|
||||
onChange(newValue);
|
||||
}, 300);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="search-bar">
|
||||
<svg
|
||||
className="search-icon"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="m21 21-4.35-4.35" />
|
||||
</svg>
|
||||
<input
|
||||
type="text"
|
||||
defaultValue={value}
|
||||
onChange={handleChange}
|
||||
placeholder={placeholder}
|
||||
className="search-input"
|
||||
aria-label="Search books"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
/**
|
||||
* TableOfContents — slide-in drawer listing all chapters.
|
||||
* Tap a chapter to navigate. Current chapter is highlighted.
|
||||
*/
|
||||
|
||||
import type { ChapterSummary } from "../types/reader";
|
||||
|
||||
interface TableOfContentsProps {
|
||||
chapters: ChapterSummary[];
|
||||
currentChapterNumber: number;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onNavigate: (number: number) => void;
|
||||
}
|
||||
|
||||
export default function TableOfContents({
|
||||
chapters,
|
||||
currentChapterNumber,
|
||||
isOpen,
|
||||
onClose,
|
||||
onNavigate,
|
||||
}: TableOfContentsProps) {
|
||||
const handleChapterClick = (number: number) => {
|
||||
onNavigate(number);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Overlay */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="toc-overlay"
|
||||
onClick={onClose}
|
||||
onKeyDown={(e: React.KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
}}
|
||||
role="presentation"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Drawer */}
|
||||
<aside className={`toc-drawer ${isOpen ? "toc-drawer--open" : ""}`}>
|
||||
<div className="toc-header">
|
||||
<h2 className="toc-title">Contents</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="toc-close-btn"
|
||||
onClick={onClose}
|
||||
aria-label="Close table of contents"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav className="toc-list">
|
||||
{chapters.length === 0 && (
|
||||
<p className="toc-empty">No chapters available.</p>
|
||||
)}
|
||||
{chapters.map((chapter) => (
|
||||
<button
|
||||
key={chapter.number}
|
||||
type="button"
|
||||
className={`toc-item ${
|
||||
chapter.number === currentChapterNumber ? "toc-item--active" : ""
|
||||
}`}
|
||||
onClick={() => handleChapterClick(chapter.number)}
|
||||
>
|
||||
<span className="toc-item-number">{chapter.number}</span>
|
||||
<span className="toc-item-title">{chapter.title}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,129 +0,0 @@
|
||||
/**
|
||||
* useChapters — fetch chapter list and manage current chapter navigation.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { getChapterContent, getChapters } from "../api/reader";
|
||||
import type { ChapterDetail, ChapterSummary } from "../types/reader";
|
||||
|
||||
export interface UseChaptersReturn {
|
||||
chapters: ChapterSummary[];
|
||||
currentChapter: ChapterDetail | null;
|
||||
currentChapterNumber: number;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
navigateToChapter: (number: number) => Promise<void>;
|
||||
goToNextChapter: () => Promise<void>;
|
||||
goToPreviousChapter: () => Promise<void>;
|
||||
hasNext: boolean;
|
||||
hasPrevious: boolean;
|
||||
}
|
||||
|
||||
export function useChapters(
|
||||
bookId: number,
|
||||
initialChapter: number = 1
|
||||
): UseChaptersReturn {
|
||||
const [chapters, setChapters] = useState<ChapterSummary[]>([]);
|
||||
const [currentChapter, setCurrentChapter] = useState<ChapterDetail | null>(
|
||||
null
|
||||
);
|
||||
const [currentChapterNumber, setCurrentChapterNumber] =
|
||||
useState<number>(initialChapter);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Fetch chapter list on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsLoading(true);
|
||||
getChapters(bookId)
|
||||
.then((data) => {
|
||||
if (!cancelled) {
|
||||
setChapters(data);
|
||||
// If chapters exist and initial chapter is valid, fetch it
|
||||
if (
|
||||
data.length > 0 &&
|
||||
data.some((c) => c.number === currentChapterNumber)
|
||||
) {
|
||||
return getChapterContent(bookId, currentChapterNumber);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.then((chapter) => {
|
||||
if (!cancelled && chapter) {
|
||||
setCurrentChapter(chapter);
|
||||
}
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load chapters"
|
||||
);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [bookId, currentChapterNumber]);
|
||||
|
||||
const fetchChapter = useCallback(
|
||||
async (number: number) => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const chapter = await getChapterContent(bookId, number);
|
||||
setCurrentChapter(chapter);
|
||||
setCurrentChapterNumber(number);
|
||||
} catch (err: unknown) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load chapter"
|
||||
);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[bookId]
|
||||
);
|
||||
|
||||
const navigateToChapter = useCallback(
|
||||
(number: number) => {
|
||||
fetchChapter(number);
|
||||
},
|
||||
[fetchChapter]
|
||||
);
|
||||
|
||||
const goToNextChapter = useCallback(() => {
|
||||
const next = currentChapterNumber + 1;
|
||||
if (chapters.some((c) => c.number === next)) {
|
||||
fetchChapter(next);
|
||||
}
|
||||
}, [currentChapterNumber, chapters, fetchChapter]);
|
||||
|
||||
const goToPreviousChapter = useCallback(() => {
|
||||
const prev = currentChapterNumber - 1;
|
||||
if (prev >= 1 && chapters.some((c) => c.number === prev)) {
|
||||
fetchChapter(prev);
|
||||
}
|
||||
}, [currentChapterNumber, chapters, fetchChapter]);
|
||||
|
||||
const hasNext = chapters.some((c) => c.number === currentChapterNumber + 1);
|
||||
const hasPrevious = chapters.some((c) => c.number === currentChapterNumber - 1);
|
||||
|
||||
return {
|
||||
chapters,
|
||||
currentChapter,
|
||||
currentChapterNumber,
|
||||
isLoading,
|
||||
error,
|
||||
navigateToChapter,
|
||||
goToNextChapter,
|
||||
goToPreviousChapter,
|
||||
hasNext,
|
||||
hasPrevious,
|
||||
};
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
/**
|
||||
* useReadingProgress — fetch and update reading progress for a book.
|
||||
* Auto-saves when chapter or position changes.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { getReadingProgress, updateReadingProgress } from "../api/reader";
|
||||
import type { ReadingProgress } from "../types/reader";
|
||||
|
||||
export interface UseReadingProgressReturn {
|
||||
progress: ReadingProgress | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
saveProgress: (
|
||||
chapter: number,
|
||||
position: number,
|
||||
percentage: number
|
||||
) => Promise<void>;
|
||||
/** Schedule a debounced save — fires at most once per 3 seconds */
|
||||
debouncedSave: (
|
||||
chapter: number,
|
||||
position: number,
|
||||
percentage: number
|
||||
) => void;
|
||||
}
|
||||
|
||||
export function useReadingProgress(
|
||||
bookId: number
|
||||
): UseReadingProgressReturn {
|
||||
const [progress, setProgress] = useState<ReadingProgress | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// Fetch progress on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsLoading(true);
|
||||
getReadingProgress(bookId)
|
||||
.then((data) => {
|
||||
if (!cancelled) setProgress(data);
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load progress"
|
||||
);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [bookId]);
|
||||
|
||||
const saveProgress = useCallback(
|
||||
async (chapter: number, position: number, percentage: number) => {
|
||||
try {
|
||||
const updated = await updateReadingProgress(bookId, {
|
||||
current_chapter: chapter,
|
||||
current_position: position,
|
||||
percentage,
|
||||
});
|
||||
setProgress(updated);
|
||||
setError(null);
|
||||
} catch (err: unknown) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to save progress"
|
||||
);
|
||||
}
|
||||
},
|
||||
[bookId]
|
||||
);
|
||||
|
||||
const debouncedSave = useCallback(
|
||||
(chapter: number, position: number, percentage: number) => {
|
||||
if (debounceTimer.current) {
|
||||
clearTimeout(debounceTimer.current);
|
||||
}
|
||||
debounceTimer.current = setTimeout(() => {
|
||||
saveProgress(chapter, position, percentage);
|
||||
}, 3000);
|
||||
},
|
||||
[saveProgress]
|
||||
);
|
||||
|
||||
// Cleanup timer on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (debounceTimer.current) {
|
||||
clearTimeout(debounceTimer.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { progress, isLoading, error, saveProgress, debouncedSave };
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
/**
|
||||
* useReadingSettings — fetch and manage user reading preferences.
|
||||
* Applies settings as CSS custom properties on the document root.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
getReadingSettings,
|
||||
updateReadingSettings,
|
||||
} from "../api/reader";
|
||||
import type { ReadingSettings } from "../types/reader";
|
||||
|
||||
const DEFAULT_SETTINGS: ReadingSettings = {
|
||||
font_family: "serif",
|
||||
font_size: 18,
|
||||
line_height: 1.6,
|
||||
margin_width: 16,
|
||||
background_color: "#f5f0eb",
|
||||
text_color: "#1a1a1a",
|
||||
brightness: 100,
|
||||
orientation_lock: "auto",
|
||||
theme: "sepia",
|
||||
created_at: "",
|
||||
updated_at: "",
|
||||
};
|
||||
|
||||
function applyCssVariables(settings: ReadingSettings): void {
|
||||
const root = document.documentElement;
|
||||
root.style.setProperty("--reader-bg", settings.background_color);
|
||||
root.style.setProperty("--reader-text", settings.text_color);
|
||||
root.style.setProperty("--reader-font-family", settings.font_family);
|
||||
root.style.setProperty("--reader-font-size", `${settings.font_size}px`);
|
||||
root.style.setProperty("--reader-line-height", String(settings.line_height));
|
||||
root.style.setProperty("--reader-margin", `${settings.margin_width}px`);
|
||||
root.style.setProperty("--reader-brightness", `${settings.brightness}%`);
|
||||
}
|
||||
|
||||
export interface UseReadingSettingsReturn {
|
||||
settings: ReadingSettings;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
updateSettings: (partial: Partial<ReadingSettings>) => Promise<void>;
|
||||
}
|
||||
|
||||
export function useReadingSettings(): UseReadingSettingsReturn {
|
||||
const [settings, setSettings] = useState<ReadingSettings>(DEFAULT_SETTINGS);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Fetch settings on mount
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setIsLoading(true);
|
||||
getReadingSettings()
|
||||
.then((data) => {
|
||||
if (!cancelled) {
|
||||
setSettings(data);
|
||||
applyCssVariables(data);
|
||||
}
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to load reading settings"
|
||||
);
|
||||
// Apply defaults
|
||||
applyCssVariables(DEFAULT_SETTINGS);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setIsLoading(false);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const updateSettings = useCallback(
|
||||
async (partial: Partial<ReadingSettings>) => {
|
||||
try {
|
||||
const updated = await updateReadingSettings(partial);
|
||||
setSettings(updated);
|
||||
applyCssVariables(updated);
|
||||
setError(null);
|
||||
} catch (err: unknown) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to update reading settings"
|
||||
);
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
return { settings, isLoading, error, updateSettings };
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
if (!rootElement) throw new Error("Root element not found");
|
||||
|
||||
ReactDOM.createRoot(rootElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -1,64 +0,0 @@
|
||||
/**
|
||||
* BookDetailPage — fetches and displays a single book's details.
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { getBook } from "../api/books";
|
||||
import type { BookDetail as BookDetailType } from "../types";
|
||||
import BookDetailComponent from "../components/BookDetail";
|
||||
|
||||
interface BookDetailPageProps {
|
||||
bookId: number;
|
||||
onBack: () => void;
|
||||
onStartReading: (book: BookDetailType) => void;
|
||||
}
|
||||
|
||||
export default function BookDetailPage({ bookId, onBack, onStartReading }: BookDetailPageProps) {
|
||||
const [book, setBook] = useState<BookDetailType | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
getBook(bookId)
|
||||
.then(setBook)
|
||||
.catch((err: unknown) => {
|
||||
setError(err instanceof Error ? err.message : "Failed to load book");
|
||||
})
|
||||
.finally(() => setIsLoading(false));
|
||||
}, [bookId]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="loading-spinner">
|
||||
<div className="spinner" />
|
||||
<p>Loading book details...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="error-state">
|
||||
<p>{error}</p>
|
||||
<button type="button" className="back-button" onClick={onBack}>
|
||||
Back to library
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!book) {
|
||||
return (
|
||||
<div className="error-state">
|
||||
<p>Book not found.</p>
|
||||
<button type="button" className="back-button" onClick={onBack}>
|
||||
Back to library
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <BookDetailComponent book={book} onBack={onBack} onStartReading={onStartReading} />;
|
||||
}
|
||||
@@ -1,147 +0,0 @@
|
||||
/**
|
||||
* LibraryPage — main page for searching and discovering books.
|
||||
* Manages search state, filters, and pagination.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { searchBooks, getGenres, getAuthors } from "../api/books";
|
||||
import type { BookSummary, ReadingStatus } from "../types";
|
||||
import SearchBar from "../components/SearchBar";
|
||||
import BookFilters from "../components/BookFilters";
|
||||
import BookList from "../components/BookList";
|
||||
|
||||
interface LibraryPageProps {
|
||||
onBookSelect: (id: number) => void;
|
||||
}
|
||||
|
||||
export default function LibraryPage({ onBookSelect }: LibraryPageProps) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [books, setBooks] = useState<BookSummary[]>([]);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasNext, setHasNext] = useState(false);
|
||||
const [hasPrev, setHasPrev] = useState(false);
|
||||
|
||||
// Filter state
|
||||
const [genres, setGenres] = useState<string[]>([]);
|
||||
const [authors, setAuthors] = useState<string[]>([]);
|
||||
const [selectedGenre, setSelectedGenre] = useState("");
|
||||
const [selectedAuthor, setSelectedAuthor] = useState("");
|
||||
const [selectedStatus, setSelectedStatus] = useState<ReadingStatus | "">("");
|
||||
|
||||
// Load filter options on mount
|
||||
useEffect(() => {
|
||||
getGenres().then(setGenres).catch(() => {});
|
||||
getAuthors().then(setAuthors).catch(() => {});
|
||||
}, []);
|
||||
|
||||
// Perform search whenever any parameter changes
|
||||
const performSearch = useCallback(
|
||||
async (
|
||||
q: string,
|
||||
genre: string,
|
||||
author: string,
|
||||
status: ReadingStatus | "",
|
||||
pageNum: number,
|
||||
) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const result = await searchBooks({
|
||||
q: q || undefined,
|
||||
genre: genre || undefined,
|
||||
author: author || undefined,
|
||||
reading_status: status || undefined,
|
||||
page: pageNum,
|
||||
});
|
||||
setBooks(result.results);
|
||||
setTotalCount(result.count);
|
||||
setHasNext(result.next !== null);
|
||||
setHasPrev(result.previous !== null);
|
||||
} catch {
|
||||
setBooks([]);
|
||||
setTotalCount(0);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
// Trigger search when state changes
|
||||
useEffect(() => {
|
||||
performSearch(query, selectedGenre, selectedAuthor, selectedStatus, page);
|
||||
}, [query, selectedGenre, selectedAuthor, selectedStatus, page, performSearch]);
|
||||
|
||||
const handleSearchChange = useCallback((q: string) => {
|
||||
setQuery(q);
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const handleGenreChange = useCallback((genre: string) => {
|
||||
setSelectedGenre(genre);
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const handleAuthorChange = useCallback((author: string) => {
|
||||
setSelectedAuthor(author);
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
const handleStatusChange = useCallback((status: ReadingStatus | "") => {
|
||||
setSelectedStatus(status);
|
||||
setPage(1);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="library-page">
|
||||
<header className="library-header">
|
||||
<h1>Book Library</h1>
|
||||
<p>Search and discover books in your collection</p>
|
||||
</header>
|
||||
|
||||
<SearchBar value={query} onChange={handleSearchChange} />
|
||||
|
||||
<BookFilters
|
||||
genres={genres}
|
||||
authors={authors}
|
||||
selectedGenre={selectedGenre}
|
||||
selectedAuthor={selectedAuthor}
|
||||
selectedStatus={selectedStatus}
|
||||
onGenreChange={handleGenreChange}
|
||||
onAuthorChange={handleAuthorChange}
|
||||
onStatusChange={handleStatusChange}
|
||||
/>
|
||||
|
||||
<BookList
|
||||
books={books}
|
||||
isLoading={isLoading}
|
||||
totalCount={totalCount}
|
||||
onBookClick={onBookSelect}
|
||||
/>
|
||||
|
||||
{/* Pagination */}
|
||||
{(hasPrev || hasNext) && (
|
||||
<div className="pagination">
|
||||
<button
|
||||
type="button"
|
||||
className="pagination-btn"
|
||||
disabled={!hasPrev || isLoading}
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="page-indicator">Page {page}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="pagination-btn"
|
||||
disabled={!hasNext || isLoading}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,199 +0,0 @@
|
||||
/**
|
||||
* ReadingPage — full-screen reading view for ebooks.
|
||||
* Integrates TOC drawer, settings panel, chapter navigation, and progress tracking.
|
||||
*/
|
||||
|
||||
import { lazy, Suspense, useCallback, useEffect, useState } from "react";
|
||||
import { useChapters } from "../hooks/useChapters";
|
||||
import { useReadingProgress } from "../hooks/useReadingProgress";
|
||||
import { useReadingSettings } from "../hooks/useReadingSettings";
|
||||
import type { BookDetail as BookDetailType } from "../types";
|
||||
|
||||
const ReaderToolbar = lazy(() => import("../components/ReaderToolbar"));
|
||||
const TableOfContents = lazy(() => import("../components/TableOfContents"));
|
||||
const ReadingSettingsPanel = lazy(
|
||||
() => import("../components/ReadingSettingsPanel")
|
||||
);
|
||||
|
||||
interface ReadingPageProps {
|
||||
book: BookDetailType;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export default function ReadingPage({ book, onBack }: ReadingPageProps) {
|
||||
const [tocOpen, setTocOpen] = useState(false);
|
||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||
|
||||
const { settings, updateSettings } = useReadingSettings();
|
||||
const {
|
||||
chapters,
|
||||
currentChapter,
|
||||
currentChapterNumber,
|
||||
isLoading,
|
||||
error,
|
||||
navigateToChapter,
|
||||
goToNextChapter,
|
||||
goToPreviousChapter,
|
||||
hasNext,
|
||||
hasPrevious,
|
||||
} = useChapters(book.id, 1);
|
||||
|
||||
const { progress, debouncedSave } = useReadingProgress(book.id);
|
||||
|
||||
// Auto-save progress when chapter changes
|
||||
useEffect(() => {
|
||||
if (currentChapter && currentChapterNumber > 0) {
|
||||
debouncedSave(currentChapterNumber, 0, (currentChapterNumber / Math.max(chapters.length, 1)) * 100);
|
||||
}
|
||||
}, [currentChapterNumber, currentChapter?.id]);
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
if (e.key === "ArrowLeft" && hasPrevious) {
|
||||
goToPreviousChapter();
|
||||
} else if (e.key === "ArrowRight" && hasNext) {
|
||||
goToNextChapter();
|
||||
} else if (e.key === "Escape") {
|
||||
setTocOpen(false);
|
||||
setSettingsOpen(false);
|
||||
}
|
||||
},
|
||||
[hasNext, hasPrevious, goToNextChapter, goToPreviousChapter]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, [handleKeyDown]);
|
||||
|
||||
// Lock/unlock orientation via CSS
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
if (settings.orientation_lock !== "auto") {
|
||||
root.style.setProperty(
|
||||
"--reader-orientation",
|
||||
settings.orientation_lock === "portrait" ? "portrait" : "landscape"
|
||||
);
|
||||
} else {
|
||||
root.style.removeProperty("--reader-orientation");
|
||||
}
|
||||
}, [settings.orientation_lock]);
|
||||
|
||||
// Show loading state
|
||||
if (isLoading && !currentChapter) {
|
||||
return (
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
<p>Loading reader...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="reader-loading">
|
||||
<p className="reader-error">{error}</p>
|
||||
<button type="button" className="back-button" onClick={onBack}>
|
||||
Back to book
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="reader-container">
|
||||
<ReaderToolbar
|
||||
bookTitle={book.title}
|
||||
chapterTitle={currentChapter?.title ?? "Loading..."}
|
||||
progress={progress}
|
||||
onToggleToc={() => setTocOpen((v) => !v)}
|
||||
onToggleSettings={() => setSettingsOpen((v) => !v)}
|
||||
/>
|
||||
|
||||
<TableOfContents
|
||||
chapters={chapters}
|
||||
currentChapterNumber={currentChapterNumber}
|
||||
isOpen={tocOpen}
|
||||
onClose={() => setTocOpen(false)}
|
||||
onNavigate={navigateToChapter}
|
||||
/>
|
||||
|
||||
<ReadingSettingsPanel
|
||||
settings={settings}
|
||||
isOpen={settingsOpen}
|
||||
onClose={() => setSettingsOpen(false)}
|
||||
onUpdate={updateSettings}
|
||||
/>
|
||||
|
||||
{/* Main reading area */}
|
||||
<main className="reader-content">
|
||||
{isLoading ? (
|
||||
<div className="reader-loading">
|
||||
<div className="spinner" />
|
||||
<p>Loading chapter...</p>
|
||||
</div>
|
||||
) : currentChapter ? (
|
||||
<article className="reader-chapter">
|
||||
<h1 className="reader-chapter-title">{currentChapter.title}</h1>
|
||||
<div
|
||||
className="reader-chapter-body"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: currentChapter.content,
|
||||
}}
|
||||
/>
|
||||
</article>
|
||||
) : (
|
||||
<div className="reader-loading">
|
||||
<p>Select a chapter from the table of contents to start reading.</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* Bottom navigation bar */}
|
||||
<nav className="reader-nav">
|
||||
<button
|
||||
type="button"
|
||||
className={`reader-nav-btn ${!hasPrevious ? "reader-nav-btn--disabled" : ""}`}
|
||||
onClick={goToPreviousChapter}
|
||||
disabled={!hasPrevious}
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="15 18 9 12 15 6" />
|
||||
</svg>
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="reader-nav-btn reader-nav-btn--back"
|
||||
onClick={onBack}
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M20 12H4M10 18l-6-6 6-6" />
|
||||
</svg>
|
||||
Library
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`reader-nav-btn ${!hasNext ? "reader-nav-btn--disabled" : ""}`}
|
||||
onClick={goToNextChapter}
|
||||
disabled={!hasNext}
|
||||
>
|
||||
Next
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -1,621 +0,0 @@
|
||||
/* ============================================================
|
||||
Cloud Reader — Reading View Styles
|
||||
Mobile-first reading experience with theme support
|
||||
============================================================ */
|
||||
|
||||
/* --- CSS Custom Properties (overridden by JS) --- */
|
||||
:root {
|
||||
--reader-bg: #f5f0eb;
|
||||
--reader-text: #1a1a1a;
|
||||
--reader-font-family: Georgia, "Times New Roman", serif;
|
||||
--reader-font-size: 18px;
|
||||
--reader-line-height: 1.6;
|
||||
--reader-margin: 16px;
|
||||
--reader-brightness: 100%;
|
||||
--reader-toolbar-bg: rgba(26, 26, 26, 0.95);
|
||||
--reader-toolbar-text: #e0e0e0;
|
||||
--reader-accent: #6c8cff;
|
||||
}
|
||||
|
||||
/* --- Reading Container --- */
|
||||
.reader-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--reader-bg);
|
||||
color: var(--reader-text);
|
||||
font-family: var(--reader-font-family);
|
||||
font-size: var(--reader-font-size);
|
||||
line-height: var(--reader-line-height);
|
||||
filter: brightness(var(--reader-brightness));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Orientation lock */
|
||||
@supports (--reader-orientation: portrait) {
|
||||
.reader-container {
|
||||
orientation: var(--reader-orientation);
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landascape) {
|
||||
.reader-container {
|
||||
--reader-margin: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Top Toolbar --- */
|
||||
.reader-top-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 52px;
|
||||
background: var(--reader-toolbar-bg);
|
||||
color: var(--reader-toolbar-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
z-index: 120;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.reader-bar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--reader-toolbar-text);
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.reader-bar-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.reader-bar-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.reader-bar-book {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.reader-bar-chapter {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.7;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* --- Progress Bar --- */
|
||||
.reader-progress-bar {
|
||||
position: fixed;
|
||||
top: 52px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
z-index: 120;
|
||||
}
|
||||
|
||||
.reader-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--reader-accent);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* --- Main Content Area --- */
|
||||
.reader-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 72px var(--reader-margin) 72px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* --- Chapter Article --- */
|
||||
.reader-chapter {
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.reader-chapter-title {
|
||||
font-size: 1.6em;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0.75em;
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
color: var(--reader-text);
|
||||
}
|
||||
|
||||
/* Chapter body — content from API (could be HTML/markdown-rendered) */
|
||||
.reader-chapter-body {
|
||||
font-size: 1em;
|
||||
line-height: var(--reader-line-height);
|
||||
}
|
||||
|
||||
.reader-chapter-body p {
|
||||
margin-bottom: 1.2em;
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.reader-chapter-body h2,
|
||||
.reader-chapter-body h3,
|
||||
.reader-chapter-body h4 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.6em;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.reader-chapter-body blockquote {
|
||||
border-left: 3px solid var(--reader-accent);
|
||||
padding-left: 1em;
|
||||
margin: 1em 0;
|
||||
opacity: 0.85;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.reader-chapter-body img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.reader-chapter-body ul,
|
||||
.reader-chapter-body ol {
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
||||
.reader-chapter-body li {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
/* --- Navigation Bar (Bottom) --- */
|
||||
.reader-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 56px;
|
||||
background: var(--reader-toolbar-bg);
|
||||
color: var(--reader-toolbar-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
z-index: 120;
|
||||
gap: 8px;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.reader-nav-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
color: var(--reader-toolbar-text);
|
||||
font-size: 0.85rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.reader-nav-btn:hover:not(.reader-nav-btn--disabled) {
|
||||
border-color: var(--reader-accent);
|
||||
color: var(--reader-accent);
|
||||
}
|
||||
|
||||
.reader-nav-btn--disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.reader-nav-btn--back {
|
||||
background: rgba(108, 140, 255, 0.15);
|
||||
border-color: rgba(108, 140, 255, 0.3);
|
||||
}
|
||||
|
||||
.reader-nav-btn--back:hover {
|
||||
background: rgba(108, 140, 255, 0.25);
|
||||
color: var(--reader-accent);
|
||||
}
|
||||
|
||||
/* --- TOC Drawer --- */
|
||||
.toc-overlay,
|
||||
.settings-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 130;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.toc-drawer,
|
||||
.settings-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 300px;
|
||||
max-width: 85vw;
|
||||
background: var(--reader-toolbar-bg);
|
||||
color: var(--reader-toolbar-text);
|
||||
z-index: 140;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.toc-drawer {
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.toc-drawer--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.settings-drawer {
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.settings-drawer--open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.toc-header,
|
||||
.settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.toc-title,
|
||||
.settings-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.toc-close-btn,
|
||||
.settings-close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--reader-toolbar-text);
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.toc-close-btn:hover,
|
||||
.settings-close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* --- TOC List --- */
|
||||
.toc-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.toc-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
opacity: 0.6;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.toc-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--reader-toolbar-text);
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.toc-item:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.toc-item--active {
|
||||
background: rgba(108, 140, 255, 0.15);
|
||||
color: var(--reader-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toc-item-number {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.toc-item-title {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* --- Settings Panel --- */
|
||||
.settings-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 16px 32px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.settings-section-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-bottom: 8px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
/* Theme grid */
|
||||
.theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
padding: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--reader-toolbar-text);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.theme-btn:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.theme-btn--active {
|
||||
border-color: var(--reader-accent);
|
||||
background: rgba(108, 140, 255, 0.15);
|
||||
color: var(--reader-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Font grid */
|
||||
.font-grid,
|
||||
.orientation-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.font-btn,
|
||||
.orientation-btn {
|
||||
padding: 10px 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--reader-toolbar-text);
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.font-btn:hover,
|
||||
.orientation-btn:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.font-btn--active,
|
||||
.orientation-btn--active {
|
||||
border-color: var(--reader-accent);
|
||||
background: rgba(108, 140, 255, 0.15);
|
||||
color: var(--reader-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Sliders */
|
||||
.settings-slider {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--reader-accent);
|
||||
border: 2px solid white;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.settings-slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--reader-accent);
|
||||
border: 2px solid white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* --- Start Reading Button (in book detail) --- */
|
||||
.start-reading-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 24px;
|
||||
background: var(--reader-accent);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.start-reading-btn:hover {
|
||||
background: #5a7ae8;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(108, 140, 255, 0.3);
|
||||
}
|
||||
|
||||
/* --- Loading State --- */
|
||||
.reader-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 48px;
|
||||
color: var(--reader-text);
|
||||
}
|
||||
|
||||
.reader-error {
|
||||
color: #ef4444;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- Responsive --- */
|
||||
@media (max-width: 480px) {
|
||||
.reader-chapter {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.reader-nav-btn {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.reader-nav-btn span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toc-drawer,
|
||||
.settings-drawer {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
.reader-chapter-title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.reader-chapter {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.reader-chapter-body {
|
||||
font-size: 1.05em;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Landscape on Mobile --- */
|
||||
@media (orientation: landscape) and (max-height: 500px) {
|
||||
.reader-top-bar {
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.reader-content {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.reader-chapter-title {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Dark mode theme override when reader uses light theme but system is dark --- */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.reader-container[data-theme="light"] {
|
||||
--reader-toolbar-bg: rgba(255, 255, 255, 0.95);
|
||||
--reader-toolbar-text: #1a1a1a;
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
/** Shared TypeScript interfaces for the Cloud Reader API. */
|
||||
|
||||
export type ReadingStatus =
|
||||
| "want_to_read"
|
||||
| "reading"
|
||||
| "finished"
|
||||
| "dnf";
|
||||
|
||||
export const READING_STATUS_LABELS: Record<ReadingStatus, string> = {
|
||||
want_to_read: "Want to Read",
|
||||
reading: "Reading",
|
||||
finished: "Finished",
|
||||
dnf: "Did Not Finish",
|
||||
};
|
||||
|
||||
export interface BookSummary {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
genre: string;
|
||||
reading_status: ReadingStatus;
|
||||
reading_status_display: string;
|
||||
cover_url: string;
|
||||
}
|
||||
|
||||
export interface BookDetail {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
genre: string;
|
||||
description: string;
|
||||
reading_status: ReadingStatus;
|
||||
reading_status_display: string;
|
||||
cover_url: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface PaginatedResponse<T> {
|
||||
count: number;
|
||||
next: string | null;
|
||||
previous: string | null;
|
||||
results: T[];
|
||||
}
|
||||
|
||||
export interface SearchParams {
|
||||
q?: string;
|
||||
genre?: string;
|
||||
author?: string;
|
||||
reading_status?: ReadingStatus | "";
|
||||
page?: number;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
export interface BookListItem {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
filename: string;
|
||||
cover_image: string | null;
|
||||
created_at: string;
|
||||
progress: number | null;
|
||||
}
|
||||
|
||||
export interface BookDetail {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
filename: string;
|
||||
file_url: string;
|
||||
cover_image: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
progress: ReadingProgress | null;
|
||||
}
|
||||
|
||||
export interface ReadingProgress {
|
||||
current_position: number;
|
||||
last_page: number;
|
||||
}
|
||||
|
||||
export interface ReadingSettings {
|
||||
font_size: number;
|
||||
font_style: "sans-serif" | "serif" | "monospace";
|
||||
background_color: string;
|
||||
}
|
||||
|
||||
export interface AuthToken {
|
||||
token: string;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
/**
|
||||
* TypeScript interfaces for the Cloud Reader reader module.
|
||||
* Reading view, settings, chapters, and progress types.
|
||||
*/
|
||||
|
||||
export interface ChapterSummary {
|
||||
id: number;
|
||||
book: number;
|
||||
title: string;
|
||||
number: number;
|
||||
}
|
||||
|
||||
export interface ChapterDetail extends ChapterSummary {
|
||||
content: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface ReadingSettings {
|
||||
font_family: "sans-serif" | "serif" | "monospace";
|
||||
font_size: number;
|
||||
line_height: number;
|
||||
margin_width: number;
|
||||
background_color: string;
|
||||
text_color: string;
|
||||
brightness: number;
|
||||
orientation_lock: "auto" | "portrait" | "landscape";
|
||||
theme: "sepia" | "dark" | "light" | "paper";
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export type ThemePreset = ReadingSettings["theme"];
|
||||
export type FontFamily = ReadingSettings["font_family"];
|
||||
export type OrientationLock = ReadingSettings["orientation_lock"];
|
||||
|
||||
export interface ReadingProgress {
|
||||
id: number;
|
||||
book: number;
|
||||
current_chapter: number;
|
||||
current_position: number;
|
||||
percentage: number;
|
||||
updated_at: string;
|
||||
}
|
||||
Vendored
-9
@@ -1,9 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_URL: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"moduleResolution": "bundler",
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: "0.0.0.0",
|
||||
port: 3000,
|
||||
watch: { usePolling: true },
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user