From ca01d03190d29a5ff8b78f4dae3843036348e4d3 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 8 Feb 2023 00:47:55 +0100
Subject: [PATCH] Inline Bot Tooltip: Fix layout & sticker sizes (#2510)

---
 src/components/common/StickerButton.tsx       |  6 +++--
 src/components/middle/composer/Composer.tsx   | 27 ++++++++++---------
 .../middle/composer/InlineBotTooltip.scss     | 17 +++++++-----
 .../composer/inlineResults/StickerResult.tsx  |  1 +
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/components/common/StickerButton.tsx b/src/components/common/StickerButton.tsx
index dc37a63e8..81d4bbed6 100644
--- a/src/components/common/StickerButton.tsx
+++ b/src/components/common/StickerButton.tsx
@@ -37,6 +37,7 @@ type OwnProps<T> = {
   isCurrentUserPremium?: boolean;
   sharedCanvasRef?: React.RefObject<HTMLCanvasElement>;
   observeIntersection: ObserveFn;
+  noShowPremium?: boolean;
   onClick?: (arg: OwnProps<T>['clickArg'], isSilent?: boolean, shouldSchedule?: boolean) => void;
   clickArg: T;
   onFaveClick?: (sticker: ApiSticker) => void;
@@ -55,6 +56,7 @@ const StickerButton = <T extends number | ApiSticker | ApiBotInlineMediaResult |
   canViewSet,
   observeIntersection,
   isCurrentUserPremium,
+  noShowPremium,
   sharedCanvasRef,
   onClick,
   clickArg,
@@ -254,14 +256,14 @@ const StickerButton = <T extends number | ApiSticker | ApiBotInlineMediaResult |
         sharedCanvasRef={sharedCanvasRef}
         customColor={customColor}
       />
-      {isLocked && (
+      {!noShowPremium && isLocked && (
         <div
           className="sticker-locked"
         >
           <i className="icon-lock-badge" />
         </div>
       )}
-      {isPremium && !isLocked && (
+      {!noShowPremium && isPremium && !isLocked && (
         <div className="sticker-premium">
           <i className="icon-premium" />
         </div>
diff --git a/src/components/middle/composer/Composer.tsx b/src/components/middle/composer/Composer.tsx
index 8799605c5..e15c64e31 100644
--- a/src/components/middle/composer/Composer.tsx
+++ b/src/components/middle/composer/Composer.tsx
@@ -1290,19 +1290,6 @@ const Composer: FC<OwnProps & StateProps> = ({
         onInsertUserName={insertMention}
         onClose={closeMentionTooltip}
       />
-      <InlineBotTooltip
-        isOpen={isInlineBotTooltipOpen}
-        botId={inlineBotId}
-        isGallery={isInlineBotTooltipGallery}
-        inlineBotResults={inlineBotResults}
-        switchPm={inlineBotSwitchPm}
-        loadMore={loadMoreForInlineBot}
-        isSavedMessages={isChatWithSelf}
-        canSendGifs={canSendGifs}
-        isCurrentUserPremium={isCurrentUserPremium}
-        onSelectResult={handleInlineBotSelect}
-        onClose={closeInlineBotTooltip}
-      />
       <BotCommandTooltip
         isOpen={isBotCommandTooltipOpen}
         withUsername={Boolean(chatBotCommands)}
@@ -1312,6 +1299,20 @@ const Composer: FC<OwnProps & StateProps> = ({
       />
       <div id="message-compose">
         <div className="svg-appendix" ref={appendixRef} />
+
+        <InlineBotTooltip
+          isOpen={isInlineBotTooltipOpen}
+          botId={inlineBotId}
+          isGallery={isInlineBotTooltipGallery}
+          inlineBotResults={inlineBotResults}
+          switchPm={inlineBotSwitchPm}
+          loadMore={loadMoreForInlineBot}
+          isSavedMessages={isChatWithSelf}
+          canSendGifs={canSendGifs}
+          isCurrentUserPremium={isCurrentUserPremium}
+          onSelectResult={handleInlineBotSelect}
+          onClose={closeInlineBotTooltip}
+        />
         <ComposerEmbeddedMessage
           onClear={handleEmbeddedClear}
           shouldForceShowEditing={Boolean(shouldForceShowEditing && editingMessage)}
diff --git a/src/components/middle/composer/InlineBotTooltip.scss b/src/components/middle/composer/InlineBotTooltip.scss
index 8d1e8c080..a98bdac71 100644
--- a/src/components/middle/composer/InlineBotTooltip.scss
+++ b/src/components/middle/composer/InlineBotTooltip.scss
@@ -6,12 +6,13 @@
 
   &.gallery {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(8, 1fr);
+    grid-auto-flow: dense;
     grid-gap: 1px;
     padding: 0;
 
     @media (max-width: 600px) {
-      grid-template-columns: repeat(3, 1fr);
+      grid-template-columns: repeat(4, 1fr);
     }
 
     .switch-pm {
@@ -22,16 +23,12 @@
       }
     }
 
-    .GifButton {
-      grid-column-end: initial;
-    }
-
     .StickerButton {
       width: initial;
       height: 0;
       margin: 0;
       padding-bottom: 100%;
-      border-radius: 0;
+      border-radius: var(--border-radius-default);
 
       .AnimatedSticker,
       img,
@@ -51,4 +48,10 @@
       }
     }
   }
+
+  &:not(.gallery) .GifButton {
+    width: 4rem;
+    height: 4rem;
+    margin: 0.5rem;
+  }
 }
diff --git a/src/components/middle/composer/inlineResults/StickerResult.tsx b/src/components/middle/composer/inlineResults/StickerResult.tsx
index a50bda4dc..1fb55fe5f 100644
--- a/src/components/middle/composer/inlineResults/StickerResult.tsx
+++ b/src/components/middle/composer/inlineResults/StickerResult.tsx
@@ -40,6 +40,7 @@ const StickerResult: FC<OwnProps> = ({
       clickArg={inlineResult}
       isSavedMessages={isSavedMessages}
       canViewSet
+      noShowPremium
       isCurrentUserPremium={isCurrentUserPremium}
     />
   );