feat(ux): card unification, slim icon nav, filter/plex fixes (7-item batch)
1A ChannelPage "Full history" button no longer wraps (whitespace-nowrap). 1B Extract the manager's press-and-hold priority stepper into a shared PriorityStepper and add it to the channel detail header (subscribed, non-demo); backend channel_detail now returns the per-subscription `priority`. 2 Unify YouTube + Plex media cards onto one look/behaviour: drop the whole-card hover LIFT (VideoCard) — which also fixes the clipped-top bug — and instead the inner thumbnail/poster ZOOMS on hover (both); give the flat Plex posters the same glass-card 3D depth + accent hover border as the feed cards (shadow-md is a transparent no-op here, so it's glass-card that provides the depth); clamp Plex card titles to a fixed 2-line height so 1- vs 2-line titles align. 3 Nav rail is now always a slim icon-only column, flush to the left edge; each icon reveals a floating name label on hover (Tooltip gains `always` + `openDelay`, and a right side). Removed the pin/unpin toggle, the expand-on-hover mode and the navCollapsed pref plumbing. 4 Scope the side-panel peek-open HOVER to the tab handle + the card (not the whole full-height slot next to the rail), so approaching the nav no longer pops the filter open; focus stays container-wide. useHoverFocusWithin gains a hover-out grace period + split hover/focus handler groups. 5 Plex art backdrop fills the whole viewport (a fixed inset-0 layer behind the transparent app) instead of only the inset <main> box. 6 Plex season binge continues across seasons: the season view's play queue now spans the whole show (allKeys), so a season's last episode rolls into the next season's first (seasonKeys stays for "add season to playlist"). 7 When a Plex video/episode ends with nothing queued next, the player returns to the previous page (onEnded → onClose) instead of stranding a black screen.
This commit is contained in:
@@ -230,6 +230,7 @@ def _channel_detail_dict(
|
||||
blocked: bool,
|
||||
stored: int,
|
||||
deep_requested: bool,
|
||||
priority: int,
|
||||
tag_ids: list[int],
|
||||
) -> dict:
|
||||
return {
|
||||
@@ -255,6 +256,9 @@ def _channel_detail_dict(
|
||||
# Deep-backfill state, so the channel page can offer "get full history" when the catalog
|
||||
# holds only the recent-backfill/RSS subset (video_count is YouTube's raw total).
|
||||
"deep_requested": deep_requested,
|
||||
# This user's per-subscription feed priority (0 when not subscribed) so the channel page can
|
||||
# offer the same priority stepper as the manager. Editable only while subscribed.
|
||||
"priority": priority,
|
||||
"backfill_done": channel.backfill_done,
|
||||
"from_explore": channel.from_explore,
|
||||
"details_synced": channel.details_synced_at is not None,
|
||||
@@ -315,6 +319,7 @@ def channel_detail(
|
||||
blocked=blocked,
|
||||
stored=int(stored),
|
||||
deep_requested=bool(sub.deep_requested) if sub else False,
|
||||
priority=int(sub.priority) if sub else 0,
|
||||
tag_ids=tag_ids,
|
||||
)
|
||||
|
||||
|
||||
@@ -92,10 +92,6 @@ export default function App() {
|
||||
// Collapse state for the two full-height panels (left nav + filter sidebar). Persisted to the
|
||||
// user's preferences so it follows the account across devices; a localStorage cache seeds the
|
||||
// initial render synchronously so nothing flashes open before the server prefs arrive.
|
||||
// Default unpinned (slim + hover-expand overlay); accounts that explicitly pin keep their choice.
|
||||
const [navCollapsed, setNavCollapsedState] = useState<boolean>(() =>
|
||||
Boolean(readAccount(LS.navCollapsed, true)),
|
||||
);
|
||||
// Default unpinned (tab + hover-expand overlay); accounts that explicitly pin keep their choice.
|
||||
const [filterCollapsed, setFilterCollapsedState] = useState<boolean>(() =>
|
||||
Boolean(readAccount(LS.filterCollapsed, true)),
|
||||
@@ -104,11 +100,6 @@ export default function App() {
|
||||
const [playlistsCollapsed, setPlaylistsCollapsedState] = useState<boolean>(() =>
|
||||
Boolean(readAccount(LS.playlistsCollapsed, true)),
|
||||
);
|
||||
function setNavCollapsed(next: boolean) {
|
||||
setNavCollapsedState(next);
|
||||
writeAccount(LS.navCollapsed, next);
|
||||
api.savePrefs({ navCollapsed: next }).catch(() => {});
|
||||
}
|
||||
function setFilterCollapsed(next: boolean) {
|
||||
setFilterCollapsedState(next);
|
||||
writeAccount(LS.filterCollapsed, next);
|
||||
@@ -236,10 +227,6 @@ export default function App() {
|
||||
saveLayoutLocal(p, l);
|
||||
}
|
||||
});
|
||||
if (typeof prefs.navCollapsed === "boolean") {
|
||||
setNavCollapsedState(prefs.navCollapsed);
|
||||
writeAccount(LS.navCollapsed, prefs.navCollapsed);
|
||||
}
|
||||
if (typeof prefs.filterCollapsed === "boolean") {
|
||||
setFilterCollapsedState(prefs.filterCollapsed);
|
||||
writeAccount(LS.filterCollapsed, prefs.filterCollapsed);
|
||||
@@ -346,8 +333,6 @@ export default function App() {
|
||||
onOpenAbout={() => setAboutOpen(true)}
|
||||
onChangeLanguage={changeLanguage}
|
||||
language={i18n.language as LangCode}
|
||||
collapsed={navCollapsed}
|
||||
onToggleCollapse={() => setNavCollapsed(!navCollapsed)}
|
||||
/>
|
||||
{/* The active page's side rail (feed filters / plex filters / playlists list), if it has one.
|
||||
A floating collapsible column beside the nav rail; hidden while a channel page overlays the
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { qk } from "../lib/queryKeys";
|
||||
import { useNavigationActions } from "./NavigationProvider";
|
||||
import { PriorityStepper } from "./PriorityStepper";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Ban,
|
||||
@@ -168,6 +169,47 @@ export default function ChannelPage({
|
||||
onError: (err) => notifyYouTubeActionError(err, t("channel.fullHistoryFailed")),
|
||||
});
|
||||
|
||||
// Feed priority, editable here with the same stepper the manager uses. Optimistic on this channel's
|
||||
// detail cache + a debounced flush (~400ms after the last notch) so a press-and-hold sends ONE
|
||||
// request, not one per step; the pending flush fires on unmount so a last bump isn't lost.
|
||||
const prioFlush = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const flushPriority = useCallback(() => {
|
||||
const latest = qc.getQueryData<ChannelDetail>(qk.channel(channelId))?.priority;
|
||||
if (latest == null) return;
|
||||
api
|
||||
.updateChannel(channelId, { priority: latest })
|
||||
.then(() => {
|
||||
qc.invalidateQueries({ queryKey: qk.channels() });
|
||||
qc.invalidateQueries({ queryKey: qk.feed() });
|
||||
})
|
||||
.catch(() => qc.invalidateQueries({ queryKey: qk.channel(channelId) }));
|
||||
}, [qc, channelId]);
|
||||
const setPriority = (next: number) => {
|
||||
qc.setQueryData<ChannelDetail>(qk.channel(channelId), (old) =>
|
||||
old ? { ...old, priority: next } : old,
|
||||
);
|
||||
if (prioFlush.current) clearTimeout(prioFlush.current);
|
||||
prioFlush.current = setTimeout(() => {
|
||||
prioFlush.current = null;
|
||||
flushPriority();
|
||||
}, 400);
|
||||
};
|
||||
// Read the LATEST value from the cache each step (not a render closure) so a hold-repeat accumulates
|
||||
// correctly, exactly like the manager's arrows.
|
||||
const bumpPriority = (delta: number) => {
|
||||
const cur = qc.getQueryData<ChannelDetail>(qk.channel(channelId))?.priority ?? 0;
|
||||
setPriority(cur + delta);
|
||||
};
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (prioFlush.current) {
|
||||
clearTimeout(prioFlush.current);
|
||||
flushPriority();
|
||||
}
|
||||
},
|
||||
[flushPriority],
|
||||
);
|
||||
|
||||
// Personal tags, editable right here (the same control + flow the channel manager uses). Optimistic
|
||||
// on this channel's detail cache; a failed attach/detach reverts by refetching, and a success
|
||||
// invalidates the manager list so a tag added here shows there too.
|
||||
@@ -380,6 +422,19 @@ export default function ChannelPage({
|
||||
<SlidersHorizontal className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{ch?.subscribed && !me.is_demo && (
|
||||
<div
|
||||
className="inline-flex items-center gap-1.5 h-9 px-2.5 rounded-lg border border-border"
|
||||
title={t("channels.row.priorityHint")}
|
||||
>
|
||||
<span className="text-xs text-muted">{t("channels.cols.priority")}</span>
|
||||
<PriorityStepper
|
||||
priority={ch.priority}
|
||||
onPriority={bumpPriority}
|
||||
onSet={setPriority}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* Only the recent subset is stored → offer to pull the channel's full back-catalogue.
|
||||
Once queued (deep_requested) it shows as loading; hidden once the backfill is done. */}
|
||||
{ch?.subscribed && !ch.backfill_done && !me.is_demo && (
|
||||
@@ -396,7 +451,7 @@ export default function ChannelPage({
|
||||
) : (
|
||||
<History className="w-4 h-4" />
|
||||
)}
|
||||
<span className="hidden sm:inline">
|
||||
<span className="hidden sm:inline whitespace-nowrap">
|
||||
{ch.deep_requested ? t("channel.fullHistoryLoading") : t("channel.fullHistory")}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { qk } from "../lib/queryKeys";
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
Ban,
|
||||
Check,
|
||||
Eye,
|
||||
@@ -24,6 +22,7 @@ import { formatEta, formatTotalHours, relativeTime } from "../lib/format";
|
||||
import { subsColumn } from "./channelColumns";
|
||||
import { notify } from "../lib/notifications";
|
||||
import Tooltip from "./Tooltip";
|
||||
import { PriorityStepper } from "./PriorityStepper";
|
||||
import DataTable, { type Column } from "./DataTable";
|
||||
import ChannelLayoutGrid from "./ChannelLayoutGrid";
|
||||
import { LoadingState, StateMessage } from "./QueryState";
|
||||
@@ -332,8 +331,8 @@ export default function Channels() {
|
||||
sortValue: (c) => c.priority,
|
||||
filter: { kind: "select", options: prioOptions, test: (c, v) => String(c.priority) === v },
|
||||
render: (c) => (
|
||||
<PriorityCell
|
||||
c={c}
|
||||
<PriorityStepper
|
||||
priority={c.priority}
|
||||
onPriority={(d) => bumpPriority(c.id, d)}
|
||||
onSet={(v) => setPriority(c.id, v)}
|
||||
/>
|
||||
@@ -815,161 +814,6 @@ function SyncBadge({ ok, label, hint }: { ok: boolean; label: string; hint?: str
|
||||
);
|
||||
}
|
||||
|
||||
// Module-level (NOT defined inside PriorityCell) so its identity is stable across PriorityCell
|
||||
// re-renders — otherwise every hold-repeat tick would remount the button and drop the pointer
|
||||
// capture set on pointerdown, letting a hold run away if the pointer drifts off the arrow.
|
||||
function PriorityStepButton({
|
||||
delta,
|
||||
Icon,
|
||||
label,
|
||||
onHoldStart,
|
||||
onStop,
|
||||
onTap,
|
||||
}: {
|
||||
delta: number;
|
||||
Icon: typeof ArrowUp;
|
||||
label: string;
|
||||
onHoldStart: (delta: number) => void;
|
||||
onStop: () => void;
|
||||
onTap: (delta: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onPointerDown={(e) => {
|
||||
// Keep receiving pointer events even if the pointer drifts off the small button mid-hold.
|
||||
try {
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
} catch {
|
||||
/* invalid pointer id (e.g. synthetic events) — capture is a nicety, not required */
|
||||
}
|
||||
onHoldStart(delta);
|
||||
}}
|
||||
onPointerUp={onStop}
|
||||
onPointerCancel={onStop}
|
||||
onClick={() => onTap(delta)}
|
||||
className="text-muted hover:text-accent leading-none"
|
||||
aria-label={label}
|
||||
>
|
||||
<Icon className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function PriorityCell({
|
||||
c,
|
||||
onPriority,
|
||||
onSet,
|
||||
}: {
|
||||
c: ManagedChannel;
|
||||
onPriority: (delta: number) => void;
|
||||
onSet: (value: number) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [draft, setDraft] = useState("");
|
||||
const holdDelay = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const holdRepeat = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const suppressClick = useRef(false);
|
||||
|
||||
const stop = useCallback(() => {
|
||||
if (holdDelay.current) clearTimeout(holdDelay.current);
|
||||
if (holdRepeat.current) clearTimeout(holdRepeat.current);
|
||||
holdDelay.current = holdRepeat.current = null;
|
||||
}, []);
|
||||
useEffect(() => stop, [stop]); // clear any running timers on unmount
|
||||
|
||||
// Hold past a threshold → auto-repeat at an accelerating rate, and suppress the trailing click so
|
||||
// a hold doesn't double-count its final notch. A quick tap never crosses the threshold, so it
|
||||
// falls through to onClick — which also keeps the keyboard path (Enter/Space) working.
|
||||
const start = (delta: number) => {
|
||||
suppressClick.current = false;
|
||||
holdDelay.current = setTimeout(() => {
|
||||
suppressClick.current = true;
|
||||
let rate = 140;
|
||||
const tick = () => {
|
||||
onPriority(delta);
|
||||
rate = Math.max(40, rate - 12);
|
||||
holdRepeat.current = setTimeout(tick, rate);
|
||||
};
|
||||
tick();
|
||||
}, 350);
|
||||
};
|
||||
const onTap = (delta: number) => {
|
||||
if (suppressClick.current) {
|
||||
suppressClick.current = false;
|
||||
return;
|
||||
}
|
||||
onPriority(delta);
|
||||
};
|
||||
|
||||
const commitEdit = () => {
|
||||
const parsed = parseInt(draft, 10);
|
||||
if (!Number.isNaN(parsed) && parsed !== c.priority) onSet(parsed);
|
||||
setEditing(false);
|
||||
};
|
||||
const beginEdit = () => {
|
||||
setDraft(String(c.priority));
|
||||
setEditing(true);
|
||||
};
|
||||
|
||||
// The value sits to the LEFT of the arrows (not between them) so the cursor — which rests on the
|
||||
// arrows while you press-and-hold — never covers the live value you're setting. Clicking the value
|
||||
// opens an inline edit to type any integer directly (negatives allowed).
|
||||
return (
|
||||
<Tooltip hint={t("channels.row.priorityHint")}>
|
||||
<div className="inline-flex items-center gap-1.5 cursor-help">
|
||||
{/* The number keeps its footprint (w-6) whether displayed or editing; the input is absolutely
|
||||
positioned OVER it (out of flow) so opening the editor never changes the row height/width —
|
||||
it just overlays, extending left for a longer number. */}
|
||||
<span className="relative inline-block w-6 h-5 text-right leading-5">
|
||||
<button
|
||||
onClick={beginEdit}
|
||||
aria-label={t("channels.row.editPriority")}
|
||||
title={t("channels.row.editPriority")}
|
||||
className={`text-sm font-medium tabular-nums hover:text-accent ${editing ? "invisible" : ""}`}
|
||||
>
|
||||
{c.priority}
|
||||
</button>
|
||||
{editing && (
|
||||
<input
|
||||
type="number"
|
||||
value={draft}
|
||||
autoFocus
|
||||
onFocus={(e) => e.currentTarget.select()}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={commitEdit}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") commitEdit();
|
||||
else if (e.key === "Escape") setEditing(false);
|
||||
}}
|
||||
aria-label={t("channels.row.priorityHint")}
|
||||
className="absolute top-1/2 right-0 -translate-y-1/2 w-14 h-6 text-sm font-medium tabular-nums text-right bg-card border border-accent rounded-sm px-1 outline-hidden z-popover [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
<span className="inline-flex flex-col">
|
||||
<PriorityStepButton
|
||||
delta={1}
|
||||
Icon={ArrowUp}
|
||||
label={t("channels.row.raisePriority")}
|
||||
onHoldStart={start}
|
||||
onStop={stop}
|
||||
onTap={onTap}
|
||||
/>
|
||||
<PriorityStepButton
|
||||
delta={-1}
|
||||
Icon={ArrowDown}
|
||||
label={t("channels.row.lowerPriority")}
|
||||
onHoldStart={start}
|
||||
onStop={stop}
|
||||
onTap={onTap}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
// Status only — the backfill *action* lives in the Actions column. When both recent and
|
||||
// full history are in, collapse to a single "fully synced" chip; otherwise show what's
|
||||
// present plus the missing/queued state.
|
||||
|
||||
@@ -3,16 +3,7 @@ import { qk } from "../lib/queryKeys";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useNavigation, useNavigationActions } from "./NavigationProvider";
|
||||
import {
|
||||
Info,
|
||||
LogOut,
|
||||
Pin,
|
||||
PinOff,
|
||||
Settings,
|
||||
Shield,
|
||||
UserPlus,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
import { Info, LogOut, Settings, Shield, UserPlus, type LucideIcon } from "lucide-react";
|
||||
import { api, clearActiveAccount, setActiveAccount, type Me } from "../lib/api";
|
||||
import * as e2ee from "../lib/e2ee";
|
||||
import { useLiveQuery } from "../lib/useLiveQuery";
|
||||
@@ -20,9 +11,9 @@ import { getUnreadCount, subscribe } from "../lib/notifications";
|
||||
import type { Page } from "../lib/urlState";
|
||||
import { moduleDef, moduleLabelKey, moduleOrder, SYSTEM_PAGES } from "../lib/modules";
|
||||
import { useScrollFade } from "../lib/useScrollFade";
|
||||
import { useHoverFocusWithin } from "../lib/useHoverFocusWithin";
|
||||
import { type LangCode } from "../i18n";
|
||||
import AvatarImg from "./Avatar";
|
||||
import Tooltip from "./Tooltip";
|
||||
import LanguageSwitcher from "./LanguageSwitcher";
|
||||
import { PopoverSurface, useAnchoredPopover } from "./AnchoredPopover";
|
||||
|
||||
@@ -34,28 +25,19 @@ export default function NavSidebar({
|
||||
onOpenAbout,
|
||||
onChangeLanguage,
|
||||
language,
|
||||
collapsed,
|
||||
onToggleCollapse,
|
||||
}: {
|
||||
me: Me;
|
||||
onOpenAbout: () => void;
|
||||
onChangeLanguage: (code: LangCode) => void;
|
||||
language: LangCode;
|
||||
// Collapse state is owned by App (persisted to the user's preferences); the rail just reflects
|
||||
// it and asks App to flip it.
|
||||
collapsed: boolean;
|
||||
onToggleCollapse: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { page } = useNavigation();
|
||||
const { setPage } = useNavigationActions();
|
||||
// When unpinned, the rail sits slim (icons only) and peeks open into a labelled overlay on hover
|
||||
// or keyboard focus WITHOUT pushing content. Pinned keeps it expanded in-flow like before.
|
||||
// `collapsed` (persisted per-account) now means "unpinned".
|
||||
const peek = useHoverFocusWithin();
|
||||
const pinned = !collapsed;
|
||||
const expanded = pinned || peek.active;
|
||||
const slim = !expanded; // visual: icon-only rail
|
||||
// The rail is ALWAYS slim: a thin icon-only column flush against the left edge. There is no
|
||||
// expanded/pinned mode anymore — instead each icon reveals a floating name label on hover (a
|
||||
// rest-to-show flyout via Tooltip), so the names are one glance away without the rail ever growing.
|
||||
const slim = true;
|
||||
const [acctOpen, setAcctOpen] = useState(false);
|
||||
// The account panel holds mixed content with its own tab order (profile, account switches, two
|
||||
// actions), so it is a `dialog` popover, not a roving menu. It portals out of the nav — whose
|
||||
@@ -187,19 +169,20 @@ export default function NavSidebar({
|
||||
const badgeColor = active ? "bg-accent-fg text-accent" : "bg-accent text-accent-fg";
|
||||
const show = !!badge && badge > 0;
|
||||
return (
|
||||
// The name rides in a right-side flyout on hover (rest-to-show), so the rail stays icon-only.
|
||||
<Tooltip key={p} hint={label} side="right" always openDelay={350}>
|
||||
<button
|
||||
key={p}
|
||||
data-testid={`nav-${p}`}
|
||||
onClick={() => setPage(p)}
|
||||
title={slim ? label : undefined}
|
||||
aria-label={label}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={`${rowBase} ${slim ? "justify-center px-0" : ""} relative is-current`}
|
||||
className={`${rowBase} justify-center px-0 relative is-current`}
|
||||
>
|
||||
<span className="relative shrink-0">
|
||||
<Icon className="w-4.5 h-4.5" />
|
||||
{/* Collapsed rail: a numeric badge centred on a circle at the icon corner; the ring
|
||||
matches the row background so it reads cleanly whether the row is active or not. */}
|
||||
{show && slim && (
|
||||
{/* A numeric badge centred on a circle at the icon corner; the ring matches the row
|
||||
background so it reads cleanly whether the row is active or not. */}
|
||||
{show && (
|
||||
<span
|
||||
className={`absolute -top-2 -right-2 min-w-4 h-4 px-1 rounded-full text-3xs font-bold leading-none grid place-items-center ring-2 ${badgeColor} ${
|
||||
active ? "ring-accent" : "ring-bg"
|
||||
@@ -209,52 +192,20 @@ export default function NavSidebar({
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
{!slim && <span className="truncate">{label}</span>}
|
||||
{show && !slim && (
|
||||
<span
|
||||
className={`ml-auto min-w-4.5 h-4.5 px-1.5 rounded-full text-2xs font-semibold leading-none inline-flex items-center justify-center tabular-nums ${badgeColor}`}
|
||||
>
|
||||
{badge > 99 ? "99+" : badge}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
// Layout slot: reserves only the slim footprint when unpinned, so the expanded rail (below)
|
||||
// overlays content instead of pushing it. Pinned reserves the full width (in-flow).
|
||||
<div className={`relative shrink-0 transition-[width] ${pinned ? "w-58" : "w-20"}`}>
|
||||
// Slim icon rail, flush against the left viewport edge (only top/bottom margin), never grows.
|
||||
<div className="relative shrink-0 w-20">
|
||||
<nav
|
||||
// Peek handlers sit on the CARD, not the slot: the slot is wider than the card by its
|
||||
// margin, and a hover zone out there would fire from the dead space next to the rail —
|
||||
// leaving the side panel to the left would pop the rail open with nothing under the cursor.
|
||||
{...peek.handlers}
|
||||
className={`glass absolute top-0 bottom-0 left-0 z-rail rounded-2xl flex flex-col py-3 m-3 transition-[width] ${
|
||||
slim ? "w-14 px-2" : "w-52 px-3"
|
||||
}`}
|
||||
className="glass absolute top-0 bottom-0 left-0 z-rail rounded-2xl flex flex-col py-3 my-3 w-14 px-2"
|
||||
aria-label={t("nav.primary")}
|
||||
>
|
||||
<div className={`flex items-center mb-3 ${slim ? "justify-center" : "justify-between"}`}>
|
||||
{!slim && (
|
||||
<button
|
||||
onClick={() => setPage("feed")}
|
||||
className="text-lg font-bold tracking-tight select-none cursor-pointer rounded-md -mx-1 px-1 hover:bg-card hover:opacity-90 transition"
|
||||
title={t("header.feed")}
|
||||
>
|
||||
Sift<span className="text-accent">lode</span>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={onToggleCollapse}
|
||||
title={pinned ? t("nav.unpin") : t("nav.pin")}
|
||||
aria-label={pinned ? t("nav.unpin") : t("nav.pin")}
|
||||
className="p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
|
||||
>
|
||||
{pinned ? <PinOff className="w-4 h-4" /> : <Pin className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={listFade.ref}
|
||||
className="flex-1 min-h-0 overflow-y-auto no-scrollbar flex flex-col gap-1"
|
||||
@@ -301,23 +252,25 @@ export default function NavSidebar({
|
||||
<LogOut className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<Tooltip hint={t("header.account.settings")} side="right" always openDelay={350}>
|
||||
<button
|
||||
data-testid="nav-settings"
|
||||
onClick={() => setPage("settings")}
|
||||
title={slim ? t("header.account.settings") : undefined}
|
||||
aria-label={t("header.account.settings")}
|
||||
aria-current={page === "settings" ? "page" : undefined}
|
||||
className={`${rowBase} ${slim ? "justify-center px-0" : ""} is-current`}
|
||||
className={`${rowBase} justify-center px-0 is-current`}
|
||||
>
|
||||
<Settings className="w-4.5 h-4.5 shrink-0" />
|
||||
{!slim && <span className="truncate">{t("header.account.settings")}</span>}
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<div>
|
||||
<button
|
||||
ref={acctPop.refs.setReference}
|
||||
{...acctPop.getReferenceProps()}
|
||||
title={slim ? `${name} · ${roleLabel}` : undefined}
|
||||
className={`${rowBase} ${slim ? "justify-center px-0" : ""} text-muted hover:text-fg hover:bg-card`}
|
||||
title={`${name} · ${roleLabel}`}
|
||||
aria-label={`${name} · ${roleLabel}`}
|
||||
className={`${rowBase} justify-center px-0 text-muted hover:text-fg hover:bg-card`}
|
||||
>
|
||||
<span className="relative shrink-0">
|
||||
<AvatarImg
|
||||
@@ -326,11 +279,6 @@ export default function NavSidebar({
|
||||
className="w-5.5 h-5.5 rounded-full text-3xs"
|
||||
/>
|
||||
</span>
|
||||
{!slim && (
|
||||
<span title={roleLabel} className="truncate flex-1 text-left">
|
||||
{name}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<PopoverSurface
|
||||
|
||||
@@ -473,7 +473,7 @@ function PlexPosterCard({
|
||||
onOpen();
|
||||
}
|
||||
}}
|
||||
className="relative aspect-2/3 rounded-xl overflow-hidden bg-card border border-border cursor-pointer"
|
||||
className="glass-card glass-hover relative aspect-2/3 rounded-xl overflow-hidden transition-all duration-200 cursor-pointer"
|
||||
>
|
||||
<img
|
||||
src={card.thumb}
|
||||
@@ -566,7 +566,7 @@ function PlexPosterCard({
|
||||
className="mt-1.5 rounded-lg px-2 py-1.5 cursor-pointer"
|
||||
style={{ background: "color-mix(in srgb, var(--card) 60%, transparent)" }}
|
||||
>
|
||||
<div className="text-sm font-medium line-clamp-2 leading-tight hover:text-accent">
|
||||
<div className="text-sm font-medium line-clamp-2 leading-tight min-h-[2lh] hover:text-accent">
|
||||
{card.title}
|
||||
</div>
|
||||
<div className="text-xs text-muted">
|
||||
@@ -710,7 +710,7 @@ function SeasonCard({
|
||||
onOpen();
|
||||
}
|
||||
}}
|
||||
className="relative aspect-2/3 rounded-xl overflow-hidden bg-card border border-border cursor-pointer"
|
||||
className="glass-card glass-hover relative aspect-2/3 rounded-xl overflow-hidden transition-all duration-200 cursor-pointer"
|
||||
>
|
||||
<img
|
||||
src={se.thumb}
|
||||
@@ -849,7 +849,7 @@ function RelatedStrip({ related, onOpen }: { related: PlexCard[]; onOpen: (id: s
|
||||
onClick={() => onOpen(r.id)}
|
||||
className="group w-[130px] shrink-0 text-left"
|
||||
>
|
||||
<div className="relative aspect-2/3 rounded-xl overflow-hidden bg-card border border-border">
|
||||
<div className="glass-card glass-hover relative aspect-2/3 rounded-xl overflow-hidden transition-all duration-200">
|
||||
<img
|
||||
src={r.thumb}
|
||||
alt=""
|
||||
@@ -862,7 +862,9 @@ function RelatedStrip({ related, onOpen }: { related: PlexCard[]; onOpen: (id: s
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1.5 text-sm font-medium line-clamp-2 leading-tight">{r.title}</div>
|
||||
<div className="mt-1.5 text-sm font-medium line-clamp-2 leading-tight min-h-[2lh]">
|
||||
{r.title}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -1240,6 +1242,10 @@ function PlexSeasonView({
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const seasonKeys = se?.episodes.map((e) => e.id) ?? [];
|
||||
// Play-through queue spans the WHOLE show (all seasons, in order) so a season's last episode rolls
|
||||
// straight into the next season's first — the same cross-season order the show page already uses.
|
||||
// seasonKeys stays only for the season-scoped "add to playlist" action.
|
||||
const allKeys = (d?.seasons ?? []).flatMap((s) => s.episodes.map((e) => e.id));
|
||||
const watched = se?.status === "watched";
|
||||
const { artBg, showCast, toggleArtBg, toggleCast } = useDetailPrefs();
|
||||
useArtBackdrop(d?.show.art, artBg);
|
||||
@@ -1282,7 +1288,7 @@ function PlexSeasonView({
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => se.resume && onPlay(se.resume.id, seasonKeys)}
|
||||
onClick={() => se.resume && onPlay(se.resume.id, allKeys)}
|
||||
disabled={!se.resume}
|
||||
className="group/poster relative w-28 sm:w-40 shrink-0 self-start"
|
||||
title={se.status === "new" ? t("plex.play") : t("plex.resume")}
|
||||
@@ -1313,7 +1319,7 @@ function PlexSeasonView({
|
||||
{se.resume && (
|
||||
<ActionBtn
|
||||
primary
|
||||
onClick={() => onPlay(se.resume!.id, seasonKeys)}
|
||||
onClick={() => onPlay(se.resume!.id, allKeys)}
|
||||
icon={Play}
|
||||
label={se.status === "new" ? t("plex.play") : t("plex.resume")}
|
||||
sub={epLabel(se.resume)}
|
||||
@@ -1321,7 +1327,7 @@ function PlexSeasonView({
|
||||
)}
|
||||
{se.first && se.status !== "new" && (
|
||||
<ActionBtn
|
||||
onClick={() => onPlay(se.first!.id, seasonKeys)}
|
||||
onClick={() => onPlay(se.first!.id, allKeys)}
|
||||
icon={RotateCcw}
|
||||
label={t("plex.series.playFromStart")}
|
||||
/>
|
||||
@@ -1358,7 +1364,7 @@ function PlexSeasonView({
|
||||
<EpisodeCard
|
||||
key={ep.id}
|
||||
ep={ep}
|
||||
onPlay={() => onPlay(ep.id, seasonKeys)}
|
||||
onPlay={() => onPlay(ep.id, allKeys)}
|
||||
onAdd={() => setAddTarget({ kind: "single", ratingKey: ep.id, title: ep.title })}
|
||||
onToggleWatched={() => markEpisode(ep)}
|
||||
/>
|
||||
|
||||
@@ -767,10 +767,13 @@ export default function PlexPlayer({ itemId, onClose, queue }: Props) {
|
||||
if (absRef.current <= 0) return;
|
||||
api.plexSetState(id, "watched").catch(() => {});
|
||||
if (nextId) go(nextId);
|
||||
// Nothing queued next → dismiss the player back to the previous page (same as Stop/Escape),
|
||||
// instead of stranding a black, ended <video> on screen.
|
||||
else onClose();
|
||||
};
|
||||
video.addEventListener("ended", onEnded);
|
||||
return () => video.removeEventListener("ended", onEnded);
|
||||
}, [id, nextId, go]);
|
||||
}, [id, nextId, go, onClose]);
|
||||
|
||||
// Reveal the controls and re-arm the auto-hide timer (on mouse move OR any key).
|
||||
const wake = useCallback(() => {
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { ArrowDown, ArrowUp } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Tooltip from "./Tooltip";
|
||||
|
||||
function PriorityStepButton({
|
||||
delta,
|
||||
Icon,
|
||||
label,
|
||||
onHoldStart,
|
||||
onStop,
|
||||
onTap,
|
||||
}: {
|
||||
delta: number;
|
||||
Icon: typeof ArrowUp;
|
||||
label: string;
|
||||
onHoldStart: (delta: number) => void;
|
||||
onStop: () => void;
|
||||
onTap: (delta: number) => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onPointerDown={(e) => {
|
||||
// Keep receiving pointer events even if the pointer drifts off the small button mid-hold.
|
||||
try {
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
} catch {
|
||||
/* invalid pointer id (e.g. synthetic events) — capture is a nicety, not required */
|
||||
}
|
||||
onHoldStart(delta);
|
||||
}}
|
||||
onPointerUp={onStop}
|
||||
onPointerCancel={onStop}
|
||||
onClick={() => onTap(delta)}
|
||||
className="text-muted hover:text-accent leading-none"
|
||||
aria-label={label}
|
||||
>
|
||||
<Icon className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* A press-and-hold-repeat priority control with an inline-editable value (negatives allowed).
|
||||
* Shared by the channel manager table (a cell) and the channel detail page (a header control), so
|
||||
* the two never drift. The caller owns persistence: `onPriority(delta)` nudges by ±1 (with hold
|
||||
* auto-repeat), `onSet(value)` writes a typed-in absolute value.
|
||||
*/
|
||||
export function PriorityStepper({
|
||||
priority,
|
||||
onPriority,
|
||||
onSet,
|
||||
}: {
|
||||
priority: number;
|
||||
onPriority: (delta: number) => void;
|
||||
onSet: (value: number) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [draft, setDraft] = useState("");
|
||||
const holdDelay = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const holdRepeat = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const suppressClick = useRef(false);
|
||||
|
||||
const stop = useCallback(() => {
|
||||
if (holdDelay.current) clearTimeout(holdDelay.current);
|
||||
if (holdRepeat.current) clearTimeout(holdRepeat.current);
|
||||
holdDelay.current = holdRepeat.current = null;
|
||||
}, []);
|
||||
useEffect(() => stop, [stop]); // clear any running timers on unmount
|
||||
|
||||
// Hold past a threshold → auto-repeat at an accelerating rate, and suppress the trailing click so
|
||||
// a hold doesn't double-count its final notch. A quick tap never crosses the threshold, so it
|
||||
// falls through to onClick — which also keeps the keyboard path (Enter/Space) working.
|
||||
const start = (delta: number) => {
|
||||
suppressClick.current = false;
|
||||
holdDelay.current = setTimeout(() => {
|
||||
suppressClick.current = true;
|
||||
let rate = 140;
|
||||
const tick = () => {
|
||||
onPriority(delta);
|
||||
rate = Math.max(40, rate - 12);
|
||||
holdRepeat.current = setTimeout(tick, rate);
|
||||
};
|
||||
tick();
|
||||
}, 350);
|
||||
};
|
||||
const onTap = (delta: number) => {
|
||||
if (suppressClick.current) {
|
||||
suppressClick.current = false;
|
||||
return;
|
||||
}
|
||||
onPriority(delta);
|
||||
};
|
||||
|
||||
const commitEdit = () => {
|
||||
const parsed = parseInt(draft, 10);
|
||||
if (!Number.isNaN(parsed) && parsed !== priority) onSet(parsed);
|
||||
setEditing(false);
|
||||
};
|
||||
const beginEdit = () => {
|
||||
setDraft(String(priority));
|
||||
setEditing(true);
|
||||
};
|
||||
|
||||
// The value sits to the LEFT of the arrows (not between them) so the cursor — which rests on the
|
||||
// arrows while you press-and-hold — never covers the live value you're setting. Clicking the value
|
||||
// opens an inline edit to type any integer directly (negatives allowed).
|
||||
return (
|
||||
<Tooltip hint={t("channels.row.priorityHint")}>
|
||||
<div className="inline-flex items-center gap-1.5 cursor-help">
|
||||
{/* The number keeps its footprint (w-6) whether displayed or editing; the input is absolutely
|
||||
positioned OVER it (out of flow) so opening the editor never changes the row height/width —
|
||||
it just overlays, extending left for a longer number. */}
|
||||
<span className="relative inline-block w-6 h-5 text-right leading-5">
|
||||
<button
|
||||
onClick={beginEdit}
|
||||
aria-label={t("channels.row.editPriority")}
|
||||
title={t("channels.row.editPriority")}
|
||||
className={`text-sm font-medium tabular-nums hover:text-accent ${editing ? "invisible" : ""}`}
|
||||
>
|
||||
{priority}
|
||||
</button>
|
||||
{editing && (
|
||||
<input
|
||||
type="number"
|
||||
value={draft}
|
||||
autoFocus
|
||||
onFocus={(e) => e.currentTarget.select()}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={commitEdit}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") commitEdit();
|
||||
else if (e.key === "Escape") setEditing(false);
|
||||
}}
|
||||
aria-label={t("channels.row.priorityHint")}
|
||||
className="absolute top-1/2 right-0 -translate-y-1/2 w-14 h-6 text-sm font-medium tabular-nums text-right bg-card border border-accent rounded-sm px-1 outline-hidden z-popover [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
<span className="inline-flex flex-col">
|
||||
<PriorityStepButton
|
||||
delta={1}
|
||||
Icon={ArrowUp}
|
||||
label={t("channels.row.raisePriority")}
|
||||
onHoldStart={start}
|
||||
onStop={stop}
|
||||
onTap={onTap}
|
||||
/>
|
||||
<PriorityStepButton
|
||||
delta={-1}
|
||||
Icon={ArrowDown}
|
||||
label={t("channels.row.lowerPriority")}
|
||||
onHoldStart={start}
|
||||
onStop={stop}
|
||||
onTap={onTap}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
@@ -46,7 +46,11 @@ export default function SidePanel({
|
||||
// Layout slot: reserves only the tab's gutter when unpinned, so the expanded card overlays
|
||||
// content instead of pushing it. Pinned reserves the full width (in-flow), as before.
|
||||
<div
|
||||
{...peek.handlers}
|
||||
// Focus is tracked container-wide (keyboard: tab anywhere inside holds it open). HOVER is NOT
|
||||
// on this full-height slot — that made the whole column next to the nav rail a live target, so
|
||||
// merely approaching the rail popped the panel open. Hover now lives only on the visible tab
|
||||
// handle + the expanded card below, so only pointing AT the tab opens it.
|
||||
{...peek.focusHandlers}
|
||||
className={`hidden md:block relative shrink-0 transition-[width] ${pinned ? "w-67" : "w-9"}`}
|
||||
>
|
||||
{/* The tab: a small handle flush against the nav rail, flat on the docked edge. It stays
|
||||
@@ -56,6 +60,7 @@ export default function SidePanel({
|
||||
this square-cornered tab sits right under that arc, so it would otherwise bleed through.
|
||||
`opacity-0` (not `invisible`/`hidden`) keeps it hoverable and focusable. */}
|
||||
<button
|
||||
{...peek.hoverHandlers}
|
||||
onClick={onToggleCollapse}
|
||||
aria-label={pinned ? t("sidebar.unpin") : t("sidebar.pin")}
|
||||
className={`glass glass-hover absolute top-3 left-0 z-paneltab flex flex-col items-center gap-2 px-1.5 py-3 rounded-l-none rounded-r-xl transition-opacity ${
|
||||
@@ -77,7 +82,10 @@ export default function SidePanel({
|
||||
</button>
|
||||
|
||||
{expanded && (
|
||||
<aside className="glass absolute top-3 bottom-3 left-0 z-panel w-64 rounded-2xl flex flex-col overflow-hidden">
|
||||
<aside
|
||||
{...peek.hoverHandlers}
|
||||
className="glass absolute top-3 bottom-3 left-0 z-panel w-64 rounded-2xl flex flex-col overflow-hidden"
|
||||
>
|
||||
{/* Row 1 — identity only: pin, icon, title (flexes + truncates last), count, customize.
|
||||
Module actions live on their own row below so the title always has room. */}
|
||||
<div className="flex items-center gap-1.5 px-3 py-2.5 border-b border-border/60 flex-none">
|
||||
|
||||
@@ -2,22 +2,29 @@ import { useState, useSyncExternalStore } from "react";
|
||||
import { PopoverSurface, useAnchoredPopover } from "./AnchoredPopover";
|
||||
import { hintsEnabled, subscribeHints } from "../lib/hints";
|
||||
|
||||
type Side = "top" | "bottom";
|
||||
type Side = "top" | "bottom" | "left" | "right";
|
||||
|
||||
/** Wrap any element to show a short glass hint caption on hover — but only while the
|
||||
/** Wrap any element to show a short glass hint caption on hover — by default only while the
|
||||
* app-wide hints toggle (Settings → Appearance) is on. Anchored by the R8 popover platform, so it
|
||||
* is never clipped by an overflow/stacking ancestor, flips when the preferred side runs out of room
|
||||
* and slides back inside the viewport near an edge. */
|
||||
* and slides back inside the viewport near an edge.
|
||||
* `always` bypasses the hints toggle (for a label that IS the primary affordance, e.g. the slim nav
|
||||
* rail's flyout names); `openDelay` waits before showing (a rest-on-the-icon feel). */
|
||||
export default function Tooltip({
|
||||
hint,
|
||||
side = "top",
|
||||
always = false,
|
||||
openDelay = 0,
|
||||
children,
|
||||
}: {
|
||||
hint: string;
|
||||
side?: Side;
|
||||
always?: boolean;
|
||||
openDelay?: number;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const enabled = useSyncExternalStore(subscribeHints, hintsEnabled, hintsEnabled);
|
||||
const hintsOn = useSyncExternalStore(subscribeHints, hintsEnabled, hintsEnabled);
|
||||
const enabled = always || hintsOn;
|
||||
const [open, setOpen] = useState(false);
|
||||
const pop = useAnchoredPopover({
|
||||
open: open && enabled && !!hint,
|
||||
@@ -25,9 +32,9 @@ export default function Tooltip({
|
||||
mode: "hover",
|
||||
placement: side,
|
||||
offset: 8,
|
||||
// Show/hide on contact, as the pre-platform tooltip did — the platform's 120/140 ms hover-intent
|
||||
// default suits interactive cards but makes a fast sweep across an icon row surface no hints.
|
||||
hoverDelay: { open: 0, close: 0 },
|
||||
// Show/hide on contact by default (as the pre-platform tooltip did); `openDelay` adds a
|
||||
// rest-before-show for labels that shouldn't flash on a fast sweep across an icon row.
|
||||
hoverDelay: { open: openDelay, close: 0 },
|
||||
});
|
||||
|
||||
if (!enabled || !hint) return <>{children}</>;
|
||||
|
||||
@@ -239,7 +239,7 @@ function Thumb({
|
||||
decoding="async"
|
||||
width={1280}
|
||||
height={720}
|
||||
className="w-full h-full object-cover"
|
||||
className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full" />
|
||||
@@ -598,7 +598,7 @@ function VideoCard({
|
||||
data-testid="video-card"
|
||||
data-video-id={video.id}
|
||||
className={clsx(
|
||||
"cv-card group glass-card glass-hover rounded-2xl transition-all duration-150 hover:-translate-y-1",
|
||||
"cv-card group glass-card glass-hover rounded-2xl transition-all duration-150",
|
||||
"flex flex-col",
|
||||
spec.dense ? "p-2" : "p-2.5",
|
||||
watched && "opacity-55",
|
||||
|
||||
@@ -28,6 +28,7 @@ export interface ChannelDetail {
|
||||
blocked: boolean;
|
||||
stored_videos: number;
|
||||
deep_requested: boolean;
|
||||
priority: number;
|
||||
backfill_done: boolean;
|
||||
from_explore: boolean;
|
||||
details_synced: boolean;
|
||||
|
||||
@@ -77,32 +77,25 @@ export function Filterable({
|
||||
);
|
||||
}
|
||||
|
||||
// Paint the item's art as a faint FIXED backdrop on the page's <main> scroll container (HTPC-style),
|
||||
// so the glass panels float over it. Cleared on unmount / when disabled / when there's no art.
|
||||
// Paint the item's art as a faint FULL-VIEWPORT backdrop (HTPC-style) so the glass chrome floats over
|
||||
// it. A dedicated `position:fixed inset-0` layer at z-index -1 sits BEHIND the (transparent / glassy)
|
||||
// app content — so the art fills the whole page edge-to-edge, under the nav rail and floating header
|
||||
// too, instead of only the <main> box (which is inset by the rail, the header and the scrollbar
|
||||
// gutter). Removed on unmount / when disabled / when there's no art.
|
||||
export function useArtBackdrop(art: string | null | undefined, enabled: boolean) {
|
||||
useLayoutEffect(() => {
|
||||
const main = document.querySelector("main");
|
||||
if (!main) return;
|
||||
const s = main.style;
|
||||
const clear = () => {
|
||||
s.backgroundImage = "";
|
||||
s.backgroundSize = "";
|
||||
s.backgroundPosition = "";
|
||||
s.backgroundRepeat = "";
|
||||
s.backgroundAttachment = "";
|
||||
};
|
||||
if (enabled && art) {
|
||||
s.backgroundImage =
|
||||
if (!enabled || !art) return;
|
||||
const el = document.createElement("div");
|
||||
el.setAttribute("data-plex-art-backdrop", "");
|
||||
el.style.cssText =
|
||||
"position:fixed;inset:0;z-index:-1;pointer-events:none;" +
|
||||
"background-size:cover;background-position:center 20%;background-repeat:no-repeat;";
|
||||
// The faint --bg overlay keeps it subtle and text-safe (same tuning the old <main> paint used).
|
||||
el.style.backgroundImage =
|
||||
`linear-gradient(color-mix(in srgb, var(--bg) 60%, transparent), ` +
|
||||
`color-mix(in srgb, var(--bg) 64%, transparent)), url("${art}")`;
|
||||
s.backgroundSize = "cover";
|
||||
s.backgroundPosition = "center 20%";
|
||||
s.backgroundRepeat = "no-repeat";
|
||||
s.backgroundAttachment = "fixed";
|
||||
} else {
|
||||
clear();
|
||||
}
|
||||
return clear;
|
||||
document.body.appendChild(el);
|
||||
return () => el.remove();
|
||||
}, [art, enabled]);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,29 +1,37 @@
|
||||
import { useEffect, useState, type FocusEvent } from "react";
|
||||
import { useCallback, useEffect, useRef, useState, type FocusEvent } from "react";
|
||||
|
||||
/**
|
||||
* "Peek open on hover or keyboard focus" for a container — the shared brain behind the nav rail
|
||||
* and the floating side panels, which sit slim until you point at them or tab into them.
|
||||
* "Peek open on hover or keyboard focus" for a floating panel — the shared brain behind the side
|
||||
* panels, which sit slim until you point at them or tab into them.
|
||||
*
|
||||
* Spread `handlers` on the container; `active` is true while the pointer is over it (or any
|
||||
* descendant) or focus is inside it.
|
||||
* Returns `active` plus THREE handler groups so a consumer can scope hover and focus independently:
|
||||
* - `hoverHandlers` — pointer enter/leave, with a short GRACE period on leave so the pointer can
|
||||
* cross a gap between two separate peek regions (e.g. the docked tab and the expanded card, which
|
||||
* are separate absolutely-positioned elements) without the panel collapsing mid-move. Put these on
|
||||
* ONLY the visible affordances (the tab handle + the card), so approaching empty gutter next to the
|
||||
* panel does not pop it open.
|
||||
* - `focusHandlers` — focus/blur, tracked through the REACT tree so a portaled child menu still
|
||||
* counts as "inside". Put these on the outer container so keyboard focus anywhere within holds it.
|
||||
* - `handlers` — both groups merged, for the simple single-element case.
|
||||
*
|
||||
* Focus is tracked through the REACT tree, so a portaled menu rendered by a child (the language
|
||||
* switcher, the account popover) still counts as "inside" and holds the container open while you
|
||||
* use it. The one case that misses: such a portal unmounts while focused, and browsers fire NO blur
|
||||
* when a focused node is removed — focus silently falls to the body and `active` would latch on
|
||||
* forever. Hence the document-level safety net: when focus has landed nowhere, clear it.
|
||||
* The one focus case that misses: a portaled menu unmounts while focused — browsers fire NO blur when
|
||||
* a focused node is removed, so focus silently falls to the body and would latch `focused` on forever.
|
||||
* Hence the document-level safety net: when focus has landed nowhere, clear it.
|
||||
*/
|
||||
export function useHoverFocusWithin(): {
|
||||
active: boolean;
|
||||
handlers: {
|
||||
onMouseEnter: () => void;
|
||||
onMouseLeave: () => void;
|
||||
onFocus: () => void;
|
||||
onBlur: (e: FocusEvent) => void;
|
||||
};
|
||||
} {
|
||||
export function useHoverFocusWithin() {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const [focused, setFocused] = useState(false);
|
||||
const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
|
||||
const enter = useCallback(() => {
|
||||
clearTimeout(leaveTimer.current);
|
||||
setHovered(true);
|
||||
}, []);
|
||||
const leaveSoon = useCallback(() => {
|
||||
clearTimeout(leaveTimer.current);
|
||||
leaveTimer.current = setTimeout(() => setHovered(false), 120);
|
||||
}, []);
|
||||
useEffect(() => () => clearTimeout(leaveTimer.current), []);
|
||||
|
||||
useEffect(() => {
|
||||
let timer: number | undefined;
|
||||
@@ -46,15 +54,18 @@ export function useHoverFocusWithin(): {
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
active: hovered || focused,
|
||||
handlers: {
|
||||
onMouseEnter: () => setHovered(true),
|
||||
onMouseLeave: () => setHovered(false),
|
||||
const hoverHandlers = { onMouseEnter: enter, onMouseLeave: leaveSoon };
|
||||
const focusHandlers = {
|
||||
onFocus: () => setFocused(true),
|
||||
onBlur: (e: FocusEvent) => {
|
||||
if (!e.currentTarget.contains(e.relatedTarget as Node)) setFocused(false);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
active: hovered || focused,
|
||||
hoverHandlers,
|
||||
focusHandlers,
|
||||
handlers: { ...hoverHandlers, ...focusHandlers },
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user