Blur conversation images by default

apps/dashboard/src/features/conversations/conversation-detail.tsx

@@ -20,6 +20,8 @@ function mediaPath(localPath: string): string {
 }
 
 function MessageHistory({ conversation }: { conversation: ConversationDetailResponse }) {
+  const [revealedMedia, setRevealedMedia] = useState<Set<string>>(() => new Set());
+
   if (!conversation.messages || conversation.messages.length === 0) {
     return <div className="conversation-empty-detail">No messages have been loaded for this conversation.</div>;
   }
@@ -38,21 +40,35 @@ function MessageHistory({ conversation }: { conversation: ConversationDetailResp
           <p>{message.text}</p>
           {message.media?.length ? (
             <div className="conversation-message-images">
-              {message.media.map((media) => (
-                <a
-                  aria-label={`View original image ${message.isSelf ? 'sent by you' : `received from ${redditUsernameLabel(conversation.username)}`}`}
-                  href={mediaPath(media.localPath)}
-                  key={`${message.timestamp}-${media.localPath}`}
-                  rel="noreferrer"
-                  target="_blank"
-                >
+              {message.media.map((media) => {
+                const mediaKey = `${message.timestamp}-${media.localPath}`;
+                const sender = message.isSelf ? 'sent by you' : `received from ${redditUsernameLabel(conversation.username)}`;
+                const isRevealed = revealedMedia.has(mediaKey);
+
+                return (
+                  <div className="conversation-message-image" key={mediaKey}>
                   <img
-                    alt={`Image ${message.isSelf ? 'sent by you' : `received from ${redditUsernameLabel(conversation.username)}`}`}
+                    alt={`Image ${sender}`}
+                    className={isRevealed ? undefined : 'is-blurred'}
                     loading="lazy"
                     src={mediaPath(media.localPath)}
                   />
-                </a>
-              ))}
+                    <button
+                      aria-pressed={isRevealed}
+                      className="conversation-image-reveal"
+                      onClick={() => setRevealedMedia((current) => {
+                        const next = new Set(current);
+                        if (next.has(mediaKey)) next.delete(mediaKey);
+                        else next.add(mediaKey);
+                        return next;
+                      })}
+                      type="button"
+                    >
+                      {isRevealed ? 'Blur conversation image' : 'Reveal conversation image'}
+                    </button>
+                  </div>
+                );
+              })}
             </div>
           ) : null}
         </li>

apps/dashboard/src/features/conversations/conversations.css

@@ -62,9 +62,11 @@
 .conversation-messages time { color: var(--muted); font-size: .7rem; }
 .conversation-messages p { margin: 0; line-height: 1.45; white-space: pre-wrap; }
 .conversation-message-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: .5rem; margin-top: .65rem; }
-.conversation-message-images a { display: block; border-radius: .6rem; }
-.conversation-message-images a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.conversation-message-images img { display: block; width: 100%; max-width: 28rem; max-height: 32rem; object-fit: contain; background: #08100c; border: 1px solid var(--border); border-radius: .6rem; }
+.conversation-message-image { position: relative; overflow: hidden; border-radius: .6rem; }
+.conversation-message-images img { display: block; width: 100%; max-width: 28rem; max-height: 32rem; object-fit: contain; background: #08100c; border: 1px solid var(--border); border-radius: .6rem; transition: filter 160ms ease, transform 160ms ease; }
+.conversation-message-images img.is-blurred { filter: blur(24px) brightness(.55); transform: scale(1.12); }
+.conversation-image-reveal { position: absolute; bottom: .5rem; left: .5rem; min-height: 2rem !important; padding: .35rem .6rem !important; color: white !important; background: rgba(0, 0, 0, .76) !important; border-color: rgba(255, 255, 255, .45) !important; font-size: .75rem; font-weight: 800; }
+.conversation-image-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .conversation-empty-detail { padding: 2rem; color: var(--muted); text-align: center; }
 .conversation-composer { display: grid; gap: .65rem; padding: 1rem; border-top: 1px solid var(--border); }
 .conversation-section-heading, .conversation-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }