feat: add conversation image previews and sharing

apps/dashboard/src/features/conversations/media-share-confirmation-dialog.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react';
+import type { MediaLibraryAsset } from '../../../../../packages/api-contracts/src/index.js';
+
+interface MediaShareConfirmationDialogProps {
+  asset: MediaLibraryAsset;
+  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]);
+
+  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>
+      </div>
+    </div>
+  );
+}