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/conversations/media-share-confirmation-dialog.tsx

@@ -1,39 +1,56 @@
-import { useEffect, useRef } from 'react';
+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, isPending, onCancel, onConfirm }: MediaShareConfirmationDialogProps) {
-  const cancelButtonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    cancelButtonRef.current?.focus();
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === 'Escape' && !isPending) onCancel();
-    }
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isPending, onCancel]);
+export function MediaShareConfirmationDialog({ asset, areImagesRevealed, isPending, onCancel, onConfirm }: MediaShareConfirmationDialogProps) {
+  const [isRevealed, setIsRevealed] = useState(areImagesRevealed);
 
   return (
-    <div aria-labelledby="media-share-confirmation-title" aria-modal="true" className="conversation-dialog-backdrop" role="dialog">
-      <div className="conversation-dialog conversation-media-confirmation">
-        <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>
-        <img alt={`Saved image tagged ${asset.tags.join(', ')}`} src={asset.urlPath} />
-        <div className="conversation-actions">
-          <button disabled={isPending} onClick={onCancel} ref={cancelButtonRef} type="button">Cancel</button>
-          <button className="conversation-primary" disabled={isPending} onClick={onConfirm} type="button">
-            {isPending ? 'Sharing…' : 'Confirm image share'}
-          </button>
-        </div>
+    <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>
+      <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>
   );
 }