add 'stop' reaction, improve reaction button layout

dist/index.css

@@ -747,7 +747,12 @@ body[showing-chat] #chat-page-wrapper {
   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/ChatPages/taskPage.css */

dist/index.js

@@ -1513,6 +1513,7 @@
   var ReactionSymbols = /* @__PURE__ */ ((ReactionSymbols2) => {
     ReactionSymbols2["ThumbsUp"] = "\u{1F44D}";
     ReactionSymbols2["Check"] = "\u2705";
+    ReactionSymbols2["Stop"] = "\u{1F6D1}";
     ReactionSymbols2["Attention"] = "\u2757\uFE0F";
     ReactionSymbols2["DoubleAttention"] = "\u203C\uFE0F";
     ReactionSymbols2["Question"] = "\u2753";
@@ -2030,6 +2031,7 @@
       );
       this.reactionsThumbsUp = new MapState();
       this.reactionsCheck = new MapState();
+      this.reactionsStop = new MapState();
       this.reactionsAttention = new MapState();
       this.reactionsDoubleAttention = new MapState();
       this.reactionsQuestion = new MapState();
@@ -2041,6 +2043,10 @@
         [this.reactionsCheck],
         () => this.reactionsCheck.value.size
       );
+      this.reactionsStopCount = createProxyState(
+        [this.reactionsStop],
+        () => this.reactionsStop.value.size
+      );
       this.reactionsAttentionCount = createProxyState(
         [this.reactionsAttention],
         () => this.reactionsAttention.value.size
@@ -2086,6 +2092,8 @@
             return setReaction(this.reactionsThumbsUp);
           case "\u2705" /* Check */:
             return setReaction(this.reactionsCheck);
+          case "\u{1F6D1}" /* Stop */:
+            return setReaction(this.reactionsStop);
           case "\u2757\uFE0F" /* Attention */:
             return setReaction(this.reactionsAttention);
           case "\u203C\uFE0F" /* DoubleAttention */:
@@ -2803,6 +2811,7 @@
         //
         thumbsUpReaction: "Reaction: thumbs up",
         checkReaction: "Reaction: check",
+        stopReaction: "Reaction: stop sign",
         attentionReaction: "Reaction: exclamation mark",
         doubleAttentionReaction: "Reaction: double exclamation mark",
         questionReaction: "Reaction: question mark"
@@ -2990,6 +2999,7 @@
           //
           thumbsUpReaction: "Reaktion: Daumen hoch",
           checkReaction: "Reaktion: Haken",
+          stopReaction: "Reaktion: Stopp",
           attentionReaction: "Reaktion: Ausrufezeichen",
           doubleAttentionReaction: "Reaktion: doppeltes Ausrufezeichen",
           questionReaction: "Reaktion: Fragezeichen"
@@ -3167,6 +3177,7 @@
           //
           thumbsUpReaction: "Reacci\xF3n: pulgar hacia arriba",
           checkReaction: "Reacci\xF3n: marca de verificaci\xF3n",
+          stopReaction: "Reacci\xF3n: signo de parada",
           attentionReaction: "Reaccion: signo de atenci\xF3n",
           doubleAttentionReaction: "Reaccion: signo de atenci\xF3n doble",
           questionReaction: "Reaccion: signo de interrogaci\xF3n"
@@ -3987,6 +3998,12 @@
         reactionState = chatMessageViewModel.reactionsCheck;
         break;
       }
+      case "\u{1F6D1}" /* Stop */: {
+        audioLabel = translations.chatPage.message.stopReaction;
+        count = chatMessageViewModel.reactionsStopCount;
+        reactionState = chatMessageViewModel.reactionsStop;
+        break;
+      }
       case "\u2757\uFE0F" /* Attention */: {
         audioLabel = translations.chatPage.message.attentionReaction;
         count = chatMessageViewModel.reactionsAttentionCount;
@@ -4032,6 +4049,9 @@
     ), MessageReactionButton(
       chatMessageViewModel,
       "\u2705" /* Check */
+    ), MessageReactionButton(
+      chatMessageViewModel,
+      "\u{1F6D1}" /* Stop */
     ), MessageReactionButton(
       chatMessageViewModel,
       "\u2757\uFE0F" /* Attention */

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,7 +169,7 @@
     text-align: right;
 }
 
-.message-bubble > .message-reaction-row {
+.message-bubble>.message-reaction-row {
     max-width: var(--max-input-width);
     width: 100%;
 
@@ -176,7 +177,7 @@
     background: var(--surface);
 }
 
-.message-bubble > .message-reaction-row button {
+.message-bubble>.message-reaction-row button {
     min-height: unset;
     height: 100%;
     width: 100%;
@@ -185,10 +186,16 @@
     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);