feat: dashboard UI/UX overhaul from full review

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>

apps/dashboard/src/features/media/media-card.tsx

@@ -2,7 +2,7 @@ import type { MediaItem } from '../../../../../packages/api-contracts/src/index.
 import { Link } from 'react-router-dom';
 import { RedditUsernameLink } from '../../components/reddit-username-link.js';
 import { createOwnedConversationId } from '../conversations/conversation-identity.js';
-import { mediaConversation, mediaType } from './filters.js';
+import { mediaAlt, mediaConversation, mediaType } from './filters.js';
 import { AccountOwnerBadge } from '../../components/account-owner-badge.js';
 
 interface MediaCardProps {
@@ -26,21 +26,23 @@ export function MediaCard({ item, isRevealed, onToggleReveal, onOpenPreview }: M
     <article className="media-card">
       <div className="media-preview">
         <button
-          aria-label={`View media from ${item.sender} larger`}
+          aria-label={isRevealed ? `View media from ${item.sender} larger` : `Reveal media from ${item.sender}`}
           className="media-preview-button"
-          disabled={!isRevealed}
-          onClick={onOpenPreview}
+          onClick={() => {
+            if (isRevealed) onOpenPreview();
+            else onToggleReveal();
+          }}
           type="button"
         >
-          <img alt={`Media from ${item.sender}`} className={isRevealed ? 'media-image' : 'media-image is-blurred'} loading="lazy" src={item.urlPath} />
+          <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><RedditUsernameLink showPrefix={false} username={item.sender} /></strong>
-          <span>{item.chatUsername
+          <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>
@@ -54,6 +56,7 @@ export function MediaCard({ item, isRevealed, onToggleReveal, onOpenPreview }: M
           </Link>
         ) : null}
         <button
+          aria-pressed={isRevealed}
           className="button secondary media-reveal"
           onClick={onToggleReveal}
           type="button"