@itsmrtr/bunkoshelf 1.10.1 → 1.10.3

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itsmrtr/bunkoshelf",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "description": "Self-hosted personal manga library.",
   "keywords": [
     "bunko",

package/dist/src/actions/books-rating.ts

@@ -0,0 +1,25 @@
+"use server";
+
+import { verifySession } from "@/lib/auth/verifySession";
+import { upsertBookProgress } from "@/lib/db/books/reading";
+
+interface UpdateBookRatingParams {
+  volumeId: string | null | undefined;
+  rating: number | null;
+}
+
+export async function updateBookRating({ volumeId, rating }: UpdateBookRatingParams) {
+  const user = await verifySession();
+  if (!user) return { error: "Unauthorized", status: 401 };
+  if (!volumeId) return { error: "Invalid payload", status: 400 };
+
+  const normalizedRating = rating === null ? null : Math.round(Number(rating) * 2) / 2;
+  if (normalizedRating !== null && (
+    Number.isNaN(normalizedRating) || normalizedRating < 0 || normalizedRating > 10
+  )) {
+    return { error: "Invalid rating", status: 400 };
+  }
+
+  await upsertBookProgress(user.id, volumeId, { personalRating: normalizedRating });
+  return { success: true, status: 200 };
+}

package/dist/src/actions/books-reading-history.ts

@@ -0,0 +1,70 @@
+"use server";
+
+import { verifySession } from "@/lib/auth/verifySession";
+import {
+  createBookReadingEntryRecord,
+  deleteBookReadingEntryRecord,
+  findBookProgress,
+  findBookReadingEntryById,
+  findOldestBookReadingEntryDate,
+  updateBookReadingEntryRecord,
+  upsertBookProgress,
+} from "@/lib/db/books/reading";
+import { ensureDailyReadingLog } from "@/lib/db/reading";
+
+function isDate(value: string): boolean {
+  return /^\d{4}-\d{2}-\d{2}$/.test(value);
+}
+
+async function syncBookReadState(userId: string, volumeId: string) {
+  const oldestEntry = await findOldestBookReadingEntryDate(userId, volumeId);
+  const progress = await findBookProgress(userId, volumeId);
+
+  await upsertBookProgress(userId, volumeId, {
+    isRead: Boolean(oldestEntry),
+    progression: oldestEntry ? 1 : 0,
+    lastReadAt: oldestEntry ? progress?.lastReadAt ?? null : null,
+    skipReadingEntry: true,
+  });
+}
+
+export async function createBookReadingEntry({ volumeId, readAt }: { volumeId: string; readAt: string }) {
+  const user = await verifySession();
+  if (!user) return { success: false as const, error: "Unauthorized" };
+  if (!volumeId || !isDate(readAt)) return { success: false as const, error: "Invalid payload" };
+
+  const entry = await createBookReadingEntryRecord(user.id, volumeId, readAt);
+  await ensureDailyReadingLog(user.id, readAt);
+  await syncBookReadState(user.id, volumeId);
+
+  return { success: true as const, entry };
+}
+
+export async function updateBookReadingEntry({ entryId, readAt }: { entryId: string; readAt: string }) {
+  const user = await verifySession();
+  if (!user) return { success: false as const, error: "Unauthorized" };
+  if (!entryId || !isDate(readAt)) return { success: false as const, error: "Invalid payload" };
+
+  const existing = await findBookReadingEntryById(entryId);
+  if (!existing || existing.userId !== user.id) return { success: false as const, error: "Not found" };
+
+  const entry = await updateBookReadingEntryRecord(entryId, readAt);
+  await ensureDailyReadingLog(user.id, readAt);
+  await syncBookReadState(user.id, existing.volumeId);
+
+  return { success: true as const, entry };
+}
+
+export async function deleteBookReadingEntry({ entryId }: { entryId: string }) {
+  const user = await verifySession();
+  if (!user) return { success: false as const, error: "Unauthorized" };
+  if (!entryId) return { success: false as const, error: "Invalid payload" };
+
+  const existing = await findBookReadingEntryById(entryId);
+  if (!existing || existing.userId !== user.id) return { success: false as const, error: "Not found" };
+
+  await deleteBookReadingEntryRecord(entryId);
+  await syncBookReadState(user.id, existing.volumeId);
+
+  return { success: true as const };
+}

package/dist/src/actions/books-series-status.ts

@@ -0,0 +1,47 @@
+"use server";
+
+import { verifySession } from "@/lib/auth/verifySession";
+import { queryOne } from "@/lib/db/query";
+
+interface SeriesStatusParams {
+  seriesId: string | null | undefined;
+}
+
+interface UpdateBookSeriesStatusParams extends SeriesStatusParams {
+  status: string;
+}
+
+const ALLOWED_STATUSES = new Set(["ONGOING", "FINISHED", "HIATUS", "CANCELLED"]);
+
+export async function getBookSeriesStatus({ seriesId }: SeriesStatusParams) {
+  const user = await verifySession();
+  if (!user) return { error: "Unauthorized", status: 401 };
+  if (!seriesId) return { error: "Invalid series", status: 400 };
+
+  const series = await queryOne<{ status: string | null }>(
+    "SELECT status FROM book_series WHERE id = $1 LIMIT 1",
+    [seriesId],
+  );
+  if (!series) return { error: "Not found", status: 404 };
+
+  return { status: series.status ?? "FINISHED" };
+}
+
+export async function updateBookSeriesStatus({ seriesId, status }: UpdateBookSeriesStatusParams) {
+  const user = await verifySession();
+  if (!user) return { error: "Unauthorized", status: 401 };
+  if (!seriesId || !ALLOWED_STATUSES.has(status)) {
+    return { error: "Invalid payload", status: 400 };
+  }
+
+  const series = await queryOne<{ status: string }>(
+    `UPDATE book_series
+     SET status = $2, updated_at = NOW()
+     WHERE id = $1
+     RETURNING status`,
+    [seriesId, status],
+  );
+  if (!series) return { error: "Not found", status: 404 };
+
+  return { status: series.status, statusCode: 200 };
+}

package/dist/src/app/[lang]/books/[series]/page.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import { listBookProgressByIds, listBookVolumes } from "@/lib/db/books/library";
-import { findBookSeriesFavorite } from "@/lib/db/books/reading";
+import { findBookSeriesFavorite, listBookRatings } from "@/lib/db/books/reading";
 import { verifySession } from "@/lib/auth/verifySession";
 import BookSeriesContent from "@/components/library/books/BookSeriesContent";
 import { getDictionary } from "@/lib/i18n/Dictionary";
@@ -17,11 +17,18 @@ async function BookSeriesPageContent({ params }: { params: Promise<{ lang: strin
   const user = await verifySession();
   const books = await listBookVolumes({ seriesSlug: series });
   if (!books.length) notFound();
-  const [progressById, isFavorite] = user ? await Promise.all([
+  const [progressById, isFavorite, personalRatings] = user ? await Promise.all([
     listBookProgressByIds(user.id, books.map((book) => book.id)),
     findBookSeriesFavorite(user.id, books[0].series.id),
-  ]) : [{}, false] as const;
-  return <BookSeriesContent volumes={books} lang={lang as Locale} intl={intl} progressById={progressById} isFavorite={isFavorite} isAdmin={user?.isAdmin === true} />;
+    listBookRatings(user.id, books.map((book) => book.id)),
+  ]) : [{}, false, new Map<string, number>()] as const;
+  const ratings = books
+    .map((book) => personalRatings.get(book.id))
+    .filter((rating): rating is number => rating !== undefined);
+  const averageRating = ratings.length
+    ? Math.round((ratings.reduce((sum, rating) => sum + rating, 0) / ratings.length) * 2) / 2
+    : null;
+  return <BookSeriesContent volumes={books} lang={lang as Locale} intl={intl} progressById={progressById} isFavorite={isFavorite} averageRating={averageRating} isAdmin={user?.isAdmin === true} />;
 }
 
 export default function BookSeriesPage(props: { params: Promise<{ lang: string; series: string }> }) {

package/dist/src/app/[lang]/books/volume/[slug]/page.tsx

@@ -2,7 +2,7 @@ import { Suspense } from "react";
 import { notFound } from "next/navigation";
 import { findBookVolumeBySlug } from "@/lib/db/books/library";
 import { verifySession } from "@/lib/auth/verifySession";
-import { listBookReadingEntries } from "@/lib/db/books/reading";
+import { findBookProgress, listBookReadingEntries } from "@/lib/db/books/reading";
 import BookVolumeContent from "@/components/library/books/BookVolumeContent";
 import { getDictionary } from "@/lib/i18n/Dictionary";
 import type { Locale } from "@/lib/types";
@@ -17,8 +17,13 @@ async function BookVolumePageContent({ params }: { params: Promise<{ lang: strin
   const volume = await findBookVolumeBySlug(slug);
   if (!volume) notFound();
   const intl = await getDictionary(lang as Locale);
-  const readingEntries = user ? await listBookReadingEntries(user.id, volume.id) : [];
-  return <BookVolumeContent volume={volume} lang={lang as Locale} intl={intl} readingEntries={readingEntries} isAdmin={user?.isAdmin === true} />;
+  const [readingEntries, progress]: [Awaited<ReturnType<typeof listBookReadingEntries>>, Awaited<ReturnType<typeof findBookProgress>>] = user
+    ? await Promise.all([
+      listBookReadingEntries(user.id, volume.id),
+      findBookProgress(user.id, volume.id),
+    ])
+    : [[], null];
+  return <BookVolumeContent volume={volume} lang={lang as Locale} intl={intl} readingEntries={readingEntries} personalRating={progress?.personalRating ?? null} isAdmin={user?.isAdmin === true} />;
 }
 
 export default function BookVolumePage(props: { params: Promise<{ lang: string; slug: string }> }) {

package/dist/src/components/library/books/BookReadingEntryForm.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useState, type FormEvent } from "react";
+import { PenLineIcon } from "lucide-react";
+import Modal from "@/components/ui/Modal";
+import { useAlertDialog } from "@/components/AlertDialogProvider";
+import {
+  createBookReadingEntry,
+  deleteBookReadingEntry,
+  updateBookReadingEntry,
+} from "@/actions/books-reading-history";
+import type { Dictionary } from "@/lib/types";
+
+interface BookReadingEntry {
+  id: string;
+  readAt: string;
+}
+
+interface BookReadingEntryFormProps {
+  isOpen: boolean;
+  onClose: () => void;
+  volumeId: string;
+  entry: BookReadingEntry | null;
+  intl: Dictionary;
+}
+
+export default function BookReadingEntryForm({
+  isOpen,
+  onClose,
+  volumeId,
+  entry,
+  intl,
+}: BookReadingEntryFormProps) {
+  const books = intl.books as Record<string, string>;
+  const [readAt, setReadAt] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { confirm } = useAlertDialog()!;
+  const isEdit = Boolean(entry);
+
+  useEffect(() => {
+    if (isOpen) setReadAt(entry?.readAt ?? "");
+  }, [entry, isOpen]);
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!readAt) return;
+
+    setIsLoading(true);
+    const result = isEdit
+      ? await updateBookReadingEntry({ entryId: entry!.id, readAt })
+      : await createBookReadingEntry({ volumeId, readAt });
+    setIsLoading(false);
+
+    if (result.success) window.location.reload();
+  };
+
+  const handleDelete = async () => {
+    const confirmed = await confirm({
+      title: books.deleteReadingEntry,
+      description: (intl.alerts?.confirmDelete as string) || "Are you sure?",
+      destructive: true,
+      irreversible: true,
+    });
+    if (!confirmed) return;
+
+    setIsLoading(true);
+    const result = await deleteBookReadingEntry({ entryId: entry!.id });
+    setIsLoading(false);
+
+    if (result.success) window.location.reload();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <h2 className="mb-6 flex items-center">
+        <PenLineIcon size={24} className="mr-2" />
+        {isEdit ? books.editEntry : books.addEntry}
+      </h2>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="mb-1 block text-sm uppercase">{books.date}</label>
+          <input
+            type="date"
+            value={readAt}
+            onChange={(event) => setReadAt(event.target.value)}
+            className="w-full rounded-lg border border-onix bg-pearl px-5 py-3"
+            required
+          />
+        </div>
+
+        <div className="flex gap-3">
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="cursor-pointer rounded-lg border border-sand bg-sand px-8 py-4 font-bold leading-none uppercase text-onix transition-all duration-300 hover:border-onix hover:bg-onix hover:text-sand disabled:opacity-50"
+          >
+            {books.save}
+          </button>
+
+          {isEdit && (
+            <button
+              type="button"
+              onClick={handleDelete}
+              disabled={isLoading}
+              className="cursor-pointer rounded-lg border border-red-700 bg-red-700 px-8 py-4 font-bold leading-none uppercase text-sand transition-all duration-300 hover:bg-red-800 disabled:opacity-50"
+            >
+              {books.deleteEntry}
+            </button>
+          )}
+        </div>
+      </form>
+    </Modal>
+  );
+}

package/dist/src/components/library/books/BookReadingHistory.tsx

@@ -1,25 +1,73 @@
-import { BookOpenCheckIcon, RepeatIcon } from "lucide-react";
+"use client";
+
+import { useState } from "react";
+import { BookOpenCheckIcon, PlusIcon, RepeatIcon } from "lucide-react";
 import type { BookReadingEntry } from "@/lib/db/books/reading";
 import type { Dictionary } from "@/lib/types";
+import BookReadingEntryForm from "./BookReadingEntryForm";
+
+interface BookReadingHistoryProps {
+  volumeId: string;
+  entries: BookReadingEntry[];
+  intl: Dictionary;
+}
 
-export default function BookReadingHistory({ entries, intl }: { entries: BookReadingEntry[]; intl: Dictionary }) {
+export default function BookReadingHistory({ volumeId, entries, intl }: BookReadingHistoryProps) {
   const books = intl.books as Record<string, string>;
+  const [isOpen, setIsOpen] = useState(false);
+  const [editingEntry, setEditingEntry] = useState<BookReadingEntry | null>(null);
+
+  const openAdd = () => {
+    setEditingEntry(null);
+    setIsOpen(true);
+  };
 
-  if (entries.length === 0) return <p className="text-neutral-500">{books.noReadingEntries}</p>;
-
-  return <div className="relative">
-    {entries.map((entry, index) => {
-      const reread = index < entries.length - 1;
-      return <div key={entry.id} className="relative pb-4 last:pb-0">
-        <div className="inline-flex items-start gap-4">
-          {reread ? <RepeatIcon size={20} className="text-lilah" /> : <BookOpenCheckIcon size={20} className="text-lilah" />}
-          <div className="flex flex-col">
-            <span className="leading-none text-sand">{reread ? books.reread : books.firstRead}</span>
-            <span className="mt-1 text-sm text-neutral-500">{entry.readAt}</span>
-          </div>
+  const openEdit = (entry: BookReadingEntry) => {
+    setEditingEntry(entry);
+    setIsOpen(true);
+  };
+
+  return (
+    <div>
+      <button
+        onClick={openAdd}
+        className="mb-4 flex cursor-pointer items-center gap-1 text-sm uppercase text-lilah transition-colors duration-300 hover:text-sand"
+      >
+        <PlusIcon size={18} />
+        {books.addEntry}
+      </button>
+
+      {entries.length === 0 ? (
+        <p className="text-neutral-500">{books.noReadingEntries}</p>
+      ) : (
+        <div className="relative">
+          {entries.map((entry, index) => {
+            const reread = index < entries.length - 1;
+            return <div key={entry.id} className="relative pb-4 last:pb-0">
+              <button
+                type="button"
+                onClick={() => openEdit(entry)}
+                className="group inline-flex cursor-pointer items-start gap-4 text-left"
+              >
+                {reread ? <RepeatIcon size={20} className="text-lilah transition-colors duration-300 group-hover:text-sand" /> : <BookOpenCheckIcon size={20} className="text-lilah transition-colors duration-300 group-hover:text-sand" />}
+                <span className="flex flex-col">
+                  <span className="leading-none text-sand">{reread ? books.reread : books.firstRead}</span>
+                  <span className="mt-1 text-sm text-neutral-500">{entry.readAt}</span>
+                </span>
+              </button>
+              {index < entries.length - 1 && <div className="absolute bottom-[4px] left-[9px] top-[24px] w-[2px] bg-lilah" />}
+            </div>;
+          })}
         </div>
-        {index < entries.length - 1 && <div className="absolute bottom-[4px] left-[9px] top-[24px] w-[2px] bg-lilah" />}
-      </div>;
-    })}
-  </div>;
+      )}
+
+      <BookReadingEntryForm
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        volumeId={volumeId}
+        entry={editingEntry}
+        intl={intl}
+      />
+    </div>
+  );
 }

package/dist/src/components/library/books/BookSeriesContent.tsx

@@ -2,12 +2,14 @@ import Image from "next/image";
 import MangaCard from "@/components/ui/MangaCard";
 import Separator from "@/components/ui/Separator";
 import BookSeriesFavoriteButton from "./BookSeriesFavoriteButton";
+import BookSeriesStatusSelect from "./BookSeriesStatusSelect";
+import BookSeriesRating from "./BookSeriesRating";
 import BookMetadataPanel from "./BookMetadataPanel";
 import BookMetadataBadges from "./BookMetadataBadges";
 import BookAdminActions from "./BookAdminActions";
 import BookSummary from "./BookSummary";
 import { getBookCoverUrl } from "@/lib/books/cover";
-import { getBookPublicationYear, toPlainBookText } from "@/lib/books/metadata";
+import { getBookAgeMinimum, getBookPublicationYear, normalizeBookAgeRating, toPlainBookText, type BookAgeRating } from "@/lib/books/metadata";
 import { getBookProgressRatio } from "@/lib/books/readingProgress";
 import type { BookVolume } from "@/lib/db/books/library";
 import type { Dictionary, Locale } from "@/lib/types";
@@ -18,15 +20,22 @@ interface BookSeriesContentProps {
   intl: Dictionary;
   progressById: Record<string, { isRead: boolean; progression: number | null }>;
   isFavorite: boolean;
+  averageRating: number | null;
   isAdmin: boolean;
 }
 
-export default function BookSeriesContent({ volumes, lang, intl, progressById, isFavorite, isAdmin }: BookSeriesContentProps) {
+export default function BookSeriesContent({ volumes, lang, intl, progressById, isFavorite, averageRating, isAdmin }: BookSeriesContentProps) {
   const books = intl.books as Record<string, string>;
   const firstVolume = volumes[0];
   const coverImage = getBookCoverUrl(firstVolume.slug, firstVolume.metadata.coverPath);
   const meta = firstVolume.metadata;
   const description = toPlainBookText(meta.description);
+  const ageRating = volumes.reduce<BookAgeRating | null>((highest, volume) => {
+    const current = normalizeBookAgeRating(volume.metadata.ageRating);
+    if (!current) return highest;
+    if (!highest || getBookAgeMinimum(current)! > getBookAgeMinimum(highest)!) return current;
+    return highest;
+  }, null);
 
   return (
     <div className="p-4">
@@ -42,8 +51,14 @@ export default function BookSeriesContent({ volumes, lang, intl, progressById, i
         </div>
         <div className="w-full md:w-7/12 2xl:w-2/3 2xl:pl-4">
           <h1 className="text-2xl leading-11 md:text-3xl md:leading-14">{firstVolume.series.title}</h1>
-          <BookSeriesFavoriteButton seriesId={firstVolume.series.id} initialFavorite={isFavorite} intl={intl} />
-          <BookMetadataBadges metadata={meta} intl={intl} />
+          <div className="mt-4 flex flex-row gap-2">
+            <BookSeriesStatusSelect seriesId={firstVolume.series.id} intl={intl} />
+            <BookSeriesFavoriteButton seriesId={firstVolume.series.id} initialFavorite={isFavorite} intl={intl} />
+          </div>
+          <div className="mt-8">
+            <BookSeriesRating rating={averageRating} />
+          </div>
+          <BookMetadataBadges metadata={{ ...meta, ageRating }} intl={intl} />
           <p className="mt-4">{getBookPublicationYear(meta.publishedAt ?? meta.modifiedAt)} &bull; {volumes.length} {books.books}</p>
           {description && (
             <>

package/dist/src/components/library/books/BookSeriesFavoriteButton.tsx

@@ -35,19 +35,17 @@ export default function BookSeriesFavoriteButton({ seriesId, initialFavorite, in
   const label = isFavorite ? books.removeFavorite : books.addFavorite;
 
   return (
-    <div className="mt-4 flex flex-row gap-2">
-      <button
-        onClick={toggleFavorite}
-        disabled={isLoading}
-        title={label}
-        aria-label={label}
-        className={clsx(
-          "cursor-pointer rounded-lg border p-3 leading-none transition-all duration-300 2xl:p-4",
-          isFavorite ? "border-sand bg-sand text-onix hover:border-pearl hover:bg-pearl" : "border-blackamber bg-blackamber text-sand hover:border-pearl hover:bg-pearl hover:text-onix",
-        )}
-      >
-        {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
-      </button>
-    </div>
+    <button
+      onClick={toggleFavorite}
+      disabled={isLoading}
+      title={label}
+      aria-label={label}
+      className={clsx(
+        "cursor-pointer rounded-lg border p-3 leading-none transition-all duration-300 2xl:p-4",
+        isFavorite ? "border-sand bg-sand text-onix hover:border-pearl hover:bg-pearl" : "border-blackamber bg-blackamber text-sand hover:border-pearl hover:bg-pearl hover:text-onix",
+      )}
+    >
+      {isFavorite ? <HeartOffIcon size={20} /> : <HeartIcon size={20} />}
+    </button>
   );
 }

package/dist/src/components/library/books/BookSeriesRating.tsx

@@ -0,0 +1,16 @@
+import { StarIcon } from "lucide-react";
+
+interface BookSeriesRatingProps {
+  rating: number | null;
+}
+
+export default function BookSeriesRating({ rating }: BookSeriesRatingProps) {
+  if (rating === null || rating === undefined) return null;
+
+  return (
+    <div className="flex items-center gap-1.5 text-4xl text-pearl">
+      <StarIcon size={20} />
+      <span className="tabular-nums font-bold">{rating.toFixed(1)}</span>
+    </div>
+  );
+}

package/dist/src/components/library/books/BookSeriesStatusSelect.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import {
+  CircleCheckBig,
+  CircleFadingArrowUpIcon,
+  CirclePauseIcon,
+  CircleXIcon,
+  type LucideIcon,
+} from "lucide-react";
+import { getBookSeriesStatus, updateBookSeriesStatus } from "@/actions/books-series-status";
+import type { Dictionary } from "@/lib/types";
+
+interface BookSeriesStatusSelectProps {
+  seriesId: string;
+  intl: Dictionary;
+}
+
+interface StatusOption {
+  value: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+const COLORS: Record<string, string> = {
+  ONGOING: "text-cyan-500",
+  FINISHED: "text-pearl",
+  HIATUS: "text-yellow-500",
+  CANCELLED: "text-red-500",
+};
+
+export default function BookSeriesStatusSelect({ seriesId, intl }: BookSeriesStatusSelectProps) {
+  const books = intl.books as Record<string, string>;
+  const options: StatusOption[] = [
+    { value: "ONGOING", label: books.ongoing, icon: CircleFadingArrowUpIcon },
+    { value: "FINISHED", label: books.finished, icon: CircleCheckBig },
+    { value: "HIATUS", label: books.hiatus, icon: CirclePauseIcon },
+    { value: "CANCELLED", label: books.cancelled, icon: CircleXIcon },
+  ];
+  const [currentStatus, setCurrentStatus] = useState<string | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const currentOption = options.find((option) => option.value === currentStatus);
+  const CurrentIcon = currentOption?.icon ?? CircleFadingArrowUpIcon;
+
+  useEffect(() => {
+    let active = true;
+    void getBookSeriesStatus({ seriesId }).then((result) => {
+      if (active && !("error" in result)) setCurrentStatus(result.status);
+    });
+    return () => { active = false; };
+  }, [seriesId]);
+
+  useEffect(() => {
+    const close = (event: MouseEvent) => {
+      if (selectRef.current && !selectRef.current.contains(event.target as Node)) setIsOpen(false);
+    };
+    if (isOpen) document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [isOpen]);
+
+  const changeStatus = async (status: string) => {
+    setIsLoading(true);
+    try {
+      const result = await updateBookSeriesStatus({ seriesId, status });
+      if (!("error" in result)) {
+        setCurrentStatus(result.status);
+        setIsOpen(false);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="relative" ref={selectRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen((open) => !open)}
+        disabled={isLoading}
+        title={currentOption?.label ?? books.selectStatus}
+        className="group cursor-pointer rounded-lg border border-blackamber bg-blackamber p-3 leading-none text-sand transition-all duration-300 hover:border-pearl hover:bg-pearl hover:text-onix 2xl:p-4"
+      >
+        <CurrentIcon
+          size={20}
+          className={clsx(COLORS[currentStatus ?? ""] ?? "text-sand", "transition-colors", currentStatus === "FINISHED" && "group-hover:text-onix")}
+        />
+      </button>
+      {isOpen && (
+        <div className="absolute left-0 top-full z-10 mt-2 min-w-[180px] overflow-hidden rounded-lg bg-blackamber shadow-lg">
+          {options.map((option) => {
+            const OptionIcon = option.icon;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => void changeStatus(option.value)}
+                disabled={isLoading}
+                className={clsx(
+                  "flex w-full cursor-pointer items-center gap-3 px-4 py-3 transition-all duration-200",
+                  currentStatus === option.value ? "bg-sand text-onix" : "text-sand hover:bg-pearl hover:text-onix",
+                )}
+              >
+                <OptionIcon size={20} />
+                <span className="text-sm font-medium">{option.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/src/components/library/books/BookSummary.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
 import type { Dictionary } from "@/lib/types";
 
 interface BookSummaryProps {
@@ -11,8 +12,13 @@ interface BookSummaryProps {
 
 export default function BookSummary({ summary, intl }: BookSummaryProps) {
   const [expanded, setExpanded] = useState(false);
+  const pathname = usePathname();
   const books = intl.books as Record<string, string>;
 
+  useEffect(() => {
+    setExpanded(false);
+  }, [pathname]);
+
   return (
     <div className="max-w-2xl">
       <p className={`${expanded ? "" : "line-clamp-3"} whitespace-pre-line leading-relaxed transition-all duration-300`}>