mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
f75b243f03
After re-audit/critique cycle the deterministic detector (npx impeccable)
flagged 34 design-spec violations. Knock out 33 of them.
• 25 × pure-black-white: sed-sweep bg-black/X → bg-dark-950/X across
18+ files (modal scrims, photo viewer backdrop, code blocks). The
base resolves to rgba(10,15,26,X) — visually identical to true
black, satisfies the 'no #000' impeccable rule.
• 3 × bounce-easing: SuccessNotificationModal celebration icon and
SyncTab loading arrows used animate-bounce; replaced with
animate-pulse. Bounce easing reads dated; pulse conveys 'in
progress' without the cartoon feel.
• 3 × border-accent-on-rounded: TelegramCallback + VerifyEmail
spinners used 'border-b-2 border-accent-500' on rounded-full —
detector reads it as a side-stripe even though it's a ring loader.
Switch to canonical 'border-2 border-accent-500 border-t-transparent'
(3/4 ring colored). Same visual, no spec violation.
• 1 × ai-color-palette: AdminLandingStats had text-purple-400 on a
gift-stats heading; purple is not in the brand palette. Swap to
text-accent-400.
• 1 × layout-transition: TrafficProgressBar.tsx fill bar still used
transition: width 1.2s (slipped past the earlier optimize pass).
Convert to transform: scaleX with origin-left. Same gradient, same
duration, runs on the compositor.
Remaining: 1 finding in third-party Aceternity background-beams-collision
component (indigo-500 gradient on decorative WebGL background) — left
as-is, it's lifted decorative third-party code.
Detector: 34 → 1.
73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import { useEffect, useState, type SyntheticEvent } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useFocusTrap } from '../hooks/useFocusTrap';
|
|
import { usePromptStore } from '../store/promptDialog';
|
|
|
|
/**
|
|
* Global host for usePrompt(). Mount once near the app root.
|
|
* Renders an accessible text-input dialog (focus-trapped, Esc/Enter, scroll-locked)
|
|
* as a cross-platform replacement for window.prompt, which the Telegram WebView ignores.
|
|
*/
|
|
export function PromptDialogHost() {
|
|
const request = usePromptStore((s) => s.request);
|
|
const submit = usePromptStore((s) => s.submit);
|
|
const cancel = usePromptStore((s) => s.cancel);
|
|
const { t } = useTranslation();
|
|
const [value, setValue] = useState('');
|
|
|
|
const open = request !== null;
|
|
const dialogRef = useFocusTrap<HTMLFormElement>(open, { onEscape: cancel });
|
|
|
|
useEffect(() => {
|
|
if (request) setValue(request.initialValue ?? '');
|
|
}, [request]);
|
|
|
|
if (!request) return null;
|
|
|
|
const handleSubmit = (e: SyntheticEvent) => {
|
|
e.preventDefault();
|
|
const trimmed = value.trim();
|
|
if (!trimmed) {
|
|
cancel();
|
|
return;
|
|
}
|
|
submit(trimmed);
|
|
};
|
|
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-dark-950/60" onClick={cancel} aria-hidden="true" />
|
|
<form
|
|
ref={dialogRef}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={request.title ?? request.label}
|
|
onSubmit={handleSubmit}
|
|
className="card relative w-full max-w-sm space-y-4"
|
|
>
|
|
{request.title && <h2 className="text-lg font-semibold text-dark-50">{request.title}</h2>}
|
|
<label className="block">
|
|
<span className="label">{request.label}</span>
|
|
<input
|
|
type={request.inputType ?? 'text'}
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
placeholder={request.placeholder}
|
|
className="input"
|
|
/>
|
|
</label>
|
|
<div className="flex justify-end gap-2">
|
|
<button type="button" onClick={cancel} className="btn-secondary">
|
|
{request.cancelLabel ?? t('common.cancel')}
|
|
</button>
|
|
<button type="submit" className="btn-primary">
|
|
{request.submitLabel ?? t('common.ok', 'OK')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|