peter
76358a0d77
E32 S3. The compiler skipped 93 functions; it now skips 29 (try/finally shapes, two suppressions,
VirtualGrid). react-hooks/refs hits 245 -> 31.
- Popover engine: `ref={pop.refs.setReference}` made the compiler treat the whole popover handle as
a ref, so every component holding one was skipped (21 call sites, the engine and its surface
among them). The setter is destructured now; the same for useScrollFade and useReturnFocus.
- Render-phase `ref.current = x` writes moved to `useEffectEvent` where only effects read them,
else to the new `useLatest` (written in a layout effect) / `useStableCallback`.
- FocusSafeButton (under every Button) read the focused element during render; it reads it through
useSyncExternalStore, which React asks on every render instead of a cached memo.
Bugs this surfaced, fixed:
- Combobox: a chip could keep showing its raw id. The label cache was a ref an effect filled after
the render that needed it; it is state merged during render now (test seen RED).
- useUndoable rendered from a ref plus a forced re-render; compiled, that memoizes a stale value.
The history is state now, mirrored in a ref for the stable callbacks.
- ConfigPanel and the saved-views editor re-seeded their drafts in an effect, painting the stale
draft for a frame; both adjust during render against the remembered key.
- Toaster's handover is written after commit instead of during render; a new test pins that the
inherited set is taken once, at the takeover (seen RED on a per-render re-read).
- IssueComposer mutated a ref prop as a one-shot focus token; it is plain state.
- PlexBrowse wrote its info-scroll memory from an effect declared before the ref, past its own
"one writer" rule; the writer comes first now and the effect goes through it.
The compiler ratchet drops to the measured 29 and now also requires FocusSafeButton and the popover
engine to compile.
107 lines
3.8 KiB
TypeScript
107 lines
3.8 KiB
TypeScript
import { useState, type ReactNode } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Settings2 } from "lucide-react";
|
|
import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
|
|
import { closeThenAct, useAnchoredPopover } from "./ui/anchoredPopoverHooks";
|
|
import { useSavedViews } from "./savedViewsContext";
|
|
import { IconButton } from "./ui/IconButton";
|
|
import { MenuCheck } from "./ui/MenuCheck";
|
|
import { SURFACE } from "./ui/surfaces";
|
|
import { SelectTrigger } from "./ui/SelectTrigger";
|
|
|
|
// The saved-views quick-picker. The filter-panel header's icon (and the toolbar's view chip) use it as
|
|
// their trigger: click → a popover list of the user's saved views (apply on click, the active one
|
|
// checked) + a "Manage views…" entry that opens the Personal Views modal, where the editing lives.
|
|
export default function SavedViewsPopover({
|
|
trigger,
|
|
toolbar = false,
|
|
icon,
|
|
trailing,
|
|
ariaLabel,
|
|
placement = "bottom-start",
|
|
}: {
|
|
trigger: ReactNode;
|
|
/** The toolbar's view chip: the A5 dropdown trigger around `trigger`, instead of a glyph. */
|
|
toolbar?: boolean;
|
|
/** Toolbar only: the trigger's leading glyph and its after-the-value mark, in their own slots. */
|
|
icon?: ReactNode;
|
|
trailing?: ReactNode;
|
|
ariaLabel?: string;
|
|
placement?: "bottom-start" | "bottom-end";
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const { views, activeViewId, apply, openModal } = useSavedViews();
|
|
const [open, setOpen] = useState(false);
|
|
const pop = useAnchoredPopover({ open, onOpenChange: setOpen, placement });
|
|
const { setReference } = pop.refs;
|
|
const label = ariaLabel ?? t("views.saved");
|
|
return (
|
|
<>
|
|
{toolbar ? (
|
|
<SelectTrigger
|
|
context="toolbar"
|
|
open={open}
|
|
icon={icon}
|
|
trailing={trailing}
|
|
ref={setReference}
|
|
{...pop.getReferenceProps()}
|
|
aria-label={label}
|
|
>
|
|
{trigger}
|
|
</SelectTrigger>
|
|
) : (
|
|
<IconButton
|
|
variant="ghost-accent"
|
|
ref={setReference}
|
|
{...pop.getReferenceProps()}
|
|
label={label}
|
|
>
|
|
{trigger}
|
|
</IconButton>
|
|
)}
|
|
<PopoverSurface
|
|
popover={pop}
|
|
ariaLabel={label}
|
|
className={`${SURFACE.menu} min-w-56 animate-[popIn_0.16s_ease]`}
|
|
>
|
|
{views.length === 0 ? (
|
|
<p className="px-2 py-1.5 text-2xs leading-snug text-muted">{t("views.empty")}</p>
|
|
) : (
|
|
<div role="group" aria-label={label}>
|
|
{views.map((v) => (
|
|
<PopoverItem
|
|
key={v.id}
|
|
role="menuitemradio"
|
|
checked={v.id === activeViewId}
|
|
onSelect={() => {
|
|
apply(v);
|
|
setOpen(false);
|
|
}}
|
|
label={v.name}
|
|
className={`flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition ${
|
|
v.id === activeViewId ? "text-fg" : "text-muted"
|
|
}`}
|
|
>
|
|
<MenuCheck kind="one" on={v.id === activeViewId} />
|
|
<span className="flex-1 truncate">{v.name}</span>
|
|
</PopoverItem>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="mt-1 border-t border-border pt-1">
|
|
<PopoverItem
|
|
role="menuitem"
|
|
// Opens a dialog: close first, or the menu's focus return steals its focus (closeThenAct).
|
|
onSelect={() => closeThenAct(() => setOpen(false), openModal)}
|
|
label={t("views.manage")}
|
|
className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-muted transition hover:text-fg"
|
|
>
|
|
<Settings2 className="h-3.5 w-3.5 shrink-0" aria-hidden="true" />
|
|
<span className="flex-1">{t("views.manage")}</span>
|
|
</PopoverItem>
|
|
</div>
|
|
</PopoverSurface>
|
|
</>
|
|
);
|
|
}
|