implement chat

js/components/pages/page-listing.js

@@ -1,5 +1,6 @@
 import { t, i18n } from '../../i18n.js';
 import { getListingById } from '../../data/mock-listings.js';
+import '../chat-widget.js';
 
 class PageListing extends HTMLElement {
     constructor() {
@@ -106,23 +107,39 @@ class PageListing extends HTMLElement {
                         <line x1="6" y1="6" x2="18" y2="18"></line>
                     </svg>
                 </button>
-                <h2>${t('listing.contactSeller')}</h2>
-                <p class="dialog-subtitle">${t('listing.paymentInfo')}</p>
                 
-                <div class="monero-section">
-                    <label>${t('listing.moneroAddress')}</label>
-                    <div class="monero-address">
-                        <code id="monero-addr">${this.listing.seller.moneroAddress || '888tNkZrPN6JsEgekjMnABU4TBzc2Dt29EPAvkRxbANsAnjyPbb3iQ1YBRk1UXcdRsiKc9dhwMVgN5S9cQUiyoogDavup3H'}</code>
-                        <button class="btn btn-outline btn-copy" id="copy-btn" title="${t('listing.copyAddress')}">
-                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                            </svg>
-                        </button>
-                    </div>
+                <div class="dialog-tabs">
+                    <button class="tab-btn active" data-tab="chat">${t('chat.title')}</button>
+                    <button class="tab-btn" data-tab="payment">${t('listing.moneroAddress')}</button>
                 </div>
                 
-                <p class="dialog-hint">${t('listing.contactHint')}</p>
+                <div class="tab-content" id="tab-chat">
+                    <chat-widget
+                        listing-id="${this.listing.id}"
+                        recipient-id="${this.listing.seller.name}"
+                        recipient-key="${this.listing.seller.publicKey || 'demo-key-' + this.listing.id}"
+                        recipient-name="${this.escapeHtml(this.listing.seller.name)}"
+                    ></chat-widget>
+                </div>
+                
+                <div class="tab-content hidden" id="tab-payment">
+                    <p class="dialog-subtitle">${t('listing.paymentInfo')}</p>
+                    
+                    <div class="monero-section">
+                        <label>${t('listing.moneroAddress')}</label>
+                        <div class="monero-address">
+                            <code id="monero-addr">${this.listing.seller.moneroAddress || '888tNkZrPN6JsEgekjMnABU4TBzc2Dt29EPAvkRxbANsAnjyPbb3iQ1YBRk1UXcdRsiKc9dhwMVgN5S9cQUiyoogDavup3H'}</code>
+                            <button class="btn btn-outline btn-copy" id="copy-btn" title="${t('listing.copyAddress')}">
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <p class="dialog-hint">${t('listing.contactHint')}</p>
+                </div>
             </dialog>
         `;
         
@@ -134,6 +151,7 @@ class PageListing extends HTMLElement {
         const dialog = this.querySelector('#contact-dialog');
         const closeBtn = this.querySelector('#dialog-close');
         const copyBtn = this.querySelector('#copy-btn');
+        const tabBtns = this.querySelectorAll('.tab-btn');
         
         contactBtn?.addEventListener('click', () => {
             dialog?.showModal();
@@ -157,6 +175,19 @@ class PageListing extends HTMLElement {
                 setTimeout(() => copyBtn.classList.remove('copied'), 2000);
             }
         });
+        
+        tabBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const tab = btn.dataset.tab;
+                
+                tabBtns.forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                
+                this.querySelectorAll('.tab-content').forEach(content => {
+                    content.classList.toggle('hidden', content.id !== `tab-${tab}`);
+                });
+            });
+        });
     }
 
     escapeHtml(text) {
@@ -292,6 +323,37 @@ style.textContent = /* css */`
         background: var(--color-overlay);
     }
     
+    page-listing .dialog-tabs {
+        display: flex;
+        gap: var(--space-sm);
+        margin-bottom: var(--space-lg);
+        border-bottom: 1px solid var(--color-border);
+        padding-bottom: var(--space-sm);
+    }
+    
+    page-listing .tab-btn {
+        padding: var(--space-sm) var(--space-md);
+        font-size: var(--font-size-sm);
+        font-weight: var(--font-weight-medium);
+        color: var(--color-text-muted);
+        border-radius: var(--radius-md);
+        transition: all var(--transition-fast);
+    }
+    
+    page-listing .tab-btn:hover {
+        color: var(--color-text);
+        background: var(--color-bg-secondary);
+    }
+    
+    page-listing .tab-btn.active {
+        color: var(--color-primary);
+        background: var(--color-primary-light);
+    }
+    
+    page-listing .tab-content.hidden {
+        display: none;
+    }
+    
     page-listing .dialog-close {
         position: absolute;
         top: var(--space-md);