fix comment on profiles lol

public/s/js/user_comments.js

@@ -0,0 +1,186 @@
+class UserCommentSystem {
+    constructor() {
+        this.container = document.getElementById('user-comments-container');
+        this.username = this.container ? this.container.dataset.user : null;
+        this.page = 1;
+        this.loading = false;
+        this.finished = false;
+        this.customEmojis = UserCommentSystem.emojiCache || {};
+
+        if (this.username) {
+            this.init();
+        }
+    }
+
+    async init() {
+        this.loadEmojis();
+        this.loadMore();
+        this.bindEvents();
+    }
+
+    async loadEmojis() {
+        if (UserCommentSystem.emojiCache) {
+            this.customEmojis = UserCommentSystem.emojiCache;
+            return;
+        }
+        try {
+            const res = await fetch('/api/v2/emojis');
+            const data = await res.json();
+            if (data.success) {
+                this.customEmojis = {};
+                data.emojis.forEach(e => {
+                    this.customEmojis[e.name] = e.url;
+                });
+                UserCommentSystem.emojiCache = this.customEmojis;
+            }
+        } catch (e) {
+            console.error("Failed to load emojis", e);
+        }
+    }
+
+    bindEvents() {
+        window.addEventListener('scroll', () => {
+            if (this.loading || this.finished) return;
+            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
+                this.loadMore();
+            }
+        });
+    }
+
+    async loadMore() {
+        if (this.loading || this.finished) return;
+        this.loading = true;
+
+        const loader = document.createElement('div');
+        loader.className = 'loader-placeholder';
+        loader.innerText = 'Loading...';
+        loader.style.textAlign = 'center';
+        loader.style.padding = '10px';
+        this.container.appendChild(loader);
+
+        try {
+            const res = await fetch('/user/' + encodeURIComponent(this.username) + '/comments?page=' + this.page + '&json=true');
+            const json = await res.json();
+
+            loader.remove();
+
+            if (json.success && json.comments.length > 0) {
+                json.comments.forEach(c => {
+                    console.log('Raw Comment Content (ID ' + c.id + '):', c.content);
+                    const html = this.renderComment(c);
+                    this.container.insertAdjacentHTML('beforeend', html);
+                });
+                this.page++;
+            } else {
+                this.finished = true;
+                if (this.page === 1 && (!json.comments || json.comments.length === 0)) {
+                    this.container.innerHTML = '<div style="text-align:center;padding:20px;color:#888;">No comments found.</div>';
+                }
+            }
+        } catch (e) {
+            console.error(e);
+            loader.remove();
+        } finally {
+            this.loading = false;
+        }
+    }
+
+    renderEmoji(match, name) {
+        if (this.customEmojis && this.customEmojis[name]) {
+            return `<img src="${this.customEmojis[name]}" style="height:24px;vertical-align:middle;" alt="${name}">`;
+        }
+        return match;
+    }
+
+    renderCommentContent(content) {
+        if (typeof marked === 'undefined') {
+            console.error('UserCommentSystem: marked.js is undefined!');
+            return this.escapeHtml(content).replace(/:([a-z0-9_]+):/g, (m, n) => this.renderEmoji(m, n));
+        }
+
+        try {
+            // 1. Pre-process server-escaped content
+
+            // Fix Greentext: Server sends &gt;lool -> convert to > lool for marked
+            let safe = content.replace(/^&gt;/gm, '> ');
+            // Also handle raw > just in case
+            safe = safe.replace(/^>(?=[^ ])/gm, '> ');
+
+            // Fix Images: Server sends <img src="..." ...> -> convert to markdown ![]()
+            // This avoids them being escaped by our HTML escaping later
+            safe = safe.replace(/<img\s+[^>]*src="([^"]+)"[^>]*>/g, (match, src) => {
+                let altMatch = match.match(/alt="([^"]*)"/);
+                let alt = altMatch ? altMatch[1] : '';
+                return `![${alt}](${src})`;
+            });
+
+            // 2. Escape HTML (standard safety)
+            safe = safe
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+
+            const renderer = new marked.Renderer();
+            renderer.blockquote = function (quote) {
+                let text = (typeof quote === 'string') ? quote : (quote.text || '');
+                let cleanQuote = text.replace(/<p>|<\/p>|\n/g, '');
+                return `<span class="greentext">&gt; ${cleanQuote}</span><br>`;
+            };
+
+            // 3. Parse Markdown
+            let md = marked.parse(safe, {
+                breaks: true,
+                renderer: renderer
+            });
+
+            return md.replace(/:([a-z0-9_]+):/g, (m, n) => this.renderEmoji(m, n));
+        } catch (e) {
+            console.error('UserCommentSystem Markdown Render Error:', e);
+            return this.escapeHtml(content);
+        }
+    }
+
+    renderComment(c) {
+        const date = new Date(c.created_at).toLocaleString();
+        const content = this.renderCommentContent(c.content);
+
+        // Replicating the structure of comments.js but adapting for the list view
+        // We add a header indicating which item this comment belongs to
+
+        return `
+        <div class="user-comment-wrapper" style="margin-bottom: 20px; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 4px;">
+            <div style="margin-bottom: 10px; font-size: 0.9em; color: #aaa; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px;">
+                Comment on <a href="/${c.item_id}#c${c.id}" style="color: #fff; font-weight: bold;">Item #${c.item_id}</a>
+            </div>
+            
+            <div class="comment" id="c${c.id}" style="border:none; padding:0; background:transparent;">
+                <div class="comment-avatar">
+                   <a href="/${c.item_id}"><img src="/t/${c.item_id}.webp" alt="Item Thumbnail" style="width:50px; height:50px; object-fit:cover; border-radius:4px;"></a>
+                </div>
+                <div class="comment-body">
+                    <div class="comment-meta">
+                        <span class="comment-author">${this.username}</span>
+                        <span class="comment-time">${date}</span>
+                        <a href="/${c.item_id}#c${c.id}" class="comment-permalink">#${c.id}</a>
+                    </div>
+                    <div class="comment-content">${content}</div>
+                </div>
+            </div>
+        </div>
+        `;
+    }
+
+    escapeHtml(unsafe) {
+        return unsafe
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+    new UserCommentSystem();
+});