feat(library): add media library browsing functionality

- Introduced new `library` module in the API routes to handle media library requests.
- Enhanced `AppState` to include a media provider for library interactions.
- Defined new `IMediaProvider` trait methods for listing collections, series, and genres.
- Implemented Jellyfin media provider methods for fetching collections and series.
- Added frontend components for selecting series and displaying filter previews.
- Created hooks for fetching collections, series, and genres from the library.
- Updated media filter to support series name and search term.
- Enhanced API client to handle new library-related endpoints.

k-tv-frontend/app/(main)/dashboard/components/edit-channel-sheet.tsx

@@ -7,6 +7,9 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sh
 import { Button } from "@/components/ui/button";
 import { TagInput } from "./tag-input";
 import { BlockTimeline, BLOCK_COLORS, timeToMins, minsToTime } from "./block-timeline";
+import { SeriesPicker } from "./series-picker";
+import { FilterPreview } from "./filter-preview";
+import { useCollections, useSeries, useGenres } from "@/hooks/use-library";
 import type {
   ChannelResponse,
   ProgrammingBlock,
@@ -35,6 +38,8 @@ const mediaFilterSchema = z.object({
   min_duration_secs: z.number().min(0, "Must be ≥ 0").nullable().optional(),
   max_duration_secs: z.number().min(0, "Must be ≥ 0").nullable().optional(),
   collections: z.array(z.string()),
+  series_name: z.string().nullable().optional(),
+  search_term: z.string().nullable().optional(),
 });
 
 const blockSchema = z.object({
@@ -194,6 +199,8 @@ function defaultFilter(): MediaFilter {
     min_duration_secs: null,
     max_duration_secs: null,
     collections: [],
+    series_name: null,
+    search_term: null,
   };
 }
 
@@ -207,6 +214,200 @@ function defaultBlock(startMins = 20 * 60, durationMins = 60): ProgrammingBlock
   };
 }
 
+// ---------------------------------------------------------------------------
+// AlgorithmicFilterEditor — filter section with live library data
+// ---------------------------------------------------------------------------
+
+interface AlgorithmicFilterEditorProps {
+  content: Extract<BlockContent, { type: "algorithmic" }>;
+  pfx: string;
+  errors: FieldErrors;
+  setFilter: (patch: Partial<MediaFilter>) => void;
+  setStrategy: (strategy: FillStrategy) => void;
+}
+
+function AlgorithmicFilterEditor({
+  content,
+  pfx,
+  errors,
+  setFilter,
+  setStrategy,
+}: AlgorithmicFilterEditorProps) {
+  const [showGenres, setShowGenres] = useState(false);
+
+  const { data: collections, isLoading: loadingCollections } = useCollections();
+  const { data: series, isLoading: loadingSeries } = useSeries();
+  const { data: genreOptions } = useGenres(content.filter.content_type ?? undefined);
+
+  const isEpisode = content.filter.content_type === "episode";
+
+  return (
+    <div className="space-y-3 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
+      <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Filter</p>
+
+      <div className="grid grid-cols-2 gap-3">
+        <Field label="Media type">
+          <NativeSelect
+            value={content.filter.content_type ?? ""}
+            onChange={(v) =>
+              setFilter({
+                content_type: v === "" ? null : (v as ContentType),
+                // clear series name if switching away from episode
+                series_name: v !== "episode" ? null : content.filter.series_name,
+              })
+            }
+          >
+            <option value="">Any</option>
+            <option value="movie">Movie</option>
+            <option value="episode">Episode</option>
+            <option value="short">Short</option>
+          </NativeSelect>
+        </Field>
+        <Field label="Strategy">
+          <NativeSelect
+            value={content.strategy}
+            onChange={(v) => setStrategy(v as FillStrategy)}
+          >
+            <option value="random">Random</option>
+            <option value="best_fit">Best fit</option>
+            <option value="sequential">Sequential</option>
+          </NativeSelect>
+        </Field>
+      </div>
+
+      {/* Series — only meaningful for episodes */}
+      {isEpisode && (
+        <Field
+          label="Series"
+          hint={
+            content.strategy === "sequential"
+              ? "Episodes will play in chronological order"
+              : "Filter to one show, or leave empty for all"
+          }
+        >
+          <SeriesPicker
+            value={content.filter.series_name ?? null}
+            onChange={(v) => setFilter({ series_name: v })}
+            series={series ?? []}
+            isLoading={loadingSeries}
+          />
+        </Field>
+      )}
+
+      {/* Library — real collection names when the provider supports it */}
+      <Field
+        label="Library"
+        hint={
+          loadingCollections
+            ? "Loading libraries…"
+            : collections
+              ? "Scope this block to one library"
+              : "Enter a provider library ID"
+        }
+      >
+        {collections && collections.length > 0 ? (
+          <NativeSelect
+            value={content.filter.collections[0] ?? ""}
+            onChange={(v) => setFilter({ collections: v ? [v] : [] })}
+          >
+            <option value="">All libraries</option>
+            {collections.map((c) => (
+              <option key={c.id} value={c.id}>
+                {c.name}
+                {c.collection_type ? ` (${c.collection_type})` : ""}
+              </option>
+            ))}
+          </NativeSelect>
+        ) : (
+          <TagInput
+            values={content.filter.collections}
+            onChange={(v) => setFilter({ collections: v })}
+            placeholder="Library ID…"
+          />
+        )}
+      </Field>
+
+      {/* Genres with browse-from-library shortcut */}
+      <Field label="Genres" hint="Press Enter or comma to add">
+        <TagInput
+          values={content.filter.genres}
+          onChange={(v) => setFilter({ genres: v })}
+          placeholder="Comedy, Animation…"
+        />
+        {genreOptions && genreOptions.length > 0 && (
+          <div className="mt-1.5">
+            <button
+              type="button"
+              onClick={() => setShowGenres((s) => !s)}
+              className="text-[11px] text-zinc-600 hover:text-zinc-400"
+            >
+              {showGenres ? "Hide" : "Browse"} available genres
+            </button>
+            {showGenres && (
+              <div className="mt-1.5 flex flex-wrap gap-1">
+                {genreOptions
+                  .filter((g) => !content.filter.genres.includes(g))
+                  .map((g) => (
+                    <button
+                      key={g}
+                      type="button"
+                      onClick={() => setFilter({ genres: [...content.filter.genres, g] })}
+                      className="rounded px-1.5 py-0.5 text-[11px] bg-zinc-700/50 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200"
+                    >
+                      + {g}
+                    </button>
+                  ))}
+              </div>
+            )}
+          </div>
+        )}
+      </Field>
+
+      <Field label="Tags" hint="Press Enter or comma to add">
+        <TagInput
+          values={content.filter.tags}
+          onChange={(v) => setFilter({ tags: v })}
+          placeholder="classic, family…"
+        />
+      </Field>
+
+      <div className="grid grid-cols-3 gap-3">
+        <Field label="Decade" hint="e.g. 1990" error={errors[`${pfx}.content.filter.decade`]}>
+          <NumberInput
+            value={content.filter.decade ?? ""}
+            onChange={(v) => setFilter({ decade: v === "" ? null : (v as number) })}
+            placeholder="1990"
+            error={!!errors[`${pfx}.content.filter.decade`]}
+          />
+        </Field>
+        <Field label="Min duration (s)" error={errors[`${pfx}.content.filter.min_duration_secs`]}>
+          <NumberInput
+            value={content.filter.min_duration_secs ?? ""}
+            onChange={(v) =>
+              setFilter({ min_duration_secs: v === "" ? null : (v as number) })
+            }
+            placeholder="1200"
+            error={!!errors[`${pfx}.content.filter.min_duration_secs`]}
+          />
+        </Field>
+        <Field label="Max duration (s)" error={errors[`${pfx}.content.filter.max_duration_secs`]}>
+          <NumberInput
+            value={content.filter.max_duration_secs ?? ""}
+            onChange={(v) =>
+              setFilter({ max_duration_secs: v === "" ? null : (v as number) })
+            }
+            placeholder="3600"
+            error={!!errors[`${pfx}.content.filter.max_duration_secs`]}
+          />
+        </Field>
+      </div>
+
+      {/* Preview — snapshot of current filter, only fetches on explicit click */}
+      <FilterPreview filter={content.filter} />
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // BlockEditor (detail form for a single block)
 // ---------------------------------------------------------------------------
@@ -333,84 +534,13 @@ function BlockEditor({ block, index, isSelected, color, errors, onChange, onRemo
           </div>
 
           {content.type === "algorithmic" && (
-            <div className="space-y-3 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
-              <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Filter</p>
-
-              <div className="grid grid-cols-2 gap-3">
-                <Field label="Media type">
-                  <NativeSelect
-                    value={content.filter.content_type ?? ""}
-                    onChange={(v) => setFilter({ content_type: v === "" ? null : (v as ContentType) })}
-                  >
-                    <option value="">Any</option>
-                    <option value="movie">Movie</option>
-                    <option value="episode">Episode</option>
-                    <option value="short">Short</option>
-                  </NativeSelect>
-                </Field>
-                <Field label="Strategy">
-                  <NativeSelect
-                    value={content.strategy}
-                    onChange={(v) => setStrategy(v as FillStrategy)}
-                  >
-                    <option value="random">Random</option>
-                    <option value="best_fit">Best fit</option>
-                    <option value="sequential">Sequential</option>
-                  </NativeSelect>
-                </Field>
-              </div>
-
-              <Field label="Genres" hint="Press Enter or comma to add">
-                <TagInput
-                  values={content.filter.genres}
-                  onChange={(v) => setFilter({ genres: v })}
-                  placeholder="Comedy, Sci-Fi…"
-                />
-              </Field>
-
-              <Field label="Tags" hint="Press Enter or comma to add">
-                <TagInput
-                  values={content.filter.tags}
-                  onChange={(v) => setFilter({ tags: v })}
-                  placeholder="classic, family…"
-                />
-              </Field>
-
-              <div className="grid grid-cols-3 gap-3">
-                <Field label="Decade" hint="e.g. 1990" error={errors[`${pfx}.content.filter.decade`]}>
-                  <NumberInput
-                    value={content.filter.decade ?? ""}
-                    onChange={(v) => setFilter({ decade: v === "" ? null : (v as number) })}
-                    placeholder="1990"
-                    error={!!errors[`${pfx}.content.filter.decade`]}
-                  />
-                </Field>
-                <Field label="Min duration (s)" error={errors[`${pfx}.content.filter.min_duration_secs`]}>
-                  <NumberInput
-                    value={content.filter.min_duration_secs ?? ""}
-                    onChange={(v) => setFilter({ min_duration_secs: v === "" ? null : (v as number) })}
-                    placeholder="1200"
-                    error={!!errors[`${pfx}.content.filter.min_duration_secs`]}
-                  />
-                </Field>
-                <Field label="Max duration (s)" error={errors[`${pfx}.content.filter.max_duration_secs`]}>
-                  <NumberInput
-                    value={content.filter.max_duration_secs ?? ""}
-                    onChange={(v) => setFilter({ max_duration_secs: v === "" ? null : (v as number) })}
-                    placeholder="3600"
-                    error={!!errors[`${pfx}.content.filter.max_duration_secs`]}
-                  />
-                </Field>
-              </div>
-
-              <Field label="Collections" hint="Jellyfin library IDs">
-                <TagInput
-                  values={content.filter.collections}
-                  onChange={(v) => setFilter({ collections: v })}
-                  placeholder="abc123…"
-                />
-              </Field>
-            </div>
+            <AlgorithmicFilterEditor
+              content={content}
+              pfx={pfx}
+              errors={errors}
+              setFilter={setFilter}
+              setStrategy={setStrategy}
+            />
           )}
 
           {content.type === "manual" && (