peter
c3d88d9b20
The 43 react-refresh/only-export-components warnings the gate let through meant an edit to a provider (or AnchoredPopover, Toaster, plexDetailUi, …) could not be hot-swapped: Fast Refresh reloads a module that also exports hooks or helpers. - Each provider's contexts, the types its hooks return and the hooks themselves live in a sibling context module (navigationContext.ts, channelsContext.ts, …); the provider file keeps the component. loadAccountFilters moved next to the feed filters' defaults (feedFiltersInit.ts), following navigationInit/playlistsInit. - Helpers that sat in component files have their own modules: welcomeMode, downloadTitle, plexPlayable, channelSync, ui/anchoredPopoverHooks, ui/pageToolbarSlot, ui/pagerContent, ui/toastLevels, ui/overlayOrder, ui/tableAlign, lib/plexDetail; the cells of the channel columns and the registry's page wrappers are components files of their own (channelCells, modulePages). - usePersistedTab, an alias of useAccountPersistedState, is gone; its callers use the original. npm run lint is now eslint --max-warnings 0, so a warning fails the gate like an error does.
109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
BarChart3,
|
|
Clock,
|
|
Film,
|
|
History,
|
|
RefreshCw,
|
|
Users,
|
|
Zap,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { type MyStatus } from "../lib/api";
|
|
import { formatEta, formatNumber } from "../lib/format";
|
|
import { PopoverSurface } from "./ui/AnchoredPopover";
|
|
import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
|
|
|
|
// The channel-manager catalog stats, collapsed from a crowded inline row into a compact "Stats" chip
|
|
// that reveals the numbers on hover (reuses the AnchoredPopover hover mode). One row per stat, each
|
|
// with a leading icon. Kept in the manager's own toolbar (the header's SyncStatus is global; these
|
|
// are channel-catalog figures).
|
|
export default function ChannelStatsPopover({ status }: { status: MyStatus }) {
|
|
const { t } = useTranslation();
|
|
const [open, setOpen] = useState(false);
|
|
const pop = useAnchoredPopover({
|
|
open,
|
|
onOpenChange: setOpen,
|
|
mode: "hover",
|
|
placement: "bottom-end",
|
|
offset: 8,
|
|
});
|
|
|
|
// Each row keeps the per-stat explanation the old inline stats carried (as a native `title` on the
|
|
// row), so hovering a figure still tells the user what it counts — the guidance is not lost.
|
|
const rows: { icon: LucideIcon; label: string; value: string | number; hint: string }[] = [
|
|
{
|
|
icon: Users,
|
|
label: t("channels.stats.channels"),
|
|
value: status.channels_total,
|
|
hint: t("channels.stats.channelsHint"),
|
|
},
|
|
{
|
|
icon: RefreshCw,
|
|
label: t("channels.stats.recentSynced"),
|
|
value: `${status.channels_recent_synced}/${status.channels_total}`,
|
|
hint: t("channels.stats.recentSyncedHint"),
|
|
},
|
|
{
|
|
icon: History,
|
|
label: t("channels.stats.fullHistory"),
|
|
value: `${status.channels_deep_done}/${status.channels_deep_requested}`,
|
|
hint: t("channels.stats.fullHistoryHint"),
|
|
},
|
|
...(status.deep_pending_count > 0
|
|
? [
|
|
{
|
|
icon: Clock,
|
|
label: t("channels.stats.left"),
|
|
value: formatEta(status.deep_eta_seconds),
|
|
hint: t("channels.stats.leftHint", { count: status.deep_pending_count }),
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
icon: Film,
|
|
label: t("channels.stats.myVideos"),
|
|
value: formatNumber(status.my_videos),
|
|
hint: t("channels.stats.myVideosHint"),
|
|
},
|
|
{
|
|
icon: Zap,
|
|
label: t("channels.stats.quotaLeft"),
|
|
value: formatNumber(status.quota_remaining_today),
|
|
hint: t("channels.stats.quotaLeftHint"),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
ref={pop.refs.setReference}
|
|
{...pop.getReferenceProps()}
|
|
className="glass-card glass-hover inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-muted transition"
|
|
>
|
|
<BarChart3 className="h-4 w-4" aria-hidden="true" />
|
|
{t("channels.stats.label")}
|
|
</button>
|
|
<PopoverSurface
|
|
popover={pop}
|
|
ariaLabel={t("channels.stats.label")}
|
|
className="glass-menu w-60 rounded-xl p-2 text-xs animate-[popIn_0.16s_ease]"
|
|
>
|
|
{rows.map((r) => (
|
|
<div
|
|
key={r.label}
|
|
title={r.hint}
|
|
className="flex cursor-help items-center gap-2.5 px-1.5 py-1.5"
|
|
>
|
|
<r.icon className="h-4 w-4 shrink-0 text-muted" aria-hidden="true" />
|
|
<span className="flex-1 text-muted">{r.label}</span>
|
|
<span className="tabular-nums font-medium text-fg">{r.value}</span>
|
|
</div>
|
|
))}
|
|
</PopoverSurface>
|
|
</>
|
|
);
|
|
}
|