improve reaction interface on message bubbles

dist/index.css

@@ -659,6 +659,7 @@ body[showing-chat] #chat-page-wrapper {
 }
 .message-bubble {
   display: flex;
+  flex-direction: column;
   width: 100%;
   max-width: var(--max-content-width);
 }
@@ -728,6 +729,26 @@ body[showing-chat] #chat-page-wrapper {
 .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(100px, 1fr));
+}
 
 /* src/View/ChatPages/taskPage.css */
 #chat-page > div > #main > #task-page > .pane-wrapper > .pane > .main-content {

dist/index.js

@@ -3943,74 +3943,64 @@
 
   // src/View/Components/messageReactionButton.tsx
   function MessageReactionButton(chatMessageViewModel, content) {
+    let audioLabel;
+    let count;
+    let reactionState;
+    let isActive = new State(false);
+    let isZero = new State(true);
     function sendReaction() {
       chatMessageViewModel.sendReaction(content, isActive.value);
     }
     function getUsername() {
       return chatMessageViewModel.messagePageViewModel.chatViewModel.settingsViewModel.username.value;
     }
-    function checkIsHighlighted(mapState) {
-      return mapState.value.has(getUsername());
+    function checkIsHighlighted() {
+      return reactionState.value.has(getUsername());
     }
-    let audioLabel;
-    let count;
-    let isActive;
     switch (content) {
       case "\u{1F44D}" /* ThumbsUp */: {
         audioLabel = translations.chatPage.message.thumbsUpReaction;
         count = chatMessageViewModel.reactionsThumbsUpCount;
-        isActive = createProxyState(
-          [chatMessageViewModel.reactionsThumbsUp],
-          () => checkIsHighlighted(chatMessageViewModel.reactionsThumbsUp)
-        );
+        reactionState = chatMessageViewModel.reactionsThumbsUp;
         break;
       }
       case "\u2705" /* Check */: {
         audioLabel = translations.chatPage.message.checkReaction;
         count = chatMessageViewModel.reactionsCheckCount;
-        isActive = createProxyState(
-          [chatMessageViewModel.reactionsCheck],
-          () => checkIsHighlighted(chatMessageViewModel.reactionsCheck)
-        );
+        reactionState = chatMessageViewModel.reactionsCheck;
         break;
       }
       case "\u2757\uFE0F" /* Attention */: {
         audioLabel = translations.chatPage.message.attentionReaction;
         count = chatMessageViewModel.reactionsAttentionCount;
-        isActive = createProxyState(
-          [chatMessageViewModel.reactionsAttention],
-          () => checkIsHighlighted(chatMessageViewModel.reactionsAttention)
-        );
+        reactionState = chatMessageViewModel.reactionsAttention;
         break;
       }
       case "\u203C\uFE0F" /* DoubleAttention */: {
         audioLabel = translations.chatPage.message.doubleAttentionReaction;
         count = chatMessageViewModel.reactionsDoubleAttentionCount;
-        isActive = createProxyState(
-          [chatMessageViewModel.reactionsDoubleAttention],
-          () => checkIsHighlighted(
-            chatMessageViewModel.reactionsDoubleAttention
-          )
-        );
+        reactionState = chatMessageViewModel.reactionsDoubleAttention;
         break;
       }
       case "\u2753" /* Question */: {
         audioLabel = translations.chatPage.message.questionReaction;
         count = chatMessageViewModel.reactionsQuestionCount;
-        isActive = createProxyState(
-          [chatMessageViewModel.reactionsQuestion],
-          () => checkIsHighlighted(chatMessageViewModel.reactionsQuestion)
-        );
+        reactionState = chatMessageViewModel.reactionsQuestion;
         break;
       }
     }
+    reactionState.subscribe(() => {
+      isActive.value = checkIsHighlighted();
+      isZero.value = reactionState.value.size == 0;
+    });
     return /* @__PURE__ */ createElement(
       "button",
       {
         class: "flex",
         "on:click": sendReaction,
         "aria-label": audioLabel,
-        "toggle:selected": isActive
+        "toggle:selected": isActive,
+        "toggle:zero": isZero
       },
       content,
       /* @__PURE__ */ createElement("span", { "subscribe:innerText": count })
@@ -4019,7 +4009,7 @@
 
   // src/View/Components/messageReactionButtonRow.tsx
   function MessageReactionButtonRow(chatMessageViewModel) {
-    return /* @__PURE__ */ createElement("div", { class: "flex-row gap" }, MessageReactionButton(
+    return /* @__PURE__ */ createElement("div", { class: "grid gap width-100 message-reaction-row" }, MessageReactionButton(
       chatMessageViewModel,
       "\u{1F44D}" /* ThumbsUp */
     ), MessageReactionButton(
@@ -4090,7 +4080,7 @@
           class: "icon",
           "subscribe:innerText": statusIcon
         }
-      ), chatMessageViewModel.dateSent), MessageReactionButtonRow(chatMessageViewModel)), /* @__PURE__ */ createElement("div", { class: "button-container" }, /* @__PURE__ */ createElement(
+      ), chatMessageViewModel.dateSent)), /* @__PURE__ */ createElement("div", { class: "button-container" }, /* @__PURE__ */ createElement(
         "button",
         {
           "on:click": chatMessageViewModel.showInfoModal,
@@ -4098,6 +4088,7 @@
         },
         /* @__PURE__ */ createElement("span", { class: "icon" }, "info")
       ))),
+      MessageReactionButtonRow(chatMessageViewModel),
       ChatMessageInfoModal(chatMessageViewModel)
     );
   }

dist/styles.css

@@ -288,6 +288,7 @@ SIZES
 
     /* padding */
     --control-padding: 1rem;
+    --control-padding-compact: .4rem .8rem;
     --control-marker-padding: 0.7rem;
     --content-padding: 1rem;
     --modal-padding: 1.25rem;