Some reaction fixes

src/components/chat/bubbles.ts

@@ -1244,13 +1244,17 @@ export default class ChatBubbles {
 
     const reactionElement = findUpTag(target, 'REACTION-ELEMENT') as ReactionElement;
     if(reactionElement) {
+      cancelEvent(e);
+      if(reactionElement.classList.contains('is-inactive')) {
+        return;
+      }
+
       const reactionsElement = reactionElement.parentElement as ReactionsElement;
       const reactionCount = reactionsElement.getReactionCount(reactionElement);
 
       const message = reactionsElement.getMessage();
       this.appReactionsManager.sendReaction(message, reactionCount.reaction);
 
-      cancelEvent(e);
       return;
     }
 

src/components/chat/reaction.ts

@@ -70,10 +70,18 @@ export default class ReactionElement extends HTMLElement {
     if(!doNotRenderSticker && !hadStickerContainer) {
       const availableReaction = appReactionsManager.getReaction(reactionCount.reaction);
       callbackify(availableReaction, (availableReaction) => {
+        if(!availableReaction.center_icon) {
+          this.stickerContainer.classList.add('is-static');
+        }
+
+        if(availableReaction.pFlags.inactive) {
+          this.classList.add('is-inactive');
+        }
+
         const size = this.type === 'inline' ? REACTION_INLINE_SIZE : REACTION_BLOCK_SIZE;
         wrapSticker({
           div: this.stickerContainer,
-          doc: availableReaction.center_icon,
+          doc: availableReaction.center_icon ?? availableReaction.static_icon,
           width: size,
           height: size,
           static: true

src/components/sidebarRight/tabs/chatReactions.ts

@@ -4,6 +4,7 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
+import debounce from "../../../helpers/schedulers/debounce";
 import appChatsManager from "../../../lib/appManagers/appChatsManager";
 import appProfileManager from "../../../lib/appManagers/appProfileManager";
 import appReactionsManager from "../../../lib/appManagers/appReactionsManager";
@@ -21,7 +22,7 @@ export default class AppChatReactionsTab extends SliderSuperTabEventable {
 
     const availableReactions = await appReactionsManager.getActiveAvailableReactions();
     const chatFull = await appProfileManager.getChatFull(this.chatId);
-    const originalReactions = chatFull.available_reactions ?? [];
+    let originalReactions = chatFull.available_reactions ?? [];
     const enabledReactions = new Set(originalReactions);
 
     const toggleSection = new SettingSection({
@@ -53,7 +54,15 @@ export default class AppChatReactionsTab extends SliderSuperTabEventable {
           if(!toggleCheckboxField.checked) {
             toggleCheckboxField.setValueSilently(true);
           }
-        } else enabledReactions.delete(availableReaction.reaction);
+        } else {
+          enabledReactions.delete(availableReaction.reaction);
+
+          if(!enabledReactions.size && toggleCheckboxField.checked) {
+            toggleCheckboxField.setValueSilently(false);
+          }
+        }
+
+        saveReactionsDebounced();
       });
 
       const row = new Row({
@@ -76,12 +85,14 @@ export default class AppChatReactionsTab extends SliderSuperTabEventable {
     this.listenerSetter.add(toggleRow.checkboxField.input)('change', () => {
       if(!toggleCheckboxField.checked) {
         checkboxFields.forEach(checkboxField => checkboxField.setValueSilently(false));
+        saveReactionsDebounced();
       } else if(checkboxFields.every(checkboxField => !checkboxField.checked)) {
         checkboxFields.forEach(checkboxField => checkboxField.setValueSilently(true));
+        saveReactionsDebounced();
       }
     });
 
-    this.eventListener.addEventListener('destroy', () => {
+    const saveReactions = () => {
       const newReactions = Array.from(enabledReactions);
       if([...newReactions].sort().join() === [...originalReactions].sort().join()) {
         return;
@@ -93,7 +104,12 @@ export default class AppChatReactionsTab extends SliderSuperTabEventable {
       }
       
       appChatsManager.setChatAvailableReactions(this.chatId, newReactions);
-    }, {once: true});
+      originalReactions = newReactions;
+    };
+
+    const saveReactionsDebounced = debounce(saveReactions, 3000, false, true);
+
+    this.eventListener.addEventListener('destroy', saveReactions, {once: true});
 
     this.scrollable.append(toggleSection.container, reactionsSection.container);
   }

src/scss/partials/_reaction.scss

@@ -44,6 +44,20 @@
         opacity: 0;
       }
     }
+
+    &:not(.is-static) {
+      .media-sticker {
+        --size: calc(var(--reaction-size) + var(--reaction-offset) * -2);
+        width: var(--size) !important;
+        height: var(--size) !important;
+        max-width: var(--size);
+        max-height: var(--size);
+        top: auto;
+        right: auto;
+        bottom: auto;
+        left: auto;
+      }
+    }
   }
 
   &-inline {
@@ -148,16 +162,4 @@
     line-height: 1.125rem;
     position: relative;
   }
-
-  .media-sticker {
-    --size: calc(var(--reaction-size) + var(--reaction-offset) * -2);
-    width: var(--size) !important;
-    height: var(--size) !important;
-    max-width: var(--size);
-    max-height: var(--size);
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-  }
 }

src/scss/partials/popups/_reactedList.scss

@@ -37,6 +37,8 @@
     // --background-color: var(--secondary-color);
     --background-color: var(--light-filled-primary-color);
     --counter-color: var(--primary-color);
+    flex: 1 0 auto;
+    justify-content: space-evenly;
 
     &.is-chosen {
       &:not(.backwards) {