From 96d0c7312d34696c53b1541d45660e122997a594 Mon Sep 17 00:00:00 2001
From: vyneer <vyn33r@gmail.com>
Date: Fri, 12 Jun 2026 10:17:45 +0300
Subject: [PATCH] Show emotes in the autocomplete helper

---
 assets/chat/css/chat/_autocomplete.scss | 47 +++++++++++++++----------
 assets/chat/js/autocomplete.js          |  8 ++++-
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/assets/chat/css/chat/_autocomplete.scss b/assets/chat/css/chat/_autocomplete.scss
index bdc48e2b8..327bc7650 100644
--- a/assets/chat/css/chat/_autocomplete.scss
+++ b/assets/chat/css/chat/_autocomplete.scss
@@ -24,36 +24,45 @@
   }
 
   ul {
+    display: inline-flex;
+    align-items: center;
     position: absolute;
     white-space: nowrap;
     list-style: none;
     padding: 0;
     margin: 0;
   }
+}
 
-  li {
-    padding: 0 a.$gutter-sm;
-    cursor: pointer;
-    text-decoration: none;
-    display: inline-block;
-    color: a.$color-chat-text3;
-    background: rgba(a.$color-surface-dark1, 0.75);
+.autocomplete-entry {
+  padding: 0 a.$gutter-sm;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  gap: a.$gutter-sm;
+  color: a.$color-chat-text3;
+  background: rgba(a.$color-surface-dark1, 0.75);
 
-    &:first-child {
-      border-radius: a.$bradius 0 0 0;
-    }
+  &__emote {
+    display: inline-flex;
+    align-items: center;
+    zoom: 0.75;
+  }
 
-    &:last-child {
-      border-radius: 0 a.$bradius 0 0;
-    }
+  &:first-child {
+    border-radius: a.$bradius 0 0 0;
+  }
 
-    &:hover {
-      color: color.adjust(a.$color-chat-text3, $lightness: 20%);
-    }
+  &:last-child {
+    border-radius: 0 a.$bradius 0 0;
+  }
 
-    &.active {
-      color: a.$text-color;
-    }
+  &:hover {
+    color: color.adjust(a.$color-chat-text3, $lightness: 20%);
+  }
+
+  &.active {
+    color: a.$text-color;
   }
 }
 
diff --git a/assets/chat/js/autocomplete.js b/assets/chat/js/autocomplete.js
index e42854a86..e42b866f7 100644
--- a/assets/chat/js/autocomplete.js
+++ b/assets/chat/js/autocomplete.js
@@ -352,7 +352,13 @@ class ChatAutoComplete {
   buildHelpers() {
     if (this.results.length > 0) {
       this.container[0].innerHTML = this.results
-        .map((res, k) => `<li data-index="${k}">${res.data}</li>`)
+        .map(
+          (res, k) =>
+            `<li data-index="${k}" class="autocomplete-entry">
+              ${res.isemote ? `<div class="autocomplete-entry__emote"><div class="emote ${res.data}">${res.data}</div></div>` : ''}
+              <span class="autocomplete-entry__name">${res.data}</span>
+            </li>`,
+        )
         .join('');
     }
   }