Update player.html

player.html

@@ -49,6 +49,9 @@
         .mention-footer { margin-top: 12px; }
         .view-original { color: #f97316; text-decoration: none; font-size: 14px; font-weight: 500; }
         .view-original:hover { text-decoration: underline; }
+        .quote-post { background: #f8f9fa; border-left: 3px solid #ddd; padding: 12px 15px; margin: 12px 0; border-radius: 0 8px 8px 0; }
+        .quote-author { font-weight: 600; font-size: 13px; color: #666; margin-bottom: 6px; }
+        .quote-text { font-size: 14px; line-height: 1.5; color: #555; }
         .related-section { background: white; border-radius: 12px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
         .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
         .related-link { display: block; padding: 12px 15px; background: #f8f9fa; border-radius: 8px; text-decoration: none; color: #333; font-weight: 500; }
@@ -170,6 +173,16 @@
                 if (!mentions.length) { document.getElementById('mentionsList').innerHTML = '<div class="empty-state"><h3>No mentions found</h3></div>'; return; }
                 document.getElementById('mentionsList').innerHTML = mentions.map(m => {
                     const avatarUrl = m.author_avatar || 'https://cdn.bsky.app/img/avatar/plain/did:plc:default/default@jpeg';
+                    let quoteHtml = '';
+                    if (m.quote_post && m.quote_post.text) {
+                        const qAuthor = m.quote_post.author_name || m.quote_post.author_handle || 'Unknown';
+                        quoteHtml = `
+                            <div class="quote-post">
+                                <div class="quote-author">↩ ${escapeHtml(qAuthor)}</div>
+                                <div class="quote-text">${processText(m.quote_post.text)}</div>
+                            </div>
+                        `;
+                    }
                     return `
                     <div class="mention-card">
                         <div class="mention-header">
@@ -183,6 +196,7 @@
                             <span class="mention-time">${timeAgo(m.created_at)}</span>
                         </div>
                         <div class="mention-text">${processText(m.text)}</div>
+                        ${quoteHtml}
                         <div class="mention-footer"><a href="${m.url}" target="_blank" class="view-original">View on Bluesky →</a></div>
                     </div>
                 `}).join('');