feat: book search and discovery with real-time search, filters, and detail view

README.md

@@ -14,7 +14,7 @@ cloud-reader/
 │   │   └── annotations/ # Bookmarks and notes
 │   ├── manage.py
 │   └── requirements.txt
-├── frontend/        # React + Vite + TypeScript (web frontend)
+├── frontend/        # React + Vite + TypeScript (canonical frontend)
 │   ├── src/
 │   │   ├── api/         # API client (axios with JWT refresh)
 │   │   ├── components/  # Reusable components
@@ -23,23 +23,6 @@ cloud-reader/
 │   │   ├── pages/       # Route pages (Library, Reader, AddBook, Auth, Settings)
 │   │   └── types/       # TypeScript type definitions
 │   └── package.json
-├── mobile/          # Expo React Native app (mobile frontend)
-│   ├── src/
-│   │   ├── api/         # API client (axios with JWT refresh via AsyncStorage)
-│   │   ├── components/  # Reusable UI components
-│   │   ├── context/     # Auth context
-│   │   ├── hooks/       # Custom hooks
-│   │   ├── navigation/  # React Navigation (Auth stack + Main tabs)
-│   │   ├── screens/     # Screen-level components (Login, Library, etc.)
-│   │   └── types/       # Mobile-specific types
-│   ├── App.tsx
-│   └── app.json
-├── packages/
-│   └── shared/       # @cloud-reader/shared — domain types & utilities
-│       └── src/
-│           ├── types.ts   # Shared domain types (Book, User, Bookmark, Note, etc.)
-│           └── utils.ts   # Date formatting, validation, API endpoint constants
-├── package.json      # Root — yarn workspaces config
 └── docker-compose.yml
 ```
 
@@ -67,24 +50,8 @@ yarn install
 yarn dev
 ```
 
-### Mobile (Expo)
-```bash
-# From monorepo root — installs all workspaces including mobile
-yarn install
-
-# Start Expo dev server
-yarn workspace @cloud-reader/mobile start
-
-# Or cd into mobile and run directly
-cd mobile
-npx expo start
-```
-
-> The mobile app requires the backend to be running. Set `EXPO_PUBLIC_API_URL` environment variable in your shell or `.env` file to point to the backend (defaults to `http://10.0.2.2:8000` for Android emulator).
-
 ## 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.
+- `api/` and `web/` directories removed.
-- `mobile/` added as Expo React Native app with shared `@cloud-reader/shared` package.

backend/apps/reader/apps.py

@@ -1,7 +0,0 @@
-from django.apps import AppConfig
-
-
-class ReaderConfig(AppConfig):
-    default_auto_field = "django.db.models.BigAutoField"
-    name = "apps.reader"
-    verbose_name = "Reader Settings"

backend/apps/reader/models.py

@@ -1,53 +0,0 @@
-from django.conf import settings
-from django.db import models
-
-
-class ReadingSettings(models.Model):
-    """Per-user reading preferences for the e-book reader view."""
-
-    THEME_CHOICES = [
-        ("sepia", "Sepia"),
-        ("dark", "Dark"),
-        ("light", "Light"),
-        ("paper", "Paper"),
-    ]
-
-    FONT_CHOICES = [
-        ("sans-serif", "Sans-serif"),
-        ("serif", "Serif"),
-        ("monospace", "Monospace"),
-    ]
-
-    ORIENTATION_CHOICES = [
-        ("auto", "Auto"),
-        ("portrait", "Portrait"),
-        ("landscape", "Landscape"),
-    ]
-
-    user = models.OneToOneField(
-        settings.AUTH_USER_MODEL,
-        on_delete=models.CASCADE,
-        related_name="reading_settings",
-        primary_key=True,
-    )
-    font_family = models.CharField(max_length=32, choices=FONT_CHOICES, default="serif")
-    font_size = models.PositiveSmallIntegerField(default=18)
-    line_height = models.FloatField(default=1.6)
-    margin_width = models.PositiveSmallIntegerField(default=16)
-    background_color = models.CharField(max_length=7, default="#f5f0eb")
-    text_color = models.CharField(max_length=7, default="#1a1a1a")
-    brightness = models.PositiveSmallIntegerField(default=100)
-    orientation_lock = models.CharField(
-        max_length=16, choices=ORIENTATION_CHOICES, default="auto"
-    )
-    theme = models.CharField(max_length=32, choices=THEME_CHOICES, default="sepia")
-    created_at = models.DateTimeField(auto_now_add=True)
-    updated_at = models.DateTimeField(auto_now=True)
-
-    class Meta:
-        db_table = "reader_reading_settings"
-        verbose_name = "Reading Settings"
-        verbose_name_plural = "Reading Settings"
-
-    def __str__(self) -> str:
-        return f"{self.user} — {self.theme} ({self.font_size}px)"

backend/apps/reader/serializers.py

@@ -1,63 +0,0 @@
-from rest_framework import serializers
-
-from apps.reader.models import ReadingSettings
-
-# Theme presets mapped to colors
-THEME_COLORS = {
-    "sepia": {"background_color": "#f5f0eb", "text_color": "#1a1a1a"},
-    "dark": {"background_color": "#1a1a2e", "text_color": "#e0e0e0"},
-    "light": {"background_color": "#ffffff", "text_color": "#1a1a1a"},
-    "paper": {"background_color": "#e8e0d4", "text_color": "#2c2c2c"},
-}
-
-
-class ReadingSettingsSerializer(serializers.ModelSerializer):
-    """Serialize ReadingSettings for the current user."""
-
-    class Meta:
-        model = ReadingSettings
-        fields = [
-            "font_family",
-            "font_size",
-            "line_height",
-            "margin_width",
-            "background_color",
-            "text_color",
-            "brightness",
-            "orientation_lock",
-            "theme",
-            "created_at",
-            "updated_at",
-        ]
-        read_only_fields = ["created_at", "updated_at"]
-
-    def validate_font_size(self, value: int) -> int:
-        if value < 12 or value > 32:
-            raise serializers.ValidationError("Font size must be between 12 and 32.")
-        return value
-
-    def validate_line_height(self, value: float) -> float:
-        if value < 1.2 or value > 2.0:
-            raise serializers.ValidationError("Line height must be between 1.2 and 2.0.")
-        return value
-
-    def validate_margin_width(self, value: int) -> int:
-        if value < 8 or value > 48:
-            raise serializers.ValidationError("Margin width must be between 8 and 48.")
-        return value
-
-    def validate_brightness(self, value: int) -> int:
-        if value < 0 or value > 100:
-            raise serializers.ValidationError("Brightness must be between 0 and 100.")
-        return value
-
-    def validate(self, attrs):
-        """Sync theme colors when theme changes, unless explicit colors provided."""
-        theme = attrs.get("theme")
-        if theme and theme in THEME_COLORS:
-            # Only auto-set colors if not explicitly provided
-            if "background_color" not in attrs:
-                attrs["background_color"] = THEME_COLORS[theme]["background_color"]
-            if "text_color" not in attrs:
-                attrs["text_color"] = THEME_COLORS[theme]["text_color"]
-        return attrs

backend/apps/reader/urls.py

@@ -1,7 +0,0 @@
-from django.urls import path
-
-from apps.reader.views import reading_settings_view
-
-urlpatterns = [
-    path("settings/", reading_settings_view, name="reading-settings"),
-]

backend/apps/reader/views.py

@@ -1,33 +0,0 @@
-from rest_framework import permissions, status
-from rest_framework.decorators import api_view, permission_classes
-from rest_framework.request import Request
-from rest_framework.response import Response
-
-from apps.reader.models import ReadingSettings
-from apps.reader.serializers import ReadingSettingsSerializer
-
-
-@api_view(["GET", "PUT", "PATCH"])
-@permission_classes([permissions.IsAuthenticated])
-def reading_settings_view(request: Request) -> Response:
-    """Get or update the current user's reading settings.
-
-    GET  → return existing settings (auto-create defaults if missing)
-    PUT  → create or fully replace settings
-    PATCH → partial update
-    """
-    user = request.user
-    settings, created = ReadingSettings.objects.get_or_create(user=user)
-
-    if request.method == "GET":
-        serializer = ReadingSettingsSerializer(settings)
-        return Response(serializer.data)
-
-    if request.method == "PUT":
-        serializer = ReadingSettingsSerializer(settings, data=request.data)
-    elif request.method == "PATCH":
-        serializer = ReadingSettingsSerializer(settings, data=request.data, partial=True)
-
-    serializer.is_valid(raise_exception=True)
-    serializer.save()
-    return Response(serializer.data, status=status.HTTP_200_OK)

backend/config/django.py

@@ -40,7 +40,6 @@ INSTALLED_APPS = [
     "apps.users",
     "apps.books",
     "apps.annotations",
-    "apps.reader",
 ]
 
 MIDDLEWARE = [

backend/config/urls.py

@@ -6,5 +6,4 @@ urlpatterns = [
     path("api/auth/", include("apps.users.urls")),
     path("api/books/", include("apps.books.urls")),
     path("api/annotations/", include("apps.annotations.urls")),
-    path("api/reader/", include("apps.reader.urls")),
 ]

docs/001-customizable-mobile-reading-experience.md

@@ -1,246 +0,0 @@
-# US: Customizable Mobile Reading Experience
-
-**Issue:** https://gitea-dev.codescripters.org/HermesFactory/cloud-reader/issues (TBD)
-
-## Overview
-
-Add a full-screen reading view for ebooks with customizable typography, themes,
-table of contents navigation, and orientation support. Mobile-first, responsive
-design that adapts to any screen size.
-
----
-
-## Backend Specification
-
-### New Models
-
-#### `apps.books.models.Chapter`
-
-| Field        | Type               | Notes                          |
-|-------------|--------------------|--------------------------------|
-| id          | AutoField (PK)     |                                |
-| book        | FK -> Book         | related_name="chapters"        |
-| title       | CharField(512)     | Chapter title                  |
-| number      | PositiveIntegerField | Chapter ordering / TOC index |
-| content     | TextField          | Chapter text/markdown content  |
-| created_at  | DateTimeField      | auto_now_add                   |
-| updated_at  | DateTimeField      | auto_now                       |
-
-**Constraints:** UniqueConstraint(book, chapter_number)
-**Ordering:** [book, number]
-**Index:** FK to book with db_index
-
-#### `apps.books.models.ReadingProgress`
-
-| Field             | Type               | Notes                          |
-|------------------|--------------------|--------------------------------|
-| id               | AutoField (PK)     |                                |
-| user             | FK -> User         | related_name="reading_progress"|
-| book             | FK -> Book         | related_name="reading_progress"|
-| current_chapter  | PositiveIntegerField | Last chapter number          |
-| current_position | PositiveIntegerField | Position within chapter (paragraph) |
-| percentage       | FloatField         | 0.0 - 100.0 overall progress  |
-| updated_at       | DateTimeField      | auto_now                       |
-
-**Constraints:** UniqueConstraint(user, book)
-**Indexes:** (user, book) composite, (user) filter for list queries
-
-#### `apps.reader.models.ReadingSettings`
-
-New app `apps/reader/` for reading preferences, isolated from book data model.
-
-| Field              | Type               | Notes                         |
-|-------------------|--------------------|-------------------------------|
-| id                | AutoField (PK)     |                               |
-| user              | OneToOneField -> User | related_name="reading_settings" |
-| font_family       | CharField(32)      | "sans-serif", "serif", "monospace" |
-| font_size         | PositiveSmallIntegerField | 12-32, default 18       |
-| line_height       | FloatField         | 1.2 - 2.0, default 1.6       |
-| margin_width      | PositiveSmallIntegerField | 8-48, default 16 (px)   |
-| background_color  | CharField(7)       | Hex color, default "#f5f0eb" |
-| text_color        | CharField(7)       | Hex color, default "#1a1a1a" |
-| brightness        | PositiveSmallIntegerField | 0-100, default 100       |
-| orientation_lock  | CharField(16)      | "auto", "portrait", "landscape" |
-| theme             | CharField(32)      | "sepia", "dark", "light", "paper" |
-| created_at        | DateTimeField      | auto_now_add                  |
-| updated_at        | DateTimeField      | auto_now                      |
-
-### New API Endpoints
-
-All under `/api/` prefix, authenticated with JWT.
-
-#### Reader Settings (`/api/reader/settings/`)
-
-| Method | URL                          | Action                    |
-|--------|------------------------------|---------------------------|
-| GET    | /api/reader/settings/        | Get current user settings |
-| PUT    | /api/reader/settings/        | Create/update settings    |
-| PATCH  | /api/reader/settings/        | Partial update settings   |
-
-- Single-object endpoint (one settings record per user, auto-created on first GET)
-- Validation: font_size 12-32, line_height 1.2-2.0, margin_width 8-48
-
-#### Reading Progress (`/api/books/{id}/progress/`)
-
-| Method | URL                                    | Action                       |
-|--------|----------------------------------------|------------------------------|
-| GET    | /api/books/{id}/progress/              | Get reading progress for book|
-| PUT    | /api/books/{id}/progress/              | Create/update reading progress|
-
-- Nested under book detail
-- Auto-creates progress record on first PUT
-
-#### Chapters (`/api/books/{id}/chapters/`)
-
-| Method | URL                                    | Action                       |
-|--------|----------------------------------------|------------------------------|
-| GET    | /api/books/{id}/chapters/              | List chapters for book (TOC) |
-| GET    | /api/books/{id}/chapters/{number}/     | Get specific chapter content |
-
-- Ordering by `number`
-- Used by frontend TOC sidebar and content loading
-
----
-
-## Frontend Specification
-
-### New Pages
-
-#### `/reader/:bookId` — ReadingPage
-
-Full-screen reading view with:
-- Chapter content display (left/right swiping or scroll)
-- Bottom toolbar: TOC toggle, Settings toggle, Progress indicator
-- Top bar: Back button, Book title, Chapter title
-- Swipe/tap/page navigation between chapters
-
-### New Components
-
-#### `ReaderToolbar`
-- Fixed bottom toolbar
-- TOC button (opens TOC drawer)
-- Settings/theme button (opens settings panel)
-- Progress bar showing overall reading progress
-
-#### `TableOfContents`
-- Slide-in drawer from left
-- Lists all chapters with current chapter highlighted
-- Tap on chapter to navigate
-- Shows reading progress per chapter
-
-#### `ReadingSettingsPanel`
-- Slide-in drawer from right (or bottom sheet on mobile)
-- Controls:
-  - Theme presets: Sepia, Dark, Light, Paper
-  - Font family: Sans-serif, Serif, Monospace
-  - Font size slider (12-32)
-  - Line height slider (1.2-2.0)
-  - Margin/padding control
-  - Orientation lock toggle (Auto / Portrait / Landscape)
-- All changes persist immediately via API
-- LocalStorage fallback when offline
-
-### New Hooks
-
-#### `useReadingSettings(bookId)`
-- Fetches user reading settings from API
-- Returns current settings + update function
-- Applies CSS custom properties to document root
-- Falls back to defaults if API unavailable
-
-#### `useChapters(bookId)`
-- Fetches chapter list for TOC
-- Returns chapters array, current chapter, navigate function
-- Prefetches next/prev chapter content
-
-#### `useReadingProgress(bookId)`
-- Fetches/updates reading progress
-- Auto-saves position on chapter change and periodic interval
-
-### New Types
-
-```typescript
-interface Chapter {
-  id: number;
-  book: number;
-  title: string;
-  number: number;
-  content?: string; // Only present when fetching individual chapter
-}
-
-interface ChapterSummary {
-  id: number;
-  book: number;
-  title: string;
-  number: number;
-}
-
-interface ReadingSettings {
-  font_family: "sans-serif" | "serif" | "monospace";
-  font_size: number;
-  line_height: number;
-  margin_width: number;
-  background_color: string;
-  text_color: string;
-  brightness: number;
-  orientation_lock: "auto" | "portrait" | "landscape";
-  theme: "sepia" | "dark" | "light" | "paper";
-}
-
-interface ReadingProgress {
-  current_chapter: number;
-  current_position: number;
-  percentage: number;
-  updated_at: string;
-}
-```
-
-### CSS / Theming
-
-Reading view uses CSS custom properties driven by reading settings:
-
-```css
-:root {
-  --reader-bg: var(--bg-color, #f5f0eb);
-  --reader-text: var(--text-color, #1a1a1a);
-  --reader-font-family: var(--font-family, "Georgia", serif);
-  --reader-font-size: var(--font-size, 18px);
-  --reader-line-height: var(--line-height, 1.6);
-  --reader-margin: var(--margin-width, 16px);
-}
-```
-
-Three theme presets:
-- **Sepia**: `bg:#f5f0eb`, `text:#1a1a1a` — warm, easy on eyes
-- **Dark**: `bg:#1a1a2e`, `text:#e0e0e0` — for low-light reading
-- **Light**: `bg:#ffffff`, `text:#1a1a1a` — crisp and clean
-- **Paper**: `bg:#e8e0d4`, `text:#2c2c2c` — book-like feel
-
-### Orientation Support
-
-- CSS `@media (orientation: portrait)` and `@media (orientation: landscape)` breakpoints
-- Reading settings panel includes orientation lock toggle
-- On mobile, landscape mode expands content horizontally with wider margins
-- Portrait mode stacks controls vertically for thumb-reachable UI
-
-### Routing
-
-Add to App.tsx:
-```
-/                     → LibraryPage
-/books/:bookId        → BookDetailPage
-/reader/:bookId       → ReadingPage
-```
-
----
-
-## Implementation Order
-
-1. Backend models + migrations (Chapter, ReadingProgress, ReadingSettings)
-2. Backend serializers + views + URLs
-3. Frontend types + API client
-4. Frontend hooks (useReadingSettings, useChapters, useReadingProgress)
-5. Frontend components (ReadingSettingsPanel, TableOfContents, ReaderToolbar)
-6. Frontend page (ReadingPage)
-7. Routing updates
-8. CSS / theming

docs/backend/009-expo-integration.md

@@ -1,96 +0,0 @@
-# 009 — Expo Mobile Application Integration
-
-**Issue:** #16
-**Status:** Draft
-**Created:** 2026-05-29
-
-## Objective
-
-Integrate an Expo-based React Native mobile application into the `cloud-reader` monorepo, sharing types, API client patterns, and configuration with the existing web frontend.
-
-## Directory Structure
-
-```
-cloud-reader/
-├── mobile/                    # Expo React Native app
-│   ├── package.json
-│   ├── app.json
-│   ├── tsconfig.json
-│   ├── babel.config.js
-│   ├── App.tsx               # Root component
-│   ├── src/
-│   │   ├── api/              # API client (mirrors frontend/src/api/ pattern)
-│   │   │   ├── client.ts     # Axios instance + JWT interceptor
-│   │   │   ├── books.ts      # Book API calls
-│   │   │   └── annotations.ts
-│   │   ├── screens/          # Screen-level components
-│   │   ├── components/       # Reusable UI components
-│   │   ├── navigation/       # React Navigation setup
-│   │   ├── context/          # Auth context, etc.
-│   │   ├── hooks/            # Custom hooks
-│   │   └── types/            # Mobile-specific types
-│   └── assets/
-├── packages/
-│   └── shared/
-│       ├── package.json
-│       ├── tsconfig.json
-│       └── src/
-│           ├── types.ts      # Shared domain types (Book, User, Bookmark, Note)
-│           └── utils.ts      # Shared utility functions
-└── package.json              # Root — updated workspace config
-```
-
-## Monorepo Workspace Config
-
-Root `package.json` workspaces array updated to include `"mobile"`, `"packages/shared"` alongside existing `"frontend"` and `"backend"`.
-
-## Shared `packages/shared`
-
-- `@cloud-reader/shared` package published within the monorepo
-- Exports:
-  - All domain types (`Book`, `BookSummary`, `Bookmark`, `Note`, `User`, `AnnotationEntry`, `PaginatedResponse`, `TokenResponse`)
-  - API endpoint constants
-  - Date formatting helpers
-  - Validation utilities (email regex, password strength check)
-
-## Mobile App Structure
-
-### API Client (`mobile/src/api/client.ts`)
-- Axios instance configured with:
-  - Base URL from environment variable (`EXPO_PUBLIC_API_URL`)
-  - JWT token attachment via request interceptor
-  - Token refresh response interceptor on 401
-  - Uses `AsyncStorage` for token persistence (instead of `localStorage`)
-
-### Navigation (`mobile/src/navigation/`)
-- React Navigation stack:
-  1. `AuthStack` — Login, Register screens
-  2. `MainTabs` — Library, Search, Settings tabs
-  3. `BookReader` — Full-screen reading view
-
-### Key Screens
-| Screen | Route | Purpose |
-|--------|-------|---------|
-| Login | `Auth/Login` | Email/password login |
-| Register | `Auth/Register` | User registration |
-| Library | `Main/Library` | Book list with filtering |
-| BookDetail | `Main/BookDetail` | Book metadata + actions |
-| Reader | `Reader/View` | EPUB/PDF rendering |
-| Search | `Main/Search` | Book discovery |
-| Settings | `Main/Settings` | Profile, theme, download mgmt |
-
-## Backend Changes Required
-
-None. The existing Django REST API already serves all endpoints needed by the mobile app. The mobile app communicates with the same backend via the shared API base URL.
-
-## Docker
-
-No changes to `docker-compose.yml` needed — the mobile app runs on-device or via Expo Go, not inside Docker.
-
-## CI/CD Considerations
-
-The monorepo structure supports a single pipeline that can:
-- `yarn install` at root (installs all workspaces)
-- `yarn workspace @cloud-reader/shared build`
-- `yarn workspace @cloud-reader/mobile build` (Expo EAS for mobile builds)
-- `yarn workspace @cloud-reader/frontend build` (Vite for web builds)

docs/backend/search-discovery-spec.md

@@ -69,7 +69,7 @@ Enable users to search books within the library and discover new books via filte
 - **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`)
+  - Reading status uses static enum values
 - **Results grid**: card layout showing cover, title, author, reading status badge
 - **Empty state**: "No books found" with clear message when results are empty
 - **Loading state**: spinner/skeleton while fetching
@@ -80,15 +80,6 @@ Enable users to search books within the library and discover new books via filte
 - 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 |
 |------|-----------|------|

docs/frontend/mobile-search-spec.md

@@ -1,99 +0,0 @@
-# Mobile Book Search & Discovery — Spec
-
-## Overview
-Enhance the existing book search experience with mobile-first features: voice search via the Web Speech API, real-time autocomplete suggestions, and touch-optimized responsive layout.
-
-## Prerequisites
-- Backend endpoints already exist (from `docs/backend/search-discovery-spec.md`):
-  - `GET /api/books/?q=...&genre=...&author=...&reading_status=...` — paginated search
-  - `GET /api/books/{id}/` — book detail
-  - `GET /api/books/genres/` — genre discovery
-  - `GET /api/books/authors/` — author discovery
-- Frontend `LibraryPage` and `BookDetailPage` components exist but lacked API client methods and types (fixed in this PR).
-
-## Frontend API Client Additions
-
-### `frontend/src/types/book.ts` — New exports
-
-```typescript
-export interface BookSearchParams {
-  q?: string;
-  genre?: string;
-  author?: string;
-  reading_status?: string;
-  ordering?: string;
-  page?: number;
-  page_size?: number;
-}
-
-export const READING_STATUS_OPTIONS: { value: string; label: string }[] = [
-  { value: "", label: "All Statuses" },
-  { value: "want_to_read", label: "Want to Read" },
-  { value: "reading", label: "Reading" },
-  { value: "finished", label: "Finished" },
-  { value: "dnf", label: "Did Not Finish" },
-];
-```
-
-### `frontend/src/api/books.ts` — New methods on `booksApi`
-
-| 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[]` |
-
-## Mobile Features
-
-### 1. Voice Search
-- **Hook**: `useVoiceSearch` in `frontend/src/hooks/useVoiceSearch.ts`
-- Uses the Web Speech API (`SpeechRecognition` / `webkitSpeechRecognition`)
-- Returns: `{ isListening, transcript, isSupported, startListening, stopListening, hasError }`
-- Renders a microphone icon button next to the search input
-- On mobile, tapping the mic icon triggers the native speech recognition prompt
-- On success, populates the search input with the transcript and triggers a search
-- Graceful degradation: if SpeechRecognition API is unavailable, the mic button is hidden
-
-### 2. Real-Time Suggestions (Autocomplete)
-- Component: `SearchSuggestions` rendered as a dropdown below the search input
-- On each keystroke (debounced 200ms), fetches `GET /api/books/?q=...&page_size=5` for suggestions
-- Shows up to 5 book title/author suggestions in a styled dropdown list
-- Clicking a suggestion navigates directly to `/books/{id}`
-- Clicking outside or pressing Escape dismisses the dropdown
-- Combines with existing full search results — suggestions are fast previews, not the main result list
-
-### 3. Mobile-Responsive Enhancements
-- Filters panel is **collapsed by default** on mobile, toggleable via a "Filters" button
-- Touch targets minimum 44px (WCAG 2.1)
-- Results grid switches to **single column** below 600px viewport width
-- Search input and filters panel stack vertically on small screens
-- Add CSS breakpoints via inline styles and a `useMediaQuery` hook
-- Bottom navigation-style action buttons on mobile (Add Book, Bookmarks, Settings become icon-only)
-
-## Component Hierarchy
-
-```
-LibraryPage
-├── Header (title, count, action buttons)
-├── SearchInput
-│   ├── TextInput (debounced 300ms)
-│   ├── VoiceSearchButton (microphone icon)
-│   └── SearchSuggestions (dropdown, debounced 200ms)
-├── FiltersButton (mobile: toggle; desktop: always visible)
-├── FiltersPanel (collapsible on mobile)
-│   ├── GenreSelect
-│   ├── AuthorSelect
-│   ├── StatusSelect
-│   └── ClearFiltersButton
-├── LoadingState (skeleton grid)
-├── ErrorState (message + retry button)
-├── EmptyState (no results / no books)
-└── ResultsGrid (responsive: auto-fill vs single column)
-```
-
-## Mobile-First CSS Strategy
-- Use inline styles with `@media` queries in a shared `breakpoints.ts` utility
-- Breakpoints: sm = 480px, md = 768px, lg = 1024px
-- Base styles are mobile-first (single column, full width)
-- Media queries expand to multi-column grid and horizontal layout on larger screens

frontend/src/App.tsx

@@ -6,10 +6,8 @@ const LibraryPage = lazy(() => import("./pages/Library").then((m) => ({ default:
 const BookDetailPage = lazy(() => import("./pages/BookDetailPage").then((m) => ({ default: m.BookDetailPage })));
 const ReaderPage = lazy(() => import("./pages/Reader").then((m) => ({ default: m.ReaderPage })));
 const AddBookPage = lazy(() => import("./pages/AddBook").then((m) => ({ default: m.AddBookPage })));
-const EditEBookPage = lazy(() => import("./pages/EditEBook").then((m) => ({ default: m.EditEBookPage })));
 const SettingsPage = lazy(() => import("./pages/Settings").then((m) => ({ default: m.SettingsPage })));
 const BookmarksNotesPage = lazy(() => import("./components/annotations/BookmarksNotesPage").then((m) => ({ default: m.BookmarksNotesPage })));
-const ReadingPage = lazy(() => import("./pages/ReadingPage").then((m) => ({ default: m.default })));
 
 const AuthPage = lazy(() =>
   import("./pages/AuthPage").then((m) => ({
@@ -40,9 +38,7 @@ function AppRoutes() {
         <Route path="/" element={<ProtectedRoute><LibraryPage /></ProtectedRoute>} />
         <Route path="/books/:id" element={<ProtectedRoute><BookDetailPage /></ProtectedRoute>} />
         <Route path="/reader/:id" element={<ProtectedRoute><ReaderPage /></ProtectedRoute>} />
-        <Route path="/read/:id" element={<ProtectedRoute><ReadingPage /></ProtectedRoute>} />
         <Route path="/add" element={<ProtectedRoute><AddBookPage /></ProtectedRoute>} />
-        <Route path="/edit/:id" element={<ProtectedRoute><EditEBookPage /></ProtectedRoute>} />
         <Route path="/settings" element={<ProtectedRoute><SettingsPage /></ProtectedRoute>} />
         <Route path="/bookmarks-notes/:bookId?" element={<ProtectedRoute><BookmarksNotesPage /></ProtectedRoute>} />
         <Route path="*" element={<Navigate to="/" replace />} />

frontend/src/api/books.ts

@@ -1,15 +1,5 @@
 import api from "./client";
-import type {
+import type { ContentResponse, EBookDetail, EBookListItem, ReadingProgress, ReadingSettings, TocResponse } from "../types/book";
-  BookDetail,
-  BookListItem,
-  BookSearchParams,
-  ContentResponse,
-  EBookDetail,
-  EBookListItem,
-  ReadingProgress,
-  ReadingSettings,
-  TocResponse,
-} from "../types/book";
 
 export const booksApi = {
   async getEBooks(): Promise<EBookListItem[]> {
@@ -17,51 +7,11 @@ export const booksApi = {
     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 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,

frontend/src/api/reader.ts

@@ -1,112 +0,0 @@
-/**
- * API client for the reader module — reading settings, chapters, and progress.
- */
-
-import type {
-  ChapterDetail,
-  ChapterSummary,
-  ReadingProgress,
-  ReadingSettings,
-} from "../types/reader";
-
-const API_BASE = "/api";
-
-/**
- * Fetch the current user's reading settings.
- * Auto-creates defaults on the server if none exist.
- */
-export async function getReadingSettings(): Promise<ReadingSettings> {
-  const response = await fetch(`${API_BASE}/reader/settings/`);
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch reading settings: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ReadingSettings>;
-}
-
-/**
- * Update (full or partial) the user's reading settings.
- */
-export async function updateReadingSettings(
-  settings: Partial<ReadingSettings>
-): Promise<ReadingSettings> {
-  const method = settings.theme !== undefined ? "PUT" : "PATCH";
-  const response = await fetch(`${API_BASE}/reader/settings/`, {
-    method,
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(settings),
-  });
-  if (!response.ok) {
-    throw new Error(
-      `Failed to update reading settings: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ReadingSettings>;
-}
-
-/**
- * Fetch the table of contents (chapter list) for a book.
- */
-export async function getChapters(bookId: number): Promise<ChapterSummary[]> {
-  const response = await fetch(`${API_BASE}/books/${bookId}/chapters/`);
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch chapters: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ChapterSummary[]>;
-}
-
-/**
- * Fetch a specific chapter with full content for reading.
- */
-export async function getChapterContent(
-  bookId: number,
-  chapterNumber: number
-): Promise<ChapterDetail> {
-  const response = await fetch(
-    `${API_BASE}/books/${bookId}/chapters/${chapterNumber}/`
-  );
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch chapter ${chapterNumber}: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ChapterDetail>;
-}
-
-/**
- * Fetch reading progress for a book.
- */
-export async function getReadingProgress(
-  bookId: number
-): Promise<ReadingProgress> {
-  const response = await fetch(`${API_BASE}/books/${bookId}/progress/`);
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch reading progress: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ReadingProgress>;
-}
-
-/**
- * Update reading progress for a book.
- */
-export async function updateReadingProgress(
-  bookId: number,
-  progress: Partial<ReadingProgress>
-): Promise<ReadingProgress> {
-  const response = await fetch(`${API_BASE}/books/${bookId}/progress/`, {
-    method: "PUT",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(progress),
-  });
-  if (!response.ok) {
-    throw new Error(
-      `Failed to update reading progress: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ReadingProgress>;
-}

frontend/src/components/reader/ReaderToolbar.tsx

@@ -1,67 +0,0 @@
-/**
- * ReaderToolbar — fixed bottom toolbar for the reading view.
- * Provides TOC toggle, settings toggle, and progress indicator.
- */
-
-import type { ReadingProgress } from "../../types/reader";
-
-interface ReaderToolbarProps {
-  bookTitle: string;
-  chapterTitle: string;
-  progress: ReadingProgress | null;
-  onToggleToc: () => void;
-  onToggleSettings: () => void;
-}
-
-export default function ReaderToolbar({
-  bookTitle,
-  chapterTitle,
-  progress,
-  onToggleToc,
-  onToggleSettings,
-}: ReaderToolbarProps) {
-  const percentage = progress?.percentage ?? 0;
-
-  return (
-    <>
-      {/* Top bar */}
-      <header className="reader-top-bar">
-        <button
-          type="button"
-          className="reader-bar-btn"
-          onClick={onToggleToc}
-          aria-label="Table of contents"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <line x1="3" y1="6" x2="21" y2="6" />
-            <line x1="3" y1="12" x2="21" y2="12" />
-            <line x1="3" y1="18" x2="21" y2="18" />
-          </svg>
-        </button>
-        <div className="reader-bar-title">
-          <span className="reader-bar-book">{bookTitle}</span>
-          <span className="reader-bar-chapter">{chapterTitle}</span>
-        </div>
-        <button
-          type="button"
-          className="reader-bar-btn"
-          onClick={onToggleSettings}
-          aria-label="Reading settings"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <circle cx="12" cy="12" r="3" />
-            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-          </svg>
-        </button>
-      </header>
-
-      {/* Bottom progress bar */}
-      <div className="reader-progress-bar">
-        <div
-          className="reader-progress-fill"
-          style={{ width: `${Math.min(percentage, 100)}%` }}
-        />
-      </div>
-    </>
-  );
-}

frontend/src/components/reader/ReadingSettingsPanel.tsx

@@ -1,232 +0,0 @@
-/**
- * ReadingSettingsPanel — slide-in drawer from the right for customizing
- * the reading experience: theme, font, sizing, orientation.
- */
-
-import { useState } from "react";
-import type {
-  FontFamily,
-  OrientationLock,
-  ReadingSettings,
-  ThemePreset,
-} from "../../types/reader";
-
-interface ReadingSettingsPanelProps {
-  settings: ReadingSettings;
-  isOpen: boolean;
-  onClose: () => void;
-  onUpdate: (partial: Partial<ReadingSettings>) => Promise<void>;
-}
-
-const THEME_OPTIONS: { value: ThemePreset; label: string }[] = [
-  { value: "sepia", label: "Sepia" },
-  { value: "dark", label: "Dark" },
-  { value: "light", label: "Light" },
-  { value: "paper", label: "Paper" },
-];
-
-const FONT_OPTIONS: { value: FontFamily; label: string }[] = [
-  { value: "sans-serif", label: "Sans-serif" },
-  { value: "serif", label: "Serif" },
-  { value: "monospace", label: "Monospace" },
-];
-
-const ORIENTATION_OPTIONS: { value: OrientationLock; label: string }[] = [
-  { value: "auto", label: "Auto" },
-  { value: "portrait", label: "Portrait" },
-  { value: "landscape", label: "Landscape" },
-];
-
-export default function ReadingSettingsPanel({
-  settings,
-  isOpen,
-  onClose,
-  onUpdate,
-}: ReadingSettingsPanelProps) {
-  const [saving, setSaving] = useState<Record<string, boolean>>({});
-
-  const handleChange = async (
-    key: keyof ReadingSettings,
-    value: string | number
-  ) => {
-    setSaving((prev) => ({ ...prev, [key]: true }));
-    try {
-      await onUpdate({ [key]: value as never });
-    } finally {
-      setSaving((prev) => ({ ...prev, [key]: false }));
-    }
-  };
-
-  return (
-    <>
-      {/* Overlay */}
-      {isOpen && (
-        <div
-          className="settings-overlay"
-          onClick={onClose}
-          onKeyDown={(e: React.KeyboardEvent) => {
-            if (e.key === "Escape") onClose();
-          }}
-          role="presentation"
-        />
-      )}
-
-      {/* Drawer */}
-      <aside
-        className={`settings-drawer ${isOpen ? "settings-drawer--open" : ""}`}
-      >
-        <div className="settings-header">
-          <h2 className="settings-title">Reading Settings</h2>
-          <button
-            type="button"
-            className="settings-close-btn"
-            onClick={onClose}
-            aria-label="Close settings"
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
-        </div>
-
-        <div className="settings-body">
-          {/* Theme Presets */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">Theme</h3>
-            <div className="theme-grid">
-              {THEME_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value}
-                  type="button"
-                  className={`theme-btn ${
-                    settings.theme === opt.value ? "theme-btn--active" : ""
-                  }`}
-                  onClick={() => handleChange("theme", opt.value)}
-                  disabled={saving.theme}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          </section>
-
-          {/* Font Family */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">Font</h3>
-            <div className="font-grid">
-              {FONT_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value}
-                  type="button"
-                  className={`font-btn ${
-                    settings.font_family === opt.value ? "font-btn--active" : ""
-                  }`}
-                  onClick={() => handleChange("font_family", opt.value)}
-                  disabled={saving.font_family}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          </section>
-
-          {/* Font Size Slider */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">
-              Font Size: {settings.font_size}px
-            </h3>
-            <input
-              type="range"
-              min="12"
-              max="32"
-              value={settings.font_size}
-              onChange={(e) =>
-                handleChange("font_size", Number(e.target.value))
-              }
-              className="settings-slider"
-              aria-label="Font size"
-            />
-          </section>
-
-          {/* Line Height Slider */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">
-              Line Height: {settings.line_height.toFixed(1)}
-            </h3>
-            <input
-              type="range"
-              min="1.2"
-              max="2.0"
-              step="0.1"
-              value={settings.line_height}
-              onChange={(e) =>
-                handleChange("line_height", Number(e.target.value))
-              }
-              className="settings-slider"
-              aria-label="Line height"
-            />
-          </section>
-
-          {/* Margin Width Slider */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">
-              Margins: {settings.margin_width}px
-            </h3>
-            <input
-              type="range"
-              min="8"
-              max="48"
-              value={settings.margin_width}
-              onChange={(e) =>
-                handleChange("margin_width", Number(e.target.value))
-              }
-              className="settings-slider"
-              aria-label="Margin width"
-            />
-          </section>
-
-          {/* Brightness Slider */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">
-              Brightness: {settings.brightness}%
-            </h3>
-            <input
-              type="range"
-              min="0"
-              max="100"
-              value={settings.brightness}
-              onChange={(e) =>
-                handleChange("brightness", Number(e.target.value))
-              }
-              className="settings-slider"
-              aria-label="Brightness"
-            />
-          </section>
-
-          {/* Orientation Lock */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">Orientation</h3>
-            <div className="orientation-grid">
-              {ORIENTATION_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value}
-                  type="button"
-                  className={`orientation-btn ${
-                    settings.orientation_lock === opt.value
-                      ? "orientation-btn--active"
-                      : ""
-                  }`}
-                  onClick={() => handleChange("orientation_lock", opt.value)}
-                  disabled={saving.orientation_lock}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          </section>
-        </div>
-      </aside>
-    </>
-  );
-}

frontend/src/components/reader/TableOfContents.tsx

@@ -1,80 +0,0 @@
-/**
- * TableOfContents — slide-in drawer listing all chapters.
- * Tap a chapter to navigate. Current chapter is highlighted.
- */
-
-import type { ChapterSummary } from "../../types/reader";
-
-interface TableOfContentsProps {
-  chapters: ChapterSummary[];
-  currentChapterNumber: number;
-  isOpen: boolean;
-  onClose: () => void;
-  onNavigate: (number: number) => void;
-}
-
-export default function TableOfContents({
-  chapters,
-  currentChapterNumber,
-  isOpen,
-  onClose,
-  onNavigate,
-}: TableOfContentsProps) {
-  const handleChapterClick = (number: number) => {
-    onNavigate(number);
-    onClose();
-  };
-
-  return (
-    <>
-      {/* Overlay */}
-      {isOpen && (
-        <div
-          className="toc-overlay"
-          onClick={onClose}
-          onKeyDown={(e: React.KeyboardEvent) => {
-            if (e.key === "Escape") onClose();
-          }}
-          role="presentation"
-        />
-      )}
-
-      {/* Drawer */}
-      <aside className={`toc-drawer ${isOpen ? "toc-drawer--open" : ""}`}>
-        <div className="toc-header">
-          <h2 className="toc-title">Contents</h2>
-          <button
-            type="button"
-            className="toc-close-btn"
-            onClick={onClose}
-            aria-label="Close table of contents"
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
-        </div>
-
-        <nav className="toc-list">
-          {chapters.length === 0 && (
-            <p className="toc-empty">No chapters available.</p>
-          )}
-          {chapters.map((chapter) => (
-            <button
-              key={chapter.number}
-              type="button"
-              className={`toc-item ${
-                chapter.number === currentChapterNumber ? "toc-item--active" : ""
-              }`}
-              onClick={() => handleChapterClick(chapter.number)}
-            >
-              <span className="toc-item-number">{chapter.number}</span>
-              <span className="toc-item-title">{chapter.title}</span>
-            </button>
-          ))}
-        </nav>
-      </aside>
-    </>
-  );
-}

frontend/src/components/search/SearchSuggestions.module.css

@@ -1,65 +0,0 @@
-.container {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 100;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-top: none;
-  border-radius: 0 0 10px 10px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  max-height: 320px;
-  overflow-y: auto;
-}
-
-.infoText {
-  padding: 12px 16px;
-  color: #9ca3af;
-  font-size: 13px;
-}
-
-.suggestionItem {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  cursor: pointer;
-  border-bottom: 1px solid #f3f4f6;
-  min-height: 44px;
-}
-
-.suggestionItem:hover {
-  background: #f9fafb;
-}
-
-.coverImage {
-  width: 32px;
-  height: 48px;
-  object-fit: cover;
-  border-radius: 4px;
-}
-
-.coverPlaceholder {
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-.bookInfo {
-  min-width: 0;
-}
-
-.bookTitle {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1f2937;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.bookAuthor {
-  font-size: 12px;
-  color: #6b7280;
-  margin-top: 2px;
-}

frontend/src/components/search/SearchSuggestions.tsx

@@ -1,120 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { booksApi } from "../../api/books";
-import { useDebounce } from "../../hooks/useDebounce";
-import type { BookListItem } from "../../types/book";
-import styles from "./SearchSuggestions.module.css";
-
-interface SearchSuggestionsProps {
-  query: string;
-  visible: boolean;
-  onClose: () => void;
-  onSelectSuggestion: () => void;
-}
-
-export function SearchSuggestions({ query, visible, onClose, onSelectSuggestion }: SearchSuggestionsProps) {
-  const navigate = useNavigate();
-  const [suggestions, setSuggestions] = useState<BookListItem[]>([]);
-  const [loading, setLoading] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const debouncedQuery = useDebounce(query, 200);
-
-  useEffect(() => {
-    if (!debouncedQuery.trim()) {
-      setSuggestions([]);
-      return;
-    }
-    let cancelled = false;
-    setLoading(true);
-    void booksApi.searchBooks({ q: debouncedQuery.trim(), page_size: 5 }).then(
-      (res) => {
-        if (!cancelled) {
-          setSuggestions(res.results);
-          setLoading(false);
-        }
-      },
-      () => {
-        if (!cancelled) {
-          setSuggestions([]);
-          setLoading(false);
-        }
-      },
-    );
-    return () => {
-      cancelled = true;
-    };
-  }, [debouncedQuery]);
-
-  // Close on click outside
-  useEffect(() => {
-    if (!visible) return;
-    const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        onClose();
-      }
-    };
-    // Delay attachment to avoid the click that opened us from immediately closing
-    const timer = setTimeout(() => document.addEventListener("click", handler), 0);
-    return () => {
-      clearTimeout(timer);
-      document.removeEventListener("click", handler);
-    };
-  }, [visible, onClose]);
-
-  // Close on Escape
-  useEffect(() => {
-    if (!visible) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [visible, onClose]);
-
-  if (!visible || !query.trim()) return null;
-
-  return (
-    <div ref={containerRef} className={styles.container}>
-      {loading && (
-        <div className={styles.infoText}>
-          Searching...
-        </div>
-      )}
-      {!loading && suggestions.length === 0 && debouncedQuery.trim() && (
-        <div className={styles.infoText}>
-          No quick suggestions
-        </div>
-      )}
-      {suggestions.map((book) => (
-        <div
-          key={book.id}
-          className={styles.suggestionItem}
-          onClick={() => {
-            onSelectSuggestion();
-            navigate(`/books/${book.id}`);
-          }}
-        >
-          <span className={styles.coverPlaceholder}>
-            {book.cover_image ? (
-              <img
-                src={book.cover_image}
-                alt=""
-                className={styles.coverImage}
-              />
-            ) : (
-              "📖"
-            )}
-          </span>
-          <div className={styles.bookInfo}>
-            <div className={styles.bookTitle}>
-              {book.title}
-            </div>
-            <div className={styles.bookAuthor}>
-              {book.author || "Unknown Author"}
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

frontend/src/hooks/index.ts

@@ -1,4 +1 @@
-export { usePaginatedQuery } from "./usePaginatedQuery";
+export { usePaginatedQuery } from "./usePaginatedQuery";
-export { useDebounce } from "./useDebounce";
-export { useVoiceSearch } from "./useVoiceSearch";
-export { useMediaQuery } from "./useMediaQuery";

frontend/src/hooks/useChapters.ts

@@ -1,129 +0,0 @@
-/**
- * useChapters — fetch chapter list and manage current chapter navigation.
- */
-
-import { useCallback, useEffect, useState } from "react";
-import { getChapterContent, getChapters } from "../api/reader";
-import type { ChapterDetail, ChapterSummary } from "../types/reader";
-
-export interface UseChaptersReturn {
-  chapters: ChapterSummary[];
-  currentChapter: ChapterDetail | null;
-  currentChapterNumber: number;
-  isLoading: boolean;
-  error: string | null;
-  navigateToChapter: (number: number) => Promise<void>;
-  goToNextChapter: () => Promise<void>;
-  goToPreviousChapter: () => Promise<void>;
-  hasNext: boolean;
-  hasPrevious: boolean;
-}
-
-export function useChapters(
-  bookId: number,
-  initialChapter: number = 1
-): UseChaptersReturn {
-  const [chapters, setChapters] = useState<ChapterSummary[]>([]);
-  const [currentChapter, setCurrentChapter] = useState<ChapterDetail | null>(
-    null
-  );
-  const [currentChapterNumber, setCurrentChapterNumber] =
-    useState<number>(initialChapter);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Fetch chapter list on mount
-  useEffect(() => {
-    let cancelled = false;
-    setIsLoading(true);
-    getChapters(bookId)
-      .then((data) => {
-        if (!cancelled) {
-          setChapters(data);
-          // If chapters exist and initial chapter is valid, fetch it
-          if (
-            data.length > 0 &&
-            data.some((c) => c.number === currentChapterNumber)
-          ) {
-            return getChapterContent(bookId, currentChapterNumber);
-          }
-          return null;
-        }
-        return null;
-      })
-      .then((chapter) => {
-        if (!cancelled && chapter) {
-          setCurrentChapter(chapter);
-        }
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) {
-          setError(
-            err instanceof Error ? err.message : "Failed to load chapters"
-          );
-        }
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [bookId, currentChapterNumber]);
-
-  const fetchChapter = useCallback(
-    async (number: number) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const chapter = await getChapterContent(bookId, number);
-        setCurrentChapter(chapter);
-        setCurrentChapterNumber(number);
-      } catch (err: unknown) {
-        setError(
-          err instanceof Error ? err.message : "Failed to load chapter"
-        );
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [bookId]
-  );
-
-  const navigateToChapter = useCallback(
-    (number: number) => {
-      fetchChapter(number);
-    },
-    [fetchChapter]
-  );
-
-  const goToNextChapter = useCallback(() => {
-    const next = currentChapterNumber + 1;
-    if (chapters.some((c) => c.number === next)) {
-      fetchChapter(next);
-    }
-  }, [currentChapterNumber, chapters, fetchChapter]);
-
-  const goToPreviousChapter = useCallback(() => {
-    const prev = currentChapterNumber - 1;
-    if (prev >= 1 && chapters.some((c) => c.number === prev)) {
-      fetchChapter(prev);
-    }
-  }, [currentChapterNumber, chapters, fetchChapter]);
-
-  const hasNext = chapters.some((c) => c.number === currentChapterNumber + 1);
-  const hasPrevious = chapters.some((c) => c.number === currentChapterNumber - 1);
-
-  return {
-    chapters,
-    currentChapter,
-    currentChapterNumber,
-    isLoading,
-    error,
-    navigateToChapter,
-    goToNextChapter,
-    goToPreviousChapter,
-    hasNext,
-    hasPrevious,
-  };
-}

frontend/src/hooks/useDebounce.ts

@@ -1,18 +0,0 @@
-import { useEffect, useState } from "react";
-
-/**
- * A hook that debounces a value by the specified delay.
- * @param value - The value to debounce
- * @param delay - The delay in milliseconds
- * @returns The debounced value
- */
-export 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;
-}

frontend/src/hooks/useMediaQuery.ts

@@ -1,26 +0,0 @@
-import { useEffect, useState } from "react";
-
-/**
- * Hook for responsive design — returns true when the media query matches.
- * Defaults to false on SSR / initial render to avoid hydration mismatch.
- */
-export function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState(false);
-
-  useEffect(() => {
-    const mql = window.matchMedia(query);
-    setMatches(mql.matches);
-
-    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, [query]);
-
-  return matches;
-}
-
-export const BREAKPOINTS = {
-  sm: "(max-width: 480px)",
-  md: "(max-width: 768px)",
-  lg: "(min-width: 1024px)",
-} as const;

frontend/src/hooks/useReadingProgress.ts

@@ -1,99 +0,0 @@
-/**
- * useReadingProgress — fetch and update reading progress for a book.
- * Auto-saves when chapter or position changes.
- */
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { getReadingProgress, updateReadingProgress } from "../api/reader";
-import type { ReadingProgress } from "../types/reader";
-
-export interface UseReadingProgressReturn {
-  progress: ReadingProgress | null;
-  isLoading: boolean;
-  error: string | null;
-  saveProgress: (
-    chapter: number,
-    position: number,
-    percentage: number
-  ) => Promise<void>;
-  /** Schedule a debounced save — fires at most once per 3 seconds */
-  debouncedSave: (
-    chapter: number,
-    position: number,
-    percentage: number
-  ) => void;
-}
-
-export function useReadingProgress(
-  bookId: number
-): UseReadingProgressReturn {
-  const [progress, setProgress] = useState<ReadingProgress | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Fetch progress on mount
-  useEffect(() => {
-    let cancelled = false;
-    setIsLoading(true);
-    getReadingProgress(bookId)
-      .then((data) => {
-        if (!cancelled) setProgress(data);
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) {
-          setError(
-            err instanceof Error ? err.message : "Failed to load progress"
-          );
-        }
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [bookId]);
-
-  const saveProgress = useCallback(
-    async (chapter: number, position: number, percentage: number) => {
-      try {
-        const updated = await updateReadingProgress(bookId, {
-          current_chapter: chapter,
-          current_position: position,
-          percentage,
-        });
-        setProgress(updated);
-        setError(null);
-      } catch (err: unknown) {
-        setError(
-          err instanceof Error ? err.message : "Failed to save progress"
-        );
-      }
-    },
-    [bookId]
-  );
-
-  const debouncedSave = useCallback(
-    (chapter: number, position: number, percentage: number) => {
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-      }
-      debounceTimer.current = setTimeout(() => {
-        saveProgress(chapter, position, percentage);
-      }, 3000);
-    },
-    [saveProgress]
-  );
-
-  // Cleanup timer on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-      }
-    };
-  }, []);
-
-  return { progress, isLoading, error, saveProgress, debouncedSave };
-}

frontend/src/hooks/useReadingSettings.ts

@@ -1,96 +0,0 @@
-/**
- * useReadingSettings — fetch and manage user reading preferences.
- * Applies settings as CSS custom properties on the document root.
- */
-
-import { useCallback, useEffect, useState } from "react";
-import {
-  getReadingSettings,
-  updateReadingSettings,
-} from "../api/reader";
-import type { ReadingSettings } from "../types/reader";
-
-const DEFAULT_SETTINGS: ReadingSettings = {
-  font_family: "serif",
-  font_size: 18,
-  line_height: 1.6,
-  margin_width: 16,
-  background_color: "#f5f0eb",
-  text_color: "#1a1a1a",
-  brightness: 100,
-  orientation_lock: "auto",
-  theme: "sepia",
-  created_at: "",
-  updated_at: "",
-};
-
-function applyCssVariables(settings: ReadingSettings): void {
-  const root = document.documentElement;
-  root.style.setProperty("--reader-bg", settings.background_color);
-  root.style.setProperty("--reader-text", settings.text_color);
-  root.style.setProperty("--reader-font-family", settings.font_family);
-  root.style.setProperty("--reader-font-size", `${settings.font_size}px`);
-  root.style.setProperty("--reader-line-height", String(settings.line_height));
-  root.style.setProperty("--reader-margin", `${settings.margin_width}px`);
-  root.style.setProperty("--reader-brightness", `${settings.brightness}%`);
-}
-
-export interface UseReadingSettingsReturn {
-  settings: ReadingSettings;
-  isLoading: boolean;
-  error: string | null;
-  updateSettings: (partial: Partial<ReadingSettings>) => Promise<void>;
-}
-
-export function useReadingSettings(): UseReadingSettingsReturn {
-  const [settings, setSettings] = useState<ReadingSettings>(DEFAULT_SETTINGS);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Fetch settings on mount
-  useEffect(() => {
-    let cancelled = false;
-    setIsLoading(true);
-    getReadingSettings()
-      .then((data) => {
-        if (!cancelled) {
-          setSettings(data);
-          applyCssVariables(data);
-        }
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) {
-          setError(
-            err instanceof Error ? err.message : "Failed to load reading settings"
-          );
-          // Apply defaults
-          applyCssVariables(DEFAULT_SETTINGS);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  const updateSettings = useCallback(
-    async (partial: Partial<ReadingSettings>) => {
-      try {
-        const updated = await updateReadingSettings(partial);
-        setSettings(updated);
-        applyCssVariables(updated);
-        setError(null);
-      } catch (err: unknown) {
-        setError(
-          err instanceof Error ? err.message : "Failed to update reading settings"
-        );
-        throw err;
-      }
-    },
-    []
-  );
-
-  return { settings, isLoading, error, updateSettings };
-}

frontend/src/hooks/useVoiceSearch.ts

@@ -1,105 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-export interface UseVoiceSearchResult {
-  isListening: boolean;
-  transcript: string;
-  isSupported: boolean;
-  hasError: boolean;
-  errorMessage: string | null;
-  startListening: () => void;
-  stopListening: () => void;
-}
-
-/**
- * Hook for voice search using the Web Speech API.
- * Returns a microphone control interface.
- * Gracefully degrades when SpeechRecognition is unavailable.
- */
-export function useVoiceSearch(): UseVoiceSearchResult {
-  const [isListening, setIsListening] = useState(false);
-  const [transcript, setTranscript] = useState("");
-  const [isSupported, setIsSupported] = useState(false);
-  const [hasError, setHasError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-
-  const recognitionRef = useRef<SpeechRecognition | null>(null);
-  const mountedRef = useRef(true);
-
-  useEffect(() => {
-    mountedRef.current = true;
-    // Check for SpeechRecognition support (standard + webkit prefix)
-    const SpeechRecognitionCtor =
-      (window as unknown as Record<string, unknown>).SpeechRecognition ??
-      (window as unknown as Record<string, unknown>).webkitSpeechRecognition;
-
-    if (typeof SpeechRecognitionCtor === "function") {
-      setIsSupported(true);
-      const recognition = new (SpeechRecognitionCtor as new () => SpeechRecognition)();
-      recognition.continuous = false;
-      recognition.interimResults = false;
-      recognition.lang = "en-US";
-
-      recognition.onresult = (event: SpeechRecognitionEvent) => {
-        const resultText = event.results[0]?.[0]?.transcript ?? "";
-        if (mountedRef.current) {
-          setTranscript(resultText);
-          setHasError(false);
-          setErrorMessage(null);
-        }
-      };
-
-      recognition.onerror = (event: SpeechRecognitionErrorEvent) => {
-        if (mountedRef.current) {
-          setHasError(true);
-          setErrorMessage(event.error);
-          setIsListening(false);
-        }
-      };
-
-      recognition.onend = () => {
-        if (mountedRef.current) {
-          setIsListening(false);
-        }
-      };
-
-      recognitionRef.current = recognition;
-    }
-
-    return () => {
-      mountedRef.current = false;
-      if (recognitionRef.current) {
-        recognitionRef.current.abort();
-      }
-    };
-  }, []);
-
-  const startListening = useCallback(() => {
-    if (!recognitionRef.current) return;
-    setTranscript("");
-    setHasError(false);
-    setErrorMessage(null);
-    try {
-      recognitionRef.current.start();
-      setIsListening(true);
-    } catch {
-      // May throw if already started
-      setIsListening(false);
-    }
-  }, []);
-
-  const stopListening = useCallback(() => {
-    if (!recognitionRef.current) return;
-    recognitionRef.current.stop();
-    setIsListening(false);
-  }, []);
-
-  return {
-    isListening,
-    transcript,
-    isSupported,
-    hasError,
-    errorMessage,
-    startListening,
-    stopListening,
-  };
-}

frontend/src/pages/BookDetailPage.tsx

@@ -2,7 +2,6 @@ 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";
-import { useMediaQuery, BREAKPOINTS } from "../hooks/useMediaQuery";
 
 export function BookDetailPage() {
   const { id } = useParams<{ id: string }>();
@@ -10,7 +9,6 @@ export function BookDetailPage() {
   const [book, setBook] = useState<BookDetail | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const isMobile = useMediaQuery(BREAKPOINTS.md);
 
   const loadBook = useCallback(async () => {
     if (!id) return;
@@ -42,42 +40,12 @@ export function BookDetailPage() {
     dnf: { bg: "#fef3c7", text: "#b45309" },
   };
 
-  const containerStyle: React.CSSProperties = {
-    maxWidth: 720,
-    margin: "0 auto",
-    padding: isMobile ? 16 : 24,
-    minHeight: "100vh",
-    background: "#f8f9fa",
-  };
-
-  const backButtonStyle: React.CSSProperties = {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 4,
-    padding: isMobile ? "10px 16px" : "8px 16px",
-    borderRadius: 8,
-    border: "1px solid #e5e7eb",
-    background: "#fff",
-    color: "#374151",
-    fontSize: isMobile ? 15 : 14,
-    cursor: "pointer",
-    marginBottom: isMobile ? 16 : 24,
-    minHeight: 44,
-  };
-
   if (loading) {
     return (
-      <div style={containerStyle}>
+      <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: isMobile ? 16 : 24, flexDirection: isMobile ? "column" : "row" }}>
+        <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
-          <div style={{
+          <div style={{ width: 240, height: 360, background: "#e5e7eb", borderRadius: 12, flexShrink: 0 }} />
-            width: isMobile ? 140 : 240,
-            height: isMobile ? 210 : 360,
-            background: "#e5e7eb",
-            borderRadius: 12,
-            flexShrink: 0,
-            alignSelf: isMobile ? "center" : "flex-start",
-          }} />
           <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%" }} />
@@ -93,13 +61,13 @@ export function BookDetailPage() {
 
   if (error || !book) {
     return (
-      <div style={containerStyle}>
+      <div style={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
-        <button onClick={() => navigate("/")} style={backButtonStyle}>← Back to Library</button>
+        <button onClick={() => navigate("/")} className="btn btn-secondary" style={{ marginBottom: 24 }}>← Back to Library</button>
-        <div style={{ textAlign: "center", padding: isMobile ? "60px 16px" : "80px 20px" }}>
+        <div style={{ textAlign: "center", padding: "80px 20px" }}>
-          <div style={{ fontSize: isMobile ? 48 : 64, marginBottom: 16 }}>😕</div>
+          <div style={{ fontSize: 64, marginBottom: 16 }}>😕</div>
-          <h2 style={{ fontSize: isMobile ? 18 : 20, color: "#1f2937", marginBottom: 8 }}>Book not found</h2>
+          <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: "12px 24px", fontSize: 15, minHeight: 44 }}>Retry</button>
+          <button onClick={() => void loadBook()} className="btn" style={{ padding: "10px 24px" }}>Retry</button>
         </div>
       </div>
     );
@@ -108,56 +76,57 @@ export function BookDetailPage() {
   const sc = statusColors[book.reading_status] ?? { bg: "#f3f4f6", text: "#6b7280" };
 
   return (
-    <div style={containerStyle}>
+    <div style={{ maxWidth: 720, margin: "0 auto", padding: 24, minHeight: "100vh", background: "#f8f9fa" }}>
       {/* Back button */}
-      <button onClick={() => navigate("/")} style={backButtonStyle}>
+      <button
-        ← {isMobile ? "Back" : "Back to Library"}
+        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: isMobile ? 20 : 32, flexDirection: isMobile ? "column" : "row" }}>
+      <div style={{ display: "flex", gap: 32, flexWrap: "wrap" }}>
         {/* Cover */}
-        <div style={{ flexShrink: 0, alignSelf: isMobile ? "center" : "flex-start" }}>
+        <div style={{ flexShrink: 0 }}>
           <div style={{
-            width: isMobile ? 160 : 240,
+            width: 240, height: 360, borderRadius: 12, overflow: "hidden",
-            height: isMobile ? 240 : 360,
+            background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center",
-            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: isMobile ? 48 : 80 }}>📖</span>}
+              : <span style={{ fontSize: 80 }}>📖</span>}
           </div>
         </div>
 
         {/* Info */}
-        <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ flex: 1, minWidth: 240 }}>
-          <h1 style={{ fontSize: isMobile ? 22 : 28, fontWeight: 700, color: "#1f2937", marginBottom: 8, lineHeight: 1.2 }}>
+          <h1 style={{ fontSize: 28, fontWeight: 700, color: "#1f2937", marginBottom: 8, lineHeight: 1.2 }}>
             {book.title}
           </h1>
 
           {book.author && (
-            <p style={{ fontSize: isMobile ? 16 : 18, color: "#4b5563", marginBottom: 6 }}>
+            <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, minHeight: 28, display: "inline-flex", alignItems: "center" }}>
+            <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, minHeight: 28, display: "inline-flex", alignItems: "center" }}>
+              <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, minHeight: 28, display: "inline-flex", alignItems: "center" }}>
+              <span style={{ background: "#f3f4f6", color: "#6b7280", fontSize: 13, padding: "4px 12px", borderRadius: 999 }}>
                 {book.total_pages} pages
               </span>
             )}
@@ -166,7 +135,7 @@ export function BookDetailPage() {
           {book.description && (
             <div style={{ marginTop: 20 }}>
               <h3 style={{ fontSize: 16, fontWeight: 600, color: "#1f2937", marginBottom: 8 }}>Description</h3>
-              <p style={{ fontSize: isMobile ? 15 : 15, color: "#4b5563", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>
+              <p style={{ fontSize: 15, color: "#4b5563", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>
                 {book.description}
               </p>
             </div>
@@ -179,28 +148,10 @@ export function BookDetailPage() {
             </p>
           </div>
 
-          {/* Mobile full-width back button */}
+          {/* Mobile-only: open in reader if it's an ebook, or just navigate back */}
-          {isMobile && (
+          <div style={{ marginTop: 24, display: "none" }}>
-            <div style={{ marginTop: 24 }}>
+            <button onClick={() => navigate("/")} className="btn btn-block">Back to Library</button>
-              <button
+          </div>
-                onClick={() => navigate("/")}
-                style={{
-                  width: "100%",
-                  padding: "14px 24px",
-                  borderRadius: 10,
-                  border: "none",
-                  background: "#4f46e5",
-                  color: "#fff",
-                  fontSize: 15,
-                  fontWeight: 600,
-                  cursor: "pointer",
-                  minHeight: 44,
-                }}
-              >
-                ← Back to Library
-              </button>
-            </div>
-          )}
         </div>
       </div>
     </div>

frontend/src/pages/Library.module.css

@@ -1,13 +0,0 @@
-.bookCard {
-  background: #fff;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-  cursor: pointer;
-  transition: transform 0.15s, box-shadow 0.15s;
-}
-
-.bookCard:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-}

frontend/src/pages/Library.tsx

@@ -4,11 +4,6 @@ import { booksApi } from "../api/books";
 import type { BookListItem, BookSearchParams } from "../types/book";
 import { READING_STATUS_OPTIONS } from "../types/book";
 import { useAuth } from "../context/AuthContext";
-import { useDebounce } from "../hooks/useDebounce";
-import { useVoiceSearch } from "../hooks/useVoiceSearch";
-import { useMediaQuery, BREAKPOINTS } from "../hooks/useMediaQuery";
-import { SearchSuggestions } from "../components/search/SearchSuggestions";
-import styles from "./Library.module.css";
 
 interface FilterState {
   genre: string;
@@ -16,14 +11,14 @@ interface FilterState {
   reading_status: string;
 }
 
-/** WCAG 2.1 minimum touch target */
+function useDebounce<T>(value: T, delay: number): T {
-const TOUCH_TARGET: React.CSSProperties = {
+  const [debounced, setDebounced] = useState(value);
-  minHeight: 44,
+  useEffect(() => {
-  minWidth: 44,
+    const timer = setTimeout(() => setDebounced(value), delay);
-  display: "inline-flex",
+    return () => clearTimeout(timer);
-  alignItems: "center",
+  }, [value, delay]);
-  justifyContent: "center",
+  return debounced;
-};
+}
 
 export function LibraryPage() {
   const navigate = useNavigate();
@@ -38,23 +33,9 @@ export function LibraryPage() {
   const [authors, setAuthors] = useState<string[]>([]);
   const [totalCount, setTotalCount] = useState(0);
   const [showFilters, setShowFilters] = useState(false);
-  const [showSuggestions, setShowSuggestions] = useState(false);
 
   const debouncedSearch = useDebounce(searchQuery, 300);
   const loadedRef = useRef(false);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const isMobile = useMediaQuery(BREAKPOINTS.md);
-
-  // Voice search
-  const voiceSearch = useVoiceSearch();
-
-  // Sync voice transcript into search input
-  useEffect(() => {
-    if (voiceSearch.transcript && !voiceSearch.isListening) {
-      setSearchQuery(voiceSearch.transcript);
-      setShowSuggestions(false);
-    }
-  }, [voiceSearch.transcript, voiceSearch.isListening]);
 
   // Load filter options once
   useEffect(() => {
@@ -98,303 +79,114 @@ export function LibraryPage() {
   }, [debouncedSearch, filters, loadBooks]);
 
   const handleFilterChange = (key: keyof FilterState, value: string) => {
-    setFilters((prev: FilterState) => ({ ...prev, [key]: value }));
+    setFilters((prev) => ({ ...prev, [key]: value }));
   };
 
   const clearAllFilters = () => {
     setSearchQuery("");
     setFilters({ genre: "", author: "", reading_status: "" });
-    setShowFilters(false);
   };
 
   const hasActiveFilters = !!searchQuery || !!filters.genre || !!filters.author || !!filters.reading_status;
 
-  const containerStyle: React.CSSProperties = {
-    maxWidth: 960,
-    margin: "0 auto",
-    padding: isMobile ? 12 : 16,
-    minHeight: "100vh",
-    background: "#f8f9fa",
-  };
-
-  const headerStyle: React.CSSProperties = {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: isMobile ? 12 : 20,
-    padding: isMobile ? "12px 0" : "16px 0",
-    borderBottom: "1px solid #e5e7eb",
-    flexWrap: "wrap",
-    gap: 8,
-  };
-
-  const searchContainerStyle: React.CSSProperties = {
-    position: "relative",
-    flex: 1,
-  };
-
   return (
-    <div style={containerStyle}>
+    <div style={{ maxWidth: 960, margin: "0 auto", padding: 16, minHeight: "100vh", background: "#f8f9fa" }}>
       {/* Header */}
-      <header style={headerStyle}>
+      <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: isMobile ? 20 : 24, fontWeight: 700, color: "#1f2937", margin: 0 }}>Library</h1>
+          <h1 style={{ fontSize: 24, fontWeight: 700, color: "#1f2937", margin: 0 }}>Library</h1>
-          {!loading && (
+          {!loading && <p style={{ fontSize: 13, color: "#6b7280", marginTop: 2 }}>{totalCount} book{totalCount !== 1 ? "s" : ""}</p>}
-            <p style={{ fontSize: 13, color: "#6b7280", marginTop: 2 }}>
-              {totalCount} book{totalCount !== 1 ? "s" : ""}
-            </p>
-          )}
         </div>
-        <div style={{ display: "flex", gap: isMobile ? 4 : 8, flexWrap: "wrap", alignItems: "center" }}>
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
-          {isMobile ? (
+          <button onClick={() => navigate("/add")} className="btn">+ Add Book</button>
-            <>
+          <button onClick={() => navigate("/bookmarks-notes")} className="btn btn-secondary">Bookmarks</button>
-              <button onClick={() => navigate("/add")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Add Book">➕</button>
+          <button onClick={() => navigate("/settings")} className="btn btn-secondary">Settings</button>
-              <button onClick={() => navigate("/bookmarks-notes")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Bookmarks">🔖</button>
+          <button onClick={logout} className="btn btn-danger">Logout</button>
-              <button onClick={() => navigate("/settings")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Settings">⚙️</button>
-              <button onClick={logout} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Logout">🚪</button>
-            </>
-          ) : (
-            <>
-              <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={searchContainerStyle}>
+          <div style={{ flex: 1, position: "relative" }}>
             <input
-              ref={searchInputRef}
               type="text"
               placeholder="Search by title, author, or genre..."
               value={searchQuery}
-              onChange={(e) => {
+              onChange={(e) => setSearchQuery(e.target.value)}
-                setSearchQuery(e.target.value);
-                setShowSuggestions(true);
-              }}
-              onFocus={() => setShowSuggestions(true)}
               style={{
-                width: "100%",
+                width: "100%", padding: "12px 16px 12px 44px", borderRadius: 10,
-                padding: `12px 16px 12px ${voiceSearch.isSupported ? 44 : 44}px`,
+                border: "1px solid #e5e7eb", fontSize: 15, background: "#fff",
-                paddingRight: voiceSearch.isSupported ? 48 : 16,
+                outline: "none", boxSizing: "border-box",
-                borderRadius: 10,
-                border: "1px solid #e5e7eb",
-                fontSize: isMobile ? 16 : 15,
-                background: "#fff",
-                outline: "none",
-                boxSizing: "border-box",
-                minHeight: 44,
               }}
             />
             <span style={{
               position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)",
               fontSize: 18, color: "#9ca3af", pointerEvents: "none",
             }}>🔍</span>
-
-            {/* Voice Search Button */}
-            {voiceSearch.isSupported && (
-              <button
-                onClick={() => {
-                  if (voiceSearch.isListening) {
-                    voiceSearch.stopListening();
-                  } else {
-                    voiceSearch.startListening();
-                  }
-                }}
-                style={{
-                  position: "absolute",
-                  right: 8,
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  background: voiceSearch.isListening ? "#dc2626" : "transparent",
-                  border: "none",
-                  borderRadius: 8,
-                  cursor: "pointer",
-                  fontSize: 20,
-                  padding: "8px 8px",
-                  minWidth: 36,
-                  minHeight: 36,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  color: voiceSearch.isListening ? "#fff" : "#6b7280",
-                  transition: "background 0.15s",
-                }}
-                title={voiceSearch.isListening ? "Stop listening" : "Search with voice"}
-              >
-                🎤
-              </button>
-            )}
-
-            {/* Real-time Suggestions */}
-            <SearchSuggestions
-              query={searchQuery}
-              visible={showSuggestions && !voiceSearch.isListening}
-              onClose={() => setShowSuggestions(false)}
-              onSelectSuggestion={() => setShowSuggestions(false)}
-            />
           </div>
           <button
             onClick={() => setShowFilters(!showFilters)}
-            style={{
+            className={`btn ${showFilters ? "" : "btn-secondary"}`}
-              ...TOUCH_TARGET,
+            title="Toggle filters"
-              padding: "0 12px",
-              borderRadius: 8,
-              border: "1px solid #e5e7eb",
-              background: showFilters ? "#4f46e5" : "#fff",
-              color: showFilters ? "#fff" : "#374151",
-              fontSize: 13,
-              fontWeight: 600,
-              cursor: "pointer",
-              whiteSpace: "nowrap",
-              gap: 4,
-            }}
           >
-            {isMobile ? "⚙️" : showFilters ? "▲ Filters" : "▼ Filters"}
+            {showFilters ? "▲ Filters" : "▼ Filters"}
           </button>
         </div>
       </div>
 
-      {/* Voice search listening indicator */}
-      {voiceSearch.isListening && (
-        <div style={{
-          background: "#fef2f2",
-          padding: "10px 16px",
-          borderRadius: 8,
-          marginBottom: 12,
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          fontSize: 14,
-          color: "#dc2626",
-        }}>
-          <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: "#dc2626", animation: "pulse 1s infinite" }} />
-          Listening... speak now
-          <button
-            onClick={voiceSearch.stopListening}
-            style={{
-              marginLeft: "auto",
-              background: "#dc2626",
-              color: "#fff",
-              border: "none",
-              borderRadius: 4,
-              padding: "4px 12px",
-              cursor: "pointer",
-              fontSize: 12,
-            }}
-          >
-            Stop
-          </button>
-        </div>
-      )}
-
-      {/* Voice search error */}
-      {voiceSearch.hasError && !voiceSearch.isListening && (
-        <div style={{
-          background: "#fef3c7",
-          padding: "8px 12px",
-          borderRadius: 8,
-          marginBottom: 12,
-          fontSize: 13,
-          color: "#92400e",
-        }}>
-          Voice search: {voiceSearch.errorMessage === "no-speech" ? "No speech detected. Try again." : voiceSearch.errorMessage}
-        </div>
-      )}
-
       {/* Filters Panel */}
       {showFilters && (
         <div style={{
-          background: "#fff",
+          background: "#fff", borderRadius: 10, padding: 16, marginBottom: 16,
-          borderRadius: 10,
+          border: "1px solid #e5e7eb", display: "flex", gap: 12, flexWrap: "wrap", alignItems: "end",
-          padding: isMobile ? 12 : 16,
-          marginBottom: 16,
-          border: "1px solid #e5e7eb",
-          display: "flex",
-          flexDirection: isMobile ? "column" : "row",
-          gap: 12,
-          alignItems: isMobile ? "stretch" : "end",
         }}>
-          <div style={{ minWidth: isMobile ? 0 : 160, flex: 1 }}>
+          <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%",
+                width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid #e5e7eb",
-                padding: "8px 12px",
+                fontSize: 14, background: "#fff", cursor: "pointer",
-                borderRadius: 6,
-                border: "1px solid #e5e7eb",
-                fontSize: 14,
-                background: "#fff",
-                cursor: "pointer",
-                minHeight: 36,
               }}
             >
               <option value="">All Genres</option>
               {genres.map((g) => <option key={g} value={g}>{g}</option>)}
             </select>
           </div>
-          <div style={{ minWidth: isMobile ? 0 : 160, flex: 1 }}>
+          <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%",
+                width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid #e5e7eb",
-                padding: "8px 12px",
+                fontSize: 14, background: "#fff", cursor: "pointer",
-                borderRadius: 6,
-                border: "1px solid #e5e7eb",
-                fontSize: 14,
-                background: "#fff",
-                cursor: "pointer",
-                minHeight: 36,
               }}
             >
               <option value="">All Authors</option>
               {authors.map((a) => <option key={a} value={a}>{a}</option>)}
             </select>
           </div>
-          <div style={{ minWidth: isMobile ? 0 : 160, flex: 1 }}>
+          <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%",
+                width: "100%", padding: "8px 12px", borderRadius: 6, border: "1px solid #e5e7eb",
-                padding: "8px 12px",
+                fontSize: 14, background: "#fff", cursor: "pointer",
-                borderRadius: 6,
-                border: "1px solid #e5e7eb",
-                fontSize: 14,
-                background: "#fff",
-                cursor: "pointer",
-                minHeight: 36,
               }}
             >
               {READING_STATUS_OPTIONS.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
             </select>
           </div>
           {hasActiveFilters && (
-            <button
+            <button onClick={clearAllFilters} className="btn btn-secondary" style={{ whiteSpace: "nowrap" }}>
-              onClick={clearAllFilters}
-              style={{
-                ...TOUCH_TARGET,
-                padding: "8px 16px",
-                borderRadius: 6,
-                border: "1px solid #e5e7eb",
-                background: "#fff",
-                color: "#6b7280",
-                fontSize: 13,
-                cursor: "pointer",
-                whiteSpace: "nowrap",
-                width: isMobile ? "100%" : "auto",
-              }}
-            >
               ✕ Clear
             </button>
           )}
@@ -405,21 +197,16 @@ export function LibraryPage() {
       {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, minHeight: 36 }}>Retry</button>
+          <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={{
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 16, opacity: 0.6 }}>
-          display: "grid",
+          {Array.from({ length: 8 }).map((_, i) => (
-          gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fill, minmax(200px, 1fr))",
+            <div key={i} style={{ background: "#fff", borderRadius: 12, overflow: "hidden", boxShadow: "0 2px 8px rgba(0,0,0,0.06)" }}>
-          gap: isMobile ? 12 : 16,
+              <div style={{ height: 180, background: "#f0f0f0" }} />
-          opacity: 0.6,
-        }}>
-          {Array.from({ length: isMobile ? 4 : 8 }).map((_, i) => (
-            <div key={i} style={{ background: "#fff", borderRadius: 12, overflow: "hidden", boxShadow: "0 2px 8px rgba(0,0,0,0.06)", display: isMobile ? "flex" : "block" }}>
-              <div style={{ width: isMobile ? 80 : "100%", height: isMobile ? 120 : 180, background: "#f0f0f0", flexShrink: 0 }} />
               <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%" }} />
@@ -431,9 +218,9 @@ export function LibraryPage() {
 
       {/* Empty State */}
       {!loading && !error && books.length === 0 && (
-        <div style={{ textAlign: "center", padding: isMobile ? "60px 16px" : "80px 20px" }}>
+        <div style={{ textAlign: "center", padding: "80px 20px" }}>
-          <div style={{ fontSize: isMobile ? 48 : 64, marginBottom: 16 }}>{hasActiveFilters ? "🔍" : "📚"}</div>
+          <div style={{ fontSize: 64, marginBottom: 16 }}>{hasActiveFilters ? "🔍" : "📚"}</div>
-          <h2 style={{ fontSize: isMobile ? 18 : 20, color: "#1f2937", marginBottom: 8 }}>
+          <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 }}>
@@ -442,11 +229,11 @@ export function LibraryPage() {
               : "Add a book to get started building your collection."}
           </p>
           {hasActiveFilters ? (
-            <button onClick={clearAllFilters} className="btn" style={{ padding: "12px 24px", fontSize: 15, minHeight: 44 }}>
+            <button onClick={clearAllFilters} className="btn" style={{ padding: "10px 24px" }}>
               Clear All Filters
             </button>
           ) : (
-            <button onClick={() => navigate("/add")} className="btn" style={{ padding: "12px 24px", fontSize: 15, minHeight: 44 }}>
+            <button onClick={() => navigate("/add")} className="btn" style={{ padding: "10px 24px" }}>
               Add Your First Book
             </button>
           )}
@@ -455,11 +242,7 @@ export function LibraryPage() {
 
       {/* Results Grid */}
       {!loading && books.length > 0 && (
-        <div style={{
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 16 }}>
-          display: "grid",
-          gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fill, minmax(200px, 1fr))",
-          gap: isMobile ? 12 : 16,
-        }}>
           {books.map((book) => {
             const statusColors: Record<string, { bg: string; text: string }> = {
               want_to_read: { bg: "#dbeafe", text: "#1d4ed8" },
@@ -473,64 +256,41 @@ export function LibraryPage() {
               <div
                 key={book.id}
                 onClick={() => navigate(`/books/${book.id}`)}
-                className={styles.bookCard}
                 style={{
-                  display: isMobile ? "flex" : "block",
+                  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={{
+                <div style={{ height: 180, background: "#f0f0f0", display: "flex", alignItems: "center", justifyContent: "center", position: "relative" }}>
-                  width: isMobile ? 80 : "100%",
-                  height: isMobile ? 120 : 180,
-                  background: "#f0f0f0",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  position: "relative",
-                  flexShrink: 0,
-                }}>
                   {book.cover_image
                     ? <img src={book.cover_image} alt={book.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
-                    : <span style={{ fontSize: isMobile ? 32 : 48 }}>📖</span>}
+                    : <span style={{ fontSize: 48 }}>📖</span>}
-                  {!isMobile && (
+                  <span style={{
-                    <span style={{
+                    position: "absolute", top: 8, right: 8,
-                      position: "absolute", top: 8, right: 8,
+                    background: sc.bg, color: sc.text, fontSize: 11, fontWeight: 600,
-                      background: sc.bg, color: sc.text, fontSize: 11, fontWeight: 600,
+                    padding: "2px 8px", borderRadius: 999, lineHeight: "18px",
-                      padding: "2px 8px", borderRadius: 999, lineHeight: "18px",
+                  }}>
-                    }}>
+                    {book.reading_status_display}
-                      {book.reading_status_display}
+                  </span>
-                    </span>
-                  )}
                 </div>
-                <div style={{ padding: isMobile ? "8px 12px" : 12, flex: 1 }}>
+                <div style={{ padding: 12 }}>
-                  <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
+                  <h3 style={{ fontSize: 14, fontWeight: 600, color: "#1f2937", marginBottom: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                    <div style={{ minWidth: 0, flex: 1 }}>
+                    {book.title}
-                      <h3 style={{
+                  </h3>
-                        fontSize: isMobile ? 14 : 14,
+                  <p style={{ fontSize: 12, color: "#6b7280", marginBottom: 4 }}>
-                        fontWeight: 600,
+                    {book.author || "Unknown Author"}
-                        color: "#1f2937",
+                  </p>
-                        marginBottom: 2,
-                        margin: 0,
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                        whiteSpace: "nowrap",
-                      }}>
-                        {book.title}
-                      </h3>
-                      <p style={{ fontSize: 12, color: "#6b7280", marginBottom: 4, margin: "2px 0" }}>
-                        {book.author || "Unknown Author"}
-                      </p>
-                    </div>
-                    {isMobile && (
-                      <span style={{
-                        background: sc.bg, color: sc.text, fontSize: 10, fontWeight: 600,
-                        padding: "2px 6px", borderRadius: 999, whiteSpace: "nowrap", flexShrink: 0,
-                      }}>
-                        {book.reading_status_display}
-                      </span>
-                    )}
-                  </div>
                   {book.genre && (
-                    <span style={{ fontSize: 11, color: "#4f46e5", background: "#eef2ff", padding: "1px 6px", borderRadius: 4, display: "inline-block", marginTop: 4 }}>
+                    <span style={{ fontSize: 11, color: "#4f46e5", background: "#eef2ff", padding: "1px 6px", borderRadius: 4 }}>
                       {book.genre}
                     </span>
                   )}

frontend/src/pages/ReadingPage.tsx

@@ -1,213 +0,0 @@
-/**
- * ReadingPage — full-screen reading view for ebooks.
- * Integrates TOC drawer, settings panel, chapter navigation, and progress tracking.
- */
-
-import { lazy, Suspense, useCallback, useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
-import { useChapters } from "../hooks/useChapters";
-import { useReadingProgress } from "../hooks/useReadingProgress";
-import { useReadingSettings } from "../hooks/useReadingSettings";
-import { booksApi } from "../api/books";
-import type { BookDetail } from "../types/book";
-import "../reader.css";
-
-const ReaderToolbar = lazy(() => import("../components/reader/ReaderToolbar"));
-const TableOfContents = lazy(() => import("../components/reader/TableOfContents"));
-const ReadingSettingsPanel = lazy(
-  () => import("../components/reader/ReadingSettingsPanel")
-);
-
-export default function ReadingPage() {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const bookId = Number(id);
-  const [book, setBook] = useState<BookDetail | null>(null);
-  const [bookLoading, setBookLoading] = useState(true);
-
-  // Fetch book details
-  useEffect(() => {
-    if (!bookId || Number.isNaN(bookId)) return;
-    setBookLoading(true);
-    booksApi.getBook(bookId)
-      .then(setBook)
-      .catch(() => { /* handled by useChapters error */ })
-      .finally(() => setBookLoading(false));
-  }, [bookId]);
-
-  const [tocOpen, setTocOpen] = useState(false);
-  const [settingsOpen, setSettingsOpen] = useState(false);
-
-  const { settings, updateSettings } = useReadingSettings();
-  const {
-    chapters,
-    currentChapter,
-    currentChapterNumber,
-    isLoading,
-    error,
-    navigateToChapter,
-    goToNextChapter,
-    goToPreviousChapter,
-    hasNext,
-    hasPrevious,
-  } = useChapters(bookId, 1);
-
-  const { progress, debouncedSave } = useReadingProgress(bookId);
-
-  // Auto-save progress when chapter changes
-  useEffect(() => {
-    if (currentChapter && currentChapterNumber > 0) {
-      debouncedSave(currentChapterNumber, 0, (currentChapterNumber / Math.max(chapters.length, 1)) * 100);
-    }
-  }, [currentChapterNumber, currentChapter?.id]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "ArrowLeft" && hasPrevious) {
-        goToPreviousChapter();
-      } else if (e.key === "ArrowRight" && hasNext) {
-        goToNextChapter();
-      } else if (e.key === "Escape") {
-        setTocOpen(false);
-        setSettingsOpen(false);
-      }
-    },
-    [hasNext, hasPrevious, goToNextChapter, goToPreviousChapter]
-  );
-
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-
-  // Lock/unlock orientation via CSS
-  useEffect(() => {
-    const root = document.documentElement;
-    if (settings.orientation_lock !== "auto") {
-      root.style.setProperty(
-        "--reader-orientation",
-        settings.orientation_lock === "portrait" ? "portrait" : "landscape"
-      );
-    } else {
-      root.style.removeProperty("--reader-orientation");
-    }
-  }, [settings.orientation_lock]);
-
-  // Show loading state
-  if (bookLoading || (isLoading && !currentChapter)) {
-    return (
-      <div className="reader-loading">
-        <div className="spinner" />
-        <p>Loading reader...</p>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="reader-loading">
-        <p className="reader-error">{error}</p>
-        <button type="button" className="back-button" onClick={() => navigate(`/books/${bookId}`)}>
-          Back to book
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <Suspense
-      fallback={
-        <div className="reader-loading">
-          <div className="spinner" />
-        </div>
-      }
-    >
-      <div className="reader-container">
-        <ReaderToolbar
-          bookTitle={book.title}
-          chapterTitle={currentChapter?.title ?? "Loading..."}
-          progress={progress}
-          onToggleToc={() => setTocOpen((v) => !v)}
-          onToggleSettings={() => setSettingsOpen((v) => !v)}
-        />
-
-        <TableOfContents
-          chapters={chapters}
-          currentChapterNumber={currentChapterNumber}
-          isOpen={tocOpen}
-          onClose={() => setTocOpen(false)}
-          onNavigate={navigateToChapter}
-        />
-
-        <ReadingSettingsPanel
-          settings={settings}
-          isOpen={settingsOpen}
-          onClose={() => setSettingsOpen(false)}
-          onUpdate={updateSettings}
-        />
-
-        {/* Main reading area */}
-        <main className="reader-content">
-          {isLoading ? (
-            <div className="reader-loading">
-              <div className="spinner" />
-              <p>Loading chapter...</p>
-            </div>
-          ) : currentChapter ? (
-            <article className="reader-chapter">
-              <h1 className="reader-chapter-title">{currentChapter.title}</h1>
-              <div
-                className="reader-chapter-body"
-                dangerouslySetInnerHTML={{
-                  __html: currentChapter.content,
-                }}
-              />
-            </article>
-          ) : (
-            <div className="reader-loading">
-              <p>Select a chapter from the table of contents to start reading.</p>
-            </div>
-          )}
-        </main>
-
-        {/* Bottom navigation bar */}
-        <nav className="reader-nav">
-          <button
-            type="button"
-            className={`reader-nav-btn ${!hasPrevious ? "reader-nav-btn--disabled" : ""}`}
-            onClick={goToPreviousChapter}
-            disabled={!hasPrevious}
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="15 18 9 12 15 6" />
-            </svg>
-            Previous
-          </button>
-
-          <button
-            type="button"
-            className="reader-nav-btn reader-nav-btn--back"
-            onClick={() => navigate("/")}
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M20 12H4M10 18l-6-6 6-6" />
-            </svg>
-            Library
-          </button>
-
-          <button
-            type="button"
-            className={`reader-nav-btn ${!hasNext ? "reader-nav-btn--disabled" : ""}`}
-            onClick={goToNextChapter}
-            disabled={!hasNext}
-          >
-            Next
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="9 18 15 12 9 6" />
-            </svg>
-          </button>
-        </nav>
-      </div>
-    </Suspense>
-  );
-}

frontend/src/reader.css

@@ -1,621 +0,0 @@
-/* ============================================================
-   Cloud Reader — Reading View Styles
-   Mobile-first reading experience with theme support
-   ============================================================ */
-
-/* --- CSS Custom Properties (overridden by JS) --- */
-:root {
-  --reader-bg: #f5f0eb;
-  --reader-text: #1a1a1a;
-  --reader-font-family: Georgia, "Times New Roman", serif;
-  --reader-font-size: 18px;
-  --reader-line-height: 1.6;
-  --reader-margin: 16px;
-  --reader-brightness: 100%;
-  --reader-toolbar-bg: rgba(26, 26, 26, 0.95);
-  --reader-toolbar-text: #e0e0e0;
-  --reader-accent: #6c8cff;
-}
-
-/* --- Reading Container --- */
-.reader-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--reader-bg);
-  color: var(--reader-text);
-  font-family: var(--reader-font-family);
-  font-size: var(--reader-font-size);
-  line-height: var(--reader-line-height);
-  filter: brightness(var(--reader-brightness));
-  display: flex;
-  flex-direction: column;
-  z-index: 100;
-  overflow: hidden;
-}
-
-/* Orientation lock */
-@supports (--reader-orientation: portrait) {
-  .reader-container {
-    orientation: var(--reader-orientation);
-  }
-}
-
-@media (orientation: landascape) {
-  .reader-container {
-    --reader-margin: 24px;
-  }
-}
-
-/* --- Top Toolbar --- */
-.reader-top-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 52px;
-  background: var(--reader-toolbar-bg);
-  color: var(--reader-toolbar-text);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 12px;
-  z-index: 120;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-}
-
-.reader-bar-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: transparent;
-  border: none;
-  color: var(--reader-toolbar-text);
-  cursor: pointer;
-  border-radius: 8px;
-  transition: background 0.15s;
-}
-
-.reader-bar-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.reader-bar-title {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1px;
-  min-width: 0;
-  flex: 1;
-  padding: 0 8px;
-}
-
-.reader-bar-book {
-  font-size: 0.8rem;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
-.reader-bar-chapter {
-  font-size: 0.7rem;
-  opacity: 0.7;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
-/* --- Progress Bar --- */
-.reader-progress-bar {
-  position: fixed;
-  top: 52px;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: rgba(255, 255, 255, 0.1);
-  z-index: 120;
-}
-
-.reader-progress-fill {
-  height: 100%;
-  background: var(--reader-accent);
-  transition: width 0.3s ease;
-}
-
-/* --- Main Content Area --- */
-.reader-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 72px var(--reader-margin) 72px;
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-}
-
-/* --- Chapter Article --- */
-.reader-chapter {
-  max-width: 680px;
-  margin: 0 auto;
-}
-
-.reader-chapter-title {
-  font-size: 1.6em;
-  font-weight: 700;
-  line-height: 1.3;
-  margin-bottom: 0.75em;
-  padding-bottom: 0.5em;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  color: var(--reader-text);
-}
-
-/* Chapter body — content from API (could be HTML/markdown-rendered) */
-.reader-chapter-body {
-  font-size: 1em;
-  line-height: var(--reader-line-height);
-}
-
-.reader-chapter-body p {
-  margin-bottom: 1.2em;
-  text-align: justify;
-  hyphens: auto;
-}
-
-.reader-chapter-body h2,
-.reader-chapter-body h3,
-.reader-chapter-body h4 {
-  margin-top: 1.5em;
-  margin-bottom: 0.6em;
-  line-height: 1.3;
-}
-
-.reader-chapter-body blockquote {
-  border-left: 3px solid var(--reader-accent);
-  padding-left: 1em;
-  margin: 1em 0;
-  opacity: 0.85;
-  font-style: italic;
-}
-
-.reader-chapter-body img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 4px;
-  margin: 1em 0;
-}
-
-.reader-chapter-body ul,
-.reader-chapter-body ol {
-  padding-left: 1.5em;
-  margin-bottom: 1.2em;
-}
-
-.reader-chapter-body li {
-  margin-bottom: 0.4em;
-}
-
-/* --- Navigation Bar (Bottom) --- */
-.reader-nav {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 56px;
-  background: var(--reader-toolbar-bg);
-  color: var(--reader-toolbar-text);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 12px;
-  z-index: 120;
-  gap: 8px;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-}
-
-.reader-nav-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
-  color: var(--reader-toolbar-text);
-  font-size: 0.85rem;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.reader-nav-btn:hover:not(.reader-nav-btn--disabled) {
-  border-color: var(--reader-accent);
-  color: var(--reader-accent);
-}
-
-.reader-nav-btn--disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.reader-nav-btn--back {
-  background: rgba(108, 140, 255, 0.15);
-  border-color: rgba(108, 140, 255, 0.3);
-}
-
-.reader-nav-btn--back:hover {
-  background: rgba(108, 140, 255, 0.25);
-  color: var(--reader-accent);
-}
-
-/* --- TOC Drawer --- */
-.toc-overlay,
-.settings-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 130;
-  animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.toc-drawer,
-.settings-drawer {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 300px;
-  max-width: 85vw;
-  background: var(--reader-toolbar-bg);
-  color: var(--reader-toolbar-text);
-  z-index: 140;
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.toc-drawer {
-  left: 0;
-  transform: translateX(-100%);
-}
-
-.toc-drawer--open {
-  transform: translateX(0);
-}
-
-.settings-drawer {
-  right: 0;
-  transform: translateX(100%);
-}
-
-.settings-drawer--open {
-  transform: translateX(0);
-}
-
-.toc-header,
-.settings-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.toc-title,
-.settings-title {
-  font-size: 1.1rem;
-  font-weight: 700;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
-.toc-close-btn,
-.settings-close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: var(--reader-toolbar-text);
-  cursor: pointer;
-  border-radius: 6px;
-  transition: background 0.15s;
-}
-
-.toc-close-btn:hover,
-.settings-close-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-/* --- TOC List --- */
-.toc-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 0;
-}
-
-.toc-empty {
-  padding: 24px 16px;
-  text-align: center;
-  opacity: 0.6;
-  font-size: 0.9rem;
-}
-
-.toc-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 10px 16px;
-  background: transparent;
-  border: none;
-  color: var(--reader-toolbar-text);
-  font-size: 0.9rem;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.15s;
-  font-family: inherit;
-}
-
-.toc-item:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.toc-item--active {
-  background: rgba(108, 140, 255, 0.15);
-  color: var(--reader-accent);
-  font-weight: 600;
-}
-
-.toc-item-number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 24px;
-  height: 24px;
-  font-size: 0.75rem;
-  font-weight: 700;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.1);
-  padding: 0 4px;
-}
-
-.toc-item-title {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* --- Settings Panel --- */
-.settings-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 16px 32px;
-}
-
-.settings-section {
-  margin-bottom: 20px;
-}
-
-.settings-section-title {
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: rgba(255, 255, 255, 0.5);
-  margin-bottom: 8px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
-/* Theme grid */
-.theme-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
-
-.theme-btn {
-  padding: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--reader-toolbar-text);
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: all 0.15s;
-  font-family: inherit;
-}
-
-.theme-btn:hover {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.theme-btn--active {
-  border-color: var(--reader-accent);
-  background: rgba(108, 140, 255, 0.15);
-  color: var(--reader-accent);
-  font-weight: 600;
-}
-
-/* Font grid */
-.font-grid,
-.orientation-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 8px;
-}
-
-.font-btn,
-.orientation-btn {
-  padding: 10px 8px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--reader-toolbar-text);
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: all 0.15s;
-  font-family: inherit;
-}
-
-.font-btn:hover,
-.orientation-btn:hover {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.font-btn--active,
-.orientation-btn--active {
-  border-color: var(--reader-accent);
-  background: rgba(108, 140, 255, 0.15);
-  color: var(--reader-accent);
-  font-weight: 600;
-}
-
-/* Sliders */
-.settings-slider {
-  width: 100%;
-  height: 6px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
-  outline: none;
-  cursor: pointer;
-}
-
-.settings-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--reader-accent);
-  border: 2px solid white;
-  cursor: pointer;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-}
-
-.settings-slider::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--reader-accent);
-  border: 2px solid white;
-  cursor: pointer;
-}
-
-/* --- Start Reading Button (in book detail) --- */
-.start-reading-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  background: var(--reader-accent);
-  border: none;
-  border-radius: 8px;
-  color: white;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  margin-top: 16px;
-  margin-bottom: 16px;
-  font-family: inherit;
-}
-
-.start-reading-btn:hover {
-  background: #5a7ae8;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(108, 140, 255, 0.3);
-}
-
-/* --- Loading State --- */
-.reader-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 48px;
-  color: var(--reader-text);
-}
-
-.reader-error {
-  color: #ef4444;
-  text-align: center;
-}
-
-/* --- Responsive --- */
-@media (max-width: 480px) {
-  .reader-chapter {
-    max-width: 100%;
-  }
-
-  .reader-nav-btn {
-    padding: 8px 10px;
-    font-size: 0.8rem;
-  }
-
-  .reader-nav-btn span {
-    display: none;
-  }
-
-  .toc-drawer,
-  .settings-drawer {
-    max-width: 100vw;
-  }
-
-  .reader-chapter-title {
-    font-size: 1.3em;
-  }
-}
-
-@media (min-width: 768px) {
-  .reader-chapter {
-    max-width: 720px;
-  }
-
-  .reader-chapter-body {
-    font-size: 1.05em;
-  }
-}
-
-/* --- Landscape on Mobile --- */
-@media (orientation: landscape) and (max-height: 500px) {
-  .reader-top-bar {
-    height: 44px;
-  }
-
-  .reader-content {
-    padding-top: 60px;
-    padding-bottom: 60px;
-  }
-
-  .reader-chapter-title {
-    font-size: 1.2em;
-  }
-}
-
-/* --- Dark mode theme override when reader uses light theme but system is dark --- */
-@media (prefers-color-scheme: dark) {
-  .reader-container[data-theme="light"] {
-    --reader-toolbar-bg: rgba(255, 255, 255, 0.95);
-    --reader-toolbar-text: #1a1a1a;
-  }
-}

frontend/src/types/book.ts

@@ -81,22 +81,4 @@ export interface ContentResponse {
   content: string;
   chapter_title: string;
   format: string;
-}
+}
-
-export interface BookSearchParams {
-  q?: string;
-  genre?: string;
-  author?: string;
-  reading_status?: string;
-  ordering?: string;
-  page?: number;
-  page_size?: number;
-}
-
-export const READING_STATUS_OPTIONS: { value: string; label: string }[] = [
-  { value: "", label: "All Statuses" },
-  { value: "want_to_read", label: "Want to Read" },
-  { value: "reading", label: "Reading" },
-  { value: "finished", label: "Finished" },
-  { value: "dnf", label: "Did Not Finish" },
-];

frontend/src/types/reader.ts

@@ -1,44 +0,0 @@
-/**
- * TypeScript interfaces for the Cloud Reader reader module.
- * Reading view, settings, chapters, and progress types.
- */
-
-export interface ChapterSummary {
-  id: number;
-  book: number;
-  title: string;
-  number: number;
-}
-
-export interface ChapterDetail extends ChapterSummary {
-  content: string;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface ReadingSettings {
-  font_family: "sans-serif" | "serif" | "monospace";
-  font_size: number;
-  line_height: number;
-  margin_width: number;
-  background_color: string;
-  text_color: string;
-  brightness: number;
-  orientation_lock: "auto" | "portrait" | "landscape";
-  theme: "sepia" | "dark" | "light" | "paper";
-  created_at: string;
-  updated_at: string;
-}
-
-export type ThemePreset = ReadingSettings["theme"];
-export type FontFamily = ReadingSettings["font_family"];
-export type OrientationLock = ReadingSettings["orientation_lock"];
-
-export interface ReadingProgress {
-  id: number;
-  book: number;
-  current_chapter: number;
-  current_position: number;
-  percentage: number;
-  updated_at: string;
-}

frontend/src/types/speech-recognition.d.ts

@@ -1,54 +0,0 @@
-/**
- * Type declarations for the Web Speech API (SpeechRecognition).
- * These are not part of the standard TypeScript DOM lib types.
- * Install @types/dom-speech-recognition for full coverage.
- */
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-interface SpeechRecognition extends EventTarget {
-  continuous: boolean;
-  interimResults: boolean;
-  lang: string;
-  onresult: ((event: SpeechRecognitionEvent) => void) | null;
-  onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
-  onend: (() => void) | null;
-  start(): void;
-  stop(): void;
-  abort(): void;
-}
-
-interface SpeechRecognitionEvent extends Event {
-  readonly resultIndex: number;
-  readonly results: SpeechRecognitionResultList;
-}
-
-interface SpeechRecognitionResultList {
-  readonly length: number;
-  [index: number]: SpeechRecognitionResult;
-}
-
-interface SpeechRecognitionResult {
-  readonly isFinal: boolean;
-  readonly length: number;
-  [index: number]: SpeechRecognitionAlternative;
-}
-
-interface SpeechRecognitionAlternative {
-  readonly transcript: string;
-  readonly confidence: number;
-}
-
-interface SpeechRecognitionErrorEvent extends Event {
-  readonly error: string;
-  readonly message: string;
-}
-
-interface SpeechRecognitionConstructor {
-  new (): SpeechRecognition;
-}
-
-interface Window {
-  SpeechRecognition?: SpeechRecognitionConstructor;
-  webkitSpeechRecognition?: SpeechRecognitionConstructor;
-}

mobile/App.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { NavigationContainer } from "@react-navigation/native";
-import { StatusBar } from "expo-status-bar";
-import { AuthProvider } from "./src/context/AuthContext";
-import { RootNavigator } from "./src/navigation/RootNavigator";
-
-export default function App() {
-  return (
-    <AuthProvider>
-      <NavigationContainer>
-        <StatusBar style="auto" />
-        <RootNavigator />
-      </NavigationContainer>
-    </AuthProvider>
-  );
-}

mobile/app.json

@@ -1,28 +0,0 @@
-{
-  "expo": {
-    "name": "Cloud Reader",
-    "slug": "cloud-reader",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
-    "splash": {
-      "backgroundColor": "#1a1a2e"
-    },
-    "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "com.cloudreader.app"
-    },
-    "android": {
-      "adaptiveIcon": {
-        "backgroundColor": "#1a1a2e"
-      },
-      "package": "com.cloudreader.app"
-    },
-    "plugins": [
-      "expo-document-picker",
-      "expo-file-system"
-    ]
-  }
-}

mobile/babel.config.js

@@ -1,7 +0,0 @@
-module.exports = function (api) {
-  api.cache(true);
-  return {
-    presets: ["babel-preset-expo"],
-    plugins: ["react-native-reanimated/plugin"],
-  };
-};

mobile/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "@cloud-reader/mobile",
-  "version": "1.0.0",
-  "private": true,
-  "main": "expo/AppEntry.js",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "lint": "eslint ."
-  },
-  "dependencies": {
-    "expo": "~52.0.0",
-    "expo-status-bar": "~2.0.0",
-    "react": "^19.0.0",
-    "react-native": "0.76.6",
-    "react-native-safe-area-context": "4.14.1",
-    "react-native-screens": "~4.4.0",
-    "@react-navigation/native": "^7.0.0",
-    "@react-navigation/native-stack": "^7.0.0",
-    "@react-navigation/bottom-tabs": "^7.0.0",
-    "axios": "^1.7.9",
-    "@react-native-async-storage/async-storage": "2.1.0",
-    "expo-document-picker": "~13.0.0",
-    "expo-file-system": "~18.0.0",
-    "react-native-gesture-handler": "~2.20.0",
-    "react-native-reanimated": "~3.16.0",
-    "@cloud-reader/shared": "*"
-  },
-  "devDependencies": {
-    "@types/react": "~19.0.0",
-    "typescript": "~5.7.0"
-  }
-}

mobile/src/api/annotations.ts

@@ -1,55 +0,0 @@
-import api from "./client";
-import type {
-  Bookmark,
-  Note,
-  CreateBookmarkPayload,
-  CreateNotePayload,
-  PaginatedResponse,
-} from "@cloud-reader/shared";
-
-export function fetchBookmarks(
-  bookId?: string,
-): Promise<PaginatedResponse<Bookmark>> {
-  const params = bookId ? { book: bookId } : {};
-  return api
-    .get<PaginatedResponse<Bookmark>>("/api/annotations/bookmarks/", { params })
-    .then((res) => res.data);
-}
-
-export function createBookmark(
-  payload: CreateBookmarkPayload,
-): Promise<Bookmark> {
-  return api
-    .post<Bookmark>("/api/annotations/bookmarks/", payload)
-    .then((res) => res.data);
-}
-
-export function deleteBookmark(id: string): Promise<void> {
-  return api.delete(`/api/annotations/bookmarks/${id}/`).then(() => {});
-}
-
-export function fetchNotes(bookId?: string): Promise<PaginatedResponse<Note>> {
-  const params = bookId ? { book: bookId } : {};
-  return api
-    .get<PaginatedResponse<Note>>("/api/annotations/notes/", { params })
-    .then((res) => res.data);
-}
-
-export function createNote(payload: CreateNotePayload): Promise<Note> {
-  return api
-    .post<Note>("/api/annotations/notes/", payload)
-    .then((res) => res.data);
-}
-
-export function updateNote(
-  id: string,
-  content: string,
-): Promise<Note> {
-  return api
-    .patch<Note>(`/api/annotations/notes/${id}/`, { content })
-    .then((res) => res.data);
-}
-
-export function deleteNote(id: string): Promise<void> {
-  return api.delete(`/api/annotations/notes/${id}/`).then(() => {});
-}

mobile/src/api/books.ts

@@ -1,31 +0,0 @@
-import api from "./client";
-import type { Book, PaginatedResponse } from "@cloud-reader/shared";
-
-export function fetchBooks(
-  page = 1,
-  pageSize = 20,
-): Promise<PaginatedResponse<Book>> {
-  return api
-    .get<PaginatedResponse<Book>>("/api/books/", {
-      params: { page, page_size: pageSize },
-    })
-    .then((res) => res.data);
-}
-
-export function fetchBook(id: string): Promise<Book> {
-  return api.get<Book>(`/api/books/${id}/`).then((res) => res.data);
-}
-
-export function searchBooks(
-  query: string,
-): Promise<PaginatedResponse<Book>> {
-  return api
-    .get<PaginatedResponse<Book>>("/api/books/search/", {
-      params: { q: query },
-    })
-    .then((res) => res.data);
-}
-
-export function deleteBook(id: string): Promise<void> {
-  return api.delete(`/api/books/${id}/`).then(() => {});
-}

mobile/src/api/client.ts

@@ -1,140 +0,0 @@
-import axios, { type AxiosError, type InternalAxiosRequestConfig } from "axios";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-
-const STORAGE_KEYS = {
-  ACCESS_TOKEN: "access_token",
-  REFRESH_TOKEN: "refresh_token",
-} as const;
-
-interface RetryConfig extends InternalAxiosRequestConfig {
-  _retry?: boolean;
-}
-
-const api = axios.create({
-  baseURL: process.env.EXPO_PUBLIC_API_URL || "http://localhost:8000",
-  headers: {
-    "Content-Type": "application/json",
-  },
-});
-
-// ── Token helpers ────────────────────────────────────────────────────
-
-async function getAccessToken(): Promise<string | null> {
-  return AsyncStorage.getItem(STORAGE_KEYS.ACCESS_TOKEN);
-}
-
-async function getRefreshToken(): Promise<string | null> {
-  return AsyncStorage.getItem(STORAGE_KEYS.REFRESH_TOKEN);
-}
-
-async function setTokens(access: string, refresh: string): Promise<void> {
-  await AsyncStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, access);
-  await AsyncStorage.setItem(STORAGE_KEYS.REFRESH_TOKEN, refresh);
-}
-
-async function clearTokens(): Promise<void> {
-  await AsyncStorage.multiRemove([
-    STORAGE_KEYS.ACCESS_TOKEN,
-    STORAGE_KEYS.REFRESH_TOKEN,
-  ]);
-}
-
-// ── Request interceptor ─────────────────────────────────────────────
-
-api.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
-  const token = await getAccessToken();
-  if (token && config.headers) {
-    config.headers.Authorization = `Bearer ${token}`;
-  }
-  return config;
-});
-
-// ── Response interceptor: auto-refresh on 401 ───────────────────────
-
-let isRefreshing = false;
-let failedQueue: Array<{
-  resolve: (token: string) => void;
-  reject: (err: unknown) => void;
-}> = [];
-
-function processQueue(error: unknown, token: string | null = null): void {
-  failedQueue.forEach((prom) => {
-    if (error) {
-      prom.reject(error);
-    } else if (token) {
-      prom.resolve(token);
-    }
-  });
-  failedQueue = [];
-}
-
-api.interceptors.response.use(
-  (response) => response,
-  async (error: AxiosError) => {
-    const originalRequest = error.config as RetryConfig | undefined;
-
-    if (!originalRequest) {
-      return Promise.reject(error);
-    }
-
-    if (
-      error.response?.status !== 401 ||
-      originalRequest._retry ||
-      originalRequest.url?.includes("/api/auth/token/refresh/") ||
-      originalRequest.url?.includes("/api/auth/login/") ||
-      originalRequest.url?.includes("/api/auth/register/") ||
-      originalRequest.url?.includes("/api/auth/logout/")
-    ) {
-      return Promise.reject(error);
-    }
-
-    if (isRefreshing) {
-      return new Promise<string>((resolve, reject) => {
-        failedQueue.push({ resolve, reject });
-      }).then((token) => {
-        if (originalRequest.headers) {
-          originalRequest.headers.Authorization = `Bearer ${token}`;
-        }
-        return api(originalRequest);
-      });
-    }
-
-    originalRequest._retry = true;
-    isRefreshing = true;
-
-    const refreshToken = await getRefreshToken();
-
-    if (!refreshToken) {
-      isRefreshing = false;
-      await clearTokens();
-      return Promise.reject(error);
-    }
-
-    try {
-      const response = await axios.post(
-        `${api.defaults.baseURL}/api/auth/token/refresh/`,
-        { refresh: refreshToken },
-      );
-
-      const newAccess = response.data.access as string;
-      const newRefresh = response.data.refresh as string;
-      await setTokens(newAccess, newRefresh);
-
-      processQueue(null, newAccess);
-
-      if (originalRequest.headers) {
-        originalRequest.headers.Authorization = `Bearer ${newAccess}`;
-      }
-      return api(originalRequest);
-    } catch (refreshError) {
-      processQueue(refreshError, null);
-      await clearTokens();
-      return Promise.reject(refreshError);
-    } finally {
-      isRefreshing = false;
-    }
-  },
-);
-
-export { getAccessToken, getRefreshToken, setTokens, clearTokens };
-export default api;

mobile/src/api/ebooks.ts

@@ -1,54 +0,0 @@
-import { apiClient } from "./client";
-import type {
-  EBookListItem,
-  EBookDetail,
-  ReadingProgress,
-  ReadingSettings,
-  TocResponse,
-  ContentResponse,
-  PaginatedResponse,
-} from "@cloud-reader/shared";
-
-export const ebooksApi = {
-  /** List uploaded e-books */
-  list() {
-    return apiClient.get<PaginatedResponse<EBookListItem>>("/api/ebooks/");
-  },
-
-  /** Get e-book detail */
-  get(id: number) {
-    return apiClient.get<EBookDetail>(`/api/ebooks/${id}/`);
-  },
-
-  /** Get table of contents */
-  getToc(id: number) {
-    return apiClient.get<TocResponse>(`/api/ebooks/${id}/toc/`);
-  },
-
-  /** Get page content */
-  getContent(id: number, page: number) {
-    return apiClient.get<ContentResponse>(
-      `/api/ebooks/${id}/content/?page=${page}`,
-    );
-  },
-
-  /** Update reading progress */
-  updateProgress(id: number, data: Partial<ReadingProgress>) {
-    return apiClient.patch<ReadingProgress>(
-      `/api/ebooks/${id}/progress/`,
-      data,
-    );
-  },
-
-  /** Get or update reading settings */
-  getSettings(id: number) {
-    return apiClient.get<ReadingSettings>(`/api/ebooks/${id}/settings/`);
-  },
-
-  updateSettings(id: number, data: Partial<ReadingSettings>) {
-    return apiClient.patch<ReadingSettings>(
-      `/api/ebooks/${id}/settings/`,
-      data,
-    );
-  },
-};

mobile/src/api/index.ts

@@ -1,4 +0,0 @@
-export { apiClient, saveTokens, loadTokens, clearTokens } from "./client";
-export { booksApi } from "./books";
-export { ebooksApi } from "./ebooks";
-export { annotationsApi } from "./annotations";

mobile/src/context/AuthContext.tsx

@@ -1,104 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useCallback,
-  type ReactNode,
-} from "react";
-import type { User, TokenResponse } from "@cloud-reader/shared";
-import { apiClient, saveTokens, loadTokens, clearTokens } from "../api/client";
-
-interface AuthState {
-  user: User | null;
-  isLoading: boolean;
-  isAuthenticated: boolean;
-}
-
-interface AuthContextValue extends AuthState {
-  login: (email: string, password: string) => Promise<void>;
-  register: (
-    email: string,
-    username: string,
-    password: string,
-  ) => Promise<void>;
-  logout: () => Promise<void>;
-}
-
-const AuthContext = createContext<AuthContextValue | null>(null);
-
-export function AuthProvider({ children }: { children: ReactNode }) {
-  const [state, setState] = useState<AuthState>({
-    user: null,
-    isLoading: true,
-    isAuthenticated: false,
-  });
-
-  // Restore session on mount
-  useEffect(() => {
-    (async () => {
-      try {
-        const tokens = await loadTokens();
-        if (tokens?.access) {
-          const response = await apiClient.get<User>("/api/auth/profile/");
-          setState({
-            user: response.data,
-            isLoading: false,
-            isAuthenticated: true,
-          });
-          return;
-        }
-      } catch {
-        await clearTokens();
-      }
-      setState({ user: null, isLoading: false, isAuthenticated: false });
-    })();
-  }, []);
-
-  const login = useCallback(async (email: string, password: string) => {
-    const response = await apiClient.post<TokenResponse>(
-      "/api/auth/login/",
-      { email, password },
-    );
-    await saveTokens(response.data);
-    const profile = await apiClient.get<User>("/api/auth/profile/");
-    setState({
-      user: profile.data,
-      isLoading: false,
-      isAuthenticated: true,
-    });
-  }, []);
-
-  const register = useCallback(
-    async (email: string, username: string, password: string) => {
-      await apiClient.post("/api/auth/register/", {
-        email,
-        username,
-        password,
-        password2: password,
-      });
-      // Auto-login after registration
-      await login(email, password);
-    },
-    [login],
-  );
-
-  const logout = useCallback(async () => {
-    await clearTokens();
-    setState({ user: null, isLoading: false, isAuthenticated: false });
-  }, []);
-
-  return (
-    <AuthContext.Provider value={{ ...state, 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;
-}

mobile/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useAuth } from "../context/AuthContext";
-export { useAsyncData } from "./useAsyncData";

mobile/src/hooks/useAsyncData.ts

@@ -1,33 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-
-/**
- * Generic async data fetching hook for mobile screens.
- */
-export function useAsyncData<T>(
-  fetcher: () => Promise<T>,
-  deps: unknown[] = [],
-) {
-  const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  const execute = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await fetcher();
-      setData(result);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-    } finally {
-      setLoading(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-
-  useEffect(() => {
-    execute();
-  }, [execute]);
-
-  return { data, loading, error, refetch: execute };
-}

mobile/src/navigation/AppNavigator.tsx

@@ -1,45 +0,0 @@
-import { type ReactNode } from "react";
-import { NavigationContainer } from "@react-navigation/native";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import { useAuth } from "../context/AuthContext";
-import LoginScreen from "../screens/LoginScreen";
-import RegisterScreen from "../screens/RegisterScreen";
-import MainTabs from "./MainTabs";
-
-export type AuthStackParamList = {
-  Login: undefined;
-  Register: undefined;
-};
-
-export type RootStackParamList = {
-  Auth: undefined;
-  Main: undefined;
-};
-
-const RootStack = createNativeStackNavigator<RootStackParamList>();
-const AuthStack = createNativeStackNavigator<AuthStackParamList>();
-
-function AuthNavigator(): ReactNode {
-  return (
-    <AuthStack.Navigator screenOptions={{ headerShown: false }}>
-      <AuthStack.Screen name="Login" component={LoginScreen} />
-      <AuthStack.Screen name="Register" component={RegisterScreen} />
-    </AuthStack.Navigator>
-  );
-}
-
-export default function AppNavigator(): ReactNode {
-  const { state } = useAuth();
-
-  return (
-    <NavigationContainer>
-      <RootStack.Navigator screenOptions={{ headerShown: false }}>
-        {state.isAuthenticated ? (
-          <RootStack.Screen name="Main" component={MainTabs} />
-        ) : (
-          <RootStack.Screen name="Auth" component={AuthNavigator} />
-        )}
-      </RootStack.Navigator>
-    </NavigationContainer>
-  );
-}

mobile/src/navigation/AuthNavigator.tsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import LoginScreen from "../screens/LoginScreen";
-import RegisterScreen from "../screens/RegisterScreen";
-
-export type AuthStackParamList = {
-  Login: undefined;
-  Register: undefined;
-};
-
-const Stack = createNativeStackNavigator<AuthStackParamList>();
-
-export function AuthNavigator() {
-  return (
-    <Stack.Navigator
-      screenOptions={{
-        headerShown: false,
-      }}
-    >
-      <Stack.Screen name="Login" component={LoginScreen} />
-      <Stack.Screen name="Register" component={RegisterScreen} />
-    </Stack.Navigator>
-  );
-}

mobile/src/navigation/MainNavigator.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Text } from "react-native";
-import LibraryScreen from "../screens/LibraryScreen";
-import SearchScreen from "../screens/SearchScreen";
-import SettingsScreen from "../screens/SettingsScreen";
-
-export type MainTabParamList = {
-  Library: undefined;
-  Search: undefined;
-  Settings: undefined;
-};
-
-const Tab = createBottomTabNavigator<MainTabParamList>();
-
-function TabIcon({ label, focused }: { label: string; focused: boolean }) {
-  const icons: Record<string, string> = {
-    Library: "📚",
-    Search: "🔍",
-    Settings: "⚙️",
-  };
-  return (
-    <Text style={{ fontSize: 22, opacity: focused ? 1 : 0.5 }}>
-      {icons[label] ?? "●"}
-    </Text>
-  );
-}
-
-export function MainNavigator() {
-  return (
-    <Tab.Navigator
-      screenOptions={{
-        headerStyle: { backgroundColor: "#fff" },
-        headerTitleStyle: { fontWeight: "600", color: "#1a1a2e" },
-        tabBarActiveTintColor: "#4a6cf7",
-        tabBarInactiveTintColor: "#999",
-      }}
-    >
-      <Tab.Screen
-        name="Library"
-        component={LibraryScreen}
-        options={{
-          tabBarIcon: ({ focused }) => (
-            <TabIcon label="Library" focused={focused} />
-          ),
-        }}
-      />
-      <Tab.Screen
-        name="Search"
-        component={SearchScreen}
-        options={{
-          tabBarIcon: ({ focused }) => (
-            <TabIcon label="Search" focused={focused} />
-          ),
-        }}
-      />
-      <Tab.Screen
-        name="Settings"
-        component={SettingsScreen}
-        options={{
-          tabBarIcon: ({ focused }) => (
-            <TabIcon label="Settings" focused={focused} />
-          ),
-        }}
-      />
-    </Tab.Navigator>
-  );
-}

mobile/src/navigation/MainTabs.tsx

@@ -1,55 +0,0 @@
-import { type ReactNode } from "react";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Text } from "react-native";
-import LibraryScreen from "../screens/LibraryScreen";
-import SearchScreen from "../screens/SearchScreen";
-import SettingsScreen from "../screens/SettingsScreen";
-
-export type MainTabParamList = {
-  Library: undefined;
-  Search: undefined;
-  Settings: undefined;
-};
-
-const Tab = createBottomTabNavigator<MainTabParamList>();
-
-function TabIcon({ label, focused }: { label: string; focused: boolean }) {
-  return (
-    <Text style={{ fontSize: 22, opacity: focused ? 1 : 0.5 }}>
-      {label === "Library" ? "📚" : label === "Search" ? "🔍" : "⚙️"}
-    </Text>
-  );
-}
-
-export default function MainTabs(): ReactNode {
-  return (
-    <Tab.Navigator
-      screenOptions={({ route }) => ({
-        tabBarIcon: ({ focused }: { focused: boolean }) => (
-          <TabIcon label={route.name} focused={focused} />
-        ),
-        tabBarActiveTintColor: "#4f8ef7",
-        tabBarInactiveTintColor: "#888",
-        headerStyle: { backgroundColor: "#1a1a2e" },
-        headerTintColor: "#fff",
-        tabBarStyle: { backgroundColor: "#1a1a2e", borderTopColor: "#333" },
-      })}
-    >
-      <Tab.Screen
-        name="Library"
-        component={LibraryScreen}
-        options={{ title: "My Library" }}
-      />
-      <Tab.Screen
-        name="Search"
-        component={SearchScreen}
-        options={{ title: "Search" }}
-      />
-      <Tab.Screen
-        name="Settings"
-        component={SettingsScreen}
-        options={{ title: "Settings" }}
-      />
-    </Tab.Navigator>
-  );
-}

mobile/src/navigation/RootNavigator.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { ActivityIndicator, View } from "react-native";
-import { useAuth } from "../context/AuthContext";
-import { AuthNavigator } from "./AuthNavigator";
-import { MainNavigator } from "./MainNavigator";
-
-export function RootNavigator() {
-  const { isLoading, isAuthenticated } = useAuth();
-
-  if (isLoading) {
-    return (
-      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-        <ActivityIndicator size="large" color="#4a6cf7" />
-      </View>
-    );
-  }
-
-  if (!isAuthenticated) {
-    return <AuthNavigator />;
-  }
-
-  return <MainNavigator />;
-}

mobile/src/screens/LibraryScreen.tsx

@@ -1,181 +0,0 @@
-import { useState, useEffect, useCallback, type ReactNode } from "react";
-import {
-  View,
-  Text,
-  FlatList,
-  TouchableOpacity,
-  StyleSheet,
-  ActivityIndicator,
-  RefreshControl,
-} from "react-native";
-import { fetchBooks } from "../api/books";
-import type { Book, PaginatedResponse } from "@cloud-reader/shared";
-
-export default function LibraryScreen({ navigation }: { navigation: any }): ReactNode {
-  const [books, setBooks] = useState<Book[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
-
-  const loadBooks = useCallback(async (pageNum: number, isRefresh = false) => {
-    try {
-      const data: PaginatedResponse<Book> = await fetchBooks(pageNum);
-      if (isRefresh) {
-        setBooks(data.results);
-      } else {
-        setBooks((prev) => [...prev, ...data.results]);
-      }
-      setHasMore(data.next !== null);
-      setPage(pageNum);
-    } catch {
-      // Silent error for now
-    } finally {
-      setLoading(false);
-      setRefreshing(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    loadBooks(1, true);
-  }, [loadBooks]);
-
-  const onRefresh = () => {
-    setRefreshing(true);
-    loadBooks(1, true);
-  };
-
-  const loadMore = () => {
-    if (hasMore && !loading) {
-      loadBooks(page + 1);
-    }
-  };
-
-  const renderBook = ({ item }: { item: Book }) => (
-    <TouchableOpacity
-      style={styles.bookCard}
-      onPress={() =>
-        navigation.navigate("BookDetail", { bookId: item.id })
-      }
-    >
-      <View style={styles.bookCover}>
-        <Text style={styles.coverText}>
-          {item.title.charAt(0).toUpperCase()}
-        </Text>
-      </View>
-      <View style={styles.bookInfo}>
-        <Text style={styles.bookTitle} numberOfLines={1}>
-          {item.title}
-        </Text>
-        <Text style={styles.bookAuthor} numberOfLines={1}>
-          {item.author}
-        </Text>
-        <Text style={styles.bookPages}>{item.total_pages} pages</Text>
-      </View>
-    </TouchableOpacity>
-  );
-
-  if (loading && books.length === 0) {
-    return (
-      <View style={styles.centered}>
-        <ActivityIndicator size="large" color="#4f8ef7" />
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      <FlatList
-        data={books}
-        renderItem={renderBook}
-        keyExtractor={(item) => item.id}
-        onEndReached={loadMore}
-        onEndReachedThreshold={0.5}
-        contentContainerStyle={styles.list}
-        refreshControl={
-          <RefreshControl
-            refreshing={refreshing}
-            onRefresh={onRefresh}
-            tintColor="#4f8ef7"
-          />
-        }
-        ListEmptyComponent={
-          <View style={styles.centered}>
-            <Text style={styles.emptyText}>Your library is empty</Text>
-            <Text style={styles.emptySubtext}>
-              Add books to get started
-            </Text>
-          </View>
-        }
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#0f0f23",
-  },
-  centered: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 24,
-  },
-  list: {
-    padding: 16,
-  },
-  bookCard: {
-    flexDirection: "row",
-    backgroundColor: "#1a1a2e",
-    borderRadius: 12,
-    padding: 12,
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: "#333",
-  },
-  bookCover: {
-    width: 60,
-    height: 80,
-    backgroundColor: "#2a2a4e",
-    borderRadius: 8,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  coverText: {
-    fontSize: 24,
-    fontWeight: "bold",
-    color: "#4f8ef7",
-  },
-  bookInfo: {
-    flex: 1,
-    marginLeft: 12,
-    justifyContent: "center",
-  },
-  bookTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#fff",
-    marginBottom: 4,
-  },
-  bookAuthor: {
-    fontSize: 14,
-    color: "#888",
-    marginBottom: 4,
-  },
-  bookPages: {
-    fontSize: 12,
-    color: "#666",
-  },
-  emptyText: {
-    fontSize: 18,
-    fontWeight: "600",
-    color: "#888",
-    marginBottom: 8,
-  },
-  emptySubtext: {
-    fontSize: 14,
-    color: "#666",
-  },
-});

mobile/src/screens/LoginScreen.tsx

@@ -1,173 +0,0 @@
-import { useState, type ReactNode } from "react";
-import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  StyleSheet,
-  Alert,
-  ActivityIndicator,
-  KeyboardAvoidingView,
-  Platform,
-} from "react-native";
-import { useAuth } from "../context/AuthContext";
-import { isValidEmail } from "@cloud-reader/shared";
-
-export default function LoginScreen({ navigation }: { navigation: any }): ReactNode {
-  const { state, login, clearError } = useAuth();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const handleLogin = async () => {
-    clearError();
-
-    if (!email.trim()) {
-      Alert.alert("Validation Error", "Please enter your email.");
-      return;
-    }
-    if (!isValidEmail(email.trim())) {
-      Alert.alert("Validation Error", "Please enter a valid email address.");
-      return;
-    }
-    if (!password) {
-      Alert.alert("Validation Error", "Please enter your password.");
-      return;
-    }
-
-    try {
-      await login(email.trim(), password);
-    } catch {
-      // Error handled in context
-    }
-  };
-
-  return (
-    <KeyboardAvoidingView
-      style={styles.container}
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-    >
-      <View style={styles.inner}>
-        <Text style={styles.title}>Cloud Reader</Text>
-        <Text style={styles.subtitle}>Sign in to your account</Text>
-
-        {state.error && (
-          <View style={styles.errorBox}>
-            <Text style={styles.errorText}>{state.error}</Text>
-          </View>
-        )}
-
-        <TextInput
-          style={styles.input}
-          placeholder="Email"
-          placeholderTextColor="#666"
-          value={email}
-          onChangeText={setEmail}
-          keyboardType="email-address"
-          autoCapitalize="none"
-          autoCorrect={false}
-        />
-
-        <TextInput
-          style={styles.input}
-          placeholder="Password"
-          placeholderTextColor="#666"
-          value={password}
-          onChangeText={setPassword}
-          secureTextEntry
-        />
-
-        <TouchableOpacity
-          style={[styles.button, state.isLoading && styles.buttonDisabled]}
-          onPress={handleLogin}
-          disabled={state.isLoading}
-        >
-          {state.isLoading ? (
-            <ActivityIndicator color="#fff" />
-          ) : (
-            <Text style={styles.buttonText}>Sign In</Text>
-          )}
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={() => navigation.navigate("Register")}>
-          <Text style={styles.linkText}>
-            Don't have an account?{" "}
-            <Text style={styles.linkBold}>Sign Up</Text>
-          </Text>
-        </TouchableOpacity>
-      </View>
-    </KeyboardAvoidingView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#0f0f23",
-  },
-  inner: {
-    flex: 1,
-    justifyContent: "center",
-    paddingHorizontal: 24,
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: "bold",
-    color: "#fff",
-    textAlign: "center",
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: "#888",
-    textAlign: "center",
-    marginBottom: 32,
-  },
-  input: {
-    backgroundColor: "#1a1a2e",
-    borderRadius: 8,
-    padding: 16,
-    fontSize: 16,
-    color: "#fff",
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: "#333",
-  },
-  button: {
-    backgroundColor: "#4f8ef7",
-    borderRadius: 8,
-    padding: 16,
-    alignItems: "center",
-    marginTop: 8,
-    marginBottom: 24,
-  },
-  buttonDisabled: {
-    opacity: 0.6,
-  },
-  buttonText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  errorBox: {
-    backgroundColor: "rgba(255, 69, 58, 0.15)",
-    borderRadius: 8,
-    padding: 12,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: "rgba(255, 69, 58, 0.3)",
-  },
-  errorText: {
-    color: "#ff453a",
-    fontSize: 14,
-    textAlign: "center",
-  },
-  linkText: {
-    color: "#888",
-    textAlign: "center",
-    fontSize: 14,
-  },
-  linkBold: {
-    color: "#4f8ef7",
-    fontWeight: "600",
-  },
-});

mobile/src/screens/RegisterScreen.tsx

@@ -1,212 +0,0 @@
-import { useState, type ReactNode } from "react";
-import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  StyleSheet,
-  Alert,
-  ActivityIndicator,
-  KeyboardAvoidingView,
-  Platform,
-  ScrollView,
-} from "react-native";
-import { useAuth } from "../context/AuthContext";
-import {
-  isValidEmail,
-  validatePasswordStrength,
-} from "@cloud-reader/shared";
-
-export default function RegisterScreen({
-  navigation,
-}: {
-  navigation: any;
-}): ReactNode {
-  const { state, register, clearError } = useAuth();
-  const [username, setUsername] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-
-  const handleRegister = async () => {
-    clearError();
-
-    if (!username.trim()) {
-      Alert.alert("Validation Error", "Please enter a username.");
-      return;
-    }
-    if (!email.trim()) {
-      Alert.alert("Validation Error", "Please enter your email.");
-      return;
-    }
-    if (!isValidEmail(email.trim())) {
-      Alert.alert("Validation Error", "Please enter a valid email address.");
-      return;
-    }
-    const passwordError = validatePasswordStrength(password);
-    if (passwordError) {
-      Alert.alert("Validation Error", passwordError);
-      return;
-    }
-    if (password !== confirmPassword) {
-      Alert.alert("Validation Error", "Passwords do not match.");
-      return;
-    }
-
-    try {
-      await register(email.trim(), password, username.trim());
-    } catch {
-      // Error handled in context
-    }
-  };
-
-  return (
-    <KeyboardAvoidingView
-      style={styles.container}
-      behavior={Platform.OS === "ios" ? "padding" : "height"}
-    >
-      <ScrollView contentContainerStyle={styles.inner}>
-        <Text style={styles.title}>Create Account</Text>
-        <Text style={styles.subtitle}>Join Cloud Reader</Text>
-
-        {state.error && (
-          <View style={styles.errorBox}>
-            <Text style={styles.errorText}>{state.error}</Text>
-          </View>
-        )}
-
-        <TextInput
-          style={styles.input}
-          placeholder="Username"
-          placeholderTextColor="#666"
-          value={username}
-          onChangeText={setUsername}
-          autoCapitalize="none"
-          autoCorrect={false}
-        />
-
-        <TextInput
-          style={styles.input}
-          placeholder="Email"
-          placeholderTextColor="#666"
-          value={email}
-          onChangeText={setEmail}
-          keyboardType="email-address"
-          autoCapitalize="none"
-          autoCorrect={false}
-        />
-
-        <TextInput
-          style={styles.input}
-          placeholder="Password"
-          placeholderTextColor="#666"
-          value={password}
-          onChangeText={setPassword}
-          secureTextEntry
-        />
-
-        <TextInput
-          style={styles.input}
-          placeholder="Confirm Password"
-          placeholderTextColor="#666"
-          value={confirmPassword}
-          onChangeText={setConfirmPassword}
-          secureTextEntry
-        />
-
-        <TouchableOpacity
-          style={[styles.button, state.isLoading && styles.buttonDisabled]}
-          onPress={handleRegister}
-          disabled={state.isLoading}
-        >
-          {state.isLoading ? (
-            <ActivityIndicator color="#fff" />
-          ) : (
-            <Text style={styles.buttonText}>Create Account</Text>
-          )}
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={() => navigation.goBack()}>
-          <Text style={styles.linkText}>
-            Already have an account?{" "}
-            <Text style={styles.linkBold}>Sign In</Text>
-          </Text>
-        </TouchableOpacity>
-      </ScrollView>
-    </KeyboardAvoidingView>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#0f0f23",
-  },
-  inner: {
-    flexGrow: 1,
-    justifyContent: "center",
-    paddingHorizontal: 24,
-    paddingVertical: 48,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: "bold",
-    color: "#fff",
-    textAlign: "center",
-    marginBottom: 8,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: "#888",
-    textAlign: "center",
-    marginBottom: 32,
-  },
-  input: {
-    backgroundColor: "#1a1a2e",
-    borderRadius: 8,
-    padding: 16,
-    fontSize: 16,
-    color: "#fff",
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: "#333",
-  },
-  button: {
-    backgroundColor: "#4f8ef7",
-    borderRadius: 8,
-    padding: 16,
-    alignItems: "center",
-    marginTop: 8,
-    marginBottom: 24,
-  },
-  buttonDisabled: {
-    opacity: 0.6,
-  },
-  buttonText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  errorBox: {
-    backgroundColor: "rgba(255, 69, 58, 0.15)",
-    borderRadius: 8,
-    padding: 12,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: "rgba(255, 69, 58, 0.3)",
-  },
-  errorText: {
-    color: "#ff453a",
-    fontSize: 14,
-    textAlign: "center",
-  },
-  linkText: {
-    color: "#888",
-    textAlign: "center",
-    fontSize: 14,
-  },
-  linkBold: {
-    color: "#4f8ef7",
-    fontWeight: "600",
-  },
-});

mobile/src/screens/SearchScreen.tsx

@@ -1,130 +0,0 @@
-import { useState, type ReactNode } from "react";
-import {
-  View,
-  Text,
-  TextInput,
-  FlatList,
-  TouchableOpacity,
-  StyleSheet,
-  ActivityIndicator,
-} from "react-native";
-import { searchBooks } from "../api/books";
-import type { Book, PaginatedResponse } from "@cloud-reader/shared";
-
-export default function SearchScreen(): ReactNode {
-  const [query, setQuery] = useState("");
-  const [results, setResults] = useState<Book[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [searched, setSearched] = useState(false);
-
-  const handleSearch = async () => {
-    if (!query.trim()) return;
-    setLoading(true);
-    setSearched(true);
-    try {
-      const data: PaginatedResponse<Book> = await searchBooks(query.trim());
-      setResults(data.results);
-    } catch {
-      setResults([]);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const renderBook = ({ item }: { item: Book }) => (
-    <View style={styles.resultCard}>
-      <Text style={styles.resultTitle}>{item.title}</Text>
-      <Text style={styles.resultAuthor}>{item.author}</Text>
-    </View>
-  );
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.searchBar}>
-        <TextInput
-          style={styles.input}
-          placeholder="Search books by title, author..."
-          placeholderTextColor="#666"
-          value={query}
-          onChangeText={setQuery}
-          onSubmitEditing={handleSearch}
-          returnKeyType="search"
-          autoCapitalize="none"
-          autoCorrect={false}
-        />
-      </View>
-
-      {loading && (
-        <View style={styles.centered}>
-          <ActivityIndicator size="large" color="#4f8ef7" />
-        </View>
-      )}
-
-      {!loading && searched && results.length === 0 && (
-        <View style={styles.centered}>
-          <Text style={styles.noResults}>No books found for "{query}"</Text>
-        </View>
-      )}
-
-      <FlatList
-        data={results}
-        renderItem={renderBook}
-        keyExtractor={(item) => item.id}
-        contentContainerStyle={styles.list}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#0f0f23",
-  },
-  searchBar: {
-    padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: "#333",
-  },
-  input: {
-    backgroundColor: "#1a1a2e",
-    borderRadius: 8,
-    padding: 14,
-    fontSize: 16,
-    color: "#fff",
-    borderWidth: 1,
-    borderColor: "#333",
-  },
-  centered: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 24,
-  },
-  list: {
-    padding: 16,
-  },
-  resultCard: {
-    backgroundColor: "#1a1a2e",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 8,
-    borderWidth: 1,
-    borderColor: "#333",
-  },
-  resultTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#fff",
-    marginBottom: 4,
-  },
-  resultAuthor: {
-    fontSize: 14,
-    color: "#888",
-  },
-  noResults: {
-    fontSize: 16,
-    color: "#888",
-    textAlign: "center",
-  },
-});

mobile/src/screens/SettingsScreen.tsx

@@ -1,91 +0,0 @@
-import { type ReactNode } from "react";
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Alert,
-} from "react-native";
-import { useAuth } from "../context/AuthContext";
-
-export default function SettingsScreen(): ReactNode {
-  const { state, logout } = useAuth();
-
-  const handleLogout = () => {
-    Alert.alert("Logout", "Are you sure you want to sign out?", [
-      { text: "Cancel", style: "cancel" },
-      { text: "Sign Out", style: "destructive", onPress: logout },
-    ]);
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.section}>
-        <Text style={styles.sectionTitle}>Account</Text>
-        <View style={styles.infoRow}>
-          <Text style={styles.label}>Username</Text>
-          <Text style={styles.value}>{state.user?.username ?? "—"}</Text>
-        </View>
-        <View style={styles.infoRow}>
-          <Text style={styles.label}>Email</Text>
-          <Text style={styles.value}>{state.user?.email ?? "—"}</Text>
-        </View>
-      </View>
-
-      <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
-        <Text style={styles.logoutText}>Sign Out</Text>
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#0f0f23",
-    padding: 16,
-  },
-  section: {
-    backgroundColor: "#1a1a2e",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 24,
-    borderWidth: 1,
-    borderColor: "#333",
-  },
-  sectionTitle: {
-    fontSize: 18,
-    fontWeight: "600",
-    color: "#fff",
-    marginBottom: 16,
-  },
-  infoRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    paddingVertical: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: "#333",
-  },
-  label: {
-    fontSize: 14,
-    color: "#888",
-  },
-  value: {
-    fontSize: 14,
-    color: "#fff",
-    fontWeight: "500",
-  },
-  logoutButton: {
-    backgroundColor: "rgba(255, 69, 58, 0.15)",
-    borderRadius: 8,
-    padding: 16,
-    alignItems: "center",
-    borderWidth: 1,
-    borderColor: "rgba(255, 69, 58, 0.3)",
-  },
-  logoutText: {
-    color: "#ff453a",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-});

mobile/src/types/index.ts

@@ -1,8 +0,0 @@
-// Mobile-specific type aliases and extensions not covered by shared types
-
-export type RootStackParamList = {
-  Auth: undefined;
-  Main: undefined;
-  BookReader: { bookId: number };
-  BookDetail: { bookId: number };
-};

mobile/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}

package.json

@@ -4,15 +4,6 @@
   "private": true,
   "workspaces": [
     "frontend",
-    "backend",
+    "backend"
-    "mobile",
+  ]
-    "packages/shared"
-  ],
-  "scripts": {
-    "dev:frontend": "yarn workspace @cloud-reader/frontend dev",
-    "dev:backend": "cd backend && python manage.py runserver",
-    "start:mobile": "yarn workspace @cloud-reader/mobile start",
-    "build:shared": "yarn workspace @cloud-reader/shared build",
-    "install:all": "yarn install"
-  }
 }

packages/shared/package.json

@@ -1,14 +0,0 @@
-{
-  "name": "@cloud-reader/shared",
-  "version": "1.0.0",
-  "private": true,
-  "main": "src/index.ts",
-  "types": "src/index.ts",
-  "scripts": {
-    "build": "tsc",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "typescript": "~5.7.0"
-  }
-}

packages/shared/src/index.ts

@@ -1,2 +0,0 @@
-export * from "./types";
-export * from "./utils";

packages/shared/src/types.ts

@@ -1,218 +0,0 @@
-/** Core domain types for Cloud Reader — shared across web and mobile */
-
-// ---- User & Auth ----
-
-export interface User {
-  id: number;
-  email: string;
-  username: string;
-}
-
-export interface TokenResponse {
-  access: string;
-  refresh: string;
-}
-
-export interface LoginPayload {
-  email: string;
-  password: string;
-}
-
-export interface RegisterPayload {
-  email: string;
-  username: string;
-  password: string;
-  password2: string;
-}
-
-// ---- Books ----
-
-export interface Book {
-  id: string;
-  title: string;
-  author: string;
-  total_pages: number;
-  cover_image: string;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface BookSummary {
-  id: string;
-  title: string;
-  author: string;
-  total_pages: number;
-  cover_image: string;
-}
-
-export interface BookListItem {
-  id: number;
-  title: string;
-  author: string;
-  genre: string;
-  reading_status: string;
-  reading_status_display: string;
-  cover_image: string | null;
-}
-
-export interface BookDetail {
-  id: number;
-  title: string;
-  author: string;
-  genre: string;
-  description: string;
-  reading_status: string;
-  reading_status_display: string;
-  cover_image: string | null;
-  total_pages: number;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface BookSearchParams {
-  q?: string;
-  genre?: string;
-  author?: string;
-  reading_status?: string;
-  ordering?: string;
-  page?: number;
-  page_size?: number;
-}
-
-export const READING_STATUS_OPTIONS = [
-  "to_read",
-  "reading",
-  "finished",
-  "dnf",
-] as const;
-
-// ---- E-Books ----
-
-export interface EBookListItem {
-  id: number;
-  title: string;
-  author: string;
-  filename: string;
-  format: string;
-  page_count: number;
-  cover_image: string | null;
-  created_at: string;
-  progress: number | null;
-}
-
-export interface EBookDetail {
-  id: number;
-  title: string;
-  author: string;
-  filename: string;
-  file_url: string;
-  format: string;
-  page_count: number;
-  file_size: number;
-  metadata_json: Record<string, unknown>;
-  cover_image: string | null;
-  created_at: string;
-  updated_at: string;
-  progress: ReadingProgress | null;
-}
-
-export interface ReadingProgress {
-  current_position: number;
-  last_page: number;
-}
-
-export interface ReadingSettings {
-  font_size: number;
-  font_style: "sans-serif" | "serif" | "monospace";
-  background_color: string;
-}
-
-export interface BookChapter {
-  id: number;
-  title: string;
-  index: number;
-  href: string;
-  children: BookChapter[];
-}
-
-export interface TocResponse {
-  chapters: BookChapter[];
-  format: string;
-  page_count: number;
-}
-
-export interface ContentResponse {
-  page: number;
-  total_pages: number;
-  content: string;
-  chapter_title: string;
-  format: string;
-}
-
-// ---- Bookmarks & Notes ----
-
-export interface Bookmark {
-  id: string;
-  book: string;
-  book_title: string;
-  page: number;
-  location_text: string;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface Note {
-  id: string;
-  book: string;
-  book_title: string;
-  page: number;
-  location_text: string;
-  content: string;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface CreateBookmarkPayload {
-  book: string;
-  page: number;
-  location_text?: string;
-}
-
-export interface CreateNotePayload {
-  book: string;
-  page: number;
-  location_text?: string;
-  content: string;
-}
-
-export interface UpdateNotePayload {
-  content: string;
-}
-
-export type AnnotationKind = "bookmark" | "note";
-
-export interface AnnotationEntry {
-  id: string;
-  kind: AnnotationKind;
-  book_title: string;
-  book_id: string;
-  page: number;
-  location_text: string;
-  content?: string;
-  created_at: string;
-  updated_at: string;
-}
-
-// ---- Generic API shapes ----
-
-export interface PaginatedResponse<T> {
-  count: number;
-  next: string | null;
-  previous: string | null;
-  results: T[];
-}
-
-export interface ApiError {
-  detail?: string;
-  [key: string]: unknown;
-}

packages/shared/src/utils.ts

@@ -1,117 +0,0 @@
-/** Shared utility functions for Cloud Reader */
-
-/**
- * Format an ISO date string to a human-readable date.
- */
-export function formatDate(iso: string): string {
-  const date = new Date(iso);
-  return date.toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-  });
-}
-
-/**
- * Format a date as a relative time string (e.g., "2h ago", "3d ago").
- */
-export function formatRelativeTime(iso: string): string {
-  const now = Date.now();
-  const then = new Date(iso).getTime();
-  const diffMs = now - then;
-  const seconds = Math.floor(diffMs / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-
-  if (days > 0) return `${days}d ago`;
-  if (hours > 0) return `${hours}h ago`;
-  if (minutes > 0) return `${minutes}m ago`;
-  return "just now";
-}
-
-/**
- * Validate an email address format.
- */
-export function isValidEmail(email: string): boolean {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-}
-
-/**
- * Password strength check:
- * - At least 8 characters
- * - At least one uppercase letter
- * - At least one lowercase letter
- * - At least one digit
- */
-export function isStrongPassword(password: string): boolean {
-  return (
-    password.length >= 8 &&
-    /[A-Z]/.test(password) &&
-    /[a-z]/.test(password) &&
-    /\d/.test(password)
-  );
-}
-
-/**
- * Check if two passwords match.
- */
-export function doPasswordsMatch(password: string, confirm: string): boolean {
-  return password === confirm;
-}
-
-/**
- * Get a user-friendly reading status label.
- */
-export function readingStatusLabel(status: string): string {
-  const labels: Record<string, string> = {
-    to_read: "To Read",
-    reading: "Reading",
-    finished: "Finished",
-    dnf: "Did Not Finish",
-  };
-  return labels[status] ?? status;
-}
-
-/**
- * Format file size in bytes to a human-readable string.
- */
-export function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-// ---- API endpoint constants ----
-
-export const API_ENDPOINTS = {
-  auth: {
-    login: "/api/auth/login/",
-    register: "/api/auth/register/",
-    tokenRefresh: "/api/auth/token/refresh/",
-    profile: "/api/auth/profile/",
-  },
-  books: {
-    list: "/api/books/",
-    detail: (id: number | string) => `/api/books/${id}/`,
-    genres: "/api/books/genres/",
-    authors: "/api/books/authors/",
-  },
-  ebooks: {
-    list: "/api/ebooks/",
-    detail: (id: number) => `/api/ebooks/${id}/`,
-    upload: "/api/ebooks/upload/",
-    toc: (id: number) => `/api/ebooks/${id}/toc/`,
-    content: (id: number, page: number) =>
-      `/api/ebooks/${id}/content/?page=${page}`,
-    progress: (id: number) => `/api/ebooks/${id}/progress/`,
-    settings: (id: number) => `/api/ebooks/${id}/settings/`,
-  },
-  annotations: {
-    list: "/api/annotations/",
-    bookmarks: "/api/annotations/bookmarks/",
-    notes: "/api/annotations/notes/",
-    bookmarkDetail: (id: string) => `/api/annotations/bookmarks/${id}/`,
-    noteDetail: (id: string) => `/api/annotations/notes/${id}/`,
-  },
-} as const;

packages/shared/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true
-  },
-  "include": ["src/**/*"]
-}

web/src/api/reader.ts

@@ -1,112 +0,0 @@
-/**
- * API client for the reader module — reading settings, chapters, and progress.
- */
-
-import type {
-  ChapterDetail,
-  ChapterSummary,
-  ReadingProgress,
-  ReadingSettings,
-} from "../types/reader";
-
-const API_BASE = "/api";
-
-/**
- * Fetch the current user's reading settings.
- * Auto-creates defaults on the server if none exist.
- */
-export async function getReadingSettings(): Promise<ReadingSettings> {
-  const response = await fetch(`${API_BASE}/reader/settings/`);
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch reading settings: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ReadingSettings>;
-}
-
-/**
- * Update (full or partial) the user's reading settings.
- */
-export async function updateReadingSettings(
-  settings: Partial<ReadingSettings>
-): Promise<ReadingSettings> {
-  const method = settings.theme !== undefined ? "PUT" : "PATCH";
-  const response = await fetch(`${API_BASE}/reader/settings/`, {
-    method,
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(settings),
-  });
-  if (!response.ok) {
-    throw new Error(
-      `Failed to update reading settings: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ReadingSettings>;
-}
-
-/**
- * Fetch the table of contents (chapter list) for a book.
- */
-export async function getChapters(bookId: number): Promise<ChapterSummary[]> {
-  const response = await fetch(`${API_BASE}/books/${bookId}/chapters/`);
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch chapters: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ChapterSummary[]>;
-}
-
-/**
- * Fetch a specific chapter with full content for reading.
- */
-export async function getChapterContent(
-  bookId: number,
-  chapterNumber: number
-): Promise<ChapterDetail> {
-  const response = await fetch(
-    `${API_BASE}/books/${bookId}/chapters/${chapterNumber}/`
-  );
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch chapter ${chapterNumber}: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ChapterDetail>;
-}
-
-/**
- * Fetch reading progress for a book.
- */
-export async function getReadingProgress(
-  bookId: number
-): Promise<ReadingProgress> {
-  const response = await fetch(`${API_BASE}/books/${bookId}/progress/`);
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch reading progress: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ReadingProgress>;
-}
-
-/**
- * Update reading progress for a book.
- */
-export async function updateReadingProgress(
-  bookId: number,
-  progress: Partial<ReadingProgress>
-): Promise<ReadingProgress> {
-  const response = await fetch(`${API_BASE}/books/${bookId}/progress/`, {
-    method: "PUT",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(progress),
-  });
-  if (!response.ok) {
-    throw new Error(
-      `Failed to update reading progress: ${response.status} ${response.statusText}`
-    );
-  }
-  return response.json() as Promise<ReadingProgress>;
-}

web/src/components/ReaderToolbar.tsx

@@ -1,67 +0,0 @@
-/**
- * ReaderToolbar — fixed bottom toolbar for the reading view.
- * Provides TOC toggle, settings toggle, and progress indicator.
- */
-
-import type { ReadingProgress } from "../types/reader";
-
-interface ReaderToolbarProps {
-  bookTitle: string;
-  chapterTitle: string;
-  progress: ReadingProgress | null;
-  onToggleToc: () => void;
-  onToggleSettings: () => void;
-}
-
-export default function ReaderToolbar({
-  bookTitle,
-  chapterTitle,
-  progress,
-  onToggleToc,
-  onToggleSettings,
-}: ReaderToolbarProps) {
-  const percentage = progress?.percentage ?? 0;
-
-  return (
-    <>
-      {/* Top bar */}
-      <header className="reader-top-bar">
-        <button
-          type="button"
-          className="reader-bar-btn"
-          onClick={onToggleToc}
-          aria-label="Table of contents"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <line x1="3" y1="6" x2="21" y2="6" />
-            <line x1="3" y1="12" x2="21" y2="12" />
-            <line x1="3" y1="18" x2="21" y2="18" />
-          </svg>
-        </button>
-        <div className="reader-bar-title">
-          <span className="reader-bar-book">{bookTitle}</span>
-          <span className="reader-bar-chapter">{chapterTitle}</span>
-        </div>
-        <button
-          type="button"
-          className="reader-bar-btn"
-          onClick={onToggleSettings}
-          aria-label="Reading settings"
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <circle cx="12" cy="12" r="3" />
-            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-          </svg>
-        </button>
-      </header>
-
-      {/* Bottom progress bar */}
-      <div className="reader-progress-bar">
-        <div
-          className="reader-progress-fill"
-          style={{ width: `${Math.min(percentage, 100)}%` }}
-        />
-      </div>
-    </>
-  );
-}

web/src/components/ReadingSettingsPanel.tsx

@@ -1,232 +0,0 @@
-/**
- * ReadingSettingsPanel — slide-in drawer from the right for customizing
- * the reading experience: theme, font, sizing, orientation.
- */
-
-import { useState } from "react";
-import type {
-  FontFamily,
-  OrientationLock,
-  ReadingSettings,
-  ThemePreset,
-} from "../types/reader";
-
-interface ReadingSettingsPanelProps {
-  settings: ReadingSettings;
-  isOpen: boolean;
-  onClose: () => void;
-  onUpdate: (partial: Partial<ReadingSettings>) => Promise<void>;
-}
-
-const THEME_OPTIONS: { value: ThemePreset; label: string }[] = [
-  { value: "sepia", label: "Sepia" },
-  { value: "dark", label: "Dark" },
-  { value: "light", label: "Light" },
-  { value: "paper", label: "Paper" },
-];
-
-const FONT_OPTIONS: { value: FontFamily; label: string }[] = [
-  { value: "sans-serif", label: "Sans-serif" },
-  { value: "serif", label: "Serif" },
-  { value: "monospace", label: "Monospace" },
-];
-
-const ORIENTATION_OPTIONS: { value: OrientationLock; label: string }[] = [
-  { value: "auto", label: "Auto" },
-  { value: "portrait", label: "Portrait" },
-  { value: "landscape", label: "Landscape" },
-];
-
-export default function ReadingSettingsPanel({
-  settings,
-  isOpen,
-  onClose,
-  onUpdate,
-}: ReadingSettingsPanelProps) {
-  const [saving, setSaving] = useState<Record<string, boolean>>({});
-
-  const handleChange = async (
-    key: keyof ReadingSettings,
-    value: string | number
-  ) => {
-    setSaving((prev) => ({ ...prev, [key]: true }));
-    try {
-      await onUpdate({ [key]: value as never });
-    } finally {
-      setSaving((prev) => ({ ...prev, [key]: false }));
-    }
-  };
-
-  return (
-    <>
-      {/* Overlay */}
-      {isOpen && (
-        <div
-          className="settings-overlay"
-          onClick={onClose}
-          onKeyDown={(e: React.KeyboardEvent) => {
-            if (e.key === "Escape") onClose();
-          }}
-          role="presentation"
-        />
-      )}
-
-      {/* Drawer */}
-      <aside
-        className={`settings-drawer ${isOpen ? "settings-drawer--open" : ""}`}
-      >
-        <div className="settings-header">
-          <h2 className="settings-title">Reading Settings</h2>
-          <button
-            type="button"
-            className="settings-close-btn"
-            onClick={onClose}
-            aria-label="Close settings"
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
-        </div>
-
-        <div className="settings-body">
-          {/* Theme Presets */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">Theme</h3>
-            <div className="theme-grid">
-              {THEME_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value}
-                  type="button"
-                  className={`theme-btn ${
-                    settings.theme === opt.value ? "theme-btn--active" : ""
-                  }`}
-                  onClick={() => handleChange("theme", opt.value)}
-                  disabled={saving.theme}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          </section>
-
-          {/* Font Family */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">Font</h3>
-            <div className="font-grid">
-              {FONT_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value}
-                  type="button"
-                  className={`font-btn ${
-                    settings.font_family === opt.value ? "font-btn--active" : ""
-                  }`}
-                  onClick={() => handleChange("font_family", opt.value)}
-                  disabled={saving.font_family}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          </section>
-
-          {/* Font Size Slider */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">
-              Font Size: {settings.font_size}px
-            </h3>
-            <input
-              type="range"
-              min="12"
-              max="32"
-              value={settings.font_size}
-              onChange={(e) =>
-                handleChange("font_size", Number(e.target.value))
-              }
-              className="settings-slider"
-              aria-label="Font size"
-            />
-          </section>
-
-          {/* Line Height Slider */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">
-              Line Height: {settings.line_height.toFixed(1)}
-            </h3>
-            <input
-              type="range"
-              min="1.2"
-              max="2.0"
-              step="0.1"
-              value={settings.line_height}
-              onChange={(e) =>
-                handleChange("line_height", Number(e.target.value))
-              }
-              className="settings-slider"
-              aria-label="Line height"
-            />
-          </section>
-
-          {/* Margin Width Slider */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">
-              Margins: {settings.margin_width}px
-            </h3>
-            <input
-              type="range"
-              min="8"
-              max="48"
-              value={settings.margin_width}
-              onChange={(e) =>
-                handleChange("margin_width", Number(e.target.value))
-              }
-              className="settings-slider"
-              aria-label="Margin width"
-            />
-          </section>
-
-          {/* Brightness Slider */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">
-              Brightness: {settings.brightness}%
-            </h3>
-            <input
-              type="range"
-              min="0"
-              max="100"
-              value={settings.brightness}
-              onChange={(e) =>
-                handleChange("brightness", Number(e.target.value))
-              }
-              className="settings-slider"
-              aria-label="Brightness"
-            />
-          </section>
-
-          {/* Orientation Lock */}
-          <section className="settings-section">
-            <h3 className="settings-section-title">Orientation</h3>
-            <div className="orientation-grid">
-              {ORIENTATION_OPTIONS.map((opt) => (
-                <button
-                  key={opt.value}
-                  type="button"
-                  className={`orientation-btn ${
-                    settings.orientation_lock === opt.value
-                      ? "orientation-btn--active"
-                      : ""
-                  }`}
-                  onClick={() => handleChange("orientation_lock", opt.value)}
-                  disabled={saving.orientation_lock}
-                >
-                  {opt.label}
-                </button>
-              ))}
-            </div>
-          </section>
-        </div>
-      </aside>
-    </>
-  );
-}

web/src/components/TableOfContents.tsx

@@ -1,80 +0,0 @@
-/**
- * TableOfContents — slide-in drawer listing all chapters.
- * Tap a chapter to navigate. Current chapter is highlighted.
- */
-
-import type { ChapterSummary } from "../types/reader";
-
-interface TableOfContentsProps {
-  chapters: ChapterSummary[];
-  currentChapterNumber: number;
-  isOpen: boolean;
-  onClose: () => void;
-  onNavigate: (number: number) => void;
-}
-
-export default function TableOfContents({
-  chapters,
-  currentChapterNumber,
-  isOpen,
-  onClose,
-  onNavigate,
-}: TableOfContentsProps) {
-  const handleChapterClick = (number: number) => {
-    onNavigate(number);
-    onClose();
-  };
-
-  return (
-    <>
-      {/* Overlay */}
-      {isOpen && (
-        <div
-          className="toc-overlay"
-          onClick={onClose}
-          onKeyDown={(e: React.KeyboardEvent) => {
-            if (e.key === "Escape") onClose();
-          }}
-          role="presentation"
-        />
-      )}
-
-      {/* Drawer */}
-      <aside className={`toc-drawer ${isOpen ? "toc-drawer--open" : ""}`}>
-        <div className="toc-header">
-          <h2 className="toc-title">Contents</h2>
-          <button
-            type="button"
-            className="toc-close-btn"
-            onClick={onClose}
-            aria-label="Close table of contents"
-          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          </button>
-        </div>
-
-        <nav className="toc-list">
-          {chapters.length === 0 && (
-            <p className="toc-empty">No chapters available.</p>
-          )}
-          {chapters.map((chapter) => (
-            <button
-              key={chapter.number}
-              type="button"
-              className={`toc-item ${
-                chapter.number === currentChapterNumber ? "toc-item--active" : ""
-              }`}
-              onClick={() => handleChapterClick(chapter.number)}
-            >
-              <span className="toc-item-number">{chapter.number}</span>
-              <span className="toc-item-title">{chapter.title}</span>
-            </button>
-          ))}
-        </nav>
-      </aside>
-    </>
-  );
-}

web/src/hooks/useChapters.ts

@@ -1,129 +0,0 @@
-/**
- * useChapters — fetch chapter list and manage current chapter navigation.
- */
-
-import { useCallback, useEffect, useState } from "react";
-import { getChapterContent, getChapters } from "../api/reader";
-import type { ChapterDetail, ChapterSummary } from "../types/reader";
-
-export interface UseChaptersReturn {
-  chapters: ChapterSummary[];
-  currentChapter: ChapterDetail | null;
-  currentChapterNumber: number;
-  isLoading: boolean;
-  error: string | null;
-  navigateToChapter: (number: number) => Promise<void>;
-  goToNextChapter: () => Promise<void>;
-  goToPreviousChapter: () => Promise<void>;
-  hasNext: boolean;
-  hasPrevious: boolean;
-}
-
-export function useChapters(
-  bookId: number,
-  initialChapter: number = 1
-): UseChaptersReturn {
-  const [chapters, setChapters] = useState<ChapterSummary[]>([]);
-  const [currentChapter, setCurrentChapter] = useState<ChapterDetail | null>(
-    null
-  );
-  const [currentChapterNumber, setCurrentChapterNumber] =
-    useState<number>(initialChapter);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Fetch chapter list on mount
-  useEffect(() => {
-    let cancelled = false;
-    setIsLoading(true);
-    getChapters(bookId)
-      .then((data) => {
-        if (!cancelled) {
-          setChapters(data);
-          // If chapters exist and initial chapter is valid, fetch it
-          if (
-            data.length > 0 &&
-            data.some((c) => c.number === currentChapterNumber)
-          ) {
-            return getChapterContent(bookId, currentChapterNumber);
-          }
-          return null;
-        }
-        return null;
-      })
-      .then((chapter) => {
-        if (!cancelled && chapter) {
-          setCurrentChapter(chapter);
-        }
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) {
-          setError(
-            err instanceof Error ? err.message : "Failed to load chapters"
-          );
-        }
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [bookId, currentChapterNumber]);
-
-  const fetchChapter = useCallback(
-    async (number: number) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const chapter = await getChapterContent(bookId, number);
-        setCurrentChapter(chapter);
-        setCurrentChapterNumber(number);
-      } catch (err: unknown) {
-        setError(
-          err instanceof Error ? err.message : "Failed to load chapter"
-        );
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [bookId]
-  );
-
-  const navigateToChapter = useCallback(
-    (number: number) => {
-      fetchChapter(number);
-    },
-    [fetchChapter]
-  );
-
-  const goToNextChapter = useCallback(() => {
-    const next = currentChapterNumber + 1;
-    if (chapters.some((c) => c.number === next)) {
-      fetchChapter(next);
-    }
-  }, [currentChapterNumber, chapters, fetchChapter]);
-
-  const goToPreviousChapter = useCallback(() => {
-    const prev = currentChapterNumber - 1;
-    if (prev >= 1 && chapters.some((c) => c.number === prev)) {
-      fetchChapter(prev);
-    }
-  }, [currentChapterNumber, chapters, fetchChapter]);
-
-  const hasNext = chapters.some((c) => c.number === currentChapterNumber + 1);
-  const hasPrevious = chapters.some((c) => c.number === currentChapterNumber - 1);
-
-  return {
-    chapters,
-    currentChapter,
-    currentChapterNumber,
-    isLoading,
-    error,
-    navigateToChapter,
-    goToNextChapter,
-    goToPreviousChapter,
-    hasNext,
-    hasPrevious,
-  };
-}

web/src/hooks/useReadingProgress.ts

@@ -1,99 +0,0 @@
-/**
- * useReadingProgress — fetch and update reading progress for a book.
- * Auto-saves when chapter or position changes.
- */
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { getReadingProgress, updateReadingProgress } from "../api/reader";
-import type { ReadingProgress } from "../types/reader";
-
-export interface UseReadingProgressReturn {
-  progress: ReadingProgress | null;
-  isLoading: boolean;
-  error: string | null;
-  saveProgress: (
-    chapter: number,
-    position: number,
-    percentage: number
-  ) => Promise<void>;
-  /** Schedule a debounced save — fires at most once per 3 seconds */
-  debouncedSave: (
-    chapter: number,
-    position: number,
-    percentage: number
-  ) => void;
-}
-
-export function useReadingProgress(
-  bookId: number
-): UseReadingProgressReturn {
-  const [progress, setProgress] = useState<ReadingProgress | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Fetch progress on mount
-  useEffect(() => {
-    let cancelled = false;
-    setIsLoading(true);
-    getReadingProgress(bookId)
-      .then((data) => {
-        if (!cancelled) setProgress(data);
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) {
-          setError(
-            err instanceof Error ? err.message : "Failed to load progress"
-          );
-        }
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [bookId]);
-
-  const saveProgress = useCallback(
-    async (chapter: number, position: number, percentage: number) => {
-      try {
-        const updated = await updateReadingProgress(bookId, {
-          current_chapter: chapter,
-          current_position: position,
-          percentage,
-        });
-        setProgress(updated);
-        setError(null);
-      } catch (err: unknown) {
-        setError(
-          err instanceof Error ? err.message : "Failed to save progress"
-        );
-      }
-    },
-    [bookId]
-  );
-
-  const debouncedSave = useCallback(
-    (chapter: number, position: number, percentage: number) => {
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-      }
-      debounceTimer.current = setTimeout(() => {
-        saveProgress(chapter, position, percentage);
-      }, 3000);
-    },
-    [saveProgress]
-  );
-
-  // Cleanup timer on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceTimer.current) {
-        clearTimeout(debounceTimer.current);
-      }
-    };
-  }, []);
-
-  return { progress, isLoading, error, saveProgress, debouncedSave };
-}

web/src/hooks/useReadingSettings.ts

@@ -1,96 +0,0 @@
-/**
- * useReadingSettings — fetch and manage user reading preferences.
- * Applies settings as CSS custom properties on the document root.
- */
-
-import { useCallback, useEffect, useState } from "react";
-import {
-  getReadingSettings,
-  updateReadingSettings,
-} from "../api/reader";
-import type { ReadingSettings } from "../types/reader";
-
-const DEFAULT_SETTINGS: ReadingSettings = {
-  font_family: "serif",
-  font_size: 18,
-  line_height: 1.6,
-  margin_width: 16,
-  background_color: "#f5f0eb",
-  text_color: "#1a1a1a",
-  brightness: 100,
-  orientation_lock: "auto",
-  theme: "sepia",
-  created_at: "",
-  updated_at: "",
-};
-
-function applyCssVariables(settings: ReadingSettings): void {
-  const root = document.documentElement;
-  root.style.setProperty("--reader-bg", settings.background_color);
-  root.style.setProperty("--reader-text", settings.text_color);
-  root.style.setProperty("--reader-font-family", settings.font_family);
-  root.style.setProperty("--reader-font-size", `${settings.font_size}px`);
-  root.style.setProperty("--reader-line-height", String(settings.line_height));
-  root.style.setProperty("--reader-margin", `${settings.margin_width}px`);
-  root.style.setProperty("--reader-brightness", `${settings.brightness}%`);
-}
-
-export interface UseReadingSettingsReturn {
-  settings: ReadingSettings;
-  isLoading: boolean;
-  error: string | null;
-  updateSettings: (partial: Partial<ReadingSettings>) => Promise<void>;
-}
-
-export function useReadingSettings(): UseReadingSettingsReturn {
-  const [settings, setSettings] = useState<ReadingSettings>(DEFAULT_SETTINGS);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  // Fetch settings on mount
-  useEffect(() => {
-    let cancelled = false;
-    setIsLoading(true);
-    getReadingSettings()
-      .then((data) => {
-        if (!cancelled) {
-          setSettings(data);
-          applyCssVariables(data);
-        }
-      })
-      .catch((err: unknown) => {
-        if (!cancelled) {
-          setError(
-            err instanceof Error ? err.message : "Failed to load reading settings"
-          );
-          // Apply defaults
-          applyCssVariables(DEFAULT_SETTINGS);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) setIsLoading(false);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  const updateSettings = useCallback(
-    async (partial: Partial<ReadingSettings>) => {
-      try {
-        const updated = await updateReadingSettings(partial);
-        setSettings(updated);
-        applyCssVariables(updated);
-        setError(null);
-      } catch (err: unknown) {
-        setError(
-          err instanceof Error ? err.message : "Failed to update reading settings"
-        );
-        throw err;
-      }
-    },
-    []
-  );
-
-  return { settings, isLoading, error, updateSettings };
-}

web/src/pages/ReadingPage.tsx

@@ -1,199 +0,0 @@
-/**
- * ReadingPage — full-screen reading view for ebooks.
- * Integrates TOC drawer, settings panel, chapter navigation, and progress tracking.
- */
-
-import { lazy, Suspense, useCallback, useEffect, useState } from "react";
-import { useChapters } from "../hooks/useChapters";
-import { useReadingProgress } from "../hooks/useReadingProgress";
-import { useReadingSettings } from "../hooks/useReadingSettings";
-import type { BookDetail as BookDetailType } from "../types";
-
-const ReaderToolbar = lazy(() => import("../components/ReaderToolbar"));
-const TableOfContents = lazy(() => import("../components/TableOfContents"));
-const ReadingSettingsPanel = lazy(
-  () => import("../components/ReadingSettingsPanel")
-);
-
-interface ReadingPageProps {
-  book: BookDetailType;
-  onBack: () => void;
-}
-
-export default function ReadingPage({ book, onBack }: ReadingPageProps) {
-  const [tocOpen, setTocOpen] = useState(false);
-  const [settingsOpen, setSettingsOpen] = useState(false);
-
-  const { settings, updateSettings } = useReadingSettings();
-  const {
-    chapters,
-    currentChapter,
-    currentChapterNumber,
-    isLoading,
-    error,
-    navigateToChapter,
-    goToNextChapter,
-    goToPreviousChapter,
-    hasNext,
-    hasPrevious,
-  } = useChapters(book.id, 1);
-
-  const { progress, debouncedSave } = useReadingProgress(book.id);
-
-  // Auto-save progress when chapter changes
-  useEffect(() => {
-    if (currentChapter && currentChapterNumber > 0) {
-      debouncedSave(currentChapterNumber, 0, (currentChapterNumber / Math.max(chapters.length, 1)) * 100);
-    }
-  }, [currentChapterNumber, currentChapter?.id]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "ArrowLeft" && hasPrevious) {
-        goToPreviousChapter();
-      } else if (e.key === "ArrowRight" && hasNext) {
-        goToNextChapter();
-      } else if (e.key === "Escape") {
-        setTocOpen(false);
-        setSettingsOpen(false);
-      }
-    },
-    [hasNext, hasPrevious, goToNextChapter, goToPreviousChapter]
-  );
-
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-
-  // Lock/unlock orientation via CSS
-  useEffect(() => {
-    const root = document.documentElement;
-    if (settings.orientation_lock !== "auto") {
-      root.style.setProperty(
-        "--reader-orientation",
-        settings.orientation_lock === "portrait" ? "portrait" : "landscape"
-      );
-    } else {
-      root.style.removeProperty("--reader-orientation");
-    }
-  }, [settings.orientation_lock]);
-
-  // Show loading state
-  if (isLoading && !currentChapter) {
-    return (
-      <div className="reader-loading">
-        <div className="spinner" />
-        <p>Loading reader...</p>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="reader-loading">
-        <p className="reader-error">{error}</p>
-        <button type="button" className="back-button" onClick={onBack}>
-          Back to book
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <Suspense
-      fallback={
-        <div className="reader-loading">
-          <div className="spinner" />
-        </div>
-      }
-    >
-      <div className="reader-container">
-        <ReaderToolbar
-          bookTitle={book.title}
-          chapterTitle={currentChapter?.title ?? "Loading..."}
-          progress={progress}
-          onToggleToc={() => setTocOpen((v) => !v)}
-          onToggleSettings={() => setSettingsOpen((v) => !v)}
-        />
-
-        <TableOfContents
-          chapters={chapters}
-          currentChapterNumber={currentChapterNumber}
-          isOpen={tocOpen}
-          onClose={() => setTocOpen(false)}
-          onNavigate={navigateToChapter}
-        />
-
-        <ReadingSettingsPanel
-          settings={settings}
-          isOpen={settingsOpen}
-          onClose={() => setSettingsOpen(false)}
-          onUpdate={updateSettings}
-        />
-
-        {/* Main reading area */}
-        <main className="reader-content">
-          {isLoading ? (
-            <div className="reader-loading">
-              <div className="spinner" />
-              <p>Loading chapter...</p>
-            </div>
-          ) : currentChapter ? (
-            <article className="reader-chapter">
-              <h1 className="reader-chapter-title">{currentChapter.title}</h1>
-              <div
-                className="reader-chapter-body"
-                dangerouslySetInnerHTML={{
-                  __html: currentChapter.content,
-                }}
-              />
-            </article>
-          ) : (
-            <div className="reader-loading">
-              <p>Select a chapter from the table of contents to start reading.</p>
-            </div>
-          )}
-        </main>
-
-        {/* Bottom navigation bar */}
-        <nav className="reader-nav">
-          <button
-            type="button"
-            className={`reader-nav-btn ${!hasPrevious ? "reader-nav-btn--disabled" : ""}`}
-            onClick={goToPreviousChapter}
-            disabled={!hasPrevious}
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="15 18 9 12 15 6" />
-            </svg>
-            Previous
-          </button>
-
-          <button
-            type="button"
-            className="reader-nav-btn reader-nav-btn--back"
-            onClick={onBack}
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M20 12H4M10 18l-6-6 6-6" />
-            </svg>
-            Library
-          </button>
-
-          <button
-            type="button"
-            className={`reader-nav-btn ${!hasNext ? "reader-nav-btn--disabled" : ""}`}
-            onClick={goToNextChapter}
-            disabled={!hasNext}
-          >
-            Next
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="9 18 15 12 9 6" />
-            </svg>
-          </button>
-        </nav>
-      </div>
-    </Suspense>
-  );
-}

web/src/reader.css

@@ -1,621 +0,0 @@
-/* ============================================================
-   Cloud Reader — Reading View Styles
-   Mobile-first reading experience with theme support
-   ============================================================ */
-
-/* --- CSS Custom Properties (overridden by JS) --- */
-:root {
-  --reader-bg: #f5f0eb;
-  --reader-text: #1a1a1a;
-  --reader-font-family: Georgia, "Times New Roman", serif;
-  --reader-font-size: 18px;
-  --reader-line-height: 1.6;
-  --reader-margin: 16px;
-  --reader-brightness: 100%;
-  --reader-toolbar-bg: rgba(26, 26, 26, 0.95);
-  --reader-toolbar-text: #e0e0e0;
-  --reader-accent: #6c8cff;
-}
-
-/* --- Reading Container --- */
-.reader-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--reader-bg);
-  color: var(--reader-text);
-  font-family: var(--reader-font-family);
-  font-size: var(--reader-font-size);
-  line-height: var(--reader-line-height);
-  filter: brightness(var(--reader-brightness));
-  display: flex;
-  flex-direction: column;
-  z-index: 100;
-  overflow: hidden;
-}
-
-/* Orientation lock */
-@supports (--reader-orientation: portrait) {
-  .reader-container {
-    orientation: var(--reader-orientation);
-  }
-}
-
-@media (orientation: landascape) {
-  .reader-container {
-    --reader-margin: 24px;
-  }
-}
-
-/* --- Top Toolbar --- */
-.reader-top-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 52px;
-  background: var(--reader-toolbar-bg);
-  color: var(--reader-toolbar-text);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 12px;
-  z-index: 120;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-}
-
-.reader-bar-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: transparent;
-  border: none;
-  color: var(--reader-toolbar-text);
-  cursor: pointer;
-  border-radius: 8px;
-  transition: background 0.15s;
-}
-
-.reader-bar-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.reader-bar-title {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1px;
-  min-width: 0;
-  flex: 1;
-  padding: 0 8px;
-}
-
-.reader-bar-book {
-  font-size: 0.8rem;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
-.reader-bar-chapter {
-  font-size: 0.7rem;
-  opacity: 0.7;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 200px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
-/* --- Progress Bar --- */
-.reader-progress-bar {
-  position: fixed;
-  top: 52px;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: rgba(255, 255, 255, 0.1);
-  z-index: 120;
-}
-
-.reader-progress-fill {
-  height: 100%;
-  background: var(--reader-accent);
-  transition: width 0.3s ease;
-}
-
-/* --- Main Content Area --- */
-.reader-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 72px var(--reader-margin) 72px;
-  -webkit-overflow-scrolling: touch;
-  scroll-behavior: smooth;
-}
-
-/* --- Chapter Article --- */
-.reader-chapter {
-  max-width: 680px;
-  margin: 0 auto;
-}
-
-.reader-chapter-title {
-  font-size: 1.6em;
-  font-weight: 700;
-  line-height: 1.3;
-  margin-bottom: 0.75em;
-  padding-bottom: 0.5em;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  color: var(--reader-text);
-}
-
-/* Chapter body — content from API (could be HTML/markdown-rendered) */
-.reader-chapter-body {
-  font-size: 1em;
-  line-height: var(--reader-line-height);
-}
-
-.reader-chapter-body p {
-  margin-bottom: 1.2em;
-  text-align: justify;
-  hyphens: auto;
-}
-
-.reader-chapter-body h2,
-.reader-chapter-body h3,
-.reader-chapter-body h4 {
-  margin-top: 1.5em;
-  margin-bottom: 0.6em;
-  line-height: 1.3;
-}
-
-.reader-chapter-body blockquote {
-  border-left: 3px solid var(--reader-accent);
-  padding-left: 1em;
-  margin: 1em 0;
-  opacity: 0.85;
-  font-style: italic;
-}
-
-.reader-chapter-body img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 4px;
-  margin: 1em 0;
-}
-
-.reader-chapter-body ul,
-.reader-chapter-body ol {
-  padding-left: 1.5em;
-  margin-bottom: 1.2em;
-}
-
-.reader-chapter-body li {
-  margin-bottom: 0.4em;
-}
-
-/* --- Navigation Bar (Bottom) --- */
-.reader-nav {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 56px;
-  background: var(--reader-toolbar-bg);
-  color: var(--reader-toolbar-text);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 12px;
-  z-index: 120;
-  gap: 8px;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-}
-
-.reader-nav-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
-  color: var(--reader-toolbar-text);
-  font-size: 0.85rem;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.reader-nav-btn:hover:not(.reader-nav-btn--disabled) {
-  border-color: var(--reader-accent);
-  color: var(--reader-accent);
-}
-
-.reader-nav-btn--disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.reader-nav-btn--back {
-  background: rgba(108, 140, 255, 0.15);
-  border-color: rgba(108, 140, 255, 0.3);
-}
-
-.reader-nav-btn--back:hover {
-  background: rgba(108, 140, 255, 0.25);
-  color: var(--reader-accent);
-}
-
-/* --- TOC Drawer --- */
-.toc-overlay,
-.settings-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 130;
-  animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.toc-drawer,
-.settings-drawer {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 300px;
-  max-width: 85vw;
-  background: var(--reader-toolbar-bg);
-  color: var(--reader-toolbar-text);
-  z-index: 140;
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.toc-drawer {
-  left: 0;
-  transform: translateX(-100%);
-}
-
-.toc-drawer--open {
-  transform: translateX(0);
-}
-
-.settings-drawer {
-  right: 0;
-  transform: translateX(100%);
-}
-
-.settings-drawer--open {
-  transform: translateX(0);
-}
-
-.toc-header,
-.settings-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.toc-title,
-.settings-title {
-  font-size: 1.1rem;
-  font-weight: 700;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
-.toc-close-btn,
-.settings-close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border: none;
-  color: var(--reader-toolbar-text);
-  cursor: pointer;
-  border-radius: 6px;
-  transition: background 0.15s;
-}
-
-.toc-close-btn:hover,
-.settings-close-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-/* --- TOC List --- */
-.toc-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 0;
-}
-
-.toc-empty {
-  padding: 24px 16px;
-  text-align: center;
-  opacity: 0.6;
-  font-size: 0.9rem;
-}
-
-.toc-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 10px 16px;
-  background: transparent;
-  border: none;
-  color: var(--reader-toolbar-text);
-  font-size: 0.9rem;
-  text-align: left;
-  cursor: pointer;
-  transition: background 0.15s;
-  font-family: inherit;
-}
-
-.toc-item:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.toc-item--active {
-  background: rgba(108, 140, 255, 0.15);
-  color: var(--reader-accent);
-  font-weight: 600;
-}
-
-.toc-item-number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 24px;
-  height: 24px;
-  font-size: 0.75rem;
-  font-weight: 700;
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.1);
-  padding: 0 4px;
-}
-
-.toc-item-title {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* --- Settings Panel --- */
-.settings-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 12px 16px 32px;
-}
-
-.settings-section {
-  margin-bottom: 20px;
-}
-
-.settings-section-title {
-  font-size: 0.75rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: rgba(255, 255, 255, 0.5);
-  margin-bottom: 8px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-}
-
-/* Theme grid */
-.theme-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
-
-.theme-btn {
-  padding: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--reader-toolbar-text);
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: all 0.15s;
-  font-family: inherit;
-}
-
-.theme-btn:hover {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.theme-btn--active {
-  border-color: var(--reader-accent);
-  background: rgba(108, 140, 255, 0.15);
-  color: var(--reader-accent);
-  font-weight: 600;
-}
-
-/* Font grid */
-.font-grid,
-.orientation-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 8px;
-}
-
-.font-btn,
-.orientation-btn {
-  padding: 10px 8px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--reader-toolbar-text);
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: all 0.15s;
-  font-family: inherit;
-}
-
-.font-btn:hover,
-.orientation-btn:hover {
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.font-btn--active,
-.orientation-btn--active {
-  border-color: var(--reader-accent);
-  background: rgba(108, 140, 255, 0.15);
-  color: var(--reader-accent);
-  font-weight: 600;
-}
-
-/* Sliders */
-.settings-slider {
-  width: 100%;
-  height: 6px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
-  outline: none;
-  cursor: pointer;
-}
-
-.settings-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--reader-accent);
-  border: 2px solid white;
-  cursor: pointer;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-}
-
-.settings-slider::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--reader-accent);
-  border: 2px solid white;
-  cursor: pointer;
-}
-
-/* --- Start Reading Button (in book detail) --- */
-.start-reading-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  background: var(--reader-accent);
-  border: none;
-  border-radius: 8px;
-  color: white;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  margin-top: 16px;
-  margin-bottom: 16px;
-  font-family: inherit;
-}
-
-.start-reading-btn:hover {
-  background: #5a7ae8;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(108, 140, 255, 0.3);
-}
-
-/* --- Loading State --- */
-.reader-loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 48px;
-  color: var(--reader-text);
-}
-
-.reader-error {
-  color: #ef4444;
-  text-align: center;
-}
-
-/* --- Responsive --- */
-@media (max-width: 480px) {
-  .reader-chapter {
-    max-width: 100%;
-  }
-
-  .reader-nav-btn {
-    padding: 8px 10px;
-    font-size: 0.8rem;
-  }
-
-  .reader-nav-btn span {
-    display: none;
-  }
-
-  .toc-drawer,
-  .settings-drawer {
-    max-width: 100vw;
-  }
-
-  .reader-chapter-title {
-    font-size: 1.3em;
-  }
-}
-
-@media (min-width: 768px) {
-  .reader-chapter {
-    max-width: 720px;
-  }
-
-  .reader-chapter-body {
-    font-size: 1.05em;
-  }
-}
-
-/* --- Landscape on Mobile --- */
-@media (orientation: landscape) and (max-height: 500px) {
-  .reader-top-bar {
-    height: 44px;
-  }
-
-  .reader-content {
-    padding-top: 60px;
-    padding-bottom: 60px;
-  }
-
-  .reader-chapter-title {
-    font-size: 1.2em;
-  }
-}
-
-/* --- Dark mode theme override when reader uses light theme but system is dark --- */
-@media (prefers-color-scheme: dark) {
-  .reader-container[data-theme="light"] {
-    --reader-toolbar-bg: rgba(255, 255, 255, 0.95);
-    --reader-toolbar-text: #1a1a1a;
-  }
-}

web/src/types/reader.ts

@@ -1,44 +0,0 @@
-/**
- * TypeScript interfaces for the Cloud Reader reader module.
- * Reading view, settings, chapters, and progress types.
- */
-
-export interface ChapterSummary {
-  id: number;
-  book: number;
-  title: string;
-  number: number;
-}
-
-export interface ChapterDetail extends ChapterSummary {
-  content: string;
-  created_at: string;
-  updated_at: string;
-}
-
-export interface ReadingSettings {
-  font_family: "sans-serif" | "serif" | "monospace";
-  font_size: number;
-  line_height: number;
-  margin_width: number;
-  background_color: string;
-  text_color: string;
-  brightness: number;
-  orientation_lock: "auto" | "portrait" | "landscape";
-  theme: "sepia" | "dark" | "light" | "paper";
-  created_at: string;
-  updated_at: string;
-}
-
-export type ThemePreset = ReadingSettings["theme"];
-export type FontFamily = ReadingSettings["font_family"];
-export type OrientationLock = ReadingSettings["orientation_lock"];
-
-export interface ReadingProgress {
-  id: number;
-  book: number;
-  current_chapter: number;
-  current_position: number;
-  percentage: number;
-  updated_at: string;
-}