fix deletion of reactions by using username as reaction id

src/View/Components/chatMessage.tsx

@@ -4,6 +4,7 @@ import { ChatMessageInfoModal } from "../Modals/chatMessageInfoModal";
 import { ChatMessageStatus } from "../../Model/Chat/chatModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { translations } from "../translations";
+import { MessageReactionButtonRow } from "./messageReactionButtonRow";
 
 export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
     const statusIcon = React.createProxyState(
@@ -43,6 +44,8 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
                         ></span>
                         {chatMessageViewModel.dateSent}
                     </span>
+
+                    {MessageReactionButtonRow(chatMessageViewModel)}
                 </div>
 
                 <div class="button-container">

src/View/Components/messageReactionButton.tsx

@@ -7,10 +7,6 @@ export function MessageReactionButton(
     chatMessageViewModel: ChatMessageViewModel,
     content: ReactionSymbols,
 ) {
-    let audioLabel: string;
-    let count: React.State<number>;
-    let isActive: React.State<boolean>;
-
     function sendReaction() {
         chatMessageViewModel.sendReaction(content, isActive.value);
     }
@@ -24,6 +20,10 @@ export function MessageReactionButton(
         return mapState.value.has(getUsername());
     }
 
+    let audioLabel: string;
+    let count: React.State<number>;
+    let isActive: React.State<boolean>;
+
     switch (content) {
         case ReactionSymbols.ThumbsUp: {
             audioLabel = translations.chatPage.message.thumbsUpReaction;

src/View/Components/messageReactionButtonRow.tsx

@@ -0,0 +1,34 @@
+import * as React from "bloatless-react";
+import { ReactionSymbols } from "../../Model/Chat/chatModel";
+import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
+import { translations } from "../translations";
+import { MessageReactionButton } from "./messageReactionButton";
+
+export function MessageReactionButtonRow(
+    chatMessageViewModel: ChatMessageViewModel,
+) {
+    return (
+        <div class="flex-row gap">
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.ThumbsUp,
+            )}
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.Check,
+            )}
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.Attention,
+            )}
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.DoubleAttention,
+            )}
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.Question,
+            )}
+        </div>
+    );
+}

src/View/Modals/chatMessageInfoModal.tsx

@@ -2,8 +2,7 @@ import * as React from "bloatless-react";
 
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { translations } from "../translations";
-import { ReactionSymbols } from "../../Model/Chat/chatModel";
-import { MessageReactionButton } from "../Components/messageReactionButton";
+import { MessageReactionButtonRow } from "../Components/messageReactionButtonRow";
 
 export function ChatMessageInfoModal(
     chatMessageViewModel: ChatMessageViewModel,
@@ -92,28 +91,7 @@ export function ChatMessageInfoModal(
 
                     <hr></hr>
 
-                    <div class="flex-row gap">
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.ThumbsUp,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.Check,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.Attention,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.DoubleAttention,
-                        )}
-                        {MessageReactionButton(
-                            chatMessageViewModel,
-                            ReactionSymbols.Question,
-                        )}
-                    </div>
+                    {MessageReactionButtonRow(chatMessageViewModel)}
                 </main>
                 <button on:click={chatMessageViewModel.hideInfoModal}>
                     {translations.general.closeButton}