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)/tv/components/volume-control.tsx

@@ -0,0 +1,59 @@
+import type { LucideIcon } from "lucide-react";
+
+interface VolumeControlProps {
+  volume: number;
+  isMuted: boolean;
+  VolumeIcon: LucideIcon;
+  showSlider: boolean;
+  onToggleSlider: () => void;
+  onToggleMute: () => void;
+  onVolumeChange: (v: number) => void;
+}
+
+export function VolumeControl({
+  volume,
+  isMuted,
+  VolumeIcon,
+  showSlider,
+  onToggleSlider,
+  onToggleMute,
+  onVolumeChange,
+}: VolumeControlProps) {
+  return (
+    <div className="pointer-events-auto relative">
+      <button
+        className="rounded-md bg-black/50 p-1.5 text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
+        onClick={onToggleSlider}
+        title="Volume"
+      >
+        <VolumeIcon className="h-4 w-4" />
+      </button>
+      {showSlider && (
+        <div className="absolute right-0 top-9 z-30 w-36 rounded-lg border border-zinc-700 bg-zinc-900/95 p-3 shadow-xl backdrop-blur">
+          <input
+            type="range"
+            min={0}
+            max={100}
+            value={isMuted ? 0 : Math.round(volume * 100)}
+            onChange={(e) => {
+              const v = Number(e.target.value) / 100;
+              onVolumeChange(v);
+            }}
+            className="w-full accent-white"
+          />
+          <div className="mt-1.5 flex items-center justify-between">
+            <button
+              onClick={onToggleMute}
+              className="text-[10px] text-zinc-500 hover:text-zinc-300"
+            >
+              {isMuted ? "Unmute [M]" : "Mute [M]"}
+            </button>
+            <span className="font-mono text-[10px] text-zinc-500">
+              {isMuted ? "0" : Math.round(volume * 100)}%
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}