From dc1efccf87a70e3454c3afb3879e6efaefaaec17 Mon Sep 17 00:00:00 2001
From: vincent <vincent@users.noreply.gitea.vincentrozenberg.com>
Date: Sat, 29 Aug 2026 15:47:32 +0200
Subject: [PATCH] feat: icon view toggle, failing filter, quality badges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/Player.tsx  | 37 ++++++++++++++++++++++++++-----------
 src/components/Sidebar.tsx | 32 +++++++++++++++++++++++++++-----
 src/components/TopBar.tsx  | 23 +++++++++++++++++++++--
 src/components/ui.tsx      | 33 +++++++++++++++++++++++++++++++--
 4 files changed, 105 insertions(+), 20 deletions(-)

diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index 89ef52c..68bcfc1 100644
--- a/src/components/Player.tsx
+++ b/src/components/Player.tsx
@@ -3,7 +3,7 @@ import { fileUrl, listSubtitles, openExternal, resolveStream, savePlayback } fro
 import type { FeedItem } from "../types";
 import { compactViews, relativeTime } from "./format";
 import PlayerControls from "./PlayerControls";
-import { BTN, Spinner } from "./ui";
+import { Badge, BTN, Spinner } from "./ui";
 
 interface Props {
   item: FeedItem;
@@ -131,10 +131,17 @@ export default function Player({
   const [chromeVisible, setChromeVisible] = useState(true);
   const hideTimer = useRef<number | undefined>(undefined);
   const videoRef = useRef<HTMLVideoElement>(null);
+  // Quality is the short side, so a portrait Short reads 1080p, not 1920p.
+  const measure = useCallback(() => {
+    const v = videoRef.current;
+    if (!v?.videoHeight) return;
+    setHeight(Math.min(v.videoWidth, v.videoHeight));
+  }, []);
   const stageRef = useRef<HTMLDivElement>(null);
   const lastSave = useRef(0);
 
   useEffect(() => {
+    setHeight(0);
     if (path) {
       setSrc(fileUrl(path));
       return;
@@ -266,14 +273,22 @@ export default function Player({
           {item.channel_title}
         </span>
 
-        {streaming && (
-          <span className="text-[11px] text-slate-400 dark:text-slate-500">
-            {error
-              ? "Unavailable"
-              : src && !buffering
-                ? `Streaming${height ? ` · ${height}p` : ""}`
-                : "Loading…"}
-          </span>
+        {streaming ? (
+          error ? (
+            <Badge tone="danger">Unavailable</Badge>
+          ) : src && !buffering ? (
+            <Badge tone="accent" title={`Streaming at ${height || "an unknown"}p`}>
+              Streaming{height ? ` · ${height}p` : ""}
+            </Badge>
+          ) : (
+            <Badge>Loading…</Badge>
+          )
+        ) : (
+          height > 0 && (
+            <Badge title={`This copy on your Mac is ${height}p`}>
+              Downloaded · {height}p
+            </Badge>
+          )
         )}
       </header>
 
@@ -338,8 +353,8 @@ export default function Player({
             onCanPlay={() => setBuffering(false)}
             onPlaying={() => setBuffering(false)}
             onSeeked={() => setBuffering(false)}
-            onResize={() => setHeight(videoRef.current?.videoHeight ?? 0)}
-            onLoadedData={() => setHeight(videoRef.current?.videoHeight ?? 0)}
+            onResize={measure}
+            onLoadedData={measure}
             className="absolute inset-0 size-full object-contain"
           >
             {sidecars.map(([lang, file]) => (
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index c31714b..58cba92 100644
--- a/src/components/Sidebar.tsx
+++ b/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)}
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index aa1643c..c336a3e 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -123,8 +123,27 @@ export default function TopBar({
           value={view}
           onChange={onView}
           options={[
-            { value: "list", label: "List" },
-            { value: "grid", label: "Tiles" },
+            {
+              value: "list",
+              title: "List",
+              label: (
+                <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path strokeLinecap="round" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              ),
+            },
+            {
+              value: "grid",
+              title: "Tiles",
+              label: (
+                <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2">
+                  <rect x="4" y="4" width="7" height="7" rx="1.5" />
+                  <rect x="13" y="4" width="7" height="7" rx="1.5" />
+                  <rect x="4" y="13" width="7" height="7" rx="1.5" />
+                  <rect x="13" y="13" width="7" height="7" rx="1.5" />
+                </svg>
+              ),
+            },
           ]}
         />
 
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index 2d08c8f..1e80ebb 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -91,7 +91,7 @@ export function Segmented<T extends string>({
   value,
   onChange,
 }: {
-  options: Array<{ value: T; label: string }>;
+  options: Array<{ value: T; label: ReactNode; title?: string }>;
   value: T;
   onChange: (v: T) => void;
 }) {
@@ -106,8 +106,10 @@ export function Segmented<T extends string>({
           <button
             key={o.value}
             onClick={() => onChange(o.value)}
+            title={o.title}
             className={
-              "h-full rounded-md px-2.5 text-[12px] font-medium transition-colors cursor-pointer " +
+              "inline-flex h-full items-center justify-center 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 " +
@@ -143,6 +145,33 @@ export function Toast({ message }: { message: string | null }) {
   );
 }
 
+/** States a fact in passing — a quality, a status. Never a control. */
+export function Badge({
+  children,
+  tone = "neutral",
+  title,
+}: {
+  children: ReactNode;
+  tone?: "neutral" | "accent" | "danger";
+  title?: string;
+}) {
+  const skin =
+    tone === "accent"
+      ? "bg-sky-500/15 text-sky-700 dark:text-sky-300"
+      : tone === "danger"
+        ? "bg-red-500/15 text-red-600 dark:text-red-400"
+        : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300";
+  return (
+    <span
+      title={title}
+      className={`inline-flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5
+                  text-[11px] font-medium ${skin}`}
+    >
+      {children}
+    </span>
+  );
+}
+
 /** A modal for anything needing a decision or reporting a failure. */
 export function Dialog({
   title,