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>
41 lines
2.2 KiB
TypeScript
41 lines
2.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { AccountOwnerBadge } from '../../components/account-owner-badge.js';
|
|
import { RedditUsernameLink, redditUsernameLabel } from '../../components/reddit-username-link.js';
|
|
import { useProcessedPostsQuery } from './conversation-queries.js';
|
|
|
|
export function ProcessedUserLookup() {
|
|
const [input, setInput] = useState('');
|
|
const [username, setUsername] = useState('');
|
|
const postsQuery = useProcessedPostsQuery(username);
|
|
// Only show results that belong to the current lookup; switching the
|
|
// username changes the query key, which clears stale data automatically.
|
|
const showResults = postsQuery.data !== undefined && !postsQuery.isFetching;
|
|
|
|
return (
|
|
<details className="new-conversation-panel processed-user-lookup">
|
|
<summary>
|
|
<h2 id="processed-user-heading">Processed user lookup</h2>
|
|
</summary>
|
|
<form
|
|
className="start-conversation-form processed-user-form"
|
|
onSubmit={(event) => { event.preventDefault(); setUsername(input.trim().replace(/^u\//i, '')); }}
|
|
>
|
|
<div className="conversation-field">
|
|
<label htmlFor="processed-user">Lookup Reddit username</label>
|
|
<input autoComplete="off" id="processed-user" onChange={(event) => setInput(event.target.value)} value={input} />
|
|
</div>
|
|
<button className="conversation-primary" disabled={input.trim().length === 0} type="submit">Look up user</button>
|
|
</form>
|
|
{postsQuery.isFetching && username ? <p role="status">Looking up processed posts...</p> : null}
|
|
{postsQuery.isError ? <p className="conversation-inline-error" role="alert">{postsQuery.error.message}</p> : null}
|
|
{showResults && postsQuery.data ? (
|
|
postsQuery.data.length === 0 ? <p>No processed posts found for <RedditUsernameLink username={username} />.</p> : (
|
|
<ol aria-label={`Processed posts for ${redditUsernameLabel(username)}`}>
|
|
{postsQuery.data.map((post) => <li key={`${post.owner?.accountId ?? 'legacy'}:${post.id}`}><strong>{post.title}</strong><AccountOwnerBadge owner={post.owner} /><span>r/{post.subreddit} · {post.messageSent ? 'Message sent' : post.error ?? 'Processed'}</span></li>)}
|
|
</ol>
|
|
)
|
|
) : null}
|
|
</details>
|
|
);
|
|
}
|