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>
70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
import type { MediaItem } from '../../../../../packages/api-contracts/src/index.js';
|
|
import { Link } from 'react-router-dom';
|
|
import { RedditUsernameLink } from '../../components/reddit-username-link.js';
|
|
import { createOwnedConversationId } from '../conversations/conversation-identity.js';
|
|
import { mediaAlt, mediaConversation, mediaType } from './filters.js';
|
|
import { AccountOwnerBadge } from '../../components/account-owner-badge.js';
|
|
|
|
interface MediaCardProps {
|
|
item: MediaItem;
|
|
isRevealed: boolean;
|
|
onToggleReveal(): void;
|
|
onOpenPreview(): void;
|
|
}
|
|
|
|
function formatMediaDate(timestamp: number): string {
|
|
return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(timestamp);
|
|
}
|
|
|
|
export function MediaCard({ item, isRevealed, onToggleReveal, onOpenPreview }: MediaCardProps) {
|
|
const conversationId = item.chatRoomId ?? item.chatUsername;
|
|
const conversationPath = conversationId
|
|
? `/conversations/${encodeURIComponent(createOwnedConversationId(item.owner?.accountId, conversationId))}`
|
|
: null;
|
|
|
|
return (
|
|
<article className="media-card">
|
|
<div className="media-preview">
|
|
<button
|
|
aria-label={isRevealed ? `View media from ${item.sender} larger` : `Reveal media from ${item.sender}`}
|
|
className="media-preview-button"
|
|
onClick={() => {
|
|
if (isRevealed) onOpenPreview();
|
|
else onToggleReveal();
|
|
}}
|
|
type="button"
|
|
>
|
|
<img alt={mediaAlt(item)} className={isRevealed ? 'media-image' : 'media-image is-blurred'} loading="lazy" src={item.urlPath} />
|
|
</button>
|
|
{!isRevealed ? <span className="privacy-label">Private media hidden</span> : null}
|
|
</div>
|
|
<div className="media-card-body">
|
|
<AccountOwnerBadge owner={item.owner} />
|
|
<div>
|
|
<strong><span className="media-link-prefix">From</span> <RedditUsernameLink showPrefix={false} username={item.sender} /></strong>
|
|
<span><span className="media-link-prefix">Conversation</span> {item.chatUsername
|
|
? <RedditUsernameLink showPrefix={false} username={item.chatUsername} />
|
|
: mediaConversation(item)}</span>
|
|
</div>
|
|
<dl>
|
|
<div><dt>Type</dt><dd>{mediaType(item) === 'gif' ? 'GIF' : 'Image'}</dd></div>
|
|
<div><dt>Received</dt><dd>{formatMediaDate(item.timestamp)}</dd></div>
|
|
</dl>
|
|
{conversationPath ? (
|
|
<Link className="button secondary media-conversation-link" to={conversationPath}>
|
|
Open conversation
|
|
</Link>
|
|
) : null}
|
|
<button
|
|
aria-pressed={isRevealed}
|
|
className="button secondary media-reveal"
|
|
onClick={onToggleReveal}
|
|
type="button"
|
|
>
|
|
{isRevealed ? `Hide media from ${item.sender}` : `Reveal media from ${item.sender}`}
|
|
</button>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|