feat: persist settings and enrich conversation context

apps/dashboard/src/features/conversations/conversations-page.tsx

@@ -1,12 +1,13 @@
 import { useMemo, useState } from 'react';
 import type { ActiveChat } from '../../../../../packages/api-contracts/src/index.js';
+import { RedditUsernameLink, redditUsernameLabel } from '../../components/reddit-username-link.js';
 import { ConversationDetail } from './conversation-detail.js';
 import { useConversationsQuery } from './conversation-queries.js';
 import { StartConversationForm } from './start-conversation-form.js';
 import { ProcessedUserLookup } from './processed-user-lookup.js';
 import './conversations.css';
 
-export type ConversationFilter = 'all' | 'unread' | 'awaiting-reply';
+export type ConversationFilter = 'all' | 'unread' | 'awaiting-reply' | 'received-images';
 
 export interface ConversationFilters {
   search: string;
@@ -27,6 +28,7 @@ function conversationId(conversation: ActiveChat): string {
 function matchesFilter(conversation: ActiveChat, filter: ConversationFilter): boolean {
   if (filter === 'unread') return conversation.unread;
   if (filter === 'awaiting-reply') return conversation.isFromUs;
+  if (filter === 'received-images') return conversation.hasReceivedImages === true;
   return true;
 }
 
@@ -37,17 +39,17 @@ function ConversationListItem({ conversation, isSelected, onSelect }: {
 }) {
   const state = conversation.unread ? 'Unread' : conversation.isFromUs ? 'Awaiting reply' : 'Up to date';
   return (
-    <li>
+    <li className={isSelected ? 'conversation-list-item is-selected' : 'conversation-list-item'}>
       <button
-        aria-label={`u/${conversation.username}, ${state}`}
+        aria-label={`${redditUsernameLabel(conversation.username)}, ${state}${conversation.hasReceivedImages ? ', Image received' : ''}`}
         aria-pressed={isSelected}
-        className={isSelected ? 'conversation-list-item is-selected' : 'conversation-list-item'}
+        className="conversation-list-target"
         onClick={onSelect}
         type="button"
-      >
-        <span className="conversation-list-heading"><strong>u/{conversation.username}</strong><small>{state}</small></span>
-        <span>{conversation.lastMessageSnippet || 'No message preview'}</span>
-      </button>
+      />
+      <span className="conversation-list-heading"><strong><RedditUsernameLink username={conversation.username} /></strong><small>{state}</small></span>
+      {conversation.hasReceivedImages ? <span className="conversation-image-marker">Image received</span> : null}
+      <span>{conversation.lastMessageSnippet || 'No message preview'}</span>
     </li>
   );
 }
@@ -121,6 +123,7 @@ export function ConversationsPage({ selectedConversationId, onSelectedConversati
               <option value="all">All</option>
               <option value="unread">Unread</option>
               <option value="awaiting-reply">Awaiting reply</option>
+              <option value="received-images">Received images</option>
             </select>
           </div>
           {conversationsQuery.isPending ? (