fix(ui): the platform layer speaks platform words; boxes scale with the text
- PriorityStepper labelled itself with channels.row.* and told every caller it orders the Feed; Combobox said plex.loading / plex.filter.moreRefine / sidebar.match on the feed sidebar. The generic strings moved to common.*, and what a priority MEANS arrives as the stepper's `hint` prop. uiI18n.contract.test.ts pins components/ui/ to the platform namespaces — the import boundary could never see an i18n key. - 32 px-frozen box utilities (w-[150px], max-w-[1600px], left-[18px], …) became spacing-scale steps (w-37.5, max-w-400, left-4.5): identical at the default text size, and now they grow with the Settings slider instead of clipping or re-wrapping their own labels. An eslint rule refuses the px form beside the older text-[Npx] one, pinned by pxBox.contract.test.ts; measured in the browser that every new step is generated at its old px. - chipLane's import-strip regex ran past a side-effect import into the next statement's `from`, hiding a lane between them; it now stops at the import's own `;`.
This commit is contained in:
@@ -56,7 +56,7 @@ export default function AboutCell({ text, channelId }: { text: string | null; ch
|
||||
</span>
|
||||
<PopoverSurface
|
||||
popover={pop}
|
||||
className="glass w-[480px] overflow-y-auto px-3.5 py-3 rounded-lg animate-[fadeIn_0.12s_ease]"
|
||||
className="glass w-120 overflow-y-auto px-3.5 py-3 rounded-lg animate-[fadeIn_0.12s_ease]"
|
||||
// min(design cap, available space): keeps the 28rem cap on a tall viewport, shrinks to fit on a
|
||||
// short one (high zoom). --fit-max-h is set by the fitHeight `size` middleware once positioned.
|
||||
style={{ maxHeight: "min(28rem, var(--fit-max-h, 28rem))" }}
|
||||
|
||||
@@ -445,6 +445,7 @@ export default function ChannelPage({
|
||||
onPriority={(d) => bumpPriority(channelId, d)}
|
||||
onSet={(v) => setPriority(channelId, v)}
|
||||
size="md"
|
||||
hint={t("channels.row.priorityHint")}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -218,7 +218,7 @@ function TagEditorMenu({
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div ref={fade.ref} style={fade.style} className="max-h-[240px] overflow-y-auto no-scrollbar">
|
||||
<div ref={fade.ref} style={fade.style} className="max-h-60 overflow-y-auto no-scrollbar">
|
||||
{userTags.map((tg) => {
|
||||
const on = attached.has(tg.id);
|
||||
return (
|
||||
|
||||
@@ -284,7 +284,7 @@ export default function GlassTuner() {
|
||||
{open && (
|
||||
<div
|
||||
style={{ pointerEvents: "auto" }}
|
||||
className="glass-menu rounded-l-2xl rounded-r-none w-[300px] max-h-[82vh] flex flex-col overflow-hidden"
|
||||
className="glass-menu rounded-l-2xl rounded-r-none w-75 max-h-[82vh] flex flex-col overflow-hidden"
|
||||
>
|
||||
<div className="flex items-center gap-2 px-3 py-2 border-b border-border/60">
|
||||
<span className="text-sm font-semibold text-fg">◐ Glass Tuner</span>
|
||||
|
||||
@@ -65,7 +65,8 @@ const PlayerModal = lazy(() => import("./PlayerModal"));
|
||||
|
||||
// A rail tile's slot width. `cardsSmall` is the feed's own dense card (its column bottoms out at
|
||||
// 180px), so a 200px slot is the same object the feed shows — not a Home-only variant that would
|
||||
// drift from it.
|
||||
// drift from it. Px on purpose, like that column (`VirtualGrid`'s `minCol` is a layout-engine px value,
|
||||
// see ui/README): the card also takes it as its MEASURED width, which must be real pixels.
|
||||
const YT_SLOT = 200;
|
||||
|
||||
// How many already-offered cards the reroll remembers. Matched to the server's own cap
|
||||
@@ -182,7 +183,7 @@ function Rail({
|
||||
{cards.map((c, i) => (
|
||||
<div
|
||||
key={`${c.source}:${c.kind}:${c.id}`}
|
||||
className={c.aspect === "poster" ? "w-[150px] shrink-0" : "shrink-0"}
|
||||
className={c.aspect === "poster" ? "w-37.5 shrink-0" : "shrink-0"}
|
||||
style={c.aspect === "poster" ? undefined : { width: YT_SLOT }}
|
||||
>
|
||||
{c.video ? (
|
||||
|
||||
@@ -313,7 +313,7 @@ export default function PlaylistsRail({
|
||||
// ~12px the moment you start renaming, and every row below it moves under the
|
||||
// pointer.
|
||||
<div key={pl.id} className={`${ROW_BASE} bg-accent/10 border-accent`}>
|
||||
<div className="w-[34px] h-[34px] rounded-md bg-card overflow-hidden shrink-0">
|
||||
<div className="w-8.5 h-8.5 rounded-md bg-card overflow-hidden shrink-0">
|
||||
{pl.cover_thumbnail && (
|
||||
<img src={pl.cover_thumbnail} alt="" className="w-full h-full object-cover" />
|
||||
)}
|
||||
@@ -357,7 +357,7 @@ export default function PlaylistsRail({
|
||||
: "border-transparent hover:bg-card/60"
|
||||
}`}
|
||||
>
|
||||
<div className="w-[34px] h-[34px] rounded-md bg-card overflow-hidden shrink-0">
|
||||
<div className="w-8.5 h-8.5 rounded-md bg-card overflow-hidden shrink-0">
|
||||
{pl.cover_thumbnail && (
|
||||
<img src={pl.cover_thumbnail} alt="" className="w-full h-full object-cover" />
|
||||
)}
|
||||
|
||||
@@ -469,7 +469,7 @@ export default function PlexBrowse() {
|
||||
|
||||
if (sub.view.kind === "discover") {
|
||||
return (
|
||||
<div className="p-4 max-w-[1600px] mx-auto">
|
||||
<div className="p-4 max-w-400 mx-auto">
|
||||
<PlexDiscover
|
||||
scope={scope}
|
||||
onOpenCard={onCard}
|
||||
@@ -484,25 +484,25 @@ export default function PlexBrowse() {
|
||||
// playlist tile opens that playlist; a collection tile filters the title grid by that collection.
|
||||
if (sub.view.kind === "playlists") {
|
||||
return (
|
||||
<div className="p-4 max-w-[1600px] mx-auto">
|
||||
<div className="p-4 max-w-400 mx-auto">
|
||||
<PlexPlaylistsBrowse onOpen={(id) => sub.open({ kind: "playlist", id })} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (sub.view.kind === "collections") {
|
||||
return (
|
||||
<div className="p-4 max-w-[1600px] mx-auto">
|
||||
<div className="p-4 max-w-400 mx-auto">
|
||||
<PlexCollectionsBrowse onPick={(id) => sub.open({ kind: "collection", id })} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-[1600px] mx-auto">
|
||||
<div className="p-4 max-w-400 mx-auto">
|
||||
{/* The title count is fixed chrome — it portals into the shell's fixed band so it stays put
|
||||
while only the poster grid scrolls. */}
|
||||
<PageToolbar>
|
||||
<div className="px-4 pt-2 pb-1 max-w-[1600px] mx-auto">
|
||||
<div className="px-4 pt-2 pb-1 max-w-400 mx-auto">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<ItemCount count={browseQ.isLoading ? undefined : total} />
|
||||
{/* Watch state — a top-level toolbar pill next to the count (moved out of the rail),
|
||||
@@ -557,7 +557,7 @@ export default function PlexBrowse() {
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-medium truncate max-w-[150px] group-hover/person:text-accent">
|
||||
<div className="text-sm font-medium truncate max-w-37.5 group-hover/person:text-accent">
|
||||
{p.name}
|
||||
</div>
|
||||
<div className="text-2xs text-muted">
|
||||
|
||||
@@ -246,7 +246,7 @@ export default function PlexCollectionView({
|
||||
].filter(Boolean) as string[];
|
||||
|
||||
return (
|
||||
<div className="glass-media mx-auto max-w-[1200px] p-4">
|
||||
<div className="glass-media mx-auto max-w-300 p-4">
|
||||
<BackBtn onBack={onBack} label={t("plex.backToLibrary")} />
|
||||
|
||||
{q.isError && !q.data ? (
|
||||
|
||||
@@ -64,7 +64,7 @@ function CardRail({
|
||||
keyboardNav
|
||||
>
|
||||
{cards.map((c, i) => (
|
||||
<div key={c.id} className="w-[150px] shrink-0">
|
||||
<div key={c.id} className="w-37.5 shrink-0">
|
||||
<PlexPosterCard
|
||||
card={c}
|
||||
navIndex={i}
|
||||
|
||||
@@ -572,7 +572,7 @@ export default function PlexPlaylistView({
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-[90%] max-w-[1100px] p-4">
|
||||
<div className="mx-auto w-[90%] max-w-275 p-4">
|
||||
<Button variant="glass" size="xs" className="mb-4" onClick={onBack}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
{t("plex.backToLibrary")}
|
||||
|
||||
@@ -88,7 +88,7 @@ export function UpNextCard({
|
||||
onClick={onAdvance}
|
||||
className="flex items-center gap-1.5 rounded-full bg-accent px-3 py-1.5 text-xs font-semibold text-black hover:brightness-110"
|
||||
>
|
||||
<span className="relative grid h-[22px] w-[22px] flex-none place-items-center">
|
||||
<span className="relative grid h-5.5 w-5.5 flex-none place-items-center">
|
||||
<svg viewBox="0 0 24 24" className="absolute inset-0 -rotate-90">
|
||||
<circle
|
||||
cx="12"
|
||||
|
||||
@@ -109,7 +109,7 @@ export default function VideoInfoCard({
|
||||
<PopoverSurface
|
||||
popover={pop}
|
||||
ariaLabel={t("card.info")}
|
||||
className="glass w-[340px] max-w-[92vw] overflow-y-auto rounded-lg px-3.5 py-3 animate-[fadeIn_0.12s_ease]"
|
||||
className="glass w-85 max-w-[92vw] overflow-y-auto rounded-lg px-3.5 py-3 animate-[fadeIn_0.12s_ease]"
|
||||
style={{ maxHeight: "min(26rem, var(--fit-max-h, 26rem))" }}
|
||||
>
|
||||
<p className="text-sm font-medium leading-snug wrap-break-word">{video.title}</p>
|
||||
|
||||
@@ -563,7 +563,7 @@ function AuthCard({ verify }: { verify: VerifyEntry }) {
|
||||
<h2 className="text-lg font-semibold mb-1 flex items-center gap-2.5">
|
||||
{StateIcon && (
|
||||
<span className="w-8 h-8 rounded-xl bg-warn/15 text-warn grid place-items-center shrink-0">
|
||||
<StateIcon className="w-[18px] h-[18px]" />
|
||||
<StateIcon className="w-4.5 h-4.5" />
|
||||
</span>
|
||||
)}
|
||||
{t(titleKey)}
|
||||
|
||||
@@ -105,6 +105,7 @@ export function buildChannelColumns(deps: ChannelColumnDeps): Column<ManagedChan
|
||||
priority={c.priority}
|
||||
onPriority={(d) => bumpPriority(c.id, d)}
|
||||
onSet={(v) => setPriority(c.id, v)}
|
||||
hint={t("channels.row.priorityHint")}
|
||||
/>
|
||||
),
|
||||
},
|
||||
|
||||
@@ -302,7 +302,7 @@ export function DownloadRow({
|
||||
{/* Row action buttons: grown a step here (bigger tap target + icon) without touching the shared
|
||||
IconBtn — scoped so the same primitive stays smaller in the modals. `shrink-0` + no wrap keeps
|
||||
them on the title's line; the text column shrinks instead. */}
|
||||
<div className="flex items-start gap-1 shrink-0 [&_button]:p-2 [&_svg]:size-[18px]">
|
||||
<div className="flex items-start gap-1 shrink-0 [&_button]:p-2 [&_svg]:size-4.5">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -59,7 +59,7 @@ export function playlistColumns({
|
||||
<button
|
||||
onClick={() => onPlay(v)}
|
||||
aria-label={`${t("card.play")} — ${v.title}`}
|
||||
className="relative w-[62px] h-[35px] rounded-sm overflow-hidden bg-surface shrink-0 group"
|
||||
className="relative w-15.5 h-8.75 rounded-sm overflow-hidden bg-surface shrink-0 group"
|
||||
>
|
||||
{v.thumbnail_url && (
|
||||
<img src={v.thumbnail_url} alt="" className="w-full h-full object-cover" />
|
||||
|
||||
@@ -55,7 +55,7 @@ export function PlexInfoView({
|
||||
const lang = plexLang();
|
||||
const q = useQuery({ queryKey: qk.plexItem(id, lang), queryFn: () => api.plexItem(id, lang) });
|
||||
return (
|
||||
<div className="w-[90%] max-w-[1600px] mx-auto">
|
||||
<div className="w-[90%] max-w-400 mx-auto">
|
||||
<div className="p-4 pb-0">
|
||||
<Button variant="glass" size="xs" onClick={onBack}>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
@@ -168,7 +168,7 @@ export function PlexPersonView({
|
||||
const d = q.data;
|
||||
const empty = !!d && d.movies.length === 0 && d.shows.length === 0;
|
||||
return (
|
||||
<div className="w-[90%] max-w-[1600px] mx-auto">
|
||||
<div className="w-[90%] max-w-400 mx-auto">
|
||||
<div className="p-4 pb-0">
|
||||
<Button variant="glass" size="xs" onClick={onBack}>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
@@ -246,7 +246,7 @@ export function PlexPersonView({
|
||||
keyboardNav
|
||||
>
|
||||
{d.known_for.map((c, i) => (
|
||||
<div key={c.id} className="w-[150px] shrink-0">
|
||||
<div key={c.id} className="w-37.5 shrink-0">
|
||||
<PlexPosterCard
|
||||
card={c}
|
||||
navIndex={i}
|
||||
@@ -360,7 +360,7 @@ export function PlexShowView({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-[1200px] mx-auto glass-media">
|
||||
<div className="p-4 max-w-300 mx-auto glass-media">
|
||||
<BackBtn onBack={onBack} label={t("plex.backToLibrary")} />
|
||||
|
||||
{q.isError && !q.data ? (
|
||||
@@ -615,7 +615,7 @@ export function PlexSeasonView({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-4 max-w-[1200px] mx-auto glass-media">
|
||||
<div className="p-4 max-w-300 mx-auto glass-media">
|
||||
<BackBtn onBack={onBack} label={t("plex.series.backToShow")} />
|
||||
|
||||
{q.isError && !q.data ? (
|
||||
|
||||
@@ -137,7 +137,7 @@ describe("Combobox", () => {
|
||||
wrap(<Combobox label="Studio" options={many} selected={[]} onChange={vi.fn()} />);
|
||||
fireEvent.focus(screen.getByRole("combobox"));
|
||||
expect(screen.getAllByRole("option", { hidden: true }).length).toBe(50);
|
||||
expect(screen.getByText("plex.filter.moreRefine")).toBeTruthy(); // 10 hidden behind search
|
||||
expect(screen.getByText("common.moreRefine")).toBeTruthy(); // 10 hidden behind search
|
||||
});
|
||||
|
||||
it("Enter commits the pointer-highlighted option, not the arrow-active one", () => {
|
||||
|
||||
@@ -238,9 +238,7 @@ export default function Combobox({
|
||||
{/* The scroll box owns the height cap AND the scroll-fade mask (ref+style on the same element). */}
|
||||
<div ref={fade.ref} style={fade.style} className="max-h-64 overflow-y-auto no-scrollbar">
|
||||
{loading && filtered.length === 0 ? (
|
||||
<p className="px-2 py-1.5 text-xs text-muted">
|
||||
{t("plex.loading", { defaultValue: "Loading…" })}
|
||||
</p>
|
||||
<p className="px-2 py-1.5 text-xs text-muted">{t("common.loading")}</p>
|
||||
) : filtered.length === 0 ? (
|
||||
<p className="px-2 py-1.5 text-xs text-muted">
|
||||
{emptyText ?? t("common.noResults", { defaultValue: "No matches" })}
|
||||
@@ -285,7 +283,7 @@ export default function Combobox({
|
||||
})}
|
||||
{hiddenCount > 0 && (
|
||||
<p className="px-2 py-1.5 text-2xs text-muted">
|
||||
{t("plex.filter.moreRefine", {
|
||||
{t("common.moreRefine", {
|
||||
count: hiddenCount,
|
||||
defaultValue: "{{count}} more — refine with search",
|
||||
})}
|
||||
@@ -299,7 +297,7 @@ export default function Combobox({
|
||||
open in the combobox's focus model. */}
|
||||
{matchMode != null && onMatchModeChange && selected.length >= 2 && (
|
||||
<div className="mt-1 flex items-center gap-2 border-t border-border px-1 pt-2">
|
||||
<span className="text-2xs text-muted">{t("sidebar.match")}</span>
|
||||
<span className="text-2xs text-muted">{t("common.matchMode")}</span>
|
||||
<div className="ml-auto flex gap-1">
|
||||
{(["or", "and"] as const).map((m) => (
|
||||
<button
|
||||
|
||||
@@ -17,13 +17,15 @@ afterEach(() => {
|
||||
vi.useRealTimers(); // any fake-timer test resets here so it can't leak into the next
|
||||
});
|
||||
|
||||
const raise = () => screen.getByRole("button", { name: "channels.row.raisePriority" });
|
||||
const lower = () => screen.getByRole("button", { name: "channels.row.lowerPriority" });
|
||||
const valueBtn = () => screen.getByRole("button", { name: "channels.row.editPriority" });
|
||||
const raise = () => screen.getByRole("button", { name: "common.priority.raise" });
|
||||
const lower = () => screen.getByRole("button", { name: "common.priority.lower" });
|
||||
const valueBtn = () => screen.getByRole("button", { name: "common.priority.edit" });
|
||||
|
||||
describe("PriorityStepper", () => {
|
||||
it("shows the current priority and both step buttons", () => {
|
||||
render(<PriorityStepper priority={12} onPriority={vi.fn()} onSet={vi.fn()} />);
|
||||
render(
|
||||
<PriorityStepper hint="what it orders" priority={12} onPriority={vi.fn()} onSet={vi.fn()} />,
|
||||
);
|
||||
expect(valueBtn().textContent).toBe("12");
|
||||
expect(raise()).toBeTruthy();
|
||||
expect(lower()).toBeTruthy();
|
||||
@@ -31,14 +33,23 @@ describe("PriorityStepper", () => {
|
||||
|
||||
it("tapping ＋ / − nudges by ±1", () => {
|
||||
const onPriority = vi.fn();
|
||||
render(<PriorityStepper priority={0} onPriority={onPriority} onSet={vi.fn()} />);
|
||||
render(
|
||||
<PriorityStepper
|
||||
hint="what it orders"
|
||||
priority={0}
|
||||
onPriority={onPriority}
|
||||
onSet={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
fireEvent.click(raise());
|
||||
fireEvent.click(lower());
|
||||
expect(onPriority.mock.calls).toEqual([[1], [-1]]);
|
||||
});
|
||||
|
||||
it("clicking the value opens an inline editor seeded with the current value", () => {
|
||||
render(<PriorityStepper priority={7} onPriority={vi.fn()} onSet={vi.fn()} />);
|
||||
render(
|
||||
<PriorityStepper hint="what it orders" priority={7} onPriority={vi.fn()} onSet={vi.fn()} />,
|
||||
);
|
||||
fireEvent.click(valueBtn());
|
||||
const input = screen.getByRole("spinbutton") as HTMLInputElement;
|
||||
expect(input.value).toBe("7");
|
||||
@@ -46,7 +57,9 @@ describe("PriorityStepper", () => {
|
||||
|
||||
it("typing a new value and pressing Enter commits it via onSet (negatives allowed)", () => {
|
||||
const onSet = vi.fn();
|
||||
render(<PriorityStepper priority={7} onPriority={vi.fn()} onSet={onSet} />);
|
||||
render(
|
||||
<PriorityStepper hint="what it orders" priority={7} onPriority={vi.fn()} onSet={onSet} />,
|
||||
);
|
||||
fireEvent.click(valueBtn());
|
||||
const input = screen.getByRole("spinbutton");
|
||||
fireEvent.change(input, { target: { value: "-3" } });
|
||||
@@ -56,7 +69,9 @@ describe("PriorityStepper", () => {
|
||||
|
||||
it("Escape cancels the edit without committing", () => {
|
||||
const onSet = vi.fn();
|
||||
render(<PriorityStepper priority={7} onPriority={vi.fn()} onSet={onSet} />);
|
||||
render(
|
||||
<PriorityStepper hint="what it orders" priority={7} onPriority={vi.fn()} onSet={onSet} />,
|
||||
);
|
||||
fireEvent.click(valueBtn());
|
||||
const input = screen.getByRole("spinbutton");
|
||||
fireEvent.change(input, { target: { value: "99" } });
|
||||
@@ -68,7 +83,9 @@ describe("PriorityStepper", () => {
|
||||
|
||||
it("committing an unchanged value does not call onSet", () => {
|
||||
const onSet = vi.fn();
|
||||
render(<PriorityStepper priority={7} onPriority={vi.fn()} onSet={onSet} />);
|
||||
render(
|
||||
<PriorityStepper hint="what it orders" priority={7} onPriority={vi.fn()} onSet={onSet} />,
|
||||
);
|
||||
fireEvent.click(valueBtn());
|
||||
fireEvent.keyDown(screen.getByRole("spinbutton"), { key: "Enter" });
|
||||
expect(onSet).not.toHaveBeenCalled();
|
||||
@@ -76,7 +93,15 @@ describe("PriorityStepper", () => {
|
||||
|
||||
it("renders the same interactive contract at size=md", () => {
|
||||
const onPriority = vi.fn();
|
||||
render(<PriorityStepper priority={3} onPriority={onPriority} onSet={vi.fn()} size="md" />);
|
||||
render(
|
||||
<PriorityStepper
|
||||
hint="what it orders"
|
||||
priority={3}
|
||||
onPriority={onPriority}
|
||||
onSet={vi.fn()}
|
||||
size="md"
|
||||
/>,
|
||||
);
|
||||
expect(valueBtn().textContent).toBe("3");
|
||||
fireEvent.click(raise());
|
||||
expect(onPriority).toHaveBeenCalledWith(1);
|
||||
@@ -85,7 +110,14 @@ describe("PriorityStepper", () => {
|
||||
it("holding a step button auto-repeats (accelerating) and suppresses the trailing click", () => {
|
||||
vi.useFakeTimers();
|
||||
const onPriority = vi.fn();
|
||||
render(<PriorityStepper priority={0} onPriority={onPriority} onSet={vi.fn()} />);
|
||||
render(
|
||||
<PriorityStepper
|
||||
hint="what it orders"
|
||||
priority={0}
|
||||
onPriority={onPriority}
|
||||
onSet={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.pointerDown(raise());
|
||||
vi.advanceTimersByTime(349);
|
||||
@@ -109,7 +141,14 @@ describe("PriorityStepper", () => {
|
||||
it("a quick tap (released before the hold threshold) still nudges exactly once", () => {
|
||||
vi.useFakeTimers();
|
||||
const onPriority = vi.fn();
|
||||
render(<PriorityStepper priority={0} onPriority={onPriority} onSet={vi.fn()} />);
|
||||
render(
|
||||
<PriorityStepper
|
||||
hint="what it orders"
|
||||
priority={0}
|
||||
onPriority={onPriority}
|
||||
onSet={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.pointerDown(lower());
|
||||
vi.advanceTimersByTime(100); // below the threshold → no auto-repeat armed
|
||||
@@ -122,7 +161,12 @@ describe("PriorityStepper", () => {
|
||||
vi.useFakeTimers();
|
||||
const onPriority = vi.fn();
|
||||
const { unmount } = render(
|
||||
<PriorityStepper priority={0} onPriority={onPriority} onSet={vi.fn()} />,
|
||||
<PriorityStepper
|
||||
hint="what it orders"
|
||||
priority={0}
|
||||
onPriority={onPriority}
|
||||
onSet={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
|
||||
fireEvent.pointerDown(raise());
|
||||
|
||||
@@ -65,11 +65,15 @@ export function PriorityStepper({
|
||||
onPriority,
|
||||
onSet,
|
||||
size = "sm",
|
||||
hint,
|
||||
}: {
|
||||
priority: number;
|
||||
onPriority: (delta: number) => void;
|
||||
onSet: (value: number) => void;
|
||||
size?: Size;
|
||||
/** What the number MEANS where it is used (the tooltip, and the value's accessible name). The
|
||||
* platform layer does not know — a channel's priority orders the feed, another's would not. */
|
||||
hint: string;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [editing, setEditing] = useState(false);
|
||||
@@ -129,16 +133,16 @@ export function PriorityStepper({
|
||||
? `border rounded-md overflow-hidden ${editing ? "border-accent" : "border-border"}`
|
||||
: "";
|
||||
return (
|
||||
<Tooltip hint={t("channels.row.priorityHint")}>
|
||||
<Tooltip hint={hint}>
|
||||
<div
|
||||
role="group"
|
||||
aria-label={t("channels.row.priorityHint")}
|
||||
aria-label={hint}
|
||||
className={`inline-flex items-center cursor-help ${framed}`}
|
||||
>
|
||||
<PriorityStepButton
|
||||
delta={-1}
|
||||
Icon={Minus}
|
||||
label={t("channels.row.lowerPriority")}
|
||||
label={t("common.priority.lower")}
|
||||
sizeCls={cls}
|
||||
onHoldStart={start}
|
||||
onStop={stop}
|
||||
@@ -151,8 +155,8 @@ export function PriorityStepper({
|
||||
>
|
||||
<button
|
||||
onClick={beginEdit}
|
||||
aria-label={t("channels.row.editPriority")}
|
||||
title={t("channels.row.editPriority")}
|
||||
aria-label={t("common.priority.edit")}
|
||||
title={t("common.priority.edit")}
|
||||
className={`w-full text-center font-medium tabular-nums hover:text-accent ${editing ? "invisible" : ""}`}
|
||||
>
|
||||
{priority}
|
||||
@@ -169,7 +173,7 @@ export function PriorityStepper({
|
||||
if (e.key === "Enter") commitEdit();
|
||||
else if (e.key === "Escape") setEditing(false);
|
||||
}}
|
||||
aria-label={t("channels.row.priorityHint")}
|
||||
aria-label={hint}
|
||||
className="absolute inset-0 w-full h-full text-center font-medium tabular-nums text-accent bg-card outline-hidden [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
|
||||
/>
|
||||
)}
|
||||
@@ -177,7 +181,7 @@ export function PriorityStepper({
|
||||
<PriorityStepButton
|
||||
delta={1}
|
||||
Icon={Plus}
|
||||
label={t("channels.row.raisePriority")}
|
||||
label={t("common.priority.raise")}
|
||||
sizeCls={cls}
|
||||
onHoldStart={start}
|
||||
onStop={stop}
|
||||
|
||||
@@ -21,7 +21,10 @@ A component belongs here **iff its props and imports name no domain concept**. I
|
||||
It may **not** import a feature component (`../Feed`) or a domain API slice (`lib/api/*`). This is
|
||||
enforced by `no-restricted-imports` in `eslint.config.js` — not by this README, which is only the
|
||||
explanation. If a primitive needs domain data, take it as a prop or a render-prop and let the module
|
||||
supply it.
|
||||
supply it. The same goes for its words: a primitive translates only from the platform i18n
|
||||
namespaces (`common`, `errors`, `datatable`, `keys`, `palette`, `sidebar`, `notifications`, `time` —
|
||||
`uiI18n.contract.test.ts`); what a value means where it is used arrives as a prop (`PriorityStepper`'s
|
||||
`hint`).
|
||||
|
||||
The direction is one-way from below, too: `lib/` may not import from `components/` — this directory
|
||||
included, not even a type (same lint file). A contract both layers need lives in `lib/`: the `Column`
|
||||
@@ -54,10 +57,9 @@ somewhere:
|
||||
on the root font-size) scales boxes and padding with the label. A `text-[Npx]` font size is an
|
||||
eslint error for exactly this reason. The deliberate exceptions are the layout-engine measurements
|
||||
— `VirtualGrid`'s `minCol` / `colMaxWidth` and `gridColumns`' `GRID_GAP` — which are compared
|
||||
against a container's own pixel width rather than sized against text. Two px box values are NOT
|
||||
deliberate and are worth converting when touched: `Tooltip`'s `max-w-[240px]` (it does not widen
|
||||
with the slider while its text does, so the tooltip re-wraps at large text sizes) and `form.tsx`'s
|
||||
`left-[18px]` toggle knob.
|
||||
against a container's own pixel width rather than sized against text. A px-frozen BOX utility
|
||||
(`w-[Npx]`, `max-w-[Npx]`, …) is an eslint error too, since the 2026-09 sweep: use the spacing
|
||||
scale (`w-37.5` is 150px at the default size and grows with the slider).
|
||||
- **Minimum target: 2.75rem, on coarse pointers only** (`.touch-target`, index.css). A 32px icon
|
||||
button is fine with a mouse and not with a thumb, so the box grows where there is no precise
|
||||
pointer. It grows the real box rather than painting an invisible hit area: two expanded hit areas
|
||||
|
||||
@@ -50,7 +50,7 @@ export default function Tooltip({
|
||||
<PopoverSurface
|
||||
popover={pop}
|
||||
passthrough
|
||||
className="glass w-max max-w-[240px] px-2.5 py-1.5 rounded-lg text-xs leading-snug text-fg font-normal normal-case tracking-normal animate-[fadeIn_0.12s_ease]"
|
||||
className="glass w-max max-w-60 px-2.5 py-1.5 rounded-lg text-xs leading-snug text-fg font-normal normal-case tracking-normal animate-[fadeIn_0.12s_ease]"
|
||||
>
|
||||
{hint}
|
||||
</PopoverSurface>
|
||||
|
||||
@@ -41,7 +41,7 @@ export function Switch({
|
||||
>
|
||||
<span
|
||||
className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow transition-all ${
|
||||
checked ? "left-[18px]" : "left-0.5"
|
||||
checked ? "left-4.5" : "left-0.5"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
// The platform layer (`components/ui/`) may not import a feature component or a domain API slice —
|
||||
// eslint's `no-restricted-imports` enforces that. It cannot see an i18n KEY, though, and two
|
||||
// primitives spoke domain vocabulary through one: `PriorityStepper` labelled itself with
|
||||
// `channels.row.*` (and told every caller that it orders the Feed), `Combobox` said `plex.loading`
|
||||
// and `plex.filter.moreRefine` on the feed sidebar. A primitive's strings live in a platform
|
||||
// namespace; what a value MEANS where it is used arrives as a prop.
|
||||
const PLATFORM_NAMESPACES = new Set([
|
||||
"common",
|
||||
"errors",
|
||||
"datatable",
|
||||
"keys",
|
||||
"palette",
|
||||
"sidebar",
|
||||
"notifications",
|
||||
"time",
|
||||
]);
|
||||
|
||||
const files = import.meta.glob("./**/*.{ts,tsx}", {
|
||||
query: "?raw",
|
||||
import: "default",
|
||||
eager: true,
|
||||
});
|
||||
// `t("ns.…")` and `t(\`ns.…\`)` — the namespace is everything before the first dot.
|
||||
const KEY = /\bt\(\s*["`]([A-Za-z]+)\./g;
|
||||
|
||||
describe("components/ui/ speaks only platform i18n namespaces", () => {
|
||||
it("names no feature namespace", () => {
|
||||
const sources = Object.entries(files).filter(([p]) => !/\.test\.tsx?$/.test(p));
|
||||
expect(sources.length).toBeGreaterThan(20); // the glob matched the layer
|
||||
const offenders = sources.flatMap(([p, src]) =>
|
||||
[...String(src).matchAll(KEY)]
|
||||
.map((m) => m[1]!)
|
||||
.filter((ns) => !PLATFORM_NAMESPACES.has(ns))
|
||||
.map((ns) => `${p}: ${ns}.*`),
|
||||
);
|
||||
expect(offenders).toEqual([]);
|
||||
});
|
||||
|
||||
it("sees a feature namespace when one is used", () => {
|
||||
expect([...'t("plex.loading")'.matchAll(KEY)].map((m) => m[1])).toEqual(["plex"]);
|
||||
});
|
||||
});
|
||||
@@ -108,9 +108,6 @@
|
||||
"editTags": "Edit tags",
|
||||
"filterFeedByTag": "Filter the Feed by “{{name}}”",
|
||||
"priorityHint": "Your ranking for this channel. Sort the Feed by “Channel priority” to bring higher-priority channels to the top.",
|
||||
"raisePriority": "Raise priority",
|
||||
"lowerPriority": "Lower priority",
|
||||
"editPriority": "Click to type a priority (negatives allowed)",
|
||||
"fullHint": "Full history fetched.",
|
||||
"fullySynced": "fully synced",
|
||||
"fullySyncedHint": "Recent uploads and the full back-catalog are both in.",
|
||||
|
||||
@@ -27,5 +27,12 @@
|
||||
"scrollRight": "Scroll right",
|
||||
"search": "Search",
|
||||
"remove": "Remove",
|
||||
"noResults": "No matches"
|
||||
"noResults": "No matches",
|
||||
"priority": {
|
||||
"raise": "Raise priority",
|
||||
"lower": "Lower priority",
|
||||
"edit": "Click to type a priority (negatives allowed)"
|
||||
},
|
||||
"moreRefine": "{{count}} more — refine with search",
|
||||
"matchMode": "Match"
|
||||
}
|
||||
|
||||
@@ -111,8 +111,7 @@
|
||||
"remux": "Direct Stream",
|
||||
"transcode_hw": "Transcode · HW",
|
||||
"transcode_sw": "Transcode · SW"
|
||||
},
|
||||
"moreRefine": "{{count}} more — refine with search"
|
||||
}
|
||||
},
|
||||
"count": "{{count}} titles",
|
||||
"searchCount": "{{count}} matches",
|
||||
|
||||
@@ -20,7 +20,6 @@
|
||||
"any": "Any",
|
||||
"all": "All",
|
||||
"tagModeTooltip": "Match any vs all selected tags",
|
||||
"match": "Match",
|
||||
"custom": "Custom",
|
||||
"from": "From",
|
||||
"to": "To",
|
||||
|
||||
@@ -108,9 +108,6 @@
|
||||
"editTags": "Címkék szerkesztése",
|
||||
"filterFeedByTag": "Feed szűrése: „{{name}}”",
|
||||
"priorityHint": "A te rangsorod ehhez a csatornához. Rendezd a Feedet „Csatorna prioritás” szerint, hogy a magasabb prioritású csatornák felülre kerüljenek.",
|
||||
"raisePriority": "Prioritás növelése",
|
||||
"lowerPriority": "Prioritás csökkentése",
|
||||
"editPriority": "Kattints a prioritás beírásához (negatív is lehet)",
|
||||
"fullHint": "Teljes előzmény letöltve.",
|
||||
"fullySynced": "teljesen szinkronban",
|
||||
"fullySyncedHint": "A legutóbbi feltöltések és a teljes archívum is megvan.",
|
||||
|
||||
@@ -27,5 +27,12 @@
|
||||
"scrollRight": "Görgetés jobbra",
|
||||
"search": "Keresés",
|
||||
"remove": "Eltávolítás",
|
||||
"noResults": "Nincs találat"
|
||||
"noResults": "Nincs találat",
|
||||
"priority": {
|
||||
"raise": "Prioritás növelése",
|
||||
"lower": "Prioritás csökkentése",
|
||||
"edit": "Kattints a prioritás beírásához (negatív is lehet)"
|
||||
},
|
||||
"moreRefine": "még {{count}} — finomíts kereséssel",
|
||||
"matchMode": "Egyezés"
|
||||
}
|
||||
|
||||
@@ -111,8 +111,7 @@
|
||||
"remux": "Közvetlen streamelés",
|
||||
"transcode_hw": "Átkódolás · HW",
|
||||
"transcode_sw": "Átkódolás · SW"
|
||||
},
|
||||
"moreRefine": "még {{count}} — finomíts kereséssel"
|
||||
}
|
||||
},
|
||||
"count": "{{count}} cím",
|
||||
"searchCount": "{{count}} találat",
|
||||
|
||||
@@ -20,7 +20,6 @@
|
||||
"any": "Bármelyik",
|
||||
"all": "Összes",
|
||||
"tagModeTooltip": "Bármelyik vagy az összes kijelölt címke illeszkedjen",
|
||||
"match": "Egyezés",
|
||||
"custom": "Egyéni",
|
||||
"from": "Ettől",
|
||||
"to": "Eddig",
|
||||
|
||||
@@ -30,7 +30,10 @@ function count(haystack: string, needle: string): number {
|
||||
* lane in a file that already had a compliant one still passed, which is the exact hole this test
|
||||
* was rewritten to close (E10 review round 2, caught by mutation). */
|
||||
function laneCount(src: string): number {
|
||||
return count(src.replace(/^\s*import[\s\S]*?from\s+"[^"]*";$/gm, ""), "chipLaneClass");
|
||||
// `[^;]` rather than `[\s\S]`: an import is stripped up to ITS OWN `from "…";`. The lazy any-char
|
||||
// form ran past a side-effect import (`import "./x.css";` has no `from`) into the next statement's
|
||||
// `from`, swallowing whatever lay between — a lane there would be uncounted.
|
||||
return count(src.replace(/^\s*import\s[^;]*?\sfrom\s+"[^"]*";$/gm, ""), "chipLaneClass");
|
||||
}
|
||||
|
||||
/** Every source file under src/, not just src/components/ — App.tsx and main.tsx sit above it. */
|
||||
@@ -55,6 +58,15 @@ function withMirror(): Array<[string, string]> {
|
||||
}
|
||||
|
||||
describe("chip lane containment contract", () => {
|
||||
it("strips imports without swallowing what follows a side-effect import", () => {
|
||||
const src = [
|
||||
'import "./x.css";',
|
||||
"const lane = chipLaneClass;",
|
||||
'import { chipLaneClass } from "./chipLane";',
|
||||
].join("\n");
|
||||
expect(laneCount(src)).toBe(1);
|
||||
});
|
||||
|
||||
it("keeps all three halves of the lane class — offsetParent, clip, and room for the focus ring", () => {
|
||||
expect(chipLaneClass.split(/\s+/)).toEqual(
|
||||
expect.arrayContaining(["relative", "overflow-clip", "[overflow-clip-margin:0.25rem]"]),
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
import { ESLint } from "eslint";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
// The px-frozen BOX rule in eslint.config.js (beside the older `text-[Npx]` one). A `no-restricted-
|
||||
// syntax` selector that matches nothing looks exactly like a clean codebase, so pin that it fires.
|
||||
const FRONTEND = fileURLToPath(new URL("../../", import.meta.url));
|
||||
|
||||
async function refused(source: string): Promise<number> {
|
||||
const eslint = new ESLint({ cwd: FRONTEND });
|
||||
const [result] = await eslint.lintText(source, { filePath: "src/components/__probe.tsx" });
|
||||
return (result?.messages ?? []).filter((m) => m.message.startsWith("px-frozen box size")).length;
|
||||
}
|
||||
|
||||
describe("a px-frozen box utility", () => {
|
||||
it("is refused in a string and in a template literal", async () => {
|
||||
expect(await refused('export const a = "group w-[150px] shrink-0";\n')).toBe(1);
|
||||
expect(await refused("export const b = `x ${1} max-w-[240px]`;\n")).toBe(1);
|
||||
});
|
||||
|
||||
it("leaves the spacing scale, a rem arbitrary and a grid track alone", async () => {
|
||||
expect(await refused('export const c = "w-37.5 max-w-60 text-[0.75rem]";\n')).toBe(0);
|
||||
expect(await refused('export const d = "grid-cols-[1fr_240px]";\n')).toBe(0);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user