From b1e40d04b9ccec66085619a0ecef376584292374 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Thu, 9 Jan 2025 14:27:48 +0100
Subject: [PATCH] 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/components/emoji-picker/content.gjs   | 46 ++++++++++---------
 .../app/components/emoji-picker/index.gjs     |  6 ++-
 .../app/components/user-status-picker.gjs     |  2 +
 .../components/emoji-picker-test.js           |  2 +-
 .../common/components/emoji-picker.scss       |  2 +-
 5 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker/content.gjs b/app/assets/javascripts/discourse/app/components/emoji-picker/content.gjs
index e1f2e9f9582..ae5a394c256 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker/content.gjs
+++ b/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
-              class={{concatClass
-                "btn-flat"
-                "emoji-picker__section-btn"
-                (if (eq this.lastVisibleSection section) "active")
-              }}
-              tabindex="-1"
-              @action={{fn this.didRequestSection section}}
-              data-section={{section}}
-            >
-              {{#if (eq section "favorites")}}
-                {{replaceEmoji ":star:"}}
-              {{else}}
-                <img
-                  width="18"
-                  height="18"
-                  class="emoji"
-                  src={{get emojis "0.url"}}
-                />
-              {{/if}}
-            </DButton>
+            {{#if emojis.length}}
+              <DButton
+                class={{concatClass
+                  "btn-flat"
+                  "emoji-picker__section-btn"
+                  (if (eq this.lastVisibleSection section) "active")
+                }}
+                tabindex="-1"
+                @action={{fn this.didRequestSection section}}
+                data-section={{section}}
+              >
+                {{#if (eq section "favorites")}}
+                  {{replaceEmoji ":star:"}}
+                {{else}}
+                  <img
+                    width="18"
+                    height="18"
+                    class="emoji"
+                    src={{get emojis "0.url"}}
+                  />
+                {{/if}}
+              </DButton>
+            {{/if}}
           {{/each-in}}
         </div>
 
diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker/index.gjs b/app/assets/javascripts/discourse/app/components/emoji-picker/index.gjs
index f3da70e563e..07429aef4dd 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker/index.gjs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/app/components/user-status-picker.gjs b/app/assets/javascripts/discourse/app/components/user-status-picker.gjs
index 30eb093ad66..3b7374ee0eb 100644
--- a/app/assets/javascripts/discourse/app/components/user-status-picker.gjs
+++ b/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
diff --git a/app/assets/javascripts/discourse/tests/integration/components/emoji-picker-test.js b/app/assets/javascripts/discourse/tests/integration/components/emoji-picker-test.js
index 7fd3078f311..5213f0bb6f0 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/emoji-picker-test.js
+++ b/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();
diff --git a/app/assets/stylesheets/common/components/emoji-picker.scss b/app/assets/stylesheets/common/components/emoji-picker.scss
index 30fdcae5897..ada761661c6 100644
--- a/app/assets/stylesheets/common/components/emoji-picker.scss
+++ b/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%;