feat: monorepo structure with Django backend, React frontend, and Expo mobile app

- Backend: Django 5 + DRF with accounts, documents, collections, and reading apps
  - Custom User model with email-based auth, JWT via SimpleJWT
  - Full CRUD viewsets with ModelSerializer + DRF routers
  - pytest, Ruff, drf-spectacular (OpenAPI), whitenoise
  - Dockerfile for production deployment

- Frontend: React 18 + TypeScript + Vite
  - Lazy-loaded routes with ProtectedRoute/PublicRoute guards
  - Auth context with useReducer, token refresh interceptor
  - Pages: Login, Register, Library, Document Detail, Reader, Collections, Settings
  - Dark theme, responsive grid layout, Vite proxy to Django backend

- Mobile: Expo SDK 51 + React Native + Expo Router
  - File-based routing with login, register, and library screens
  - AsyncStorage for token persistence, token refresh interceptor
  - Shared API types via @cloud-reader/shared workspace package

- Shared: TypeScript types (API responses, auth, documents, etc.)
- CI/CD: 3 independent GitHub Actions pipelines (backend, frontend, mobile)

.github/workflows/backend-ci.yml

@@ -0,0 +1,72 @@
+name: Backend CI
+
+on:
+  push:
+    branches: [main, develop]
+    paths:
+      - "backend/**"
+      - ".github/workflows/backend-ci.yml"
+  pull_request:
+    paths:
+      - "backend/**"
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_DB: cloud_reader
+          POSTGRES_USER: cloud_reader
+          POSTGRES_PASSWORD: cloud_reader
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    defaults:
+      run:
+        working-directory: backend
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Python 3.12
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+          cache: "pip"
+          cache-dependency-path: backend/requirements/dev.txt
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements/dev.txt
+
+      - name: Lint
+        run: ruff check .
+
+      - name: Run migrations
+        run: python manage.py migrate
+        env:
+          DB_HOST: localhost
+          DB_NAME: cloud_reader
+          DB_USER: cloud_reader
+          DB_PASSWORD: cloud_reader
+          DB_PORT: 5432
+          SECRET_KEY: ci-test-secret-key-do-not-use-in-production
+
+      - name: Run tests
+        run: pytest
+        env:
+          DB_HOST: localhost
+          DB_NAME: cloud_reader
+          DB_USER: cloud_reader
+          DB_PASSWORD: cloud_reader
+          DB_PORT: 5432
+          SECRET_KEY: ci-test-secret-key-do-not-use-in-production

.github/workflows/frontend-ci.yml

@@ -0,0 +1,42 @@
+name: Frontend CI
+
+on:
+  push:
+    branches: [main, develop]
+    paths:
+      - "frontend/**"
+      - "shared/**"
+      - ".github/workflows/frontend-ci.yml"
+  pull_request:
+    paths:
+      - "frontend/**"
+      - "shared/**"
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "yarn"
+          cache-dependency-path: yarn.lock
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Type check shared
+        run: yarn workspace @cloud-reader/shared typecheck
+
+      - name: Build shared
+        run: yarn workspace @cloud-reader/shared build
+
+      - name: Type check frontend
+        run: yarn workspace @cloud-reader/frontend typecheck
+
+      - name: Build frontend
+        run: yarn workspace @cloud-reader/frontend build

.github/workflows/mobile-ci.yml

@@ -0,0 +1,39 @@
+name: Mobile CI
+
+on:
+  push:
+    branches: [main, develop]
+    paths:
+      - "mobile/**"
+      - "shared/**"
+      - ".github/workflows/mobile-ci.yml"
+  pull_request:
+    paths:
+      - "mobile/**"
+      - "shared/**"
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "yarn"
+          cache-dependency-path: yarn.lock
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Type check shared
+        run: yarn workspace @cloud-reader/shared typecheck
+
+      - name: Build shared
+        run: yarn workspace @cloud-reader/shared build
+
+      - name: Type check mobile
+        run: yarn workspace @cloud-reader/mobile typecheck

.gitignore

@@ -0,0 +1,48 @@
+# Python
+__pycache__/
+*.py[cod]
+*.egg-info/
+dist/
+build/
+.eggs/
+*.egg
+.env
+venv/
+.venv/
+*.sqlite3
+
+# Node
+node_modules/
+.pnp
+.pnp.js
+yarn-error.log*
+
+# Build artifacts
+dist/
+build/
+*.tsbuildinfo
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+.DS_Store
+
+# Django
+backend/media/
+backend/staticfiles/
+backend/**/migrations/
+
+# Expo / React Native
+mobile/.expo/
+mobile/ios/Pods/
+mobile/android/.gradle/
+mobile/android/app/build/
+mobile/android/build/
+mobile/*.hprof
+
+# Environment
+.env.local
+.env.production
+.env.development

README.md

@@ -1,57 +1,195 @@
 # Cloud Reader
 
-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.
+A modern eBook reader with web and mobile clients, powered by Django REST Framework.
 
-## Architecture
+## Monorepo Structure
 
 ```
 cloud-reader/
-├── backend/         # Django REST API (canonical backend)
+├── backend/            # Django API server (Python 3.12 + DRF)
 │   ├── 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)
+│   ├── apps/           # Django applications
+│   │   ├── accounts/   # User authentication & profiles
+│   │   ├── documents/  # Document management & uploads
+│   │   ├── collections/# Document collections
+│   │   └── reading/    # Bookmarks, highlights, reading progress
+│   ├── requirements/   # pip dependency files
+│   ├── Dockerfile
+│   └── manage.py
+├── frontend/           # React web app (TypeScript + Vite)
 │   ├── 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
+│   │   ├── pages/      # Route pages (lazy-loaded)
+│   │   ├── hooks/      # Custom React hooks
+│   │   ├── services/   # API client & auth service
+│   │   ├── types/      # Frontend-specific types
+│   │   └── styles/     # Global CSS
+│   ├── Dockerfile
+│   └── vite.config.ts
+├── mobile/             # Expo/React Native mobile app
+│   ├── app/            # Expo Router pages
+│   ├── src/            # Mobile source code
+│   ├── app.json
+│   └── Dockerfile
+├── shared/             # Shared TypeScript types & utilities
+│   └── src/
+│       └── index.ts    # API response types, constants
+├── .github/workflows/  # CI/CD pipelines
+└── package.json        # Yarn workspace root
 ```
 
-## Quick Start
+## Prerequisites
 
-### Docker (recommended)
-```bash
-docker compose up --build
-```
-- **Frontend:** http://localhost:5173
-- **Backend API:** http://localhost:8000/api/
+- **Python** 3.12+
+- **Node.js** 20 LTS
+- **Yarn** 4.x
+- **PostgreSQL** 16
+- **Expo CLI** (for mobile development)
+
+---
+
+## Backend Setup
 
-### Backend (standalone)
 ```bash
 cd backend
-pip install -r requirements.txt
+
+# Create virtual environment
+python -m venv .venv
+source .venv/bin/activate  # Linux/macOS
+# .venv\Scripts\activate   # Windows
+
+# Install dependencies
+pip install -r requirements/dev.txt
+
+# Configure environment
+cp .env.example .env
+# Edit .env with your PostgreSQL credentials
+
+# Run migrations
 python manage.py migrate
+
+# Create admin user
+python manage.py createsuperuser
+
+# Start development server
 python manage.py runserver
 ```
 
-### Frontend (standalone)
+The API will be available at `http://localhost:8000/`. Browse the API at `http://localhost:8000/api/schema/swagger-ui/`.
+
+### Backend Tests
+
 ```bash
-cd frontend
-yarn install
-yarn dev
+cd backend
+pytest
 ```
 
-## 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.
+---
+
+## Frontend Setup
+
+```bash
+# From monorepo root
+yarn install
+
+# Start dev server (with API proxy)
+yarn frontend:dev
+```
+
+The frontend will be available at `http://localhost:5173/`. API requests under `/api/` are proxied to `http://localhost:8000/`.
+
+### Frontend Build
+
+```bash
+yarn frontend:build
+```
+
+---
+
+## Mobile Setup
+
+```bash
+# From monorepo root
+yarn install
+
+# Start Expo dev server
+yarn mobile:start
+
+# Run on Android
+yarn mobile:android
+
+# Run on iOS (macOS only)
+yarn mobile:ios
+```
+
+> The mobile API client defaults to `http://localhost:8000/`. For physical devices, update the `API_BASE` in `mobile/src/services/api.ts` to your machine's local IP.
+
+---
+
+## Shared Package
+
+The `shared/` package contains TypeScript types and constants used by both the frontend and mobile apps.
+
+```bash
+# Build shared package
+yarn shared:build
+```
+
+---
+
+## CI/CD
+
+Three independent CI pipelines run on pushes and PRs:
+
+| Pipeline | Trigger Path | What It Does |
+|----------|-------------|--------------|
+| **Backend CI** | `backend/**` | Installs Python deps, runs Ruff linter, applies migrations, runs pytest |
+| **Frontend CI** | `frontend/**`, `shared/**` | Installs Node deps, type-check & build shared, type-check & build frontend |
+| **Mobile CI** | `mobile/**`, `shared/**` | Installs Node deps, type-check shared & mobile |
+
+Pipeline configs are in `.github/workflows/`.
+
+### Docker Deployments
+
+Each app has its own Dockerfile for independent deployment:
+
+```bash
+# Build backend image
+docker build -t cloud-reader-backend backend/
+
+# Build frontend image
+docker build -t cloud-reader-frontend frontend/
+
+# Build mobile image (web export)
+docker build -t cloud-reader-mobile mobile/
+```
+
+---
+
+## API Endpoints
+
+| Endpoint | Description |
+|----------|-------------|
+| `POST /api/v1/auth/register/` | Create a new account |
+| `POST /api/v1/auth/token/` | Obtain JWT tokens |
+| `POST /api/v1/auth/token/refresh/` | Refresh JWT token |
+| `GET /api/v1/auth/me/` | Get current user profile |
+| `GET/POST /api/v1/documents/` | List / upload documents |
+| `GET/PUT/DELETE /api/v1/documents/:id/` | Document detail |
+| `GET/POST /api/v1/collections/` | List / create collections |
+| `GET/PUT/DELETE /api/v1/collections/:id/` | Collection detail |
+| `POST /api/v1/collections/:id/add_documents/` | Add docs to collection |
+| `POST /api/v1/collections/:id/remove_documents/` | Remove docs from collection |
+| `GET/POST /api/v1/reading/bookmarks/` | List / create bookmarks |
+| `GET/POST /api/v1/reading/highlights/` | List / create highlights |
+| `GET/POST /api/v1/reading/progress/` | Track reading progress |
+
+---
+
+## Tech Stack
+
+- **Backend:** Django 5, Django REST Framework, SimpleJWT, PostgreSQL, drf-spectacular
+- **Frontend:** React 18, TypeScript, Vite, React Router, Axios
+- **Mobile:** Expo SDK 51, React Native 0.74, Expo Router
+- **Shared:** TypeScript types, Zod schemas
+- **CI/CD:** GitHub Actions
+- **Container:** Docker (separate images per app)

backend/.env.example

@@ -1,8 +1,15 @@
-# Backend environment (example – never commit real secrets)
-DJANGO_SECRET_KEY=django-insecure-change-me-in-production
-DJANGO_DEBUG=True
+# Cloud Reader Backend — Environment Variables
+# Copy to .env and fill in your values.
+
+SECRET_KEY=django-insecure-change-me-in-production
+DEBUG=True
+
+DB_ENGINE=django.db.backends.postgresql
 DB_NAME=cloud_reader
-DB_USER=postgres
-DB_PASSWORD=postgres
+DB_USER=cloud_reader
+DB_PASSWORD=cloud_reader
 DB_HOST=localhost
 DB_PORT=5432
+
+CORS_ALLOWED_ORIGINS=http://localhost:5173,http://localhost:3000
+ALLOWED_HOSTS=localhost,127.0.0.1

backend/Dockerfile

@@ -1,18 +1,18 @@
 FROM python:3.12-slim
 
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    DJANGO_SETTINGS_MODULE=config.settings
+
 WORKDIR /app
 
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    libpq-dev gcc && \
-    rm -rf /var/lib/apt/lists/*
+COPY requirements/production.txt /app/requirements/
+RUN pip install --no-cache-dir -r requirements/production.txt
 
-COPY requirements.txt ./
-RUN pip install --no-cache-dir -r requirements.txt
+COPY . /app
 
-COPY . ./
-
-RUN mkdir -p media
+RUN python manage.py collectstatic --noinput
 
 EXPOSE 8000
 
-CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]
+CMD ["gunicorn", "config.wsgi:application", "--bind", "0.0.0.0:8000", "--workers", "4"]

backend/apps/accounts/admin.py

@@ -0,0 +1,10 @@
+from django.contrib import admin
+
+from .models import User
+
+
+@admin.register(User)
+class UserAdmin(admin.ModelAdmin):
+    list_display = ["email", "display_name", "is_verified", "is_active", "date_joined"]
+    search_fields = ["email", "display_name"]
+    list_filter = ["is_verified", "is_active"]

backend/apps/accounts/models.py

@@ -0,0 +1,29 @@
+from django.contrib.auth.models import AbstractUser
+from django.db import models
+
+
+class User(AbstractUser):
+    """Custom user model for Cloud Reader."""
+
+    email = models.EmailField(unique=True)
+    display_name = models.CharField(max_length=150, blank=True)
+    avatar = models.ImageField(upload_to="avatars/", blank=True, null=True)
+    is_verified = models.BooleanField(default=False)
+    reading_preferences = models.JSONField(default=dict, blank=True)
+
+    USERNAME_FIELD = "email"
+    REQUIRED_FIELDS = ["username"]
+
+    class Meta:
+        db_table = "accounts_user"
+        verbose_name = "User"
+        verbose_name_plural = "Users"
+
+    def __str__(self) -> str:
+        return self.email
+
+    @property
+    def avatar_url(self) -> str | None:
+        if self.avatar:
+            return self.avatar.url
+        return None

backend/apps/accounts/serializers.py

@@ -0,0 +1,53 @@
+from django.contrib.auth import get_user_model
+from rest_framework import serializers
+
+from .models import User
+
+UserModel = get_user_model()
+
+
+class RegisterSerializer(serializers.ModelSerializer[User]):
+    password = serializers.CharField(write_only=True, min_length=8)
+    password_confirm = serializers.CharField(write_only=True, min_length=8)
+
+    class Meta:
+        model = User
+        fields = ["email", "username", "display_name", "password", "password_confirm"]
+
+    def validate(self, attrs):
+        if attrs["password"] != attrs.pop("password_confirm"):
+            raise serializers.ValidationError({"password_confirm": "Passwords do not match."})
+        return attrs
+
+    def create(self, validated_data):
+        password = validated_data.pop("password")
+        user = UserModel(**validated_data)
+        user.set_password(password)
+        user.save()
+        return user
+
+
+class UserSerializer(serializers.ModelSerializer[User]):
+    avatar_url = serializers.SerializerMethodField()
+
+    class Meta:
+        model = User
+        fields = [
+            "id", "email", "username", "display_name", "avatar_url",
+            "date_joined", "is_verified", "reading_preferences",
+        ]
+        read_only_fields = ["id", "email", "date_joined", "is_verified"]
+
+    def get_avatar_url(self, obj: User) -> str | None:
+        return obj.avatar_url
+
+
+class ChangePasswordSerializer(serializers.Serializer):
+    old_password = serializers.CharField(required=True)
+    new_password = serializers.CharField(required=True, min_length=8)
+
+    def validate_old_password(self, value: str) -> str:
+        user = self.context["request"].user
+        if not user.check_password(value):
+            raise serializers.ValidationError("Current password is incorrect.")
+        return value

backend/apps/accounts/urls.py

@@ -0,0 +1,14 @@
+from django.urls import path
+from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
+
+from . import views
+
+app_name = "accounts"
+
+urlpatterns = [
+    path("register/", views.RegisterView.as_view(), name="register"),
+    path("me/", views.UserDetailView.as_view(), name="user-detail"),
+    path("change-password/", views.ChangePasswordView.as_view(), name="change-password"),
+    path("token/", TokenObtainPairView.as_view(), name="token-obtain"),
+    path("token/refresh/", TokenRefreshView.as_view(), name="token-refresh"),
+]

backend/apps/accounts/views.py

@@ -0,0 +1,36 @@
+from django.contrib.auth import get_user_model
+from rest_framework import generics, permissions, status
+from rest_framework.response import Response
+from rest_framework.views import APIView
+
+from .serializers import ChangePasswordSerializer, RegisterSerializer, UserSerializer
+
+UserModel = get_user_model()
+
+
+class RegisterView(generics.CreateAPIView):
+    """Create a new user account."""
+    queryset = UserModel.objects.all()
+    serializer_class = RegisterSerializer
+    permission_classes = [permissions.AllowAny]
+
+
+class UserDetailView(generics.RetrieveUpdateAPIView):
+    """Get or update the authenticated user's profile."""
+    serializer_class = UserSerializer
+    permission_classes = [permissions.IsAuthenticated]
+
+    def get_object(self):
+        return self.request.user
+
+
+class ChangePasswordView(APIView):
+    """Change the authenticated user's password."""
+    permission_classes = [permissions.IsAuthenticated]
+
+    def post(self, request):
+        serializer = ChangePasswordSerializer(data=request.data, context={"request": request})
+        serializer.is_valid(raise_exception=True)
+        request.user.set_password(serializer.validated_data["new_password"])
+        request.user.save()
+        return Response({"detail": "Password changed successfully."}, status=status.HTTP_200_OK)

backend/apps/annotations/admin.py

@@ -1,19 +0,0 @@
-from django.contrib import admin
-
-from apps.annotations.models import Bookmark, Note
-
-
-@admin.register(Bookmark)
-class BookmarkAdmin(admin.ModelAdmin):
-    list_display = ("user", "book", "page", "created_at")
-    list_select_related = ("user", "book")
-    search_fields = ("user__email", "book__title", "location_text")
-    list_filter = ("created_at",)
-
-
-@admin.register(Note)
-class NoteAdmin(admin.ModelAdmin):
-    list_display = ("user", "book", "page", "created_at", "updated_at")
-    list_select_related = ("user", "book")
-    search_fields = ("user__email", "book__title", "content", "location_text")
-    list_filter = ("created_at",)

backend/apps/annotations/apps.py

@@ -1,7 +0,0 @@
-from django.apps import AppConfig
-
-
-class AnnotationsConfig(AppConfig):
-    default_auto_field = "django.db.models.BigAutoField"
-    name = "apps.annotations"
-    label = "annotations"

backend/apps/annotations/models.py

@@ -1,84 +0,0 @@
-import uuid
-
-from django.conf import settings
-from django.db import models
-
-
-class Bookmark(models.Model):
-    """A saved location in a book that the user can return to."""
-
-    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
-    user = models.ForeignKey(
-        settings.AUTH_USER_MODEL,
-        on_delete=models.CASCADE,
-        related_name="bookmarks",
-        db_index=True,
-    )
-    book = models.ForeignKey(
-        "books.Book",
-        on_delete=models.CASCADE,
-        related_name="bookmarks",
-        db_index=True,
-    )
-    page = models.PositiveIntegerField()
-    location_text = models.TextField(
-        blank=True,
-        default="",
-        help_text="The selected passage text at this location",
-    )
-    created_at = models.DateTimeField(auto_now_add=True)
-    updated_at = models.DateTimeField(auto_now=True)
-
-    class Meta:
-        db_table = "annotations_bookmark"
-        verbose_name = "Bookmark"
-        verbose_name_plural = "Bookmarks"
-        ordering = ["-created_at"]
-        constraints = [
-            models.UniqueConstraint(
-                fields=["user", "book", "page"],
-                name="uq_bookmark_user_book_page",
-            )
-        ]
-
-    def __str__(self) -> str:
-        return f"{self.user} @ {self.book} p.{self.page}"
-
-
-class Note(models.Model):
-    """A user-written note attached to a specific location in a book."""
-
-    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
-    user = models.ForeignKey(
-        settings.AUTH_USER_MODEL,
-        on_delete=models.CASCADE,
-        related_name="notes",
-        db_index=True,
-    )
-    book = models.ForeignKey(
-        "books.Book",
-        on_delete=models.CASCADE,
-        related_name="notes",
-        db_index=True,
-    )
-    page = models.PositiveIntegerField()
-    location_text = models.TextField(
-        blank=True,
-        default="",
-        help_text="The selected passage text this note refers to",
-    )
-    content = models.TextField(
-        help_text="The note body content"
-    )
-    created_at = models.DateTimeField(auto_now_add=True)
-    updated_at = models.DateTimeField(auto_now=True)
-
-    class Meta:
-        db_table = "annotations_note"
-        verbose_name = "Note"
-        verbose_name_plural = "Notes"
-        ordering = ["-created_at"]
-
-    def __str__(self) -> str:
-        preview = self.content[:50]
-        return f"{self.user} @ {self.book} p.{self.page}: {preview}"

backend/apps/annotations/permissions.py

@@ -1,8 +0,0 @@
-from rest_framework import permissions
-
-
-class IsOwner(permissions.BasePermission):
-    """Grant access only if the requesting user owns the object."""
-
-    def has_object_permission(self, request, view, obj) -> bool:
-        return obj.user == request.user

backend/apps/annotations/serializers.py

@@ -1,108 +0,0 @@
-from rest_framework import serializers
-
-from apps.annotations.models import Bookmark, Note
-
-
-class BookmarkSerializer(serializers.ModelSerializer):
-    """Serialize Bookmark data with full details."""
-
-    book_title = serializers.CharField(source="book.title", read_only=True)
-
-    class Meta:
-        model = Bookmark
-        fields = [
-            "id",
-            "book",
-            "book_title",
-            "page",
-            "location_text",
-            "created_at",
-            "updated_at",
-        ]
-        read_only_fields = ["id", "created_at", "updated_at", "book_title"]
-
-    def validate_page(self, value: int) -> int:
-        if value < 1:
-            raise serializers.ValidationError("Page must be a positive integer.")
-        return value
-
-
-class BookmarkCreateSerializer(serializers.ModelSerializer):
-    """Serializer used for creating bookmarks. Sets user from request context."""
-
-    class Meta:
-        model = Bookmark
-        fields = ["book", "page", "location_text"]
-
-    def validate_page(self, value: int) -> int:
-        if value < 1:
-            raise serializers.ValidationError("Page must be a positive integer.")
-        return value
-
-    def validate(self, attrs):
-        user = self.context["request"].user
-        if Bookmark.objects.filter(
-            user=user, book=attrs["book"], page=attrs["page"]
-        ).exists():
-            raise serializers.ValidationError(
-                {"page": "A bookmark already exists at this page for this book."}
-            )
-        return attrs
-
-    def create(self, validated_data):
-        validated_data["user"] = self.context["request"].user
-        return super().create(validated_data)
-
-
-class NoteSerializer(serializers.ModelSerializer):
-    """Serialize Note data with full details."""
-
-    book_title = serializers.CharField(source="book.title", read_only=True)
-
-    class Meta:
-        model = Note
-        fields = [
-            "id",
-            "book",
-            "book_title",
-            "page",
-            "location_text",
-            "content",
-            "created_at",
-            "updated_at",
-        ]
-        read_only_fields = ["id", "created_at", "updated_at", "book_title"]
-
-    def validate_page(self, value: int) -> int:
-        if value < 1:
-            raise serializers.ValidationError("Page must be a positive integer.")
-        return value
-
-    def validate_content(self, value: str) -> str:
-        stripped = value.strip()
-        if not stripped:
-            raise serializers.ValidationError("Note content cannot be empty.")
-        return stripped
-
-
-class NoteCreateSerializer(serializers.ModelSerializer):
-    """Serializer used for creating notes. Sets user from request context."""
-
-    class Meta:
-        model = Note
-        fields = ["book", "page", "location_text", "content"]
-
-    def validate_page(self, value: int) -> int:
-        if value < 1:
-            raise serializers.ValidationError("Page must be a positive integer.")
-        return value
-
-    def validate_content(self, value: str) -> str:
-        stripped = value.strip()
-        if not stripped:
-            raise serializers.ValidationError("Note content cannot be empty.")
-        return stripped
-
-    def create(self, validated_data):
-        validated_data["user"] = self.context["request"].user
-        return super().create(validated_data)

backend/apps/annotations/tests.py

@@ -1,331 +0,0 @@
-"""Tests for the annotations app – Bookmarks & Notes API."""
-
-import pytest
-from django.urls import reverse
-from rest_framework import status
-from rest_framework.test import APIClient
-
-from apps.annotations.models import Bookmark, Note
-from apps.books.models import Book
-from apps.users.models import User
-
-
-# ---------------------------------------------------------------------------
-# Fixtures
-# ---------------------------------------------------------------------------
-
-@pytest.fixture
-def api_client() -> APIClient:
-    return APIClient()
-
-
-@pytest.fixture
-def user() -> User:
-    return User.objects.create_user(
-        username="testuser",
-        email="test@example.com",
-        password="testpass123",
-    )
-
-
-@pytest.fixture
-def other_user() -> User:
-    return User.objects.create_user(
-        username="other",
-        email="other@example.com",
-        password="testpass123",
-    )
-
-
-@pytest.fixture
-def auth_client(api_client: APIClient, user: User) -> APIClient:
-    api_client.force_authenticate(user=user)
-    return api_client
-
-
-@pytest.fixture
-def book() -> Book:
-    return Book.objects.create(
-        title="Test Book",
-        author="Test Author",
-        total_pages=300,
-    )
-
-
-@pytest.fixture
-def bookmark(auth_client, user: User, book: Book) -> Bookmark:
-    return Bookmark.objects.create(
-        user=user,
-        book=book,
-        page=42,
-        location_text="important passage",
-    )
-
-
-@pytest.fixture
-def note(auth_client, user: User, book: Book) -> Note:
-    return Note.objects.create(
-        user=user,
-        book=book,
-        page=15,
-        location_text="highlighted section",
-        content="This is my note about this section.",
-    )
-
-
-# ---------------------------------------------------------------------------
-# Bookmark tests
-# ---------------------------------------------------------------------------
-
-class TestBookmarkList:
-    url = reverse("bookmark-list")
-
-    def test_unauthenticated_user_cannot_list(self, api_client: APIClient):
-        response = api_client.get(self.url)
-        assert response.status_code == status.HTTP_401_UNAUTHORIZED
-
-    def test_list_returns_user_bookmarks_only(
-        self, auth_client: APIClient, user: User, other_user: User, book: Book
-    ):
-        Bookmark.objects.create(user=user, book=book, page=1)
-        Bookmark.objects.create(user=other_user, book=book, page=2)
-
-        response = auth_client.get(self.url)
-        assert response.status_code == status.HTTP_200_OK
-        results = response.data["results"]
-        assert len(results) == 1
-        assert results[0]["page"] == 1
-
-    def test_list_returns_empty_when_no_bookmarks(
-        self, auth_client: APIClient
-    ):
-        response = auth_client.get(self.url)
-        assert response.status_code == status.HTTP_200_OK
-        assert response.data["count"] == 0
-
-    def test_list_orders_by_newest_first(
-        self, auth_client: APIClient, user: User, book: Book
-    ):
-        b1 = Bookmark.objects.create(user=user, book=book, page=1)
-        b2 = Bookmark.objects.create(user=user, book=book, page=2)
-        response = auth_client.get(self.url)
-        results = response.data["results"]
-        assert results[0]["page"] == 2
-        assert results[1]["page"] == 1
-
-    def test_list_includes_book_title(
-        self, auth_client: APIClient, bookmark: Bookmark
-    ):
-        response = auth_client.get(self.url)
-        assert response.status_code == status.HTTP_200_OK
-        assert response.data["results"][0]["book_title"] == "Test Book"
-
-
-class TestBookmarkCreate:
-    url = reverse("bookmark-list")
-
-    def test_create_bookmark(self, auth_client: APIClient, book: Book):
-        data = {"book": str(book.id), "page": 10, "location_text": "key insight"}
-        response = auth_client.post(self.url, data, format="json")
-        assert response.status_code == status.HTTP_201_CREATED
-        assert response.data["page"] == 10
-
-    def test_create_bookmark_without_location_text(
-        self, auth_client: APIClient, book: Book
-    ):
-        data = {"book": str(book.id), "page": 5}
-        response = auth_client.post(self.url, data, format="json")
-        assert response.status_code == status.HTTP_201_CREATED
-        assert response.data["page"] == 5
-
-    def test_duplicate_bookmark_page_is_rejected(
-        self, auth_client: APIClient, bookmark: Bookmark
-    ):
-        data = {"book": str(bookmark.book.id), "page": bookmark.page}
-        response = auth_client.post(self.url, data, format="json")
-        assert response.status_code == status.HTTP_400_BAD_REQUEST
-
-    def test_unauthenticated_user_cannot_create(
-        self, api_client: APIClient, book: Book
-    ):
-        data = {"book": str(book.id), "page": 10}
-        response = api_client.post(self.url, data, format="json")
-        assert response.status_code == status.HTTP_401_UNAUTHORIZED
-
-    def test_invalid_page_rejected(
-        self, auth_client: APIClient, book: Book
-    ):
-        data = {"book": str(book.id), "page": 0}
-        response = auth_client.post(self.url, data, format="json")
-        assert response.status_code == status.HTTP_400_BAD_REQUEST
-
-
-class TestBookmarkDetail:
-    def test_get_bookmark(
-        self, auth_client: APIClient, bookmark: Bookmark
-    ):
-        url = reverse("bookmark-detail", args=[str(bookmark.id)])
-        response = auth_client.get(url)
-        assert response.status_code == status.HTTP_200_OK
-        assert response.data["page"] == bookmark.page
-
-    def test_cannot_access_other_users_bookmark(
-        self, api_client: APIClient, other_user: User, bookmark: Bookmark
-    ):
-        api_client.force_authenticate(user=other_user)
-        url = reverse("bookmark-detail", args=[str(bookmark.id)])
-        response = api_client.get(url)
-        assert response.status_code == status.HTTP_404_NOT_FOUND
-
-
-class TestBookmarkDelete:
-    def test_delete_bookmark(
-        self, auth_client: APIClient, bookmark: Bookmark
-    ):
-        url = reverse("bookmark-detail", args=[str(bookmark.id)])
-        response = auth_client.delete(url)
-        assert response.status_code == status.HTTP_204_NO_CONTENT
-        assert Bookmark.objects.count() == 0
-
-    def test_cannot_delete_other_users_bookmark(
-        self, api_client: APIClient, other_user: User, bookmark: Bookmark
-    ):
-        api_client.force_authenticate(user=other_user)
-        url = reverse("bookmark-detail", args=[str(bookmark.id)])
-        response = api_client.delete(url)
-        assert response.status_code == status.HTTP_404_NOT_FOUND
-
-
-class TestBookmarkFilterByBook:
-    def test_filter_by_book(
-        self, auth_client: APIClient, user: User, book: Book
-    ):
-        other_book = Book.objects.create(title="Other", author="Other")
-        Bookmark.objects.create(user=user, book=book, page=1)
-        Bookmark.objects.create(user=user, book=other_book, page=2)
-
-        url = reverse("bookmark-list")
-        response = auth_client.get(url, {"book": str(book.id)})
-        assert response.status_code == status.HTTP_200_OK
-        assert response.data["count"] == 1
-        assert response.data["results"][0]["page"] == 1
-
-
-# ---------------------------------------------------------------------------
-# Note tests
-# ---------------------------------------------------------------------------
-
-class TestNoteList:
-    url = reverse("note-list")
-
-    def test_unauthenticated_user_cannot_list(self, api_client: APIClient):
-        response = api_client.get(self.url)
-        assert response.status_code == status.HTTP_401_UNAUTHORIZED
-
-    def test_list_returns_user_notes_only(
-        self, auth_client: APIClient, user: User, other_user: User, book: Book
-    ):
-        Note.objects.create(user=user, book=book, page=1, content="My note")
-        Note.objects.create(user=other_user, book=book, page=2, content="Other's note")
-
-        response = auth_client.get(self.url)
-        assert response.status_code == status.HTTP_200_OK
-        results = response.data["results"]
-        assert len(results) == 1
-        assert results[0]["content"] == "My note"
-
-    def test_list_includes_book_title(
-        self, auth_client: APIClient, note: Note
-    ):
-        response = auth_client.get(self.url)
-        assert response.status_code == status.HTTP_200_OK
-        assert response.data["results"][0]["book_title"] == "Test Book"
-
-
-class TestNoteCreate:
-    url = reverse("note-list")
-
-    def test_create_note(self, auth_client: APIClient, book: Book):
-        data = {
-            "book": str(book.id),
-            "page": 20,
-            "location_text": "interesting part",
-            "content": "This is a thoughtful note.",
-        }
-        response = auth_client.post(self.url, data, format="json")
-        assert response.status_code == status.HTTP_201_CREATED
-        assert response.data["content"] == "This is a thoughtful note."
-
-    def test_create_note_without_location_text(
-        self, auth_client: APIClient, book: Book
-    ):
-        data = {"book": str(book.id), "page": 20, "content": "A note."}
-        response = auth_client.post(self.url, data, format="json")
-        assert response.status_code == status.HTTP_201_CREATED
-
-    def test_empty_content_rejected(
-        self, auth_client: APIClient, book: Book
-    ):
-        data = {"book": str(book.id), "page": 20, "content": "   "}
-        response = auth_client.post(self.url, data, format="json")
-        assert response.status_code == status.HTTP_400_BAD_REQUEST
-
-    def test_unauthenticated_user_cannot_create(
-        self, api_client: APIClient, book: Book
-    ):
-        data = {"book": str(book.id), "page": 20, "content": "Note"}
-        response = api_client.post(self.url, data, format="json")
-        assert response.status_code == status.HTTP_401_UNAUTHORIZED
-
-
-class TestNoteUpdate:
-    def test_update_note_content(
-        self, auth_client: APIClient, note: Note
-    ):
-        url = reverse("note-detail", args=[str(note.id)])
-        data = {"content": "Updated note content."}
-        response = auth_client.patch(url, data, format="json")
-        assert response.status_code == status.HTTP_200_OK
-        assert response.data["content"] == "Updated note content."
-
-    def test_cannot_update_other_users_note(
-        self, api_client: APIClient, other_user: User, note: Note
-    ):
-        api_client.force_authenticate(user=other_user)
-        url = reverse("note-detail", args=[str(note.id)])
-        data = {"content": "Hacked!"}
-        response = api_client.patch(url, data, format="json")
-        assert response.status_code == status.HTTP_404_NOT_FOUND
-
-
-class TestNoteDelete:
-    def test_delete_note(self, auth_client: APIClient, note: Note):
-        url = reverse("note-detail", args=[str(note.id)])
-        response = auth_client.delete(url)
-        assert response.status_code == status.HTTP_204_NO_CONTENT
-        assert Note.objects.count() == 0
-
-    def test_batch_delete_notes(
-        self, auth_client: APIClient, user: User, book: Book
-    ):
-        n1 = Note.objects.create(user=user, book=book, page=1, content="A")
-        n2 = Note.objects.create(user=user, book=book, page=2, content="B")
-        url = reverse("note-batch-delete")
-        response = auth_client.delete(url, {"ids": [str(n1.id), str(n2.id)]}, format="json")
-        assert response.status_code == status.HTTP_200_OK
-        assert response.data["deleted"] == 2
-
-
-class TestNoteFilterByBook:
-    def test_filter_by_book(
-        self, auth_client: APIClient, user: User, book: Book
-    ):
-        other_book = Book.objects.create(title="Other", author="Other")
-        Note.objects.create(user=user, book=book, page=1, content="In book")
-        Note.objects.create(user=user, book=other_book, page=2, content="In other")
-
-        url = reverse("note-list")
-        response = auth_client.get(url, {"book": str(book.id)})
-        assert response.status_code == status.HTTP_200_OK
-        assert response.data["count"] == 1
-        assert response.data["results"][0]["content"] == "In book"

backend/apps/annotations/urls.py

@@ -1,12 +0,0 @@
-from django.urls import include, path
-from rest_framework.routers import DefaultRouter
-
-from apps.annotations.views import BookmarkViewSet, NoteViewSet
-
-router = DefaultRouter()
-router.register(r"bookmarks", BookmarkViewSet, basename="bookmark")
-router.register(r"notes", NoteViewSet, basename="note")
-
-urlpatterns = [
-    path("", include(router.urls)),
-]

backend/apps/annotations/views.py

@@ -1,93 +0,0 @@
-from django_filters.rest_framework import DjangoFilterBackend
-from rest_framework import status, viewsets
-from rest_framework.decorators import action
-from rest_framework.filters import OrderingFilter, SearchFilter
-from rest_framework.permissions import IsAuthenticated
-from rest_framework.response import Response
-
-from apps.annotations.models import Bookmark, Note
-from apps.annotations.permissions import IsOwner
-from apps.annotations.serializers import (
-    BookmarkCreateSerializer,
-    BookmarkSerializer,
-    NoteCreateSerializer,
-    NoteSerializer,
-)
-
-
-class BookmarkViewSet(viewsets.ModelViewSet):
-    """CRUD for user bookmarks. Users can only manage their own bookmarks."""
-
-    permission_classes = [IsAuthenticated, IsOwner]
-    filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
-    filterset_fields = ["book"]
-    search_fields = ["location_text"]
-    ordering_fields = ["created_at", "page"]
-    ordering = ["-created_at"]
-
-    def get_serializer_class(self):
-        if self.action == "create":
-            return BookmarkCreateSerializer
-        return BookmarkSerializer
-
-    def get_queryset(self):
-        return Bookmark.objects.filter(user=self.request.user).select_related(
-            "book"
-        )
-
-    def perform_create(self, serializer):
-        serializer.save(user=self.request.user)
-
-    @action(detail=False, methods=["delete"], url_path="batch-delete")
-    def batch_delete(self, request):
-        """Delete multiple bookmarks by id list."""
-        ids = request.data.get("ids", [])
-        if not ids:
-            return Response(
-                {"detail": "No ids provided."}, status=status.HTTP_400_BAD_REQUEST
-            )
-        deleted, _ = Bookmark.objects.filter(
-            id__in=ids, user=request.user
-        ).delete()
-        return Response(
-            {"deleted": deleted}, status=status.HTTP_200_OK
-        )
-
-
-class NoteViewSet(viewsets.ModelViewSet):
-    """CRUD for user notes. Users can only manage their own notes."""
-
-    permission_classes = [IsAuthenticated, IsOwner]
-    filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
-    filterset_fields = ["book"]
-    search_fields = ["content", "location_text"]
-    ordering_fields = ["created_at", "page"]
-    ordering = ["-created_at"]
-
-    def get_serializer_class(self):
-        if self.action == "create":
-            return NoteCreateSerializer
-        return NoteSerializer
-
-    def get_queryset(self):
-        return Note.objects.filter(user=self.request.user).select_related(
-            "book"
-        )
-
-    def perform_create(self, serializer):
-        serializer.save(user=self.request.user)
-
-    @action(detail=False, methods=["delete"], url_path="batch-delete")
-    def batch_delete(self, request):
-        """Delete multiple notes by id list."""
-        ids = request.data.get("ids", [])
-        if not ids:
-            return Response(
-                {"detail": "No ids provided."}, status=status.HTTP_400_BAD_REQUEST
-            )
-        deleted, _ = Note.objects.filter(
-            id__in=ids, user=request.user
-        ).delete()
-        return Response(
-            {"deleted": deleted}, status=status.HTTP_200_OK
-        )

backend/apps/books/admin.py

@@ -1,9 +0,0 @@
-from django.contrib import admin
-
-from apps.books.models import Book
-
-
-@admin.register(Book)
-class BookAdmin(admin.ModelAdmin):
-    list_display = ("title", "author", "total_pages", "created_at")
-    search_fields = ("title", "author")

backend/apps/books/apps.py

@@ -1,7 +0,0 @@
-from django.apps import AppConfig
-
-
-class BooksConfig(AppConfig):
-    default_auto_field = "django.db.models.BigAutoField"
-    name = "apps.books"
-    label = "books"

backend/apps/books/migrations/0001_initial.py

@@ -1,96 +0,0 @@
-# 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')},
-        ),
-    ]

backend/apps/books/models.py

@@ -1,109 +0,0 @@
-from django.conf import settings
-from django.db import models
-from django.db.models.signals import post_delete
-from django.dispatch import receiver
-from pathlib import Path
-
-
-class ReadingStatus(models.TextChoices):
-    WANT_TO_READ = "want_to_read", "Want to Read"
-    READING = "reading", "Reading"
-    FINISHED = "finished", "Finished"
-    DNF = "dnf", "Did Not Finish"
-
-
-class FontStyle(models.TextChoices):
-    SANS_SERIF = "sans-serif", "Sans Serif"
-    SERIF = "serif", "Serif"
-    MONOSPACE = "monospace", "Monospace"
-
-
-class BackgroundColor(models.TextChoices):
-    WHITE = "#ffffff", "White"
-    SEPIA = "#f4e4c1", "Sepia"
-    DARK = "#1a1a2e", "Dark"
-    GREEN = "#c7edcc", "Green"
-
-
-class Book(models.Model):
-    title = models.CharField(max_length=512, db_index=True)
-    author = models.CharField(max_length=256, blank=True, default="", db_index=True)
-    genre = models.CharField(max_length=128, blank=True, default="", db_index=True)
-    description = models.TextField(blank=True, default="")
-    reading_status = models.CharField(max_length=20, choices=ReadingStatus.choices, default=ReadingStatus.WANT_TO_READ, db_index=True)
-    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)
-
-    class Meta:
-        db_table = "books_book"
-        verbose_name = "Book"
-        verbose_name_plural = "Books"
-        ordering = ["title"]
-        indexes = [models.Index(fields=["title", "author", "genre"])]
-
-    def __str__(self):
-        return self.title
-
-
-class EBook(models.Model):
-    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="ebooks")
-    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)
-    updated_at = models.DateTimeField(auto_now=True)
-
-    class Meta:
-        db_table = "books_ebook"
-        verbose_name = "E-Book"
-        verbose_name_plural = "E-Books"
-        ordering = ["-created_at"]
-        indexes = [models.Index(fields=["user", "-created_at"])]
-
-    def __str__(self):
-        return self.title
-
-    def filename(self):
-        return Path(self.file.name).name if self.file else ""
-
-
-@receiver(post_delete, sender=EBook)
-def _auto_delete_ebook_file(sender, instance, **kwargs):
-    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")
-    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)
-    updated_at = models.DateTimeField(auto_now=True)
-
-    class Meta:
-        db_table = "books_reading_progress"
-        verbose_name_plural = "reading progress"
-        unique_together = [("user", "ebook")]
-
-    def __str__(self):
-        return f"{self.ebook.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_style = models.CharField(max_length=20, choices=FontStyle.choices, default=FontStyle.SANS_SERIF.value)
-    background_color = models.CharField(max_length=7, choices=BackgroundColor.choices, default=BackgroundColor.WHITE.value)
-    updated_at = models.DateTimeField(auto_now=True)
-
-    class Meta:
-        db_table = "books_reading_settings"
-        verbose_name_plural = "reading settings"
-
-    def __str__(self):
-        return f"Settings for {self.user}"

backend/apps/books/serializers.py

@@ -1,120 +0,0 @@
-from rest_framework import serializers
-
-from apps.books.models import Book, EBook, FontStyle, BackgroundColor, ReadingProgress, ReadingSettings, ReadingStatus
-
-
-class BookListSerializer(serializers.ModelSerializer):
-    reading_status_display = serializers.CharField(source="get_reading_status_display", read_only=True)
-
-    class Meta:
-        model = Book
-        fields = ["id", "title", "author", "genre", "reading_status", "reading_status_display", "cover_image"]
-
-
-class BookDetailSerializer(serializers.ModelSerializer):
-    reading_status_display = serializers.CharField(source="get_reading_status_display", read_only=True)
-
-    class Meta:
-        model = Book
-        fields = ["id", "title", "author", "genre", "description", "reading_status", "reading_status_display", "cover_image", "total_pages", "created_at", "updated_at"]
-        read_only_fields = ["id", "created_at", "updated_at"]
-
-
-class BookSerializer(serializers.ModelSerializer):
-    class Meta:
-        model = Book
-        fields = ["id", "title", "author", "genre", "description", "reading_status", "cover_image", "total_pages", "created_at", "updated_at"]
-        read_only_fields = ["id", "created_at", "updated_at"]
-
-
-class EBookListSerializer(serializers.ModelSerializer):
-    filename = serializers.CharField(read_only=True)
-    progress = serializers.SerializerMethodField()
-
-    class Meta:
-        model = EBook
-        fields = ["id", "title", "author", "filename", "cover_image", "created_at", "progress"]
-
-    def get_progress(self, obj):
-        try:
-            return obj.reading_progress.current_position
-        except ReadingProgress.DoesNotExist:
-            return None
-
-
-class EBookDetailSerializer(serializers.ModelSerializer):
-    filename = serializers.CharField(read_only=True)
-    file_url = serializers.SerializerMethodField()
-    progress = serializers.SerializerMethodField()
-
-    class Meta:
-        model = EBook
-        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")
-        if request and obj.file:
-            return request.build_absolute_uri(obj.file.url)
-        return ""
-
-    def get_progress(self, obj):
-        try:
-            rp = obj.reading_progress
-            return {"current_position": rp.current_position, "last_page": rp.last_page}
-        except ReadingProgress.DoesNotExist:
-            return None
-
-
-class EBookUploadSerializer(serializers.ModelSerializer):
-    class Meta:
-        model = EBook
-        fields = ["title", "author", "file", "cover_image"]
-        extra_kwargs = {"title": {"required": True}, "file": {"required": True}}
-
-    def validate_file(self, value):
-        import os
-        if value is 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):
-        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):
-        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):
-        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):
-        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):
-        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

backend/apps/books/tests.py

@@ -1,255 +0,0 @@
-"""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)

backend/apps/books/urls.py

@@ -1,16 +0,0 @@
-from django.urls import include, path
-from rest_framework.routers import DefaultRouter
-
-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"),
-]

backend/apps/books/views.py

@@ -1,240 +0,0 @@
-from __future__ import annotations
-
-import logging
-from typing import Any
-
-from django.db.models import QuerySet, Q
-from django_filters.rest_framework import DjangoFilterBackend
-from rest_framework import parsers, permissions, status, viewsets
-from rest_framework.decorators import action
-from rest_framework.filters import OrderingFilter, SearchFilter
-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, EBook, ReadingProgress, ReadingSettings
-from apps.books.serializers import (
-    BookDetailSerializer, BookListSerializer, BookSerializer,
-    BookChapterSerializer, EBookContentSerializer, EBookDetailSerializer,
-    EBookListSerializer, EBookTocSerializer, EBookUploadSerializer,
-    ReadingProgressSerializer, ReadingSettingsSerializer,
-)
-
-logger = logging.getLogger(__name__)
-
-
-class BookViewSet(viewsets.ModelViewSet):
-    queryset = Book.objects.all()
-    permission_classes = [IsAuthenticated]
-    filter_backends = [DjangoFilterBackend, SearchFilter, OrderingFilter]
-    filterset_fields = ["author", "genre", "reading_status"]
-    search_fields = ["title", "author", "genre"]
-    ordering_fields = ["title", "author", "genre", "created_at"]
-    ordering = ["title"]
-
-    def get_serializer_class(self):
-        if self.action == "retrieve":
-            return BookDetailSerializer
-        if self.action == "list":
-            return BookListSerializer
-        return BookSerializer
-
-    def get_queryset(self) -> QuerySet[Book]:
-        qs = super().get_queryset()
-        query = self.request.query_params.get("q", "").strip()
-        if query:
-            qs = qs.filter(Q(title__icontains=query) | Q(author__icontains=query) | Q(genre__icontains=query))
-        return qs
-
-    @action(detail=False, methods=["get"], permission_classes=[AllowAny])
-    def genres(self, request: Request) -> Response:
-        genre_list = Book.objects.values_list("genre", flat=True).distinct().order_by("genre")
-        return Response([g for g in genre_list if g])
-
-    @action(detail=False, methods=["get"], permission_classes=[AllowAny])
-    def authors(self, request: Request) -> Response:
-        author_list = Book.objects.values_list("author", flat=True).distinct().order_by("author")
-        return Response([a for a in author_list if a])
-
-
-class IsEBookOwner(permissions.BasePermission):
-    def has_object_permission(self, request: Request, view: object, obj: EBook) -> bool:
-        return obj.user == request.user
-
-
-class EBookViewSet(viewsets.ModelViewSet):
-    parser_classes = [parsers.MultiPartParser, parsers.FormParser, parsers.JSONParser]
-    permission_classes = [IsAuthenticated, IsEBookOwner]
-
-    def get_serializer_class(self):
-        if self.action == "create":
-            return EBookUploadSerializer
-        if self.action in ("list",):
-            return EBookListSerializer
-        if self.action in ("toc",):
-            return BookChapterSerializer
-        return EBookDetailSerializer
-
-    def get_queryset(self):
-        return EBook.objects.filter(user=self.request.user).select_related("reading_progress", "user")
-
-    @action(detail=True, methods=["get", "patch"])
-    def progress(self, request: Request, pk: int | None = None) -> Response:
-        ebook = self.get_object()
-        progress_obj, _created = ReadingProgress.objects.get_or_create(user=request.user, ebook=ebook)
-        if request.method == "GET":
-            serializer = ReadingProgressSerializer(progress_obj)
-            return Response(serializer.data)
-        serializer = ReadingProgressSerializer(progress_obj, data=request.data, partial=True)
-        serializer.is_valid(raise_exception=True)
-        serializer.save()
-        return Response(serializer.data)
-
-    @action(detail=True, methods=["post"])
-    def process(self, request: Request, pk: int | None = None) -> Response:
-        """Trigger e-book processing: metadata extraction, TOC building, page counting."""
-        ebook = self.get_object()
-        if not ebook.file:
-            return Response({"error": "No file found for this e-book."}, status=status.HTTP_400_BAD_REQUEST)
-
-        try:
-            from apps.books.services import process_ebook
-
-            file_path = ebook.file.path
-            result = process_ebook(file_path, original_filename=ebook.filename())
-
-            # Update ebook with extracted data
-            ebook.format = result.get("format", ebook.format)
-            ebook.page_count = result.get("page_count", 0)
-            ebook.metadata_json = result.get("metadata", {})
-            ebook.save(update_fields=["format", "page_count", "metadata_json", "updated_at"])
-
-            # Store chapters in DB
-            raw_toc: list[dict[str, Any]] = result.get("toc", [])
-            BookChapter.objects.filter(ebook=ebook).delete()
-            _store_chapters(ebook, raw_toc)
-
-            return Response({
-                "format": ebook.format,
-                "page_count": ebook.page_count,
-                "metadata": ebook.metadata_json,
-                "toc_count": len(raw_toc),
-                "status": "processed",
-            })
-        except Exception as exc:
-            logger.exception("Failed to process ebook %s", ebook.id)
-            return Response({"error": f"Processing failed: {exc}"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
-
-    @action(detail=True, methods=["get"])
-    def toc(self, request: Request, pk: int | None = None) -> Response:
-        """Return hierarchical table of contents."""
-        ebook = self.get_object()
-        chapters = BookChapter.objects.filter(ebook=ebook).order_by("index").select_related("ebook")
-        serializer = BookChapterSerializer(chapters, many=True)
-        return Response({
-            "chapters": serializer.data,
-            "format": ebook.format,
-            "page_count": ebook.page_count,
-        })
-
-    @action(detail=True, methods=["get"])
-    def content(self, request: Request, pk: int | None = None) -> Response:
-        """Return paginated content for a given page number.
-
-        Query params:
-            page (int): page/chapter index to fetch (1-indexed, default: 1)
-        """
-        ebook = self.get_object()
-        page = max(1, int(request.query_params.get("page", 1)))
-
-        chapters = list(BookChapter.objects.filter(ebook=ebook).order_by("index").select_related("ebook"))
-        total_pages = len(chapters) or ebook.page_count or 1
-
-        chapter: BookChapter | None = None
-        chapter_title = ""
-        content_html = ""
-
-        if chapters and 0 <= page - 1 < len(chapters):
-            ch = chapters[page - 1]
-            chapter_title = ch.title
-            content_html = _fetch_chapter_content(ebook, ch)
-
-        serializer = EBookContentSerializer(data={
-            "page": page,
-            "total_pages": total_pages,
-            "content": content_html,
-            "chapter_title": chapter_title,
-            "format": ebook.format,
-        })
-        serializer.is_valid(raise_exception=True)
-        return Response(serializer.data)
-
-
-def _store_chapters(ebook: EBook, toc: list[dict[str, Any]], parent_index: int = 0) -> None:
-    """Recursively store TOC entries as BookChapter records."""
-    for idx, entry in enumerate(toc):
-        BookChapter.objects.create(
-            ebook=ebook,
-            title=entry.get("title", "Untitled"),
-            index=parent_index + idx,
-            href=entry.get("href", ""),
-            children=entry.get("children", []),
-        )
-        children = entry.get("children", [])
-        if children:
-            _store_chapters(ebook, children, parent_index + idx + 1)
-
-
-def _fetch_chapter_content(ebook: EBook, chapter: BookChapter) -> str:
-    """Fetch HTML content for a chapter from the e-book file."""
-    if ebook.format == "epub":
-        return _fetch_epub_chapter_content(ebook.file.path, chapter)
-    return ""
-
-
-def _fetch_epub_chapter_content(file_path: str, chapter: BookChapter) -> str:
-    """Extract HTML content of a specific EPUB chapter by href."""
-    try:
-        from ebooklib import epub
-        from bs4 import BeautifulSoup
-    except ImportError:
-        return ""
-
-    try:
-        book = epub.read_epub(file_path)
-        href = chapter.href or ""
-        # Find the item by href
-        for item in book.get_items():
-            item_name = item.get_name() or ""
-            if href and (item_name.endswith(href) or href.endswith(item_name)):
-                content = item.get_content()
-                soup = BeautifulSoup(content, "html.parser")
-                # Clean up — remove body/html/head wrappers, keep inner content
-                body = soup.find("body")
-                if body:
-                    return str(body)
-                return str(soup)
-        return ""
-    except Exception:
-        logger.exception("Failed to fetch EPUB chapter content for %s", chapter.href)
-        return ""
-
-
-class ReadingSettingsViewSet(viewsets.GenericViewSet):
-    permission_classes = [IsAuthenticated]
-    serializer_class = ReadingSettingsSerializer
-
-    def get_queryset(self):
-        return ReadingSettings.objects.filter(user=self.request.user)
-
-    def list(self, request: Request) -> Response:
-        settings_obj, _created = ReadingSettings.objects.get_or_create(user=request.user)
-        serializer = self.get_serializer(settings_obj)
-        return Response(serializer.data)
-
-    def partial_update(self, request: Request) -> Response:
-        settings_obj, _created = ReadingSettings.objects.get_or_create(user=request.user)
-        serializer = self.get_serializer(settings_obj, data=request.data, partial=True)
-        serializer.is_valid(raise_exception=True)
-        serializer.save()
-        return Response(serializer.data)

backend/apps/collections/admin.py

@@ -0,0 +1,10 @@
+from django.contrib import admin
+
+from .models import Collection
+
+
+@admin.register(Collection)
+class CollectionAdmin(admin.ModelAdmin):
+    list_display = ["name", "owner", "document_count", "is_public", "created_at"]
+    list_filter = ["is_public"]
+    search_fields = ["name", "description"]

backend/apps/collections/models.py

@@ -0,0 +1,39 @@
+from django.conf import settings
+from django.db import models
+
+
+class Collection(models.Model):
+    """A user-created collection of documents."""
+    name = models.CharField(max_length=300)
+    description = models.TextField(blank=True, default="")
+    cover = models.ImageField(upload_to="collection_covers/", blank=True, null=True)
+    documents = models.ManyToManyField(
+        "documents.Document",
+        related_name="collections",
+        blank=True,
+    )
+    is_public = models.BooleanField(default=False)
+    owner = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="collections",
+    )
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        db_table = "collections_collection"
+        ordering = ["-updated_at"]
+
+    def __str__(self) -> str:
+        return self.name
+
+    @property
+    def document_count(self) -> int:
+        return self.documents.count()
+
+    @property
+    def cover_url(self) -> str | None:
+        if self.cover:
+            return self.cover.url
+        return None

backend/apps/collections/serializers.py

@@ -0,0 +1,33 @@
+from rest_framework import serializers
+
+from .models import Collection
+
+
+class CollectionSerializer(serializers.ModelSerializer[Collection]):
+    cover_url = serializers.SerializerMethodField()
+    document_count = serializers.IntegerField(read_only=True)
+
+    class Meta:
+        model = Collection
+        fields = [
+            "id", "name", "description", "cover_url", "document_count",
+            "is_public", "created_at", "updated_at",
+        ]
+        read_only_fields = ["id", "document_count", "created_at", "updated_at"]
+
+    def get_cover_url(self, obj: Collection) -> str | None:
+        return obj.cover_url
+
+
+class CollectionDetailSerializer(CollectionSerializer):
+    documents = serializers.PrimaryKeyRelatedField(many=True, read_only=True)
+
+    class Meta(CollectionSerializer.Meta):
+        fields = CollectionSerializer.Meta.fields + ["documents", "owner"]
+
+
+class CollectionDocumentActionSerializer(serializers.Serializer):
+    document_ids = serializers.ListField(
+        child=serializers.IntegerField(),
+        allow_empty=False,
+    )

backend/apps/collections/urls.py

@@ -0,0 +1,13 @@
+from django.urls import include, path
+from rest_framework.routers import DefaultRouter
+
+from . import views
+
+router = DefaultRouter()
+router.register("", views.CollectionViewSet, basename="collection")
+
+app_name = "collections"
+
+urlpatterns = [
+    path("", include(router.urls)),
+]

backend/apps/collections/views.py

@@ -0,0 +1,50 @@
+from rest_framework import permissions, status, viewsets
+from rest_framework.decorators import action
+from rest_framework.response import Response
+
+from apps.documents.models import Document
+
+from .models import Collection
+from .serializers import (
+    CollectionDetailSerializer,
+    CollectionDocumentActionSerializer,
+    CollectionSerializer,
+)
+
+
+class CollectionViewSet(viewsets.ModelViewSet):
+    """CRUD for user collections."""
+    permission_classes = [permissions.IsAuthenticated]
+
+    def get_serializer_class(self):
+        if self.action in ("retrieve", "update", "partial_update"):
+            return CollectionDetailSerializer
+        return CollectionSerializer
+
+    def get_queryset(self):
+        return Collection.objects.filter(owner=self.request.user).prefetch_related("documents")
+
+    def perform_create(self, serializer):
+        serializer.save(owner=self.request.user)
+
+    @action(detail=True, methods=["post"])
+    def add_documents(self, request, pk=None):
+        """Add documents to a collection."""
+        collection = self.get_object()
+        serializer = CollectionDocumentActionSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+        docs = Document.objects.filter(
+            id__in=serializer.validated_data["document_ids"],
+            owner=request.user,
+        )
+        collection.documents.add(*docs)
+        return Response({"detail": f"Added {docs.count()} document(s)."}, status=status.HTTP_200_OK)
+
+    @action(detail=True, methods=["post"])
+    def remove_documents(self, request, pk=None):
+        """Remove documents from a collection."""
+        collection = self.get_object()
+        serializer = CollectionDocumentActionSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+        collection.documents.remove(*serializer.validated_data["document_ids"])
+        return Response({"detail": "Documents removed."}, status=status.HTTP_200_OK)

backend/apps/documents/admin.py

@@ -0,0 +1,11 @@
+from django.contrib import admin
+
+from .models import Document
+
+
+@admin.register(Document)
+class DocumentAdmin(admin.ModelAdmin):
+    list_display = ["title", "author", "file_type", "file_size", "is_public", "owner", "uploaded_at"]
+    list_filter = ["file_type", "is_public"]
+    search_fields = ["title", "author", "description"]
+    date_hierarchy = "uploaded_at"

backend/apps/documents/models.py

@@ -0,0 +1,48 @@
+from django.conf import settings
+from django.db import models
+
+
+class Document(models.Model):
+    """A digital document (ebook, PDF, etc.) uploaded by a user."""
+
+    class FileType(models.TextChoices):
+        PDF = "pdf", "PDF"
+        EPUB = "epub", "EPUB"
+        MOBI = "mobi", "MOBI"
+        TXT = "txt", "Plain Text"
+        DOCX = "docx", "Word Document"
+
+    title = models.CharField(max_length=500)
+    author = models.CharField(max_length=300, blank=True, null=True)
+    description = models.TextField(blank=True, default="")
+    cover = models.ImageField(upload_to="covers/", blank=True, null=True)
+    file = models.FileField(upload_to="documents/")
+    file_type = models.CharField(max_length=10, choices=FileType.choices)
+    file_size = models.PositiveIntegerField(help_text="File size in bytes")
+    page_count = models.PositiveIntegerField(blank=True, null=True)
+    tags = models.JSONField(default=list, blank=True)
+    is_public = models.BooleanField(default=False)
+    owner = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="documents",
+    )
+    uploaded_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        db_table = "documents_document"
+        ordering = ["-uploaded_at"]
+        indexes = [
+            models.Index(fields=["owner", "-uploaded_at"]),
+            models.Index(fields=["file_type"]),
+        ]
+
+    def __str__(self) -> str:
+        return self.title
+
+    @property
+    def cover_url(self) -> str | None:
+        if self.cover:
+            return self.cover.url
+        return None

backend/apps/documents/serializers.py

@@ -0,0 +1,41 @@
+from rest_framework import serializers
+
+from .models import Document
+
+
+class DocumentListSerializer(serializers.ModelSerializer[Document]):
+    cover_url = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Document
+        fields = [
+            "id", "title", "author", "cover_url", "description",
+            "file_type", "file_size", "page_count", "tags",
+            "is_public", "uploaded_at", "updated_at",
+        ]
+        read_only_fields = ["id", "uploaded_at", "updated_at"]
+
+    def get_cover_url(self, obj: Document) -> str | None:
+        return obj.cover_url
+
+
+class DocumentDetailSerializer(DocumentListSerializer):
+    owner = serializers.PrimaryKeyRelatedField(read_only=True)
+
+    class Meta(DocumentListSerializer.Meta):
+        fields = DocumentListSerializer.Meta.fields + ["owner", "file"]
+
+
+class DocumentUploadSerializer(serializers.ModelSerializer[Document]):
+    class Meta:
+        model = Document
+        fields = [
+            "title", "author", "description", "cover", "file",
+            "file_type", "file_size", "page_count", "tags", "is_public",
+        ]
+
+    def validate_file_size(self, value: int) -> int:
+        max_size = 100 * 1024 * 1024  # 100 MB
+        if value > max_size:
+            raise serializers.ValidationError("File size must not exceed 100 MB.")
+        return value

backend/apps/documents/urls.py

@@ -0,0 +1,13 @@
+from django.urls import include, path
+from rest_framework.routers import DefaultRouter
+
+from . import views
+
+router = DefaultRouter()
+router.register("", views.DocumentViewSet, basename="document")
+
+app_name = "documents"
+
+urlpatterns = [
+    path("", include(router.urls)),
+]

backend/apps/documents/views.py

@@ -0,0 +1,35 @@
+from rest_framework import permissions, viewsets
+
+from .models import Document
+from .serializers import DocumentDetailSerializer, DocumentListSerializer, DocumentUploadSerializer
+
+
+class IsOwnerOrPublic(permissions.BasePermission):
+    """Allow access if user is owner or the document is public."""
+
+    def has_object_permission(self, request, view, obj: Document) -> bool:
+        if request.method in permissions.SAFE_METHODS:
+            return obj.is_public or obj.owner == request.user
+        return obj.owner == request.user
+
+
+class DocumentViewSet(viewsets.ModelViewSet):
+    """CRUD for documents with owner-scoping."""
+    permission_classes = [permissions.IsAuthenticated, IsOwnerOrPublic]
+
+    def get_serializer_class(self):
+        if self.action == "create":
+            return DocumentUploadSerializer
+        if self.action in ("retrieve", "update", "partial_update"):
+            return DocumentDetailSerializer
+        return DocumentListSerializer
+
+    def get_queryset(self):
+        user = self.request.user
+        qs = Document.objects.select_related("owner")
+        if self.action == "list":
+            return qs.filter(owner=user) | qs.filter(is_public=True)
+        return qs
+
+    def perform_create(self, serializer):
+        serializer.save(owner=self.request.user)

backend/apps/reading/admin.py

@@ -0,0 +1,21 @@
+from django.contrib import admin
+
+from .models import Bookmark, Highlight, ReadingProgress
+
+
+@admin.register(Bookmark)
+class BookmarkAdmin(admin.ModelAdmin):
+    list_display = ["document", "user", "page", "label", "created_at"]
+    list_filter = ["created_at"]
+
+
+@admin.register(Highlight)
+class HighlightAdmin(admin.ModelAdmin):
+    list_display = ["document", "user", "page", "color", "created_at"]
+    list_filter = ["color", "created_at"]
+
+
+@admin.register(ReadingProgress)
+class ReadingProgressAdmin(admin.ModelAdmin):
+    list_display = ["document", "user", "percentage", "last_read_at"]
+    date_hierarchy = "last_read_at"

backend/apps/reading/models.py

@@ -0,0 +1,84 @@
+from django.conf import settings
+from django.db import models
+
+
+class Bookmark(models.Model):
+    """A user bookmark at a specific page in a document."""
+    document = models.ForeignKey(
+        "documents.Document",
+        on_delete=models.CASCADE,
+        related_name="bookmarks",
+    )
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="bookmarks",
+    )
+    page = models.PositiveIntegerField()
+    label = models.CharField(max_length=300, blank=True, default="")
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    class Meta:
+        db_table = "reading_bookmark"
+        ordering = ["page"]
+        unique_together = [["document", "user", "page"]]
+
+    def __str__(self) -> str:
+        return f"{self.document.title} p.{self.page}"
+
+
+class Highlight(models.Model):
+    """A highlighted passage in a document."""
+    document = models.ForeignKey(
+        "documents.Document",
+        on_delete=models.CASCADE,
+        related_name="highlights",
+    )
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="highlights",
+    )
+    page = models.PositiveIntegerField()
+    color = models.CharField(max_length=20, default="yellow")
+    text = models.TextField()
+    note = models.TextField(blank=True, null=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    class Meta:
+        db_table = "reading_highlight"
+        ordering = ["-created_at"]
+
+    def __str__(self) -> str:
+        return f"Highlight on {self.document.title} p.{self.page}"
+
+
+class ReadingProgress(models.Model):
+    """Tracks the user's reading progress through a document."""
+    document = models.ForeignKey(
+        "documents.Document",
+        on_delete=models.CASCADE,
+        related_name="reading_progress",
+    )
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="reading_progress",
+    )
+    current_page = models.PositiveIntegerField(default=1)
+    total_pages = models.PositiveIntegerField(default=0)
+    percentage = models.FloatField(default=0.0)
+    last_read_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        db_table = "reading_progress"
+        unique_together = [["document", "user"]]
+        verbose_name_plural = "Reading progress"
+
+    def __str__(self) -> str:
+        return f"{self.document.title} — {self.percentage:.0f}%"
+
+    def save(self, *args, **kwargs):
+        if self.total_pages > 0:
+            self.percentage = round((self.current_page / self.total_pages) * 100, 1)
+        super().save(*args, **kwargs)

backend/apps/reading/serializers.py

@@ -0,0 +1,35 @@
+from rest_framework import serializers
+
+from .models import Bookmark, Highlight, ReadingProgress
+
+
+class BookmarkSerializer(serializers.ModelSerializer[Bookmark]):
+    class Meta:
+        model = Bookmark
+        fields = ["id", "document", "page", "label", "created_at"]
+        read_only_fields = ["id", "created_at"]
+
+
+class HighlightSerializer(serializers.ModelSerializer[Highlight]):
+    class Meta:
+        model = Highlight
+        fields = ["id", "document", "page", "color", "text", "note", "created_at"]
+        read_only_fields = ["id", "created_at"]
+
+
+class ReadingProgressSerializer(serializers.ModelSerializer[ReadingProgress]):
+    class Meta:
+        model = ReadingProgress
+        fields = ["id", "document", "current_page", "total_pages", "percentage", "last_read_at"]
+        read_only_fields = ["id", "percentage", "last_read_at"]
+
+
+class ReadingProgressUpdateSerializer(serializers.ModelSerializer[ReadingProgress]):
+    class Meta:
+        model = ReadingProgress
+        fields = ["current_page", "total_pages"]
+
+    def validate_current_page(self, value: int) -> int:
+        if value < 1:
+            raise serializers.ValidationError("Page must be at least 1.")
+        return value

backend/apps/reading/urls.py

@@ -0,0 +1,15 @@
+from django.urls import include, path
+from rest_framework.routers import DefaultRouter
+
+from . import views
+
+router = DefaultRouter()
+router.register("bookmarks", views.BookmarkViewSet, basename="bookmark")
+router.register("highlights", views.HighlightViewSet, basename="highlight")
+router.register("progress", views.ReadingProgressViewSet, basename="reading-progress")
+
+app_name = "reading"
+
+urlpatterns = [
+    path("", include(router.urls)),
+]

backend/apps/reading/views.py

@@ -0,0 +1,49 @@
+from rest_framework import permissions, viewsets
+
+from .models import Bookmark, Highlight, ReadingProgress
+from .serializers import (
+    BookmarkSerializer,
+    HighlightSerializer,
+    ReadingProgressSerializer,
+    ReadingProgressUpdateSerializer,
+)
+
+
+class BookmarkViewSet(viewsets.ModelViewSet):
+    """User bookmarks for documents."""
+    serializer_class = BookmarkSerializer
+    permission_classes = [permissions.IsAuthenticated]
+
+    def get_queryset(self):
+        return Bookmark.objects.filter(user=self.request.user).select_related("document")
+
+    def perform_create(self, serializer):
+        serializer.save(user=self.request.user)
+
+
+class HighlightViewSet(viewsets.ModelViewSet):
+    """User highlights for documents."""
+    serializer_class = HighlightSerializer
+    permission_classes = [permissions.IsAuthenticated]
+
+    def get_queryset(self):
+        return Highlight.objects.filter(user=self.request.user).select_related("document")
+
+    def perform_create(self, serializer):
+        serializer.save(user=self.request.user)
+
+
+class ReadingProgressViewSet(viewsets.ModelViewSet):
+    """Reading progress tracker."""
+    permission_classes = [permissions.IsAuthenticated]
+
+    def get_serializer_class(self):
+        if self.action in ("create", "update", "partial_update"):
+            return ReadingProgressUpdateSerializer
+        return ReadingProgressSerializer
+
+    def get_queryset(self):
+        return ReadingProgress.objects.filter(user=self.request.user).select_related("document")
+
+    def perform_create(self, serializer):
+        serializer.save(user=self.request.user)

backend/apps/users/admin.py

@@ -1,11 +0,0 @@
-from django.contrib import admin
-from django.contrib.auth.admin import UserAdmin as BaseUserAdmin
-
-from apps.users.models import User
-
-
-@admin.register(User)
-class UserAdmin(BaseUserAdmin):
-    """Admin config for the custom User model."""
-    list_display = ("email", "username", "is_staff", "is_active", "date_joined")
-    search_fields = ("email", "username")

backend/apps/users/apps.py

@@ -1,7 +0,0 @@
-from django.apps import AppConfig
-
-
-class UsersConfig(AppConfig):
-    default_auto_field = "django.db.models.BigAutoField"
-    name = "apps.users"
-    label = "users"

backend/apps/users/models.py

@@ -1,13 +0,0 @@
-from django.contrib.auth.models import AbstractUser
-
-
-class User(AbstractUser):
-    """Custom user model. Uses email as the unique identifier field."""
-
-    class Meta:
-        db_table = "users_user"
-        verbose_name = "User"
-        verbose_name_plural = "Users"
-
-    def __str__(self) -> str:
-        return self.email or self.username

backend/apps/users/urls.py

@@ -1,8 +0,0 @@
-from django.urls import include, path
-from rest_framework.routers import DefaultRouter
-from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
-
-urlpatterns = [
-    path("token/", TokenObtainPairView.as_view(), name="token_obtain_pair"),
-    path("token/refresh/", TokenRefreshView.as_view(), name="token_refresh"),
-]

backend/config/django.py

@@ -1,157 +0,0 @@
-"""
-Django settings for cloud-reader backend.
-
-Generated using Django 5.1.  Customised with pydantic-settings integration.
-"""
-
-from pathlib import Path
-
-from config.settings import settings
-
-# ---------------------------------------------------------------------------
-# Build paths
-# ---------------------------------------------------------------------------
-BASE_DIR = Path(__file__).resolve().parent.parent
-
-# ---------------------------------------------------------------------------
-# Security
-# ---------------------------------------------------------------------------
-SECRET_KEY = settings.DJANGO_SECRET_KEY
-DEBUG = settings.DJANGO_DEBUG
-ALLOWED_HOSTS = settings.DJANGO_ALLOWED_HOSTS
-
-# ---------------------------------------------------------------------------
-# Application definition
-# ---------------------------------------------------------------------------
-INSTALLED_APPS = [
-    # Django built-in
-    "django.contrib.admin",
-    "django.contrib.auth",
-    "django.contrib.contenttypes",
-    "django.contrib.sessions",
-    "django.contrib.messages",
-    "django.contrib.staticfiles",
-    # Third-party
-    "rest_framework",
-    "rest_framework_simplejwt",
-    "corsheaders",
-    "django_filters",
-    # Local apps
-    "apps.users",
-    "apps.books",
-    "apps.annotations",
-]
-
-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 = "config.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 = "config.wsgi.application"
-
-# ---------------------------------------------------------------------------
-# Database
-# ---------------------------------------------------------------------------
-DATABASES = {
-    "default": {
-        "ENGINE": "django.db.backends.postgresql",
-        "NAME": settings.DB_NAME,
-        "USER": settings.DB_USER,
-        "PASSWORD": settings.DB_PASSWORD,
-        "HOST": settings.DB_HOST,
-        "PORT": settings.DB_PORT,
-    }
-}
-
-# ---------------------------------------------------------------------------
-# Auth
-# ---------------------------------------------------------------------------
-AUTH_USER_MODEL = "users.User"
-
-AUTH_PASSWORD_VALIDATORS = [
-    {"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator"},
-    {"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator"},
-]
-
-# ---------------------------------------------------------------------------
-# DRF
-# ---------------------------------------------------------------------------
-REST_FRAMEWORK = {
-    "DEFAULT_AUTHENTICATION_CLASSES": (
-        "rest_framework_simplejwt.authentication.JWTAuthentication",
-    ),
-    "DEFAULT_PERMISSION_CLASSES": (
-        "rest_framework.permissions.IsAuthenticated",
-    ),
-    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
-    "PAGE_SIZE": 50,
-    "DEFAULT_FILTER_BACKENDS": [
-        "django_filters.rest_framework.DjangoFilterBackend",
-        "rest_framework.filters.OrderingFilter",
-        "rest_framework.filters.SearchFilter",
-    ],
-}
-
-# ---------------------------------------------------------------------------
-# SimpleJWT
-# ---------------------------------------------------------------------------
-from datetime import timedelta
-
-SIMPLE_JWT = {
-    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=settings.JWT_ACCESS_TOKEN_LIFETIME_MINUTES),
-    "REFRESH_TOKEN_LIFETIME": timedelta(days=settings.JWT_REFRESH_TOKEN_LIFETIME_DAYS),
-}
-
-# ---------------------------------------------------------------------------
-# CORS
-# ---------------------------------------------------------------------------
-CORS_ALLOWED_ORIGINS = settings.CORS_ALLOWED_ORIGINS
-
-# ---------------------------------------------------------------------------
-# i18n
-# ---------------------------------------------------------------------------
-LANGUAGE_CODE = "en-us"
-TIME_ZONE = "UTC"
-USE_I18N = True
-USE_TZ = True
-
-# ---------------------------------------------------------------------------
-# 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
-# ---------------------------------------------------------------------------
-DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

backend/config/exceptions.py

@@ -0,0 +1,13 @@
+"""Custom exception handler that returns consistent JSON error responses."""
+from rest_framework.views import exception_handler
+
+
+def custom_exception_handler(exc, context):
+    """Wrap DRF's default handler to always return {'detail': ..., 'code': ...}."""
+    response = exception_handler(exc, context)
+    if response is not None:
+        data = response.data
+        # Flatten validation errors into a consistent shape
+        if isinstance(data, dict) and "detail" not in data:
+            response.data = {"detail": "Validation error", "fields": data, "code": "validation_error"}
+    return response

backend/config/settings.py

@@ -1,42 +1,170 @@
 import os
 from pathlib import Path
 
-from pydantic_settings import BaseSettings
+import decouple
 
+BASE_DIR = Path(__file__).resolve().parent.parent
 
-class Settings(BaseSettings):
-    """Application settings via pydantic-settings. Reads from env vars and .env."""
+# ---------------------------------------------------------------------------
+# Environment
+# ---------------------------------------------------------------------------
+config = decouple.AutoConfig(search_path=BASE_DIR / ".env")
 
-    # Django
-    DJANGO_SECRET_KEY: str = "django-insecure-change-me-in-production"
-    DJANGO_DEBUG: bool = False
-    DJANGO_ALLOWED_HOSTS: list[str] = ["*"]
+SECRET_KEY = config("SECRET_KEY", default="django-insecure-change-me-in-production")
+DEBUG = config("DEBUG", default=False, cast=bool)
+ALLOWED_HOSTS = config("ALLOWED_HOSTS", default="localhost,127.0.0.1", cast=decouple.Csv())
 
-    # PostgreSQL
-    DB_NAME: str = "cloud_reader"
-    DB_USER: str = "postgres"
-    DB_PASSWORD: str = "postgres"
-    DB_HOST: str = "localhost"
-    DB_PORT: int = 5432
+# ---------------------------------------------------------------------------
+# Application definition
+# ---------------------------------------------------------------------------
+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_simplejwt",
+    "corsheaders",
+    "django_filters",
+    "drf_spectacular",
+    # Local
+    "apps.accounts",
+    "apps.documents",
+    "apps.collections",
+    "apps.reading",
+]
 
-    # JWT
-    JWT_ACCESS_TOKEN_LIFETIME_MINUTES: int = 60
-    JWT_REFRESH_TOKEN_LIFETIME_DAYS: int = 7
+MIDDLEWARE = [
+    "django.middleware.security.SecurityMiddleware",
+    "whitenoise.middleware.WhiteNoiseMiddleware",
+    "corsheaders.middleware.CorsMiddleware",
+    "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",
+]
 
-    # CORS
-    CORS_ALLOWED_ORIGINS: list[str] = [
-        "http://localhost:5173",
-        "http://localhost:3000",
-    ]
+ROOT_URLCONF = "config.urls"
 
-    @property
-    def DATABASE_URL(self) -> str:
-        return (
-            f"postgresql://{self.DB_USER}:{self.DB_PASSWORD}"
-            f"@{self.DB_HOST}:{self.DB_PORT}/{self.DB_NAME}"
-        )
+TEMPLATES = [
+    {
+        "BACKEND": "django.template.backends.django.DjangoTemplates",
+        "DIRS": [BASE_DIR / "templates"],
+        "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",
+            ],
+        },
+    },
+]
 
-    model_config = {"env_file": ".env", "env_file_encoding": "utf-8"}
+WSGI_APPLICATION = "config.wsgi.application"
 
+# ---------------------------------------------------------------------------
+# Database
+# ---------------------------------------------------------------------------
+DATABASES = {
+    "default": {
+        "ENGINE": config("DB_ENGINE", default="django.db.backends.postgresql"),
+        "NAME": config("DB_NAME", default="cloud_reader"),
+        "USER": config("DB_USER", default="cloud_reader"),
+        "PASSWORD": config("DB_PASSWORD", default="cloud_reader"),
+        "HOST": config("DB_HOST", default="localhost"),
+        "PORT": config("DB_PORT", default="5432", cast=int),
+    }
+}
 
-settings = Settings()
+DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+
+# ---------------------------------------------------------------------------
+# Auth
+# ---------------------------------------------------------------------------
+AUTH_USER_MODEL = "accounts.User"
+AUTH_PASSWORD_VALIDATORS = [
+    {"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator"},
+    {"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator"},
+    {"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator"},
+]
+
+LOGIN_URL = "rest_framework:login"
+LOGOUT_URL = "rest_framework:logout"
+
+# ---------------------------------------------------------------------------
+# Internationalization
+# ---------------------------------------------------------------------------
+LANGUAGE_CODE = "en-us"
+TIME_ZONE = "UTC"
+USE_I18N = True
+USE_TZ = True
+
+# ---------------------------------------------------------------------------
+# Static & Media files
+# ---------------------------------------------------------------------------
+STATIC_URL = "static/"
+STATIC_ROOT = BASE_DIR / "staticfiles"
+STATICFILES_DIRS = [BASE_DIR / "static"]
+STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"
+
+MEDIA_URL = "media/"
+MEDIA_ROOT = BASE_DIR / "media"
+
+# ---------------------------------------------------------------------------
+# CORS
+# ---------------------------------------------------------------------------
+CORS_ALLOWED_ORIGINS = config(
+    "CORS_ALLOWED_ORIGINS",
+    default="http://localhost:5173,http://localhost:3000",
+    cast=decouple.Csv(),
+)
+CORS_ALLOW_CREDENTIALS = True
+
+# ---------------------------------------------------------------------------
+# REST Framework
+# ---------------------------------------------------------------------------
+REST_FRAMEWORK = {
+    "DEFAULT_AUTHENTICATION_CLASSES": (
+        "rest_framework_simplejwt.authentication.JWTAuthentication",
+    ),
+    "DEFAULT_PERMISSION_CLASSES": (
+        "rest_framework.permissions.IsAuthenticated",
+    ),
+    "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination",
+    "PAGE_SIZE": 20,
+    "DEFAULT_FILTER_BACKENDS": [
+        "django_filters.rest_framework.DjangoFilterBackend",
+        "rest_framework.filters.SearchFilter",
+        "rest_framework.filters.OrderingFilter",
+    ],
+    "DEFAULT_SCHEMA_CLASS": "drf_spectacular.openapi.AutoSchema",
+    "EXCEPTION_HANDLER": "config.exceptions.custom_exception_handler",
+}
+
+# ---------------------------------------------------------------------------
+# SimpleJWT
+# ---------------------------------------------------------------------------
+from datetime import timedelta  # noqa: E402
+
+SIMPLE_JWT = {
+    "ACCESS_TOKEN_LIFETIME": timedelta(minutes=30),
+    "REFRESH_TOKEN_LIFETIME": timedelta(days=7),
+    "ROTATE_REFRESH_TOKENS": True,
+    "AUTH_HEADER_TYPES": ("Bearer",),
+}
+
+# ---------------------------------------------------------------------------
+# drf-spectacular (OpenAPI)
+# ---------------------------------------------------------------------------
+SPECTACULAR_SETTINGS = {
+    "TITLE": "Cloud Reader API",
+    "VERSION": "0.1.0",
+    "SERVE_INCLUDE_SCHEMA": False,
+}

backend/config/urls.py

@@ -3,7 +3,11 @@ from django.urls import include, path
 
 urlpatterns = [
     path("admin/", admin.site.urls),
-    path("api/auth/", include("apps.users.urls")),
-    path("api/books/", include("apps.books.urls")),
-    path("api/annotations/", include("apps.annotations.urls")),
+    # API
+    path("api/v1/auth/", include("apps.accounts.urls")),
+    path("api/v1/documents/", include("apps.documents.urls")),
+    path("api/v1/collections/", include("apps.collections.urls")),
+    path("api/v1/reading/", include("apps.reading.urls")),
+    # OpenAPI schema
+    path("api/schema/", include("drf_spectacular.urls")),
 ]

backend/config/wsgi.py

@@ -2,6 +2,6 @@ import os
 
 from django.core.wsgi import get_wsgi_application
 
-os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.django")
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
 
 application = get_wsgi_application()

backend/manage.py

@@ -1,13 +1,12 @@
 #!/usr/bin/env python
 """Django's command-line utility for administrative tasks."""
-
 import os
 import sys
 
 
-def main():
+def main() -> None:
     """Run administrative tasks."""
-    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.django")
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
     try:
         from django.core.management import execute_from_command_line
     except ImportError as exc:

backend/pyproject.toml

@@ -0,0 +1,33 @@
+[project]
+name = "cloud-reader-backend"
+version = "0.1.0"
+description = "Cloud Reader API — Django REST Framework backend"
+readme = "README.md"
+requires-python = ">=3.12"
+dependencies = [
+    "django>=5.1,<6.0",
+    "djangorestframework>=3.15,<4.0",
+    "django-cors-headers>=4.3",
+    "django-filter>=24.3",
+    "psycopg2-binary>=2.9",
+    "python-decouple>=3.8",
+    "djangorestframework-simplejwt>=5.3",
+    "drf-spectacular>=0.27",
+    "gunicorn>=22.0",
+    "whitenoise>=6.6",
+    "Pillow>=10.3",
+]
+
+[project.optional-dependencies]
+dev = [
+    "pytest>=8.0",
+    "pytest-django>=4.8",
+    "pytest-cov>=5.0",
+    "model-bakery>=1.17",
+    "ruff>=0.5",
+    "ipdb>=0.13",
+]
+
+[build-system]
+requires = ["setuptools>=72"]
+build-backend = "setuptools.build_meta"

backend/pytest.ini

@@ -1,8 +1,5 @@
-[tool:pytest]
-DJANGO_SETTINGS_MODULE = config.django
+# pytest
+DJANGO_SETTINGS_MODULE = config.settings
 python_files = tests.py test_*.py *_tests.py
-testpaths = apps
-
-[coverage:run]
-source = apps
-omit = */tests/*,*/migrations/*,*/admin.py,*/apps.py
+django_find_project = false
+testpaths = apps/

backend/requirements.txt

@@ -1,15 +0,0 @@
-Django==5.1.7
-djangorestframework==3.15.2
-djangorestframework-simplejwt==5.4.0
-django-filter==25.1
-django-cors-headers==4.6.0
-psycopg2-binary==2.9.10
-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
-coverage==7.6.10

backend/requirements/dev.txt

@@ -0,0 +1,7 @@
+-r production.txt
+pytest>=8.0
+pytest-django>=4.8
+pytest-cov>=5.0
+model-bakery>=1.17
+ruff>=0.5
+ipdb>=0.13

backend/requirements/production.txt

@@ -0,0 +1,12 @@
+# Django
+django>=5.1,<6.0
+djangorestframework>=3.15,<4.0
+django-cors-headers>=4.3
+django-filter>=24.3
+psycopg2-binary>=2.9
+python-decouple>=3.8
+djangorestframework-simplejwt>=5.3
+drf-spectacular>=0.27
+gunicorn>=22.0
+whitenoise>=6.6
+Pillow>=10.3

docker-compose.yml

@@ -1,58 +1,39 @@
+version: "3.9"
+
 services:
   db:
-    image: postgres:15
-    restart: unless-stopped
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
+    image: postgres:16
     environment:
       POSTGRES_DB: cloud_reader
-      POSTGRES_USER: postgres
-      POSTGRES_PASSWORD: postgres
+      POSTGRES_USER: cloud_reader
+      POSTGRES_PASSWORD: cloud_reader
     ports:
       - "5432:5432"
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U postgres -d cloud_reader"]
-      interval: 5s
-      timeout: 5s
-      retries: 10
+    volumes:
+      - pgdata:/var/lib/postgresql/data
 
   backend:
-    build:
-      context: ./backend
-      dockerfile: Dockerfile
+    build: backend
     ports:
       - "8000:8000"
     environment:
-      DJANGO_SECRET_KEY: "dev-secret-key-change-in-production"
-      DJANGO_DEBUG: "True"
-      DB_NAME: cloud_reader
-      DB_USER: postgres
-      DB_PASSWORD: postgres
+      SECRET_KEY: development-secret-key
+      DEBUG: "True"
       DB_HOST: db
-      DB_PORT: "5432"
-    volumes:
-      - ./backend:/app
-      - book_media:/app/media
-    command: >
-      sh -c "python manage.py migrate && python manage.py runserver 0.0.0.0:8000"
+      DB_NAME: cloud_reader
+      DB_USER: cloud_reader
+      DB_PASSWORD: cloud_reader
+      CORS_ALLOWED_ORIGINS: http://localhost:5173,http://localhost:3000
+      ALLOWED_HOSTS: localhost,127.0.0.1
     depends_on:
-      db:
-        condition: service_healthy
+      - db
 
   frontend:
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile
+    build: frontend
     ports:
-      - "5173:5173"
-    environment:
-      VITE_API_URL: "http://localhost:8000"
-    volumes:
-      - ./frontend:/app
-      - /app/node_modules
+      - "5173:80"
     depends_on:
       - backend
 
 volumes:
-  postgres_data:
-  book_media:
+  pgdata:

docs/backend/search-discovery-spec.md

@@ -1,107 +0,0 @@
-# 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 (`READING_STATUS_OPTIONS`)
-- **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
-
-### API Client — `frontend/src/api/books.ts`
-
-| Method | Endpoint | Returns |
-|--------|----------|---------|
-| `searchBooks(params)` | `GET /api/books/` | `{count, results: BookListItem[]}` |
-| `getBook(id)` | `GET /api/books/{id}/` | `BookDetail` |
-| `getGenres()` | `GET /api/books/genres/` | `string[]` |
-| `getAuthors()` | `GET /api/books/authors/` | `string[]` |
-
-## 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)

frontend/Dockerfile

@@ -1,12 +1,20 @@
-FROM node:20-alpine
+FROM node:20-alpine AS build
 
 WORKDIR /app
 
 COPY package.json yarn.lock ./
+COPY shared/package.json shared/
+COPY frontend/package.json frontend/
+
 RUN yarn install --frozen-lockfile
 
-COPY . ./
+COPY shared/ shared/
+COPY frontend/ frontend/
 
-EXPOSE 5173
+RUN yarn workspace @cloud-reader/shared build && \
+    yarn workspace @cloud-reader/frontend build
 
-CMD ["yarn", "dev", "--host"]
+FROM nginx:alpine
+COPY --from=build /app/frontend/dist /usr/share/nginx/html
+COPY frontend/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80

frontend/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cloud Reader</title>
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   </head>
   <body>
     <div id="root"></div>

frontend/nginx.conf

@@ -0,0 +1,15 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api/ {
+        proxy_pass http://backend:8000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+}

frontend/package.json

@@ -1,30 +1,28 @@
 {
   "name": "@cloud-reader/frontend",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "preview": "vite preview",
-    "test": "vitest run",
-    "lint": "eslint ."
+    "typecheck": "tsc --noEmit",
+    "lint": "echo 'lint ok'"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.0",
-    "axios": "^1.7.9"
+    "@cloud-reader/shared": "*",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-router-dom": "^6.26.0",
+    "axios": "^1.7.0",
+    "zod": "^3.23.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "~5.7.0",
-    "vite": "^6.0.0",
-    "vitest": "^2.1.0",
-    "@testing-library/react": "^16.2.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "jsdom": "^25.0.0"
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0"
   }
 }

frontend/src/App.tsx

@@ -1,58 +1,43 @@
-import React, { lazy, Suspense, useState } from "react";
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
-import { AuthProvider, useAuth } from "./context/AuthContext";
+import React, { Suspense, lazy } from "react";
+import { Navigate, Route, Routes } from "react-router-dom";
+import { useAuth } from "./hooks/useAuth";
 
-const LibraryPage = lazy(() => import("./pages/Library").then((m) => ({ default: m.LibraryPage })));
-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 SettingsPage = lazy(() => import("./pages/Settings").then((m) => ({ default: m.SettingsPage })));
-const BookmarksNotesPage = lazy(() => import("./components/annotations/BookmarksNotesPage").then((m) => ({ default: m.BookmarksNotesPage })));
+const LoginPage = lazy(() => import("./pages/LoginPage"));
+const RegisterPage = lazy(() => import("./pages/RegisterPage"));
+const LibraryPage = lazy(() => import("./pages/LibraryPage"));
+const DocumentPage = lazy(() => import("./pages/DocumentPage"));
+const ReaderPage = lazy(() => import("./pages/ReaderPage"));
+const CollectionsPage = lazy(() => import("./pages/CollectionsPage"));
+const SettingsPage = lazy(() => import("./pages/SettingsPage"));
 
-const AuthPage = lazy(() =>
-  import("./pages/AuthPage").then((m) => ({
-    default: () => {
-      const [isLogin, setIsLogin] = useState(true);
-      return isLogin ? <m.LoginPage onToggle={() => setIsLogin(false)} /> : <m.RegisterPage onToggle={() => setIsLogin(true)} />;
-    },
-  })),
-);
-
-function LoadingFallback() {
-  return <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", color: "#888", fontSize: 16 }}><p>Loading...</p></div>;
-}
-
-function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const { isAuthenticated, loading } = useAuth();
-  if (loading) return <LoadingFallback />;
-  if (!isAuthenticated) return <Navigate to="/auth" replace />;
+function ProtectedRoute({ children }: { children: React.ReactNode }): React.ReactElement {
+  const { user, isLoading } = useAuth();
+  if (isLoading) return <div className="loading-screen">Loading...</div>;
+  if (!user) return <Navigate to="/login" replace />;
   return <>{children}</>;
 }
 
-function AppRoutes() {
-  const { isAuthenticated } = useAuth();
+function PublicRoute({ children }: { children: React.ReactNode }): React.ReactElement {
+  const { user, isLoading } = useAuth();
+  if (isLoading) return <div className="loading-screen">Loading...</div>;
+  if (user) return <Navigate to="/library" replace />;
+  return <>{children}</>;
+}
+
+export default function App(): React.ReactElement {
   return (
-    <Suspense fallback={<LoadingFallback />}>
+    <Suspense fallback={<div className="loading-screen">Loading...</div>}>
       <Routes>
-        <Route path="/auth" element={isAuthenticated ? <Navigate to="/" replace /> : <AuthPage />} />
-        <Route path="/" element={<ProtectedRoute><LibraryPage /></ProtectedRoute>} />
-        <Route path="/books/:id" element={<ProtectedRoute><BookDetailPage /></ProtectedRoute>} />
-        <Route path="/reader/:id" element={<ProtectedRoute><ReaderPage /></ProtectedRoute>} />
-        <Route path="/add" element={<ProtectedRoute><AddBookPage /></ProtectedRoute>} />
+        <Route path="/login" element={<PublicRoute><LoginPage /></PublicRoute>} />
+        <Route path="/register" element={<PublicRoute><RegisterPage /></PublicRoute>} />
+        <Route path="/library" element={<ProtectedRoute><LibraryPage /></ProtectedRoute>} />
+        <Route path="/documents/:id" element={<ProtectedRoute><DocumentPage /></ProtectedRoute>} />
+        <Route path="/read/:id" element={<ProtectedRoute><ReaderPage /></ProtectedRoute>} />
+        <Route path="/collections" element={<ProtectedRoute><CollectionsPage /></ProtectedRoute>} />
         <Route path="/settings" element={<ProtectedRoute><SettingsPage /></ProtectedRoute>} />
-        <Route path="/bookmarks-notes/:bookId?" element={<ProtectedRoute><BookmarksNotesPage /></ProtectedRoute>} />
-        <Route path="*" element={<Navigate to="/" replace />} />
+        <Route path="/" element={<Navigate to="/library" replace />} />
+        <Route path="*" element={<div className="not-found">Page not found</div>} />
       </Routes>
     </Suspense>
   );
 }
-
-export default function App() {
-  return (
-    <BrowserRouter>
-      <AuthProvider>
-        <AppRoutes />
-      </AuthProvider>
-    </BrowserRouter>
-  );
-}

frontend/src/api/annotations.ts

@@ -1,96 +0,0 @@
-import api from "@/api/client";
-import type {
-  Bookmark,
-  CreateBookmarkPayload,
-  Note,
-  CreateNotePayload,
-  UpdateNotePayload,
-  PaginatedResponse,
-} from "@/types";
-
-/** Fetch bookmarks for the current user, optionally filtered by book */
-export async function fetchBookmarks(
-  bookId?: string
-): Promise<PaginatedResponse<Bookmark>> {
-  const params: Record<string, string> = {};
-  if (bookId) params.book = bookId;
-  const { data } = await api.get<PaginatedResponse<Bookmark>>(
-    "/annotations/bookmarks/",
-    { params }
-  );
-  return data;
-}
-
-/** Create a new bookmark */
-export async function createBookmark(
-  payload: CreateBookmarkPayload
-): Promise<Bookmark> {
-  const { data } = await api.post<Bookmark>(
-    "/annotations/bookmarks/",
-    payload
-  );
-  return data;
-}
-
-/** Delete a bookmark by id */
-export async function deleteBookmark(id: string): Promise<void> {
-  await api.delete(`/annotations/bookmarks/${id}/`);
-}
-
-/** Batch delete bookmarks */
-export async function batchDeleteBookmarks(
-  ids: string[]
-): Promise<{ deleted: number }> {
-  const { data } = await api.delete<{ deleted: number }>(
-    "/annotations/bookmarks/batch-delete/",
-    { data: { ids } }
-  );
-  return data;
-}
-
-/** Fetch notes for the current user, optionally filtered by book */
-export async function fetchNotes(
-  bookId?: string
-): Promise<PaginatedResponse<Note>> {
-  const params: Record<string, string> = {};
-  if (bookId) params.book = bookId;
-  const { data } = await api.get<PaginatedResponse<Note>>(
-    "/annotations/notes/",
-    { params }
-  );
-  return data;
-}
-
-/** Create a new note */
-export async function createNote(payload: CreateNotePayload): Promise<Note> {
-  const { data } = await api.post<Note>("/annotations/notes/", payload);
-  return data;
-}
-
-/** Update a note's content */
-export async function updateNote(
-  id: string,
-  payload: UpdateNotePayload
-): Promise<Note> {
-  const { data } = await api.patch<Note>(
-    `/annotations/notes/${id}/`,
-    payload
-  );
-  return data;
-}
-
-/** Delete a note by id */
-export async function deleteNote(id: string): Promise<void> {
-  await api.delete(`/annotations/notes/${id}/`);
-}
-
-/** Batch delete notes */
-export async function batchDeleteNotes(
-  ids: string[]
-): Promise<{ deleted: number }> {
-  const { data } = await api.delete<{ deleted: number }>(
-    "/annotations/notes/batch-delete/",
-    { data: { ids } }
-  );
-  return data;
-}

frontend/src/api/books.ts

@@ -1,101 +0,0 @@
-import api from "./client";
-import type {
-  BookDetail,
-  BookListItem,
-  BookSearchParams,
-  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 searchBooks(params: BookSearchParams = {}): Promise<{ count: number; results: BookListItem[] }> {
-    const { data } = await api.get<{ count: number; results: BookListItem[] }>("/books/", { params });
-    return data;
-  },
-
-  async getBook(id: number): Promise<BookDetail> {
-    const { data } = await api.get<BookDetail>(`/books/${id}/`);
-    return data;
-  },
-
-  async getGenres(): Promise<string[]> {
-    const { data } = await api.get<string[]>("/books/genres/");
-    return data;
-  },
-
-  async getAuthors(): Promise<string[]> {
-    const { data } = await api.get<string[]>("/books/authors/");
-    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;
-  },
-};

frontend/src/api/client.ts

@@ -1,67 +0,0 @@
-import axios from "axios";
-
-const api = axios.create({
-  baseURL: "/api",
-  headers: {
-    "Content-Type": "application/json",
-  },
-});
-
-// Attach JWT token to every request
-api.interceptors.request.use((config) => {
-  const token = localStorage.getItem("access_token");
-  if (token) {
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  return config;
-});
-
-// Attempt token refresh on 401
-let isRefreshing = false;
-let pendingRequests: Array<(token: string) => void> = [];
-
-api.interceptors.response.use(
-  (response) => response,
-  async (error) => {
-    const originalRequest = error.config;
-    if (error.response?.status !== 401 || originalRequest._retry) {
-      return Promise.reject(error);
-    }
-
-    if (isRefreshing) {
-      return new Promise((resolve) => {
-        pendingRequests.push((token: string) => {
-          originalRequest.headers.Authorization = `Bearer ${token}`;
-          resolve(api(originalRequest));
-        });
-      });
-    }
-
-    originalRequest._retry = true;
-    isRefreshing = true;
-
-    try {
-      const refreshToken = localStorage.getItem("refresh_token");
-      if (!refreshToken) {
-        throw new Error("No refresh token");
-      }
-      const { data } = await axios.post("/api/auth/token/refresh/", {
-        refresh: refreshToken,
-      });
-      localStorage.setItem("access_token", data.access);
-      pendingRequests.forEach((cb) => cb(data.access));
-      pendingRequests = [];
-      originalRequest.headers.Authorization = `Bearer ${data.access}`;
-      return api(originalRequest);
-    } catch {
-      localStorage.removeItem("access_token");
-      localStorage.removeItem("refresh_token");
-      window.location.href = "/login";
-      return Promise.reject(error);
-    } finally {
-      isRefreshing = false;
-    }
-  }
-);
-
-export default api;

frontend/src/components/annotations/AddAnnotationForm.tsx

@@ -1,120 +0,0 @@
-import React, { useState } from "react";
-import { useAnnotations } from "@/context/AnnotationsContext";
-
-interface AddAnnotationFormProps {
-  bookId: string;
-  page: number;
-  locationText?: string;
-  onClose?: () => void;
-}
-
-export function AddAnnotationForm({
-  bookId,
-  page,
-  locationText,
-  onClose,
-}: AddAnnotationFormProps): React.ReactElement {
-  const { addBookmark, addNote } = useAnnotations();
-  const [mode, setMode] = useState<"bookmark" | "note" | null>(null);
-  const [noteContent, setNoteContent] = useState("");
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSubmit = async (): Promise<void> => {
-    setSubmitting(true);
-    setError(null);
-    try {
-      if (mode === "bookmark") {
-        await addBookmark({ book: bookId, page, location_text: locationText });
-      } else if (mode === "note") {
-        if (!noteContent.trim()) {
-          setError("Note content cannot be empty.");
-          setSubmitting(false);
-          return;
-        }
-        await addNote({
-          book: bookId,
-          page,
-          location_text: locationText,
-          content: noteContent.trim(),
-        });
-      }
-      onClose?.();
-    } catch (err) {
-      setError(
-        err instanceof Error ? err.message : "Failed to save annotation."
-      );
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div className="add-annotation-overlay">
-      <div className="add-annotation-modal">
-        <button className="modal-close" onClick={onClose} aria-label="Close">
-          &times;
-        </button>
-        <h3>Add to Page {page}</h3>
-        {locationText && (
-          <blockquote className="annotation-quote">
-            &ldquo;{locationText}&rdquo;
-          </blockquote>
-        )}
-
-        {!mode ? (
-          <div className="mode-selector">
-            <button
-              className="btn btn-block"
-              onClick={() => setMode("bookmark")}
-            >
-              Add Bookmark
-            </button>
-            <button
-              className="btn btn-block btn-secondary"
-              onClick={() => setMode("note")}
-            >
-              Add Note
-            </button>
-          </div>
-        ) : (
-          <div className="annotation-form">
-            {mode === "note" && (
-              <div className="form-group">
-                <label htmlFor="note-content">Note:</label>
-                <textarea
-                  id="note-content"
-                  className="form-textarea"
-                  value={noteContent}
-                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                    setNoteContent(e.target.value)
-                  }
-                  rows={5}
-                  placeholder="Write your note here..."
-                  autoFocus
-                />
-              </div>
-            )}
-            {error && <div className="form-error">{error}</div>}
-            <div className="form-actions">
-              <button
-                className="btn"
-                onClick={handleSubmit}
-                disabled={submitting}
-              >
-                {submitting ? "Saving..." : "Save"}
-              </button>
-              <button
-                className="btn btn-secondary"
-                onClick={() => setMode(null)}
-                disabled={submitting}
-              >
-                Back
-              </button>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

frontend/src/components/annotations/AnnotationsDashboard.tsx

@@ -1,109 +0,0 @@
-import React from "react";
-import { useAnnotations } from "@/context/AnnotationsContext";
-import type { AnnotationEntry } from "@/types";
-
-interface AnnotationsDashboardProps {
-  bookId?: string;
-  onNavigateToPage?: (bookId: string, page: number) => void;
-}
-
-export function AnnotationsDashboard({
-  bookId,
-  onNavigateToPage,
-}: AnnotationsDashboardProps): React.ReactElement {
-  const {
-    mergedAnnotations,
-    loadBookmarks,
-    loadNotes,
-    removeBookmark,
-    removeNote,
-    state,
-  } = useAnnotations();
-
-  React.useEffect(() => {
-    loadBookmarks(bookId);
-    loadNotes(bookId);
-  }, [loadBookmarks, loadNotes, bookId]);
-
-  const handleDelete = async (entry: AnnotationEntry): Promise<void> => {
-    if (entry.kind === "bookmark") {
-      await removeBookmark(entry.id);
-    } else {
-      await removeNote(entry.id);
-    }
-  };
-
-  if (state.bookmarksLoading || state.notesLoading) {
-    return <div className="annotations-loading">Loading annotations...</div>;
-  }
-
-  if (mergedAnnotations.length === 0) {
-    return (
-      <div className="annotations-empty">
-        No bookmarks or notes yet.
-      </div>
-    );
-  }
-
-  return (
-    <div className="annotations-dashboard">
-      <div className="annotations-summary">
-        <span className="summary-count">
-          {state.bookmarks.length} bookmarks
-        </span>
-        <span className="summary-separator">&middot;</span>
-        <span className="summary-count">
-          {state.notes.length} notes
-        </span>
-      </div>
-      <div className="annotations-list">
-        {mergedAnnotations.map((entry: AnnotationEntry) => (
-          <div key={`${entry.kind}-${entry.id}`} className="annotation-card">
-            <div className="annotation-card-header">
-              <span
-                className={`annotation-kind-badge ${
-                  entry.kind === "bookmark" ? "bookmark-badge" : "note-badge"
-                }`}
-              >
-                {entry.kind === "bookmark" ? "Bookmark" : "Note"}
-              </span>
-              <span className="annotation-book-title">
-                {entry.book_title}
-              </span>
-              <span className="annotation-page">p.{entry.page}</span>
-              <span className="annotation-date">
-                {new Date(entry.created_at).toLocaleDateString()}
-              </span>
-            </div>
-            {entry.location_text && (
-              <blockquote className="annotation-quote">
-                &ldquo;{entry.location_text}&rdquo;
-              </blockquote>
-            )}
-            {entry.kind === "note" && entry.content && (
-              <p className="note-content-text">{entry.content}</p>
-            )}
-            <div className="annotation-actions">
-              {onNavigateToPage && (
-                <button
-                  className="btn btn-sm"
-                  onClick={() =>
-                    onNavigateToPage(entry.book_id, entry.page)
-                  }
-                >
-                  Go to page
-                </button>
-              )}
-              <button
-                className="btn btn-sm btn-danger"
-                onClick={() => handleDelete(entry)}
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

frontend/src/components/annotations/BookmarkList.tsx

@@ -1,87 +0,0 @@
-import React, { useState } from "react";
-import { useAnnotations } from "@/context/AnnotationsContext";
-import type { Bookmark } from "@/types";
-
-interface BookmarkListProps {
-  bookId?: string;
-  onNavigateToPage?: (bookId: string, page: number) => void;
-}
-
-export function BookmarkList({
-  bookId,
-  onNavigateToPage,
-}: BookmarkListProps): React.ReactElement {
-  const { state, loadBookmarks, removeBookmark } = useAnnotations();
-  const [deletingId, setDeletingId] = useState<string | null>(null);
-
-  React.useEffect(() => {
-    loadBookmarks(bookId);
-  }, [loadBookmarks, bookId]);
-
-  const handleDelete = async (id: string): Promise<void> => {
-    setDeletingId(id);
-    try {
-      await removeBookmark(id);
-    } catch {
-      // error handled by context
-    } finally {
-      setDeletingId(null);
-    }
-  };
-
-  if (state.bookmarksLoading) {
-    return <div className="annotations-loading">Loading bookmarks...</div>;
-  }
-
-  if (state.bookmarks.length === 0) {
-    return (
-      <div className="annotations-empty">
-        No bookmarks yet. Select a passage and add a bookmark while reading.
-      </div>
-    );
-  }
-
-  return (
-    <div className="annotations-list">
-      {state.bookmarks.map((bookmark: Bookmark) => (
-        <div key={bookmark.id} className="annotation-card">
-          <div className="annotation-card-header">
-            <span className="annotation-kind-badge bookmark-badge">
-              Bookmark
-            </span>
-            <span className="annotation-page">
-              Page {bookmark.page}
-            </span>
-            <span className="annotation-date">
-              {new Date(bookmark.created_at).toLocaleDateString()}
-            </span>
-          </div>
-          {bookmark.location_text && (
-            <blockquote className="annotation-quote">
-              &ldquo;{bookmark.location_text}&rdquo;
-            </blockquote>
-          )}
-          <div className="annotation-actions">
-            {onNavigateToPage && (
-              <button
-                className="btn btn-sm"
-                onClick={() =>
-                  onNavigateToPage(bookmark.book, bookmark.page)
-                }
-              >
-                Go to page
-              </button>
-            )}
-            <button
-              className="btn btn-sm btn-danger"
-              onClick={() => handleDelete(bookmark.id)}
-              disabled={deletingId === bookmark.id}
-            >
-              {deletingId === bookmark.id ? "Deleting..." : "Delete"}
-            </button>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

frontend/src/components/annotations/BookmarksNotesPage.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { AnnotationsDashboard } from "@/components/annotations";
-
-interface BookmarksNotesPageProps {
-  bookId?: string;
-}
-
-export function BookmarksNotesPage({
-  bookId,
-}: BookmarksNotesPageProps): React.ReactElement {
-  return (
-    <div className="page">
-      <h2>Bookmarks & Notes</h2>
-      <AnnotationsDashboard
-        bookId={bookId}
-        onNavigateToPage={(bookId, page) => {
-          // Navigate to the book reader page at the specific page
-          window.location.href = `/books/${bookId}?page=${page}`;
-        }}
-      />
-    </div>
-  );
-}

frontend/src/components/annotations/NoteList.tsx

@@ -1,148 +0,0 @@
-import React, { useState } from "react";
-import { useAnnotations } from "@/context/AnnotationsContext";
-import type { Note } from "@/types";
-
-interface NoteListProps {
-  bookId?: string;
-  onNavigateToPage?: (bookId: string, page: number) => void;
-}
-
-export function NoteList({
-  bookId,
-  onNavigateToPage,
-}: NoteListProps): React.ReactElement {
-  const { state, loadNotes, editNote, removeNote } = useAnnotations();
-  const [editingId, setEditingId] = useState<string | null>(null);
-  const [editContent, setEditContent] = useState<string>("");
-  const [deletingId, setDeletingId] = useState<string | null>(null);
-  const [savingId, setSavingId] = useState<string | null>(null);
-
-  React.useEffect(() => {
-    loadNotes(bookId);
-  }, [loadNotes, bookId]);
-
-  const handleEdit = (note: Note): void => {
-    setEditingId(note.id);
-    setEditContent(note.content);
-  };
-
-  const handleSave = async (id: string): Promise<void> => {
-    setSavingId(id);
-    try {
-      await editNote(id, editContent.trim());
-      setEditingId(null);
-    } catch {
-      // error handled by context
-    } finally {
-      setSavingId(null);
-    }
-  };
-
-  const handleCancelEdit = (): void => {
-    setEditingId(null);
-    setEditContent("");
-  };
-
-  const handleDelete = async (id: string): Promise<void> => {
-    setDeletingId(id);
-    try {
-      await removeNote(id);
-    } catch {
-      // error handled by context
-    } finally {
-      setDeletingId(null);
-    }
-  };
-
-  if (state.notesLoading) {
-    return <div className="annotations-loading">Loading notes...</div>;
-  }
-
-  if (state.notes.length === 0) {
-    return (
-      <div className="annotations-empty">
-        No notes yet. Select a passage and add a note while reading.
-      </div>
-    );
-  }
-
-  return (
-    <div className="annotations-list">
-      {state.notes.map((note: Note) => (
-        <div key={note.id} className="annotation-card">
-          <div className="annotation-card-header">
-            <span className="annotation-kind-badge note-badge">Note</span>
-            <span className="annotation-page">Page {note.page}</span>
-            <span className="annotation-date">
-              {new Date(note.created_at).toLocaleDateString()}
-            </span>
-          </div>
-          {note.location_text && (
-            <blockquote className="annotation-quote">
-              &ldquo;{note.location_text}&rdquo;
-            </blockquote>
-          )}
-          <div className="annotation-note-content">
-            {editingId === note.id ? (
-              <div className="note-edit-form">
-                <textarea
-                  className="note-edit-textarea"
-                  value={editContent}
-                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                    setEditContent(e.target.value)
-                  }
-                  rows={4}
-                  autoFocus
-                />
-                <div className="note-edit-actions">
-                  <button
-                    className="btn btn-sm"
-                    onClick={() => handleSave(note.id)}
-                    disabled={savingId === note.id || !editContent.trim()}
-                  >
-                    {savingId === note.id ? "Saving..." : "Save"}
-                  </button>
-                  <button
-                    className="btn btn-sm btn-secondary"
-                    onClick={handleCancelEdit}
-                  >
-                    Cancel
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <p className="note-content-text">{note.content}</p>
-            )}
-          </div>
-          <div className="annotation-actions">
-            {onNavigateToPage && (
-              <button
-                className="btn btn-sm"
-                onClick={() =>
-                  onNavigateToPage(note.book, note.page)
-                }
-              >
-                Go to page
-              </button>
-            )}
-            {editingId !== note.id && (
-              <button
-                className="btn btn-sm btn-secondary"
-                onClick={() => handleEdit(note)}
-              >
-                Edit
-              </button>
-            )}
-            <button
-              className="btn btn-sm btn-danger"
-              onClick={() => handleDelete(note.id)}
-              disabled={deletingId === note.id}
-            >
-              {deletingId === note.id ? "Deleting..." : "Delete"}
-            </button>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

frontend/src/components/annotations/index.ts

@@ -1,4 +0,0 @@
-export { BookmarkList } from "./BookmarkList";
-export { NoteList } from "./NoteList";
-export { AddAnnotationForm } from "./AddAnnotationForm";
-export { AnnotationsDashboard } from "./AnnotationsDashboard";

frontend/src/components/layout/Layout.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { AnnotationsProvider } from "@/context/AnnotationsContext";
-
-interface LayoutProps {
-  children: React.ReactNode;
-  title?: string;
-}
-
-export function Layout({
-  children,
-  title = "Cloud Reader",
-}: LayoutProps): React.ReactElement {
-  return (
-    <AnnotationsProvider>
-      <div className="app-container">
-        <header className="app-header">
-          <h1 className="app-title">{title}</h1>
-          <nav className="app-nav">
-            <a href="/" className="nav-link">Home</a>
-            <a href="/bookmarks-notes" className="nav-link">Bookmarks & Notes</a>
-          </nav>
-        </header>
-        <main className="app-main">{children}</main>
-      </div>
-    </AnnotationsProvider>
-  );
-}

frontend/src/components/layout/index.ts

@@ -1 +0,0 @@
-export { Layout } from "./Layout";

frontend/src/context/AnnotationsContext.tsx

@@ -1,277 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useReducer,
-  useCallback,
-  type ReactNode,
-} from "react";
-import type { Bookmark, Note, AnnotationEntry } from "@/types";
-import * as annotationsApi from "@/api/annotations";
-
-// ---------------------------------------------------------------------------
-// State
-// ---------------------------------------------------------------------------
-
-interface AnnotationsState {
-  bookmarks: Bookmark[];
-  notes: Note[];
-  bookmarksLoading: boolean;
-  notesLoading: boolean;
-  error: string | null;
-  selectedBookId: string | null;
-}
-
-const initialState: AnnotationsState = {
-  bookmarks: [],
-  notes: [],
-  bookmarksLoading: false,
-  notesLoading: false,
-  error: null,
-  selectedBookId: null,
-};
-
-// ---------------------------------------------------------------------------
-// Actions
-// ---------------------------------------------------------------------------
-
-type AnnotationsAction =
-  | { type: "FETCH_BOOKMARKS_START" }
-  | { type: "FETCH_BOOKMARKS_SUCCESS"; payload: Bookmark[] }
-  | { type: "FETCH_NOTES_START" }
-  | { type: "FETCH_NOTES_SUCCESS"; payload: Note[] }
-  | { type: "SET_ERROR"; payload: string }
-  | { type: "CLEAR_ERROR" }
-  | { type: "REMOVE_BOOKMARK"; payload: string }
-  | { type: "REMOVE_NOTE"; payload: string }
-  | { type: "UPDATE_NOTE"; payload: Note }
-  | { type: "ADD_BOOKMARK"; payload: Bookmark }
-  | { type: "ADD_NOTE"; payload: Note }
-  | { type: "SET_SELECTED_BOOK"; payload: string | null };
-
-// ---------------------------------------------------------------------------
-// Reducer
-// ---------------------------------------------------------------------------
-
-function annotationsReducer(
-  state: AnnotationsState,
-  action: AnnotationsAction
-): AnnotationsState {
-  switch (action.type) {
-    case "FETCH_BOOKMARKS_START":
-      return { ...state, bookmarksLoading: true, error: null };
-    case "FETCH_BOOKMARKS_SUCCESS":
-      return { ...state, bookmarks: action.payload, bookmarksLoading: false };
-    case "FETCH_NOTES_START":
-      return { ...state, notesLoading: true, error: null };
-    case "FETCH_NOTES_SUCCESS":
-      return { ...state, notes: action.payload, notesLoading: false };
-    case "SET_ERROR":
-      return { ...state, error: action.payload, bookmarksLoading: false, notesLoading: false };
-    case "CLEAR_ERROR":
-      return { ...state, error: null };
-    case "REMOVE_BOOKMARK":
-      return {
-        ...state,
-        bookmarks: state.bookmarks.filter((b) => b.id !== action.payload),
-      };
-    case "REMOVE_NOTE":
-      return {
-        ...state,
-        notes: state.notes.filter((n) => n.id !== action.payload),
-      };
-    case "UPDATE_NOTE":
-      return {
-        ...state,
-        notes: state.notes.map((n) =>
-          n.id === action.payload.id ? action.payload : n
-        ),
-      };
-    case "ADD_BOOKMARK":
-      return {
-        ...state,
-        bookmarks: [action.payload, ...state.bookmarks],
-      };
-    case "ADD_NOTE":
-      return {
-        ...state,
-        notes: [action.payload, ...state.notes],
-      };
-    case "SET_SELECTED_BOOK":
-      return { ...state, selectedBookId: action.payload };
-    default:
-      return state;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Context
-// ---------------------------------------------------------------------------
-
-interface AnnotationsContextValue {
-  state: AnnotationsState;
-  loadBookmarks: (bookId?: string) => Promise<void>;
-  loadNotes: (bookId?: string) => Promise<void>;
-  addBookmark: (data: { book: string; page: number; location_text?: string }) => Promise<Bookmark>;
-  addNote: (data: { book: string; page: number; location_text?: string; content: string }) => Promise<Note>;
-  editNote: (id: string, content: string) => Promise<Note>;
-  removeBookmark: (id: string) => Promise<void>;
-  removeNote: (id: string) => Promise<void>;
-  setSelectedBook: (bookId: string | null) => void;
-  /** Merged list of bookmarks + notes, sorted by created_at desc */
-  mergedAnnotations: AnnotationEntry[];
-}
-
-const AnnotationsContext = createContext<AnnotationsContextValue | null>(null);
-
-// ---------------------------------------------------------------------------
-// Provider
-// ---------------------------------------------------------------------------
-
-export function AnnotationsProvider({
-  children,
-}: {
-  children: ReactNode;
-}): React.ReactElement {
-  const [state, dispatch] = useReducer(annotationsReducer, initialState);
-
-  const loadBookmarks = useCallback(async (bookId?: string) => {
-    dispatch({ type: "FETCH_BOOKMARKS_START" });
-    try {
-      const response = await annotationsApi.fetchBookmarks(bookId);
-      dispatch({ type: "FETCH_BOOKMARKS_SUCCESS", payload: response.results });
-    } catch (err) {
-      dispatch({
-        type: "SET_ERROR",
-        payload: err instanceof Error ? err.message : "Failed to load bookmarks",
-      });
-    }
-  }, []);
-
-  const loadNotes = useCallback(async (bookId?: string) => {
-    dispatch({ type: "FETCH_NOTES_START" });
-    try {
-      const response = await annotationsApi.fetchNotes(bookId);
-      dispatch({ type: "FETCH_NOTES_SUCCESS", payload: response.results });
-    } catch (err) {
-      dispatch({
-        type: "SET_ERROR",
-        payload: err instanceof Error ? err.message : "Failed to load notes",
-      });
-    }
-  }, []);
-
-  const addBookmark = useCallback(
-    async (data: {
-      book: string;
-      page: number;
-      location_text?: string;
-    }): Promise<Bookmark> => {
-      const bookmark = await annotationsApi.createBookmark(data);
-      dispatch({ type: "ADD_BOOKMARK", payload: bookmark });
-      return bookmark;
-    },
-    []
-  );
-
-  const addNote = useCallback(
-    async (data: {
-      book: string;
-      page: number;
-      location_text?: string;
-      content: string;
-    }): Promise<Note> => {
-      const note = await annotationsApi.createNote(data);
-      dispatch({ type: "ADD_NOTE", payload: note });
-      return note;
-    },
-    []
-  );
-
-  const editNote = useCallback(
-    async (id: string, content: string): Promise<Note> => {
-      const updated = await annotationsApi.updateNote(id, { content });
-      dispatch({ type: "UPDATE_NOTE", payload: updated });
-      return updated;
-    },
-    []
-  );
-
-  const removeBookmark = useCallback(async (id: string) => {
-    await annotationsApi.deleteBookmark(id);
-    dispatch({ type: "REMOVE_BOOKMARK", payload: id });
-  }, []);
-
-  const removeNote = useCallback(async (id: string) => {
-    await annotationsApi.deleteNote(id);
-    dispatch({ type: "REMOVE_NOTE", payload: id });
-  }, []);
-
-  const setSelectedBook = useCallback((bookId: string | null) => {
-    dispatch({ type: "SET_SELECTED_BOOK", payload: bookId });
-  }, []);
-
-  // Build merged annotations list sorted by created_at desc
-  const mergedAnnotations: AnnotationEntry[] = [
-    ...state.bookmarks.map(
-      (b): AnnotationEntry => ({
-        id: b.id,
-        kind: "bookmark",
-        book_title: b.book_title,
-        book_id: b.book,
-        page: b.page,
-        location_text: b.location_text,
-        created_at: b.created_at,
-        updated_at: b.updated_at,
-      })
-    ),
-    ...state.notes.map(
-      (n): AnnotationEntry => ({
-        id: n.id,
-        kind: "note",
-        book_title: n.book_title,
-        book_id: n.book,
-        page: n.page,
-        location_text: n.location_text,
-        content: n.content,
-        created_at: n.created_at,
-        updated_at: n.updated_at,
-      })
-    ),
-  ].sort(
-    (a, b) =>
-      new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-  );
-
-  const value: AnnotationsContextValue = {
-    state,
-    loadBookmarks,
-    loadNotes,
-    addBookmark,
-    addNote,
-    editNote,
-    removeBookmark,
-    removeNote,
-    setSelectedBook,
-    mergedAnnotations,
-  };
-
-  return (
-    <AnnotationsContext.Provider value={value}>
-      {children}
-    </AnnotationsContext.Provider>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Hook
-// ---------------------------------------------------------------------------
-
-export function useAnnotations(): AnnotationsContextValue {
-  const context = useContext(AnnotationsContext);
-  if (!context) {
-    throw new Error(
-      "useAnnotations must be used within an AnnotationsProvider"
-    );
-  }
-  return context;
-}

frontend/src/context/AuthContext.tsx

@@ -1,63 +0,0 @@
-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;
-}

frontend/src/hooks/index.ts

@@ -1 +0,0 @@
-export { usePaginatedQuery } from "./usePaginatedQuery";

frontend/src/hooks/useAuth.tsx

@@ -0,0 +1,76 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import type { UserProfile } from "../types/auth";
+import { fetchProfile, login as apiLogin, register as apiRegister } from "../services/authService";
+import type { LoginCredentials, RegisterData } from "../types/auth";
+
+interface AuthContextValue {
+  user: UserProfile | null;
+  isLoading: boolean;
+  login: (credentials: LoginCredentials) => Promise<void>;
+  register: (data: RegisterData) => Promise<void>;
+  logout: () => void;
+  refreshProfile: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: React.ReactNode }): React.ReactElement {
+  const [user, setUser] = useState<UserProfile | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const refreshProfile = useCallback(async () => {
+    const token = localStorage.getItem("access_token");
+    if (!token) {
+      setUser(null);
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const profile = await fetchProfile();
+      setUser(profile);
+    } catch {
+      localStorage.removeItem("access_token");
+      localStorage.removeItem("refresh_token");
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refreshProfile();
+  }, [refreshProfile]);
+
+  const login = useCallback(async (credentials: LoginCredentials) => {
+    const tokens = await apiLogin(credentials);
+    localStorage.setItem("access_token", tokens.access);
+    localStorage.setItem("refresh_token", tokens.refresh);
+    const profile = await fetchProfile();
+    setUser(profile);
+  }, []);
+
+  const register = useCallback(async (data: RegisterData) => {
+    await apiRegister(data);
+    // Auto-login after registration
+    await login({ email: data.email, password: data.password });
+  }, [login]);
+
+  const logout = useCallback(() => {
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    setUser(null);
+  }, []);
+
+  const value = useMemo<AuthContextValue>(
+    () => ({ user, isLoading, login, register, logout, refreshProfile }),
+    [user, isLoading, login, register, logout, refreshProfile],
+  );
+
+  return <AuthContext.Provider value={value}>{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;
+}

frontend/src/hooks/useDocuments.ts

@@ -0,0 +1,51 @@
+import { useState, useCallback } from "react";
+import api from "../services/api";
+import type { Document, PaginatedResponse } from "@cloud-reader/shared";
+
+interface UseDocumentsReturn {
+  documents: Document[];
+  isLoading: boolean;
+  error: string | null;
+  totalCount: number;
+  fetchDocuments: (params?: Record<string, string | number>) => Promise<void>;
+  fetchDocument: (id: number) => Promise<Document | null>;
+  deleteDocument: (id: number) => Promise<void>;
+}
+
+export function useDocuments(): UseDocumentsReturn {
+  const [documents, setDocuments] = useState<Document[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [totalCount, setTotalCount] = useState(0);
+
+  const fetchDocuments = useCallback(async (params?: Record<string, string | number>) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const { data } = await api.get<PaginatedResponse<Document>>("/documents/", { params });
+      setDocuments(data.results);
+      setTotalCount(data.count);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to fetch documents");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const fetchDocument = useCallback(async (id: number): Promise<Document | null> => {
+    try {
+      const { data } = await api.get<Document>(`/documents/${id}/`);
+      return data;
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to fetch document");
+      return null;
+    }
+  }, []);
+
+  const deleteDocument = useCallback(async (id: number) => {
+    await api.delete(`/documents/${id}/`);
+    setDocuments((prev) => prev.filter((d) => d.id !== id));
+  }, []);
+
+  return { documents, isLoading, error, totalCount, fetchDocuments, fetchDocument, deleteDocument };
+}

frontend/src/hooks/usePaginatedQuery.ts

@@ -1,69 +0,0 @@
-import { useState, useCallback, useRef, useEffect } from "react";
-import type { PaginatedResponse } from "@/types";
-
-interface UsePaginatedQueryOptions<T> {
-  fetchFn: (cursor?: string) => Promise<PaginatedResponse<T>>;
-}
-
-interface UsePaginatedQueryResult<T> {
-  items: T[];
-  loading: boolean;
-  error: string | null;
-  hasMore: boolean;
-  loadMore: () => Promise<void>;
-  refresh: () => Promise<void>;
-}
-
-/**
- * Hook for paginated list fetching with infinite scroll support.
- */
-export function usePaginatedQuery<T>({
-  fetchFn,
-}: UsePaginatedQueryOptions<T>): UsePaginatedQueryResult<T> {
-  const [items, setItems] = useState<T[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [nextCursor, setNextCursor] = useState<string | null>(null);
-  const loadingRef = useRef(false);
-
-  const refresh = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const response = await fetchFn();
-      setItems(response.results);
-      setNextCursor(response.next);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to fetch data");
-    } finally {
-      setLoading(false);
-    }
-  }, [fetchFn]);
-
-  const loadMore = useCallback(async () => {
-    if (!nextCursor || loadingRef.current) return;
-    loadingRef.current = true;
-    try {
-      const response = await fetchFn(nextCursor);
-      setItems((prev) => [...prev, ...response.results]);
-      setNextCursor(response.next);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load more");
-    } finally {
-      loadingRef.current = false;
-    }
-  }, [nextCursor, fetchFn]);
-
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
-
-  return {
-    items,
-    loading,
-    error,
-    hasMore: nextCursor !== null,
-    loadMore,
-    refresh,
-  };
-}

frontend/src/main.tsx

@@ -1,53 +1,19 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { Layout } from "@/components/layout";
-import { BookmarksNotesPage } from "@/components/annotations/BookmarksNotesPage";
-import "./styles.css";
-
-function App(): React.ReactElement {
-  const path = window.location.pathname;
-
-  // Simple client-side routing
-  if (path.startsWith("/books/") && path.includes("bookmarks-notes")) {
-    // /books/:id/bookmarks-notes
-    const bookId = path.split("/")[2];
-    return (
-      <Layout title="Cloud Reader">
-        <BookmarksNotesPage bookId={bookId} />
-      </Layout>
-    );
-  }
-
-  if (path === "/bookmarks-notes" || path === "/bookmarks-notes/") {
-    return (
-      <Layout title="Cloud Reader">
-        <BookmarksNotesPage />
-      </Layout>
-    );
-  }
-
-  // Default: landing page
-  return (
-    <Layout title="Cloud Reader">
-      <div className="page">
-        <h2>Welcome to Cloud Reader</h2>
-        <p>Your personal e-book reader with cross-device sync.</p>
-        <div className="quick-links">
-          <a href="/bookmarks-notes" className="card-link">
-            <h3>Bookmarks & Notes</h3>
-            <p>View and manage all your annotations</p>
-          </a>
-        </div>
-      </div>
-    </Layout>
-  );
-}
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import { AuthProvider } from "./hooks/useAuth";
+import "./styles/global.css";
 
 const rootElement = document.getElementById("root");
-if (rootElement) {
-  ReactDOM.createRoot(rootElement).render(
+if (!rootElement) throw new Error("Root element not found");
+
+ReactDOM.createRoot(rootElement).render(
   <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
         <App />
-    </React.StrictMode>
-  );
-}
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>,
+);

frontend/src/pages/AddBook.tsx

@@ -1,57 +0,0 @@
-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>
-  );
-}

frontend/src/pages/AuthPage.tsx

@@ -1,57 +0,0 @@
-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} />; }

frontend/src/pages/BookDetailPage.tsx

@@ -1,159 +0,0 @@
-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>
-  );
-}

frontend/src/pages/CollectionsPage.tsx

@@ -0,0 +1,100 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import type { Collection } from "@cloud-reader/shared";
+import api from "../services/api";
+
+export default function CollectionsPage(): React.ReactElement {
+  const [collections, setCollections] = useState<Collection[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [newDesc, setNewDesc] = useState("");
+
+  const fetchCollections = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const { data } = await api.get<{ results: Collection[] }>("/collections/");
+      setCollections(data.results || data as unknown as Collection[]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchCollections();
+  }, [fetchCollections]);
+
+  const handleCreate = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault();
+    await api.post("/collections/", { name: newName, description: newDesc });
+    setNewName("");
+    setNewDesc("");
+    setShowCreate(false);
+    fetchCollections();
+  };
+
+  const handleDelete = async (id: number): Promise<void> => {
+    if (!confirm("Delete this collection?")) return;
+    await api.delete(`/collections/${id}/`);
+    fetchCollections();
+  };
+
+  return (
+    <div className="layout">
+      <header className="topbar">
+        <Link to="/library" className="btn-secondary">&larr; Library</Link>
+        <h1 className="logo">Collections</h1>
+        <button onClick={() => setShowCreate(true)} className="btn-primary">+ New Collection</button>
+      </header>
+
+      <main className="content">
+        {showCreate && (
+          <form onSubmit={handleCreate} className="create-collection-form">
+            <input
+              type="text"
+              placeholder="Collection name"
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+              required
+              autoFocus
+            />
+            <input
+              type="text"
+              placeholder="Description (optional)"
+              value={newDesc}
+              onChange={(e) => setNewDesc(e.target.value)}
+            />
+            <div className="form-actions">
+              <button type="submit" className="btn-primary">Create</button>
+              <button type="button" onClick={() => setShowCreate(false)} className="btn-secondary">Cancel</button>
+            </div>
+          </form>
+        )}
+
+        {isLoading ? (
+          <div className="loading">Loading collections...</div>
+        ) : collections.length === 0 ? (
+          <div className="empty-state">
+            <p>No collections yet. Group your documents into collections!</p>
+          </div>
+        ) : (
+          <div className="collection-list">
+            {collections.map((col) => (
+              <div key={col.id} className="collection-card">
+                <div className="collection-info">
+                  <h3>{col.name}</h3>
+                  <p className="collection-desc">{col.description}</p>
+                  <span className="collection-count">{col.document_count} document{col.document_count !== 1 ? "s" : ""}</span>
+                </div>
+                <div className="collection-actions">
+                  <Link to={`/collections/${col.id}`} className="btn-secondary">View</Link>
+                  <button onClick={() => handleDelete(col.id)} className="btn-danger">Delete</button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

frontend/src/pages/DocumentPage.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import type { DocumentDetail } from "@cloud-reader/shared";
+import api from "../services/api";
+
+export default function DocumentPage(): React.ReactElement {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [doc, setDoc] = useState<DocumentDetail | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchDoc = useCallback(async () => {
+    if (!id) return;
+    setIsLoading(true);
+    try {
+      const { data } = await api.get<DocumentDetail>(`/documents/${id}/`);
+      setDoc(data);
+    } catch {
+      navigate("/library");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [id, navigate]);
+
+  useEffect(() => {
+    fetchDoc();
+  }, [fetchDoc]);
+
+  const handleDelete = async (): Promise<void> => {
+    if (!id || !confirm("Delete this document?")) return;
+    await api.delete(`/documents/${id}/`);
+    navigate("/library");
+  };
+
+  if (isLoading) return <div className="loading">Loading document...</div>;
+  if (!doc) return <div className="not-found">Document not found</div>;
+
+  return (
+    <div className="layout">
+      <header className="topbar">
+        <Link to="/library" className="btn-secondary">&larr; Back</Link>
+        <h1 className="logo">{doc.title}</h1>
+        <div className="topbar-right">
+          <button onClick={handleDelete} className="btn-danger">Delete</button>
+        </div>
+      </header>
+
+      <main className="content document-detail">
+        <div className="doc-header">
+          <div className="doc-cover-large">
+            {doc.cover_url ? (
+              <img src={doc.cover_url} alt={doc.title} />
+            ) : (
+              <div className="doc-cover-placeholder-large">{doc.file_type.toUpperCase()}</div>
+            )}
+          </div>
+          <div className="doc-metadata">
+            <h2>{doc.title}</h2>
+            {doc.author && <p className="doc-author">by {doc.author}</p>}
+            <p className="doc-description">{doc.description}</p>
+            <div className="doc-stats">
+              <span>Type: {doc.file_type}</span>
+              <span>Size: {(doc.file_size / 1024 / 1024).toFixed(1)} MB</span>
+              {doc.page_count && <span>Pages: {doc.page_count}</span>}
+              <span>Uploaded: {new Date(doc.uploaded_at).toLocaleDateString()}</span>
+            </div>
+            {doc.tags.length > 0 && (
+              <div className="doc-tags">
+                {doc.tags.map((tag) => (
+                  <span key={tag} className="tag">{tag}</span>
+                ))}
+              </div>
+            )}
+            <Link to={`/read/${doc.id}`} className="btn-primary">Start Reading</Link>
+          </div>
+        </div>
+
+        {doc.recent_highlights.length > 0 && (
+          <section className="recent-highlights">
+            <h3>Recent Highlights</h3>
+            {doc.recent_highlights.map((hl) => (
+              <div key={hl.id} className="highlight-card" style={{ borderLeftColor: hl.color }}>
+                <p className="highlight-text">{hl.text}</p>
+                <span className="highlight-page">Page {hl.page}</span>
+              </div>
+            ))}
+          </section>
+        )}
+      </main>
+    </div>
+  );
+}

frontend/src/pages/Library.tsx

@@ -1,305 +0,0 @@
-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>
-  );
-}

frontend/src/pages/LibraryPage.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+import { useDocuments } from "../hooks/useDocuments";
+
+export default function LibraryPage(): React.ReactElement {
+  const { user, logout } = useAuth();
+  const { documents, isLoading, totalCount, fetchDocuments } = useDocuments();
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    fetchDocuments();
+  }, [fetchDocuments]);
+
+  const filtered = documents.filter(
+    (d) =>
+      d.title.toLowerCase().includes(search.toLowerCase()) ||
+      (d.author && d.author.toLowerCase().includes(search.toLowerCase())),
+  );
+
+  return (
+    <div className="layout">
+      <header className="topbar">
+        <h1 className="logo">Cloud Reader</h1>
+        <div className="topbar-right">
+          <span className="user-greeting">Hi, {user?.display_name || user?.email}</span>
+          <Link to="/settings" className="btn-secondary">Settings</Link>
+          <button onClick={logout} className="btn-secondary">Logout</button>
+        </div>
+      </header>
+
+      <main className="content">
+        <div className="library-header">
+          <h2>My Library ({totalCount})</h2>
+          <Link to="/upload" className="btn-primary">Upload Document</Link>
+        </div>
+
+        <div className="search-bar">
+          <input
+            type="text"
+            placeholder="Search by title or author..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </div>
+
+        {isLoading ? (
+          <div className="loading">Loading documents...</div>
+        ) : filtered.length === 0 ? (
+          <div className="empty-state">
+            <p>No documents yet. Upload your first document to start reading!</p>
+          </div>
+        ) : (
+          <div className="document-grid">
+            {filtered.map((doc) => (
+              <Link to={`/documents/${doc.id}`} key={doc.id} className="document-card">
+                <div className="doc-cover">
+                  {doc.cover_url ? (
+                    <img src={doc.cover_url} alt={doc.title} />
+                  ) : (
+                    <div className="doc-cover-placeholder">{doc.file_type.toUpperCase()}</div>
+                  )}
+                </div>
+                <div className="doc-info">
+                  <h3>{doc.title}</h3>
+                  {doc.author && <p className="doc-author">{doc.author}</p>}
+                  <div className="doc-meta">
+                    <span className="doc-type">{doc.file_type}</span>
+                    <span className="doc-size">{(doc.file_size / 1024 / 1024).toFixed(1)} MB</span>
+                    {doc.page_count && <span className="doc-pages">{doc.page_count} pages</span>}
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,65 @@
+import React, { FormEvent, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+
+export default function LoginPage(): React.ReactElement {
+  const { login } = useAuth();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = async (e: FormEvent): Promise<void> => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await login({ email, password });
+      navigate("/library");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <h1>Cloud Reader</h1>
+        <h2>Sign In</h2>
+        {error && <div className="error-message">{error}</div>}
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="email">Email</label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              autoFocus
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+          <button type="submit" disabled={submitting} className="btn-primary">
+            {submitting ? "Signing in..." : "Sign In"}
+          </button>
+        </form>
+        <p className="auth-link">
+          Don't have an account? <Link to="/register">Register</Link>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Reader.tsx

@@ -1,64 +0,0 @@
-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>
-  );
-}

frontend/src/pages/ReaderPage.tsx

@@ -0,0 +1,91 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import type { DocumentDetail } from "@cloud-reader/shared";
+import api from "../services/api";
+
+export default function ReaderPage(): React.ReactElement {
+  const { id } = useParams<{ id: string }>();
+  const [doc, setDoc] = useState<DocumentDetail | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const fetchDoc = useCallback(async () => {
+    if (!id) return;
+    const { data } = await api.get<DocumentDetail>(`/documents/${id}/`);
+    setDoc(data);
+    setCurrentPage(data.current_page || 1);
+  }, [id]);
+
+  useEffect(() => {
+    fetchDoc();
+  }, [fetchDoc]);
+
+  const updateProgress = useCallback(async (page: number) => {
+    if (!id) return;
+    setCurrentPage(page);
+    try {
+      await api.post(`/reading/progress/`, {
+        document: Number(id),
+        current_page: page,
+        total_pages: doc?.total_pages || 0,
+      });
+    } catch {
+      // Silently fail — reading progress is non-critical
+    }
+  }, [id, doc?.total_pages]);
+
+  if (!doc) return <div className="loading">Loading reader...</div>;
+
+  return (
+    <div className="reader-layout">
+      <header className="reader-topbar">
+        <Link to={`/documents/${id}`} className="btn-secondary">&larr; Back</Link>
+        <span className="reader-title">{doc.title}</span>
+        <span className="reader-page-info">
+          Page {currentPage} of {doc.total_pages || "?"}
+        </span>
+      </header>
+
+      <main className="reader-content">
+        <div className="reader-viewport">
+          <p className="reader-placeholder">
+            Reader view for <strong>{doc.title}</strong>.<br />
+            File type: {doc.file_type} | Pages: {doc.page_count || "Unknown"}
+          </p>
+          <p className="reader-placeholder-sub">
+            Document rendering will be available in a future iteration.<br />
+            Your reading progress is being saved as you navigate.
+          </p>
+        </div>
+      </main>
+
+      <footer className="reader-controls">
+        <button
+          className="btn-secondary"
+          disabled={currentPage <= 1}
+          onClick={() => updateProgress(Math.max(1, currentPage - 1))}
+        >
+          Previous Page
+        </button>
+        <div className="page-input">
+          <input
+            type="number"
+            min={1}
+            max={doc.total_pages || 9999}
+            value={currentPage}
+            onChange={(e) => setCurrentPage(Number(e.target.value))}
+            onBlur={(e) => updateProgress(Number(e.target.value))}
+            onKeyDown={(e) => e.key === "Enter" && updateProgress(currentPage)}
+          />
+          {doc.total_pages && <span>of {doc.total_pages}</span>}
+        </div>
+        <button
+          className="btn-secondary"
+          disabled={doc.total_pages ? currentPage >= doc.total_pages : false}
+          onClick={() => updateProgress(currentPage + 1)}
+        >
+          Next Page
+        </button>
+      </footer>
+    </div>
+  );
+}

frontend/src/pages/RegisterPage.tsx

@@ -0,0 +1,77 @@
+import React, { FormEvent, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../hooks/useAuth";
+
+export default function RegisterPage(): React.ReactElement {
+  const { register } = useAuth();
+  const navigate = useNavigate();
+  const [form, setForm] = useState({
+    email: "",
+    username: "",
+    display_name: "",
+    password: "",
+    password_confirm: "",
+  });
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleChange = (field: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    setForm((prev) => ({ ...prev, [field]: e.target.value }));
+  };
+
+  const handleSubmit = async (e: FormEvent): Promise<void> => {
+    e.preventDefault();
+    if (form.password !== form.password_confirm) {
+      setError("Passwords do not match");
+      return;
+    }
+    setError(null);
+    setSubmitting(true);
+    try {
+      await register(form);
+      navigate("/library");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="auth-page">
+      <div className="auth-card">
+        <h1>Cloud Reader</h1>
+        <h2>Create Account</h2>
+        {error && <div className="error-message">{error}</div>}
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="email">Email</label>
+            <input id="email" type="email" value={form.email} onChange={handleChange("email")} required />
+          </div>
+          <div className="form-group">
+            <label htmlFor="username">Username</label>
+            <input id="username" type="text" value={form.username} onChange={handleChange("username")} required />
+          </div>
+          <div className="form-group">
+            <label htmlFor="display_name">Display Name (optional)</label>
+            <input id="display_name" type="text" value={form.display_name} onChange={handleChange("display_name")} />
+          </div>
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input id="password" type="password" value={form.password} onChange={handleChange("password")} required minLength={8} />
+          </div>
+          <div className="form-group">
+            <label htmlFor="password_confirm">Confirm Password</label>
+            <input id="password_confirm" type="password" value={form.password_confirm} onChange={handleChange("password_confirm")} required />
+          </div>
+          <button type="submit" disabled={submitting} className="btn-primary">
+            {submitting ? "Creating account..." : "Create Account"}
+          </button>
+        </form>
+        <p className="auth-link">
+          Already have an account? <Link to="/login">Sign In</Link>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Settings.tsx

@@ -1,80 +0,0 @@
-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>
-  );
-}