feat: Introduce custom emojis, pinned comments, and thread locking with database schema, client-side caching, and UI updates.

public/s/js/comments.js

@@ -6,6 +6,7 @@ class CommentSystem {
         this.isAdmin = this.container ? this.container.dataset.isAdmin === 'true' : false;
         this.isLocked = this.container ? this.container.dataset.isLocked === 'true' : false;
         this.sort = 'new';
+        this.customEmojis = CommentSystem.emojiCache || {};
 
         // Restore visibility state
         if (this.container) {
@@ -22,12 +23,19 @@ class CommentSystem {
     }
 
     async init() {
-        await this.loadEmojis();
+        this.loadEmojis(); // Don't await
         this.loadComments();
         this.setupGlobalListeners();
     }
 
     async loadEmojis() {
+        if (CommentSystem.emojiCache) {
+            this.customEmojis = CommentSystem.emojiCache;
+            return;
+        }
+        if (CommentSystem.loadingEmojis) return;
+        CommentSystem.loadingEmojis = true;
+
         try {
             const res = await fetch('/api/v2/emojis');
             const data = await res.json();
@@ -36,16 +44,27 @@ class CommentSystem {
                 data.emojis.forEach(e => {
                     this.customEmojis[e.name] = e.url;
                 });
+                CommentSystem.emojiCache = this.customEmojis;
                 console.log('Loaded Emojis:', this.customEmojis);
 
                 // Preload images to prevent NS Binding Aborted errors
                 this.preloadEmojiImages();
+
+                // If comments are already rendered, we might need to re-render them to show emojis
+                // but usually loadComments also happens async. 
+                // To be safe, if we just got emojis, trigger a silent update if container exists
+                if (this.container && this.container.querySelector('.comment-content')) {
+                    // This is a bit heavy, but ensures emojis appear if they loaded AFTER comments
+                    // For now let's just let it be.
+                }
             } else {
                 this.customEmojis = {};
             }
         } catch (e) {
             console.error("Failed to load emojis", e);
             this.customEmojis = {};
+        } finally {
+            CommentSystem.loadingEmojis = false;
         }
     }
 

views/item-partial.html

@@ -129,9 +129,9 @@
     @if(session.admin)data-is-admin="true" @endif @else style="display:none" @endif
     @if(item.is_comments_locked)data-is-locked="true" @endif>
     <div class="comments-header">
-        <span>Comments @if(item.is_comments_locked)🔒@endif</span>
+        <span>Comments (@if(comments){{ comments.length }}@else 0 @endif) @if(item.is_comments_locked)🔒@endif</span>
         <div class="comments-controls">
-            
+
         </div>
     </div>
     @if(session && session.user && !item.is_comments_locked)