work on reactions

targoninc · Jun 3, 2024 · 9a1ed90 · 9a1ed90
1 parent c5219d4
commit 9a1ed90
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 6 deletions.
diff --git a/ui/api/Hooks.mjs b/ui/api/Hooks.mjs
@@ -127,4 +127,20 @@ export function removeChannel(channel) {
 export function setActiveChannel(channel) {
     store().set('activeChannel', signal(channel));
     Hooks.runActiveChannel(channel);
+}
+
+export function addReaction(messageId, reactionId, userId) {
+    if (!store().get('messages')) {
+        store().set('messages', signal({}));
+    }
+
+    const ex = store().get('messages').value;
+    for (const channel in ex) {
+        const message = ex[channel].find((m) => m.id === messageId);
+        if (message) {
+            message.reactions.push({ id: reactionId, userId });
+            store().setSignalValue('messages', ex);
+            return;
+        }
+    }
 }
diff --git a/ui/classes.css b/ui/classes.css
@@ -291,22 +291,26 @@
 }
 
 .reaction-trigger {
-    display: none;
     position: absolute;
     left: 4em;
     top: 100%;
     z-index: 999;
     max-width: max-content;
 }
 
-.message-content:hover .reaction-trigger {
+.reaction-button {
+    display: none;
+}
+
+.message-content:hover .reaction-button {
     display: flex;
 }
 
 .reaction-icons {
     max-width: 400px;
-    max-height: 400px;
+    max-height: 300px;
     overflow-y: auto;
+    width: max-content;
 }
 
 .reaction-icon {
@@ -318,6 +322,25 @@
     transform: scale(1.1);
 }
 
+.reaction-display {
+    font-size: 0.8em;
+    background: var(--bg-3);
+    border: var(--input-border-width) solid var(--bg-4);
+    padding: 0.3em 0.4em;
+    color: var(--text-3);
+    height: max-content;
+    cursor: pointer;
+}
+
+.reaction-display.active {
+    border: var(--input-border-width) solid var(--text-4);
+}
+
+.reaction-menu {
+    position: absolute;
+    top: calc(100% + var(--gap-h));
+}
+
 .close-button {
     align-self: end;
 }

diff --git a/ui/components/pages/chat.mjs b/ui/components/pages/chat.mjs
@@ -214,10 +214,17 @@ export class ChatComponent {
 
     static reactionTrigger(message, messages) {
         const menuShown = signal(false);
+        const reactions = message.reactions.map(reaction => {
+            return {
+                ...reaction,
+                content: Store.get("reactions").value.find(r => r.id === reaction.id).content,
+            };
+        });
 
         return create("div")
             .classes("reaction-trigger", "flex")
             .children(
+                ifjs(reactions.length > 0, ChatComponent.reactionDisplay(reactions)),
                 CommonTemplates.buttonWithIcon("add_reaction", "React", e => {
                     e.preventDefault();
                     menuShown.value = true;
@@ -229,9 +236,8 @@ export class ChatComponent {
                             menuShown.value = false;
                         }, {once: true});
                     }, 0);
-                }),
+                }, ["reaction-button"]),
                 ifjs(menuShown, ChatComponent.reactionMenu(message, messages)),
-                // TODO: Add reactions existing on message
             ).build();
     }
 
@@ -295,4 +301,31 @@ export class ChatComponent {
                     reaction => ChatComponent.reaction(reaction, message))
             ).build();
     }
+
+    static reactionDisplay(reactions) {
+        const reactionCounts = {};
+        reactions.forEach(reaction => {
+            if (!reactionCounts[reaction.id]) {
+                reactionCounts[reaction.id] = 0;
+            }
+            reactionCounts[reaction.id]++;
+        });
+        const uniqueReactions = reactions.filter((reaction, index, self) => {
+            return self.findIndex(r => r.id === reaction.id) === index;
+        });
+        const user = Store.get("user");
+
+        return create("div")
+            .classes("flex")
+            .children(
+                uniqueReactions.map(reaction => {
+                    const activeClass = reactions.some(r => r.id === reaction.id && r.userId === user.value.id) ? "active" : "_";
+
+                    return create("div")
+                        .classes("reaction-display", "pill", activeClass)
+                        .text(reaction.content + " " + reactionCounts[reaction.id])
+                        .build();
+                }),
+            ).build();
+    }
 }
diff --git a/ui/live/LiveInstance.mjs b/ui/live/LiveInstance.mjs
@@ -1,4 +1,4 @@
-import {addChannel, addMessage, removeMessage} from "../api/Hooks.mjs";
+import {addChannel, addMessage, addReaction, removeMessage} from "../api/Hooks.mjs";
 import {toast} from "../actions.mjs";
 import {Api} from "../api/Api.mjs";
 
@@ -72,6 +72,9 @@ export class LiveInstance {
                 case "message":
                     addMessage(data.message.channelId, data.message);
                     break;
+                case "addReaction":
+                    addReaction(data.messageId, data.reactionId, data.userId);
+                    break;
                 case "removeMessage":
                     removeMessage(data.channelId, data.messageId);
                     break;