chore: update useFocusMessage props & increase sponsored messsage gap

Author: itwaze

src/components/middle/ActionMessage.tsx

@@ -112,7 +112,14 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
     message.replyInfo?.type === 'message' ? message.replyInfo.replyToMsgId : undefined,
     targetMessage,
   );
-  useFocusMessage(ref, message.chatId, isFocused, focusDirection, noFocusHighlight, isJustAdded);
+  useFocusMessage({
+    elementRef: ref,
+    chatId: message.chatId,
+    isFocused,
+    focusDirection,
+    noFocusHighlight,
+    isJustAdded,
+  });
 
   useEffect(() => {
     if (!message.isPinned) return undefined;

src/components/middle/message/Message.tsx

@@ -12,7 +12,6 @@ import type {
   ApiMessageOutgoingStatus,
   ApiPeer,
   ApiReaction,
-  ApiSponsoredMessage,
   ApiThreadInfo,
   ApiTopic,
   ApiTypeStory,
@@ -275,7 +274,7 @@ type StateProps = {
   isConnected: boolean;
   isLoadingComments?: boolean;
   shouldWarnAboutSvg?: boolean;
-  sponsoredMessage?: ApiSponsoredMessage;
+  hasSponsoredMessage?: boolean;
 };
 
 type MetaPosition =
@@ -390,7 +389,7 @@ const Message: FC<OwnProps & StateProps> = ({
   getIsMessageListReady,
   shouldWarnAboutSvg,
   onPinnedIntersectionChange,
-  sponsoredMessage,
+  hasSponsoredMessage,
 }) => {
   const {
     toggleMessageSelection,
@@ -736,21 +735,28 @@ const Message: FC<OwnProps & StateProps> = ({
   );
 
   const WITH_BOTTOM_ELEMENT_GAP = 5.625 * REM;
-  const SPONSORED_MESSAGE_GAP = 10 * REM;
-  const SELECT_MODE_WITH_SPONSORED_GAP = WITH_BOTTOM_ELEMENT_GAP + 10 * REM;
+  const SPONSORED_MESSAGE_GAP = 11 * REM;
+  const SELECT_MODE_WITH_SPONSORED_GAP = WITH_BOTTOM_ELEMENT_GAP + SPONSORED_MESSAGE_GAP;
 
-  const getFocusMagring = () => {
-    if (messageListType === 'pinned' || (isInSelectMode && !sponsoredMessage)) return WITH_BOTTOM_ELEMENT_GAP;
-    if (!isInSelectMode && sponsoredMessage) return SPONSORED_MESSAGE_GAP;
-    if (isInSelectMode && sponsoredMessage) return SELECT_MODE_WITH_SPONSORED_GAP;
+  const getFocusMargin = () => {
+    if (messageListType === 'pinned' || (isInSelectMode && !hasSponsoredMessage)) return WITH_BOTTOM_ELEMENT_GAP;
+    if (!isInSelectMode && hasSponsoredMessage) return SPONSORED_MESSAGE_GAP;
+    if (isInSelectMode && hasSponsoredMessage) return SELECT_MODE_WITH_SPONSORED_GAP;
 
     return undefined;
   };
 
-  useFocusMessage(
-    // eslint-disable-next-line max-len
-    ref, chatId, isFocused, focusDirection, noFocusHighlight, isResizingContainer, isJustAdded, Boolean(focusedQuote), getFocusMagring(),
-  );
+  useFocusMessage({
+    elementRef: ref,
+    chatId,
+    isFocused,
+    focusDirection,
+    noFocusHighlight,
+    isResizingContainer,
+    isJustAdded,
+    isQuote: Boolean(focusedQuote),
+    focusMargin: getFocusMargin(),
+  });
 
   const signature = (isChannel && message.postAuthorTitle)
     || (!asForwarded && forwardInfo?.postAuthorTitle)
@@ -1569,7 +1575,7 @@ export default memo(withGlobal<OwnProps>(
     const hasActiveReactions = Boolean(reactionMessage && activeReactions[getMessageKey(reactionMessage)]?.length);
 
     return {
-      sponsoredMessage: selectSponsoredMessage(global, chatId),
+      hasSponsoredMessage: Boolean(selectSponsoredMessage(global, chatId)),
       theme: selectTheme(global),
       forceSenderName,
       sender,

src/components/middle/message/hooks/useFocusMessage.ts

@@ -13,17 +13,29 @@ const BOTTOM_FOCUS_OFFSET = 500;
 const RELOCATED_FOCUS_OFFSET = 750;
 const FOCUS_MARGIN = 20;
 
-export default function useFocusMessage(
-  elementRef: { current: HTMLDivElement | null },
-  chatId: string,
-  isFocused?: boolean,
-  focusDirection?: FocusDirection,
-  noFocusHighlight?: boolean,
-  isResizingContainer?: boolean,
-  isJustAdded?: boolean,
-  isQuote?: boolean,
+interface OwnProps {
+  elementRef: { current: HTMLDivElement | null };
+  chatId: string;
+  isFocused?: boolean;
+  focusDirection?: FocusDirection;
+  noFocusHighlight?: boolean;
+  isResizingContainer?: boolean;
+  isJustAdded?: boolean;
+  isQuote?: boolean;
+  focusMargin?: number;
+}
+
+export default function useFocusMessage({
+  elementRef,
+  chatId,
+  isFocused,
+  focusDirection,
+  noFocusHighlight,
+  isResizingContainer,
+  isJustAdded,
+  isQuote,
   focusMargin = FOCUS_MARGIN,
-) {
+}: OwnProps) {
   const isRelocatedRef = useRef(!isJustAdded);
 
   useLayoutEffect(() => {