i think i did something weird with git

frontend/lib/chat.mjs

@@ -50,7 +50,7 @@ const setupChatboxEvents = (socket) => {
     emojiAutocomplete.append(
       ...(await emojis)
         .filter(([name]) => name.toLowerCase().startsWith(search.toLowerCase()))
-        .map(([name, replaceWith], i) => {
+        .map(([name, replaceWith, ext], i) => {
           const button = Object.assign(document.createElement("button"), {
             className: "emoji-option" + (i === 0 ? " selected" : ""),
             onmousedown: (e) => e.preventDefault(),
@@ -73,7 +73,7 @@ const setupChatboxEvents = (socket) => {
                 })
               : Object.assign(new Image(), {
                   loading: "lazy",
-                  src: `/emojis/${name}.png`,
+                  src: `/emojis/${name}${ext}`,
                   className: "emoji",
                 }),
             Object.assign(document.createElement("span"), { textContent: name })

frontend/lib/emojis.mjs

@@ -14,7 +14,7 @@ export async function emojify(text) {
       } else {
         nodes.push(
           Object.assign(new Image(), {
-            src: `/emojis/${name}.png`,
+            src: `/emojis/${name}${emoji[2]}`,
             className: "emoji",
             alt: name,
           })
@@ -29,6 +29,6 @@ export async function emojify(text) {
 export const emojis = Promise.all([
   fetch("/emojis")
     .then((e) => e.json())
-    .then((e) => e.map((e) => [e.slice(0, -4), ":" + e.slice(0, -4) + ":"])),
+    .then((e) => e.map((e) => [e.slice(0, -4), ":" + e.slice(0, -4) + ":", e.slice(-4)])),
   fetch("/emojis/unicode.json").then((e) => e.json()),
 ]).then((e) => e.flat(1));

frontend/styles.css

@@ -277,12 +277,32 @@ button.small-button {
   align-items: center;
   padding: 0.25rem 0.5rem;
   scroll-margin: 0.25rem;
+  scroll-margin-bottom: 2rem;
 }
 .emoji-option:first-child {
   margin-top: 0.25rem;
 }
 .emoji-option:last-child {
-  margin-bottom: 0.25rem;
+  margin-bottom: 2rem;
+}
+
+#emoji-autocomplete::after {
+  position: fixed;
+  bottom: 3.25rem;
+  content: "Press Tab to autocomplete";
+  background-image: var(--autocomplete-bg);
+  padding: 0.125rem 0.25rem;
+  font-size: 0.75rem;
+  box-shadow: 0 0.75rem 0.25rem 1rem var(--fg-transparent), 0 0.75rem 0.25rem 1rem var(--bg);
+  height: 1rem;
+  display: flex;
+  right: 1rem;
+  width: 100%;
+  text-align: right;
+  align-items: center;
+  justify-content: right;
+  color: var(--fg-transparent);
+  text-shadow: 0 0 0 var(--fg-transparent);
 }
 
 .emoji-option .emoji {

scripts/get_emojis.sh

@@ -20,4 +20,4 @@ read token
 printf "\n" 1>&2
 stty echo
 
-curl "https://discord.com/api/v9/guilds/${guild}/emojis" -H "Authorization: $token"  |  jq --raw-output 'map("curl '"'"'https://cdn.discordapp.com/emojis/" + .id + ".png?size=48&quality=lossless'"'"' -o '"'${emojiFolder}/"'" + .name + ".png'"'"'") | join("\n")' | sh
+curl "https://discord.com/api/v9/guilds/${guild}/emojis" -H "Authorization: $token"  |  jq  --raw-output 'map((if .animated then ".gif" else ".png" end) as $ext | "curl '"'"'https://cdn.discordapp.com/emojis/" + .id + $ext + "?size=48&quality=lossless'"'"' -o '"'${emojiFolder}/"'" + .name + $ext + "'"'"'") | join("\n")' | sh