add frontend interface to send reactions

src/View/Components/messageReactionButton.tsx

@@ -0,0 +1,92 @@
+import * as React from "bloatless-react";
+import { ReactionSymbols } from "../../Model/Chat/chatModel";
+import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
+import { translations } from "../translations";
+
+export function MessageReactionButton(
+    chatMessageViewModel: ChatMessageViewModel,
+    content: ReactionSymbols,
+) {
+    function sendReaction() {
+        chatMessageViewModel.sendReaction(content);
+    }
+
+    function getUsername(): string {
+        return chatMessageViewModel.messagePageViewModel.chatViewModel
+            .settingsViewModel.username.value;
+    }
+
+    function checkIsHighlighted(mapState: React.MapState<any>): boolean {
+        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;
+            count = chatMessageViewModel.reactionsThumbsUpCount;
+            isActive = React.createProxyState(
+                [chatMessageViewModel.reactionsThumbsUp],
+                () =>
+                    checkIsHighlighted(chatMessageViewModel.reactionsThumbsUp),
+            );
+            break;
+        }
+        case ReactionSymbols.Check: {
+            audioLabel = translations.chatPage.message.checkReaction;
+            count = chatMessageViewModel.reactionsCheckCount;
+            isActive = React.createProxyState(
+                [chatMessageViewModel.reactionsCheck],
+                () => checkIsHighlighted(chatMessageViewModel.reactionsCheck),
+            );
+            break;
+        }
+        case ReactionSymbols.Attention: {
+            audioLabel = translations.chatPage.message.attentionReaction;
+            count = chatMessageViewModel.reactionsAttentionCount;
+            isActive = React.createProxyState(
+                [chatMessageViewModel.reactionsAttention],
+                () =>
+                    checkIsHighlighted(chatMessageViewModel.reactionsAttention),
+            );
+            break;
+        }
+        case ReactionSymbols.DoubleAttention: {
+            audioLabel = translations.chatPage.message.doubleAttentionReaction;
+            count = chatMessageViewModel.reactionsDoubleAttentionCount;
+            isActive = React.createProxyState(
+                [chatMessageViewModel.reactionsDoubleAttention],
+                () =>
+                    checkIsHighlighted(
+                        chatMessageViewModel.reactionsDoubleAttention,
+                    ),
+            );
+            break;
+        }
+        case ReactionSymbols.Question: {
+            audioLabel = translations.chatPage.message.questionReaction;
+            count = chatMessageViewModel.reactionsQuestionCount;
+            isActive = React.createProxyState(
+                [chatMessageViewModel.reactionsQuestion],
+                () =>
+                    checkIsHighlighted(chatMessageViewModel.reactionsQuestion),
+            );
+            break;
+        }
+    }
+
+    return (
+        <button
+            class="flex"
+            on:click={sendReaction}
+            aria-label={audioLabel}
+            toggle:selected={isActive}
+        >
+            {content}
+            <span subscribe:innerText={count}></span>
+        </button>
+    );
+}

src/View/Modals/chatMessageInfoModal.tsx

@@ -2,6 +2,8 @@ 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";
 
 export function ChatMessageInfoModal(
     chatMessageViewModel: ChatMessageViewModel,
@@ -87,6 +89,31 @@ export function ChatMessageInfoModal(
                             <span class="icon">key</span>
                         </button>
                     </div>
+
+                    <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>
                 </main>
                 <button on:click={chatMessageViewModel.hideInfoModal}>
                     {translations.general.closeButton}

src/View/translations.ts

@@ -186,6 +186,14 @@ const englishTranslations = {
             resendMessageButton: "Resend message",
             decryptMessageButton: "Decrypt message",
             deleteMessageButton: "Delete message",
+
+            //
+
+            thumbsUpReaction: "Reaction: thumbs up",
+            checkReaction: "Reaction: check",
+            attentionReaction: "Reaction: exclamation mark",
+            doubleAttentionReaction: "Reaction: double exclamation mark",
+            questionReaction: "Reaction: question mark",
         },
 
         task: {
@@ -449,6 +457,14 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
                 resendMessageButton: "Nachricht erneut senden",
                 decryptMessageButton: "Nachricht entschlüsseln",
                 deleteMessageButton: "Nachricht löschen",
+
+                //
+
+                thumbsUpReaction: "Reaktion: Daumen hoch",
+                checkReaction: "Reaktion: Haken",
+                attentionReaction: "Reaktion: Ausrufezeichen",
+                doubleAttentionReaction: "Reaktion: doppeltes Ausrufezeichen",
+                questionReaction: "Reaktion: Fragezeichen",
             },
 
             task: {
@@ -694,6 +710,14 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
                 resendMessageButton: "Reenviar mensaje",
                 decryptMessageButton: "Desencriptar mensaje",
                 deleteMessageButton: "Eliminar mensaje",
+
+                //
+
+                thumbsUpReaction: "Reacción: pulgar hacia arriba",
+                checkReaction: "Reacción: marca de verificación",
+                attentionReaction: "Reaccion: signo de atención",
+                doubleAttentionReaction: "Reaccion: signo de atención doble",
+                questionReaction: "Reaccion: signo de interrogación",
             },
 
             task: {