improve reaction interface on message bubbles

src/View/ChatPages/messagePage.css

@@ -75,6 +75,7 @@
 
 .message-bubble {
     display: flex;
+    flex-direction: column;
     width: 100%;
     max-width: var(--max-content-width);
 }
@@ -166,3 +167,28 @@
 .message-bubble[sentbyuser] .tile.main span {
     text-align: right;
 }
+
+.message-bubble > .message-reaction-row {
+  max-width: var(--max-input-width);
+  width: 100%;
+
+  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[zero] {
+    display: none;
+}
+
+.message-reaction-row {
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+}

src/View/Components/chatMessage.tsx

@@ -44,8 +44,6 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
                         ></span>
                         {chatMessageViewModel.dateSent}
                     </span>
-
-                    {MessageReactionButtonRow(chatMessageViewModel)}
                 </div>
 
                 <div class="button-container">
@@ -59,8 +57,9 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
                         <span class="icon">info</span>
                     </button>
                 </div>
-            </div>
 
+            </div>
+            {MessageReactionButtonRow(chatMessageViewModel)}
             {ChatMessageInfoModal(chatMessageViewModel)}
         </div>
     );

src/View/Components/messageReactionButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "bloatless-react";
-import { ReactionSymbols } from "../../Model/Chat/chatModel";
+import { ChatMessageReaction, ReactionSymbols } from "../../Model/Chat/chatModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { translations } from "../translations";
 
@@ -7,6 +7,12 @@ export function MessageReactionButton(
     chatMessageViewModel: ChatMessageViewModel,
     content: ReactionSymbols,
 ) {
+    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);
+
     function sendReaction() {
         chatMessageViewModel.sendReaction(content, isActive.value);
     }
@@ -16,74 +22,55 @@ export function MessageReactionButton(
             .settingsViewModel.username.value;
     }
 
-    function checkIsHighlighted(mapState: React.MapState<any>): boolean {
-        return mapState.value.has(getUsername());
+    function checkIsHighlighted(): boolean {
+        return reactionState.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),
-            );
+            reactionState = chatMessageViewModel.reactionsThumbsUp;
             break;
         }
         case ReactionSymbols.Check: {
             audioLabel = translations.chatPage.message.checkReaction;
             count = chatMessageViewModel.reactionsCheckCount;
-            isActive = React.createProxyState(
-                [chatMessageViewModel.reactionsCheck],
-                () => checkIsHighlighted(chatMessageViewModel.reactionsCheck),
-            );
+            reactionState = chatMessageViewModel.reactionsCheck;
             break;
         }
         case ReactionSymbols.Attention: {
             audioLabel = translations.chatPage.message.attentionReaction;
             count = chatMessageViewModel.reactionsAttentionCount;
-            isActive = React.createProxyState(
-                [chatMessageViewModel.reactionsAttention],
-                () =>
-                    checkIsHighlighted(chatMessageViewModel.reactionsAttention),
-            );
+            reactionState = chatMessageViewModel.reactionsAttention;
             break;
         }
         case ReactionSymbols.DoubleAttention: {
             audioLabel = translations.chatPage.message.doubleAttentionReaction;
             count = chatMessageViewModel.reactionsDoubleAttentionCount;
-            isActive = React.createProxyState(
-                [chatMessageViewModel.reactionsDoubleAttention],
-                () =>
-                    checkIsHighlighted(
-                        chatMessageViewModel.reactionsDoubleAttention,
-                    ),
-            );
+            reactionState = chatMessageViewModel.reactionsDoubleAttention;
             break;
         }
         case ReactionSymbols.Question: {
             audioLabel = translations.chatPage.message.questionReaction;
             count = chatMessageViewModel.reactionsQuestionCount;
-            isActive = React.createProxyState(
-                [chatMessageViewModel.reactionsQuestion],
-                () =>
-                    checkIsHighlighted(chatMessageViewModel.reactionsQuestion),
-            );
+            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}
         >
             {content}
             <span subscribe:innerText={count}></span>

src/View/Components/messageReactionButtonRow.tsx

@@ -8,7 +8,7 @@ export function MessageReactionButtonRow(
     chatMessageViewModel: ChatMessageViewModel,
 ) {
     return (
-        <div class="flex-row gap">
+        <div class="grid gap width-100 message-reaction-row">
             {MessageReactionButton(
                 chatMessageViewModel,
                 ReactionSymbols.ThumbsUp,