Prevent sticker picker from being opened in incompatible situations

The sticker picker could be opened when the user is about to send an attachment, or a reply, or text, neither of which can be combined with stickers
signalapp · Oct 28, 2024 · a2537cb · a2537cb
1 parent 28c3bf8
commit a2537cb
Showing 1 changed file with 31 additions and 30 deletions.
diff --git a/ts/components/CompositionArea.tsx b/ts/components/CompositionArea.tsx
@@ -655,35 +655,36 @@ export const CompositionArea = memo(function CompositionArea({
     </>
   ) : null;
 
+  const shouldShowStickers =
+    !quotedMessageProps && isComposerEmpty && withStickers;
   const stickerButtonPlacement = large ? 'top-start' : 'top-end';
-  const stickerButtonFragment =
-    !draftEditMessage && withStickers ? (
-      <div className="CompositionArea__button-cell">
-        <StickerButton
-          i18n={i18n}
-          knownPacks={knownPacks}
-          receivedPacks={receivedPacks}
-          installedPack={installedPack}
-          installedPacks={installedPacks}
-          blessedPacks={blessedPacks}
-          recentStickers={recentStickers}
-          clearInstalledStickerPack={clearInstalledStickerPack}
-          onClickAddPack={() =>
-            pushPanelForConversation({
-              type: PanelType.StickerManager,
-            })
-          }
-          onPickSticker={(packId, stickerId) =>
-            sendStickerMessage(conversationId, { packId, stickerId })
-          }
-          showIntroduction={showIntroduction}
-          clearShowIntroduction={clearShowIntroduction}
-          showPickerHint={showPickerHint}
-          clearShowPickerHint={clearShowPickerHint}
-          position={stickerButtonPlacement}
-        />
-      </div>
-    ) : null;
+  const stickerButtonFragment = shouldShowStickers ? (
+    <div className="CompositionArea__button-cell">
+      <StickerButton
+        i18n={i18n}
+        knownPacks={knownPacks}
+        receivedPacks={receivedPacks}
+        installedPack={installedPack}
+        installedPacks={installedPacks}
+        blessedPacks={blessedPacks}
+        recentStickers={recentStickers}
+        clearInstalledStickerPack={clearInstalledStickerPack}
+        onClickAddPack={() =>
+          pushPanelForConversation({
+            type: PanelType.StickerManager,
+          })
+        }
+        onPickSticker={(packId, stickerId) =>
+          sendStickerMessage(conversationId, { packId, stickerId })
+        }
+        showIntroduction={showIntroduction}
+        clearShowIntroduction={clearShowIntroduction}
+        showPickerHint={showPickerHint}
+        clearShowPickerHint={clearShowPickerHint}
+        position={stickerButtonPlacement}
+      />
+    </div>
+  ) : null;
 
   // Listen for cmd/ctrl-shift-x to toggle large composition mode
   useEffect(() => {
@@ -1053,7 +1054,7 @@ export const CompositionArea = memo(function CompositionArea({
         </div>
         {!large ? (
           <>
-            {stickerButtonFragment}
+            {!dirty ? stickerButtonFragment : null}
             {!dirty ? micButtonFragment : null}
             {editMessageFragment}
             {attButton}
@@ -1068,7 +1069,7 @@ export const CompositionArea = memo(function CompositionArea({
           )}
         >
           {leftHandSideButtonsFragment}
-          {stickerButtonFragment}
+          {!dirty ? stickerButtonFragment : null}
           {attButton}
           {!dirty ? micButtonFragment : null}
           {editMessageFragment}