Stickers: Various fixes (#2311)

src/api/gramjs/apiBuilders/symbols.ts

@@ -116,7 +116,7 @@ export function buildStickerSet(set: GramJs.StickerSet): ApiStickerSet {
   } = set;
 
   return {
-    archived,
+    isArchived: archived,
     isLottie: animated,
     isVideos: videos,
     isEmoji: emojis,

src/api/types/messages.ts

@@ -47,7 +47,7 @@ export interface ApiSticker {
 }
 
 export interface ApiStickerSet {
-  archived?: true;
+  isArchived?: true;
   isLottie?: true;
   isVideos?: true;
   isEmoji?: true;

src/components/common/StickerSetModal.tsx

@@ -79,7 +79,7 @@ const StickerSetModal: FC<OwnProps & StateProps> = ({
   const prevStickerSet = usePrevious(stickerSet);
   const renderingStickerSet = stickerSet || prevStickerSet;
 
-  const isAdded = renderingStickerSet?.installedDate;
+  const isAdded = !renderingStickerSet?.isArchived && renderingStickerSet?.installedDate;
   const isEmoji = renderingStickerSet?.isEmoji;
   const isButtonLocked = !isAdded && isSetPremium && !isCurrentUserPremium;
 

src/components/common/TopicDefaultIcon.module.scss

@@ -2,6 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  vertical-align: middle;
 
   position: relative;
   width: 1.25rem;
@@ -20,8 +21,10 @@
   color: #ffffff;
   font-weight: 500;
   font-size: 0.75em;
-  position: relative;
+  line-height: 1;
-  bottom: 0.0625rem;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 
   :global(.emoji) {
     width: 1em;

src/components/middle/composer/CustomEmojiPicker.tsx

@@ -20,7 +20,7 @@ import { MEMO_EMPTY_ARRAY } from '../../../util/memo';
 import fastSmoothScroll from '../../../util/fastSmoothScroll';
 import buildClassName from '../../../util/buildClassName';
 import fastSmoothScrollHorizontal from '../../../util/fastSmoothScrollHorizontal';
-import { pickTruthy } from '../../../util/iteratees';
+import { pickTruthy, unique } from '../../../util/iteratees';
 import {
   selectIsAlwaysHighPriorityEmoji,
   selectIsChatWithSelf,
@@ -147,15 +147,13 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
       });
     }
 
-    const existingAddedSetIds = Object.values(pickTruthy(stickerSetsById, addedCustomEmojiIds));
+    const setIdsToDisplay = unique(addedCustomEmojiIds.concat(featuredCustomEmojiIds || []));
 
-    const filteredFeaturedIds = featuredCustomEmojiIds?.filter((id) => !addedCustomEmojiIds.includes(id)) || [];
+    const setsToDisplay = Object.values(pickTruthy(stickerSetsById, setIdsToDisplay));
-    const featuredSetIds = Object.values(pickTruthy(stickerSetsById, filteredFeaturedIds));
 
     return [
       ...defaultSets,
-      ...existingAddedSetIds,
+      ...setsToDisplay,
-      ...featuredSetIds,
     ];
   }, [
     addedCustomEmojiIds, defaultTopicIconsId, featuredCustomEmojiIds, lang, recentCustomEmoji, stickerSetsById,

src/components/middle/composer/StickerSet.tsx

@@ -164,7 +164,8 @@ const StickerSet: FC<OwnProps> = ({
   const isLocked = !isSavedMessages && !isRecent && isEmoji && !isCurrentUserPremium
     && stickerSet.stickers?.some(({ isFree }) => !isFree);
 
-  const canCut = !stickerSet.installedDate && stickerSet.id !== RECENT_SYMBOL_SET_ID;
+  const isInstalled = stickerSet.installedDate && !stickerSet.isArchived;
+  const canCut = !isInstalled && stickerSet.id !== RECENT_SYMBOL_SET_ID;
   const [isCut, , expand] = useFlag(canCut);
   const itemsBeforeCutout = itemsPerRow * 3 - 1;
   const totalItemsCount = withDefaultTopicIcon ? stickerSet.count + 1 : stickerSet.count;
@@ -196,7 +197,7 @@ const StickerSet: FC<OwnProps> = ({
           {isRecent && (
             <i className="symbol-set-remove icon-close" onClick={openConfirmModal} />
           )}
-          {!isRecent && isEmoji && !stickerSet.installedDate && (
+          {!isRecent && isEmoji && !isInstalled && (
             <Button
               className="symbol-set-add-button"
               withPremiumGradient={isPremiumSet && !isCurrentUserPremium}

src/components/right/StickerSetResult.tsx

@@ -40,7 +40,7 @@ const StickerSetResult: FC<OwnProps & StateProps> = ({
   const sharedCanvasRef = useRef<HTMLCanvasElement>(null);
 
   const lang = useLang();
-  const isAdded = set && Boolean(set.installedDate);
+  const isAdded = set && !set.isArchived && Boolean(set.installedDate);
   const areStickersLoaded = Boolean(set?.stickers);
 
   const displayedStickers = useMemo(() => {

src/global/actions/api/symbols.ts

@@ -368,9 +368,10 @@ addActionHandler('toggleStickerSet', (global, actions, payload) => {
     return;
   }
 
-  const { accessHash, installedDate } = stickerSet;
+  const { accessHash, installedDate, isArchived } = stickerSet;
+  const isInstalled = !isArchived && Boolean(installedDate);
 
-  void callApi(!installedDate ? 'installStickerSet' : 'uninstallStickerSet', { stickerSetId, accessHash });
+  void callApi(!isInstalled ? 'installStickerSet' : 'uninstallStickerSet', { stickerSetId, accessHash });
 });
 
 addActionHandler('loadEmojiKeywords', async (global, actions, payload: { language: LangCode }) => {

src/global/reducers/symbols.ts

@@ -104,7 +104,7 @@ export function updateStickerSet(
   const isCustomEmoji = update.isEmoji || currentStickerSet.isEmoji;
   const addedSets = (isCustomEmoji ? global.customEmojis.added.setIds : global.stickers.added.setIds) || [];
   let setIds: string[] = addedSets;
-  if (update.installedDate && addedSets && !addedSets.includes(stickerSetId)) {
+  if (update.installedDate && !update.isArchived && addedSets && !addedSets.includes(stickerSetId)) {
     setIds = [stickerSetId, ...setIds];
   }
 

src/types/index.ts

@@ -220,7 +220,7 @@ export enum SettingsScreens {
 
 export type StickerSetOrRecent = Pick<ApiStickerSet, (
   'id' | 'accessHash' | 'title' | 'count' | 'stickers' | 'hasThumbnail' | 'isLottie' | 'isVideos' | 'isEmoji' |
-  'installedDate'
+  'installedDate' | 'isArchived'
 )>;
 
 export enum LeftColumnContent {