feat: icon view toggle, failing filter, quality badges

List and Tiles are now icons rather than words, centred in their
buttons — Segmented takes a ReactNode label and an optional title.

The red "N failing" count in the sidebar is a button: click it to see
only the channels that failed to refresh, click again for all of them.
It clears itself once a refresh fixes everything, so the filter can
never strand you on an empty list.

The player states its quality as a badge instead of loose grey text,
and a downloaded video now says so too — "Downloaded · 1440p" — read
from the file itself. Quality is the short side, so a portrait Short
reads 1080p rather than 1920p, and it resets between videos so one
never inherits the previous one's number.

src/components/Sidebar.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 import type { ChannelWithCount } from "../types";
 import { HEADING, ICON_BTN } from "./ui";
 
@@ -19,8 +21,17 @@ export default function Sidebar({
   channels, activeChannel, onSelect, onOpenSettings, totalVideos, totalDownloaded,
   onHide, floating, titleBarInset,
 }: Props) {
+  const [onlyFailing, setOnlyFailing] = useState(false);
   const failing = channels.filter((c) => c.last_error).length;
 
+  // A filter with nothing left to show is a dead end — drop it on the next
+  // refresh that fixes everything.
+  useEffect(() => {
+    if (failing === 0) setOnlyFailing(false);
+  }, [failing]);
+
+  const shown = onlyFailing ? channels.filter((c) => c.last_error) : channels;
+
   const row =
     "flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-2 py-1.5 " +
     "text-[13px] transition-colors";
@@ -93,18 +104,29 @@ export default function Sidebar({
           <h2 className={`${HEADING} flex items-center justify-between px-2 pb-1 pt-4`}>
             <span>Channels</span>
             {failing > 0 && (
-              <span
-                title={`${failing} channel${failing === 1 ? "" : "s"} failed to refresh`}
-                className="font-mono text-[10px] normal-case tracking-normal text-red-500"
+              <button
+                onClick={() => setOnlyFailing((v) => !v)}
+                title={
+                  onlyFailing
+                    ? "Show every channel again"
+                    : `Show only the ${failing} channel${failing === 1 ? "" : "s"} that failed to refresh`
+                }
+                className={
+                  "cursor-pointer rounded-full px-1.5 py-0.5 font-mono text-[10px] normal-case " +
+                  "tracking-normal transition-colors " +
+                  (onlyFailing
+                    ? "bg-red-500 text-white"
+                    : "text-red-500 hover:bg-red-500/10")
+                }
               >
                 {failing} failing
-              </span>
+              </button>
             )}
           </h2>
         )}
 
         <ul className="space-y-0.5">
-          {channels.map((c) => (
+          {shown.map((c) => (
             <li key={c.id}>
               <button
                 onClick={() => onSelect(c.id)}