import { useEffect, useState } from "react"; import type { ChannelWithCount } from "../types"; import { HEADING, ICON_BTN } from "./ui"; interface Props { channels: ChannelWithCount[]; activeChannel: string | null; onSelect: (id: string | null) => void; onOpenSettings: () => void; totalVideos: number; totalDownloaded: number; onHide: () => void; /** True when revealed by hover over the left edge rather than pinned open. */ floating?: boolean; /** Reserve room for the macOS traffic lights above the header. */ titleBarInset: boolean; } 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"; const inactive = "text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800"; const active = "bg-slate-900 text-white dark:bg-white dark:text-slate-900"; return ( ); }