show reactions per user, allow only one reaction per message per user

src/View/ChatPages/messagePage.css

@@ -181,7 +181,7 @@
     overflow: hidden;
 }
 
-.message-bubble > .message-reaction-row:has(button:not([zero])) {
+.message-bubble > .message-reaction-row:has(button:not([count="0"])) {
     display: grid !important;
 }
 
@@ -195,7 +195,7 @@
     animation: slide-up var(--animation-duration);
 }
 
-.message-bubble > .message-reaction-row button[zero] {
+.message-bubble > .message-reaction-row button[count="0"] {
     display: none;
 }
 

src/View/Components/messageReactionButton.tsx

@@ -13,50 +13,35 @@ export function MessageReactionButton(
 ) {
     let audioLabel: string;
     let count: React.State<number>;
-    let reactionState: React.MapState<ChatMessageReaction>;
-    let isActive = new React.State(false);
-    let isZero = new React.State(true);
+    let isActive = React.createProxyState([chatMessageViewModel.userReaction], (() => chatMessageViewModel.userReaction.value == content))
 
     function sendReaction() {
         chatMessageViewModel.sendReaction(content, isActive.value);
     }
 
-    function getUsername(): string {
-        return chatMessageViewModel.messagePageViewModel.chatViewModel
-            .settingsViewModel.username.value;
-    }
-
-    function checkIsHighlighted(): boolean {
-        return reactionState.value.has(getUsername());
-    }
-
     switch (content) {
         case ReactionSymbols.ThumbsUp: {
             audioLabel =
                 coreViewModel.translations.chatPage.message.thumbsUpReaction;
             count = chatMessageViewModel.reactionsThumbsUpCount;
-            reactionState = chatMessageViewModel.reactionsThumbsUp;
             break;
         }
         case ReactionSymbols.Check: {
             audioLabel =
                 coreViewModel.translations.chatPage.message.checkReaction;
             count = chatMessageViewModel.reactionsCheckCount;
-            reactionState = chatMessageViewModel.reactionsCheck;
             break;
         }
         case ReactionSymbols.Stop: {
             audioLabel =
                 coreViewModel.translations.chatPage.message.stopReaction;
             count = chatMessageViewModel.reactionsStopCount;
-            reactionState = chatMessageViewModel.reactionsStop;
             break;
         }
         case ReactionSymbols.Attention: {
             audioLabel =
                 coreViewModel.translations.chatPage.message.attentionReaction;
             count = chatMessageViewModel.reactionsAttentionCount;
-            reactionState = chatMessageViewModel.reactionsAttention;
             break;
         }
         case ReactionSymbols.DoubleAttention: {
@@ -64,30 +49,23 @@ export function MessageReactionButton(
                 coreViewModel.translations.chatPage.message
                     .doubleAttentionReaction;
             count = chatMessageViewModel.reactionsDoubleAttentionCount;
-            reactionState = chatMessageViewModel.reactionsDoubleAttention;
             break;
         }
         case ReactionSymbols.Question: {
             audioLabel =
                 coreViewModel.translations.chatPage.message.questionReaction;
             count = chatMessageViewModel.reactionsQuestionCount;
-            reactionState = chatMessageViewModel.reactionsQuestion;
             break;
         }
     }
 
-    reactionState.subscribe(() => {
-        isActive.value = checkIsHighlighted();
-        isZero.value = reactionState.value.size == 0;
-    });
-
     return (
         <button
             class="flex"
             on:click={sendReaction}
             aria-label={audioLabel}
             toggle:selected={isActive}
-            toggle:zero={isZero}
+            set:count={count}
         >
             {content}
             <span subscribe:innerText={count}></span>

src/View/Components/messageReactionEntry.tsx

@@ -0,0 +1,13 @@
+import * as React from "bloatless-react";
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
+import { ChatMessageReaction } from "../../Model/Chat/chatModel";
+
+export function MessageReactionEntry(reaction: ChatMessageReaction) {
+    return (
+        <div class="tile flex-row">
+            <span class="flex width-100">{reaction.sender}</span>
+            <span>{reaction.content}</span>
+        </div>
+    );
+}

src/View/Modals/chatMessageInfoModal.tsx

@@ -4,6 +4,7 @@ import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { MessageReactionButtonRow } from "../Components/messageReactionButtonRow";
 import { InfoTile } from "../Components/infoTile";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import { MessageReactionEntry } from "../Components/messageReactionEntry";
 
 export function ChatMessageInfoModal(
     coreViewModel: CoreViewModel,
@@ -76,10 +77,20 @@ export function ChatMessageInfoModal(
 
                     <hr></hr>
 
-                    {MessageReactionButtonRow(
-                        coreViewModel,
-                        chatMessageViewModel,
-                    )}
+                    <div class="flex-column gap">
+                        {MessageReactionButtonRow(
+                            coreViewModel,
+                            chatMessageViewModel,
+                        )}
+
+                        <div
+                            class="flex-column gap"
+                            children:append={[
+                                chatMessageViewModel.allReactions,
+                                MessageReactionEntry,
+                            ]}
+                        ></div>
+                    </div>
                 </main>
                 <button on:click={chatMessageViewModel.hideInfoModal}>
                     {coreViewModel.translations.general.closeButton}