feat: link media to conversations

apps/dashboard/src/features/conversations/conversation-identity.ts

@@ -1,8 +1,12 @@
 import type { ActiveChat } from '../../../../../packages/api-contracts/src/index.js';
 
+export function createOwnedConversationId(accountId: string | undefined, conversationId: string): string {
+  return accountId
+    ? `${encodeURIComponent(accountId)}~${encodeURIComponent(conversationId)}`
+    : conversationId;
+}
+
 export function ownedConversationId(conversation: ActiveChat): string {
   const conversationId = conversation.roomId ?? conversation.username;
-  return conversation.owner
-    ? `${encodeURIComponent(conversation.owner.accountId)}~${encodeURIComponent(conversationId)}`
-    : conversationId;
+  return createOwnedConversationId(conversation.owner?.accountId, conversationId);
 }

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

@@ -1,5 +1,7 @@
 import type { MediaItem } from '../../../../../packages/api-contracts/src/index.js';
+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 { AccountOwnerBadge } from '../../components/account-owner-badge.js';
 
@@ -15,6 +17,11 @@ function formatMediaDate(timestamp: number): string {
 }
 
 export function MediaCard({ item, isRevealed, onToggleReveal, onOpenPreview }: MediaCardProps) {
+  const conversationId = item.chatRoomId ?? item.chatUsername;
+  const conversationPath = conversationId
+    ? `/conversations/${encodeURIComponent(createOwnedConversationId(item.owner?.accountId, conversationId))}`
+    : null;
+
   return (
     <article className="media-card">
       <div className="media-preview">
@@ -41,6 +48,11 @@ export function MediaCard({ item, isRevealed, onToggleReveal, onOpenPreview }: M
           <div><dt>Type</dt><dd>{mediaType(item) === 'gif' ? 'GIF' : 'Image'}</dd></div>
           <div><dt>Received</dt><dd>{formatMediaDate(item.timestamp)}</dd></div>
         </dl>
+        {conversationPath ? (
+          <Link className="button secondary media-conversation-link" to={conversationPath}>
+            Open conversation
+          </Link>
+        ) : null}
         <button
           className="button secondary media-reveal"
           onClick={onToggleReveal}

apps/dashboard/src/features/media/media.css

@@ -8,7 +8,7 @@
 .media-filters { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-bottom: 1rem; }
 .media-filters label { display: grid; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 750; }
 .media-filters select { width: 100%; min-height: 2.6rem; padding: .5rem .7rem; color: #e9f1ec; background: var(--surface-raised); border: 1px solid var(--border); border-radius: .6rem; }
-.media-filters select:focus-visible, .media-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.media-filters select:focus-visible, .media-reveal:focus-visible, .media-conversation-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .media-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
 .media-card { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; }
 .media-preview { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: #050907; }
@@ -24,6 +24,7 @@
 .media-card-body dl div { display: flex; justify-content: space-between; gap: .75rem; }
 .media-card-body dt { color: var(--muted); }
 .media-card-body dd { margin: 0; text-align: right; }
+.media-conversation-link { display: flex; align-items: center; justify-content: center; width: 100%; text-decoration: none; }
 .media-reveal { width: 100%; }
 .media-preview-dialog-backdrop { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .88); }
 .media-preview-dialog-content { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }