From c72922cfc73b9f184336cc5db97e085e46e7d8c4 Mon Sep 17 00:00:00 2001
From: Arkshine <github@arkshine.me>
Date: Wed, 26 Feb 2025 23:58:50 +0100
Subject: [PATCH] DEV: Add emoji-picker-filter-container plugin outlet (#30976)

With the emoji picker unified
(https://github.com/discourse/discourse/pull/28277), there is no longer
a footer, including the previous plugin outlet.

This PR moves the plugin outlet at the top.

Usage example: [Emoji Fluff
TC](https://meta.discourse.org/t/emoji-fluff/339163)

Before:

![image](https://github.com/user-attachments/assets/6274dfa6-386e-4387-9377-8ab13256528c)
After:

![image](https://github.com/user-attachments/assets/f4f02ec1-797e-4066-837d-b436c7ad3061)
---
 .../app/components/emoji-picker/content.gjs   | 49 ++++++++++++-------
 1 file changed, 31 insertions(+), 18 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 6ac7891f679..6f26a256511 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker/content.gjs
+++ b/app/assets/javascripts/discourse/app/components/emoji-picker/content.gjs
@@ -11,6 +11,7 @@ import { emojiSearch } from "pretty-text/emoji";
 import { eq, gt, includes, notEq } from "truth-helpers";
 import DButton from "discourse/components/d-button";
 import FilterInput from "discourse/components/filter-input";
+import PluginOutlet from "discourse/components/plugin-outlet";
 import concatClass from "discourse/helpers/concat-class";
 import noop from "discourse/helpers/noop";
 import replaceEmoji from "discourse/helpers/replace-emoji";
@@ -449,25 +450,37 @@ export default class EmojiPicker extends Component {
       ...attributes
     >
       <div class="emoji-picker__filter-container">
-        <FilterInput
-          {{didInsert (if this.site.desktopView this.focusFilter (noop))}}
-          {{didInsert this.registerFilterInput}}
-          @value={{this.term}}
-          @filterAction={{withEventValue this.didInputFilter}}
-          @icons={{hash right="magnifying-glass"}}
-          @containerClass="emoji-picker__filter"
-          placeholder={{i18n "chat.emoji_picker.search_placeholder"}}
-        />
-
-        <DiversityMenu />
-
-        {{#if this.site.mobileView}}
-          <DButton
-            @icon="xmark"
-            @action={{@close}}
-            class="btn-transparent emoji-picker__close-btn"
+        <PluginOutlet
+          @name="emoji-picker-filter-container"
+          @outletArgs={{hash
+            term=this.term
+            focusFilter=this.focusFilter
+            registerFilterInput=this.registerFilterInput
+            didInputFilter=this.didInputFilter
+            context=@context
+            close=@close
+          }}
+        >
+          <FilterInput
+            {{didInsert (if this.site.desktopView this.focusFilter (noop))}}
+            {{didInsert this.registerFilterInput}}
+            @value={{this.term}}
+            @filterAction={{withEventValue this.didInputFilter}}
+            @icons={{hash right="magnifying-glass"}}
+            @containerClass="emoji-picker__filter"
+            placeholder={{i18n "chat.emoji_picker.search_placeholder"}}
           />
-        {{/if}}
+
+          <DiversityMenu />
+
+          {{#if this.site.mobileView}}
+            <DButton
+              @icon="xmark"
+              @action={{@close}}
+              class="btn-transparent emoji-picker__close-btn"
+            />
+          {{/if}}
+        </PluginOutlet>
       </div>
 
       <div class="emoji-picker__content">