feat(dashboard): add full-size media preview

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

@@ -5,22 +5,22 @@ 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 }: MediaCardProps) {
+export function MediaCard({ item, isRevealed, onToggleReveal, onOpenPreview }: MediaCardProps) {
   return (
     <article className="media-card">
       <div className="media-preview">
-        <img
-          alt={`Media from ${item.sender}`}
-          className={isRevealed ? 'media-image' : 'media-image is-blurred'}
-          loading="lazy"
-          src={item.urlPath}
-        />
+        {isRevealed ? (
+          <button aria-label={`View media from ${item.sender} larger`} className="media-preview-button" onClick={onOpenPreview} type="button">
+            <img alt={`Media from ${item.sender}`} className="media-image" loading="lazy" src={item.urlPath} />
+          </button>
+        ) : <img alt={`Media from ${item.sender}`} className="media-image is-blurred" loading="lazy" src={item.urlPath} />}
         {!isRevealed ? <span className="privacy-label">Private media hidden</span> : null}
       </div>
       <div className="media-card-body">