Better reactions | Tooltip for folders

fsh-org · Jan 10, 2025 · 6f34e81 · 6f34e81
1 parent 61a87bd
commit 6f34e81
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -19,6 +19,7 @@
     <script src="https://unpkg.com/@popperjs/core@2.11.8"></script>
     <script src="https://unpkg.com/tippy.js@6.3.7"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.0/lottie.min.js"></script>
+    <script src="https://unpkg.com/twemoji@14.0.2/dist/twemoji.min.js" crossorigin="anonymous"></script>
   </head>
   <body>
     <dialog id="login">

diff --git a/media/script.js b/media/script.js
@@ -1,4 +1,10 @@
 // Useful funcs
+const twemojiConfig = {
+  size: "svg",
+  ext: ".svg",
+  base: 'https://raw.githubusercontent.com/twitter/twemoji/refs/heads/master/assets/'
+};
+
 function proxyFetch(url, o) {
   let opts = {
     method: "GET",
@@ -260,6 +266,7 @@ video -
     case 'link':
     case 'rich':
     case 'video':
+      // TODO: Add very strange thing where if the embed has url it will allow other embeds with only imgase to join up to 4
       c=[embed.title, embed.description, embed?.author?.name, embed?.provider?.name].filter(e=>!!e).length;
       return `<div class="message-rich-embed" style="--embed-color:${colorToRGB(embed.color??0)}">
   ${embed.thumbnail&&embed.type!=='video'?`<img src="${embed.thumbnail.proxy_url}" class="message-attach thumbnail">`:''}
@@ -297,43 +304,7 @@ function renderMessage(content, author, m) {
       }
       return `<img src="https://media.discordapp.net/stickers/${sticker.id}.${['webp','png','png','webp','gif'][sticker.format_type]}?size=160&quality=lossless" width="160" height="160" class="message-attach">`;
     }).join(''):''}
-    ${m.reactions?.length?`<div class="reactions">${m.reactions.map(reaction=>{
-      /*[
-  {
-    "emoji": {
-      "id": null,
-      "name": "❌"
-    },
-    "count": 1,
-    "count_details": {
-      "burst": 0,
-      "normal": 1
-    },
-    "burst_colors": [],
-    "me_burst": false,
-    "burst_me": false,
-    "me": true,
-    "burst_count": 0
-  },
-  {
-    "emoji": {
-      "id": "1317019686067769405",
-      "name": "EeveePeek"
-    },
-    "count": 1,
-    "count_details": {
-      "burst": 0,
-      "normal": 1
-    },
-    "burst_colors": [],
-    "me_burst": false,
-    "burst_me": false,
-    "me": true,
-    "burst_count": 0
-  }
-]*/
-      return `<button>${reaction.emoji.name}${reaction.count}</button>`;
-    }).join('')}</div>`:''}
+    ${m.reactions?.length?`<div class="reactions">${m.reactions.map(reaction=>`<button${reaction.me?' class="me"':''}>${reaction.emoji.id?`<img src="https://cdn.discordapp.com/emojis/${reaction.emoji.id}.${reaction.emoji.animated?'gif':'webp'}?size=96">`:twemoji.parse(reaction.emoji.name, twemojiConfig)}${reaction.count}</button>`).join('')}</div>`:''}
   </span>
 </div>`;
 }
@@ -573,6 +544,14 @@ function showServers(list) {
         switchChannel(sid);
       }
     });
+  Array.from(document.querySelectorAll('#server .server-folder'))
+    .forEach(b=>{
+      tippy(b.children[0], {
+        content: b.getAttribute('aria-label'),
+        placement: 'right',
+        maxWidth: 200
+      })
+    });
 }
 function switchServers(list) {
   let ordered = [];

diff --git a/media/style.css b/media/style.css
@@ -227,6 +227,35 @@ lottie-sticker.message-attach {
   object-fit: contain;
   margin-bottom: -4px;
 }
+.reactions {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+.reactions button {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  color: var(--text-1);
+  padding: 4px;
+  border: 2px var(--bg-3) solid;
+}
+.reactions button.me {
+  border-color: var(--blue-1);
+  background-color: var(--blue-1);
+}
+.reactions button img {
+  width: 16px;
+  height: 16px;
+}
+.reactions button:hover {
+  color: var(--text-0);
+  background-color: var(--bg-3);
+}
+.reactions button.me:hover {
+  filter: brightness(1.1);
+  background-color: var(--blue-1);
+}
 .message-rich-embed {
   display: flex;
   align-items: flex-start;