add 'stop' reaction, improve reaction button layout

src/Model/Chat/chatModel.ts

@@ -436,6 +436,7 @@ export default class ChatModel {
 export enum ReactionSymbols {
     ThumbsUp = "👍",
     Check = "✅",
+    Stop = "🛑",
     Attention = "❗️",
     DoubleAttention = "‼️",
     Question = "❓",

src/View/ChatPages/messagePage.css

@@ -40,6 +40,7 @@
 }
 
 @media (min-width: 700px) {
+
     #message-page #composer .content-width-constraint,
     #message-page #composer .input-width-constraint {
         display: flex;
@@ -168,27 +169,33 @@
     text-align: right;
 }
 
-.message-bubble > .message-reaction-row {
-  max-width: var(--max-input-width);
-  width: 100%;
+.message-bubble>.message-reaction-row {
+    max-width: var(--max-input-width);
+    width: 100%;
 
-  padding: var(--gap-between-tiles);
-  background: var(--surface);
+    padding: var(--gap-between-tiles);
+    background: var(--surface);
 }
 
-.message-bubble > .message-reaction-row button {
-  min-height: unset;
-  height: 100%;
-  width: 100%;
-  padding: var(--control-padding-compact);
-  gap: 0px;
-  flex: 1 !important;
+.message-bubble>.message-reaction-row button {
+    min-height: unset;
+    height: 100%;
+    width: 100%;
+    padding: var(--control-padding-compact);
+    gap: 0px;
+    flex: 1 !important;
 }
 
-.message-bubble > .message-reaction-row button[zero] {
+.message-bubble>.message-reaction-row button[zero] {
     display: none;
 }
 
 .message-reaction-row {
-    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    grid-template-columns: repeat(3, minmax(80px, 1fr));
+}
+
+@media (min-width: 100px) {
+    .message-reaction-row {
+        grid-template-columns: repeat(3, minmax(80px, 1fr));
+    }
 }

src/View/Components/messageReactionButton.tsx

@@ -39,6 +39,12 @@ export function MessageReactionButton(
             reactionState = chatMessageViewModel.reactionsCheck;
             break;
         }
+        case ReactionSymbols.Stop: {
+            audioLabel = translations.chatPage.message.stopReaction;
+            count = chatMessageViewModel.reactionsStopCount;
+            reactionState = chatMessageViewModel.reactionsStop;
+            break;
+        }
         case ReactionSymbols.Attention: {
             audioLabel = translations.chatPage.message.attentionReaction;
             count = chatMessageViewModel.reactionsAttentionCount;

src/View/Components/messageReactionButtonRow.tsx

@@ -17,6 +17,10 @@ export function MessageReactionButtonRow(
                 chatMessageViewModel,
                 ReactionSymbols.Check,
             )}
+            {MessageReactionButton(
+                chatMessageViewModel,
+                ReactionSymbols.Stop,
+            )}
             {MessageReactionButton(
                 chatMessageViewModel,
                 ReactionSymbols.Attention,

src/View/translations.ts

@@ -191,6 +191,7 @@ const englishTranslations = {
 
             thumbsUpReaction: "Reaction: thumbs up",
             checkReaction: "Reaction: check",
+            stopReaction: "Reaction: stop sign",
             attentionReaction: "Reaction: exclamation mark",
             doubleAttentionReaction: "Reaction: double exclamation mark",
             questionReaction: "Reaction: question mark",
@@ -462,6 +463,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
 
                 thumbsUpReaction: "Reaktion: Daumen hoch",
                 checkReaction: "Reaktion: Haken",
+                stopReaction: "Reaktion: Stopp",
                 attentionReaction: "Reaktion: Ausrufezeichen",
                 doubleAttentionReaction: "Reaktion: doppeltes Ausrufezeichen",
                 questionReaction: "Reaktion: Fragezeichen",
@@ -715,6 +717,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
 
                 thumbsUpReaction: "Reacción: pulgar hacia arriba",
                 checkReaction: "Reacción: marca de verificación",
+                stopReaction: "Reacción: signo de parada",
                 attentionReaction: "Reaccion: signo de atención",
                 doubleAttentionReaction: "Reaccion: signo de atención doble",
                 questionReaction: "Reaccion: signo de interrogación",

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -27,6 +27,7 @@ export default class ChatMessageViewModel {
 
     reactionsThumbsUp = new React.MapState<ChatMessageReaction>();
     reactionsCheck = new React.MapState<ChatMessageReaction>();
+    reactionsStop = new React.MapState<ChatMessageReaction>();
     reactionsAttention = new React.MapState<ChatMessageReaction>();
     reactionsDoubleAttention = new React.MapState<ChatMessageReaction>();
     reactionsQuestion = new React.MapState<ChatMessageReaction>();
@@ -39,6 +40,10 @@ export default class ChatMessageViewModel {
         [this.reactionsCheck],
         () => this.reactionsCheck.value.size,
     );
+    reactionsStopCount = React.createProxyState(
+        [this.reactionsStop],
+        () => this.reactionsStop.value.size,
+    );
     reactionsAttentionCount = React.createProxyState(
         [this.reactionsAttention],
         () => this.reactionsAttention.value.size,
@@ -90,6 +95,8 @@ export default class ChatMessageViewModel {
                 return setReaction(this.reactionsThumbsUp);
             case ReactionSymbols.Check:
                 return setReaction(this.reactionsCheck);
+            case ReactionSymbols.Stop:
+                return setReaction(this.reactionsStop);
             case ReactionSymbols.Attention:
                 return setReaction(this.reactionsAttention);
             case ReactionSymbols.DoubleAttention:

src/ViewModel/Global/coreViewModel.ts

@@ -1,7 +1,7 @@
 import * as React from "bloatless-react";
 
 export default class CoreViewModel {
-    readonly BUILD = "Build 26.04.08.A"
+    readonly BUILD = "Build 26.04.08.B"
 
     // DRAG & DROP
     draggedObject: React.State<any> = new React.State<any>(undefined);