Settings: Allow to turn off dynamic order for sticker packs (#3151)

src/api/gramjs/methods/messages.ts

@@ -233,7 +233,7 @@ export function sendMessage(
     groupedId,
     noWebPage,
     sendAs,
-    shouldUpdateStickerSetsOrder,
+    shouldUpdateStickerSetOrder,
   }: {
     chat: ApiChat;
     text?: string;
@@ -250,7 +250,7 @@ export function sendMessage(
     groupedId?: string;
     noWebPage?: boolean;
     sendAs?: ApiUser | ApiChat;
-    shouldUpdateStickerSetsOrder?: boolean;
+    shouldUpdateStickerSetOrder?: boolean;
   },
   onProgress?: ApiOnProgress,
 ) {
@@ -355,7 +355,7 @@ export function sendMessage(
         ...(media && { media }),
         ...(noWebPage && { noWebpage: noWebPage }),
         ...(sendAs && { sendAs: buildInputPeer(sendAs.id, sendAs.accessHash) }),
-        ...(shouldUpdateStickerSetsOrder && { updateStickersetsOrder: shouldUpdateStickerSetsOrder }),
+        ...(shouldUpdateStickerSetOrder && { updateStickersetsOrder: shouldUpdateStickerSetOrder }),
       }), false, true, true);
       if (update) handleLocalMessageUpdate(localMessage, update);
     } catch (error: any) {

src/components/common/StickerSetModal.tsx

@@ -50,6 +50,7 @@ type StateProps = {
   shouldSchedule?: boolean;
   isSavedMessages?: boolean;
   isCurrentUserPremium?: boolean;
+  shouldUpdateStickerSetOrder?: boolean;
 };
 
 const INTERSECTION_THROTTLE = 200;
@@ -64,6 +65,7 @@ const StickerSetModal: FC<OwnProps & StateProps> = ({
   shouldSchedule,
   isSavedMessages,
   isCurrentUserPremium,
+  shouldUpdateStickerSetOrder,
   onClose,
 }) => {
   const {
@@ -120,10 +122,14 @@ const StickerSetModal: FC<OwnProps & StateProps> = ({
         onClose();
       });
     } else {
-      sendMessage({ sticker, isSilent, shouldUpdateStickerSetsOrder: isAdded });
+      sendMessage({
+        sticker,
+        isSilent,
+        shouldUpdateStickerSetOrder: shouldUpdateStickerSetOrder && isAdded,
+      });
       onClose();
     }
-  }, [onClose, requestCalendar, sendMessage, shouldSchedule, isAdded]);
+  }, [onClose, requestCalendar, sendMessage, shouldSchedule, isAdded, shouldUpdateStickerSetOrder]);
 
   const handleButtonClick = useCallback(() => {
     if (renderingStickerSet) {
@@ -263,6 +269,7 @@ export default memo(withGlobal<OwnProps>(
       shouldSchedule: selectShouldSchedule(global),
       stickerSet,
       isCurrentUserPremium: selectIsCurrentUserPremium(global),
+      shouldUpdateStickerSetOrder: global.settings.byKey.shouldUpdateStickerSetOrder,
     };
   },
 )(StickerSetModal));

src/components/left/settings/SettingsStickers.tsx

@@ -37,7 +37,7 @@ type OwnProps = {
 
 type StateProps =
   Pick<ISettings, (
-    'shouldSuggestStickers'
+    'shouldSuggestStickers' | 'shouldUpdateStickerSetOrder'
   )> & {
     addedSetIds?: string[];
     customEmojiSetIds?: string[];
@@ -54,6 +54,7 @@ const SettingsStickers: FC<OwnProps & StateProps> = ({
   stickerSetsById,
   defaultReaction,
   shouldSuggestStickers,
+  shouldUpdateStickerSetOrder,
   availableReactions,
   canPlayAnimatedEmojis,
   onReset,
@@ -75,6 +76,10 @@ const SettingsStickers: FC<OwnProps & StateProps> = ({
     });
   }, [openStickerSet]);
 
+  const handleSuggestStickerSetOrderChange = useCallback((newValue: boolean) => {
+    setSettingOption({ shouldUpdateStickerSetOrder: newValue });
+  }, [setSettingOption]);
+
   const handleSuggestStickersChange = useCallback((newValue: boolean) => {
     setSettingOption({ shouldSuggestStickers: newValue });
   }, [setSettingOption]);
@@ -121,6 +126,19 @@ const SettingsStickers: FC<OwnProps & StateProps> = ({
           </ListItem>
         )}
       </div>
+      <div className="settings-item">
+        <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
+          {lang('InstalledStickers.DynamicPackOrder')}
+        </h4>
+        <Checkbox
+          label={lang('InstalledStickers.DynamicPackOrder')}
+          checked={shouldUpdateStickerSetOrder}
+          onCheck={handleSuggestStickerSetOrderChange}
+        />
+        <p className="settings-item-description mt-3" dir="auto">
+          {lang('InstalledStickers.DynamicPackOrderInfo')}
+        </p>
+      </div>
       {stickerSets && (
         <div className="settings-item">
           <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
@@ -151,6 +169,7 @@ export default memo(withGlobal<OwnProps>(
     return {
       ...pick(global.settings.byKey, [
         'shouldSuggestStickers',
+        'shouldUpdateStickerSetOrder',
       ]),
       addedSetIds: global.stickers.added.setIds,
       customEmojiSetIds: global.customEmojis.added.setIds,

src/components/middle/composer/Composer.tsx

@@ -204,6 +204,7 @@ type StateProps =
     canSendVoiceByPrivacy?: boolean;
     attachmentSettings: GlobalState['attachmentSettings'];
     slowMode?: ApiChatFullInfo['slowMode'];
+    shouldUpdateStickerSetOrder?: boolean;
   }
   & Pick<GlobalState, 'connectionState'>;
 
@@ -289,6 +290,7 @@ const Composer: FC<OwnProps & StateProps> = ({
   attachmentSettings,
   theme,
   slowMode,
+  shouldUpdateStickerSetOrder,
 }) => {
   const {
     sendMessage,
@@ -757,7 +759,7 @@ const Composer: FC<OwnProps & StateProps> = ({
       entities,
       scheduledAt,
       isSilent,
-      shouldUpdateStickerSetsOrder: true,
+      shouldUpdateStickerSetOrder,
       attachments: prepareAttachmentsToSend(attachmentsToSend, sendCompressed),
       shouldGroupMessages: sendGrouped,
     });
@@ -772,7 +774,7 @@ const Composer: FC<OwnProps & StateProps> = ({
     });
   }, [
     attachmentSettings.shouldCompress, attachmentSettings.shouldSendGrouped, connectionState, getHtml,
-    validateTextLength, checkSlowMode, sendMessage, clearDraft, chatId, resetComposer,
+    validateTextLength, checkSlowMode, sendMessage, clearDraft, chatId, resetComposer, shouldUpdateStickerSetOrder,
   ]);
 
   const handleSendAttachments = useCallback((
@@ -834,7 +836,7 @@ const Composer: FC<OwnProps & StateProps> = ({
         entities,
         scheduledAt,
         isSilent,
-        shouldUpdateStickerSetsOrder: true,
+        shouldUpdateStickerSetOrder,
       });
     }
 
@@ -860,6 +862,7 @@ const Composer: FC<OwnProps & StateProps> = ({
   }, [
     connectionState, attachments, activeVoiceRecording, getHtml, isForwarding, validateTextLength, clearDraft,
     chatId, stopRecordingVoice, sendAttachments, checkSlowMode, sendMessage, forwardMessages, resetComposer,
+    shouldUpdateStickerSetOrder,
   ]);
 
   const handleClickBotMenu = useCallback(() => {
@@ -972,7 +975,7 @@ const Composer: FC<OwnProps & StateProps> = ({
     isSilent?: boolean,
     isScheduleRequested?: boolean,
     shouldPreserveInput = false,
-    shouldUpdateStickerSetsOrder?: boolean,
+    canUpdateStickerSetsOrder?: boolean,
   ) => {
     sticker = {
       ...sticker,
@@ -989,14 +992,18 @@ const Composer: FC<OwnProps & StateProps> = ({
         });
       });
     } else {
-      sendMessage({ sticker, isSilent, shouldUpdateStickerSetsOrder });
+      sendMessage({
+        sticker,
+        isSilent,
+        shouldUpdateStickerSetOrder: shouldUpdateStickerSetOrder && canUpdateStickerSetsOrder,
+      });
       requestMeasure(() => {
         resetComposer(shouldPreserveInput);
       });
     }
   }, [
     shouldSchedule, forceShowSymbolMenu, requestCalendar, cancelForceShowSymbolMenu, handleMessageSchedule,
-    resetComposer, sendMessage,
+    resetComposer, sendMessage, shouldUpdateStickerSetOrder,
   ]);
 
   const handleInlineBotSelect = useCallback((
@@ -1581,7 +1588,9 @@ export default memo(withGlobal<OwnProps>(
     const messageWithActualBotKeyboard = (isChatWithBot || !isChatWithUser)
       && selectNewestMessageWithBotKeyboardButtons(global, chatId, threadId);
     const scheduledIds = selectScheduledIds(global, chatId, threadId);
-    const { language, shouldSuggestStickers, shouldSuggestCustomEmoji } = global.settings.byKey;
+    const {
+      language, shouldSuggestStickers, shouldSuggestCustomEmoji, shouldUpdateStickerSetOrder,
+    } = global.settings.byKey;
     const baseEmojiKeywords = global.emojiKeywords[BASE_EMOJI_KEYWORD_LANG];
     const emojiKeywords = language !== BASE_EMOJI_KEYWORD_LANG ? global.emojiKeywords[language] : undefined;
     const botKeyboardMessageId = messageWithActualBotKeyboard ? messageWithActualBotKeyboard.id : undefined;
@@ -1645,6 +1654,7 @@ export default memo(withGlobal<OwnProps>(
       contentToBeScheduled: tabState.contentToBeScheduled,
       shouldSuggestStickers,
       shouldSuggestCustomEmoji,
+      shouldUpdateStickerSetOrder,
       recentEmojis: global.recentEmojis,
       baseEmojiKeywords: baseEmojiKeywords?.keywords,
       emojiKeywords: emojiKeywords?.keywords,

src/components/middle/composer/StickerPicker.tsx

@@ -53,7 +53,7 @@ type OwnProps = {
   loadAndPlay: boolean;
   canSendStickers?: boolean;
   onStickerSelect: (
-    sticker: ApiSticker, isSilent?: boolean, shouldSchedule?: boolean, shouldUpdateStickerSetsOrder?: boolean,
+    sticker: ApiSticker, isSilent?: boolean, shouldSchedule?: boolean, canUpdateStickerSetsOrder?: boolean,
   ) => void;
 };
 

src/components/middle/composer/SymbolMenu.tsx

@@ -47,7 +47,7 @@ export type OwnProps = {
     isSilent?: boolean,
     shouldSchedule?: boolean,
     shouldPreserveInput?: boolean,
-    shouldUpdateStickerSetsOrder?: boolean,
+    canUpdateStickerSetsOrder?: boolean,
   ) => void;
   onGifSelect?: (gif: ApiVideo, isSilent?: boolean, shouldSchedule?: boolean) => void;
   onRemoveSymbol: () => void;
@@ -198,9 +198,9 @@ const SymbolMenu: FC<OwnProps & StateProps> = ({
   }, [onClose, onSearchOpen]);
 
   const handleStickerSelect = useCallback((
-    sticker: ApiSticker, isSilent?: boolean, shouldSchedule?: boolean, shouldUpdateStickerSetsOrder?: boolean,
+    sticker: ApiSticker, isSilent?: boolean, shouldSchedule?: boolean, canUpdateStickerSetsOrder?: boolean,
   ) => {
-    onStickerSelect?.(sticker, isSilent, shouldSchedule, true, shouldUpdateStickerSetsOrder);
+    onStickerSelect?.(sticker, isSilent, shouldSchedule, true, canUpdateStickerSetsOrder);
   }, [onStickerSelect]);
 
   const lang = useLang();

src/components/middle/composer/SymbolMenuButton.tsx

@@ -35,7 +35,7 @@ type OwnProps = {
     isSilent?: boolean,
     shouldSchedule?: boolean,
     shouldPreserveInput?: boolean,
-    shouldUpdateStickerSetsOrder?: boolean
+    canUpdateStickerSetsOrder?: boolean
   ) => void;
   onGifSelect?: (gif: ApiVideo, isSilent?: boolean, shouldSchedule?: boolean) => void;
   onRemoveSymbol: VoidFunction;

src/global/initialState.ts

@@ -214,6 +214,7 @@ export const INITIAL_GLOBAL_STATE: GlobalState = {
       notificationSoundVolume: 5,
       shouldSuggestStickers: true,
       shouldSuggestCustomEmoji: true,
+      shouldUpdateStickerSetOrder: true,
       language: 'en',
       timeFormat: '24h',
       wasTimeFormatSetManually: false,

src/global/types.ts

@@ -1178,7 +1178,7 @@ export interface ActionPayloads {
     gif?: ApiVideo;
     poll?: ApiNewPoll;
     contact?: Partial<ApiContact>;
-    shouldUpdateStickerSetsOrder?: boolean;
+    shouldUpdateStickerSetOrder?: boolean;
     shouldGroupMessages?: boolean;
   } & WithTabId;
   cancelSendingMessage: {

src/types/index.ts

@@ -86,6 +86,7 @@ export interface ISettings extends NotifySettings, Record<string, any> {
   autoLoadFileMaxSizeMb: number;
   shouldSuggestStickers: boolean;
   shouldSuggestCustomEmoji: boolean;
+  shouldUpdateStickerSetOrder: boolean;
   hasPassword?: boolean;
   languages?: ApiLanguage[];
   language: LangCode;