feat(frontend): library page, components, and schedule/add-to-block dialogs (tasks 11-14)

k-tv-frontend/app/(main)/library/components/library-item-card.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { Checkbox } from "@/components/ui/checkbox";
+import type { LibraryItemFull } from "@/lib/types";
+
+interface Props {
+  item: LibraryItemFull;
+  selected: boolean;
+  onToggle: () => void;
+}
+
+export function LibraryItemCard({ item, selected, onToggle }: Props) {
+  const [imgError, setImgError] = useState(false);
+  const mins = Math.ceil(item.duration_secs / 60);
+
+  return (
+    <div
+      className={`group relative cursor-pointer rounded-lg border transition-colors ${
+        selected
+          ? "border-violet-500 bg-violet-950/30"
+          : "border-zinc-800 bg-zinc-900 hover:border-zinc-600"
+      }`}
+      onClick={onToggle}
+    >
+      <div className="aspect-video w-full overflow-hidden rounded-t-lg bg-zinc-800">
+        {item.thumbnail_url && !imgError ? (
+          <img
+            src={item.thumbnail_url}
+            alt={item.title}
+            className="h-full w-full object-cover"
+            onError={() => setImgError(true)}
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center text-zinc-600 text-xs">No image</div>
+        )}
+      </div>
+      <div className="absolute left-2 top-2" onClick={e => { e.stopPropagation(); onToggle(); }}>
+        <Checkbox checked={selected} className="border-white/50 bg-black/40" />
+      </div>
+      <div className="p-2">
+        <p className="truncate text-xs font-medium text-zinc-100">{item.title}</p>
+        <p className="mt-0.5 text-xs text-zinc-500">
+          {item.content_type === "episode" && item.series_name
+            ? `${item.series_name} S${item.season_number ?? "?"}E${item.episode_number ?? "?"}`
+            : item.content_type}
+          {" · "}{mins >= 60 ? `${Math.floor(mins / 60)}h ${mins % 60}m` : `${mins}m`}
+        </p>
+      </div>
+    </div>
+  );
+}