@itsmrtr/bunkoshelf 1.10.2 → 1.11.0

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

@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { MinusIcon, PlusIcon, StarIcon } from "lucide-react";
+import { updateBookRating } from "@/actions/books-rating";
+import type { Dictionary } from "@/lib/types";
+
+const MIN_RATING = 0.5;
+const MAX_RATING = 10;
+
+interface BookVolumeRatingProps {
+  volumeId: string;
+  initialPersonalRating: number | null;
+  intl: Dictionary;
+}
+
+export default function BookVolumeRating({ volumeId, initialPersonalRating, intl }: BookVolumeRatingProps) {
+  const books = intl.books as Record<string, string>;
+  const [personalRating, setPersonalRating] = useState(initialPersonalRating);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [draft, setDraft] = useState(5);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const hasRating = personalRating !== null;
+
+  const save = async (rating: number) => {
+    setIsOpen(false);
+    setIsLoading(true);
+    try {
+      const result = await updateBookRating({ volumeId, rating });
+      if (result.success) setPersonalRating(rating);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const close = (event: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(event.target as Node)) void save(draft);
+    };
+    if (isOpen) document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, [draft, isOpen]);
+
+  const open = () => {
+    setDraft(personalRating ?? 5);
+    setIsOpen(true);
+  };
+
+  const remove = async () => {
+    setIsLoading(true);
+    try {
+      const result = await updateBookRating({ volumeId, rating: null });
+      if (result.success) setPersonalRating(null);
+    } finally {
+      setIsLoading(false);
+      setIsOpen(false);
+    }
+  };
+
+  if (!hasRating && !isOpen) {
+    return (
+      <button type="button" onClick={open} className="mt-4 flex cursor-pointer items-center gap-1.5 text-sm text-neutral-500 transition-colors hover:text-neutral-300">
+        <StarIcon size={14} />
+        <span>{books.rate}</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="relative" ref={panelRef}>
+      <button
+        type="button"
+        onClick={() => { if (isOpen) void save(draft); else open(); }}
+        className={`flex cursor-pointer items-center gap-1.5 text-4xl transition-colors ${
+          hasRating ? "text-amber-400 hover:text-amber-300" : "text-neutral-500 hover:text-neutral-300"
+        }`}
+      >
+        <StarIcon size={20} className={hasRating ? "fill-amber-400" : ""} />
+        <span className="tabular-nums font-bold">{personalRating?.toFixed(1) ?? draft.toFixed(1)}</span>
+      </button>
+      {isOpen && (
+        <div className="absolute z-50 mt-2 rounded-lg border border-neutral-700 bg-neutral-900 p-3 shadow-lg">
+          <div className="flex items-center gap-3">
+            <button type="button" disabled={isLoading || draft <= MIN_RATING} onClick={() => setDraft((value) => Math.max(MIN_RATING, value - 0.5))} className="cursor-pointer rounded bg-neutral-800 p-1.5 text-neutral-300 transition-colors hover:bg-neutral-700 disabled:cursor-default disabled:opacity-30"><MinusIcon size={16} /></button>
+            <span className="w-10 text-center text-2xl font-bold tabular-nums text-neutral-100">{draft.toFixed(1)}</span>
+            <button type="button" disabled={isLoading || draft >= MAX_RATING} onClick={() => setDraft((value) => Math.min(MAX_RATING, value + 0.5))} className="cursor-pointer rounded bg-neutral-800 p-1.5 text-neutral-300 transition-colors hover:bg-neutral-700 disabled:cursor-default disabled:opacity-30"><PlusIcon size={16} /></button>
+          </div>
+          {hasRating && <button type="button" disabled={isLoading} onClick={() => void remove()} className="mt-3 w-full cursor-pointer text-xs text-neutral-500 transition-colors hover:text-neutral-300 disabled:cursor-default">{books.removeRating}</button>}
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/src/components/library/books/grid/SeriesIndex.tsx

@@ -5,10 +5,19 @@ import { listBookProgressByIds, listBookVolumes } from "@/lib/db/books/library";
 import { LibraryBigIcon } from "lucide-react";
 import type { Dictionary, Locale } from "@/lib/types";
 
-export default async function SeriesIndex({ lang, intl }: { lang: Locale; intl: Dictionary }) {
+export default async function SeriesIndex({
+  lang,
+  intl,
+  authorFilter,
+}: {
+  lang: Locale;
+  intl: Dictionary;
+  authorFilter?: string;
+}) {
   const labels = intl.books as Record<string, string>;
   const user = await verifySession();
-  const books = await listBookVolumes();
+  const authorNames = authorFilter?.trim() ? [authorFilter.trim()] : undefined;
+  const books = await listBookVolumes({ authorNames });
   const progressById = user
     ? await listBookProgressByIds(user.id, books.map((book) => book.id))
     : {};

package/dist/src/components/library/manga/MetadataPanel.tsx

@@ -50,7 +50,7 @@ function AuthorField({ field, label, href }: AuthorFieldProps) {
             <Link
               href={{
                 pathname: href,
-                query: { author },
+                query: { author, includeOneshots: "true" },
               }}
               scroll={false}
               className="hover:text-lilah transition-all duration-300"
@@ -82,10 +82,11 @@ export default function MetadataPanel({
   const genres = (meta.genres || []) as { name: string }[];
   const tags = (meta.tags || []) as { name: string }[];
   const href = `/${lang}/${section}/${linkBase}`;
+  const authorHref = `/${lang}/${section}/series`;
 
   return (
     <>
-      <AuthorField field={meta.writer} label={intl.manga.author} href={href} />
+      <AuthorField field={meta.writer} label={intl.manga.author} href={authorHref} />
       <MetaField field={meta.penciller} label={intl.manga.penciller} />
       <MetaField field={meta.inker} label={intl.manga.inker} />
       <MetaField field={meta.colorist} label={intl.manga.colorist} />

package/dist/src/components/reader/EpubReader.tsx

@@ -327,10 +327,24 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
             });
           }
 
-          const handleContentInteraction = (event: MouseEvent | TouchEvent) => {
-            const touch = (event as TouchEvent).changedTouches?.[0] ?? null;
-            const x = touch ? touch.clientX : (event as MouseEvent).clientX;
-            const y = touch ? touch.clientY : (event as MouseEvent).clientY;
+          let touchStart: { x: number; y: number } | null = null;
+          let activePointerId: number | null = null;
+          let ignoreClickUntil = 0;
+          document.documentElement.style.touchAction = "manipulation";
+          body.style.touchAction = "manipulation";
+          const isInteractiveTarget = (target: EventTarget | null) => {
+            return Boolean((target as HTMLElement | null)?.closest?.("a, button, input, select, textarea, [contenteditable='true']"));
+          };
+          const hasTextSelection = () => Boolean(contents.window.getSelection()?.toString().trim());
+          const clearReaderOverlays = () => {
+            closePanels();
+            setSelectionMenu(null);
+            setAnnotationMenu(null);
+            setNoteEditorOpen(false);
+            setAnnotationNoteEditorOpen(false);
+          };
+          const handleContentInteraction = (event: Event, x: number, y: number, navigate = false) => {
+            if (hasTextSelection() || pendingSelectionRef.current || isInteractiveTarget(event.target)) return;
             const annotation = findAnnotationAtPoint(contents, x, y);
             if (annotation) {
               event.preventDefault();
@@ -338,13 +352,84 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
               openAnnotationMenu(annotation, annotation.cfiRange, contents);
               return;
             }
-            if (pendingSelectionRef.current) return;
-            closePanels();
-            setSelectionMenu(null);
-            setAnnotationMenu(null);
+            clearReaderOverlays();
+            if (navigate) {
+              const width = contents.window.innerWidth;
+              if (x < width / 3) {
+                void rendition.prev();
+                return;
+              }
+              if (x > (width * 2) / 3) {
+                void rendition.next();
+                return;
+              }
+            }
             setControlsVisible((visible) => !visible);
           };
-          document.addEventListener("click", handleContentInteraction);
+          const handleContentClick = (event: MouseEvent) => {
+            if (Date.now() < ignoreClickUntil) {
+              event.preventDefault();
+              return;
+            }
+            handleContentInteraction(event, event.clientX, event.clientY);
+          };
+          const handleTouchGesture = (event: Event, x: number, y: number) => {
+            const start = touchStart;
+            touchStart = null;
+            if (!start || hasTextSelection() || isInteractiveTarget(event.target)) return;
+
+            const deltaX = x - start.x;
+            const deltaY = y - start.y;
+            const distanceX = Math.abs(deltaX);
+            const distanceY = Math.abs(deltaY);
+
+            if (distanceX > 48 && distanceX > distanceY) {
+              if (event.cancelable) event.preventDefault();
+              event.stopPropagation();
+              ignoreClickUntil = Date.now() + 500;
+              clearReaderOverlays();
+              void (deltaX < 0 ? rendition.next() : rendition.prev());
+              return;
+            }
+
+            if (distanceX > 18 || distanceY > 18) {
+              ignoreClickUntil = Date.now() + 500;
+              return;
+            }
+
+            if (event.cancelable) event.preventDefault();
+            ignoreClickUntil = Date.now() + 500;
+            handleContentInteraction(event, x, y, true);
+          };
+          const handleTouchStart = (event: TouchEvent) => {
+            if (event.touches.length !== 1) {
+              touchStart = null;
+              return;
+            }
+            const touch = event.touches[0];
+            touchStart = { x: touch.clientX, y: touch.clientY };
+          };
+          const handleTouchEnd = (event: TouchEvent) => {
+            const touch = event.changedTouches[0];
+            if (!touch) return;
+            handleTouchGesture(event, touch.clientX, touch.clientY);
+          };
+          const handlePointerDown = (event: PointerEvent) => {
+            if (!event.isPrimary || event.pointerType === "mouse") return;
+            activePointerId = event.pointerId;
+            touchStart = { x: event.clientX, y: event.clientY };
+          };
+          const handlePointerUp = (event: PointerEvent) => {
+            if (event.pointerId !== activePointerId) return;
+            activePointerId = null;
+            handleTouchGesture(event, event.clientX, event.clientY);
+          };
+          const resetTouchGesture = () => {
+            touchStart = null;
+            activePointerId = null;
+            pointerIsDownRef.current = false;
+          };
+          document.addEventListener("click", handleContentClick, true);
           document.addEventListener("keydown", (event) => readerKeyHandlerRef.current(event));
           const showPendingSelection = () => {
             window.setTimeout(() => {
@@ -381,11 +466,22 @@ export default function EpubReader({ isOpen, onClose, slug, title, layout, intl
           flushPendingSelectionRef.current = showPendingSelection;
           const markPointerDown = () => { pointerIsDownRef.current = true; };
           const markPointerUp = () => { pointerIsDownRef.current = false; showPendingSelection(); };
-          document.addEventListener("mousedown", markPointerDown);
-          document.addEventListener("touchstart", markPointerDown);
-          document.addEventListener("mouseup", showPendingSelection);
-          document.addEventListener("touchend", showPendingSelection);
-          document.addEventListener("pointerup", markPointerUp);
+          const supportsPointerEvents = "PointerEvent" in contents.window;
+          if (supportsPointerEvents) {
+            document.addEventListener("pointerdown", markPointerDown, true);
+            document.addEventListener("pointerup", markPointerUp, true);
+            document.addEventListener("pointerdown", handlePointerDown, true);
+            document.addEventListener("pointerup", handlePointerUp, true);
+            document.addEventListener("pointercancel", resetTouchGesture, true);
+          } else {
+            document.addEventListener("mousedown", markPointerDown, true);
+            document.addEventListener("touchstart", markPointerDown, true);
+            document.addEventListener("mouseup", markPointerUp, true);
+            document.addEventListener("touchend", markPointerUp, true);
+            document.addEventListener("touchstart", handleTouchStart, { passive: true, capture: true });
+            document.addEventListener("touchend", handleTouchEnd, { passive: false, capture: true });
+            document.addEventListener("touchcancel", resetTouchGesture, true);
+          }
         });
         if (layout === "reflowable") applyStyles();
         const refreshAnnotationLayers = () => {

package/dist/src/components/ui/MangaCard.tsx

@@ -26,6 +26,7 @@ interface MangaCardProps {
   progressRatio?: number | null;
   offlineVolumeId?: string | null;
   offlineSeriesId?: string | null;
+  imageSizes?: string;
 }
 
 export default function MangaCard({
@@ -45,6 +46,7 @@ export default function MangaCard({
   progressRatio,
   offlineVolumeId,
   offlineSeriesId,
+  imageSizes,
 }: MangaCardProps) {
   const t = intl;
   const ratio = progressRatio ?? 0;
@@ -123,7 +125,7 @@ export default function MangaCard({
             src={cover || "/placeholder.svg?=v1"}
             alt={`Cover for ${title ?? ""}`}
             fill
-            sizes="(max-width: 768px) 50vw, (max-width: 1280px) 20vw, 14vw"
+            sizes={imageSizes ?? "(max-width: 768px) 50vw, (max-width: 1280px) 20vw, 14vw"}
             className="object-cover z-0"
           />
         )}

package/dist/src/lib/db/books/library.ts

@@ -234,10 +234,48 @@ export async function findBookFileBySlug(slug: string): Promise<{ filename: stri
   return row ? { filename: row.filename, fullPath: row.full_path } : null;
 }
 
-export async function listBookVolumes(options?: { seriesSlug?: string; limit?: number }): Promise<BookVolume[]> {
+export async function listBookVolumes(options?: {
+  seriesSlug?: string;
+  authorNames?: string[];
+  limit?: number;
+}): Promise<BookVolume[]> {
   const params: unknown[] = [];
-  const where = options?.seriesSlug ? " WHERE bs.slug = $1" : "";
-  if (options?.seriesSlug) params.push(options.seriesSlug);
+  const conditions: string[] = [];
+
+  if (options?.seriesSlug) {
+    params.push(options.seriesSlug);
+    conditions.push(`bs.slug = $${params.length}`);
+  }
+
+  if (options?.authorNames && options.authorNames.length > 0) {
+    params.push(options.authorNames);
+    const authorParam = params.length;
+    conditions.push(`
+      (
+        EXISTS (
+          SELECT 1
+          FROM book_people bp
+          WHERE bp.metadata_id = bm.id
+            AND bp.kind = 'creator'
+            AND (bp.role IS NULL OR LOWER(bp.role) = 'aut')
+            AND BTRIM(bp.name) = ANY($${authorParam}::text[])
+        )
+        OR (
+          '__unknown__' = ANY($${authorParam}::text[])
+          AND NOT EXISTS (
+            SELECT 1
+            FROM book_people bp
+            WHERE bp.metadata_id = bm.id
+              AND bp.kind = 'creator'
+              AND (bp.role IS NULL OR LOWER(bp.role) = 'aut')
+              AND BTRIM(bp.name) <> ''
+          )
+        )
+      )
+    `);
+  }
+
+  const where = conditions.length > 0 ? ` WHERE ${conditions.join(" AND ")}` : "";
   const limit = options?.limit ?? 100;
   params.push(limit);
   const rows = await query<BookRow>(`${BOOK_SELECT}${where} ORDER BY bs.sort_title, bv.number NULLS LAST, bv.sort_title LIMIT $${params.length}`, params);

package/dist/src/lib/db/books/reading.ts

@@ -39,6 +39,21 @@ export async function findBookProgress(userId: string, volumeId: string): Promis
   return row ? mapProgress(row) : null;
 }
 
+export async function listBookRatings(userId: string, volumeIds: string[]): Promise<Map<string, number>> {
+  if (!volumeIds.length) return new Map();
+
+  const rows = await query<{ volume_id: string; personal_rating: number }>(
+    `SELECT volume_id, personal_rating
+     FROM user_to_books
+     WHERE user_id = $1
+       AND volume_id = ANY($2)
+       AND personal_rating IS NOT NULL`,
+    [userId, volumeIds],
+  );
+
+  return new Map(rows.map((row) => [row.volume_id, row.personal_rating]));
+}
+
 export async function upsertBookProgress(userId: string, volumeId: string, input: BookProgressUpdate): Promise<BookProgress> {
   const current = await findBookProgress(userId, volumeId);
   const isRead = input.isRead ?? current?.isRead ?? false;