feat: support concurrent Reddit accounts

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

@@ -4,6 +4,7 @@ import { RedditUsernameLink, redditUsernameLabel } from '../../components/reddit
 import { OriginPostCard } from '../../components/origin-post.js';
 import { useConversationDetailQuery, useSendReplyMutation, useSuggestMediaAskMutation, useSuggestReplyMutation } from './conversation-queries.js';
 import { SendConfirmationDialog } from './send-confirmation-dialog.js';
+import { AccountOwnerBadge } from '../../components/account-owner-badge.js';
 
 interface ConversationDetailProps {
   conversationId: string;
@@ -15,7 +16,7 @@ function formatMessageTime(timestamp: number): string {
 }
 
 function mediaPath(localPath: string): string {
-  return `/media/${localPath.split('/').map(encodeURIComponent).join('/')}`;
+  return `/media/${localPath.split(/[\\/]/).map(encodeURIComponent).join('/')}`;
 }
 
 function MessageHistory({ conversation }: { conversation: ConversationDetailResponse }) {
@@ -28,7 +29,9 @@ function MessageHistory({ conversation }: { conversation: ConversationDetailResp
       {conversation.messages.map((message) => (
         <li className={message.isSelf ? 'is-self' : 'is-recipient'} key={`${message.timestamp}-${message.sender}-${message.text}`}>
           <div>
-            <strong>{message.isSelf ? 'You' : <RedditUsernameLink username={conversation.username} />}</strong>
+            <strong>{message.isSelf
+              ? `You${conversation.owner ? ` (u/${conversation.owner.redditUsername})` : ''}`
+              : <RedditUsernameLink username={conversation.username} />}</strong>
             <time dateTime={new Date(message.timestamp).toISOString()}>{formatMessageTime(message.timestamp)}</time>
           </div>
           <p>{message.text}</p>
@@ -50,14 +53,14 @@ function MessageHistory({ conversation }: { conversation: ConversationDetailResp
   );
 }
 
-function ConversationComposer({ conversation }: { conversation: ConversationDetailResponse }) {
+function ConversationComposer({ conversation, conversationId }: { conversation: ConversationDetailResponse; conversationId: string }) {
   const [draft, setDraft] = useState('');
   const [isConfirming, setIsConfirming] = useState(false);
   const [wasSent, setWasSent] = useState(false);
   const sendButtonRef = useRef<HTMLButtonElement>(null);
-  const suggestionMutation = useSuggestReplyMutation(conversation.roomId ?? conversation.username);
-  const mediaAskMutation = useSuggestMediaAskMutation(conversation.roomId ?? conversation.username);
-  const sendMutation = useSendReplyMutation(conversation.roomId ?? conversation.username);
+  const suggestionMutation = useSuggestReplyMutation(conversationId);
+  const mediaAskMutation = useSuggestMediaAskMutation(conversationId);
+  const sendMutation = useSendReplyMutation(conversationId);
   const canSend = draft.trim().length > 0 && !sendMutation.isPending;
 
   const closeConfirmation = useCallback(() => {
@@ -162,6 +165,7 @@ export function ConversationDetail({ conversationId, onClose }: ConversationDeta
         <div>
           <span className="conversation-eyebrow">Conversation</span>
           <h2><RedditUsernameLink username={conversation.username} /></h2>
+          <AccountOwnerBadge owner={conversation.owner} />
           {conversation.unread ? <span className="conversation-badge">Unread</span> : null}
         </div>
         <button aria-label="Close conversation" onClick={onClose} type="button">Close</button>
@@ -182,7 +186,7 @@ export function ConversationDetail({ conversationId, onClose }: ConversationDeta
         </div>
       ) : null}
       <MessageHistory conversation={conversation} />
-      <ConversationComposer conversation={conversation} />
+      <ConversationComposer conversation={conversation} conversationId={conversationId} />
     </article>
   );
 }