refactor(frontend): extract logic to hooks, split inline components

Area 1 (tv/page.tsx 964→423 lines):
- hooks: use-fullscreen, use-idle, use-volume, use-quality, use-subtitles,
  use-channel-input, use-channel-passwords, use-tv-keyboard
- components: SubtitlePicker, VolumeControl, QualityPicker, TopControlBar,
  LogoWatermark, AutoplayPrompt, ChannelNumberOverlay, TvBaseLayer

Area 2 (edit-channel-sheet.tsx 1244→678 lines):
- hooks: use-channel-form (all form state + reset logic)
- lib/schemas.ts: extracted Zod schemas + extractErrors
- components: AlgorithmicFilterEditor, RecyclePolicyEditor, WebhookEditor,
  AccessSettingsEditor, LogoEditor

Area 3 (dashboard/page.tsx 406→261 lines):
- hooks: use-channel-order, use-import-channel, use-regenerate-all
- lib/channel-export.ts: pure export utility
- components: DashboardHeader

k-tv-frontend/app/(main)/dashboard/components/logo-editor.tsx

@@ -0,0 +1,142 @@
+import { useRef } from "react";
+import { Button } from "@/components/ui/button";
+import type { LogoPosition } from "@/lib/types";
+
+const LOGO_POSITIONS: { value: LogoPosition; label: string }[] = [
+  { value: "top_right", label: "Top right" },
+  { value: "top_left", label: "Top left" },
+  { value: "bottom_right", label: "Bottom right" },
+  { value: "bottom_left", label: "Bottom left" },
+];
+
+interface LogoEditorProps {
+  logo: string | null;
+  logoPosition: LogoPosition;
+  logoOpacity: number;
+  onLogoChange: (logo: string | null) => void;
+  onPositionChange: (position: LogoPosition) => void;
+  onOpacityChange: (opacity: number) => void;
+}
+
+export function LogoEditor({
+  logo,
+  logoPosition,
+  logoOpacity,
+  onLogoChange,
+  onPositionChange,
+  onOpacityChange,
+}: LogoEditorProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      const result = ev.target?.result;
+      if (typeof result === "string") onLogoChange(result);
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  };
+
+  return (
+    <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={() => onLogoChange(null)}
+          >
+            Clear
+          </Button>
+        )}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleFile}
+        />
+      </div>
+
+      <div className="space-y-1.5">
+        <label className="block text-xs font-medium text-zinc-400">
+          URL or SVG
+        </label>
+        <textarea
+          rows={2}
+          value={logo ?? ""}
+          onChange={(e) => onLogoChange(e.target.value || null)}
+          placeholder="https://example.com/logo.png or <svg>…</svg>"
+          className="w-full resize-none rounded-md border border-zinc-700 bg-zinc-800 px-3 py-2 text-xs text-zinc-100 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-zinc-400">
+            Position
+          </label>
+          <select
+            value={logoPosition}
+            onChange={(e) => onPositionChange(e.target.value as LogoPosition)}
+            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"
+          >
+            {LOGO_POSITIONS.map((p) => (
+              <option key={p.value} value={p.value}>
+                {p.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="space-y-1.5">
+          <label className="block text-xs font-medium text-zinc-400">
+            Opacity ({logoOpacity}%)
+          </label>
+          <input
+            type="range"
+            min={0}
+            max={100}
+            value={logoOpacity}
+            onChange={(e) => onOpacityChange(Number(e.target.value))}
+            className="w-full accent-zinc-400"
+          />
+        </div>
+      </div>
+
+      {logo && (
+        <div className="flex items-center justify-center rounded-md border border-zinc-700/50 bg-zinc-900 p-2">
+          {logo.trimStart().startsWith("<") ? (
+            <div
+              dangerouslySetInnerHTML={{ __html: logo }}
+              className="h-10 w-auto"
+              style={{ opacity: logoOpacity / 100 }}
+            />
+          ) : (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={logo}
+              alt="Logo preview"
+              className="h-10 w-auto object-contain"
+              style={{ opacity: logoOpacity / 100 }}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}