fix: auto-open chat with conversation ID, show listing title and time in messages

js/components/chat-widget.js

@@ -12,7 +12,7 @@ import { reputationService } from '../services/reputation.js'
 
 class ChatWidget extends HTMLElement {
     static get observedAttributes() {
-        return ['listing-id', 'recipient-name', 'seller-public-key']
+        return ['listing-id', 'recipient-name', 'seller-public-key', 'conversation-id']
     }
 
     constructor() {
@@ -33,6 +33,7 @@ class ChatWidget extends HTMLElement {
         this.listingId = this.getAttribute('listing-id')
         this.recipientName = this.getAttribute('recipient-name') || 'Seller'
         this.sellerPublicKey = this.getAttribute('seller-public-key')
+        this.conversationId = this.getAttribute('conversation-id')
         this.render()
     }
 
@@ -45,6 +46,7 @@ class ChatWidget extends HTMLElement {
         if (this._initialized) return
         this._initialized = true
 
+        this.conversationId = this.getAttribute('conversation-id') || this.conversationId
         await cryptoService.ready
 
         if (!cryptoService.getPublicKey()) {
@@ -68,26 +70,39 @@ class ChatWidget extends HTMLElement {
 
     async initConversation() {
         try {
-            if (!this.sellerPublicKey) {
-                this.error = 'no-seller-key'
-                this.loading = false
-                this.render()
-                return
-            }
+            if (this.conversationId) {
+                this.conversation = await conversationsService.getConversation(this.conversationId)
+                if (!this.conversation) {
+                    this.error = 'init-failed'
+                    this.loading = false
+                    this.render()
+                    return
+                }
+                this.mySecretKey = await conversationsService.getMySecretKeyForConversation(this.conversation)
+                await this.loadMessages()
+                await this.loadDealState()
+            } else {
+                if (!this.sellerPublicKey) {
+                    this.error = 'no-seller-key'
+                    this.loading = false
+                    this.render()
+                    return
+                }
 
-            const pinStatus = keyPinningService.check(this.listingId, this.sellerPublicKey)
-            if (pinStatus === 'changed') {
-                this.keyWarning = true
-                this.loading = false
-                this.render()
-                this.setupEventListeners()
-                return
-            }
+                const pinStatus = keyPinningService.check(this.listingId, this.sellerPublicKey)
+                if (pinStatus === 'changed') {
+                    this.keyWarning = true
+                    this.loading = false
+                    this.render()
+                    this.setupEventListeners()
+                    return
+                }
 
-            this.conversation = await conversationsService.startOrGetConversation(this.listingId, this.sellerPublicKey)
-            this.mySecretKey = await conversationsService.getMySecretKeyForConversation(this.conversation)
-            await this.loadMessages()
-            await this.loadDealState()
+                this.conversation = await conversationsService.startOrGetConversation(this.listingId, this.sellerPublicKey)
+                this.mySecretKey = await conversationsService.getMySecretKeyForConversation(this.conversation)
+                await this.loadMessages()
+                await this.loadDealState()
+            }
         } catch (e) {
             console.error('Failed to init conversation:', e)
             this.error = 'init-failed'

js/components/pages/page-listing.js

@@ -75,6 +75,16 @@ class PageListing extends HTMLElement {
         this.render()
         this.setupEventListeners()
         this.updateMetaTags()
+
+        if (this.dataset.chat && auth.isLoggedIn()) {
+            const chatWidget = this.querySelector('chat-widget')
+            if (this.dataset.chat !== '1') {
+                chatWidget?.setAttribute('conversation-id', this.dataset.chat)
+            }
+            const dialog = this.querySelector('#contact-dialog')
+            dialog?.showModal()
+            chatWidget?.activate()
+        }
     }
 
     updateMetaTags() {

js/components/pages/page-messages.js

@@ -51,6 +51,17 @@ class PageMessages extends HTMLElement {
 
             const conversations = await conversationsService.getMyConversations()
             this.conversations = conversations || []
+
+            const missing = this.conversations.filter(c => typeof c.listing_id !== 'object')
+            if (missing.length > 0) {
+                await Promise.all(missing.map(async conv => {
+                    try {
+                        const listing = await directus.getListing(conv.listing_id)
+                        if (listing) conv.listing_id = listing
+                    } catch { /* listing may not be accessible */ }
+                }))
+            }
+
             this.loading = false
             this.updateContent()
         } catch (err) {
@@ -139,11 +150,13 @@ class PageMessages extends HTMLElement {
         const listingId = listing?.id || conv.listing_id
         const imageId = listing?.images?.[0]?.directus_files_id?.id
         const imageUrl = imageId ? directus.getThumbnailUrl(imageId, 80) : ''
-        const title = listing?.status === 'deleted' ? t('messages.listingRemoved') : (listing?.title || t('messages.unknownListing'))
+        const title = listing?.status === 'deleted'
+            ? t('messages.listingRemoved')
+            : (listing?.title || t('messages.listing'))
         const dateStr = this.formatDate(conv.date_updated || conv.date_created)
 
         return /* html */`
-            <a href="#/listing/${listingId}" class="conversation-item" data-conv-id="${conv.id}">
+            <a href="#/listing/${listingId}?chat=${conv.id}" class="conversation-item" data-conv-id="${conv.id}">
                 <div class="conversation-image">
                     ${imageUrl
                         ? `<img src="${imageUrl}" alt="" loading="lazy">`
@@ -165,7 +178,7 @@ class PageMessages extends HTMLElement {
         const diffMs = now - date
         const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
         
-        if (diffDays === 0) return t('messages.today')
+        if (diffDays === 0) return `${t('messages.today')}, ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`
         if (diffDays === 1) return t('messages.yesterday')
         if (diffDays < 7) return t('messages.daysAgo', { days: diffDays })