Jamie BruntonandClaude Fable 5
e984bf20ac
Shared foundation: - New Modal component on native <dialog>.showModal() (focus trap, inert background, Escape, focus restore, scroll lock); all eight dialogs and both globalThis.confirm calls migrated to it - Design tokens for success/warning/danger surfaces; pill danger variant; .sr-only utility; toast layering above dialog backdrops; not-allowed cursor for validity-disabled buttons Conversations/attention: auto-scroll with jump-to-latest, per-conversation draft persistence, suggestion undo, 30s auto-refresh with refresh controls, unread emphasis and counts, blur-consistent share dialog, empty-accounts guidance, collapsed user lookup, relative timestamps, danger pills for critical items Media/library/outreach: click-blurred-to-reveal, lightbox with arrow navigation and captions, dirty-form preservation across refetches, upload validation with thumbnail preview, save feedback, result counts with load-more and clear-filters, ticking countdowns from a single clock Overview/performance/operations/settings: mutation errors inside the confirm dialog, live sending-window countdown, offline-aware loading states, per-panel loading/error with retry, 7/30/90-day range toggle, console scroll yielding with shown/retained counts, risky-save matching by subreddit name instead of index, useBlocker unsaved-changes guard, single-pass validation with focus-to-first-error, access panel JSON validation and input reset Tests: 806 -> 844 passing; both typechecks clean. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { useState } from 'react';
|
|
import type { MediaLibraryAsset } from '../../../../../packages/api-contracts/src/index.js';
|
|
import { Modal } from '../../components/modal.js';
|
|
|
|
interface MediaShareConfirmationDialogProps {
|
|
asset: MediaLibraryAsset;
|
|
/** Whether the operator already revealed the saved images in the composer. */
|
|
areImagesRevealed: boolean;
|
|
isPending: boolean;
|
|
onCancel(): void;
|
|
onConfirm(): void;
|
|
}
|
|
|
|
export function MediaShareConfirmationDialog({ asset, areImagesRevealed, isPending, onCancel, onConfirm }: MediaShareConfirmationDialogProps) {
|
|
const [isRevealed, setIsRevealed] = useState(areImagesRevealed);
|
|
|
|
return (
|
|
<Modal
|
|
className="dialog-card conversation-dialog conversation-media-confirmation"
|
|
isDismissLocked={isPending}
|
|
labelledBy="media-share-confirmation-title"
|
|
onClose={onCancel}
|
|
>
|
|
<span className="conversation-eyebrow">Confirm image</span>
|
|
<h2 id="media-share-confirmation-title">Share this saved image?</h2>
|
|
<p>This sends immediately through Reddit chat, then asks them to reciprocate without pressure.</p>
|
|
<div className="conversation-message-image">
|
|
<img
|
|
alt={`Saved image tagged ${asset.tags.join(', ')}`}
|
|
className={isRevealed ? undefined : 'is-blurred'}
|
|
src={asset.urlPath}
|
|
/>
|
|
<button
|
|
aria-pressed={isRevealed}
|
|
className="conversation-image-reveal"
|
|
onClick={() => setIsRevealed((current) => !current)}
|
|
type="button"
|
|
>
|
|
{isRevealed ? 'Blur image' : 'Reveal image'}
|
|
</button>
|
|
</div>
|
|
<div className="conversation-actions">
|
|
<button autoFocus disabled={isPending} onClick={onCancel} type="button">Cancel</button>
|
|
<button
|
|
aria-busy={isPending || undefined}
|
|
className="conversation-primary"
|
|
disabled={isPending}
|
|
onClick={onConfirm}
|
|
type="button"
|
|
>
|
|
{isPending ? 'Sharing…' : 'Confirm image share'}
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|