feat: uniform control height, chrome auto-hide, streaming quality

Every control in the app now shares one height (CONTROL_H), with width
still growing to fit its label. The player transport is larger, Back is
an icon, and the footer buttons match the prev/next size.

Player chrome — transport and edge arrows — fades after 2.6s of
inactivity and never hides while paused.

The title-bar strip collapses in macOS window fullscreen, where the
traffic lights are gone and it was just a blank white bar.

Streaming quality is now selectable alongside download quality. A cap is
applied by rewriting YouTube's HLS master playlist down to the best
variant at or below the chosen height, keeping its audio group. That
playlist is served from a small loopback HTTP server: Safari's native
HLS is backed by AVFoundation, which cannot read blob: or custom-scheme
URLs, so a Blob URL silently fails to play.

Settings closes with an icon button and its selects match the shared
control height.

src/App.tsx

@@ -13,7 +13,11 @@ import { useAppearance } from "./hooks/useAppearance";
 import { useConnectivity } from "./hooks/useConnectivity";
 import { useDownloads } from "./hooks/useDownloads";
 import { useFeed } from "./hooks/useFeed";
-import { QUALITIES, type FeedFilter, type FeedItem, type Quality, type RefreshProgress } from "./types";
+import { useWindowFullscreen } from "./hooks/useWindowFullscreen";
+import {
+  QUALITIES, STREAM_QUALITIES,
+  type FeedFilter, type FeedItem, type Quality, type RefreshProgress,
+} from "./types";
 
 const TOAST_MS = 2400;
 /** How often to pull new videos while online, so the feed stays live. */
@@ -44,6 +48,14 @@ export default function App() {
   const [showSettings, setShowSettings] = useState(false);
   // Index into the current feed, so the player can step through it.
   const [playingIndex, setPlayingIndex] = useState<number | null>(null);
+  const [streamQuality, setStreamQuality] = useState<Quality>(() => {
+    try {
+      const stored = localStorage.getItem("flighttube.streamQuality");
+      return STREAM_QUALITIES.some((q) => q.value === stored) ? (stored as Quality) : "best";
+    } catch {
+      return "best";
+    }
+  });
   const [quality, setQuality] = useState<Quality>(() => {
     try {
       const stored = localStorage.getItem("flighttube.quality");
@@ -58,6 +70,7 @@ export default function App() {
   const [failure, setFailure] = useState<string | null>(null);
 
   const { mode, setMode } = useAppearance();
+  const windowFullscreen = useWindowFullscreen();
   const { online, reachable, forcedOffline, setForcedOffline, probe } = useConnectivity();
 
   // A toast reports success and fades; a modal reports a failure or asks a
@@ -74,13 +87,14 @@ export default function App() {
     try {
       localStorage.setItem("flighttube.view", view);
       localStorage.setItem("flighttube.quality", quality);
+      localStorage.setItem("flighttube.streamQuality", streamQuality);
       localStorage.setItem("flighttube.downloadedOnly", downloadedOnly ? "1" : "0");
       localStorage.setItem("flighttube.hideShorts", hideShorts ? "1" : "0");
       localStorage.setItem("flighttube.sidebarHidden", sidebarHidden ? "1" : "0");
     } catch {
       /* storage blocked */
     }
-  }, [view, quality, downloadedOnly, hideShorts, sidebarHidden]);
+  }, [view, quality, streamQuality, downloadedOnly, hideShorts, sidebarHidden]);
 
   // Offline, the only videos that can be played are the ones already on disk,
   // so the feed collapses to those regardless of the toggle.
@@ -203,11 +217,15 @@ export default function App() {
   return (
     <div className="flex h-screen flex-col">
       {/* The webview paints the title bar itself. It sits directly above the
-          sidebar and top bar, so it takes the panel colour, not the page's. */}
-      <div
-        data-tauri-drag-region
-        className="h-9 shrink-0 bg-white dark:bg-slate-900"
-      />
+          sidebar and top bar, so it takes the panel colour, not the page's.
+          In macOS window fullscreen the traffic lights are gone, so the strip
+          would just be a blank bar — it collapses instead. */}
+      {!windowFullscreen && (
+        <div
+          data-tauri-drag-region
+          className="h-9 shrink-0 bg-white dark:bg-slate-900"
+        />
+      )}
 
       <div className="relative flex min-h-0 flex-1 flex-col lg:flex-row">
         {/* With the sidebar hidden, a thin strip along the left edge brings it
@@ -322,6 +340,7 @@ export default function App() {
           path={playing.path}
           index={playingIndex}
           total={items.length}
+          maxHeight={streamQuality === "best" ? null : Number(streamQuality)}
           onPrev={
             stepFrom(playingIndex, -1) != null
               ? () => setPlayingIndex(stepFrom(playingIndex, -1))
@@ -361,6 +380,8 @@ export default function App() {
           onAppearance={setMode}
           quality={quality}
           onQuality={setQuality}
+          streamQuality={streamQuality}
+          onStreamQuality={setStreamQuality}
           onError={setFailure}
           onImported={(n) => {
             reload();

src/api.ts

@@ -12,6 +12,7 @@ import type {
   Quality,
   RefreshProgress,
   RefreshSummary,
+  Stream,
 } from "./types";
 
 export const checkPrereqs = () => invoke<Prereqs>("check_prereqs");
@@ -37,9 +38,19 @@ export const deleteDownload = (videoId: string) =>
 
 export const getConnectivity = () => invoke<boolean>("get_connectivity");
 
-/** A directly playable URL (HLS master playlist) for an undownloaded video. */
-export const resolveStream = (videoId: string) =>
-  invoke<string>("resolve_stream", { videoId });
+/**
+ * A directly playable URL for an undownloaded video. When a quality cap is set
+ * the backend serves a rewritten playlist from its own loopback server, so this
+ * is always a plain URL either way.
+ */
+export async function resolveStream(
+  videoId: string,
+  maxHeight: number | null,
+): Promise<string> {
+  const s = await invoke<Stream>("resolve_stream", { videoId, maxHeight });
+  if (!s.url) throw new Error("No playable stream was returned.");
+  return s.url;
+}
 
 export const setLibraryPath = (path: string) =>
   invoke<string>("set_library_path", { path });

src/components/DownloadButton.tsx

@@ -1,6 +1,7 @@
 import type { LiveDownload } from "../hooks/useDownloads";
 import type { FeedItem } from "../types";
 import { humanEta } from "./format";
+import { CONTROL_H } from "./ui";
 
 interface Props {
   item: FeedItem;
@@ -11,7 +12,9 @@ interface Props {
   onDelete: () => void;
 }
 
-const CHIP = "rounded-lg px-2.5 py-1.5 text-[11px] font-medium shrink-0 cursor-pointer";
+const CHIP =
+  `inline-flex ${CONTROL_H} shrink-0 cursor-pointer items-center justify-center rounded-lg ` +
+  "px-2.5 text-[12px] font-medium";
 
 export default function DownloadButton({
   item, live, online, onDownload, onCancel, onDelete,
@@ -38,22 +41,18 @@ export default function DownloadButton({
     const known = state === "running" && pct != null;
     return (
       <button onClick={onCancel} title={humanEta(live?.eta ?? null) || "Cancel download"}
-        className={`${CHIP} group w-[104px] border border-slate-300 text-slate-500
-                    hover:border-red-500 hover:text-red-600
-                    dark:border-slate-700 dark:text-slate-400 dark:hover:border-red-500 dark:hover:text-red-400`}>
-        <span className="hidden group-hover:block">Cancel</span>
-        <span className="block group-hover:hidden">
-          <span className="mb-1 block font-mono tabular-nums">
-            {known ? `${pct!.toFixed(0)}%` : state === "queued" ? "Queued" : "Starting"}
-          </span>
-          <span className="block h-1 overflow-hidden rounded-full bg-slate-200 dark:bg-slate-700">
-            <span
-              className={`block h-full rounded-full bg-sky-500 transition-[width] duration-100 ${
-                known ? "" : "animate-pulse"
-              }`}
-              style={{ width: known ? `${pct}%` : "35%" }}
-            />
-          </span>
+        className={`${CHIP} group relative w-[104px] overflow-hidden border border-slate-300
+                    text-slate-500 hover:border-red-500 hover:text-red-600
+                    dark:border-slate-700 dark:text-slate-400 dark:hover:border-red-500
+                    dark:hover:text-red-400`}>
+        {/* Progress fills the chip itself, so the control stays one line tall. */}
+        <span
+          className="absolute inset-y-0 left-0 bg-sky-500/15 transition-[width] duration-100"
+          style={{ width: known ? `${pct}%` : "35%" }}
+        />
+        <span className="relative hidden group-hover:inline">Cancel</span>
+        <span className="relative inline font-mono tabular-nums group-hover:hidden">
+          {known ? `${pct!.toFixed(0)}%` : state === "queued" ? "Queued" : "Starting"}
         </span>
       </button>
     );

src/components/Player.tsx

@@ -16,6 +16,8 @@ interface Props {
   /** Present only while streaming, so the video can be saved from here. */
   onDownload?: () => void;
   downloading?: boolean;
+  /** Max height for streaming, or null to let the player adapt. */
+  maxHeight: number | null;
   /** Position in the current feed, for the "3 of 180" readout. */
   index: number;
   total: number;
@@ -92,12 +94,16 @@ const RESUME_EDGE_S = 5;
  * cannot be used: it rejects a `tauri://` origin with "Error 153".
  */
 export default function Player({
-  item, path, onClose, onDelete, onPrev, onNext, onDownload, downloading, index, total,
+  item, path, onClose, onDelete, onPrev, onNext, onDownload, downloading,
+  maxHeight, index, total,
 }: Props) {
   const streaming = path === null;
   const [src, setSrc] = useState<string | null>(path ? fileUrl(path) : null);
   const [error, setError] = useState<string | null>(null);
   const [buffering, setBuffering] = useState(true);
+  // Controls and edge arrows fade away while you are just watching.
+  const [chromeVisible, setChromeVisible] = useState(true);
+  const hideTimer = useRef<number | undefined>(undefined);
   const videoRef = useRef<HTMLVideoElement>(null);
   const stageRef = useRef<HTMLDivElement>(null);
   const lastSave = useRef(0);
@@ -110,13 +116,14 @@ export default function Player({
     let cancelled = false;
     setSrc(null);
     setError(null);
-    resolveStream(item.id)
+    resolveStream(item.id, maxHeight)
       .then((u) => !cancelled && setSrc(u))
       .catch((e) => !cancelled && setError(String(e)));
     return () => {
       cancelled = true;
     };
-  }, [item.id, path]);
+  }, [item.id, path, maxHeight]);
+
 
   const persist = useCallback(() => {
     const v = videoRef.current;
@@ -176,8 +183,22 @@ export default function Player({
   const edgeBtn =
     "absolute top-1/2 z-10 -translate-y-1/2 grid size-11 place-items-center rounded-full " +
     "bg-slate-950/55 text-2xl leading-none text-white backdrop-blur cursor-pointer " +
-    "opacity-0 transition-opacity group-hover/stage:opacity-100 focus-visible:opacity-100 " +
-    "hover:bg-slate-950/80 disabled:hidden";
+    "transition-opacity duration-200 hover:bg-slate-950/80 disabled:hidden " +
+    (chromeVisible ? "opacity-100" : "pointer-events-none opacity-0");
+
+  const showChrome = useCallback(() => {
+    setChromeVisible(true);
+    window.clearTimeout(hideTimer.current);
+    hideTimer.current = window.setTimeout(() => {
+      // Never hide while paused — there would be no way back to play.
+      if (!videoRef.current?.paused) setChromeVisible(false);
+    }, 2600);
+  }, []);
+
+  useEffect(() => {
+    showChrome();
+    return () => window.clearTimeout(hideTimer.current);
+  }, [showChrome, src]);
 
   const navBtn =
     "rounded-lg border border-slate-300 px-2 py-1.5 text-[11px] font-medium cursor-pointer " +
@@ -192,8 +213,11 @@ export default function Player({
         className="flex items-center gap-2 border-b border-slate-200 bg-white px-4 py-3
                    dark:border-slate-800 dark:bg-slate-900"
       >
-        <button onClick={leave} className={`${BTN} cursor-pointer py-1.5`}>
-          ← Back
+        <button onClick={leave} title="Back to the feed (Esc)" aria-label="Back"
+          className={`${navBtn} w-[30px] p-0`}>
+          <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 6l-6 6 6 6" />
+          </svg>
         </button>
 
         <button onClick={onPrev} disabled={!onPrev} title="Previous video" className={navBtn}>
@@ -229,7 +253,9 @@ export default function Player({
       <div
         ref={stageRef}
         onContextMenu={(e) => e.preventDefault()}
-        className="group/stage relative min-h-0 flex-1 bg-slate-950"
+        onMouseMove={showChrome}
+        onMouseLeave={() => !videoRef.current?.paused && setChromeVisible(false)}
+        className={`relative min-h-0 flex-1 bg-slate-950 ${chromeVisible ? "" : "cursor-none"}`}
       >
         {/* Edge arrows, the way a player wants them: big targets on the left and
             right of the picture. They fade in on hover so they never sit on top
@@ -301,7 +327,13 @@ export default function Player({
           )
         )}
         {src && !error && (
-          <PlayerControls videoRef={videoRef} stageRef={stageRef} />
+          <div
+            className={`transition-opacity duration-200 ${
+              chromeVisible ? "opacity-100" : "pointer-events-none opacity-0"
+            }`}
+          >
+            <PlayerControls videoRef={videoRef} stageRef={stageRef} onActivity={showChrome} />
+          </div>
         )}
       </div>
 
@@ -323,14 +355,14 @@ export default function Player({
               <button
                 onClick={onDownload}
                 disabled={downloading}
-                className={`${BTN} cursor-pointer whitespace-nowrap py-1.5`}
+                className={`${navBtn} whitespace-nowrap`}
               >
                 {downloading ? "Downloading…" : "Download"}
               </button>
             )}
             <button
               onClick={() => openExternal(`https://www.youtube.com/watch?v=${item.id}`)}
-              className={`${BTN} cursor-pointer whitespace-nowrap py-1.5`}
+              className={`${navBtn} whitespace-nowrap`}
             >
               Open on YouTube
             </button>

src/components/PlayerControls.tsx

@@ -20,7 +20,7 @@ function clock(seconds: number): string {
 }
 
 const btn =
-  "grid size-8 shrink-0 place-items-center rounded-md text-white/90 cursor-pointer " +
+  "grid size-10 shrink-0 place-items-center rounded-lg text-white/90 cursor-pointer " +
   "hover:bg-white/15 hover:text-white disabled:opacity-30 disabled:cursor-not-allowed";
 
 /**
@@ -113,17 +113,17 @@ export default function PlayerControls({ videoRef, stageRef, onActivity }: Props
     <div
       // Clicks here must not reach the video's own play/pause handler.
       onClick={(e) => e.stopPropagation()}
-      className="absolute inset-x-0 bottom-0 z-20 flex items-center gap-2 bg-gradient-to-t
-                 from-slate-950/85 via-slate-950/60 to-transparent px-4 pb-3 pt-8"
+      className="absolute inset-x-0 bottom-0 z-20 flex items-center gap-2.5 bg-gradient-to-t
+                 from-slate-950/90 via-slate-950/65 to-transparent px-5 pb-4 pt-10"
     >
       <button onClick={togglePlay} className={btn} title={playing ? "Pause (space)" : "Play (space)"}>
         {playing ? (
-          <svg viewBox="0 0 24 24" className="size-4" fill="currentColor">
+          <svg viewBox="0 0 24 24" className="size-5" fill="currentColor">
             <rect x="6" y="5" width="4" height="14" rx="1" />
             <rect x="14" y="5" width="4" height="14" rx="1" />
           </svg>
         ) : (
-          <svg viewBox="0 0 24 24" className="size-4" fill="currentColor">
+          <svg viewBox="0 0 24 24" className="size-5" fill="currentColor">
             <path d="M8 5.5v13l11-6.5z" />
           </svg>
         )}
@@ -134,7 +134,7 @@ export default function PlayerControls({ videoRef, stageRef, onActivity }: Props
         className={btn}
         title={`Back ${SKIP_S}s`}
       >
-        <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2">
+        <svg viewBox="0 0 24 24" className="size-5" fill="none" stroke="currentColor" strokeWidth="2">
           <path strokeLinecap="round" strokeLinejoin="round" d="M11 17l-5-5 5-5M18 17l-5-5 5-5" />
         </svg>
       </button>
@@ -143,12 +143,12 @@ export default function PlayerControls({ videoRef, stageRef, onActivity }: Props
         className={btn}
         title={`Forward ${SKIP_S}s`}
       >
-        <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2">
+        <svg viewBox="0 0 24 24" className="size-5" fill="none" stroke="currentColor" strokeWidth="2">
           <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5-5 5M6 7l5 5-5 5" />
         </svg>
       </button>
 
-      <span className="shrink-0 font-mono text-[11px] tabular-nums text-white/80">{clock(time)}</span>
+      <span className="shrink-0 font-mono text-[12px] tabular-nums text-white/85">{clock(time)}</span>
 
       <input
         type="range"
@@ -162,20 +162,20 @@ export default function PlayerControls({ videoRef, stageRef, onActivity }: Props
           onActivity?.();
         }}
         aria-label="Seek"
-        className="h-1 min-w-0 flex-1 cursor-pointer appearance-none rounded-full bg-white/25 accent-sky-500"
+        className="h-1.5 min-w-0 flex-1 cursor-pointer appearance-none rounded-full bg-white/25 accent-sky-500"
         style={{
           background: `linear-gradient(to right, var(--color-sky-500) ${pct}%, rgba(255,255,255,0.25) ${pct}%)`,
         }}
       />
 
-      <span className="shrink-0 font-mono text-[11px] tabular-nums text-white/80">{clock(duration)}</span>
+      <span className="shrink-0 font-mono text-[12px] tabular-nums text-white/85">{clock(duration)}</span>
 
       <button
         onClick={act((v) => (v.muted = !v.muted))}
         className={btn}
         title={muted || volume === 0 ? "Unmute" : "Mute"}
       >
-        <svg viewBox="0 0 24 24" className="size-4" fill="currentColor">
+        <svg viewBox="0 0 24 24" className="size-5" fill="currentColor">
           <path d="M4 9v6h4l5 4V5L8 9H4z" />
           {muted || volume === 0 ? (
             <path d="M16 9l5 6M21 9l-5 6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" />
@@ -204,7 +204,7 @@ export default function PlayerControls({ videoRef, stageRef, onActivity }: Props
           onActivity?.();
         }}
         aria-label="Volume"
-        className="h-1 w-20 shrink-0 cursor-pointer appearance-none rounded-full accent-sky-500"
+        className="h-1.5 w-24 shrink-0 cursor-pointer appearance-none rounded-full accent-sky-500"
         style={{
           background: `linear-gradient(to right, rgba(255,255,255,0.85) ${
             (muted ? 0 : volume) * 100
@@ -213,14 +213,14 @@ export default function PlayerControls({ videoRef, stageRef, onActivity }: Props
       />
 
       <button onClick={togglePip} className={btn} title={pip ? "Leave Picture in Picture" : "Picture in Picture"}>
-        <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2">
+        <svg viewBox="0 0 24 24" className="size-5" fill="none" stroke="currentColor" strokeWidth="2">
           <rect x="3" y="5" width="18" height="14" rx="2" />
           <rect x="12" y="11" width="7" height="6" rx="1" fill="currentColor" stroke="none" />
         </svg>
       </button>
 
       <button onClick={toggleFull} className={btn} title={full ? "Leave full screen (f)" : "Full screen (f)"}>
-        <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2">
+        <svg viewBox="0 0 24 24" className="size-5" fill="none" stroke="currentColor" strokeWidth="2">
           {full ? (
             <path strokeLinecap="round" strokeLinejoin="round" d="M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5" />
           ) : (

src/components/Settings.tsx

@@ -3,10 +3,12 @@ import {
   checkPrereqs, importTakeoutCsv, pickLibraryFolder, pickTakeoutFile, previewTakeoutImport,
 } from "../api";
 import { APPEARANCE_MODES, type Appearance } from "../hooks/useAppearance";
-import { QUALITIES, type ImportPreview, type Prereqs, type Quality } from "../types";
+import {
+  QUALITIES, STREAM_QUALITIES, type ImportPreview, type Prereqs, type Quality,
+} from "../types";
 import TakeoutGuide from "./TakeoutGuide";
 import {
-  BTN_CHROME, BTN_PRIMARY, Dialog, HELP, LABEL, SectionHeading, Segmented, SUBPANEL,
+  BTN_PRIMARY, CONTROL_H, Dialog, HELP, ICON_BTN, LABEL, SectionHeading, Segmented, SUBPANEL,
 } from "./ui";
 
 interface Props {
@@ -16,9 +18,15 @@ interface Props {
   onAppearance: (a: Appearance) => void;
   quality: Quality;
   onQuality: (q: Quality) => void;
+  streamQuality: Quality;
+  onStreamQuality: (q: Quality) => void;
   onError: (message: string) => void;
 }
 
+const SELECT =
+  `w-full ${CONTROL_H} cursor-pointer rounded-lg border border-slate-300 bg-white px-2 ` +
+  "text-[12px] outline-none dark:border-slate-700 dark:bg-slate-800";
+
 function StatusRow({ label, value }: { label: string; value: string | null }) {
   return (
     <div className="flex items-start justify-between gap-4 border-b border-slate-200 py-2 last:border-b-0 dark:border-slate-800">
@@ -35,7 +43,8 @@ function StatusRow({ label, value }: { label: string; value: string | null }) {
 }
 
 export default function Settings({
-  onClose, onImported, appearance, onAppearance, quality, onQuality, onError,
+  onClose, onImported, appearance, onAppearance, quality, onQuality,
+  streamQuality, onStreamQuality, onError,
 }: Props) {
   const [prereqs, setPrereqs] = useState<Prereqs | null>(null);
   const [pending, setPending] = useState<{ path: string; preview: ImportPreview } | null>(null);
@@ -96,7 +105,17 @@ export default function Settings({
         >
           <header className="flex items-center justify-between gap-2 border-b border-slate-200 px-5 py-4 dark:border-slate-800">
             <h2 className="text-[15px] font-semibold tracking-tight">Settings</h2>
-            <button onClick={onClose} className={`${BTN_CHROME} cursor-pointer`}>Close</button>
+            <button
+              onClick={onClose}
+              title="Close settings"
+              aria-label="Close settings"
+              className={`${ICON_BTN} text-slate-500 hover:bg-slate-100 hover:text-slate-900
+                          dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white`}
+            >
+              <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2">
+                <path strokeLinecap="round" d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            </button>
           </header>
 
           <div className="min-h-0 flex-1 overflow-y-auto">
@@ -135,9 +154,7 @@ export default function Settings({
                 <select
                   value={quality}
                   onChange={(e) => onQuality(e.target.value as Quality)}
-                  className="w-full rounded-lg border border-slate-300 bg-white px-2 py-1.5
-                             text-[13px] outline-none cursor-pointer
-                             dark:border-slate-700 dark:bg-slate-800"
+                  className={SELECT}
                 >
                   {QUALITIES.map((q) => (
                     <option key={q.value} value={q.value}>
@@ -146,6 +163,25 @@ export default function Settings({
                   ))}
                 </select>
               </label>
+
+              <label className="mt-2 grid grid-cols-[92px_1fr] items-center gap-2">
+                <span className={LABEL}>Streaming</span>
+                <select
+                  value={streamQuality}
+                  onChange={(e) => onStreamQuality(e.target.value as Quality)}
+                  className={SELECT}
+                >
+                  {STREAM_QUALITIES.map((q) => (
+                    <option key={q.value} value={q.value}>
+                      {q.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <p className={`mt-2 ${HELP}`}>
+                Streaming quality applies when you play something you have not downloaded.
+                Best lets the player adapt to your connection; a fixed height pins it.
+              </p>
             </section>
 
             <section className="border-b border-slate-200 px-5 py-4 dark:border-slate-800">

src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import type { ChannelWithCount } from "../types";
-import { BTN_CHROME, HEADING } from "./ui";
+import { HEADING, ICON_BTN } from "./ui";
 
 interface Props {
   channels: ChannelWithCount[];
@@ -49,7 +49,7 @@ export default function Sidebar({
             onClick={onOpenSettings}
             title="Settings"
             aria-label="Settings"
-            className={`${BTN_CHROME} grid size-7 cursor-pointer place-items-center`}
+            className={`${ICON_BTN} text-slate-500 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white`}
           >
             <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="1.8">
               <circle cx="12" cy="12" r="3.2" />
@@ -60,7 +60,7 @@ export default function Sidebar({
             onClick={onHide}
             title="Hide subscriptions"
             aria-label="Hide subscriptions"
-            className={`${BTN_CHROME} grid size-7 cursor-pointer place-items-center`}
+            className={`${ICON_BTN} text-slate-500 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white`}
           >
             <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="1.8">
               <path strokeLinecap="round" strokeLinejoin="round" d="M15 6l-6 6 6 6" />

src/components/TopBar.tsx

@@ -1,4 +1,4 @@
-import { INPUT, Segmented } from "./ui";
+import { CONTROL_H, ICON_BTN, INPUT, Segmented } from "./ui";
 
 export type ViewMode = "list" | "grid";
 
@@ -39,7 +39,7 @@ function Toggle({
       title={title}
       disabled={disabled}
       className={
-        "cursor-pointer whitespace-nowrap rounded-lg border px-2.5 py-1.5 text-[11px] " +
+        `inline-flex ${CONTROL_H} cursor-pointer items-center whitespace-nowrap rounded-lg border px-2.5 text-[12px] ` +
         "font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 " +
         (active
           ? "border-sky-500 bg-sky-500 text-white hover:bg-sky-400"
@@ -73,10 +73,9 @@ export default function TopBar({
             onClick={onShowSidebar}
             title="Show subscriptions"
             aria-label="Show subscriptions"
-            className="grid size-[30px] shrink-0 cursor-pointer place-items-center rounded-lg
-                       border border-slate-300 text-slate-500 hover:border-sky-500
-                       hover:text-sky-600 dark:border-slate-700 dark:text-slate-400
-                       dark:hover:border-sky-500 dark:hover:text-sky-400"
+            className={`${ICON_BTN} border border-slate-300 text-slate-500 hover:border-sky-500
+                        hover:text-sky-600 dark:border-slate-700 dark:text-slate-400
+                        dark:hover:border-sky-500 dark:hover:text-sky-400`}
           >
             <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="1.8">
               <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
@@ -87,7 +86,7 @@ export default function TopBar({
           value={search}
           onChange={(e) => onSearch(e.target.value)}
           placeholder="Search videos and channels"
-          className={`${INPUT} min-w-72 max-w-sm flex-1 py-1.5`}
+          className={`${INPUT} min-w-72 max-w-sm flex-1`}
         />
 
         <span className="font-mono text-[11px] tabular-nums text-slate-400 dark:text-slate-500">
@@ -125,11 +124,11 @@ export default function TopBar({
                 ? "Offline mode is forced on — click to go back online"
                 : "Simulate being offline"
           }
-          className="flex cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-lg border
-                     border-slate-300 px-2.5 py-1.5 text-[11px] font-medium text-slate-500
-                     hover:border-sky-500 hover:text-sky-600
-                     dark:border-slate-700 dark:text-slate-400 dark:hover:border-sky-500
-                     dark:hover:text-sky-400"
+          className={`inline-flex ${CONTROL_H} cursor-pointer items-center gap-1.5 whitespace-nowrap
+                      rounded-lg border border-slate-300 px-2.5 text-[12px] font-medium text-slate-500
+                      hover:border-sky-500 hover:text-sky-600
+                      dark:border-slate-700 dark:text-slate-400 dark:hover:border-sky-500
+                      dark:hover:text-sky-400`}
         >
           <span
             className={`size-1.5 rounded-full ${online ? "bg-sky-500" : "bg-amber-500"}`}
@@ -146,9 +145,7 @@ export default function TopBar({
               : "Refreshing needs a connection"
           }
           aria-label="Refresh"
-          className="grid size-[30px] shrink-0 cursor-pointer place-items-center rounded-lg
-                     bg-sky-500 text-white hover:bg-sky-400 disabled:cursor-not-allowed
-                     disabled:opacity-40">
+          className={`${ICON_BTN} bg-sky-500 text-white hover:bg-sky-400`}>
           <svg viewBox="0 0 24 24" className={`size-4 ${refreshing ? "animate-spin" : ""}`}
             fill="none" stroke="currentColor" strokeWidth="2">
             <path strokeLinecap="round" strokeLinejoin="round"

src/components/ui.tsx

@@ -4,6 +4,17 @@
  */
 import type { ReactNode } from "react";
 
+/**
+ * Every control in the app is this tall. Width still grows with the label —
+ * only the height is fixed, so a row of mixed buttons lines up.
+ */
+export const CONTROL_H = "h-[30px]";
+
+/** Square version, for icon-only buttons. */
+export const ICON_BTN =
+  `grid ${CONTROL_H} w-[30px] shrink-0 place-items-center rounded-lg cursor-pointer ` +
+  "disabled:cursor-not-allowed disabled:opacity-40";
+
 export const HEADING =
   "text-[11px] font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400";
 export const LABEL = "text-[12px] text-slate-500 dark:text-slate-400";
@@ -14,27 +25,29 @@ export const PANEL =
 export const SECTION =
   "border-b border-slate-200 px-4 py-4 dark:border-slate-800";
 export const INPUT =
-  "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-[13px] outline-none " +
+  `w-full ${CONTROL_H} rounded-lg border border-slate-300 bg-white px-3 text-[12px] outline-none ` +
   "placeholder:text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:placeholder:text-slate-500";
 export const SUBPANEL = "rounded-lg bg-slate-50 p-3 dark:bg-slate-800/50";
 
-const BTN_BASE = "rounded-lg text-[13px] disabled:cursor-not-allowed";
+const BTN_BASE =
+  `inline-flex ${CONTROL_H} items-center justify-center rounded-lg text-[12px] ` +
+  "disabled:cursor-not-allowed";
 
 export const BTN =
-  `${BTN_BASE} border border-slate-300 px-3 py-2 font-medium ` +
+  `${BTN_BASE} border border-slate-300 px-2.5 font-medium ` +
   "hover:border-sky-500 hover:text-sky-600 disabled:opacity-40 " +
   "dark:border-slate-700 dark:hover:border-sky-500 dark:hover:text-sky-400";
 
 export const BTN_PRIMARY =
-  `${BTN_BASE} bg-sky-500 px-3 py-2 font-semibold text-white ` +
+  `${BTN_BASE} bg-sky-500 px-3 font-semibold text-white ` +
   "hover:bg-sky-400 disabled:opacity-40";
 
 export const BTN_DANGER =
-  `${BTN_BASE} bg-red-600 px-3 py-1.5 font-semibold text-white hover:bg-red-500`;
+  `${BTN_BASE} bg-red-600 px-3 font-semibold text-white hover:bg-red-500`;
 
 /** Header actions: quieter than a secondary button, still a real target. */
 export const BTN_CHROME =
-  "rounded-md px-2 py-1 text-[11px] font-medium text-slate-500 " +
+  `inline-flex ${CONTROL_H} items-center rounded-lg px-2 text-[12px] font-medium text-slate-500 ` +
   "hover:bg-slate-100 hover:text-slate-900 disabled:opacity-40 disabled:hover:bg-transparent " +
   "dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white";
 
@@ -85,7 +98,7 @@ export function Segmented<T extends string>({
   return (
     <div
       role="group"
-      className="flex rounded-lg border border-slate-300 p-0.5 dark:border-slate-700"
+      className={`flex ${CONTROL_H} items-center rounded-lg border border-slate-300 p-0.5 dark:border-slate-700`}
     >
       {options.map((o) => {
         const active = o.value === value;
@@ -94,7 +107,7 @@ export function Segmented<T extends string>({
             key={o.value}
             onClick={() => onChange(o.value)}
             className={
-              "rounded-md px-2 py-1 text-[11px] font-medium transition-colors cursor-pointer " +
+              "h-full rounded-md px-2.5 text-[12px] font-medium transition-colors cursor-pointer " +
               (active
                 ? "bg-slate-900! text-white! dark:bg-white! dark:text-slate-900!"
                 : "text-slate-500 hover:bg-slate-100 hover:text-slate-900 " +
@@ -172,7 +185,7 @@ export function Dialog({
           {onConfirm && (
             <button
               onClick={onConfirm}
-              className={`${destructive ? BTN_DANGER + " py-2" : BTN_PRIMARY} cursor-pointer`}
+              className={`${destructive ? BTN_DANGER : BTN_PRIMARY} cursor-pointer`}
             >
               {confirmLabel ?? "Continue"}
             </button>

src/hooks/useWindowFullscreen.ts

@@ -0,0 +1,24 @@
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { useEffect, useState } from "react";
+
+/**
+ * True while the macOS *window* is fullscreen (the green button), as distinct
+ * from the video being fullscreen. In that state the traffic lights are gone,
+ * so the title-bar strip the app paints is pure dead space and must collapse.
+ */
+export function useWindowFullscreen(): boolean {
+  const [full, setFull] = useState(false);
+
+  useEffect(() => {
+    const win = getCurrentWindow();
+    let unlisten: (() => void) | undefined;
+    const check = () => {
+      win.isFullscreen().then(setFull).catch(() => {});
+    };
+    check();
+    win.onResized(check).then((u) => (unlisten = u));
+    return () => unlisten?.();
+  }, []);
+
+  return full;
+}

src/types.ts

@@ -89,6 +89,11 @@ export interface ImportPreview {
 /** "best" or a maximum height in pixels. */
 export type Quality = "best" | "2160" | "1440" | "1080" | "720" | "480";
 
+export interface Stream {
+  url: string | null;
+  playlist: string | null;
+}
+
 export const QUALITIES: Array<{ value: Quality; label: string }> = [
   { value: "best", label: "Best available (up to 4K)" },
   { value: "2160", label: "2160p — 4K" },
@@ -97,3 +102,11 @@ export const QUALITIES: Array<{ value: Quality; label: string }> = [
   { value: "720", label: "720p" },
   { value: "480", label: "480p" },
 ];
+
+/** Streaming tops out at 1080p — YouTube's HLS carries nothing higher. */
+export const STREAM_QUALITIES: Array<{ value: Quality; label: string }> = [
+  { value: "best", label: "Best available (adaptive)" },
+  { value: "1080", label: "1080p" },
+  { value: "720", label: "720p" },
+  { value: "480", label: "480p" },
+];