FIX: emoji picker followups (#30670)

This pull request is doing the following changes:

prevents clicking on a section to scroll the document body
do not show favorites section if empty
do not close the user-status modal on emoji selection
giving its own context for user-status picker, that way if you frequently use same emojis for the picker they will always be in favorites

app/assets/javascripts/discourse/app/components/emoji-picker/content.gjs

@@ -336,7 +336,7 @@ export default class EmojiPicker extends Component {
         const targetEmoji = document.querySelector(
           `.emoji-picker__section[data-section="${section}"]`
         );
-        targetEmoji.scrollIntoView({ block: "start" });
+        targetEmoji.scrollIntoView({ block: "nearest" });
 
         // iOS hack to avoid blank div when requesting section during momentum
         if (this.scrollableNode && this.capabilities.isIOS) {
@@ -473,27 +473,29 @@ export default class EmojiPicker extends Component {
       <div class="emoji-picker__content">
         <div class="emoji-picker__sections-nav" {{this.setupSectionsNavScroll}}>
           {{#each-in this.groups as |section emojis|}}
-            <DButton
+            {{#if emojis.length}}
-              class={{concatClass
+              <DButton
-                "btn-flat"
+                class={{concatClass
-                "emoji-picker__section-btn"
+                  "btn-flat"
-                (if (eq this.lastVisibleSection section) "active")
+                  "emoji-picker__section-btn"
-              }}
+                  (if (eq this.lastVisibleSection section) "active")
-              tabindex="-1"
+                }}
-              @action={{fn this.didRequestSection section}}
+                tabindex="-1"
-              data-section={{section}}
+                @action={{fn this.didRequestSection section}}
-            >
+                data-section={{section}}
-              {{#if (eq section "favorites")}}
+              >
-                {{replaceEmoji ":star:"}}
+                {{#if (eq section "favorites")}}
-              {{else}}
+                  {{replaceEmoji ":star:"}}
-                <img
+                {{else}}
-                  width="18"
+                  <img
-                  height="18"
+                    width="18"
-                  class="emoji"
+                    height="18"
-                  src={{get emojis "0.url"}}
+                    class="emoji"
-                />
+                    src={{get emojis "0.url"}}
-              {{/if}}
+                  />
-            </DButton>
+                {{/if}}
+              </DButton>
+            {{/if}}
           {{/each-in}}
         </div>
 

app/assets/javascripts/discourse/app/components/emoji-picker/index.gjs

@@ -21,6 +21,10 @@ export default class EmojiPicker extends Component {
     return this.args.context ?? "topic";
   }
 
+  get modalForMobile() {
+    return this.args.modalForMobile ?? true;
+  }
+
   <template>
     <DMenu
       @triggerClass={{concatClass @btnClass}}
@@ -28,7 +32,7 @@ export default class EmojiPicker extends Component {
       @onRegisterApi={{this.onRegisterMenu}}
       @identifier="emoji-picker"
       @groupIdentifier="emoji-picker"
-      @modalForMobile={{true}}
+      @modalForMobile={{this.modalForMobile}}
       @maxWidth={{405}}
       @onShow={{@onShow}}
       @onClose={{@onClose}}

app/assets/javascripts/discourse/app/components/user-status-picker.gjs

@@ -49,6 +49,8 @@ export default class UserStatusPicker extends Component {
           @icon={{@status.emoji}}
           @didSelectEmoji={{this.emojiSelected}}
           @btnClass="btn-emoji"
+          @modalForMobile={{false}}
+          @context="user-status"
         />
 
         <input

app/assets/javascripts/discourse/tests/integration/components/emoji-picker-test.js

@@ -26,7 +26,7 @@ module("Integration | Component | emoji-picker-content", function (hooks) {
 
     assert
       .dom(`.emoji-picker__section-btn.active[data-section="favorites"]`)
-      .exists("it renders first section as active");
+      .exists("it renders favorites section");
     assert
       .dom(`.emoji-picker__section-btn[data-section="smileys_&_emotion"]`)
       .exists();

app/assets/stylesheets/common/components/emoji-picker.scss

@@ -13,7 +13,7 @@
   flex-direction: column;
   height: 300px;
   width: 500px;
-  max-width: 100vw;
+  max-width: 95vw;
 
   .spinner-container {
     height: 100%;