feat: implement group creation and management (US #28)

Backend:
- Add groups Django app with models: Group, GroupMember, GroupInvite, JoinRequest
- Create serializers with business rule validation
- Implement GroupViewSet with full CRUD + custom actions (members, invites, roles, leave, join requests)
- Add JoinGroupViewSet for invite-based joining flow
- Register app in Django config and URL routing

Frontend:
- Add shared types for groups to @cloud-reader/shared
- Create groups API client (groupsApi)
- Build GroupsListPage, GroupDetailPage (member mgmt, invites, role transfer)
- Build CreateGroupPage and JoinGroupPage
- Add lazy-loaded routes to App.tsx with ProtectedRoute
- Add navigation links to Library header

Ref: #28

backend/apps/groups/admin.py

@@ -0,0 +1,30 @@
+from django.contrib import admin
+
+from apps.groups.models import Group, GroupInvite, GroupMember, JoinRequest
+
+
+@admin.register(Group)
+class GroupAdmin(admin.ModelAdmin):
+    list_display = ["id", "name", "created_by", "created_at"]
+    search_fields = ["name", "created_by__email"]
+
+
+@admin.register(GroupMember)
+class GroupMemberAdmin(admin.ModelAdmin):
+    list_display = ["id", "group", "user", "role", "joined_at"]
+    list_filter = ["role"]
+    search_fields = ["group__name", "user__email"]
+
+
+@admin.register(GroupInvite)
+class GroupInviteAdmin(admin.ModelAdmin):
+    list_display = ["id", "group", "code", "created_by", "use_count", "is_active", "created_at"]
+    list_filter = ["is_active"]
+    search_fields = ["code", "group__name"]
+
+
+@admin.register(JoinRequest)
+class JoinRequestAdmin(admin.ModelAdmin):
+    list_display = ["id", "group", "user", "status", "created_at"]
+    list_filter = ["status"]
+    search_fields = ["group__name", "user__email"]

backend/apps/groups/apps.py

@@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+
+class GroupsConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "apps.groups"
+    verbose_name = "Groups"

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

@@ -0,0 +1,88 @@
+# Generated by Django 5.x for groups app
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="Group",
+            fields=[
+                ("id", models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name="ID")),
+                ("name", models.CharField(db_index=True, max_length=256)),
+                ("description", models.TextField(blank=True, default="")),
+                ("created_at", models.DateTimeField(auto_now_add=True)),
+                ("updated_at", models.DateTimeField(auto_now=True)),
+                ("created_by", models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name="created_groups", to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                "db_table": "groups_group",
+                "verbose_name": "Group",
+                "verbose_name_plural": "Groups",
+                "ordering": ["-created_at"],
+            },
+        ),
+        migrations.CreateModel(
+            name="GroupMember",
+            fields=[
+                ("id", models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name="ID")),
+                ("role", models.CharField(choices=[("admin", "Admin"), ("member", "Member")], default="member", max_length=16)),
+                ("joined_at", models.DateTimeField(auto_now_add=True)),
+                ("group", models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name="memberships", to="groups.group")),
+                ("user", models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name="group_memberships", to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                "db_table": "groups_member",
+                "verbose_name": "Group Member",
+                "verbose_name_plural": "Group Members",
+                "ordering": ["joined_at"],
+                "unique_together": {("group", "user")},
+            },
+        ),
+        migrations.CreateModel(
+            name="GroupInvite",
+            fields=[
+                ("id", models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name="ID")),
+                ("code", models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, unique=True)),
+                ("max_uses", models.PositiveIntegerField(default=0, help_text="0 = unlimited")),
+                ("use_count", models.PositiveIntegerField(default=0)),
+                ("is_active", models.BooleanField(db_index=True, default=True)),
+                ("created_at", models.DateTimeField(auto_now_add=True)),
+                ("created_by", models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name="created_invites", to=settings.AUTH_USER_MODEL)),
+                ("group", models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name="invites", to="groups.group")),
+            ],
+            options={
+                "db_table": "groups_invite",
+                "verbose_name": "Group Invite",
+                "verbose_name_plural": "Group Invites",
+                "ordering": ["-created_at"],
+            },
+        ),
+        migrations.CreateModel(
+            name="JoinRequest",
+            fields=[
+                ("id", models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name="ID")),
+                ("status", models.CharField(choices=[("pending", "Pending"), ("approved", "Approved"), ("rejected", "Rejected")], db_index=True, default="pending", max_length=16)),
+                ("created_at", models.DateTimeField(auto_now_add=True)),
+                ("group", models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name="join_requests", to="groups.group")),
+                ("invite", models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name="join_requests", to="groups.groupinvite")),
+                ("user", models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name="join_requests", to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                "db_table": "groups_join_request",
+                "verbose_name": "Join Request",
+                "verbose_name_plural": "Join Requests",
+                "ordering": ["-created_at"],
+                "unique_together": {("group", "user")},
+            },
+        ),
+    ]

backend/apps/groups/models.py

@@ -0,0 +1,129 @@
+import uuid
+
+from django.conf import settings
+from django.db import models
+
+
+class GroupRole(models.TextChoices):
+    ADMIN = "admin", "Admin"
+    MEMBER = "member", "Member"
+
+
+class JoinRequestStatus(models.TextChoices):
+    PENDING = "pending", "Pending"
+    APPROVED = "approved", "Approved"
+    REJECTED = "rejected", "Rejected"
+
+
+class Group(models.Model):
+    name = models.CharField(max_length=256, db_index=True)
+    description = models.TextField(blank=True, default="")
+    created_by = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="created_groups",
+    )
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        db_table = "groups_group"
+        verbose_name = "Group"
+        verbose_name_plural = "Groups"
+        ordering = ["-created_at"]
+
+    def __str__(self) -> str:
+        return self.name
+
+
+class GroupMember(models.Model):
+    group = models.ForeignKey(
+        Group,
+        on_delete=models.CASCADE,
+        related_name="memberships",
+    )
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="group_memberships",
+    )
+    role = models.CharField(
+        max_length=16,
+        choices=GroupRole.choices,
+        default=GroupRole.MEMBER,
+    )
+    joined_at = models.DateTimeField(auto_now_add=True)
+
+    class Meta:
+        db_table = "groups_member"
+        verbose_name = "Group Member"
+        verbose_name_plural = "Group Members"
+        ordering = ["joined_at"]
+        unique_together = [("group", "user")]
+
+    def __str__(self) -> str:
+        return f"{self.user} in {self.group} ({self.role})"
+
+
+class GroupInvite(models.Model):
+    group = models.ForeignKey(
+        Group,
+        on_delete=models.CASCADE,
+        related_name="invites",
+    )
+    created_by = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="created_invites",
+    )
+    code = models.UUIDField(default=uuid.uuid4, unique=True, editable=False, db_index=True)
+    max_uses = models.PositiveIntegerField(default=0, help_text="0 = unlimited")
+    use_count = models.PositiveIntegerField(default=0)
+    is_active = models.BooleanField(default=True, db_index=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    class Meta:
+        db_table = "groups_invite"
+        verbose_name = "Group Invite"
+        verbose_name_plural = "Group Invites"
+        ordering = ["-created_at"]
+
+    def __str__(self) -> str:
+        return f"Invite for {self.group.name} ({self.code})"
+
+
+class JoinRequest(models.Model):
+    group = models.ForeignKey(
+        Group,
+        on_delete=models.CASCADE,
+        related_name="join_requests",
+    )
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="join_requests",
+    )
+    invite = models.ForeignKey(
+        GroupInvite,
+        on_delete=models.SET_NULL,
+        null=True,
+        blank=True,
+        related_name="join_requests",
+    )
+    status = models.CharField(
+        max_length=16,
+        choices=JoinRequestStatus.choices,
+        default=JoinRequestStatus.PENDING,
+        db_index=True,
+    )
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    class Meta:
+        db_table = "groups_join_request"
+        verbose_name = "Join Request"
+        verbose_name_plural = "Join Requests"
+        ordering = ["-created_at"]
+        unique_together = [("group", "user")]
+
+    def __str__(self) -> str:
+        return f"{self.user} → {self.group.name} ({self.status})"

backend/apps/groups/permissions.py

@@ -0,0 +1,25 @@
+from rest_framework import permissions
+from rest_framework.request import Request
+
+from apps.groups.models import Group, GroupMember, GroupRole
+
+
+class IsGroupAdmin(permissions.BasePermission):
+    """Only group admins can perform the action."""
+
+    def has_object_permission(self, request: Request, view: object, obj: Group) -> bool:
+        return GroupMember.objects.filter(
+            group=obj,
+            user=request.user,
+            role=GroupRole.ADMIN,
+        ).exists()
+
+
+class IsGroupMember(permissions.BasePermission):
+    """Only group members (any role) can perform the action."""
+
+    def has_object_permission(self, request: Request, view: object, obj: Group) -> bool:
+        return GroupMember.objects.filter(
+            group=obj,
+            user=request.user,
+        ).exists()

backend/apps/groups/serializers.py

@@ -0,0 +1,198 @@
+from __future__ import annotations
+
+from rest_framework import serializers
+
+from apps.groups.models import Group, GroupInvite, GroupMember, GroupRole, JoinRequest, JoinRequestStatus
+
+
+class GroupMemberSerializer(serializers.ModelSerializer):
+    user_id = serializers.IntegerField(source="user.id", read_only=True)
+    user_email = serializers.CharField(source="user.email", read_only=True)
+    user_username = serializers.CharField(source="user.username", read_only=True)
+
+    class Meta:
+        model = GroupMember
+        fields = [
+            "id", "user_id", "user_email", "user_username",
+            "role", "joined_at",
+        ]
+
+
+class GroupListSerializer(serializers.ModelSerializer):
+    member_count = serializers.SerializerMethodField()
+    user_role = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Group
+        fields = [
+            "id", "name", "description", "created_by",
+            "member_count", "user_role", "created_at", "updated_at",
+        ]
+
+    def get_member_count(self, obj: Group) -> int:
+        return getattr(obj, "_member_count", obj.memberships.count())
+
+    def get_user_role(self, obj: Group) -> str | None:
+        request = self.context.get("request")
+        if not request or not request.user.is_authenticated:
+            return None
+        membership = getattr(obj, "_user_membership", None)
+        if membership is None:
+            try:
+                membership = obj.memberships.get(user=request.user)
+            except GroupMember.DoesNotExist:
+                return None
+        return membership.role
+
+
+class GroupDetailSerializer(serializers.ModelSerializer):
+    members = GroupMemberSerializer(source="memberships", many=True, read_only=True)
+    member_count = serializers.SerializerMethodField()
+    user_role = serializers.SerializerMethodField()
+    created_by_email = serializers.CharField(source="created_by.email", read_only=True)
+    created_by_username = serializers.CharField(source="created_by.username", read_only=True)
+
+    class Meta:
+        model = Group
+        fields = [
+            "id", "name", "description", "created_by", "created_by_email",
+            "created_by_username", "members", "member_count", "user_role",
+            "created_at", "updated_at",
+        ]
+
+    def get_member_count(self, obj: Group) -> int:
+        return getattr(obj, "_member_count", obj.memberships.count())
+
+    def get_user_role(self, obj: Group) -> str | None:
+        request = self.context.get("request")
+        if not request or not request.user.is_authenticated:
+            return None
+        membership = getattr(obj, "_user_membership", None)
+        if membership is None:
+            try:
+                membership = obj.memberships.get(user=request.user)
+            except GroupMember.DoesNotExist:
+                return None
+        return membership.role
+
+
+class GroupCreateSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Group
+        fields = ["name", "description"]
+
+    def validate_name(self, value: str) -> str:
+        if not value.strip():
+            raise serializers.ValidationError("Group name cannot be empty.")
+        if len(value.strip()) < 2:
+            raise serializers.ValidationError("Group name must be at least 2 characters.")
+        return value.strip()
+
+    def create(self, validated_data: dict) -> Group:
+        user = self.context["request"].user
+        group = Group.objects.create(created_by=user, **validated_data)
+        GroupMember.objects.create(group=group, user=user, role=GroupRole.ADMIN)
+        return group
+
+
+class GroupUpdateSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Group
+        fields = ["name", "description"]
+
+    def validate_name(self, value: str) -> str:
+        if not value.strip():
+            raise serializers.ValidationError("Group name cannot be empty.")
+        if len(value.strip()) < 2:
+            raise serializers.ValidationError("Group name must be at least 2 characters.")
+        return value.strip()
+
+
+class GroupInviteSerializer(serializers.ModelSerializer):
+    created_by_email = serializers.CharField(source="created_by.email", read_only=True)
+    group_name = serializers.CharField(source="group.name", read_only=True)
+    join_url = serializers.SerializerMethodField()
+
+    class Meta:
+        model = GroupInvite
+        fields = [
+            "id", "group", "group_name", "code", "created_by", "created_by_email",
+            "max_uses", "use_count", "is_active", "join_url", "created_at",
+        ]
+        read_only_fields = ["id", "group", "code", "created_by", "use_count", "created_at"]
+
+    def get_join_url(self, obj: GroupInvite) -> str:
+        request = self.context.get("request")
+        if request:
+            return f"{request.build_absolute_uri('/')[:-1]}/groups/join/{obj.code}"
+        return f"/groups/join/{obj.code}"
+
+
+class GroupInviteCreateSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = GroupInvite
+        fields = ["max_uses"]
+
+    def validate_max_uses(self, value: int) -> int:
+        if value < 0:
+            raise serializers.ValidationError("Max uses cannot be negative.")
+        return value
+
+    def create(self, validated_data: dict) -> GroupInvite:
+        group = self.context["group"]
+        user = self.context["request"].user
+        return GroupInvite.objects.create(
+            group=group,
+            created_by=user,
+            **validated_data,
+        )
+
+
+class JoinRequestSerializer(serializers.ModelSerializer):
+    user_id = serializers.IntegerField(source="user.id", read_only=True)
+    user_email = serializers.CharField(source="user.email", read_only=True)
+    user_username = serializers.CharField(source="user.username", read_only=True)
+    group_name = serializers.CharField(source="group.name", read_only=True)
+    invite_code = serializers.UUIDField(source="invite.code", read_only=True, default=None)
+
+    class Meta:
+        model = JoinRequest
+        fields = [
+            "id", "group", "group_name", "user", "user_id", "user_email",
+            "user_username", "invite", "invite_code", "status", "created_at",
+        ]
+        read_only_fields = ["id", "group", "user", "invite", "created_at"]
+
+
+class JoinViaInviteSerializer(serializers.Serializer):
+    """Validates and processes joining a group via an invite code."""
+
+    code = serializers.UUIDField()
+
+    def validate_code(self, value: str) -> str:
+        try:
+            invite = GroupInvite.objects.select_related("group").get(code=value)
+        except GroupInvite.DoesNotExist:
+            raise serializers.ValidationError("Invalid invite code.")
+
+        if not invite.is_active:
+            raise serializers.ValidationError("This invite is no longer active.")
+
+        if invite.max_uses > 0 and invite.use_count >= invite.max_uses:
+            raise serializers.ValidationError("This invite has reached its maximum uses.")
+
+        return value
+
+
+class RoleUpdateSerializer(serializers.Serializer):
+    role = serializers.ChoiceField(choices=GroupRole.choices)
+
+    def validate_role(self, value: str) -> str:
+        if value == GroupRole.MEMBER:
+            group = self.context["group"]
+            admin_count = group.memberships.filter(role=GroupRole.ADMIN).count()
+            if admin_count <= 1:
+                raise serializers.ValidationError(
+                    "Cannot remove the last admin. Transfer admin role first or dissolve the group."
+                )
+        return value

backend/apps/groups/urls.py

@@ -0,0 +1,12 @@
+from django.urls import include, path
+from rest_framework.routers import DefaultRouter
+
+from apps.groups.views import GroupViewSet, JoinGroupViewSet
+
+router = DefaultRouter()
+router.register(r"groups", GroupViewSet, basename="group")
+router.register(r"join", JoinGroupViewSet, basename="join-group")
+
+urlpatterns = [
+    path("", include(router.urls)),
+]

backend/apps/groups/views.py

@@ -0,0 +1,331 @@
+from __future__ import annotations
+
+from django.db.models import Count, Prefetch, QuerySet
+from rest_framework import status, viewsets
+from rest_framework.decorators import action
+from rest_framework.permissions import IsAuthenticated
+from rest_framework.request import Request
+from rest_framework.response import Response
+
+from apps.groups.models import Group, GroupInvite, GroupMember, GroupRole, JoinRequest, JoinRequestStatus
+from apps.groups.permissions import IsGroupAdmin, IsGroupMember
+from apps.groups.serializers import (
+    GroupCreateSerializer,
+    GroupDetailSerializer,
+    GroupInviteCreateSerializer,
+    GroupInviteSerializer,
+    GroupListSerializer,
+    GroupMemberSerializer,
+    GroupUpdateSerializer,
+    JoinRequestSerializer,
+    JoinViaInviteSerializer,
+    RoleUpdateSerializer,
+)
+
+
+class GroupViewSet(viewsets.ModelViewSet):
+    permission_classes = [IsAuthenticated]
+
+    def get_serializer_class(self):
+        if self.action == "create":
+            return GroupCreateSerializer
+        if self.action in ("update", "partial_update"):
+            return GroupUpdateSerializer
+        if self.action == "retrieve":
+            return GroupDetailSerializer
+        return GroupListSerializer
+
+    def get_queryset(self) -> QuerySet[Group]:
+        user = self.request.user
+        qs = Group.objects.filter(memberships__user=user).distinct()
+        qs = qs.annotate(_member_count=Count("memberships"))
+        if self.action in ("list", "retrieve"):
+            qs = qs.prefetch_related(
+                Prefetch(
+                    "memberships",
+                    queryset=GroupMember.objects.select_related("user").order_by("joined_at"),
+                )
+            )
+        return qs
+
+    def get_object(self) -> Group:
+        obj = super().get_object()
+        # Cache the requesting user's membership for serializers
+        try:
+            obj._user_membership = obj.memberships.get(user=self.request.user)
+        except GroupMember.DoesNotExist:
+            obj._user_membership = None
+        return obj
+
+    def perform_create(self, serializer: GroupCreateSerializer) -> Group:
+        return serializer.save()
+
+    def perform_destroy(self, instance: Group) -> None:
+        # Only admin can delete/dissolve the group
+        if not GroupMember.objects.filter(
+            group=instance, user=self.request.user, role=GroupRole.ADMIN
+        ).exists():
+            from rest_framework.exceptions import PermissionDenied
+
+            raise PermissionDenied("Only group admins can delete the group.")
+        instance.delete()
+
+    # ---- Members ----
+
+    @action(detail=True, methods=["get"], permission_classes=[IsAuthenticated, IsGroupMember])
+    def members(self, request: Request, pk: str | None = None) -> Response:
+        """List all members of the group."""
+        group = self.get_object()
+        memberships = group.memberships.select_related("user").order_by("joined_at")
+        serializer = GroupMemberSerializer(memberships, many=True)
+        return Response(serializer.data)
+
+    @action(
+        detail=True,
+        methods=["delete"],
+        url_path="members/(?P<user_id>[^/.]+)",
+        permission_classes=[IsAuthenticated, IsGroupAdmin],
+    )
+    def remove_member(self, request: Request, pk: str | None = None, user_id: str | None = None) -> Response:
+        """Admin removes a member from the group."""
+        group = self.get_object()
+        try:
+            membership = GroupMember.objects.get(group=group, user_id=user_id)
+        except GroupMember.DoesNotExist:
+            return Response({"error": "Member not found."}, status=status.HTTP_404_NOT_FOUND)
+
+        if membership.user == request.user:
+            return Response(
+                {"error": "Admins cannot remove themselves. Use leave instead, or transfer admin first."},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        membership.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    @action(
+        detail=True,
+        methods=["patch"],
+        url_path="members/(?P<user_id>[^/.]+)/role",
+        permission_classes=[IsAuthenticated, IsGroupAdmin],
+    )
+    def update_member_role(self, request: Request, pk: str | None = None, user_id: str | None = None) -> Response:
+        """Admin transfers admin role or changes member role."""
+        group = self.get_object()
+        serializer = RoleUpdateSerializer(data=request.data, context={"group": group})
+        serializer.is_valid(raise_exception=True)
+
+        try:
+            membership = GroupMember.objects.get(group=group, user_id=user_id)
+        except GroupMember.DoesNotExist:
+            return Response({"error": "Member not found."}, status=status.HTTP_404_NOT_FOUND)
+
+        membership.role = serializer.validated_data["role"]
+        membership.save(update_fields=["role"])
+
+        if serializer.validated_data["role"] == GroupRole.ADMIN and membership.user != request.user:
+            # Downgrade the current admin to member
+            GroupMember.objects.filter(group=group, user=request.user).update(role=GroupRole.MEMBER)
+
+        return Response(GroupMemberSerializer(membership).data)
+
+    @action(detail=True, methods=["post"], permission_classes=[IsAuthenticated, IsGroupMember])
+    def leave(self, request: Request, pk: str | None = None) -> Response:
+        """Member leaves the group. If admin is last admin, dissolve the group."""
+        group = self.get_object()
+        membership = GroupMember.objects.filter(group=group, user=request.user).first()
+
+        if not membership:
+            return Response({"error": "You are not a member of this group."}, status=status.HTTP_400_BAD_REQUEST)
+
+        if membership.role == GroupRole.ADMIN:
+            admin_count = GroupMember.objects.filter(group=group, role=GroupRole.ADMIN).count()
+            if admin_count <= 1:
+                # Last admin leaving — dissolve the group
+                group.delete()
+                return Response({"detail": "You were the last admin. The group has been dissolved."})
+
+        membership.delete()
+        return Response({"detail": "You have left the group."})
+
+    # ---- Invites ----
+
+    @action(detail=True, methods=["get", "post"], permission_classes=[IsAuthenticated, IsGroupAdmin])
+    def invites(self, request: Request, pk: str | None = None) -> Response:
+        """List or create invites for the group."""
+        group = self.get_object()
+
+        if request.method == "GET":
+            invites_qs = group.invites.select_related("created_by").order_by("-created_at")
+            serializer = GroupInviteSerializer(invites_qs, many=True, context={"request": request})
+            return Response(serializer.data)
+
+        serializer = GroupInviteCreateSerializer(
+            data=request.data,
+            context={"group": group, "request": request},
+        )
+        serializer.is_valid(raise_exception=True)
+        invite = serializer.save()
+        return Response(
+            GroupInviteSerializer(invite, context={"request": request}).data,
+            status=status.HTTP_201_CREATED,
+        )
+
+    @action(
+        detail=True,
+        methods=["delete"],
+        url_path="invites/(?P<invite_id>[^/.]+)",
+        permission_classes=[IsAuthenticated, IsGroupAdmin],
+    )
+    def revoke_invite(self, request: Request, pk: str | None = None, invite_id: str | None = None) -> Response:
+        """Revoke an invite by deactivating it."""
+        group = self.get_object()
+        try:
+            invite = GroupInvite.objects.get(id=invite_id, group=group)
+        except GroupInvite.DoesNotExist:
+            return Response({"error": "Invite not found."}, status=status.HTTP_404_NOT_FOUND)
+
+        invite.is_active = False
+        invite.save(update_fields=["is_active"])
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    # ---- Join Requests ----
+
+    @action(detail=True, methods=["get"], permission_classes=[IsAuthenticated, IsGroupAdmin])
+    def requests(self, request: Request, pk: str | None = None) -> Response:
+        """List pending join requests for the group (admin only)."""
+        group = self.get_object()
+        join_requests = group.join_requests.select_related("user", "invite").order_by("-created_at")
+        serializer = JoinRequestSerializer(join_requests, many=True)
+        return Response(serializer.data)
+
+    @action(
+        detail=True,
+        methods=["post"],
+        url_path="requests/(?P<request_id>[^/.]+)/approve",
+        permission_classes=[IsAuthenticated, IsGroupAdmin],
+    )
+    def approve_request(self, request: Request, pk: str | None = None, request_id: str | None = None) -> Response:
+        """Approve a pending join request."""
+        group = self.get_object()
+        try:
+            join_request = JoinRequest.objects.get(id=request_id, group=group, status=JoinRequestStatus.PENDING)
+        except JoinRequest.DoesNotExist:
+            return Response({"error": "Pending join request not found."}, status=status.HTTP_404_NOT_FOUND)
+
+        join_request.status = JoinRequestStatus.APPROVED
+        join_request.save(update_fields=["status"])
+
+        GroupMember.objects.get_or_create(
+            group=group,
+            user=join_request.user,
+            defaults={"role": GroupRole.MEMBER},
+        )
+
+        # Increment invite use count
+        if join_request.invite:
+            join_request.invite.use_count += 1
+            join_request.invite.save(update_fields=["use_count"])
+
+        return Response(JoinRequestSerializer(join_request).data)
+
+    @action(
+        detail=True,
+        methods=["post"],
+        url_path="requests/(?P<request_id>[^/.]+)/reject",
+        permission_classes=[IsAuthenticated, IsGroupAdmin],
+    )
+    def reject_request(self, request: Request, pk: str | None = None, request_id: str | None = None) -> Response:
+        """Reject a pending join request."""
+        group = self.get_object()
+        try:
+            join_request = JoinRequest.objects.get(id=request_id, group=group, status=JoinRequestStatus.PENDING)
+        except JoinRequest.DoesNotExist:
+            return Response({"error": "Pending join request not found."}, status=status.HTTP_404_NOT_FOUND)
+
+        join_request.status = JoinRequestStatus.REJECTED
+        join_request.save(update_fields=["status"])
+        return Response(JoinRequestSerializer(join_request).data)
+
+
+class JoinGroupViewSet(viewsets.GenericViewSet):
+    """Public(ish) endpoint for joining a group via an invite code."""
+
+    permission_classes = [IsAuthenticated]
+
+    @action(detail=False, methods=["get"], url_path="(?P<code>[^/.]+)")
+    def validate_invite(self, request: Request, code: str | None = None) -> Response:
+        """Check if an invite code is valid and show group info."""
+        try:
+            invite = GroupInvite.objects.select_related("group", "group__created_by").get(code=code)
+        except GroupInvite.DoesNotExist:
+            return Response({"error": "Invalid invite code."}, status=status.HTTP_404_NOT_FOUND)
+
+        if not invite.is_active:
+            return Response({"error": "This invite is no longer active."}, status=status.HTTP_410_GONE)
+
+        if invite.max_uses > 0 and invite.use_count >= invite.max_uses:
+            return Response({"error": "This invite has reached its maximum uses."}, status=status.HTTP_410_GONE)
+
+        return Response({
+            "group": {
+                "id": invite.group.id,
+                "name": invite.group.name,
+                "description": invite.group.description,
+                "created_by_email": invite.group.created_by.email,
+                "member_count": invite.group.memberships.count(),
+            },
+            "invite": {
+                "code": str(invite.code),
+                "created_by_email": invite.created_by.email,
+            },
+        })
+
+    @action(detail=False, methods=["post"], url_path="(?P<code>[^/.]+)")
+    def join(self, request: Request, code: str | None = None) -> Response:
+        """Join a group via invite code."""
+        try:
+            invite = GroupInvite.objects.select_related("group").get(code=code)
+        except GroupInvite.DoesNotExist:
+            return Response({"error": "Invalid invite code."}, status=status.HTTP_404_NOT_FOUND)
+
+        if not invite.is_active:
+            return Response({"error": "This invite is no longer active."}, status=status.HTTP_410_GONE)
+
+        if invite.max_uses > 0 and invite.use_count >= invite.max_uses:
+            return Response({"error": "This invite has reached its maximum uses."}, status=status.HTTP_410_GONE)
+
+        group = invite.group
+
+        # Check if already a member
+        if GroupMember.objects.filter(group=group, user=request.user).exists():
+            return Response(
+                {"detail": "You are already a member of this group.", "group_id": group.id},
+                status=status.HTTP_200_OK,
+            )
+
+        # Check for existing pending request
+        existing_request = JoinRequest.objects.filter(
+            group=group, user=request.user, status=JoinRequestStatus.PENDING
+        ).first()
+        if existing_request:
+            return Response(
+                JoinRequestSerializer(existing_request).data,
+                status=status.HTTP_200_OK,
+            )
+
+        # Create join request or add directly (direct join for now — simple invite flow)
+        member = GroupMember.objects.create(group=group, user=request.user, role=GroupRole.MEMBER)
+        invite.use_count += 1
+        invite.save(update_fields=["use_count"])
+
+        # Also create a join request record for tracking
+        JoinRequest.objects.create(
+            group=group,
+            user=request.user,
+            invite=invite,
+            status=JoinRequestStatus.APPROVED,
+        )
+
+        serializer = GroupDetailSerializer(group, context={"request": request})
+        return Response(serializer.data, status=status.HTTP_201_CREATED)

backend/config/django.py

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

backend/config/urls.py

@@ -8,6 +8,7 @@ urlpatterns = [
     path("api/books/", include("apps.books.urls")),
     path("api/annotations/", include("apps.annotations.urls")),
     path("api/reader/", include("apps.reader.urls")),
+    path("api/", include("apps.groups.urls")),
 ]
 
 if settings.DEBUG:

docs/mobile/010-mobile-reader.md

@@ -0,0 +1,150 @@
+# 010 — Mobile EPUB Reader
+
+**Status:** Implemented
+**Created:** 2026-06-04
+
+## Objective
+
+Mirror the web reading experience (`frontend/src/pages/ReadingPage.tsx` and
+`frontend/src/components/reader/*`) inside the Expo app so users can open their
+uploaded library, read EPUBs with persisted progress and typography settings,
+and manage bookmarks/highlights — reusing the same Django REST API as the web
+client.
+
+The web EPUB renderer (`react-reader` / epub.js) is DOM-only, so mobile renders
+EPUBs with `@epubjs-react-native/core`, which runs epub.js inside a
+`react-native-webview`. This keeps behavior (CFI locations, themes, font
+controls, TOC, annotations) close to web while staying inside the managed Expo
+workflow.
+
+## Scope
+
+### Mirrored from web
+
+- EPUB rendering with swipe pagination (`flow: "paginated"`).
+- Resume position and debounced progress save (CFI + percentage).
+- Table of contents drawer with jump-to-chapter.
+- Reading settings: theme presets (light/sepia/paper/dark), font family, font
+  size, line spacing — persisted to `/api/reader/settings/`.
+- Bookmarks: bookmark the current page, list/jump/delete, and create highlights
+  from a text selection. Highlights are re-applied on open (best-effort).
+
+### Deferred (not in this pass)
+
+- PDF reading. PDF books show a placeholder pointing to the web reader.
+- Brightness and orientation-lock controls.
+- Per-highlight color picker (highlights use a single default color).
+- App-wide internationalization (web uses `react-i18n-lite`).
+
+## Architecture
+
+```
+LibraryScreen (EBook list)
+        |  navigate("BookDetail", { ebookId })
+        v
+BookDetailScreen ----------------> ReaderScreen ({ ebookId })
+                                        |
+                       GET /api/books/ebooks/:id/  (format guard)
+                                        |
+                       epub? --------------------- pdf? -> placeholder
+                          |
+                EpubReaderView (ReaderProvider)
+                          |
+   expo-file-system downloadAsync(file/, Bearer token) -> file:// uri
+                          |
+   <Reader src=file:// fileSystem=useFileSystem flow="paginated" />
+                          |
+   onLocationChange -> debounce 800ms -> PATCH progress/
+   onSelected       -> POST bookmarks/ (+ highlight annotation)
+   useReader().toc  -> goToLocation(href)
+   settings change  -> changeTheme / changeFontSize / changeFontFamily
+                       + PATCH /api/reader/settings/ (debounced)
+```
+
+The ebook file is downloaded to the app cache with an `Authorization` header
+(the `/file/` endpoint is JWT-protected) and the local `file://` URI is handed
+to the renderer — mirroring how the web client downloads a blob rather than
+using a public/signed URL.
+
+## Mobile changes
+
+| File | Role |
+|------|------|
+| `mobile/src/api/client.ts` | Adds `apiClient`, `saveTokens`, `loadTokens`, `getApiBaseUrl` |
+| `mobile/src/api/ebooks.ts` | `/api/books/ebooks/` list/detail/toc + `getFileUrl(id)` |
+| `mobile/src/api/reader.ts` | Reader settings + per-book progress (mirrors web `api/reader.ts`) |
+| `mobile/src/api/annotations.ts` | Bookmarks CRUD against `/api/annotations/bookmarks/` |
+| `mobile/src/types/reader.ts` | `ReadingSettings`, `ReadingProgress` (full reader shapes) |
+| `mobile/src/types/index.ts` | `AppStackParamList`, `Bookmark`, `CreateMarkerPayload` |
+| `mobile/src/hooks/useReadingSettings.ts` | Loads + debounced-saves reader settings |
+| `mobile/src/utils/epubTheme.ts` | Font stacks, theme palettes, `buildEpubTheme()` |
+| `mobile/src/navigation/AppStack.tsx` | Native stack: Tabs / BookDetail / Reader |
+| `mobile/src/screens/LibraryScreen.tsx` | Lists user EBooks (`ebooksApi.list`) |
+| `mobile/src/screens/BookDetailScreen.tsx` | Metadata + start/resume button |
+| `mobile/src/screens/ReaderScreen.tsx` | Format guard: EPUB view vs PDF placeholder |
+| `mobile/src/components/reader/EpubReaderView.tsx` | Reader, progress, bookmarks, settings wiring |
+| `mobile/src/components/reader/ReaderToolbar.tsx` | Title, chapter, progress bar, action buttons |
+| `mobile/src/components/reader/TocModal.tsx` | Table of contents sheet |
+| `mobile/src/components/reader/ReadingSettingsModal.tsx` | Theme/font/size/spacing controls |
+| `mobile/src/components/reader/BookmarksModal.tsx` | Bookmarks & highlights list |
+| `mobile/App.tsx` | Wraps the tree in `GestureHandlerRootView` |
+
+Removed unused scaffolding: `mobile/src/navigation/AppNavigator.tsx`,
+`mobile/src/navigation/MainTabs.tsx`.
+
+## API contracts (consumed)
+
+| Method | Path | Purpose |
+|--------|------|---------|
+| GET | `/api/books/ebooks/` | User library list |
+| GET | `/api/books/ebooks/:id/` | EBook detail (format, progress, cover) |
+| GET | `/api/books/ebooks/:id/file/` | Stream EPUB bytes (JWT, owner) |
+| GET/PATCH | `/api/books/ebooks/:id/progress/` | Reading progress (`current_position`, `last_page`, `epub_location`) |
+| GET/PATCH | `/api/reader/settings/` | Reader typography/theme settings |
+| GET/POST/DELETE | `/api/annotations/bookmarks/` | Bookmarks & highlights (`ebook`, `epub_cfi`, `chapter_index`, ...) |
+
+## Settings mapping (web -> mobile)
+
+| Reader setting | Web (epub.js) | Mobile (`@epubjs-react-native/core`) |
+|----------------|---------------|--------------------------------------|
+| `theme` / colors | `themes.register/select` | `changeTheme(buildEpubTheme())` + `defaultTheme` |
+| `font_size` | `themes.fontSize` | `changeFontSize("Npx")` |
+| `font_family` | body font-family | `changeFontFamily(stack)` |
+| `line_height` | body line-height | `buildEpubTheme()` CSS rule |
+| `margin_width` | gap-based padding | not applied (deferred) |
+| `brightness` / `orientation_lock` | applied on web | deferred |
+
+## Dependencies added
+
+- `@epubjs-react-native/core@1.4.7`
+- `@epubjs-react-native/expo-file-system@1.1.4`
+- `react-native-webview@13.12.5`
+
+(`react-native-gesture-handler`, `react-native-reanimated`, and
+`expo-file-system` were already present.)
+
+## Configuration
+
+| Env var | Purpose |
+|---------|---------|
+| `EXPO_PUBLIC_API_URL` | Backend base URL (e.g. `http://10.0.2.2:8000` on Android emulator, LAN IP on a device) |
+
+## Compatibility notes
+
+- The Expo file-system adapter (`@epubjs-react-native/expo-file-system`) depends
+  only on `expo-file-system`, so the reader runs in Expo Go. (The library's
+  bare adapter pulls native `@dr.pogodin/react-native-fs`; that path is not
+  used here.)
+- React 19 / Expo SDK 52 may surface peer-dependency warnings for the
+  `@epubjs-react-native/*` packages.
+
+## Verification
+
+- [ ] Log in; Library lists the user's uploaded EBooks with covers/progress.
+- [ ] Open an EPUB; it renders and paginates by swipe.
+- [ ] Reopen a book; it resumes at the last position.
+- [ ] Change theme/font/size/spacing; the page updates and persists across reopen.
+- [ ] Open the TOC and jump to a chapter.
+- [ ] Bookmark the current page; it appears in the bookmarks list and can be re-opened/deleted.
+- [ ] Select text to create a highlight; it persists and re-renders on reopen.
+- [ ] Open a PDF book; the placeholder is shown instead of a crash.

frontend/src/App.tsx

@@ -12,6 +12,10 @@ const AddBookPage = lazy(() => import("./pages/AddBook").then((m) => ({ default:
 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 GroupsListPage = lazy(() => import("./pages/GroupsListPage").then((m) => ({ default: m.GroupsListPage })));
+const GroupDetailPage = lazy(() => import("./pages/GroupDetailPage").then((m) => ({ default: m.GroupDetailPage })));
+const CreateGroupPage = lazy(() => import("./pages/CreateGroupPage").then((m) => ({ default: m.CreateGroupPage })));
+const JoinGroupPage = lazy(() => import("./pages/JoinGroupPage").then((m) => ({ default: m.JoinGroupPage })));
 
 const AuthPage = lazy(() => import("./pages/AuthPage"));
 
@@ -45,6 +49,10 @@ function AppRoutes() {
         <Route path="/add" element={<ProtectedRoute><AddBookPage /></ProtectedRoute>} />
         <Route path="/settings" element={<ProtectedRoute><SettingsPage /></ProtectedRoute>} />
         <Route path="/bookmarks-notes/:bookId?" element={<ProtectedRoute><BookmarksNotesPage /></ProtectedRoute>} />
+        <Route path="/groups" element={<ProtectedRoute><GroupsListPage /></ProtectedRoute>} />
+        <Route path="/groups/create" element={<ProtectedRoute><CreateGroupPage /></ProtectedRoute>} />
+        <Route path="/groups/join/:code" element={<ProtectedRoute><JoinGroupPage /></ProtectedRoute>} />
+        <Route path="/groups/:id" element={<ProtectedRoute><GroupDetailPage /></ProtectedRoute>} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </Suspense>

frontend/src/api/groups.ts

@@ -0,0 +1,100 @@
+import api from "./client";
+import type {
+  CreateGroupPayload,
+  CreateInvitePayload,
+  GroupDetail,
+  GroupInvite,
+  GroupListItem,
+  InviteValidation,
+  JoinRequest,
+  UpdateGroupPayload,
+} from "../../packages/shared/src/types";
+
+export const groupsApi = {
+  // ---- Group CRUD ----
+
+  async listGroups(): Promise<GroupListItem[]> {
+    const { data } = await api.get<{ count: number; results: GroupListItem[] } | GroupListItem[]>("/groups/");
+    if (Array.isArray(data)) return data;
+    return data.results ?? [];
+  },
+
+  async getGroup(id: number): Promise<GroupDetail> {
+    const { data } = await api.get<GroupDetail>(`/groups/${id}/`);
+    return data;
+  },
+
+  async createGroup(payload: CreateGroupPayload): Promise<GroupDetail> {
+    const { data } = await api.post<GroupDetail>("/groups/", payload);
+    return data;
+  },
+
+  async updateGroup(id: number, payload: UpdateGroupPayload): Promise<GroupDetail> {
+    const { data } = await api.patch<GroupDetail>(`/groups/${id}/`, payload);
+    return data;
+  },
+
+  async deleteGroup(id: number): Promise<void> {
+    await api.delete(`/groups/${id}/`);
+  },
+
+  // ---- Members ----
+
+  async removeMember(groupId: number, userId: number): Promise<void> {
+    await api.delete(`/groups/${groupId}/members/${userId}/`);
+  },
+
+  async updateMemberRole(groupId: number, userId: number, role: "admin" | "member"): Promise<void> {
+    await api.patch(`/groups/${groupId}/members/${userId}/role/`, { role });
+  },
+
+  async leaveGroup(groupId: number): Promise<{ detail: string }> {
+    const { data } = await api.post<{ detail: string }>(`/groups/${groupId}/leave/`);
+    return data;
+  },
+
+  // ---- Invites ----
+
+  async listInvites(groupId: number): Promise<GroupInvite[]> {
+    const { data } = await api.get<GroupInvite[]>(`/groups/${groupId}/invites/`);
+    return data;
+  },
+
+  async createInvite(groupId: number, payload: CreateInvitePayload = {}): Promise<GroupInvite> {
+    const { data } = await api.post<GroupInvite>(`/groups/${groupId}/invites/`, payload);
+    return data;
+  },
+
+  async revokeInvite(groupId: number, inviteId: number): Promise<void> {
+    await api.delete(`/groups/${groupId}/invites/${inviteId}/`);
+  },
+
+  // ---- Join Requests ----
+
+  async listJoinRequests(groupId: number): Promise<JoinRequest[]> {
+    const { data } = await api.get<JoinRequest[]>(`/groups/${groupId}/requests/`);
+    return data;
+  },
+
+  async approveRequest(groupId: number, requestId: number): Promise<JoinRequest> {
+    const { data } = await api.post<JoinRequest>(`/groups/${groupId}/requests/${requestId}/approve/`);
+    return data;
+  },
+
+  async rejectRequest(groupId: number, requestId: number): Promise<JoinRequest> {
+    const { data } = await api.post<JoinRequest>(`/groups/${groupId}/requests/${requestId}/reject/`);
+    return data;
+  },
+
+  // ---- Join via Invite ----
+
+  async validateInvite(code: string): Promise<InviteValidation> {
+    const { data } = await api.get<InviteValidation>(`/join/${code}/`);
+    return data;
+  },
+
+  async joinViaInvite(code: string): Promise<GroupDetail> {
+    const { data } = await api.post<GroupDetail>(`/join/${code}/`);
+    return data;
+  },
+};

frontend/src/pages/CreateGroupPage.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { groupsApi } from "../api/groups";
+import { useToast } from "../hooks/useToast";
+
+const S = {
+  container: { maxWidth: 500, margin: "0 auto", padding: "24px 16px" } satisfies React.CSSProperties,
+  backBtn: {
+    background: "none", border: "none", color: "#3b82f6", fontSize: 14, cursor: "pointer",
+    padding: 0, marginBottom: 16, minHeight: 44, minWidth: 44,
+  } satisfies React.CSSProperties,
+  title: { fontSize: 24, fontWeight: 700, marginBottom: 24 } satisfies React.CSSProperties,
+  label: { display: "block", fontSize: 14, fontWeight: 500, marginBottom: 6 } satisfies React.CSSProperties,
+  input: {
+    width: "100%", padding: "10px 12px", border: "1px solid #d1d5db", borderRadius: 8,
+    fontSize: 14, marginBottom: 16, boxSizing: "border-box" as const,
+  } satisfies React.CSSProperties,
+  textarea: {
+    width: "100%", padding: "10px 12px", border: "1px solid #d1d5db", borderRadius: 8,
+    fontSize: 14, marginBottom: 16, minHeight: 80, resize: "vertical" as const,
+    boxSizing: "border-box" as const, fontFamily: "inherit",
+  } satisfies React.CSSProperties,
+  submitBtn: (disabled: boolean): React.CSSProperties => ({
+    width: "100%", padding: "12px", backgroundColor: disabled ? "#93c5fd" : "#3b82f6",
+    color: "#fff", border: "none", borderRadius: 8, fontSize: 15, fontWeight: 600,
+    cursor: disabled ? "not-allowed" : "pointer", minHeight: 44,
+  }),
+  errorText: { color: "#ef4444", fontSize: 13, marginBottom: 12 },
+};
+
+export function CreateGroupPage() {
+  const navigate = useNavigate();
+  const { showToast } = useToast();
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Group name is required.");
+      return;
+    }
+    if (name.trim().length < 2) {
+      setError("Group name must be at least 2 characters.");
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const group = await groupsApi.createGroup({
+        name: name.trim(),
+        description: description.trim() || undefined,
+      });
+      showToast({ message: "Group created!", variant: "success" });
+      navigate(`/groups/${group.id}`);
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "Failed to create group";
+      setError(msg);
+      showToast({ message: msg, variant: "error" });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div style={S.container}>
+      <button style={S.backBtn} onClick={() => navigate("/groups")}>
+        ← Back to Groups
+      </button>
+      <h1 style={S.title}>Create a Group</h1>
+
+      <form onSubmit={handleSubmit}>
+        {error && <div style={S.errorText}>{error}</div>}
+
+        <label style={S.label} htmlFor="group-name">Group Name *</label>
+        <input
+          id="group-name"
+          style={S.input}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="e.g., Sci-Fi Book Club"
+          maxLength={256}
+          autoFocus
+        />
+
+        <label style={S.label} htmlFor="group-desc">Description</label>
+        <textarea
+          id="group-desc"
+          style={S.textarea}
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="What's this group about? (optional)"
+        />
+
+        <button type="submit" style={S.submitBtn(submitting || !name.trim())} disabled={submitting || !name.trim()}>
+          {submitting ? "Creating..." : "Create Group"}
+        </button>
+      </form>
+    </div>
+  );
+}

frontend/src/pages/GroupDetailPage.tsx

@@ -0,0 +1,334 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { groupsApi } from "../api/groups";
+import { useAuth } from "../context/AuthContext";
+import { useToast } from "../hooks/useToast";
+import type { GroupDetail, GroupInvite, GroupMember } from "../../packages/shared/src/types";
+
+const S = {
+  container: { maxWidth: 800, margin: "0 auto", padding: "24px 16px" } satisfies React.CSSProperties,
+  backBtn: {
+    background: "none", border: "none", color: "#3b82f6", fontSize: 14, cursor: "pointer",
+    padding: 0, marginBottom: 16, minHeight: 44, minWidth: 44,
+  } satisfies React.CSSProperties,
+  title: { fontSize: 28, fontWeight: 700, margin: "0 0 4px 0" } satisfies React.CSSProperties,
+  desc: { fontSize: 14, color: "#6b7280", margin: "0 0 20px 0" } satisfies React.CSSProperties,
+  section: { marginTop: 28 } satisfies React.CSSProperties,
+  sectionTitle: { fontSize: 18, fontWeight: 600, marginBottom: 12 } satisfies React.CSSProperties,
+  memberItem: {
+    display: "flex", justifyContent: "space-between", alignItems: "center",
+    padding: "10px 0", borderBottom: "1px solid #f3f4f6",
+  } satisfies React.CSSProperties,
+  memberInfo: { display: "flex", flexDirection: "column" as const },
+  memberName: { fontSize: 14, fontWeight: 500 } satisfies React.CSSProperties,
+  memberEmail: { fontSize: 12, color: "#9ca3af" } satisfies React.CSSProperties,
+  badge: (role: string): React.CSSProperties => ({
+    display: "inline-block", padding: "2px 8px", borderRadius: 6, fontSize: 11, fontWeight: 600,
+    backgroundColor: role === "admin" ? "#dbeafe" : "#f3f4f6",
+    color: role === "admin" ? "#1d4ed8" : "#6b7280",
+  }),
+  removeBtn: {
+    padding: "4px 12px", fontSize: 12, color: "#ef4444", background: "#fef2f2",
+    border: "1px solid #fecaca", borderRadius: 6, cursor: "pointer", minHeight: 32,
+  } satisfies React.CSSProperties,
+  transferBtn: {
+    padding: "4px 12px", fontSize: 12, color: "#3b82f6", background: "#eff6ff",
+    border: "1px solid #bfdbfe", borderRadius: 6, cursor: "pointer", minHeight: 32,
+    marginRight: 8,
+  } satisfies React.CSSProperties,
+  inviteCard: {
+    padding: "12px 16px", border: "1px solid #e5e7eb", borderRadius: 8, marginBottom: 8,
+  } satisfies React.CSSProperties,
+  inviteCode: { fontSize: 13, fontFamily: "monospace", marginBottom: 4 } satisfies React.CSSProperties,
+  inviteMeta: { fontSize: 12, color: "#9ca3af" } satisfies React.CSSProperties,
+  actionBtn: (color: string): React.CSSProperties => ({
+    padding: "8px 16px", backgroundColor: color, color: "#fff", border: "none",
+    borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer",
+    minHeight: 44, minWidth: 44,
+  }),
+  dangerBtn: {
+    padding: "8px 16px", backgroundColor: "#ef4444", color: "#fff", border: "none",
+    borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer",
+    minHeight: 44, minWidth: 44,
+  } satisfies React.CSSProperties,
+  leaveBtn: {
+    padding: "8px 16px", backgroundColor: "#fff", color: "#ef4444",
+    border: "1px solid #ef4444", borderRadius: 8, fontSize: 13, fontWeight: 600,
+    cursor: "pointer", minHeight: 44, minWidth: 44,
+  } satisfies React.CSSProperties,
+  inlineBtn: {
+    padding: "4px 10px", fontSize: 12, color: "#ef4444", background: "#fef2f2",
+    border: "1px solid #fecaca", borderRadius: 6, cursor: "pointer", minHeight: 28,
+  } satisfies React.CSSProperties,
+  copyRow: { display: "flex", gap: 8, alignItems: "center", marginBottom: 12 } satisfies React.CSSProperties,
+  input: {
+    flex: 1, padding: "10px 12px", border: "1px solid #d1d5db", borderRadius: 8, fontSize: 14,
+  } satisfies React.CSSProperties,
+  loading: { textAlign: "center" as const, padding: 60, color: "#9ca3af" },
+  error: { textAlign: "center" as const, padding: 40, color: "#ef4444" },
+};
+
+export function GroupDetailPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const { showToast } = useToast();
+
+  const [group, setGroup] = useState<GroupDetail | null>(null);
+  const [invites, setInvites] = useState<GroupInvite[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [editingName, setEditingName] = useState(false);
+  const [editName, setEditName] = useState("");
+  const [showInviteSection, setShowInviteSection] = useState(false);
+
+  const groupId = Number(id);
+  const isAdmin = group?.user_role === "admin";
+
+  const loadGroup = useCallback(async () => {
+    if (!groupId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await groupsApi.getGroup(groupId);
+      setGroup(data);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to load group");
+    } finally {
+      setLoading(false);
+    }
+  }, [groupId]);
+
+  const loadInvites = useCallback(async () => {
+    if (!groupId || !isAdmin) return;
+    try {
+      const data = await groupsApi.listInvites(groupId);
+      setInvites(data);
+    } catch {
+      // Silently fail — invites are supplementary
+    }
+  }, [groupId, isAdmin]);
+
+  useEffect(() => {
+    loadGroup();
+  }, [loadGroup]);
+
+  useEffect(() => {
+    if (group && isAdmin) loadInvites();
+  }, [group, isAdmin, loadInvites]);
+
+  const handleRemoveMember = async (userId: number, memberEmail: string) => {
+    if (!confirm(`Remove ${memberEmail} from the group?`)) return;
+    try {
+      await groupsApi.removeMember(groupId, userId);
+      showToast({ message: "Member removed", variant: "success" });
+      loadGroup();
+    } catch (err: unknown) {
+      showToast({ message: "Failed to remove member", variant: "error" });
+    }
+  };
+
+  const handleTransferAdmin = async (userId: number, memberEmail: string) => {
+    if (!confirm(`Transfer admin role to ${memberEmail}? You will become a regular member.`)) return;
+    try {
+      await groupsApi.updateMemberRole(groupId, userId, "admin");
+      showToast({ message: "Admin role transferred", variant: "success" });
+      loadGroup();
+    } catch (err: unknown) {
+      showToast({ message: "Failed to transfer admin", variant: "error" });
+    }
+  };
+
+  const handleLeave = async () => {
+    if (!confirm("Are you sure you want to leave this group?")) return;
+    try {
+      const result = await groupsApi.leaveGroup(groupId);
+      showToast({ message: result.detail || "Left group", variant: "success" });
+      navigate("/groups");
+    } catch (err: unknown) {
+      showToast({ message: "Failed to leave group", variant: "error" });
+    }
+  };
+
+  const handleCreateInvite = async () => {
+    try {
+      const invite = await groupsApi.createInvite(groupId);
+      setInvites((prev) => [invite, ...prev]);
+      showToast({ message: "Invite link created!", variant: "success" });
+    } catch (err: unknown) {
+      showToast({ message: "Failed to create invite", variant: "error" });
+    }
+  };
+
+  const handleRevokeInvite = async (inviteId: number) => {
+    try {
+      await groupsApi.revokeInvite(groupId, inviteId);
+      setInvites((prev) => prev.map((i) => (i.id === inviteId ? { ...i, is_active: false } : i)));
+      showToast({ message: "Invite revoked", variant: "success" });
+    } catch (err: unknown) {
+      showToast({ message: "Failed to revoke invite", variant: "error" });
+    }
+  };
+
+  const handleSaveName = async () => {
+    if (!editName.trim()) return;
+    try {
+      const updated = await groupsApi.updateGroup(groupId, { name: editName.trim() });
+      setGroup(updated);
+      setEditingName(false);
+      showToast({ message: "Group name updated", variant: "success" });
+    } catch (err: unknown) {
+      showToast({ message: "Failed to update group", variant: "error" });
+    }
+  };
+
+  const handleDeleteGroup = async () => {
+    if (!confirm("Delete this group? This cannot be undone.")) return;
+    try {
+      await groupsApi.deleteGroup(groupId);
+      showToast({ message: "Group deleted", variant: "success" });
+      navigate("/groups");
+    } catch (err: unknown) {
+      showToast({ message: "Failed to delete group", variant: "error" });
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text).then(
+      () => showToast({ message: "Link copied!" }),
+      () => showToast({ message: "Failed to copy", variant: "error" }),
+    );
+  };
+
+  if (loading) return <div style={S.loading}>Loading group...</div>;
+  if (error) return <div style={S.error}>{error} <br /><button onClick={loadGroup} style={{ marginTop: 12, padding: "8px 16px", cursor: "pointer", border: "1px solid #d1d5db", borderRadius: 6, background: "#fff" }}>Retry</button></div>;
+  if (!group) return <div style={S.error}>Group not found</div>;
+
+  return (
+    <div style={S.container}>
+      <button style={S.backBtn} onClick={() => navigate("/groups")}>
+        ← Back to Groups
+      </button>
+
+      {/* Group Header */}
+      {editingName ? (
+        <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
+          <input
+            style={S.input}
+            value={editName}
+            onChange={(e) => setEditName(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") handleSaveName(); if (e.key === "Escape") setEditingName(false); }}
+            autoFocus
+          />
+          <button style={S.actionBtn("#3b82f6")} onClick={handleSaveName}>Save</button>
+          <button style={{ ...S.actionBtn("#6b7280"), padding: "8px 16px" }} onClick={() => setEditingName(false)}>Cancel</button>
+        </div>
+      ) : (
+        <h1
+          style={S.title}
+          onClick={() => {
+            if (isAdmin) { setEditName(group.name); setEditingName(true); }
+          }}
+          title={isAdmin ? "Click to edit name" : undefined}
+        >
+          {group.name}
+        </h1>
+      )}
+      <p style={S.desc}>{group.description || "No description"}</p>
+      <p style={{ fontSize: 12, color: "#9ca3af", marginBottom: 20 }}>
+        Created by {group.created_by_email} · {group.member_count} member{group.member_count !== 1 ? "s" : ""}
+      </p>
+
+      {/* Admin Actions */}
+      {isAdmin && (
+        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 20 }}>
+          <button
+            style={S.actionBtn("#3b82f6")}
+            onClick={() => setShowInviteSection((v) => !v)}
+          >
+            {showInviteSection ? "Hide Invites" : "Manage Invites"}
+          </button>
+          <button style={S.dangerBtn} onClick={handleDeleteGroup}>
+            Delete Group
+          </button>
+        </div>
+      )}
+
+      {/* Invites Section */}
+      {isAdmin && showInviteSection && (
+        <div style={S.section}>
+          <h2 style={S.sectionTitle}>Invite Links</h2>
+          <button style={S.actionBtn("#22c55e")} onClick={handleCreateInvite}>
+            + Generate Invite Link
+          </button>
+          {invites.length === 0 ? (
+            <p style={{ color: "#9ca3af", fontSize: 14, marginTop: 12 }}>No invites yet.</p>
+          ) : (
+            invites.map((inv) => (
+              <div key={inv.id} style={S.inviteCard}>
+                <div style={S.inviteCode}>{inv.code}</div>
+                <div style={S.inviteMeta}>
+                  {inv.is_active ? "Active" : "Revoked"} ·{" "}
+                  {inv.max_uses > 0 ? `${inv.use_count}/${inv.max_uses} uses` : `${inv.use_count} uses (unlimited)`}
+                </div>
+                <div style={{ marginTop: 8, display: "flex", gap: 8 }}>
+                  <button style={S.actionBtn("#3b82f6")} onClick={() => copyToClipboard(inv.join_url)}>
+                    Copy Link
+                  </button>
+                  {inv.is_active && (
+                    <button style={S.inlineBtn} onClick={() => handleRevokeInvite(inv.id)}>
+                      Revoke
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+
+      {/* Members Section */}
+      <div style={S.section}>
+        <h2 style={S.sectionTitle}>Members ({group.member_count})</h2>
+        {group.members.map((member) => (
+          <div key={member.id} style={S.memberItem}>
+            <div style={S.memberInfo}>
+              <span style={S.memberName}>
+                {member.user_username || member.user_email}{" "}
+                <span style={S.badge(member.role)}>{member.role}</span>
+              </span>
+              <span style={S.memberEmail}>{member.user_email}</span>
+            </div>
+            {isAdmin && member.user_id !== Number(user?.email ? undefined : undefined) && (
+              <div style={{ display: "flex", gap: 8 }}>
+                {member.role === "member" && (
+                  <button
+                    style={S.transferBtn}
+                    onClick={() => handleTransferAdmin(member.user_id, member.user_email)}
+                  >
+                    Make Admin
+                  </button>
+                )}
+                <button
+                  style={S.removeBtn}
+                  onClick={() => handleRemoveMember(member.user_id, member.user_email)}
+                >
+                  Remove
+                </button>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Leave Group (non-admins only) */}
+      {!isAdmin && (
+        <div style={{ ...S.section, marginTop: 40 }}>
+          <button style={S.leaveBtn} onClick={handleLeave}>
+            Leave Group
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/GroupsListPage.tsx

@@ -0,0 +1,195 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { groupsApi } from "../api/groups";
+import type { GroupListItem } from "../../packages/shared/src/types";
+import { useAuth } from "../context/AuthContext";
+
+const styles = {
+  container: {
+    maxWidth: 800,
+    margin: "0 auto",
+    padding: "24px 16px",
+  } satisfies React.CSSProperties,
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 24,
+  } satisfies React.CSSProperties,
+  title: {
+    fontSize: 28,
+    fontWeight: 700,
+    margin: 0,
+  } satisfies React.CSSProperties,
+  createBtn: {
+    padding: "10px 20px",
+    backgroundColor: "#3b82f6",
+    color: "#fff",
+    border: "none",
+    borderRadius: 8,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+    minHeight: 44,
+    minWidth: 44,
+  } satisfies React.CSSProperties,
+  groupCard: {
+    border: "1px solid #e5e7eb",
+    borderRadius: 12,
+    padding: 20,
+    marginBottom: 12,
+    cursor: "pointer",
+    transition: "box-shadow 0.15s",
+  } satisfies React.CSSProperties,
+  groupName: {
+    fontSize: 18,
+    fontWeight: 600,
+    margin: "0 0 4px 0",
+  } satisfies React.CSSProperties,
+  groupDesc: {
+    fontSize: 14,
+    color: "#6b7280",
+    margin: "0 0 8px 0",
+  } satisfies React.CSSProperties,
+  groupMeta: {
+    display: "flex",
+    gap: 12,
+    fontSize: 13,
+    color: "#9ca3af",
+  } satisfies React.CSSProperties,
+  badge: {
+    display: "inline-block",
+    padding: "2px 8px",
+    borderRadius: 6,
+    fontSize: 11,
+    fontWeight: 600,
+  } satisfies React.CSSProperties,
+  adminBadge: {
+    backgroundColor: "#dbeafe",
+    color: "#1d4ed8",
+  } satisfies React.CSSProperties,
+  memberBadge: {
+    backgroundColor: "#f3f4f6",
+    color: "#6b7280",
+  } satisfies React.CSSProperties,
+  empty: {
+    textAlign: "center" as const,
+    padding: 60,
+    color: "#9ca3af",
+  },
+  loadingText: {
+    textAlign: "center" as const,
+    padding: 60,
+    color: "#9ca3af",
+    fontSize: 16,
+  },
+  errorText: {
+    textAlign: "center" as const,
+    padding: 40,
+    color: "#ef4444",
+    fontSize: 14,
+  },
+};
+
+export function GroupsListPage() {
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const [groups, setGroups] = useState<GroupListItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadGroups = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await groupsApi.listGroups();
+      setGroups(data);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to load groups");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadGroups();
+  }, [loadGroups]);
+
+  if (loading) {
+    return <div style={styles.loadingText}>Loading groups...</div>;
+  }
+
+  if (error) {
+    return (
+      <div style={styles.container}>
+        <div style={styles.errorText}>
+          {error}
+          <br />
+          <button
+            onClick={loadGroups}
+            style={{
+              marginTop: 12,
+              padding: "8px 16px",
+              cursor: "pointer",
+              border: "1px solid #d1d5db",
+              borderRadius: 6,
+              background: "#fff",
+            }}
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.header}>
+        <h1 style={styles.title}>Groups</h1>
+        <button
+          style={styles.createBtn}
+          onClick={() => navigate("/groups/create")}
+        >
+          + Create Group
+        </button>
+      </div>
+
+      {groups.length === 0 ? (
+        <div style={styles.empty}>
+          <p style={{ fontSize: 16, marginBottom: 8 }}>You're not in any groups yet.</p>
+          <p style={{ fontSize: 14 }}>Create a group to start reading together with friends!</p>
+        </div>
+      ) : (
+        groups.map((group) => (
+          <div
+            key={group.id}
+            style={styles.groupCard}
+            onClick={() => navigate(`/groups/${group.id}`)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                navigate(`/groups/${group.id}`);
+              }
+            }}
+            role="button"
+            tabIndex={0}
+          >
+            <h2 style={styles.groupName}>{group.name}</h2>
+            {group.description && (
+              <p style={styles.groupDesc}>{group.description}</p>
+            )}
+            <div style={styles.groupMeta}>
+              <span>{group.member_count} member{group.member_count !== 1 ? "s" : ""}</span>
+              {group.user_role === "admin" ? (
+                <span style={{ ...styles.badge, ...styles.adminBadge }}>Admin</span>
+              ) : group.user_role === "member" ? (
+                <span style={{ ...styles.badge, ...styles.memberBadge }}>Member</span>
+              ) : null}
+            </div>
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

frontend/src/pages/JoinGroupPage.tsx

@@ -0,0 +1,138 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { groupsApi } from "../api/groups";
+import { useToast } from "../hooks/useToast";
+import type { InviteValidation } from "../../packages/shared/src/types";
+
+const S = {
+  container: { maxWidth: 500, margin: "0 auto", padding: "24px 16px" } satisfies React.CSSProperties,
+  backBtn: {
+    background: "none", border: "none", color: "#3b82f6", fontSize: 14, cursor: "pointer",
+    padding: 0, marginBottom: 16, minHeight: 44, minWidth: 44,
+  } satisfies React.CSSProperties,
+  card: {
+    padding: 24, border: "1px solid #e5e7eb", borderRadius: 12, textAlign: "center" as const,
+  } satisfies React.CSSProperties,
+  groupIcon: {
+    width: 64, height: 64, borderRadius: "50%", backgroundColor: "#dbeafe",
+    display: "flex", alignItems: "center", justifyContent: "center",
+    margin: "0 auto 16px auto", fontSize: 28, color: "#3b82f6", fontWeight: 700,
+  } satisfies React.CSSProperties,
+  groupName: { fontSize: 22, fontWeight: 700, marginBottom: 4 } satisfies React.CSSProperties,
+  groupDesc: { fontSize: 14, color: "#6b7280", marginBottom: 8 } satisfies React.CSSProperties,
+  groupMeta: { fontSize: 13, color: "#9ca3af", marginBottom: 20 } satisfies React.CSSProperties,
+  joinBtn: {
+    padding: "12px 32px", backgroundColor: "#3b82f6", color: "#fff",
+    border: "none", borderRadius: 8, fontSize: 16, fontWeight: 600,
+    cursor: "pointer", minHeight: 44,
+  } satisfies React.CSSProperties,
+  joinBtnDisabled: {
+    padding: "12px 32px", backgroundColor: "#93c5fd", color: "#fff",
+    border: "none", borderRadius: 8, fontSize: 16, fontWeight: 600,
+    cursor: "not-allowed", minHeight: 44,
+  } satisfies React.CSSProperties,
+  loading: { textAlign: "center" as const, padding: 60, color: "#9ca3af" },
+  error: { textAlign: "center" as const, padding: 40, color: "#ef4444" },
+  errorCard: {
+    padding: 24, border: "1px solid #fecaca", borderRadius: 12, textAlign: "center" as const,
+    backgroundColor: "#fef2f2",
+  } satisfies React.CSSProperties,
+  errorTitle: { fontSize: 18, fontWeight: 600, color: "#dc2626", marginBottom: 8 } satisfies React.CSSProperties,
+  errorMsg: { fontSize: 14, color: "#ef4444" } satisfies React.CSSProperties,
+};
+
+export function JoinGroupPage() {
+  const { code } = useParams<{ code: string }>();
+  const navigate = useNavigate();
+  const { showToast } = useToast();
+
+  const [inviteInfo, setInviteInfo] = useState<InviteValidation | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [joining, setJoining] = useState(false);
+
+  const validateInvite = useCallback(async () => {
+    if (!code) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await groupsApi.validateInvite(code);
+      setInviteInfo(data);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Invalid invite");
+    } finally {
+      setLoading(false);
+    }
+  }, [code]);
+
+  useEffect(() => {
+    validateInvite();
+  }, [validateInvite]);
+
+  const handleJoin = async () => {
+    if (!code) return;
+    setJoining(true);
+    try {
+      const group = await groupsApi.joinViaInvite(code);
+      showToast({ message: `You've joined ${group.name}!`, variant: "success" });
+      navigate(`/groups/${group.id}`);
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "Failed to join group";
+      showToast({ message: msg, variant: "error" });
+      setError(msg);
+    } finally {
+      setJoining(false);
+    }
+  };
+
+  if (loading) return <div style={S.loading}>Validating invite...</div>;
+
+  if (error && !inviteInfo) {
+    return (
+      <div style={S.container}>
+        <div style={S.errorCard}>
+          <div style={S.errorTitle}>Invalid Invite</div>
+          <div style={S.errorMsg}>{error}</div>
+          <button
+            style={{ ...S.backBtn, marginTop: 16, display: "inline-block" }}
+            onClick={() => navigate("/groups")}
+          >
+            Go to Groups
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (!inviteInfo) return null;
+
+  return (
+    <div style={S.container}>
+      <button style={S.backBtn} onClick={() => navigate("/groups")}>
+        ← Back to Groups
+      </button>
+
+      <div style={S.card}>
+        <div style={S.groupIcon}>
+          {inviteInfo.group.name.charAt(0).toUpperCase()}
+        </div>
+        <h1 style={S.groupName}>{inviteInfo.group.name}</h1>
+        {inviteInfo.group.description && (
+          <p style={S.groupDesc}>{inviteInfo.group.description}</p>
+        )}
+        <p style={S.groupMeta}>
+          {inviteInfo.group.member_count} member{inviteInfo.group.member_count !== 1 ? "s" : ""} ·{" "}
+          Created by {inviteInfo.invite.created_by_email}
+        </p>
+
+        <button
+          style={joining ? S.joinBtnDisabled : S.joinBtn}
+          onClick={handleJoin}
+          disabled={joining}
+        >
+          {joining ? "Joining..." : "Join Group"}
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Library.tsx

@@ -241,6 +241,7 @@ export function LibraryPage() {
           {isMobile ? (
             <>
               <button onClick={() => navigate("/add")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.addBook")}>➕</button>
+              <button onClick={() => navigate("/groups")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title="Groups">👥</button>
               <button onClick={() => navigate("/bookmarks-notes")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.bookmarks")}>🔖</button>
               <button onClick={() => navigate("/settings")} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.settings")}>⚙️</button>
               <button onClick={logout} style={{ ...TOUCH_TARGET, fontSize: 20, background: "none", border: "none", cursor: "pointer", padding: 8 }} title={t("library.logout")}>🚪</button>
@@ -248,6 +249,7 @@ export function LibraryPage() {
           ) : (
             <>
               <button onClick={() => navigate("/add")} className="btn">+ {t("library.addBook")}</button>
+              <button onClick={() => navigate("/groups")} className="btn btn-secondary">Groups</button>
               <button onClick={() => navigate("/bookmarks-notes")} className="btn btn-secondary">{t("library.bookmarks")}</button>
               <button onClick={() => navigate("/settings")} className="btn btn-secondary">{t("library.settings")}</button>
               <button onClick={logout} className="btn btn-danger">{t("library.logout")}</button>

mobile/.env.example

@@ -0,0 +1,10 @@
+# Mobile (Expo) environment (example – never commit real secrets)
+# Base URL of the Django backend. Must be reachable from the device/emulator.
+#   - Android emulator: http://10.0.2.2:8000
+#   - iOS simulator:    http://localhost:8000
+#   - Physical device:  http://<your-lan-ip>:8000
+EXPO_PUBLIC_API_URL=http://10.0.2.2:8000
+
+# EAS Build: set per profile in mobile/eas.json or via:
+#   eas secret:create --name EXPO_PUBLIC_API_URL --value https://your-api.example.com
+# Run all eas commands from mobile/ (not repo root).

mobile/App.tsx

@@ -1,4 +1,8 @@
 import React from "react";
+// Peer dependencies for @epubjs-react-native/core and gesture-handler.
+import "react-native-webview";
+import "react-native-reanimated";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { NavigationContainer } from "@react-navigation/native";
 import { StatusBar } from "expo-status-bar";
 import { AuthProvider } from "./src/context/AuthContext";
@@ -6,11 +10,13 @@ import { RootNavigator } from "./src/navigation/RootNavigator";
 
 export default function App() {
   return (
-    <AuthProvider>
+    <GestureHandlerRootView style={{ flex: 1 }}>
-      <NavigationContainer>
+      <AuthProvider>
-        <StatusBar style="auto" />
+        <NavigationContainer>
-        <RootNavigator />
+          <StatusBar style="auto" />
-      </NavigationContainer>
+          <RootNavigator />
-    </AuthProvider>
+        </NavigationContainer>
+      </AuthProvider>
+    </GestureHandlerRootView>
   );
 }

mobile/app.json

@@ -21,7 +21,6 @@
       "package": "com.cloudreader.app"
     },
     "plugins": [
-      "expo-document-picker",
       "expo-file-system"
     ]
   }

mobile/eas.json

@@ -0,0 +1,42 @@
+{
+  "cli": {
+    "version": ">= 13.0.0",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "base": {
+      "node": "20.18.0",
+      "env": {
+        "EXPO_PUBLIC_API_URL": "https://api.example.com"
+      }
+    },
+    "development": {
+      "extends": "base",
+      "developmentClient": true,
+      "distribution": "internal",
+      "ios": {
+        "simulator": true
+      },
+      "android": {
+        "buildType": "apk"
+      },
+      "env": {
+        "EXPO_PUBLIC_API_URL": "http://10.0.2.2:8000"
+      }
+    },
+    "preview": {
+      "extends": "base",
+      "distribution": "internal",
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "production": {
+      "extends": "base",
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

mobile/metro.config.js

@@ -0,0 +1,25 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+
+const projectRoot = __dirname;
+const monorepoRoot = path.resolve(projectRoot, "..");
+
+/**
+ * Expo SDK 52+ configures Metro for Yarn/npm/pnpm workspaces automatically
+ * when using expo/metro-config. This file keeps an explicit monorepo root so
+ * @cloud-reader/shared (packages/shared) resolves reliably in dev and on EAS.
+ *
+ * If you previously added manual watchFolders/nodeModulesPaths and things
+ * work, prefer this minimal config. After changes: npx expo start --clear
+ *
+ * @see https://docs.expo.dev/guides/monorepos/
+ */
+const config = getDefaultConfig(projectRoot);
+
+config.watchFolders = [monorepoRoot];
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, "node_modules"),
+  path.resolve(monorepoRoot, "node_modules"),
+];
+
+module.exports = config;

mobile/package.json

@@ -8,7 +8,11 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "eas:init": "eas init",
+    "eas:build:dev": "eas build --profile development --platform all",
+    "eas:build:preview": "eas build --profile preview --platform all",
+    "eas:build:prod": "eas build --profile production --platform all"
   },
   "dependencies": {
     "expo": "~52.0.0",
@@ -22,10 +26,12 @@
     "@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",
+    "@epubjs-react-native/core": "1.4.7",
+    "@epubjs-react-native/expo-file-system": "1.1.4",
     "expo-file-system": "~18.0.0",
     "react-native-gesture-handler": "~2.20.0",
     "react-native-reanimated": "~3.16.0",
+    "react-native-webview": "13.12.5",
     "@cloud-reader/shared": "*"
   },
   "devDependencies": {

mobile/src/api/annotations.ts

@@ -1,55 +1,31 @@
 import api from "./client";
-import type {
+import type { PaginatedResponse } from "@cloud-reader/shared";
-  Bookmark,
+import type { Bookmark, CreateMarkerPayload } from "../types";
-  Note,
-  CreateBookmarkPayload,
-  CreateNotePayload,
-  PaginatedResponse,
-} from "@cloud-reader/shared";
 
-export function fetchBookmarks(
+export async function fetchBookmarks(
-  bookId?: string,
+  ebookId?: string | number,
 ): Promise<PaginatedResponse<Bookmark>> {
-  const params = bookId ? { book: bookId } : {};
+  const params: Record<string, string> = {};
-  return api
+  if (ebookId != null && ebookId !== "") {
-    .get<PaginatedResponse<Bookmark>>("/api/annotations/bookmarks/", { params })
+    params.ebook = String(ebookId);
-    .then((res) => res.data);
+  }
+  const { data } = await api.get<PaginatedResponse<Bookmark>>(
+    "/api/annotations/bookmarks/",
+    { params },
+  );
+  return data;
 }
 
-export function createBookmark(
+export async function createMarker(
-  payload: CreateBookmarkPayload,
+  payload: CreateMarkerPayload,
 ): Promise<Bookmark> {
-  return api
+  const { data } = await api.post<Bookmark>(
-    .post<Bookmark>("/api/annotations/bookmarks/", payload)
+    "/api/annotations/bookmarks/",
-    .then((res) => res.data);
+    payload,
+  );
+  return data;
 }
 
-export function deleteBookmark(id: string): Promise<void> {
+export async function deleteBookmark(id: string): Promise<void> {
-  return api.delete(`/api/annotations/bookmarks/${id}/`).then(() => {});
+  await api.delete(`/api/annotations/bookmarks/${id}/`);
-}
-
-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 +1,12 @@
 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/", {
+    .get<PaginatedResponse<Book>>("/api/books/", {
       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,5 +1,6 @@
 import axios, { type AxiosError, type InternalAxiosRequestConfig } from "axios";
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import type { TokenResponse } from "@cloud-reader/shared";
 
 const STORAGE_KEYS = {
   ACCESS_TOKEN: "access_token",
@@ -39,6 +40,26 @@ async function clearTokens(): Promise<void> {
   ]);
 }
 
+async function saveTokens(tokens: TokenResponse): Promise<void> {
+  await setTokens(tokens.access, tokens.refresh);
+}
+
+async function loadTokens(): Promise<TokenResponse | null> {
+  const [access, refresh] = await Promise.all([
+    getAccessToken(),
+    getRefreshToken(),
+  ]);
+  if (!access || !refresh) {
+    return null;
+  }
+  return { access, refresh };
+}
+
+/** Absolute base URL used for direct (non-axios) requests like file downloads. */
+function getApiBaseUrl(): string {
+  return api.defaults.baseURL ?? "";
+}
+
 // ── Request interceptor ─────────────────────────────────────────────
 
 api.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
@@ -136,5 +157,14 @@ api.interceptors.response.use(
   },
 );
 
-export { getAccessToken, getRefreshToken, setTokens, clearTokens };
+const apiClient = api;
+
+export {
+  apiClient,
+  getAccessToken,
+  saveTokens,
+  loadTokens,
+  clearTokens,
+  getApiBaseUrl,
+};
 export default api;

mobile/src/api/ebooks.ts

@@ -1,54 +1,35 @@
-import { apiClient } from "./client";
+import { apiClient, getApiBaseUrl } from "./client";
 import type {
   EBookListItem,
   EBookDetail,
-  ReadingProgress,
-  ReadingSettings,
   TocResponse,
-  ContentResponse,
   PaginatedResponse,
 } from "@cloud-reader/shared";
 
 export const ebooksApi = {
-  /** List uploaded e-books */
+  /** List the authenticated user's uploaded e-books */
   list() {
-    return apiClient.get<PaginatedResponse<EBookListItem>>("/api/ebooks/");
+    return apiClient.get<PaginatedResponse<EBookListItem>>(
+      "/api/books/ebooks/",
+    );
   },
 
-  /** Get e-book detail */
+  /** Get e-book detail (metadata, format, progress) */
   get(id: number) {
-    return apiClient.get<EBookDetail>(`/api/ebooks/${id}/`);
+    return apiClient.get<EBookDetail>(`/api/books/ebooks/${id}/`);
   },
 
-  /** Get table of contents */
+  /** Get the table of contents (used as a fallback for chapter navigation) */
   getToc(id: number) {
-    return apiClient.get<TocResponse>(`/api/ebooks/${id}/toc/`);
+    return apiClient.get<TocResponse>(`/api/books/ebooks/${id}/toc/`);
   },
 
-  /** Get page content */
+  /**
-  getContent(id: number, page: number) {
+   * Absolute URL to stream the raw ebook file. The endpoint requires JWT auth,
-    return apiClient.get<ContentResponse>(
+   * so callers download it with an Authorization header (e.g. via
-      `/api/ebooks/${id}/content/?page=${page}`,
+   * expo-file-system) rather than handing the URL to a renderer directly.
-    );
+   */
-  },
+  getFileUrl(id: number): string {
-
+    return `${getApiBaseUrl()}/api/books/ebooks/${id}/file/`;
-  /** 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/api/reader.ts

@@ -0,0 +1,75 @@
+/**
+ * Reader API client — reading settings and per-book progress.
+ * Mirrors frontend/src/api/reader.ts. Uses the shared axios client so the
+ * JWT access token is attached automatically.
+ */
+
+import api from "./client";
+import type { ReadingProgress, ReadingSettings } from "../types/reader";
+
+export async function getReadingSettings(): Promise<ReadingSettings> {
+  const { data } = await api.get<ReadingSettings>("/api/reader/settings/");
+  return data;
+}
+
+export async function updateReadingSettings(
+  settings: Partial<ReadingSettings>,
+): Promise<ReadingSettings> {
+  const { data } = await api.patch<ReadingSettings>(
+    "/api/reader/settings/",
+    settings,
+  );
+  return data;
+}
+
+interface ProgressWire {
+  current_position: number;
+  last_page: number;
+  epub_location?: string;
+  updated_at?: string;
+}
+
+function toReadingProgress(bookId: number, data: ProgressWire): ReadingProgress {
+  return {
+    id: bookId,
+    book: bookId,
+    current_chapter: data.last_page || 1,
+    current_position: data.current_position ?? 0,
+    percentage: data.current_position ?? 0,
+    epub_location: data.epub_location ?? "",
+    updated_at: data.updated_at ?? "",
+  };
+}
+
+export async function getReadingProgress(
+  bookId: number,
+): Promise<ReadingProgress> {
+  const { data } = await api.get<ProgressWire>(
+    `/api/books/ebooks/${bookId}/progress/`,
+  );
+  return toReadingProgress(bookId, data);
+}
+
+export async function updateReadingProgress(
+  bookId: number,
+  progress: Partial<ReadingProgress>,
+): Promise<ReadingProgress> {
+  const body: Record<string, string | number> = {};
+  if (
+    progress.percentage !== undefined ||
+    progress.current_position !== undefined
+  ) {
+    body.current_position = progress.percentage ?? progress.current_position ?? 0;
+  }
+  if (progress.current_chapter !== undefined) {
+    body.last_page = progress.current_chapter;
+  }
+  if (progress.epub_location !== undefined) {
+    body.epub_location = progress.epub_location;
+  }
+  const { data } = await api.patch<ProgressWire>(
+    `/api/books/ebooks/${bookId}/progress/`,
+    body,
+  );
+  return toReadingProgress(bookId, data);
+}

mobile/src/components/reader/BookmarksModal.tsx

@@ -0,0 +1,147 @@
+import { type ReactNode } from "react";
+import {
+  Text,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  View,
+} from "react-native";
+import { resolvePalette } from "../../utils/epubTheme";
+import type { ReadingSettings } from "../../types/reader";
+import type { Bookmark } from "../../types";
+import { ReaderBottomSheet } from "./ReaderBottomSheet";
+
+interface BookmarksModalProps {
+  visible: boolean;
+  bookmarks: Bookmark[];
+  settings: ReadingSettings;
+  onSelect: (bookmark: Bookmark) => void;
+  onDelete: (bookmark: Bookmark) => void;
+  onClose: () => void;
+}
+
+export function BookmarksModal({
+  visible,
+  bookmarks,
+  settings,
+  onSelect,
+  onDelete,
+  onClose,
+}: BookmarksModalProps): ReactNode {
+  const palette = resolvePalette(settings);
+
+  return (
+    <ReaderBottomSheet
+      visible={visible}
+      title="Bookmarks & highlights"
+      chromeColor={palette.chrome}
+      textColor={palette.text}
+      onClose={onClose}
+    >
+      <FlatList
+        data={bookmarks}
+        keyExtractor={(item) => item.id}
+        ListEmptyComponent={
+          <Text style={[styles.empty, { color: palette.text }]}>
+            No bookmarks yet. Tap the star to bookmark a page, or select text to
+            highlight it.
+          </Text>
+        }
+        renderItem={({ item }) => (
+          <View style={styles.row}>
+            <TouchableOpacity
+              style={styles.rowMain}
+              onPress={() => onSelect(item)}
+            >
+              {item.highlight_color ? (
+                <View
+                  style={[
+                    styles.dot,
+                    { backgroundColor: item.highlight_color },
+                  ]}
+                />
+              ) : (
+                <Text style={styles.star}>★</Text>
+              )}
+              <View style={styles.rowTextWrap}>
+                {item.chapter_title ? (
+                  <Text
+                    style={[styles.chapter, { color: palette.text }]}
+                    numberOfLines={1}
+                  >
+                    {item.chapter_title}
+                  </Text>
+                ) : null}
+                <Text
+                  style={[styles.excerpt, { color: palette.text }]}
+                  numberOfLines={2}
+                >
+                  {item.content || item.location_text || "Bookmarked page"}
+                </Text>
+              </View>
+            </TouchableOpacity>
+            <TouchableOpacity
+              onPress={() => onDelete(item)}
+              hitSlop={8}
+              style={styles.deleteButton}
+            >
+              <Text style={styles.deleteText}>Delete</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      />
+    </ReaderBottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "rgba(127,127,127,0.2)",
+  },
+  rowMain: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  rowTextWrap: {
+    flex: 1,
+    marginLeft: 10,
+  },
+  star: {
+    fontSize: 16,
+    color: "#4f8ef7",
+  },
+  dot: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+  },
+  chapter: {
+    fontSize: 12,
+    opacity: 0.7,
+    marginBottom: 2,
+  },
+  excerpt: {
+    fontSize: 14,
+  },
+  deleteButton: {
+    marginLeft: 12,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  deleteText: {
+    color: "#ff453a",
+    fontSize: 13,
+    fontWeight: "600",
+  },
+  empty: {
+    padding: 24,
+    textAlign: "center",
+    opacity: 0.7,
+  },
+});

mobile/src/components/reader/EpubReaderView.tsx

@@ -0,0 +1,436 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  StyleSheet,
+  type LayoutChangeEvent,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Reader, ReaderProvider, useReader } from "@epubjs-react-native/core";
+import { useFileSystem } from "@epubjs-react-native/expo-file-system";
+import * as FileSystem from "expo-file-system";
+import type { EBookDetail } from "@cloud-reader/shared";
+import { getAccessToken } from "../../api/client";
+import { ebooksApi } from "../../api/ebooks";
+import { getReadingProgress, updateReadingProgress } from "../../api/reader";
+import {
+  fetchBookmarks,
+  createMarker,
+  deleteBookmark,
+} from "../../api/annotations";
+import { useReadingSettings } from "../../hooks/useReadingSettings";
+import {
+  buildEpubTheme,
+  FONT_STACKS,
+  resolvePalette,
+} from "../../utils/epubTheme";
+import type { Bookmark } from "../../types";
+import { ReaderToolbar } from "./ReaderToolbar";
+import { TocModal, type TocItem } from "./TocModal";
+import { ReadingSettingsModal } from "./ReadingSettingsModal";
+import { BookmarksModal } from "./BookmarksModal";
+
+const HIGHLIGHT_COLOR = "#ffd54a";
+const PROGRESS_SAVE_MS = 800;
+
+/** Loose view of the epubjs-react-native reader API we rely on. */
+interface ReaderApi {
+  goToLocation?: (target: string) => void;
+  changeTheme?: (theme: Record<string, Record<string, string>>) => void;
+  changeFontSize?: (size: string) => void;
+  changeFontFamily?: (font: string) => void;
+  addAnnotation?: (
+    type: string,
+    cfiRange: string,
+    data?: unknown,
+    styles?: Record<string, unknown>,
+  ) => void;
+  removeAnnotationByCfi?: (cfi: string) => void;
+  removeSelection?: () => void;
+  toc?: TocItem[];
+}
+
+interface EpubLocation {
+  start?: { cfi?: string };
+}
+
+interface EpubSection {
+  label?: string;
+  index?: number;
+}
+
+interface EpubReaderViewProps {
+  book: EBookDetail;
+  ebookId: number;
+  onClose: () => void;
+}
+
+export function EpubReaderView(props: EpubReaderViewProps): ReactNode {
+  return (
+    <ReaderProvider>
+      <EpubReaderInner {...props} />
+    </ReaderProvider>
+  );
+}
+
+function EpubReaderInner({
+  book,
+  ebookId,
+  onClose,
+}: EpubReaderViewProps): ReactNode {
+  const reader = useReader() as unknown as ReaderApi;
+  const { settings, updateSettings } = useReadingSettings();
+
+  const [src, setSrc] = useState<string | null>(null);
+  const [initialLocation, setInitialLocation] = useState<string | undefined>();
+  const [fileError, setFileError] = useState(false);
+  const [ready, setReady] = useState(false);
+  const [size, setSize] = useState<{ width: number; height: number } | null>(
+    null,
+  );
+
+  const [progressPct, setProgressPct] = useState(
+    Math.round(book.progress?.current_position ?? 0),
+  );
+  const [chapterTitle, setChapterTitle] = useState("");
+  const [currentCfi, setCurrentCfi] = useState("");
+  const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
+
+  const [tocOpen, setTocOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [bookmarksOpen, setBookmarksOpen] = useState(false);
+
+  const currentCfiRef = useRef("");
+  const progressPctRef = useRef(progressPct);
+  const sectionRef = useRef<{ index: number; label: string }>({
+    index: 0,
+    label: "",
+  });
+  const bookmarksRef = useRef<Bookmark[]>([]);
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    bookmarksRef.current = bookmarks;
+  }, [bookmarks]);
+
+  // Download the EPUB with auth, and resolve the saved resume location.
+  useEffect(() => {
+    let active = true;
+    (async () => {
+      try {
+        const progress = await getReadingProgress(ebookId).catch(() => null);
+        if (active && progress?.epub_location) {
+          setInitialLocation(progress.epub_location);
+          currentCfiRef.current = progress.epub_location;
+          setCurrentCfi(progress.epub_location);
+        }
+        const token = await getAccessToken();
+        const url = ebooksApi.getFileUrl(ebookId);
+        const dest = `${FileSystem.cacheDirectory}ebook-${ebookId}.epub`;
+        const result = await FileSystem.downloadAsync(url, dest, {
+          headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+        });
+        if (!active) return;
+        if (result.status >= 400) {
+          setFileError(true);
+          return;
+        }
+        setSrc(result.uri);
+      } catch {
+        if (active) setFileError(true);
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [ebookId]);
+
+  // Load existing bookmarks/highlights for this book.
+  useEffect(() => {
+    let active = true;
+    fetchBookmarks(ebookId)
+      .then((res) => {
+        if (active) setBookmarks(res.results);
+      })
+      .catch(() => {
+        /* bookmarks are optional */
+      });
+    return () => {
+      active = false;
+    };
+  }, [ebookId]);
+
+  // Apply typography/theme to the rendition once it is ready and on changes.
+  useEffect(() => {
+    if (!ready) return;
+    try {
+      reader.changeTheme?.(buildEpubTheme(settings));
+      reader.changeFontSize?.(`${settings.font_size}px`);
+      reader.changeFontFamily?.(FONT_STACKS[settings.font_family]);
+    } catch {
+      /* ignore rendition styling errors */
+    }
+  }, [ready, settings, reader]);
+
+  const flushProgress = useCallback(() => {
+    const cfi = currentCfiRef.current;
+    if (!cfi) return;
+    updateReadingProgress(ebookId, {
+      percentage: progressPctRef.current,
+      epub_location: cfi,
+      current_chapter: sectionRef.current.index + 1,
+    }).catch(() => {
+      /* progress is best-effort */
+    });
+  }, [ebookId]);
+
+  // Flush the latest progress when leaving the reader.
+  useEffect(
+    () => () => {
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      flushProgress();
+    },
+    [flushProgress],
+  );
+
+  const handleReady = useCallback(() => {
+    setReady(true);
+    bookmarksRef.current.forEach((bookmark) => {
+      if (bookmark.highlight_color && bookmark.epub_cfi) {
+        try {
+          reader.addAnnotation?.("highlight", bookmark.epub_cfi, undefined, {
+            fill: bookmark.highlight_color,
+          });
+        } catch {
+          /* highlight rendering is best-effort */
+        }
+      }
+    });
+  }, [reader]);
+
+  const handleLocationChange = useCallback(
+    (
+      _total: number,
+      location: EpubLocation,
+      progress: number,
+      section: EpubSection | null,
+    ) => {
+      const cfi = location?.start?.cfi ?? "";
+      if (cfi) {
+        currentCfiRef.current = cfi;
+        setCurrentCfi(cfi);
+      }
+      const pct = Math.round(progress ?? 0);
+      progressPctRef.current = pct;
+      setProgressPct(pct);
+      const label = section?.label?.trim() ?? "";
+      sectionRef.current = {
+        index: section?.index ?? sectionRef.current.index,
+        label,
+      };
+      setChapterTitle(label);
+
+      if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = setTimeout(flushProgress, PROGRESS_SAVE_MS);
+    },
+    [flushProgress],
+  );
+
+  const handleSelected = useCallback(
+    async (selectedText: string, cfiRange: string) => {
+      const excerpt = (selectedText ?? "").slice(0, 280);
+      try {
+        const created = await createMarker({
+          ebook: ebookId,
+          epub_cfi: cfiRange,
+          chapter_index: sectionRef.current.index,
+          chapter_title: sectionRef.current.label,
+          location_text: excerpt,
+          content: excerpt,
+          highlight_color: HIGHLIGHT_COLOR,
+        });
+        setBookmarks((prev) => [created, ...prev]);
+        try {
+          reader.addAnnotation?.("highlight", cfiRange, undefined, {
+            fill: HIGHLIGHT_COLOR,
+          });
+          reader.removeSelection?.();
+        } catch {
+          /* annotation rendering is best-effort */
+        }
+      } catch {
+        /* ignore highlight save failures */
+      }
+    },
+    [ebookId, reader],
+  );
+
+  const handleToggleBookmarkHere = useCallback(async () => {
+    const cfi = currentCfiRef.current;
+    if (!cfi) return;
+    const existing = bookmarksRef.current.find((b) => b.epub_cfi === cfi);
+    if (existing) {
+      setBookmarks((prev) => prev.filter((b) => b.id !== existing.id));
+      try {
+        reader.removeAnnotationByCfi?.(cfi);
+      } catch {
+        /* best-effort */
+      }
+      deleteBookmark(existing.id).catch(() => {});
+      return;
+    }
+    try {
+      const created = await createMarker({
+        ebook: ebookId,
+        epub_cfi: cfi,
+        chapter_index: sectionRef.current.index,
+        chapter_title: sectionRef.current.label,
+        location_text: sectionRef.current.label,
+      });
+      setBookmarks((prev) => [created, ...prev]);
+    } catch {
+      /* ignore bookmark save failures */
+    }
+  }, [ebookId, reader]);
+
+  const handleSelectBookmark = useCallback(
+    (bookmark: Bookmark) => {
+      setBookmarksOpen(false);
+      try {
+        reader.goToLocation?.(bookmark.epub_cfi);
+      } catch {
+        /* best-effort */
+      }
+    },
+    [reader],
+  );
+
+  const handleDeleteBookmark = useCallback(
+    (bookmark: Bookmark) => {
+      setBookmarks((prev) => prev.filter((b) => b.id !== bookmark.id));
+      try {
+        if (bookmark.highlight_color) {
+          reader.removeAnnotationByCfi?.(bookmark.epub_cfi);
+        }
+      } catch {
+        /* best-effort */
+      }
+      deleteBookmark(bookmark.id).catch(() => {});
+    },
+    [reader],
+  );
+
+  const handleTocSelect = useCallback(
+    (href: string) => {
+      setTocOpen(false);
+      try {
+        reader.goToLocation?.(href);
+      } catch {
+        /* best-effort */
+      }
+    },
+    [reader],
+  );
+
+  const onReaderLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setSize((prev) =>
+      prev && prev.width === width && prev.height === height
+        ? prev
+        : { width, height },
+    );
+  }, []);
+
+  const palette = resolvePalette(settings);
+  const isBookmarked = bookmarks.some((b) => b.epub_cfi === currentCfi);
+
+  return (
+    <SafeAreaView
+      style={[styles.container, { backgroundColor: palette.background }]}
+      edges={["top", "bottom"]}
+    >
+      <ReaderToolbar
+        title={book.title}
+        chapterTitle={chapterTitle}
+        progressPct={progressPct}
+        settings={settings}
+        isBookmarked={isBookmarked}
+        onBack={onClose}
+        onToggleToc={() => setTocOpen(true)}
+        onToggleSettings={() => setSettingsOpen(true)}
+        onToggleBookmarks={() => setBookmarksOpen(true)}
+        onToggleBookmarkHere={handleToggleBookmarkHere}
+      />
+
+      <View style={styles.readerArea} onLayout={onReaderLayout}>
+        {fileError ? (
+          <View style={styles.centered}>
+            <Text style={[styles.message, { color: palette.text }]}>
+              Could not download this book. Check your connection and try again.
+            </Text>
+          </View>
+        ) : src && size ? (
+          <Reader
+            src={src}
+            fileSystem={useFileSystem}
+            width={size.width}
+            height={size.height}
+            initialLocation={initialLocation}
+            enableSelection
+            flow="paginated"
+            defaultTheme={buildEpubTheme(settings)}
+            onReady={handleReady}
+            onLocationChange={handleLocationChange}
+            onSelected={handleSelected}
+          />
+        ) : (
+          <View style={styles.centered}>
+            <ActivityIndicator size="large" color="#4f8ef7" />
+          </View>
+        )}
+      </View>
+
+      <TocModal
+        visible={tocOpen}
+        toc={reader.toc ?? []}
+        settings={settings}
+        onSelect={handleTocSelect}
+        onClose={() => setTocOpen(false)}
+      />
+      <ReadingSettingsModal
+        visible={settingsOpen}
+        settings={settings}
+        onChange={updateSettings}
+        onClose={() => setSettingsOpen(false)}
+      />
+      <BookmarksModal
+        visible={bookmarksOpen}
+        bookmarks={bookmarks}
+        settings={settings}
+        onSelect={handleSelectBookmark}
+        onDelete={handleDeleteBookmark}
+        onClose={() => setBookmarksOpen(false)}
+      />
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  readerArea: {
+    flex: 1,
+  },
+  centered: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 24,
+  },
+  message: {
+    fontSize: 15,
+    textAlign: "center",
+  },
+});

mobile/src/components/reader/ReaderBottomSheet.tsx

@@ -0,0 +1,92 @@
+import { type ReactNode } from "react";
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+
+interface ReaderBottomSheetProps {
+  visible: boolean;
+  title: string;
+  chromeColor: string;
+  textColor: string;
+  onClose: () => void;
+  children: ReactNode;
+  /** When true, caps sheet height (TOC/bookmarks). Settings uses a full-width panel. */
+  tall?: boolean;
+  sheetStyle?: StyleProp<ViewStyle>;
+}
+
+export function ReaderBottomSheet({
+  visible,
+  title,
+  chromeColor,
+  textColor,
+  onClose,
+  children,
+  tall = true,
+  sheetStyle,
+}: ReaderBottomSheetProps): ReactNode {
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      transparent
+      onRequestClose={onClose}
+    >
+      <View style={styles.backdrop}>
+        <View
+          style={[
+            styles.sheet,
+            tall && styles.sheetTall,
+            { backgroundColor: chromeColor },
+            sheetStyle,
+          ]}
+        >
+          <View style={styles.header}>
+            <Text style={[styles.headerTitle, { color: textColor }]}>
+              {title}
+            </Text>
+            <TouchableOpacity onPress={onClose} hitSlop={12}>
+              <Text style={[styles.close, { color: textColor }]}>✕</Text>
+            </TouchableOpacity>
+          </View>
+          {children}
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    justifyContent: "flex-end",
+  },
+  sheet: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingBottom: 24,
+  },
+  sheetTall: {
+    maxHeight: "75%",
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 16,
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: "700",
+  },
+  close: {
+    fontSize: 18,
+  },
+});

mobile/src/components/reader/ReaderToolbar.tsx

@@ -0,0 +1,152 @@
+import { type ReactNode } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { resolvePalette } from "../../utils/epubTheme";
+import type { ReadingSettings } from "../../types/reader";
+
+interface ReaderToolbarProps {
+  title: string;
+  chapterTitle: string;
+  progressPct: number;
+  settings: ReadingSettings;
+  isBookmarked: boolean;
+  onBack: () => void;
+  onToggleToc: () => void;
+  onToggleSettings: () => void;
+  onToggleBookmarks: () => void;
+  onToggleBookmarkHere: () => void;
+}
+
+export function ReaderToolbar({
+  title,
+  chapterTitle,
+  progressPct,
+  settings,
+  isBookmarked,
+  onBack,
+  onToggleToc,
+  onToggleSettings,
+  onToggleBookmarks,
+  onToggleBookmarkHere,
+}: ReaderToolbarProps): ReactNode {
+  const palette = resolvePalette(settings);
+
+  return (
+    <View style={[styles.bar, { backgroundColor: palette.chrome }]}>
+      <View style={styles.row}>
+        <TouchableOpacity
+          onPress={onBack}
+          hitSlop={12}
+          style={styles.iconButton}
+        >
+          <Text style={[styles.icon, { color: palette.text }]}>‹</Text>
+        </TouchableOpacity>
+
+        <View style={styles.titles}>
+          <Text
+            style={[styles.title, { color: palette.text }]}
+            numberOfLines={1}
+          >
+            {title}
+          </Text>
+          {chapterTitle ? (
+            <Text
+              style={[styles.chapter, { color: palette.text }]}
+              numberOfLines={1}
+            >
+              {chapterTitle}
+            </Text>
+          ) : null}
+        </View>
+
+        <TouchableOpacity
+          onPress={onToggleBookmarkHere}
+          hitSlop={12}
+          style={styles.iconButton}
+        >
+          <Text style={[styles.icon, { color: palette.text }]}>
+            {isBookmarked ? "★" : "☆"}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={onToggleBookmarks}
+          hitSlop={12}
+          style={styles.iconButton}
+        >
+          <Text style={[styles.iconSmall, { color: palette.text }]}>≡</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={onToggleToc}
+          hitSlop={12}
+          style={styles.iconButton}
+        >
+          <Text style={[styles.iconSmall, { color: palette.text }]}>⊟</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={onToggleSettings}
+          hitSlop={12}
+          style={styles.iconButton}
+        >
+          <Text style={[styles.iconSmall, { color: palette.text }]}>Aa</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.progressTrack}>
+        <View
+          style={[
+            styles.progressFill,
+            { width: `${Math.min(100, Math.max(0, progressPct))}%` },
+          ]}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    paddingTop: 8,
+    paddingHorizontal: 8,
+    paddingBottom: 6,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  titles: {
+    flex: 1,
+    marginHorizontal: 8,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  chapter: {
+    fontSize: 11,
+    opacity: 0.7,
+  },
+  iconButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    minWidth: 28,
+    alignItems: "center",
+  },
+  icon: {
+    fontSize: 28,
+    lineHeight: 30,
+  },
+  iconSmall: {
+    fontSize: 17,
+    fontWeight: "600",
+  },
+  progressTrack: {
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: "rgba(127,127,127,0.25)",
+    marginTop: 6,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    backgroundColor: "#4f8ef7",
+  },
+});

mobile/src/components/reader/ReadingSettingsModal.tsx

@@ -0,0 +1,249 @@
+import { type ReactNode } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { resolvePalette, THEME_PALETTES } from "../../utils/epubTheme";
+import type {
+  FontFamily,
+  ReadingSettings,
+  ThemePreset,
+} from "../../types/reader";
+import { ReaderBottomSheet } from "./ReaderBottomSheet";
+
+const THEMES: ThemePreset[] = ["light", "sepia", "paper", "dark"];
+const FONTS: { value: FontFamily; label: string }[] = [
+  { value: "serif", label: "Serif" },
+  { value: "sans-serif", label: "Sans" },
+  { value: "monospace", label: "Mono" },
+];
+const FONT_SIZE_MIN = 12;
+const FONT_SIZE_MAX = 32;
+const LINE_HEIGHT_MIN = 1.2;
+const LINE_HEIGHT_MAX = 2.2;
+
+interface ReadingSettingsModalProps {
+  visible: boolean;
+  settings: ReadingSettings;
+  onChange: (patch: Partial<ReadingSettings>) => void;
+  onClose: () => void;
+}
+
+export function ReadingSettingsModal({
+  visible,
+  settings,
+  onChange,
+  onClose,
+}: ReadingSettingsModalProps): ReactNode {
+  const palette = resolvePalette(settings);
+
+  const adjustFontSize = (delta: number) => {
+    const next = Math.min(
+      FONT_SIZE_MAX,
+      Math.max(FONT_SIZE_MIN, settings.font_size + delta),
+    );
+    onChange({ font_size: next });
+  };
+
+  const adjustLineHeight = (delta: number) => {
+    const next = Math.min(
+      LINE_HEIGHT_MAX,
+      Math.max(
+        LINE_HEIGHT_MIN,
+        Math.round((settings.line_height + delta) * 10) / 10,
+      ),
+    );
+    onChange({ line_height: next });
+  };
+
+  return (
+    <ReaderBottomSheet
+      visible={visible}
+      title="Display"
+      chromeColor={palette.chrome}
+      textColor={palette.text}
+      onClose={onClose}
+      tall={false}
+      sheetStyle={styles.sheetBody}
+    >
+      <Text style={[styles.sectionLabel, { color: palette.text }]}>Theme</Text>
+      <View style={styles.rowWrap}>
+        {THEMES.map((theme) => {
+          const p = THEME_PALETTES[theme];
+          const active = settings.theme === theme;
+          return (
+            <TouchableOpacity
+              key={theme}
+              onPress={() =>
+                onChange({
+                  theme,
+                  background_color: p.background,
+                  text_color: p.text,
+                })
+              }
+              style={[
+                styles.themeSwatch,
+                { backgroundColor: p.background },
+                active && styles.themeSwatchActive,
+              ]}
+            >
+              <Text style={[styles.themeSwatchText, { color: p.text }]}>
+                Aa
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      <Text style={[styles.sectionLabel, { color: palette.text }]}>Font</Text>
+      <View style={styles.rowWrap}>
+        {FONTS.map((font) => {
+          const active = settings.font_family === font.value;
+          return (
+            <TouchableOpacity
+              key={font.value}
+              onPress={() => onChange({ font_family: font.value })}
+              style={[styles.pill, active && styles.pillActive]}
+            >
+              <Text
+                style={[
+                  styles.pillText,
+                  { color: active ? "#fff" : palette.text },
+                ]}
+              >
+                {font.label}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      <Stepper
+        label="Font size"
+        value={`${settings.font_size}px`}
+        color={palette.text}
+        onDecrease={() => adjustFontSize(-1)}
+        onIncrease={() => adjustFontSize(1)}
+      />
+      <Stepper
+        label="Line spacing"
+        value={settings.line_height.toFixed(1)}
+        color={palette.text}
+        onDecrease={() => adjustLineHeight(-0.1)}
+        onIncrease={() => adjustLineHeight(0.1)}
+      />
+    </ReaderBottomSheet>
+  );
+}
+
+function Stepper({
+  label,
+  value,
+  color,
+  onDecrease,
+  onIncrease,
+}: {
+  label: string;
+  value: string;
+  color: string;
+  onDecrease: () => void;
+  onIncrease: () => void;
+}): ReactNode {
+  return (
+    <View style={styles.stepperRow}>
+      <Text style={[styles.sectionLabel, { color, marginBottom: 0 }]}>
+        {label}
+      </Text>
+      <View style={styles.stepperControls}>
+        <TouchableOpacity style={styles.stepperButton} onPress={onDecrease}>
+          <Text style={styles.stepperButtonText}>−</Text>
+        </TouchableOpacity>
+        <Text style={[styles.stepperValue, { color }]}>{value}</Text>
+        <TouchableOpacity style={styles.stepperButton} onPress={onIncrease}>
+          <Text style={styles.stepperButtonText}>+</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  sheetBody: {
+    paddingHorizontal: 20,
+    paddingBottom: 32,
+  },
+  sectionLabel: {
+    fontSize: 13,
+    fontWeight: "600",
+    marginBottom: 8,
+    marginTop: 8,
+    opacity: 0.8,
+  },
+  rowWrap: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 10,
+  },
+  themeSwatch: {
+    width: 56,
+    height: 48,
+    borderRadius: 10,
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 2,
+    borderColor: "transparent",
+  },
+  themeSwatchActive: {
+    borderColor: "#4f8ef7",
+  },
+  themeSwatchText: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  pill: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: "rgba(127,127,127,0.4)",
+  },
+  pillActive: {
+    backgroundColor: "#4f8ef7",
+    borderColor: "#4f8ef7",
+  },
+  pillText: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  stepperRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginTop: 16,
+  },
+  stepperControls: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  stepperButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: "rgba(127,127,127,0.2)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  stepperButtonText: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: "#4f8ef7",
+  },
+  stepperValue: {
+    minWidth: 56,
+    textAlign: "center",
+    fontSize: 15,
+    fontWeight: "600",
+  },
+});

mobile/src/components/reader/TocModal.tsx

@@ -0,0 +1,111 @@
+import { type ReactNode } from "react";
+import {
+  Text,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { resolvePalette } from "../../utils/epubTheme";
+import type { ReadingSettings } from "../../types/reader";
+import { ReaderBottomSheet } from "./ReaderBottomSheet";
+
+export interface TocItem {
+  id?: string;
+  label: string;
+  href: string;
+  subitems?: TocItem[];
+}
+
+interface FlatTocItem {
+  key: string;
+  label: string;
+  href: string;
+  depth: number;
+}
+
+function flatten(items: TocItem[], depth = 0, acc: FlatTocItem[] = []) {
+  items.forEach((item, index) => {
+    acc.push({
+      key: `${item.id ?? item.href}-${depth}-${index}`,
+      label: (item.label ?? "").trim() || "Untitled section",
+      href: item.href,
+      depth,
+    });
+    if (item.subitems?.length) {
+      flatten(item.subitems, depth + 1, acc);
+    }
+  });
+  return acc;
+}
+
+interface TocModalProps {
+  visible: boolean;
+  toc: TocItem[];
+  settings: ReadingSettings;
+  onSelect: (href: string) => void;
+  onClose: () => void;
+}
+
+export function TocModal({
+  visible,
+  toc,
+  settings,
+  onSelect,
+  onClose,
+}: TocModalProps): ReactNode {
+  const palette = resolvePalette(settings);
+  const data = flatten(toc);
+
+  return (
+    <ReaderBottomSheet
+      visible={visible}
+      title="Contents"
+      chromeColor={palette.chrome}
+      textColor={palette.text}
+      onClose={onClose}
+    >
+      <FlatList
+        data={data}
+        keyExtractor={(item) => item.key}
+        ListEmptyComponent={
+          <Text style={[styles.empty, { color: palette.text }]}>
+            No table of contents available.
+          </Text>
+        }
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            style={styles.row}
+            onPress={() => onSelect(item.href)}
+          >
+            <Text
+              style={[
+                styles.rowText,
+                { color: palette.text, marginLeft: item.depth * 16 },
+              ]}
+              numberOfLines={2}
+            >
+              {item.label}
+            </Text>
+          </TouchableOpacity>
+        )}
+      />
+    </ReaderBottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "rgba(127,127,127,0.2)",
+  },
+  rowText: {
+    fontSize: 14,
+  },
+  empty: {
+    padding: 24,
+    textAlign: "center",
+    opacity: 0.7,
+  },
+});

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/hooks/useReadingSettings.ts

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  getReadingSettings,
+  updateReadingSettings,
+} from "../api/reader";
+import type { ReadingSettings } from "../types/reader";
+
+const DEFAULT_READING_SETTINGS: ReadingSettings = {
+  font_family: "serif",
+  font_size: 18,
+  line_height: 1.5,
+  margin_width: 16,
+  background_color: "#fbfbf8",
+  text_color: "#2b2b2b",
+  brightness: 1,
+  orientation_lock: "auto",
+  theme: "paper",
+  created_at: "",
+  updated_at: "",
+};
+
+const SAVE_DEBOUNCE_MS = 600;
+
+interface UseReadingSettingsReturn {
+  settings: ReadingSettings;
+  loaded: boolean;
+  updateSettings: (patch: Partial<ReadingSettings>) => void;
+}
+
+/**
+ * Loads the user's reader settings and persists changes with a debounce.
+ * Mirrors frontend/src/hooks/useReadingSettings.ts behavior.
+ */
+export function useReadingSettings(): UseReadingSettingsReturn {
+  const [settings, setSettings] = useState<ReadingSettings>(
+    DEFAULT_READING_SETTINGS,
+  );
+  const [loaded, setLoaded] = useState(false);
+  const pendingRef = useRef<Partial<ReadingSettings>>({});
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    let active = true;
+    getReadingSettings()
+      .then((data) => {
+        if (active) {
+          setSettings(data);
+        }
+      })
+      .catch(() => {
+        /* keep defaults if the request fails */
+      })
+      .finally(() => {
+        if (active) {
+          setLoaded(true);
+        }
+      });
+    return () => {
+      active = false;
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const updateSettings = useCallback((patch: Partial<ReadingSettings>) => {
+    setSettings((prev) => ({ ...prev, ...patch }));
+    pendingRef.current = { ...pendingRef.current, ...patch };
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      const body = pendingRef.current;
+      pendingRef.current = {};
+      updateReadingSettings(body).catch(() => {
+        /* ignore transient save failures */
+      });
+    }, SAVE_DEBOUNCE_MS);
+  }, []);
+
+  return { settings, loaded, updateSettings };
+}

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/AppStack.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { MainNavigator } from "./MainNavigator";
+import BookDetailScreen from "../screens/BookDetailScreen";
+import ReaderScreen from "../screens/ReaderScreen";
+import type { AppStackParamList } from "../types";
+
+const Stack = createNativeStackNavigator<AppStackParamList>();
+
+export function AppStack() {
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerStyle: { backgroundColor: "#fff" },
+        headerTitleStyle: { fontWeight: "600", color: "#1a1a2e" },
+        headerTintColor: "#4a6cf7",
+      }}
+    >
+      <Stack.Screen
+        name="Tabs"
+        component={MainNavigator}
+        options={{ headerShown: false }}
+      />
+      <Stack.Screen
+        name="BookDetail"
+        component={BookDetailScreen}
+        options={{ title: "" }}
+      />
+      <Stack.Screen
+        name="Reader"
+        component={ReaderScreen}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
+  );
+}

mobile/src/navigation/AuthNavigator.tsx

@@ -3,7 +3,7 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import LoginScreen from "../screens/LoginScreen";
 import RegisterScreen from "../screens/RegisterScreen";
 
-export type AuthStackParamList = {
+type AuthStackParamList = {
   Login: undefined;
   Register: undefined;
 };

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

@@ -2,7 +2,7 @@ import React from "react";
 import { ActivityIndicator, View } from "react-native";
 import { useAuth } from "../context/AuthContext";
 import { AuthNavigator } from "./AuthNavigator";
-import { MainNavigator } from "./MainNavigator";
+import { AppStack } from "./AppStack";
 
 export function RootNavigator() {
   const { isLoading, isAuthenticated } = useAuth();
@@ -19,5 +19,5 @@ export function RootNavigator() {
     return <AuthNavigator />;
   }
 
-  return <MainNavigator />;
+  return <AppStack />;
 }

mobile/src/screens/AuthFormError.tsx

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import { View, Text } from "react-native";
+import { authStyles } from "./authStyles";
+
+export function AuthFormError({ message }: { message: string }): ReactNode {
+  return (
+    <View style={authStyles.errorBox}>
+      <Text style={authStyles.errorText}>{message}</Text>
+    </View>
+  );
+}

mobile/src/screens/BookDetailScreen.tsx

@@ -0,0 +1,226 @@
+import { useState, useEffect, useCallback, type ReactNode } from "react";
+import {
+  View,
+  Text,
+  Image,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+} from "react-native";
+import type { RouteProp } from "@react-navigation/native";
+import { ebooksApi } from "../api/ebooks";
+import { formatFileSize } from "@cloud-reader/shared";
+import type { EBookDetail } from "@cloud-reader/shared";
+import type { AppStackParamList } from "../types";
+
+type DetailRoute = RouteProp<AppStackParamList, "BookDetail">;
+
+export default function BookDetailScreen({
+  route,
+  navigation,
+}: {
+  route: DetailRoute;
+  navigation: any;
+}): ReactNode {
+  const { ebookId } = route.params;
+  const [book, setBook] = useState<EBookDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  const load = useCallback(async () => {
+    try {
+      const { data } = await ebooksApi.get(ebookId);
+      setBook(data);
+    } catch {
+      setError(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [ebookId]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (loading) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color="#4f8ef7" />
+      </View>
+    );
+  }
+
+  if (error || !book) {
+    return (
+      <View style={styles.centered}>
+        <Text style={styles.errorText}>Could not load this book.</Text>
+      </View>
+    );
+  }
+
+  const progressPct =
+    typeof book.progress?.current_position === "number"
+      ? Math.round(book.progress.current_position)
+      : 0;
+  const hasProgress = progressPct > 0;
+
+  return (
+    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        {book.cover_image ? (
+          <Image source={{ uri: book.cover_image }} style={styles.cover} />
+        ) : (
+          <View style={styles.cover}>
+            <Text style={styles.coverText}>
+              {book.title.charAt(0).toUpperCase()}
+            </Text>
+          </View>
+        )}
+        <Text style={styles.title}>{book.title}</Text>
+        <Text style={styles.author}>{book.author || "Unknown author"}</Text>
+      </View>
+
+      <View style={styles.metaRow}>
+        <MetaPill label="Format" value={book.format?.toUpperCase() || "—"} />
+        <MetaPill
+          label="Pages"
+          value={book.page_count ? String(book.page_count) : "—"}
+        />
+        <MetaPill label="Size" value={formatFileSize(book.file_size || 0)} />
+      </View>
+
+      {hasProgress && (
+        <View style={styles.progressWrap}>
+          <View style={styles.progressTrack}>
+            <View style={[styles.progressFill, { width: `${progressPct}%` }]} />
+          </View>
+          <Text style={styles.progressLabel}>{progressPct}% read</Text>
+        </View>
+      )}
+
+      <TouchableOpacity
+        style={styles.readButton}
+        onPress={() => navigation.navigate("Reader", { ebookId: book.id })}
+      >
+        <Text style={styles.readButtonText}>
+          {hasProgress ? "Resume reading" : "Start reading"}
+        </Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+}
+
+function MetaPill({ label, value }: { label: string; value: string }): ReactNode {
+  return (
+    <View style={styles.metaPill}>
+      <Text style={styles.metaValue}>{value}</Text>
+      <Text style={styles.metaLabel}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#0f0f23",
+  },
+  content: {
+    padding: 24,
+  },
+  centered: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#0f0f23",
+    padding: 24,
+  },
+  header: {
+    alignItems: "center",
+    marginBottom: 24,
+  },
+  cover: {
+    width: 140,
+    height: 200,
+    borderRadius: 12,
+    backgroundColor: "#2a2a4e",
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  coverText: {
+    fontSize: 56,
+    fontWeight: "bold",
+    color: "#4f8ef7",
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "700",
+    color: "#fff",
+    textAlign: "center",
+    marginBottom: 6,
+  },
+  author: {
+    fontSize: 15,
+    color: "#888",
+    textAlign: "center",
+  },
+  metaRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 24,
+  },
+  metaPill: {
+    flex: 1,
+    backgroundColor: "#1a1a2e",
+    borderRadius: 10,
+    paddingVertical: 12,
+    marginHorizontal: 4,
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: "#333",
+  },
+  metaValue: {
+    fontSize: 15,
+    fontWeight: "600",
+    color: "#fff",
+  },
+  metaLabel: {
+    fontSize: 12,
+    color: "#666",
+    marginTop: 2,
+  },
+  progressWrap: {
+    marginBottom: 24,
+  },
+  progressTrack: {
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: "#1a1a2e",
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    backgroundColor: "#4f8ef7",
+  },
+  progressLabel: {
+    fontSize: 12,
+    color: "#888",
+    marginTop: 6,
+  },
+  readButton: {
+    backgroundColor: "#4f8ef7",
+    borderRadius: 10,
+    paddingVertical: 16,
+    alignItems: "center",
+  },
+  readButtonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  errorText: {
+    color: "#888",
+    fontSize: 15,
+  },
+});

mobile/src/screens/LibraryScreen.tsx

@@ -2,34 +2,31 @@ import { useState, useEffect, useCallback, type ReactNode } from "react";
 import {
   View,
   Text,
+  Image,
   FlatList,
   TouchableOpacity,
   StyleSheet,
   ActivityIndicator,
   RefreshControl,
 } from "react-native";
-import { fetchBooks } from "../api/books";
+import { ebooksApi } from "../api/ebooks";
-import type { Book, PaginatedResponse } from "@cloud-reader/shared";
+import type { EBookListItem } from "@cloud-reader/shared";
 
-export default function LibraryScreen({ navigation }: { navigation: any }): ReactNode {
+export default function LibraryScreen({
-  const [books, setBooks] = useState<Book[]>([]);
+  navigation,
+}: {
+  navigation: any;
+}): ReactNode {
+  const [books, setBooks] = useState<EBookListItem[]>([]);
   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) => {
+  const loadBooks = useCallback(async () => {
     try {
-      const data: PaginatedResponse<Book> = await fetchBooks(pageNum);
+      const { data } = await ebooksApi.list();
-      if (isRefresh) {
+      setBooks(data.results);
-        setBooks(data.results);
-      } else {
-        setBooks((prev) => [...prev, ...data.results]);
-      }
-      setHasMore(data.next !== null);
-      setPage(pageNum);
     } catch {
-      // Silent error for now
+      // Silent error for now; pull-to-refresh lets the user retry.
     } finally {
       setLoading(false);
       setRefreshing(false);
@@ -37,44 +34,49 @@ export default function LibraryScreen({ navigation }: { navigation: any }): Reac
   }, []);
 
   useEffect(() => {
-    loadBooks(1, true);
+    loadBooks();
   }, [loadBooks]);
 
   const onRefresh = () => {
     setRefreshing(true);
-    loadBooks(1, true);
+    loadBooks();
   };
 
-  const loadMore = () => {
+  const renderBook = ({ item }: { item: EBookListItem }) => {
-    if (hasMore && !loading) {
+    const progress =
-      loadBooks(page + 1);
+      typeof item.progress === "number"
-    }
+        ? Math.round(item.progress)
+        : null;
+    return (
+      <TouchableOpacity
+        style={styles.bookCard}
+        onPress={() => navigation.navigate("BookDetail", { ebookId: item.id })}
+      >
+        {item.cover_image ? (
+          <Image source={{ uri: item.cover_image }} style={styles.bookCover} />
+        ) : (
+          <View style={styles.bookCover}>
+            <Text style={styles.coverText}>
+              {item.title.charAt(0).toUpperCase()}
+            </Text>
+          </View>
+        )}
+        <View style={styles.bookInfo}>
+          <Text style={styles.bookTitle} numberOfLines={2}>
+            {item.title}
+          </Text>
+          <Text style={styles.bookAuthor} numberOfLines={1}>
+            {item.author || "Unknown author"}
+          </Text>
+          <Text style={styles.bookMeta}>
+            {item.format?.toUpperCase()}
+            {progress !== null ? ` · ${progress}% read` : ""}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
   };
 
-  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}>
@@ -88,9 +90,7 @@ export default function LibraryScreen({ navigation }: { navigation: any }): Reac
       <FlatList
         data={books}
         renderItem={renderBook}
-        keyExtractor={(item) => item.id}
+        keyExtractor={(item) => String(item.id)}
-        onEndReached={loadMore}
-        onEndReachedThreshold={0.5}
         contentContainerStyle={styles.list}
         refreshControl={
           <RefreshControl
@@ -103,7 +103,7 @@ export default function LibraryScreen({ navigation }: { navigation: any }): Reac
           <View style={styles.centered}>
             <Text style={styles.emptyText}>Your library is empty</Text>
             <Text style={styles.emptySubtext}>
-              Add books to get started
+              Upload books from the web app to get started
             </Text>
           </View>
         }
@@ -125,6 +125,7 @@ const styles = StyleSheet.create({
   },
   list: {
     padding: 16,
+    flexGrow: 1,
   },
   bookCard: {
     flexDirection: "row",
@@ -164,7 +165,7 @@ const styles = StyleSheet.create({
     color: "#888",
     marginBottom: 4,
   },
-  bookPages: {
+  bookMeta: {
     fontSize: 12,
     color: "#666",
   },
@@ -177,5 +178,6 @@ const styles = StyleSheet.create({
   emptySubtext: {
     fontSize: 14,
     color: "#666",
+    textAlign: "center",
   },
 });

mobile/src/screens/LoginScreen.tsx

@@ -4,29 +4,31 @@ import {
   Text,
   TextInput,
   TouchableOpacity,
-  StyleSheet,
   Alert,
   ActivityIndicator,
   KeyboardAvoidingView,
   Platform,
 } from "react-native";
 import { useAuth } from "../context/AuthContext";
-import { isValidEmail } from "@cloud-reader/shared";
+import { authStyles } from "./authStyles";
+import { AuthFormError } from "./AuthFormError";
+import { requireValidEmail } from "./authValidation";
 
-export default function LoginScreen({ navigation }: { navigation: any }): ReactNode {
+export default function LoginScreen({
-  const { state, login, clearError } = useAuth();
+  navigation,
+}: {
+  navigation: any;
+}): ReactNode {
+  const { login } = useAuth();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
 
   const handleLogin = async () => {
-    clearError();
+    setError(null);
 
-    if (!email.trim()) {
+    if (!requireValidEmail(email)) {
-      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) {
@@ -34,30 +36,29 @@ export default function LoginScreen({ navigation }: { navigation: any }): ReactN
       return;
     }
 
+    setSubmitting(true);
     try {
       await login(email.trim(), password);
     } catch {
-      // Error handled in context
+      setError("Invalid email or password.");
+    } finally {
+      setSubmitting(false);
     }
   };
 
   return (
     <KeyboardAvoidingView
-      style={styles.container}
+      style={authStyles.container}
       behavior={Platform.OS === "ios" ? "padding" : "height"}
     >
-      <View style={styles.inner}>
+      <View style={authStyles.inner}>
-        <Text style={styles.title}>Cloud Reader</Text>
+        <Text style={authStyles.title}>Cloud Reader</Text>
-        <Text style={styles.subtitle}>Sign in to your account</Text>
+        <Text style={authStyles.subtitle}>Sign in to your account</Text>
 
-        {state.error && (
+        {error ? <AuthFormError message={error} /> : null}
-          <View style={styles.errorBox}>
-            <Text style={styles.errorText}>{state.error}</Text>
-          </View>
-        )}
 
         <TextInput
-          style={styles.input}
+          style={authStyles.input}
           placeholder="Email"
           placeholderTextColor="#666"
           value={email}
@@ -68,7 +69,7 @@ export default function LoginScreen({ navigation }: { navigation: any }): ReactN
         />
 
         <TextInput
-          style={styles.input}
+          style={authStyles.input}
           placeholder="Password"
           placeholderTextColor="#666"
           value={password}
@@ -77,97 +78,24 @@ export default function LoginScreen({ navigation }: { navigation: any }): ReactN
         />
 
         <TouchableOpacity
-          style={[styles.button, state.isLoading && styles.buttonDisabled]}
+          style={[authStyles.button, submitting && authStyles.buttonDisabled]}
           onPress={handleLogin}
-          disabled={state.isLoading}
+          disabled={submitting}
         >
-          {state.isLoading ? (
+          {submitting ? (
             <ActivityIndicator color="#fff" />
           ) : (
-            <Text style={styles.buttonText}>Sign In</Text>
+            <Text style={authStyles.buttonText}>Sign In</Text>
           )}
         </TouchableOpacity>
 
         <TouchableOpacity onPress={() => navigation.navigate("Register")}>
-          <Text style={styles.linkText}>
+          <Text style={authStyles.linkText}>
             Don't have an account?{" "}
-            <Text style={styles.linkBold}>Sign Up</Text>
+            <Text style={authStyles.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/ReaderScreen.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useState, type ReactNode } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import type { RouteProp } from "@react-navigation/native";
+import type { EBookDetail } from "@cloud-reader/shared";
+import { ebooksApi } from "../api/ebooks";
+import { EpubReaderView } from "../components/reader/EpubReaderView";
+import type { AppStackParamList } from "../types";
+
+type ReaderRoute = RouteProp<AppStackParamList, "Reader">;
+
+export default function ReaderScreen({
+  route,
+  navigation,
+}: {
+  route: ReaderRoute;
+  navigation: any;
+}): ReactNode {
+  const { ebookId } = route.params;
+  const [book, setBook] = useState<EBookDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+    ebooksApi
+      .get(ebookId)
+      .then(({ data }) => {
+        if (active) setBook(data);
+      })
+      .catch(() => {
+        if (active) setError(true);
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, [ebookId]);
+
+  if (loading) {
+    return (
+      <View style={styles.centered}>
+        <ActivityIndicator size="large" color="#4f8ef7" />
+      </View>
+    );
+  }
+
+  if (error || !book) {
+    return (
+      <SafeAreaView style={styles.centered} edges={["top", "bottom"]}>
+        <Text style={styles.message}>Could not open this book.</Text>
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={() => navigation.goBack()}
+        >
+          <Text style={styles.backText}>Go back</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    );
+  }
+
+  const format = (book.format ?? "").toLowerCase();
+
+  if (format !== "epub") {
+    return (
+      <SafeAreaView style={styles.centered} edges={["top", "bottom"]}>
+        <Text style={styles.placeholderTitle}>PDF reading is coming soon</Text>
+        <Text style={styles.message}>
+          “{book.title}” is a {format.toUpperCase() || "non-EPUB"} file. PDF
+          reading isn&apos;t available on mobile yet — open it in the web reader
+          for now.
+        </Text>
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={() => navigation.goBack()}
+        >
+          <Text style={styles.backText}>Go back</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <EpubReaderView
+      book={book}
+      ebookId={ebookId}
+      onClose={() => navigation.goBack()}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  centered: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#0f0f23",
+    padding: 24,
+  },
+  placeholderTitle: {
+    fontSize: 20,
+    fontWeight: "700",
+    color: "#fff",
+    marginBottom: 12,
+    textAlign: "center",
+  },
+  message: {
+    fontSize: 15,
+    color: "#aaa",
+    textAlign: "center",
+    lineHeight: 22,
+  },
+  backButton: {
+    marginTop: 24,
+    backgroundColor: "#4f8ef7",
+    borderRadius: 10,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+  },
+  backText: {
+    color: "#fff",
+    fontSize: 15,
+    fontWeight: "600",
+  },
+});

mobile/src/screens/RegisterScreen.tsx

@@ -1,10 +1,8 @@
 import { useState, type ReactNode } from "react";
 import {
-  View,
   Text,
   TextInput,
   TouchableOpacity,
-  StyleSheet,
   Alert,
   ActivityIndicator,
   KeyboardAvoidingView,
@@ -12,40 +10,39 @@ import {
   ScrollView,
 } from "react-native";
 import { useAuth } from "../context/AuthContext";
-import {
+import { isStrongPassword } from "@cloud-reader/shared";
-  isValidEmail,
+import { authStyles } from "./authStyles";
-  validatePasswordStrength,
+import { AuthFormError } from "./AuthFormError";
-} from "@cloud-reader/shared";
+import { requireValidEmail } from "./authValidation";
 
 export default function RegisterScreen({
   navigation,
 }: {
   navigation: any;
 }): ReactNode {
-  const { state, register, clearError } = useAuth();
+  const { register } = useAuth();
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
 
   const handleRegister = async () => {
-    clearError();
+    setError(null);
 
     if (!username.trim()) {
       Alert.alert("Validation Error", "Please enter a username.");
       return;
     }
-    if (!email.trim()) {
+    if (!requireValidEmail(email)) {
-      Alert.alert("Validation Error", "Please enter your email.");
       return;
     }
-    if (!isValidEmail(email.trim())) {
+    if (!isStrongPassword(password)) {
-      Alert.alert("Validation Error", "Please enter a valid email address.");
+      Alert.alert(
-      return;
+        "Validation Error",
-    }
+        "Password must be at least 8 characters and include uppercase, lowercase, and a number.",
-    const passwordError = validatePasswordStrength(password);
+      );
-    if (passwordError) {
-      Alert.alert("Validation Error", passwordError);
       return;
     }
     if (password !== confirmPassword) {
@@ -53,30 +50,29 @@ export default function RegisterScreen({
       return;
     }
 
+    setSubmitting(true);
     try {
-      await register(email.trim(), password, username.trim());
+      await register(email.trim(), username.trim(), password);
     } catch {
-      // Error handled in context
+      setError("Could not create the account. Try a different email.");
+    } finally {
+      setSubmitting(false);
     }
   };
 
   return (
     <KeyboardAvoidingView
-      style={styles.container}
+      style={authStyles.container}
       behavior={Platform.OS === "ios" ? "padding" : "height"}
     >
-      <ScrollView contentContainerStyle={styles.inner}>
+      <ScrollView contentContainerStyle={authStyles.innerScroll}>
-        <Text style={styles.title}>Create Account</Text>
+        <Text style={authStyles.titleCompact}>Create Account</Text>
-        <Text style={styles.subtitle}>Join Cloud Reader</Text>
+        <Text style={authStyles.subtitle}>Join Cloud Reader</Text>
 
-        {state.error && (
+        {error ? <AuthFormError message={error} /> : null}
-          <View style={styles.errorBox}>
-            <Text style={styles.errorText}>{state.error}</Text>
-          </View>
-        )}
 
         <TextInput
-          style={styles.input}
+          style={authStyles.input}
           placeholder="Username"
           placeholderTextColor="#666"
           value={username}
@@ -86,7 +82,7 @@ export default function RegisterScreen({
         />
 
         <TextInput
-          style={styles.input}
+          style={authStyles.input}
           placeholder="Email"
           placeholderTextColor="#666"
           value={email}
@@ -97,7 +93,7 @@ export default function RegisterScreen({
         />
 
         <TextInput
-          style={styles.input}
+          style={authStyles.input}
           placeholder="Password"
           placeholderTextColor="#666"
           value={password}
@@ -106,7 +102,7 @@ export default function RegisterScreen({
         />
 
         <TextInput
-          style={styles.input}
+          style={authStyles.input}
           placeholder="Confirm Password"
           placeholderTextColor="#666"
           value={confirmPassword}
@@ -115,98 +111,24 @@ export default function RegisterScreen({
         />
 
         <TouchableOpacity
-          style={[styles.button, state.isLoading && styles.buttonDisabled]}
+          style={[authStyles.button, submitting && authStyles.buttonDisabled]}
           onPress={handleRegister}
-          disabled={state.isLoading}
+          disabled={submitting}
         >
-          {state.isLoading ? (
+          {submitting ? (
             <ActivityIndicator color="#fff" />
           ) : (
-            <Text style={styles.buttonText}>Create Account</Text>
+            <Text style={authStyles.buttonText}>Create Account</Text>
           )}
         </TouchableOpacity>
 
         <TouchableOpacity onPress={() => navigation.goBack()}>
-          <Text style={styles.linkText}>
+          <Text style={authStyles.linkText}>
             Already have an account?{" "}
-            <Text style={styles.linkBold}>Sign In</Text>
+            <Text style={authStyles.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/SettingsScreen.tsx

@@ -9,7 +9,7 @@ import {
 import { useAuth } from "../context/AuthContext";
 
 export default function SettingsScreen(): ReactNode {
-  const { state, logout } = useAuth();
+  const { user, logout } = useAuth();
 
   const handleLogout = () => {
     Alert.alert("Logout", "Are you sure you want to sign out?", [
@@ -24,11 +24,11 @@ export default function SettingsScreen(): ReactNode {
         <Text style={styles.sectionTitle}>Account</Text>
         <View style={styles.infoRow}>
           <Text style={styles.label}>Username</Text>
-          <Text style={styles.value}>{state.user?.username ?? "—"}</Text>
+          <Text style={styles.value}>{user?.username ?? "—"}</Text>
         </View>
         <View style={styles.infoRow}>
           <Text style={styles.label}>Email</Text>
-          <Text style={styles.value}>{state.user?.email ?? "—"}</Text>
+          <Text style={styles.value}>{user?.email ?? "—"}</Text>
         </View>
       </View>
 

mobile/src/screens/authStyles.ts

@@ -0,0 +1,88 @@
+import { StyleSheet } from "react-native";
+
+/** Shared layout/styles for Login and Register screens. */
+export const authStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#0f0f23",
+  },
+  inner: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: 24,
+  },
+  innerScroll: {
+    flexGrow: 1,
+    justifyContent: "center",
+    paddingHorizontal: 24,
+    paddingVertical: 48,
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "bold",
+    color: "#fff",
+    textAlign: "center",
+    marginBottom: 8,
+  },
+  titleCompact: {
+    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/authValidation.ts

@@ -0,0 +1,15 @@
+import { Alert } from "react-native";
+import { isValidEmail } from "@cloud-reader/shared";
+
+/** Returns true when email is non-empty and well-formed. */
+export function requireValidEmail(email: string): boolean {
+  if (!email.trim()) {
+    Alert.alert("Validation Error", "Please enter your email.");
+    return false;
+  }
+  if (!isValidEmail(email.trim())) {
+    Alert.alert("Validation Error", "Please enter a valid email address.");
+    return false;
+  }
+  return true;
+}

mobile/src/types/index.ts

@@ -1,8 +1,37 @@
 // Mobile-specific type aliases and extensions not covered by shared types
 
-export type RootStackParamList = {
+import type { NavigatorScreenParams } from "@react-navigation/native";
-  Auth: undefined;
+import type { MainTabParamList } from "../navigation/MainNavigator";
-  Main: undefined;
+
-  BookReader: { bookId: number };
+/** Stack hosted above the bottom tabs once the user is authenticated. */
-  BookDetail: { bookId: number };
+export type AppStackParamList = {
+  Tabs: NavigatorScreenParams<MainTabParamList> | undefined;
+  BookDetail: { ebookId: number };
+  Reader: { ebookId: number };
 };
+
+/** EPUB bookmark/highlight, mirrors frontend/src/types Bookmark. */
+export interface Bookmark {
+  id: string;
+  ebook: number;
+  ebook_title: string;
+  epub_cfi: string;
+  chapter_index: number;
+  chapter_title: string;
+  page: number;
+  location_text: string;
+  content: string;
+  highlight_color?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateMarkerPayload {
+  ebook: number;
+  epub_cfi: string;
+  chapter_index: number;
+  chapter_title?: string;
+  location_text?: string;
+  content?: string;
+  highlight_color?: string;
+}

mobile/src/types/reader.ts

@@ -0,0 +1,32 @@
+/**
+ * Reader module types for the mobile app. Mirrors
+ * frontend/src/types/reader.ts so settings and progress behave the same
+ * way across web and mobile.
+ */
+
+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 interface ReadingProgress {
+  id: number;
+  book: number;
+  current_chapter: number;
+  current_position: number;
+  percentage: number;
+  epub_location: string;
+  updated_at: string;
+}

mobile/src/utils/epubTheme.ts

@@ -0,0 +1,66 @@
+import type { ReadingSettings, ThemePreset } from "../types/reader";
+
+/** CSS font stacks per family, mirrors frontend/src/utils/epubRendition.ts. */
+export const FONT_STACKS: Record<ReadingSettings["font_family"], string> = {
+  serif: 'Georgia, "Times New Roman", serif',
+  "sans-serif":
+    'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  monospace: 'ui-monospace, "Cascadia Code", monospace',
+};
+
+/** Background/text/chrome colors for each reader theme preset. */
+export const THEME_PALETTES: Record<
+  ThemePreset,
+  { background: string; text: string; chrome: string }
+> = {
+  light: { background: "#ffffff", text: "#1a1a1a", chrome: "#f2f2f2" },
+  dark: { background: "#121212", text: "#e0e0e0", chrome: "#1c1c1e" },
+  sepia: { background: "#f4ecd8", text: "#5b4636", chrome: "#e8ddc4" },
+  paper: { background: "#fbfbf8", text: "#2b2b2b", chrome: "#efefe9" },
+};
+
+export function resolvePalette(settings: ReadingSettings) {
+  const preset = THEME_PALETTES[settings.theme] ?? THEME_PALETTES.light;
+  return {
+    background: settings.background_color || preset.background,
+    text: settings.text_color || preset.text,
+    chrome: preset.chrome,
+  };
+}
+
+/**
+ * Build an epub.js theme object (selector -> CSS rules) from reader settings.
+ * Used with the epubjs-react-native `changeTheme` method.
+ */
+export function buildEpubTheme(
+  settings: ReadingSettings,
+): Record<string, Record<string, string>> {
+  const { background, text } = resolvePalette(settings);
+  const fontStack = FONT_STACKS[settings.font_family] ?? FONT_STACKS.serif;
+  const lineHeight = `${settings.line_height} !important`;
+  const fontFamily = `${fontStack} !important`;
+  const color = `${text} !important`;
+
+  return {
+    body: {
+      background: `${background} !important`,
+      color,
+      "font-family": fontFamily,
+      "line-height": lineHeight,
+    },
+    p: {
+      color,
+      "font-family": fontFamily,
+      "line-height": lineHeight,
+    },
+    li: { color, "font-family": fontFamily, "line-height": lineHeight },
+    span: { color },
+    a: { color },
+    h1: { color },
+    h2: { color },
+    h3: { color },
+    h4: { color },
+    h5: { color },
+    h6: { color },
+  };
+}

mobile/tsconfig.json

@@ -12,7 +12,8 @@
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "@cloud-reader/shared": ["../packages/shared/src/index.ts"]
     }
   },
   "include": ["**/*.ts", "**/*.tsx"],

packages/shared/src/types.ts

@@ -216,3 +216,99 @@ export interface ApiError {
   detail?: string;
   [key: string]: unknown;
 }
+
+// ---- Groups ----
+
+export type GroupRole = "admin" | "member";
+
+export type JoinRequestStatus = "pending" | "approved" | "rejected";
+
+export interface GroupListItem {
+  id: number;
+  name: string;
+  description: string;
+  created_by: number;
+  member_count: number;
+  user_role: GroupRole | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface GroupMember {
+  id: number;
+  user_id: number;
+  user_email: string;
+  user_username: string;
+  role: GroupRole;
+  joined_at: string;
+}
+
+export interface GroupDetail {
+  id: number;
+  name: string;
+  description: string;
+  created_by: number;
+  created_by_email: string;
+  created_by_username: string;
+  members: GroupMember[];
+  member_count: number;
+  user_role: GroupRole | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CreateGroupPayload {
+  name: string;
+  description?: string;
+}
+
+export interface UpdateGroupPayload {
+  name?: string;
+  description?: string;
+}
+
+export interface GroupInvite {
+  id: number;
+  group: number;
+  group_name: string;
+  code: string;
+  created_by: number;
+  created_by_email: string;
+  max_uses: number;
+  use_count: number;
+  is_active: boolean;
+  join_url: string;
+  created_at: string;
+}
+
+export interface CreateInvitePayload {
+  max_uses?: number;
+}
+
+export interface JoinRequest {
+  id: number;
+  group: number;
+  group_name: string;
+  user: number;
+  user_id: number;
+  user_email: string;
+  user_username: string;
+  invite: number | null;
+  invite_code: string | null;
+  status: JoinRequestStatus;
+  created_at: string;
+}
+
+export interface InviteValidation {
+  group: {
+    id: number;
+    name: string;
+    description: string;
+    created_by_email: string;
+    member_count: number;
+  };
+  invite: {
+    code: string;
+    created_by_email: string;
+  };
+}

packages/shared/src/utils.ts

@@ -114,4 +114,18 @@ export const API_ENDPOINTS = {
     bookmarkDetail: (id: string) => `/api/annotations/bookmarks/${id}/`,
     noteDetail: (id: string) => `/api/annotations/notes/${id}/`,
   },
+  groups: {
+    list: "/api/groups/",
+    detail: (id: number) => `/api/groups/${id}/`,
+    members: (id: number) => `/api/groups/${id}/members/`,
+    removeMember: (id: number, userId: number) => `/api/groups/${id}/members/${userId}/`,
+    updateRole: (id: number, userId: number) => `/api/groups/${id}/members/${userId}/role/`,
+    leave: (id: number) => `/api/groups/${id}/leave/`,
+    invites: (id: number) => `/api/groups/${id}/invites/`,
+    revokeInvite: (id: number, inviteId: number) => `/api/groups/${id}/invites/${inviteId}/`,
+    requests: (id: number) => `/api/groups/${id}/requests/`,
+    approveRequest: (id: number, requestId: number) => `/api/groups/${id}/requests/${requestId}/approve/`,
+    rejectRequest: (id: number, requestId: number) => `/api/groups/${id}/requests/${requestId}/reject/`,
+    join: (code: string) => `/api/join/${code}/`,
+  },
 } as const;