feat(frontend): make library sidebar drilldown-aware

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

@@ -5,23 +5,61 @@ import type { LibrarySearchParams } from "@/hooks/use-library-search";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Badge } from "@/components/ui/badge";
+import { ArrowLeft } from "lucide-react";
 
 interface Props {
   filter: LibrarySearchParams;
   onFilterChange: (next: Partial<LibrarySearchParams>) => void;
+  viewMode: "grouped" | "flat";
+  drilldown: null | { series: string } | { series: string; season: number };
+  onBack: () => void;
 }
 
-const CONTENT_TYPES = [
-  { value: "", label: "All types" },
+const ALL = "";
+
+const CONTENT_TYPES_ALL = [
+  { value: ALL, label: "All types" },
   { value: "movie", label: "Movies" },
   { value: "episode", label: "Episodes" },
   { value: "short", label: "Shorts" },
 ];
 
-export function LibrarySidebar({ filter, onFilterChange }: Props) {
+const CONTENT_TYPES_GROUPED = [
+  { value: ALL, label: "All types" },
+  { value: "movie", label: "Movies" },
+  { value: "short", label: "Shorts" },
+];
+
+export function LibrarySidebar({ filter, onFilterChange, viewMode, drilldown, onBack }: Props) {
   const { data: collections } = useCollections(filter.provider);
   const { data: genres } = useGenres(filter.type, { provider: filter.provider });
 
+  if (drilldown !== null) {
+    return (
+      <aside className="w-56 shrink-0 border-r border-zinc-800 bg-zinc-950 p-4 flex flex-col gap-4">
+        <button
+          type="button"
+          onClick={onBack}
+          className="flex items-center gap-1.5 text-xs text-zinc-400 hover:text-zinc-100 transition-colors"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          Back
+        </button>
+        <div>
+          <p className="mb-1.5 text-xs font-medium uppercase tracking-wider text-zinc-500">Search</p>
+          <Input
+            placeholder="Search…"
+            value={filter.q ?? ""}
+            onChange={e => onFilterChange({ q: e.target.value || undefined })}
+            className="h-8 text-xs"
+          />
+        </div>
+      </aside>
+    );
+  }
+
+  const contentTypes = viewMode === "grouped" ? CONTENT_TYPES_GROUPED : CONTENT_TYPES_ALL;
+
   return (
     <aside className="w-56 shrink-0 border-r border-zinc-800 bg-zinc-950 p-4 flex flex-col gap-4">
       <div>
@@ -36,10 +74,10 @@ export function LibrarySidebar({ filter, onFilterChange }: Props) {
 
       <div>
         <p className="mb-1.5 text-xs font-medium uppercase tracking-wider text-zinc-500">Type</p>
-        <Select value={filter.type ?? ""} onValueChange={v => onFilterChange({ type: v || undefined })}>
+        <Select value={filter.type ?? ALL} onValueChange={v => onFilterChange({ type: v === ALL ? undefined : v })}>
           <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
           <SelectContent>
-            {CONTENT_TYPES.map(ct => (
+            {contentTypes.map(ct => (
               <SelectItem key={ct.value} value={ct.value}>{ct.label}</SelectItem>
             ))}
           </SelectContent>