peter
61e848e63a
New source-agnostic SegmentedToggle primitive (rounded-full pill track, one active option, aria-pressed drives the paint via the .pill recipe). Migrates the three hand-rolled MATCH segments onto it: - feed tag any/all "Match" toggle (Sidebar) - feed Mine/Library scope bar (Sidebar; fullWidth + icons + per-option tips) - Plex any/all combine toggle (PlexSidebar MatchToggle is now a thin binding) Caption mode (justify-between + label) covers the match toggles; fullWidth + size="md" covers the scope bar. Adds SegmentedToggle.dom.test.tsx (6 tests). Part of the app-wide single-select control unification; branch not merged.
76 lines
2.5 KiB
TypeScript
76 lines
2.5 KiB
TypeScript
import { type ReactNode } from "react";
|
|
|
|
// Shared MATCH / segmented primitive — a rounded-full pill track where exactly ONE option is active
|
|
// (radio-like). Backs the feed any/all + or/and "Match" toggles and the feed Mine/Library scope bar,
|
|
// and the Plex any/all combine toggles. The active paint comes entirely from the
|
|
// `.pill[aria-pressed="true"]` recipe (index.css) — do NOT add bg/text/border-colour utilities on the
|
|
// buttons here or a utility-layer class would beat the pressed fill.
|
|
|
|
export interface SegmentedOption<T extends string> {
|
|
value: T;
|
|
label: string;
|
|
icon?: ReactNode;
|
|
title?: string; // optional per-option tooltip
|
|
}
|
|
|
|
export default function SegmentedToggle<T extends string>({
|
|
options,
|
|
value,
|
|
onChange,
|
|
ariaLabel,
|
|
label,
|
|
title,
|
|
fullWidth = false,
|
|
size = "sm",
|
|
className,
|
|
}: {
|
|
options: readonly SegmentedOption<T>[];
|
|
value: T;
|
|
onChange: (v: T) => void;
|
|
ariaLabel: string;
|
|
// Optional left-hand caption; when set the control renders as a justify-between row (the feed/Plex
|
|
// "Match" toggles). Omit for a standalone bar (the Mine/Library scope switch).
|
|
label?: ReactNode;
|
|
title?: string; // tooltip on the whole row (caption mode only)
|
|
// Full-width track with flex-1 buttons (the scope bar); default is intrinsic width.
|
|
fullWidth?: boolean;
|
|
// sm = text-3xs, compact padding (the captioned match toggles); md = text-xs (the scope bar).
|
|
size?: "sm" | "md";
|
|
className?: string;
|
|
}) {
|
|
const track = (
|
|
<div
|
|
className={`inline-flex items-center rounded-full border border-border bg-card p-0.5 ${
|
|
size === "md" ? "text-xs" : "text-3xs"
|
|
}${fullWidth ? " w-full" : ""}`}
|
|
role="group"
|
|
aria-label={ariaLabel}
|
|
>
|
|
{options.map((o) => (
|
|
<button
|
|
key={o.value}
|
|
onClick={() => onChange(o.value)}
|
|
title={o.title}
|
|
aria-pressed={value === o.value}
|
|
className={`pill inline-flex items-center justify-center gap-1 rounded-full ${
|
|
size === "md" ? "px-2.5 py-1" : "px-2 py-0.5"
|
|
}${fullWidth ? " flex-1" : ""}`}
|
|
>
|
|
{o.icon}
|
|
<span>{o.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
if (label == null) {
|
|
return className ? <div className={className}>{track}</div> : track;
|
|
}
|
|
return (
|
|
<div className={`flex items-center justify-between ${className ?? "mb-1.5"}`} title={title}>
|
|
<span className="text-3xs uppercase tracking-wide text-muted">{label}</span>
|
|
{track}
|
|
</div>
|
|
);
|
|
}
|