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.
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
import { createContext, useCallback, useContext, type ReactNode } from "react";
|
|
|
|
// App-styled, promise-based replacement for window.confirm. Wrap the tree in
|
|
// <ConfirmProvider> once, then anywhere: const confirm = useConfirm();
|
|
// if (await confirm({ message: "…", danger: true })) { … }
|
|
//
|
|
// For a decision with more than two outcomes use `useChoice()` instead — never chain two
|
|
// confirms, because the second dialog's Cancel/Escape/backdrop is then indistinguishable from
|
|
// a deliberate answer (the playlist delete used to read a dismissal as "delete here only" and
|
|
// went ahead and deleted).
|
|
//
|
|
// The context + hooks live here, apart from the dialog in ConfirmProvider, so that file exports only
|
|
// components (Fast Refresh).
|
|
interface ConfirmOptions {
|
|
title?: string;
|
|
message: ReactNode;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
danger?: boolean;
|
|
}
|
|
|
|
interface Choice {
|
|
id: string;
|
|
label: string;
|
|
danger?: boolean;
|
|
}
|
|
|
|
export interface ChoiceOptions {
|
|
title?: string;
|
|
message: ReactNode;
|
|
cancelLabel?: string;
|
|
/** Rendered left→right after Cancel. Resolves to the clicked choice's `id`. */
|
|
choices: Choice[];
|
|
}
|
|
|
|
export type ChoiceFn = (opts: ChoiceOptions) => Promise<string | null>;
|
|
type ConfirmFn = (opts: ConfirmOptions) => Promise<boolean>;
|
|
|
|
export const ChoiceContext = createContext<ChoiceFn>(() => Promise.resolve(null));
|
|
|
|
/** Two outcomes: resolves true on confirm, false on cancel/Escape/backdrop. */
|
|
export function useConfirm(): ConfirmFn {
|
|
const ask = useContext(ChoiceContext);
|
|
return useCallback(
|
|
async (opts: ConfirmOptions) => {
|
|
const picked = await ask({
|
|
title: opts.title,
|
|
message: opts.message,
|
|
cancelLabel: opts.cancelLabel,
|
|
choices: [{ id: "confirm", label: opts.confirmLabel ?? "", danger: opts.danger }],
|
|
});
|
|
return picked === "confirm";
|
|
},
|
|
[ask],
|
|
);
|
|
}
|
|
|
|
/** Three or more outcomes. Resolves to the chosen id, or **null** when the user cancels,
|
|
* presses Escape or clicks the backdrop — dismissal is never one of the actions. */
|
|
export function useChoice(): ChoiceFn {
|
|
return useContext(ChoiceContext);
|
|
}
|