refactor: make library rendering server-first and deterministic

Move library header/covers to deterministic server-side rendering, split preference controls into controlled/uncontrolled modes, and remove client cover wrapper to eliminate hydration mismatches and provider coupling on library pages.

src/components/ui/series-cover.tsx

@@ -1,6 +1,3 @@
-"use client";
-
-import { CoverClient } from "./cover-client";
 import { ProgressBar } from "./progress-bar";
 import type { SeriesCoverProps } from "./cover-utils";
 import { getImageUrl } from "@/lib/utils/image-url";
@@ -16,12 +13,23 @@ export function SeriesCover({
 
   const readBooks = series.booksReadCount;
   const totalBooks = series.booksCount;
-  const showProgress = showProgressUi && readBooks && totalBooks && readBooks > 0 && !isCompleted;
+  const showProgress = Boolean(showProgressUi && totalBooks > 0 && readBooks > 0 && !isCompleted);
 
   return (
     <div className="relative w-full h-full">
-      <CoverClient imageUrl={imageUrl} alt={alt} className={className} isCompleted={isCompleted} />
-      {showProgress && <ProgressBar progress={readBooks} total={totalBooks} type="series" />}
+      <img
+        src={imageUrl}
+        alt={alt}
+        loading="lazy"
+        className={[
+          "absolute inset-0 w-full h-full object-cover rounded-lg",
+          isCompleted ? "opacity-50" : "",
+          className || "",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      />
+      {showProgress ? <ProgressBar progress={readBooks} total={totalBooks} type="series" /> : null}
     </div>
   );
 }