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/hooks/use-quality.ts

@@ -0,0 +1,39 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+
+export const QUALITY_OPTIONS = [
+  { value: "direct", label: "Auto" },
+  { value: "40000000", label: "40 Mbps" },
+  { value: "8000000", label: "8 Mbps" },
+  { value: "2000000", label: "2 Mbps" },
+];
+
+export function useQuality(channelId?: string, slotId?: string) {
+  const queryClient = useQueryClient();
+  const [quality, setQuality] = useState<string>(() => {
+    try {
+      return localStorage.getItem("quality") ?? "direct";
+    } catch {
+      return "direct";
+    }
+  });
+  const [showQualityPicker, setShowQualityPicker] = useState(false);
+
+  const changeQuality = useCallback(
+    (q: string) => {
+      setQuality(q);
+      try {
+        localStorage.setItem("quality", q);
+      } catch {}
+      setShowQualityPicker(false);
+      queryClient.invalidateQueries({
+        queryKey: ["stream-url", channelId, slotId],
+      });
+    },
+    [queryClient, channelId, slotId],
+  );
+
+  return { quality, showQualityPicker, setShowQualityPicker, changeQuality, QUALITY_OPTIONS };
+}