From 277045c7a1318e4b2531598f48c30e0c93db9d25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 28 Feb 2023 20:52:15 +0100
Subject: [PATCH] Remove custom emojis from reaction picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/ui/emoji-selector/emoji-selector.tsx  | 3 ++-
 .../features/emoji/components/emoji-picker-dropdown.tsx      | 5 +++--
 .../emoji/containers/emoji-picker-dropdown-container.tsx     | 2 +-
 app/soapbox/locales/en.json                                  | 1 -
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 54a1080c2..f74803aee 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -69,7 +69,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
   const handleClickOutside = (event: MouseEvent) => {
-    if ([referenceElement, popperElement].some(el => el?.contains(event.target as Node))) {
+    if ([referenceElement, popperElement, document.querySelector('em-emoji-picker')].some(el => el?.contains(event.target as Node))) {
       return;
     }
 
@@ -141,6 +141,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
           visible={expanded}
           setVisible={setExpanded}
           update={update}
+          withCustom={false}
         />
       ) : (
         <HStack
diff --git a/app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx b/app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx
index 93100a39c..b554839b1 100644
--- a/app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx
@@ -46,6 +46,7 @@ export const messages = defineMessages({
 export interface IEmojiPickerDropdown {
   onPickEmoji?: (emoji: Emoji) => void
   condensed?: boolean
+  withCustom?: boolean
   visible: boolean
   setVisible: (value: boolean) => void
   update: (() => Promise<Partial<PopperState>>) | null
@@ -126,7 +127,7 @@ const RenderAfter = ({ children, update }: any) => {
 };
 
 const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
-  onPickEmoji, condensed, visible, setVisible, update,
+  onPickEmoji, visible, setVisible, update, withCustom = true,
 }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
@@ -235,7 +236,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
       <RenderAfter update={update}>
         {!loading && (
           <EmojiPicker
-            custom={[{ emojis: buildCustomEmojis(customEmojis) }]}
+            custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
             title={title}
             onEmojiSelect={handlePick}
             recent={frequentlyUsedEmojis}
diff --git a/app/soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx b/app/soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx
index c097e6056..2963894e0 100644
--- a/app/soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/app/soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx
@@ -17,7 +17,7 @@ export const messages = defineMessages({
 });
 
 const EmojiPickerDropdownContainer = (
-  props: Pick<IEmojiPickerDropdown, 'onPickEmoji' | 'condensed'>,
+  props: Pick<IEmojiPickerDropdown, 'onPickEmoji' | 'condensed' | 'withCustom'>,
 ) => {
   const intl = useIntl();
   const title = intl.formatMessage(messages.emoji);
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 227e77404..3d4dd4223 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -804,7 +804,6 @@
   "home.column_settings.show_replies": "Show replies",
   "icon_button.icons": "Icons",
   "icon_button.label": "Select icon",
-  "icon_button.not_found": "No icons!! (╯°□°）╯︵ ┻━┻",
   "import_data.actions.import": "Import",
   "import_data.actions.import_blocks": "Import blocks",
   "import_data.actions.import_follows": "Import follows",