From 40f698acb747e1a3c9b91da2a6b211955e4f05ff Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Mon, 16 Mar 2026 01:40:28 +0100
Subject: [PATCH] refactor: clean up styles and improve layout in dashboard and
 edit channel components

- Removed unnecessary class names for buttons in ChannelCard and DashboardPage components.
- Updated layout styles in RootLayout to apply dark mode by default.
- Refactored edit-channel-sheet to streamline block editor and filter editor components.
- Adjusted duration input fields to reflect minutes instead of seconds in AlgorithmicFilterEditor.
- Enhanced the structure of the EditChannelSheet for better readability and maintainability.
---
 .../dashboard/components/channel-card.tsx     |   2 -
 .../components/edit-channel-sheet.tsx         | 919 +++++++++---------
 k-tv-frontend/app/(main)/dashboard/page.tsx   |  13 +-
 k-tv-frontend/app/layout.tsx                  |   2 +-
 4 files changed, 465 insertions(+), 471 deletions(-)

diff --git a/k-tv-frontend/app/(main)/dashboard/components/channel-card.tsx b/k-tv-frontend/app/(main)/dashboard/components/channel-card.tsx
index a550a26..1b99564 100644
--- a/k-tv-frontend/app/(main)/dashboard/components/channel-card.tsx
+++ b/k-tv-frontend/app/(main)/dashboard/components/channel-card.tsx
@@ -168,7 +168,6 @@ export function ChannelCard({
           size="icon-sm"
           onClick={onViewSchedule}
           title="View schedule"
-          className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
         >
           <CalendarDays className="size-3.5" />
         </Button>
@@ -176,7 +175,6 @@ export function ChannelCard({
           size="icon-sm"
           asChild
           title="Watch on TV"
-          className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
         >
           <Link href={`/tv?channel=${channel.id}`}>
             <Tv2 className="size-3.5" />
diff --git a/k-tv-frontend/app/(main)/dashboard/components/edit-channel-sheet.tsx b/k-tv-frontend/app/(main)/dashboard/components/edit-channel-sheet.tsx
index 3ff0ab7..85d6083 100644
--- a/k-tv-frontend/app/(main)/dashboard/components/edit-channel-sheet.tsx
+++ b/k-tv-frontend/app/(main)/dashboard/components/edit-channel-sheet.tsx
@@ -2,11 +2,11 @@
 
 import { useState, useEffect, useRef } from "react";
 import { z } from "zod";
-import { Trash2, Plus, ChevronDown, ChevronUp } from "lucide-react";
+import { Trash2, Plus } from "lucide-react";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { Button } from "@/components/ui/button";
 import { TagInput } from "./tag-input";
-import { BlockTimeline, BLOCK_COLORS, timeToMins, minsToTime } from "./block-timeline";
+import { BlockTimeline, BLOCK_COLORS, minsToTime } from "./block-timeline";
 import { SeriesPicker } from "./series-picker";
 import { FilterPreview } from "./filter-preview";
 import { useCollections, useSeries, useGenres } from "@/hooks/use-library";
@@ -447,23 +447,23 @@ function AlgorithmicFilterEditor({
             error={!!errors[`${pfx}.content.filter.decade`]}
           />
         </Field>
-        <Field label="Min duration (s)" error={errors[`${pfx}.content.filter.min_duration_secs`]}>
+        <Field label="Min duration (min)" error={errors[`${pfx}.content.filter.min_duration_secs`]}>
           <NumberInput
-            value={content.filter.min_duration_secs ?? ""}
+            value={content.filter.min_duration_secs != null ? Math.round(content.filter.min_duration_secs / 60) : ""}
             onChange={(v) =>
-              setFilter({ min_duration_secs: v === "" ? null : (v as number) })
+              setFilter({ min_duration_secs: v === "" ? null : (v as number) * 60 })
             }
-            placeholder="1200"
+            placeholder="30"
             error={!!errors[`${pfx}.content.filter.min_duration_secs`]}
           />
         </Field>
-        <Field label="Max duration (s)" error={errors[`${pfx}.content.filter.max_duration_secs`]}>
+        <Field label="Max duration (min)" error={errors[`${pfx}.content.filter.max_duration_secs`]}>
           <NumberInput
-            value={content.filter.max_duration_secs ?? ""}
+            value={content.filter.max_duration_secs != null ? Math.round(content.filter.max_duration_secs / 60) : ""}
             onChange={(v) =>
-              setFilter({ max_duration_secs: v === "" ? null : (v as number) })
+              setFilter({ max_duration_secs: v === "" ? null : (v as number) * 60 })
             }
-            placeholder="3600"
+            placeholder="120"
             error={!!errors[`${pfx}.content.filter.max_duration_secs`]}
           />
         </Field>
@@ -482,27 +482,12 @@ function AlgorithmicFilterEditor({
 interface BlockEditorProps {
   block: ProgrammingBlock;
   index: number;
-  isSelected: boolean;
-  color: string;
   errors: FieldErrors;
   onChange: (block: ProgrammingBlock) => void;
-  onRemove: () => void;
-  onSelect: () => void;
   providers: ProviderInfo[];
 }
 
-function BlockEditor({ block, index, isSelected, color, errors, onChange, onRemove, onSelect, providers }: BlockEditorProps) {
-  const [expanded, setExpanded] = useState(isSelected);
-  const elRef = useRef<HTMLDivElement>(null);
-
-  // Scroll into view when selected
-  useEffect(() => {
-    if (isSelected) {
-      setExpanded(true);
-      elRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    }
-  }, [isSelected]);
-
+function BlockEditor({ block, index, errors, onChange, providers }: BlockEditorProps) {
   const setField = <K extends keyof ProgrammingBlock>(key: K, value: ProgrammingBlock[K]) =>
     onChange({ ...block, [key]: value });
 
@@ -535,169 +520,136 @@ function BlockEditor({ block, index, isSelected, color, errors, onChange, onRemo
   };
 
   return (
-    <div
-      ref={elRef}
-      className={`rounded-lg border bg-zinc-800/50 ${isSelected ? "border-zinc-500" : "border-zinc-700"}`}
-    >
-      <div className="flex items-center gap-2 px-3 py-2">
-        <div className="h-2.5 w-2.5 rounded-full shrink-0" style={{ backgroundColor: color }} />
-        <button
-          type="button"
-          onClick={() => { setExpanded((v) => !v); onSelect(); }}
-          className="flex flex-1 items-center gap-2 text-left text-sm font-medium text-zinc-200"
-        >
-          {expanded ? (
-            <ChevronUp className="size-3.5 shrink-0 text-zinc-500" />
-          ) : (
-            <ChevronDown className="size-3.5 shrink-0 text-zinc-500" />
-          )}
-          <span className="truncate">{block.name || "Unnamed block"}</span>
-          <span className="shrink-0 font-mono text-[11px] text-zinc-500">
-            {block.start_time.slice(0, 5)} · {block.duration_mins}m
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={onRemove}
-          className="rounded p-1 text-zinc-600 hover:bg-zinc-700 hover:text-red-400"
-        >
-          <Trash2 className="size-3.5" />
-        </button>
+    <div className="space-y-3">
+      <div className="grid grid-cols-2 gap-3">
+        <Field label="Block name" error={errors[`${pfx}.name`]}>
+          <TextInput
+            value={block.name}
+            onChange={(v) => setField("name", v)}
+            placeholder="Evening Sitcoms"
+            error={!!errors[`${pfx}.name`]}
+          />
+        </Field>
+        <Field label="Content type">
+          <NativeSelect
+            value={content.type}
+            onChange={(v) => setContentType(v as "algorithmic" | "manual")}
+          >
+            <option value="algorithmic">Algorithmic</option>
+            <option value="manual">Manual</option>
+          </NativeSelect>
+        </Field>
       </div>
 
-      {expanded && (
-        <div className="space-y-3 border-t border-zinc-700 px-3 py-3">
-          <div className="grid grid-cols-2 gap-3">
-            <Field label="Block name" error={errors[`${pfx}.name`]}>
-              <TextInput
-                value={block.name}
-                onChange={(v) => setField("name", v)}
-                placeholder="Evening Sitcoms"
-                error={!!errors[`${pfx}.name`]}
-              />
-            </Field>
-            <Field label="Content type">
-              <NativeSelect
-                value={content.type}
-                onChange={(v) => setContentType(v as "algorithmic" | "manual")}
-              >
-                <option value="algorithmic">Algorithmic</option>
-                <option value="manual">Manual</option>
-              </NativeSelect>
-            </Field>
-          </div>
+      <div className="grid grid-cols-2 gap-3">
+        <Field label="Start time">
+          <input
+            type="time"
+            value={block.start_time.slice(0, 5)}
+            onChange={(e) => setField("start_time", e.target.value + ":00")}
+            className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none"
+          />
+        </Field>
+        <Field label="Duration (minutes)" error={errors[`${pfx}.duration_mins`]}>
+          <NumberInput
+            value={block.duration_mins}
+            onChange={(v) => setField("duration_mins", v === "" ? 60 : v)}
+            min={1}
+            error={!!errors[`${pfx}.duration_mins`]}
+          />
+        </Field>
+      </div>
 
-          <div className="grid grid-cols-2 gap-3">
-            <Field label="Start time">
-              <input
-                type="time"
-                value={block.start_time.slice(0, 5)}
-                onChange={(e) => setField("start_time", e.target.value + ":00")}
-                className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none"
-              />
-            </Field>
-            <Field label="Duration (minutes)" error={errors[`${pfx}.duration_mins`]}>
-              <NumberInput
-                value={block.duration_mins}
-                onChange={(v) => setField("duration_mins", v === "" ? 60 : v)}
-                min={1}
-                error={!!errors[`${pfx}.duration_mins`]}
-              />
-            </Field>
-          </div>
+      {content.type === "algorithmic" && (
+        <>
+          <AlgorithmicFilterEditor
+            content={content}
+            pfx={pfx}
+            errors={errors}
+            setFilter={setFilter}
+            setStrategy={setStrategy}
+            setProviderId={setProviderId}
+            providers={providers}
+          />
 
-          {content.type === "algorithmic" && (
-            <>
-              <AlgorithmicFilterEditor
-                content={content}
-                pfx={pfx}
-                errors={errors}
-                setFilter={setFilter}
-                setStrategy={setStrategy}
-                setProviderId={setProviderId}
-                providers={providers}
-              />
-
-              {content.strategy === "sequential" && (
-                <div className="space-y-2 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
-                  <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
-                    Sequential options
-                  </p>
-                  <label className="flex items-center gap-2 cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={block.loop_on_finish ?? true}
-                      onChange={(e) => onChange({ ...block, loop_on_finish: e.target.checked })}
-                      className="accent-zinc-400"
-                    />
-                    <span className="text-sm text-zinc-300">Loop series</span>
-                    <span className="text-[11px] text-zinc-600">
-                      Restart from episode 1 after the final episode
-                    </span>
-                  </label>
-                  <label className="flex items-center gap-2 cursor-pointer">
-                    <input
-                      type="checkbox"
-                      checked={block.ignore_recycle_policy ?? false}
-                      onChange={(e) => onChange({ ...block, ignore_recycle_policy: e.target.checked })}
-                      className="accent-zinc-400"
-                    />
-                    <span className="text-sm text-zinc-300">Independent scheduling</span>
-                    <span className="text-[11px] text-zinc-600">
-                      Play episodes in order even if they aired in another block today
-                    </span>
-                  </label>
-                </div>
-              )}
-            </>
-          )}
-
-          {content.type === "manual" && (
+          {content.strategy === "sequential" && (
             <div className="space-y-2 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
-              <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Item IDs</p>
-              <textarea
-                rows={3}
-                value={content.items.join("\n")}
-                onChange={(e) =>
-                  onChange({
-                    ...block,
-                    content: {
-                      type: "manual",
-                      items: e.target.value.split("\n").map((s) => s.trim()).filter(Boolean),
-                    },
-                  })
-                }
-                placeholder={"abc123\ndef456\nghi789"}
-                className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
-              />
-              <p className="text-[11px] text-zinc-600">One Jellyfin item ID per line, played in order.</p>
+              <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
+                Sequential options
+              </p>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={block.loop_on_finish ?? true}
+                  onChange={(e) => onChange({ ...block, loop_on_finish: e.target.checked })}
+                  className="accent-zinc-400"
+                />
+                <span className="text-sm text-zinc-300">Loop series</span>
+                <span className="text-[11px] text-zinc-600">
+                  Restart from episode 1 after the final episode
+                </span>
+              </label>
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={block.ignore_recycle_policy ?? false}
+                  onChange={(e) => onChange({ ...block, ignore_recycle_policy: e.target.checked })}
+                  className="accent-zinc-400"
+                />
+                <span className="text-sm text-zinc-300">Independent scheduling</span>
+                <span className="text-[11px] text-zinc-600">
+                  Play episodes in order even if they aired in another block today
+                </span>
+              </label>
             </div>
           )}
+        </>
+      )}
 
-          {/* Block-level access control */}
-          <div className="space-y-2 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
-            <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Block access</p>
-            <NativeSelect
-              value={block.access_mode ?? "public"}
-              onChange={(v) => onChange({ ...block, access_mode: v as AccessMode })}
-            >
-              <option value="public">Public</option>
-              <option value="password_protected">Password protected</option>
-              <option value="account_required">Account required</option>
-              <option value="owner_only">Owner only</option>
-            </NativeSelect>
-            {(block.access_mode === "password_protected") && (
-              <input
-                type="password"
-                placeholder="Block password (leave blank to keep existing)"
-                value={block.access_password ?? ""}
-                onChange={(e) => onChange({ ...block, access_password: e.target.value })}
-                className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
-              />
-            )}
-          </div>
+      {content.type === "manual" && (
+        <div className="space-y-2 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
+          <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Item IDs</p>
+          <textarea
+            rows={3}
+            value={content.items.join("\n")}
+            onChange={(e) =>
+              onChange({
+                ...block,
+                content: {
+                  type: "manual",
+                  items: e.target.value.split("\n").map((s) => s.trim()).filter(Boolean),
+                },
+              })
+            }
+            placeholder={"abc123\ndef456\nghi789"}
+            className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+          />
+          <p className="text-[11px] text-zinc-600">One Jellyfin item ID per line, played in order.</p>
         </div>
       )}
+
+      {/* Block-level access control */}
+      <div className="space-y-2 rounded-md border border-zinc-700/50 bg-zinc-800 p-3">
+        <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Block access</p>
+        <NativeSelect
+          value={block.access_mode ?? "public"}
+          onChange={(v) => onChange({ ...block, access_mode: v as AccessMode })}
+        >
+          <option value="public">Public</option>
+          <option value="password_protected">Password protected</option>
+          <option value="account_required">Account required</option>
+          <option value="owner_only">Owner only</option>
+        </NativeSelect>
+        {(block.access_mode === "password_protected") && (
+          <input
+            type="password"
+            placeholder="Block password (leave blank to keep existing)"
+            value={block.access_password ?? ""}
+            onChange={(e) => onChange({ ...block, access_password: e.target.value })}
+            className="w-full rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+          />
+        )}
+      </div>
     </div>
   );
 }
@@ -909,311 +861,364 @@ export function EditChannelSheet({
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
         side="right"
-        className="flex w-full flex-col gap-0 border-zinc-800 bg-zinc-900 p-0 text-zinc-100 sm:max-w-2xl"
+        className="flex w-full flex-col gap-0 border-zinc-800 bg-zinc-900 p-0 text-zinc-100 sm:!max-w-[min(1100px,95vw)]"
       >
         <SheetHeader className="border-b border-zinc-800 px-6 py-4">
           <SheetTitle className="text-zinc-100">Edit channel</SheetTitle>
         </SheetHeader>
 
         <form onSubmit={handleSubmit} className="flex flex-1 flex-col overflow-hidden">
-          <div className="flex-1 space-y-6 overflow-y-auto px-6 py-4">
-            {/* Basic info */}
-            <section className="space-y-3">
-              <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Basic info</h3>
+          <div className="flex flex-1 overflow-hidden">
+            {/* Left column — basic info, logo, recycle policy, webhook */}
+            <div className="w-[300px] shrink-0 overflow-y-auto border-r border-zinc-800 px-5 py-4 space-y-6">
+              {/* Basic info */}
+              <section className="space-y-3">
+                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Basic info</h3>
 
-              <Field label="Name" error={fieldErrors["name"]}>
-                <TextInput
-                  required
-                  value={name}
-                  onChange={setName}
-                  placeholder="90s Sitcom Network"
-                  error={!!fieldErrors["name"]}
-                />
-              </Field>
-
-              <Field label="Timezone" hint="IANA timezone, e.g. America/New_York" error={fieldErrors["timezone"]}>
-                <TextInput
-                  required
-                  value={timezone}
-                  onChange={setTimezone}
-                  placeholder="UTC"
-                  error={!!fieldErrors["timezone"]}
-                />
-              </Field>
-
-              <Field label="Description">
-                <textarea
-                  value={description}
-                  onChange={(e) => setDescription(e.target.value)}
-                  rows={2}
-                  placeholder="Nothing but classic sitcoms, all day"
-                  className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
-                />
-              </Field>
-
-              <label className="flex items-center justify-between gap-3 cursor-pointer rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2.5">
-                <div>
-                  <p className="text-sm text-zinc-200">Auto-generate schedule</p>
-                  <p className="text-[11px] text-zinc-600">Automatically regenerate when the schedule is about to expire</p>
-                </div>
-                <button
-                  type="button"
-                  role="switch"
-                  aria-checked={autoSchedule}
-                  onClick={() => setAutoSchedule((v) => !v)}
-                  className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${autoSchedule ? "bg-zinc-300" : "bg-zinc-700"}`}
-                >
-                  <span
-                    className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${autoSchedule ? "translate-x-4" : "translate-x-0"}`}
-                  />
-                </button>
-              </label>
-
-              <Field label="Channel access">
-                <NativeSelect value={accessMode} onChange={(v) => { setAccessMode(v as AccessMode); setAccessPassword(""); }}>
-                  <option value="public">Public</option>
-                  <option value="password_protected">Password protected</option>
-                  <option value="account_required">Account required</option>
-                  <option value="owner_only">Owner only</option>
-                </NativeSelect>
-              </Field>
-
-              {accessMode === "password_protected" && (
-                <Field label="Channel password" hint="Leave blank to keep existing password">
+                <Field label="Name" error={fieldErrors["name"]}>
                   <TextInput
-                    value={accessPassword}
-                    onChange={setAccessPassword}
-                    placeholder="New password…"
+                    required
+                    value={name}
+                    onChange={setName}
+                    placeholder="90s Sitcom Network"
+                    error={!!fieldErrors["name"]}
                   />
                 </Field>
-              )}
-            </section>
 
-            {/* Logo */}
-            <section className="space-y-3">
-              <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Logo</h3>
+                <Field label="Timezone" hint="IANA timezone, e.g. America/New_York" error={fieldErrors["timezone"]}>
+                  <TextInput
+                    required
+                    value={timezone}
+                    onChange={setTimezone}
+                    placeholder="UTC"
+                    error={!!fieldErrors["timezone"]}
+                  />
+                </Field>
 
-              <div className="space-y-3 rounded-md border border-zinc-700/50 bg-zinc-800/50 p-3">
-                <div className="flex gap-2">
+                <Field label="Description">
+                  <textarea
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    rows={2}
+                    placeholder="Nothing but classic sitcoms, all day"
+                    className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+                  />
+                </Field>
+
+                <label className="flex items-center justify-between gap-3 cursor-pointer rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2.5">
+                  <div>
+                    <p className="text-sm text-zinc-200">Auto-generate schedule</p>
+                    <p className="text-[11px] text-zinc-600">Automatically regenerate when the schedule is about to expire</p>
+                  </div>
+                  <button
+                    type="button"
+                    role="switch"
+                    aria-checked={autoSchedule}
+                    onClick={() => setAutoSchedule((v) => !v)}
+                    className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none ${autoSchedule ? "bg-zinc-300" : "bg-zinc-700"}`}
+                  >
+                    <span
+                      className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${autoSchedule ? "translate-x-4" : "translate-x-0"}`}
+                    />
+                  </button>
+                </label>
+
+                <Field label="Channel access">
+                  <NativeSelect value={accessMode} onChange={(v) => { setAccessMode(v as AccessMode); setAccessPassword(""); }}>
+                    <option value="public">Public</option>
+                    <option value="password_protected">Password protected</option>
+                    <option value="account_required">Account required</option>
+                    <option value="owner_only">Owner only</option>
+                  </NativeSelect>
+                </Field>
+
+                {accessMode === "password_protected" && (
+                  <Field label="Channel password" hint="Leave blank to keep existing password">
+                    <TextInput
+                      value={accessPassword}
+                      onChange={setAccessPassword}
+                      placeholder="New password…"
+                    />
+                  </Field>
+                )}
+              </section>
+
+              {/* Logo */}
+              <section className="space-y-3">
+                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Logo</h3>
+
+                <div className="space-y-3 rounded-md border border-zinc-700/50 bg-zinc-800/50 p-3">
+                  <div className="flex gap-2">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="xs"
+                      className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
+                      onClick={() => fileInputRef.current?.click()}
+                    >
+                      Upload image
+                    </Button>
+                    {logo && (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="xs"
+                        className="text-zinc-500 hover:text-red-400"
+                        onClick={() => setLogo(null)}
+                      >
+                        Clear
+                      </Button>
+                    )}
+                    <input
+                      ref={fileInputRef}
+                      type="file"
+                      accept="image/*,.svg"
+                      className="hidden"
+                      onChange={(e) => {
+                        const file = e.target.files?.[0];
+                        if (!file) return;
+                        const reader = new FileReader();
+                        reader.onload = (ev) => setLogo(ev.target?.result as string ?? null);
+                        reader.readAsDataURL(file);
+                        e.target.value = "";
+                      }}
+                    />
+                  </div>
+
+                  <Field label="URL or SVG markup" hint="Paste a remote URL, data URI, or inline SVG">
+                    <textarea
+                      rows={3}
+                      value={logo ?? ""}
+                      onChange={(e) => setLogo(e.target.value || null)}
+                      placeholder="https://… or <svg>…</svg>"
+                      className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+                    />
+                  </Field>
+
+                  {logo && (
+                    <div className="flex items-center justify-center rounded-md border border-zinc-700 bg-zinc-900 p-3">
+                      {logo.trimStart().startsWith("<") ? (
+                        <div dangerouslySetInnerHTML={{ __html: logo }} className="h-12 w-auto" />
+                      ) : (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img src={logo} alt="" className="h-12 w-auto object-contain" />
+                      )}
+                    </div>
+                  )}
+
+                  <div className="grid grid-cols-2 gap-3">
+                    <Field label="Position">
+                      <NativeSelect value={logoPosition} onChange={(v) => setLogoPosition(v as LogoPosition)}>
+                        <option value="top_left">Top left</option>
+                        <option value="top_right">Top right</option>
+                        <option value="bottom_left">Bottom left</option>
+                        <option value="bottom_right">Bottom right</option>
+                      </NativeSelect>
+                    </Field>
+                    <Field label={`Opacity (${logoOpacity}%)`}>
+                      <input
+                        type="range"
+                        min={0}
+                        max={100}
+                        value={logoOpacity}
+                        onChange={(e) => setLogoOpacity(Number(e.target.value))}
+                        className="w-full accent-zinc-400 mt-2"
+                      />
+                    </Field>
+                  </div>
+                </div>
+              </section>
+
+              {/* Recycle policy */}
+              <section className="space-y-3">
+                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Recycle policy</h3>
+                <RecyclePolicyEditor
+                  policy={recyclePolicy}
+                  errors={fieldErrors}
+                  onChange={setRecyclePolicy}
+                />
+              </section>
+
+              {/* Webhook */}
+              <section className="space-y-3">
+                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Webhook</h3>
+                <Field label="Webhook URL" hint="POST events to this URL on broadcast changes">
+                  <TextInput
+                    value={webhookUrl}
+                    onChange={setWebhookUrl}
+                    placeholder="https://example.com/webhook"
+                  />
+                </Field>
+                {webhookUrl && (
+                  <>
+                    <Field label="Poll interval (seconds)" hint="How often to check for broadcast changes">
+                      <NumberInput
+                        value={webhookPollInterval}
+                        onChange={setWebhookPollInterval}
+                        min={1}
+                        placeholder="5"
+                      />
+                    </Field>
+
+                    <div className="space-y-2">
+                      <p className="text-xs text-zinc-400">Payload format</p>
+                      <div className="flex gap-1.5 flex-wrap">
+                        {(["default", "discord", "slack", "custom"] as WebhookFormat[]).map((fmt) => (
+                          <button
+                            key={fmt}
+                            type="button"
+                            onClick={() => {
+                              setWebhookFormat(fmt);
+                              if (fmt === "discord") setWebhookBodyTemplate(WEBHOOK_PRESETS.discord);
+                              else if (fmt === "slack") setWebhookBodyTemplate(WEBHOOK_PRESETS.slack);
+                              else if (fmt === "default") setWebhookBodyTemplate("");
+                            }}
+                            className={`rounded px-2.5 py-1 text-xs font-medium capitalize transition-colors ${
+                              webhookFormat === fmt
+                                ? "bg-zinc-600 text-zinc-100"
+                                : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200"
+                            }`}
+                          >
+                            {fmt === "default" ? "K-TV default" : fmt}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+
+                    {webhookFormat !== "default" && (
+                      <Field
+                        label="Body template (Handlebars)"
+                        hint="Context: event, timestamp, channel_id, data.item.title, data.item.duration_secs, …"
+                      >
+                        <textarea
+                          rows={6}
+                          value={webhookBodyTemplate}
+                          onChange={(e) => {
+                            setWebhookBodyTemplate(e.target.value);
+                            setWebhookFormat("custom");
+                          }}
+                          placeholder={'{\n  "text": "Now playing: {{data.item.title}}"\n}'}
+                          className="w-full resize-y rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+                        />
+                      </Field>
+                    )}
+
+                    <Field
+                      label="Extra headers (JSON)"
+                      hint={'e.g. {"Authorization": "Bearer token"}'}
+                    >
+                      <textarea
+                        rows={2}
+                        value={webhookHeaders}
+                        onChange={(e) => setWebhookHeaders(e.target.value)}
+                        placeholder={'{"Authorization": "Bearer xxx"}'}
+                        className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+                      />
+                    </Field>
+                  </>
+                )}
+              </section>
+            </div>
+
+            {/* Right column — programming blocks */}
+            <div className="flex flex-1 flex-col overflow-hidden">
+              {/* Upper half: timeline + block list */}
+              <div className="shrink-0 border-b border-zinc-800 px-5 py-4 space-y-3">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
+                    Programming blocks
+                  </h3>
                   <Button
                     type="button"
                     variant="outline"
                     size="xs"
+                    onClick={() => addBlock()}
                     className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
-                    onClick={() => fileInputRef.current?.click()}
                   >
-                    Upload image
+                    <Plus className="size-3" />
+                    Add block
                   </Button>
-                  {logo && (
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="xs"
-                      className="text-zinc-500 hover:text-red-400"
-                      onClick={() => setLogo(null)}
-                    >
-                      Clear
-                    </Button>
-                  )}
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept="image/*,.svg"
-                    className="hidden"
-                    onChange={(e) => {
-                      const file = e.target.files?.[0];
-                      if (!file) return;
-                      const reader = new FileReader();
-                      reader.onload = (ev) => setLogo(ev.target?.result as string ?? null);
-                      reader.readAsDataURL(file);
-                      e.target.value = "";
-                    }}
-                  />
                 </div>
 
-                <Field label="URL or SVG markup" hint="Paste a remote URL, data URI, or inline SVG">
-                  <textarea
-                    rows={3}
-                    value={logo ?? ""}
-                    onChange={(e) => setLogo(e.target.value || null)}
-                    placeholder="https://… or <svg>…</svg>"
-                    className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
-                  />
-                </Field>
+                <BlockTimeline
+                  blocks={blocks}
+                  selectedId={selectedBlockId}
+                  onSelect={setSelectedBlockId}
+                  onChange={setBlocks}
+                  onCreateBlock={(startMins, durationMins) => addBlock(startMins, durationMins)}
+                />
 
-                {logo && (
-                  <div className="flex items-center justify-center rounded-md border border-zinc-700 bg-zinc-900 p-3">
-                    {logo.trimStart().startsWith("<") ? (
-                      <div dangerouslySetInnerHTML={{ __html: logo }} className="h-12 w-auto" />
-                    ) : (
-                      // eslint-disable-next-line @next/next/no-img-element
-                      <img src={logo} alt="" className="h-12 w-auto object-contain" />
-                    )}
+                {blocks.length === 0 ? (
+                  <p className="rounded-md border border-dashed border-zinc-700 px-4 py-4 text-center text-xs text-zinc-600">
+                    No blocks yet. Drag on the timeline or click Add block.
+                  </p>
+                ) : (
+                  <div className="space-y-1 max-h-48 overflow-y-auto">
+                    {blocks.map((block, idx) => (
+                      <button
+                        key={block.id}
+                        type="button"
+                        onClick={() => setSelectedBlockId(block.id)}
+                        className={`flex w-full items-center gap-2 rounded-md px-3 py-2 text-left transition-colors ${
+                          block.id === selectedBlockId
+                            ? "border border-zinc-600 bg-zinc-700/60"
+                            : "border border-transparent hover:bg-zinc-800/60"
+                        }`}
+                      >
+                        <div
+                          className="h-2.5 w-2.5 shrink-0 rounded-full"
+                          style={{ backgroundColor: BLOCK_COLORS[idx % BLOCK_COLORS.length] }}
+                        />
+                        <span className="flex-1 truncate text-sm text-zinc-200">
+                          {block.name || "Unnamed block"}
+                        </span>
+                        <span className="shrink-0 font-mono text-[11px] text-zinc-500">
+                          {block.start_time.slice(0, 5)} · {block.duration_mins}m
+                        </span>
+                        <span
+                          role="button"
+                          onClick={(e) => { e.stopPropagation(); removeBlock(idx); }}
+                          className="rounded p-1 text-zinc-600 hover:bg-zinc-700 hover:text-red-400"
+                        >
+                          <Trash2 className="size-3.5" />
+                        </span>
+                      </button>
+                    ))}
                   </div>
                 )}
-
-                <div className="grid grid-cols-2 gap-3">
-                  <Field label="Position">
-                    <NativeSelect value={logoPosition} onChange={(v) => setLogoPosition(v as LogoPosition)}>
-                      <option value="top_left">Top left</option>
-                      <option value="top_right">Top right</option>
-                      <option value="bottom_left">Bottom left</option>
-                      <option value="bottom_right">Bottom right</option>
-                    </NativeSelect>
-                  </Field>
-                  <Field label={`Opacity (${logoOpacity}%)`}>
-                    <input
-                      type="range"
-                      min={0}
-                      max={100}
-                      value={logoOpacity}
-                      onChange={(e) => setLogoOpacity(Number(e.target.value))}
-                      className="w-full accent-zinc-400 mt-2"
-                    />
-                  </Field>
-                </div>
-              </div>
-            </section>
-
-            {/* Programming blocks */}
-            <section className="space-y-3">
-              <div className="flex items-center justify-between">
-                <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">
-                  Programming blocks
-                </h3>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="xs"
-                  onClick={() => addBlock()}
-                  className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
-                >
-                  <Plus className="size-3" />
-                  Add block
-                </Button>
               </div>
 
-              <BlockTimeline
-                blocks={blocks}
-                selectedId={selectedBlockId}
-                onSelect={setSelectedBlockId}
-                onChange={setBlocks}
-                onCreateBlock={(startMins, durationMins) => addBlock(startMins, durationMins)}
-              />
-
-              {blocks.length === 0 && (
-                <p className="rounded-md border border-dashed border-zinc-700 px-4 py-6 text-center text-xs text-zinc-600">
-                  No blocks yet. Drag on the timeline or click Add block.
-                </p>
-              )}
-
-              <div className="space-y-2">
-                {blocks.map((block, idx) => (
-                  <BlockEditor
-                    key={block.id}
-                    block={block}
-                    index={idx}
-                    isSelected={block.id === selectedBlockId}
-                    color={BLOCK_COLORS[idx % BLOCK_COLORS.length]}
-                    errors={fieldErrors}
-                    onChange={(b) => updateBlock(idx, b)}
-                    onRemove={() => removeBlock(idx)}
-                    onSelect={() => setSelectedBlockId(block.id)}
-                    providers={providers}
-                  />
-                ))}
+              {/* Lower half: selected block detail */}
+              <div className="flex-1 overflow-y-auto px-5 py-4">
+                {(() => {
+                  if (selectedBlockId === null) {
+                    return (
+                      <div className="flex h-full items-center justify-center text-sm text-zinc-600">
+                        Select a block or create one
+                      </div>
+                    );
+                  }
+                  const selectedIdx = blocks.findIndex((b) => b.id === selectedBlockId);
+                  const selectedBlock = selectedIdx >= 0 ? blocks[selectedIdx] : null;
+                  if (!selectedBlock) {
+                    return (
+                      <div className="flex h-full items-center justify-center text-sm text-zinc-600">
+                        Select a block or create one
+                      </div>
+                    );
+                  }
+                  return (
+                    <BlockEditor
+                      block={selectedBlock}
+                      index={selectedIdx}
+                      errors={fieldErrors}
+                      onChange={(b) => updateBlock(selectedIdx, b)}
+                      providers={providers}
+                    />
+                  );
+                })()}
               </div>
-            </section>
-
-            {/* Recycle policy */}
-            <section className="space-y-3">
-              <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Recycle policy</h3>
-              <RecyclePolicyEditor
-                policy={recyclePolicy}
-                errors={fieldErrors}
-                onChange={setRecyclePolicy}
-              />
-            </section>
-
-            {/* Webhook */}
-            <section className="space-y-3">
-              <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Webhook</h3>
-              <Field label="Webhook URL" hint="POST events to this URL on broadcast changes">
-                <TextInput
-                  value={webhookUrl}
-                  onChange={setWebhookUrl}
-                  placeholder="https://example.com/webhook"
-                />
-              </Field>
-              {webhookUrl && (
-                <>
-                  <Field label="Poll interval (seconds)" hint="How often to check for broadcast changes">
-                    <NumberInput
-                      value={webhookPollInterval}
-                      onChange={setWebhookPollInterval}
-                      min={1}
-                      placeholder="5"
-                    />
-                  </Field>
-
-                  <div className="space-y-2">
-                    <p className="text-xs text-zinc-400">Payload format</p>
-                    <div className="flex gap-1.5 flex-wrap">
-                      {(["default", "discord", "slack", "custom"] as WebhookFormat[]).map((fmt) => (
-                        <button
-                          key={fmt}
-                          type="button"
-                          onClick={() => {
-                            setWebhookFormat(fmt);
-                            if (fmt === "discord") setWebhookBodyTemplate(WEBHOOK_PRESETS.discord);
-                            else if (fmt === "slack") setWebhookBodyTemplate(WEBHOOK_PRESETS.slack);
-                            else if (fmt === "default") setWebhookBodyTemplate("");
-                          }}
-                          className={`rounded px-2.5 py-1 text-xs font-medium capitalize transition-colors ${
-                            webhookFormat === fmt
-                              ? "bg-zinc-600 text-zinc-100"
-                              : "bg-zinc-800 text-zinc-400 hover:bg-zinc-700 hover:text-zinc-200"
-                          }`}
-                        >
-                          {fmt === "default" ? "K-TV default" : fmt}
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-
-                  {webhookFormat !== "default" && (
-                    <Field
-                      label="Body template (Handlebars)"
-                      hint="Context: event, timestamp, channel_id, data.item.title, data.item.duration_secs, …"
-                    >
-                      <textarea
-                        rows={6}
-                        value={webhookBodyTemplate}
-                        onChange={(e) => {
-                          setWebhookBodyTemplate(e.target.value);
-                          setWebhookFormat("custom");
-                        }}
-                        placeholder={'{\n  "text": "Now playing: {{data.item.title}}"\n}'}
-                        className="w-full resize-y rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
-                      />
-                    </Field>
-                  )}
-
-                  <Field
-                    label="Extra headers (JSON)"
-                    hint={'e.g. {"Authorization": "Bearer token"}'}
-                  >
-                    <textarea
-                      rows={2}
-                      value={webhookHeaders}
-                      onChange={(e) => setWebhookHeaders(e.target.value)}
-                      placeholder={'{"Authorization": "Bearer xxx"}'}
-                      className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 font-mono text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
-                    />
-                  </Field>
-                </>
-              )}
-            </section>
+            </div>
           </div>
 
           {/* Footer */}
diff --git a/k-tv-frontend/app/(main)/dashboard/page.tsx b/k-tv-frontend/app/(main)/dashboard/page.tsx
index 8e82196..bc705c1 100644
--- a/k-tv-frontend/app/(main)/dashboard/page.tsx
+++ b/k-tv-frontend/app/(main)/dashboard/page.tsx
@@ -241,7 +241,6 @@ export default function DashboardPage() {
             <Button
               onClick={() => setTranscodeOpen(true)}
               title="Transcode settings"
-              className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
             >
               <Settings2 className="size-4" />
               Transcode
@@ -257,7 +256,6 @@ export default function DashboardPage() {
               }
               disabled={rescanLibrary.isPending}
               title="Rescan local files directory"
-              className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
             >
               <RefreshCw className={`size-4 ${rescanLibrary.isPending ? "animate-spin" : ""}`} />
               Rescan library
@@ -268,7 +266,6 @@ export default function DashboardPage() {
               onClick={handleRegenerateAll}
               disabled={isRegeneratingAll}
               title="Regenerate schedules for all channels"
-              className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
             >
               <RefreshCw
                 className={`size-4 ${isRegeneratingAll ? "animate-spin" : ""}`}
@@ -276,17 +273,11 @@ export default function DashboardPage() {
               Regenerate all
             </Button>
           )}
-          <Button
-            onClick={() => setIptvOpen(true)}
-            className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
-          >
+          <Button onClick={() => setIptvOpen(true)}>
             <Antenna className="size-4" />
             IPTV
           </Button>
-          <Button
-            onClick={() => setImportOpen(true)}
-            className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
-          >
+          <Button onClick={() => setImportOpen(true)}>
             <Upload className="size-4" />
             Import
           </Button>
diff --git a/k-tv-frontend/app/layout.tsx b/k-tv-frontend/app/layout.tsx
index 8d13d94..74b3c80 100644
--- a/k-tv-frontend/app/layout.tsx
+++ b/k-tv-frontend/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="dark">
       <head>
         <Script
           src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"