UI: Fix RTL styles after reload on some components (#6442)

src/assets/localization/fallback.strings

@@ -2314,4 +2314,4 @@
 "UserNoteTitle" = "Notes";
 "UserNoteHint" = "only visible to you";
 "EditUserNoteHint" = "Notes are only visible to you.";
-
+"AriaStoryTogglerOpen" = "Open Story List";

src/components/common/Audio.tsx

@@ -11,6 +11,7 @@ import type {
 import type { BufferedRange } from '../../hooks/useBuffering';
 import type { OldLangFn } from '../../hooks/useOldLang';
 import type { ThemeKey } from '../../types';
+import type { LangFn } from '../../util/localization';
 import { ApiMediaFormat } from '../../api/types';
 import { AudioOrigin } from '../../types';
 
@@ -38,6 +39,7 @@ import { MAX_EMPTY_WAVEFORM_POINTS, renderWaveform } from './helpers/waveform';
 import useAppLayout from '../../hooks/useAppLayout';
 import useAudioPlayer from '../../hooks/useAudioPlayer';
 import useBuffering from '../../hooks/useBuffering';
+import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
 import useMedia from '../../hooks/useMedia';
 import useMediaWithLoadProgress from '../../hooks/useMediaWithLoadProgress';
@@ -133,8 +135,8 @@ const Audio = ({
   const isVoice = Boolean(voice || video);
   const isSeeking = useRef<boolean>(false);
   const seekerRef = useRef<HTMLDivElement>();
-  const lang = useOldLang();
+  const oldLang = useOldLang();
-  const { isRtl } = lang;
+  const lang = useLang();
 
   const { isMobile } = useAppLayout();
   const [isActivated, setIsActivated] = useState(false);
@@ -314,7 +316,7 @@ const Audio = ({
   function renderSecondLine() {
     if (isVoice) {
       return (
-        <div className="meta" dir={isRtl ? 'rtl' : undefined}>
+        <div className="meta" dir={lang.isRtl ? 'rtl' : undefined}>
           {formatMediaDuration((voice || video)!.duration)}
         </div>
       );
@@ -323,7 +325,7 @@ const Audio = ({
     const { performer } = audio!;
 
     return (
-      <div className="meta" dir={isRtl ? 'rtl' : undefined}>
+      <div className="meta" dir={lang.isRtl ? 'rtl' : undefined}>
         {formatMediaDuration(duration)}
         <span className="bullet">&bull;</span>
         {performer && <span className="performer" title={performer}>{renderText(performer)}</span>}
@@ -364,14 +366,14 @@ const Audio = ({
                 className="date"
                 onClick={handleDateClick}
               >
-                {formatPastTimeShort(lang, date * 1000)}
+                {formatPastTimeShort(oldLang, date * 1000)}
               </Link>
             )}
           </div>
         </div>
 
         {withSeekline && (
-          <div className="meta search-result" dir={isRtl ? 'rtl' : undefined}>
+          <div className="meta search-result" dir={lang.isRtl ? 'rtl' : undefined}>
             <span className="duration with-seekline" dir="auto">
               {playProgress < 1 && formatMediaDuration(duration * playProgress, duration)}
             </span>
@@ -462,6 +464,7 @@ const Audio = ({
       {origin === AudioOrigin.Search && renderWithTitle()}
       {origin !== AudioOrigin.Search && audio && renderAudio(
         lang,
+        oldLang,
         audio,
         duration,
         isPlaying,
@@ -506,7 +509,8 @@ function getSeeklineSpikeAmounts(isMobile?: boolean, withAvatar?: boolean) {
 }
 
 function renderAudio(
-  lang: OldLangFn,
+  lang: LangFn,
+  oldLang: OldLangFn,
   audio: ApiAudio,
   duration: number,
   isPlaying: boolean,
@@ -554,7 +558,7 @@ function renderAudio(
             <>
               <span className="bullet">&bull;</span>
               <Link className="date" onClick={handleDateClick}>
-                {formatMediaDateTime(lang, date * 1000, true)}
+                {formatMediaDateTime(oldLang, date * 1000, true)}
               </Link>
             </>
           )}

src/components/common/AvatarList.tsx

@@ -6,7 +6,7 @@ import type { AvatarSize } from './Avatar';
 
 import buildClassName from '../../util/buildClassName';
 
-import useOldLang from '../../hooks/useOldLang';
+import useLang from '../../hooks/useLang';
 
 import Avatar, { AVATAR_SIZES } from './Avatar';
 
@@ -29,7 +29,7 @@ const AvatarList: FC<OwnProps> = ({
   limit = DEFAULT_LIMIT,
   badgeText,
 }) => {
-  const lang = useOldLang();
+  const lang = useLang();
 
   const pxSize = typeof size === 'number' ? size : AVATAR_SIZES[size];
 

src/components/common/ChatForumLastMessage.tsx

@@ -18,7 +18,7 @@ import renderText from './helpers/renderText';
 
 import { getIsMobile } from '../../hooks/useAppLayout';
 import { useFastClick } from '../../hooks/useFastClick';
-import useOldLang from '../../hooks/useOldLang';
+import useLang from '../../hooks/useLang';
 
 import TopicIcon from './TopicIcon';
 
@@ -47,7 +47,7 @@ const ChatForumLastMessage = ({
   const lastMessageRef = useRef<HTMLDivElement>();
   const mainColumnRef = useRef<HTMLDivElement>();
 
-  const lang = useOldLang();
+  const lang = useLang();
 
   const [lastActiveTopic, ...otherTopics] = useMemo(() => {
     if (!topics) {

src/components/common/DeleteChatModal.tsx

@@ -17,6 +17,7 @@ import { selectIsChatWithSelf, selectUser } from '../../global/selectors';
 import { isUserId } from '../../util/entities/ids';
 import renderText from './helpers/renderText';
 
+import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
 import useOldLang from '../../hooks/useOldLang';
 
@@ -72,7 +73,8 @@ const DeleteChatModal: FC<OwnProps & StateProps> = ({
     deleteChat,
   } = getActions();
 
-  const lang = useOldLang();
+  const oldLang = useOldLang();
+  const lang = useLang();
   const chatTitle = getChatTitle(lang, chat);
 
   const handleDeleteForAll = useLastCallback(() => {
@@ -129,7 +131,7 @@ const DeleteChatModal: FC<OwnProps & StateProps> = ({
           peer={chat}
           isSavedMessages={isChatWithSelf}
         />
-        <h3 className="modal-title">{lang(renderTitle())}</h3>
+        <h3 className="modal-title">{oldLang(renderTitle())}</h3>
       </div>
     );
   }
@@ -159,7 +161,7 @@ const DeleteChatModal: FC<OwnProps & StateProps> = ({
       return (
         <p>
           {renderText(
-            isChatWithSelf ? lang('ClearHistoryMyNotesMessage') : lang('ClearHistoryMessageSingle', chatTitle),
+            isChatWithSelf ? oldLang('ClearHistoryMyNotesMessage') : oldLang('ClearHistoryMessageSingle', chatTitle),
             ['simple_markdown', 'emoji'],
           )}
         </p>
@@ -168,16 +170,16 @@ const DeleteChatModal: FC<OwnProps & StateProps> = ({
     if (isChannel && chat.isCreator) {
       return (
         <p>
-          {renderText(lang('ChatList.DeleteAndLeaveGroupConfirmation', chatTitle), ['simple_markdown', 'emoji'])}
+          {renderText(oldLang('ChatList.DeleteAndLeaveGroupConfirmation', chatTitle), ['simple_markdown', 'emoji'])}
         </p>
       );
     }
 
     if ((isChannel && !chat.isCreator) || isBasicGroup || isSuperGroup) {
-      return <p>{renderText(lang('ChannelLeaveAlertWithName', chatTitle), ['simple_markdown', 'emoji'])}</p>;
+      return <p>{renderText(oldLang('ChannelLeaveAlertWithName', chatTitle), ['simple_markdown', 'emoji'])}</p>;
     }
 
-    return <p>{renderText(lang('ChatList.DeleteChatConfirmation', contactName), ['simple_markdown', 'emoji'])}</p>;
+    return <p>{renderText(oldLang('ChatList.DeleteChatConfirmation', contactName), ['simple_markdown', 'emoji'])}</p>;
   }
 
   function renderActionText() {
@@ -211,17 +213,17 @@ const DeleteChatModal: FC<OwnProps & StateProps> = ({
       <div className="dialog-buttons-column">
         {isBot && !isSavedDialog && (
           <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteAndStop}>
-            {lang('DeleteAndStop')}
+            {oldLang('DeleteAndStop')}
           </Button>
         )}
         {canDeleteForAll && (
           <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteForAll}>
-            {contactName ? renderText(lang('ChatList.DeleteForEveryone', contactName)) : lang('DeleteForAll')}
+            {contactName ? renderText(oldLang('ChatList.DeleteForEveryone', contactName)) : oldLang('DeleteForAll')}
           </Button>
         )}
         {!isPrivateChat && chat.isCreator && !isSavedDialog && (
           <Button color="danger" className="confirm-dialog-button" isText onClick={handleDeleteChat}>
-            {lang('DeleteForAll')}
+            {oldLang('DeleteForAll')}
           </Button>
         )}
         <Button
@@ -230,9 +232,9 @@ const DeleteChatModal: FC<OwnProps & StateProps> = ({
           isText
           onClick={(isPrivateChat || isSavedDialog) ? handleDeleteChat : handleLeaveChat}
         >
-          {lang(renderActionText())}
+          {oldLang(renderActionText())}
         </Button>
-        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+        <Button className="confirm-dialog-button" isText onClick={onClose}>{oldLang('Cancel')}</Button>
       </div>
     </Modal>
   );

src/components/common/DeleteMessageModal.tsx

@@ -357,7 +357,7 @@ const DeleteMessageModal: FC<OwnProps & StateProps> = ({
     return (
       <div
         className={shouldShowOption && styles.container}
-        dir={oldLang.isRtl ? 'rtl' : undefined}
+        dir={lang.isRtl ? 'rtl' : undefined}
       >
         {shouldShowOption && (
           <AvatarList

src/components/common/DotAnimation.tsx

@@ -1,9 +1,9 @@
-import type { FC } from '../../lib/teact/teact';
+import { memo } from '@teact';
 
 import buildClassName from '../../util/buildClassName';
 import renderText from './helpers/renderText';
 
-import useOldLang from '../../hooks/useOldLang';
+import useLang from '../../hooks/useLang';
 
 import './DotAnimation.scss';
 
@@ -12,8 +12,8 @@ type OwnProps = {
   className?: string;
 };
 
-const DotAnimation: FC<OwnProps> = ({ content, className }) => {
+const DotAnimation = ({ content, className }: OwnProps) => {
-  const lang = useOldLang();
+  const lang = useLang();
   return (
     <span className={buildClassName('DotAnimation', className)} dir={lang.isRtl ? 'rtl' : 'auto'}>
       {renderText(content)}
@@ -22,4 +22,4 @@ const DotAnimation: FC<OwnProps> = ({ content, className }) => {
   );
 };
 
-export default DotAnimation;
+export default memo(DotAnimation);

src/components/common/File.tsx

@@ -1,5 +1,4 @@
 import type { ElementRef, FC } from '../../lib/teact/teact';
-import type React from '../../lib/teact/teact';
 import {
   memo, useMemo, useRef, useState,
 } from '../../lib/teact/teact';
@@ -15,6 +14,7 @@ import renderText from './helpers/renderText';
 
 import useAppLayout from '../../hooks/useAppLayout';
 import useCanvasBlur from '../../hooks/useCanvasBlur';
+import useLang from '../../hooks/useLang';
 import useMediaTransitionDeprecated from '../../hooks/useMediaTransitionDeprecated';
 import useOldLang from '../../hooks/useOldLang';
 import useShowTransitionDeprecated from '../../hooks/useShowTransitionDeprecated';
@@ -68,7 +68,8 @@ const File: FC<OwnProps> = ({
   onClick,
   onDateClick,
 }) => {
-  const lang = useOldLang();
+  const oldLang = useOldLang();
+  const lang = useLang();
   let elementRef = useRef<HTMLDivElement>();
   if (ref) {
     elementRef = ref;
@@ -160,13 +161,13 @@ const File: FC<OwnProps> = ({
           {!sender && Boolean(timestamp) && (
             <>
               <span className="bullet" />
-              <Link onClick={onDateClick}>{formatMediaDateTime(lang, timestamp * 1000, true)}</Link>
+              <Link onClick={onDateClick}>{formatMediaDateTime(oldLang, timestamp * 1000, true)}</Link>
             </>
           )}
         </div>
       </div>
       {sender && Boolean(timestamp) && (
-        <Link onClick={onDateClick}>{formatPastTimeShort(lang, timestamp * 1000)}</Link>
+        <Link onClick={onDateClick}>{formatPastTimeShort(oldLang, timestamp * 1000)}</Link>
       )}
     </div>
   );

src/components/common/GroupChatInfo.tsx

@@ -233,7 +233,7 @@ const GroupChatInfo: FC<OwnProps & StateProps> = ({
       className={
         buildClassName('ChatInfo', className)
       }
-      dir={!noRtl && oldLang.isRtl ? 'rtl' : undefined}
+      dir={!noRtl && lang.isRtl ? 'rtl' : undefined}
       onClick={onClick}
     >
       {!noAvatar && !isTopic && (

src/components/common/ManageUsernames.tsx

@@ -10,6 +10,7 @@ import buildClassName from '../../util/buildClassName';
 import { copyTextToClipboard } from '../../util/clipboard';
 import { isBetween } from '../../util/math';
 
+import useLang from '../../hooks/useLang';
 import useOldLang from '../../hooks/useOldLang';
 import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
 
@@ -45,7 +46,8 @@ const ManageUsernames: FC<OwnProps> = ({
     sortUsernames,
     sortChatUsernames,
   } = getActions();
-  const lang = useOldLang();
+  const oldLang = useOldLang();
+  const lang = useLang();
   const [usernameForConfirm, setUsernameForConfirm] = useState<ApiUsername | undefined>();
 
   const usernameList = useMemo(() => usernames.map(({ username }) => username), [usernames]);
@@ -71,9 +73,9 @@ const ManageUsernames: FC<OwnProps> = ({
   const handleCopyUsername = useCallback((value: string) => {
     copyTextToClipboard(`@${value}`);
     showNotification({
-      message: lang('UsernameCopied'),
+      message: oldLang('UsernameCopied'),
     });
-  }, [lang, showNotification]);
+  }, [oldLang, showNotification]);
 
   const handleUsernameClick = useCallback((data: ApiUsername) => {
     if (data.isEditable) {
@@ -147,7 +149,7 @@ const ManageUsernames: FC<OwnProps> = ({
     <>
       <div className={styles.container}>
         <h4 className={styles.header} dir={lang.isRtl ? 'rtl' : undefined}>
-          {lang('lng_usernames_subtitle')}
+          {oldLang('lng_usernames_subtitle')}
         </h4>
         <div className={styles.sortableContainer} style={`height: ${(usernames.length) * USERNAME_HEIGHT_PX}px`}>
           {usernames.map((usernameData, i) => {
@@ -165,7 +167,7 @@ const ManageUsernames: FC<OwnProps> = ({
                 onDrag={handleDrag}
                 onDragEnd={handleDragEnd}
                 style={`top: ${isDragged ? draggedTop : top}px;`}
-                knobStyle={`${lang.isRtl ? 'left' : 'right'}: 3rem;`}
+                knobStyle="inset-inline-end: 3rem;"
                 isDisabled={!usernameData.isActive}
               >
                 <ListItem
@@ -180,7 +182,7 @@ const ManageUsernames: FC<OwnProps> = ({
                       handler: () => {
                         handleCopyUsername(usernameData.username);
                       },
-                      title: lang('Copy'),
+                      title: oldLang('Copy'),
                       icon: 'copy',
                     },
                   ]}
@@ -193,22 +195,22 @@ const ManageUsernames: FC<OwnProps> = ({
                     @
                     {usernameData.username}
                   </span>
-                  <span className="subtitle">{lang(subtitle)}</span>
+                  <span className="subtitle">{oldLang(subtitle)}</span>
                 </ListItem>
               </Draggable>
             );
           })}
         </div>
         <p className={styles.description} dir={lang.isRtl ? 'rtl' : undefined}>
-          {lang('lng_usernames_description')}
+          {oldLang('lng_usernames_description')}
         </p>
       </div>
       <ConfirmDialog
         isOpen={Boolean(usernameForConfirm)}
         onClose={closeConfirmUsernameDialog}
-        title={lang(usernameForConfirm?.isActive ? 'Username.DeactivateAlertTitle' : 'Username.ActivateAlertTitle')}
+        title={oldLang(usernameForConfirm?.isActive ? 'Username.DeactivateAlertTitle' : 'Username.ActivateAlertTitle')}
-        text={lang(usernameForConfirm?.isActive ? 'Username.DeactivateAlertText' : 'Username.ActivateAlertText')}
+        text={oldLang(usernameForConfirm?.isActive ? 'Username.DeactivateAlertText' : 'Username.ActivateAlertText')}
-        confirmLabel={lang(usernameForConfirm?.isActive
+        confirmLabel={oldLang(usernameForConfirm?.isActive
           ? 'Username.DeactivateAlertHide'
           : 'Username.ActivateAlertShow')}
         confirmHandler={handleUsernameToggle}

src/components/common/PremiumProgress.tsx

@@ -11,7 +11,7 @@ import { REM } from './helpers/mediaDimensions';
 
 import { useTransitionActiveKey } from '../../hooks/animations/useTransitionActiveKey';
 import useForceUpdate from '../../hooks/useForceUpdate';
-import useOldLang from '../../hooks/useOldLang';
+import useLang from '../../hooks/useLang';
 import usePrevious from '../../hooks/usePrevious';
 import useResizeObserver from '../../hooks/useResizeObserver';
 import useSyncEffect from '../../hooks/useSyncEffect';
@@ -46,7 +46,6 @@ const PremiumProgress: FC<OwnProps> = ({
   animationDirection = 'none',
   className,
 }) => {
-  const lang = useOldLang();
   const floatingBadgeContentRef = useRef<HTMLDivElement>();
   const parentContainerRef = useRef<HTMLDivElement>();
 
@@ -72,6 +71,8 @@ const PremiumProgress: FC<OwnProps> = ({
   const prevRightText = usePrevious(rightText);
   const prevIsNegative = usePrevious(isNegative);
 
+  const lang = useLang();
+
   const BEAK_WIDTH_PX = 28;
   const PROGRESS_BORDER_RADIUS_PX = REM;
   const CORNER_BEAK_THRESHOLD = BEAK_WIDTH_PX / 2 + PROGRESS_BORDER_RADIUS_PX;

src/components/common/PrivacySettingsNoticeModal.tsx

@@ -9,6 +9,7 @@ import { selectTabState, selectUser } from '../../global/selectors';
 import { LOCAL_TGS_URLS } from './helpers/animatedAssets';
 import renderText from './helpers/renderText';
 
+import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
 import useOldLang from '../../hooks/useOldLang';
 
@@ -32,7 +33,6 @@ type StateProps = {
 const CLOSE_ANIMATION_DURATION = ANIMATION_DURATION + ANIMATION_END_DELAY;
 
 const PrivacySettingsNoticeModal = ({ isOpen, isReadDate, user }: OwnProps & StateProps) => {
-  const lang = useOldLang();
   const {
     updateGlobalPrivacySettings,
     openPremiumModal,
@@ -41,6 +41,10 @@ const PrivacySettingsNoticeModal = ({ isOpen, isReadDate, user }: OwnProps & Sta
     setPrivacyVisibility,
     loadUser,
   } = getActions();
+
+  const oldLang = useOldLang();
+  const lang = useLang();
+
   const userName = getUserFirstOrLastName(user);
 
   const handleShowReadTime = useLastCallback(() => {
@@ -48,7 +52,7 @@ const PrivacySettingsNoticeModal = ({ isOpen, isReadDate, user }: OwnProps & Sta
     closePrivacySettingsNoticeModal();
 
     setTimeout(() => {
-      showNotification({ message: lang('PremiumReadSet') });
+      showNotification({ message: oldLang('PremiumReadSet') });
     }, CLOSE_ANIMATION_DURATION);
   });
 
@@ -61,7 +65,7 @@ const PrivacySettingsNoticeModal = ({ isOpen, isReadDate, user }: OwnProps & Sta
     closePrivacySettingsNoticeModal();
 
     setTimeout(() => {
-      showNotification({ message: lang('PremiumLastSeenSet') });
+      showNotification({ message: oldLang('PremiumLastSeenSet') });
     }, CLOSE_ANIMATION_DURATION);
   });
 
@@ -98,11 +102,11 @@ const PrivacySettingsNoticeModal = ({ isOpen, isReadDate, user }: OwnProps & Sta
           noLoop
         />
         <h2 className={styles.header}>
-          {lang(isReadDate ? 'PremiumReadHeader1' : 'PremiumLastSeenHeader1')}
+          {oldLang(isReadDate ? 'PremiumReadHeader1' : 'PremiumLastSeenHeader1')}
         </h2>
         <p className={styles.desc}>
           {renderText(
-            lang(
+            oldLang(
               isReadDate ? 'PremiumReadText1' : 'PremiumLastSeenText1Locked',
               userName,
             ),
@@ -113,13 +117,13 @@ const PrivacySettingsNoticeModal = ({ isOpen, isReadDate, user }: OwnProps & Sta
           onClick={isReadDate ? handleShowReadTime : handleShowLastSeen}
           className={styles.button}
         >
-          {lang(isReadDate ? 'PremiumReadButton1' : 'PremiumLastSeenButton1')}
+          {oldLang(isReadDate ? 'PremiumReadButton1' : 'PremiumLastSeenButton1')}
         </Button>
-        <Separator className={styles.separator}>{lang('PremiumOr')}</Separator>
+        <Separator className={styles.separator}>{oldLang('PremiumOr')}</Separator>
-        <h2 className={styles.header}>{lang('PremiumReadHeader2')}</h2>
+        <h2 className={styles.header}>{oldLang('PremiumReadHeader2')}</h2>
         <p className={styles.desc}>
           {renderText(
-            lang(isReadDate ? 'PremiumReadText2' : 'PremiumLastSeenText2', userName),
+            oldLang(isReadDate ? 'PremiumReadText2' : 'PremiumLastSeenText2', userName),
             ['simple_markdown'],
           )}
         </p>
@@ -128,7 +132,7 @@ const PrivacySettingsNoticeModal = ({ isOpen, isReadDate, user }: OwnProps & Sta
           onClick={handleOpenPremium}
           className={styles.button}
         >
-          {lang('PremiumLastSeenButton2')}
+          {oldLang('PremiumLastSeenButton2')}
         </Button>
       </div>
     </Modal>

src/components/common/PrivateChatInfo.tsx

@@ -1,5 +1,4 @@
 import type { FC } from '../../lib/teact/teact';
-import type React from '../../lib/teact/teact';
 import { memo, useEffect, useMemo } from '../../lib/teact/teact';
 import { getActions, withGlobal } from '../../global';
 
@@ -18,6 +17,7 @@ import buildClassName from '../../util/buildClassName';
 import renderText from './helpers/renderText';
 
 import useIntervalForceUpdate from '../../hooks/schedulers/useIntervalForceUpdate';
+import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
 import useOldLang from '../../hooks/useOldLang';
 
@@ -109,7 +109,8 @@ const PrivateChatInfo: FC<OwnProps & StateProps> = ({
     loadMoreProfilePhotos,
   } = getActions();
 
-  const lang = useOldLang();
+  const oldLang = useOldLang();
+  const lang = useLang();
 
   const { id: userId } = user || {};
 
@@ -158,14 +159,14 @@ const PrivateChatInfo: FC<OwnProps & StateProps> = ({
 
     if (withUpdatingStatus && !areMessagesLoaded) {
       return (
-        <DotAnimation className="status" content={lang('Updating')} />
+        <DotAnimation className="status" content={oldLang('Updating')} />
       );
     }
 
     if (customPeer?.subtitleKey) {
       return (
         <span className="status" dir="auto">
-          <span className="user-status" dir="auto">{lang(customPeer.subtitleKey)}</span>
+          <span className="user-status" dir="auto">{oldLang(customPeer.subtitleKey)}</span>
         </span>
       );
     }
@@ -182,7 +183,7 @@ const PrivateChatInfo: FC<OwnProps & StateProps> = ({
       return undefined;
     }
 
-    const translatedStatus = getUserStatus(lang, user, userStatus);
+    const translatedStatus = getUserStatus(oldLang, user, userStatus);
     const mainUserNameClassName = buildClassName('handle', translatedStatus && 'withStatus');
     return (
       <span className={buildClassName('status', isUserOnline(user, userStatus, true) && 'online')}>
@@ -193,7 +194,7 @@ const PrivateChatInfo: FC<OwnProps & StateProps> = ({
   }
 
   const customTitle = adminMember
-    ? adminMember.customTitle || lang(adminMember.isOwner ? 'GroupInfo.LabelOwner' : 'GroupInfo.LabelAdmin')
+    ? adminMember.customTitle || oldLang(adminMember.isOwner ? 'GroupInfo.LabelOwner' : 'GroupInfo.LabelAdmin')
     : undefined;
 
   function renderNameTitle() {

src/components/common/pickers/ChatOrUserPicker.tsx

@@ -23,6 +23,7 @@ import useSelector from '../../../hooks/data/useSelector';
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
 import useInputFocusOnOpen from '../../../hooks/useInputFocusOnOpen';
 import useKeyboardListNavigation from '../../../hooks/useKeyboardListNavigation';
+import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 
@@ -78,6 +79,7 @@ const ChatOrUserPicker: FC<OwnProps> = ({
   const { loadTopics } = getActions();
 
   const oldLang = useOldLang();
+  const lang = useLang();
   const containerRef = useRef<HTMLDivElement>();
   const topicContainerRef = useRef<HTMLDivElement>();
   const searchRef = useRef<HTMLInputElement>();
@@ -244,7 +246,7 @@ const ChatOrUserPicker: FC<OwnProps> = ({
   function renderTopicList() {
     return (
       <>
-        <div className="modal-header modal-header-condensed" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <div className="modal-header modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
           <Button round color="translucent" size="smaller" ariaLabel={oldLang('Back')} onClick={handleHeaderBackClick}>
             <Icon name="arrow-left" />
           </Button>
@@ -291,7 +293,7 @@ const ChatOrUserPicker: FC<OwnProps> = ({
   function renderChatList() {
     return (
       <>
-        <div className="modal-header modal-header-condensed" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <div className="modal-header modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
           <Button
             round
             color="translucent"

src/components/common/pickers/PickerItem.tsx

@@ -3,8 +3,8 @@ import { type TeactNode } from '../../../lib/teact/teact';
 import { IS_IOS } from '../../../util/browser/windowEnvironment';
 import buildClassName from '../../../util/buildClassName';
 
+import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
-import useOldLang from '../../../hooks/useOldLang';
 
 import RippleEffect from '../../ui/RippleEffect';
 
@@ -43,7 +43,7 @@ const PickerItem = ({
   onClick,
   onDisabledClick,
 }: OwnProps) => {
-  const lang = useOldLang();
+  const lang = useLang();
 
   const isClickable = !inactive && !disabled;
   const handleClick = useLastCallback(() => {

src/components/left/main/Chat.scss

@@ -100,6 +100,10 @@
       background-color: var(--background-color);
     }
 
+    .info-row {
+      line-height: 1.375;
+    }
+
     .info.has-tags .subtitle {
       height: unset;
       line-height: inherit;

src/components/left/main/LeftMainHeader.scss

@@ -166,7 +166,7 @@
       position: absolute;
       z-index: 1;
       bottom: 0.0625rem;
-      left: 2.875rem;
+      inset-inline-start: 2.875rem;
 
       font-size: 0.5rem;
       font-weight: var(--font-weight-medium);

src/components/left/main/LeftMainHeader.tsx

@@ -274,20 +274,20 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
         className="left-header"
         data-tauri-drag-region={IS_TAURI && IS_MAC_OS ? true : undefined}
       >
-        {oldLang.isRtl && <div className="DropdownMenuFiller" />}
+        {lang.isRtl && <div className="DropdownMenuFiller" />}
         <DropdownMenu
           trigger={MainButton}
           footer={version}
           className={buildClassName(
             'main-menu',
-            oldLang.isRtl && 'rtl',
+            lang.isRtl && 'rtl',
-            shouldHideSearch && oldLang.isRtl && 'right-aligned',
+            shouldHideSearch && lang.isRtl && 'right-aligned',
-            shouldDisableDropdownMenuTransitionRef.current && oldLang.isRtl && 'disable-transition',
+            shouldDisableDropdownMenuTransitionRef.current && lang.isRtl && 'disable-transition',
           )}
           forceOpen={isBotMenuOpen}
-          positionX={shouldHideSearch && oldLang.isRtl ? 'right' : 'left'}
+          positionX={shouldHideSearch && lang.isRtl ? 'right' : 'left'}
           transformOriginX={IS_TAURI && IS_MAC_OS && !isFullscreen ? 90 : undefined}
-          onTransitionEnd={oldLang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
+          onTransitionEnd={lang.isRtl ? handleDropdownMenuTransitionEnd : undefined}
         >
           <LeftSideMenuItems
             onSelectArchived={onSelectArchived}

src/components/left/settings/PrivacyMessages.tsx

@@ -160,7 +160,7 @@ function PrivacyMessages({
 
     return (
       <div className="settings-item">
-        <h4 className="settings-item-header" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
           {lang('RemoveFeeTitle')}
         </h4>
         <ListItem
@@ -197,7 +197,7 @@ function PrivacyMessages({
   return (
     <>
       <div className="settings-item">
-        <h4 className="settings-item-header" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
           {oldLang('PrivacyMessagesTitle')}
         </h4>
         <RadioGroup
@@ -206,7 +206,7 @@ function PrivacyMessages({
           onChange={handleChange}
           selected={selectedValue}
         />
-        <p className="settings-item-description-larger" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <p className="settings-item-description-larger" dir={lang.isRtl ? 'rtl' : undefined}>
           {privacyDescription}
         </p>
       </div>

src/components/left/settings/SettingsPrivacy.tsx

@@ -236,7 +236,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
       </div>
 
       <div className="settings-item">
-        <h4 className="settings-item-header" dir={oldLang.isRtl ? 'rtl' : undefined}>{oldLang('PrivacyTitle')}</h4>
+        <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>{oldLang('PrivacyTitle')}</h4>
 
         <ListItem
           narrow
@@ -391,7 +391,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
 
       {canChangeSensitive && (
         <div className="settings-item fluid-container">
-          <h4 className="settings-item-header" dir={oldLang.isRtl ? 'rtl' : undefined}>
+          <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
             {oldLang('lng_settings_sensitive_title')}
           </h4>
           <Checkbox
@@ -419,7 +419,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
 
       {canDisplayAutoarchiveSetting && (
         <div className="settings-item">
-          <h4 className="settings-item-header" dir={oldLang.isRtl ? 'rtl' : undefined}>
+          <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
             {oldLang('NewChatsFromNonContacts')}
           </h4>
           <Checkbox
@@ -432,7 +432,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
       )}
 
       <div className="settings-item">
-        <h4 className="settings-item-header" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
           {oldLang('lng_settings_window_system')}
         </h4>
         <Checkbox
@@ -443,7 +443,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
       </div>
 
       <div className="settings-item">
-        <h4 className="settings-item-header" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
           {lang('DeleteMyAccount')}
         </h4>
         <ListItem

src/components/left/settings/SettingsPrivacyVisibility.tsx

@@ -348,7 +348,7 @@ function PrivacySubsection({
   return (
     <>
       <div className="settings-item">
-        <h4 className="settings-item-header" dir={oldLang.isRtl ? 'rtl' : undefined}>{headerText}</h4>
+        <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>{headerText}</h4>
         <RadioGroup
           name={`visibility-${privacyKey}`}
           options={visibilityOptions}
@@ -356,12 +356,12 @@ function PrivacySubsection({
           selected={privacy?.visibility}
         />
         {descriptionText && (
-          <p className="settings-item-description-larger" dir={oldLang.isRtl ? 'rtl' : undefined}>{descriptionText}</p>
+          <p className="settings-item-description-larger" dir={lang.isRtl ? 'rtl' : undefined}>{descriptionText}</p>
         )}
       </div>
       {!isPremiumRequired && (primaryExceptionLists.shouldShowAllowed || primaryExceptionLists.shouldShowDenied) && (
         <div className="settings-item">
-          <h4 className="settings-item-header" dir={oldLang.isRtl ? 'rtl' : undefined}>
+          <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
             {oldLang('PrivacyExceptions')}
           </h4>
           {primaryExceptionLists.shouldShowAllowed && (

src/components/main/NewContactModal.tsx

@@ -143,7 +143,7 @@ const NewContactModal: FC<OwnProps & StateProps> = ({
   function renderAddContact() {
     return (
       <>
-        <div className="NewContactModal__profile" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <div className="NewContactModal__profile" dir={lang.isRtl ? 'rtl' : undefined}>
           <Avatar
             size="jumbo"
             peer={renderingUser}

src/components/main/premium/PremiumMainModal.tsx

@@ -394,7 +394,7 @@ const PremiumMainModal: FC<OwnProps & StateProps> = ({
     }
 
     return (
-      <div className={styles.footerText} dir={oldLang.isRtl ? 'rtl' : undefined}>
+      <div className={styles.footerText} dir={lang.isRtl ? 'rtl' : undefined}>
         {renderTextWithEntities({
           text: promo.statusText,
           entities: promo.statusEntities,
@@ -473,7 +473,7 @@ const PremiumMainModal: FC<OwnProps & StateProps> = ({
               })}
               <div
                 className={buildClassName(styles.footerText, styles.primaryFooterText)}
-                dir={oldLang.isRtl ? 'rtl' : undefined}
+                dir={lang.isRtl ? 'rtl' : undefined}
               >
                 <p>
                   {renderText(oldLang('AboutPremiumDescription'), ['simple_markdown'])}

src/components/main/premium/PremiumSubscriptionOption.tsx

@@ -7,6 +7,7 @@ import type { ApiPremiumGiftCodeOption, ApiPremiumSubscriptionOption } from '../
 import buildClassName from '../../../util/buildClassName';
 import { formatCurrencyAsString } from '../../../util/formatCurrency';
 
+import useLang from '../../../hooks/useLang';
 import useOldLang from '../../../hooks/useOldLang';
 
 import styles from './PremiumSubscriptionOption.module.scss';
@@ -25,6 +26,7 @@ const PremiumSubscriptionOption: FC<OwnProps> = ({
   onChange, className, isGiveaway,
 }) => {
   const oldLang = useOldLang();
+  const lang = useLang();
 
   const {
     months, amount, currency,
@@ -52,7 +54,7 @@ const PremiumSubscriptionOption: FC<OwnProps> = ({
         (checked && !isGiveaway) && styles.active,
         className,
       )}
-      dir={oldLang.isRtl ? 'rtl' : undefined}
+      dir={lang.isRtl ? 'rtl' : undefined}
     >
       <input
         className={styles.input}

src/components/middle/MiddleColumn.tsx

@@ -602,7 +602,7 @@ function MiddleColumn({
                   />
                 )}
                 {isPinnedMessageList && canUnpin && (
-                  <div className="middle-column-footer-button-container" dir={oldLang.isRtl ? 'rtl' : undefined}>
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
                     <Button
                       size="tiny"
                       fluid
@@ -616,7 +616,7 @@ function MiddleColumn({
                   </div>
                 )}
                 {canShowOpenChatButton && (
-                  <div className="middle-column-footer-button-container" dir={oldLang.isRtl ? 'rtl' : undefined}>
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
                     <Button
                       size="tiny"
                       fluid
@@ -640,7 +640,7 @@ function MiddleColumn({
                 {(
                   isMobile && (renderingCanSubscribe || (renderingShouldJoinToSend && !renderingShouldSendJoinRequest))
                 ) && (
-                  <div className="middle-column-footer-button-container" dir={oldLang.isRtl ? 'rtl' : undefined}>
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
                     <Button
                       size="tiny"
                       fluid
@@ -653,7 +653,7 @@ function MiddleColumn({
                   </div>
                 )}
                 {isMobile && renderingShouldSendJoinRequest && (
-                  <div className="middle-column-footer-button-container" dir={oldLang.isRtl ? 'rtl' : undefined}>
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
                     <Button
                       size="tiny"
                       fluid
@@ -666,7 +666,7 @@ function MiddleColumn({
                   </div>
                 )}
                 {isMobile && renderingCanStartBot && (
-                  <div className="middle-column-footer-button-container" dir={oldLang.isRtl ? 'rtl' : undefined}>
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
                     <Button
                       size="tiny"
                       fluid
@@ -679,7 +679,7 @@ function MiddleColumn({
                   </div>
                 )}
                 {isMobile && renderingCanRestartBot && (
-                  <div className="middle-column-footer-button-container" dir={oldLang.isRtl ? 'rtl' : undefined}>
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
                     <Button
                       size="tiny"
                       fluid
@@ -692,7 +692,7 @@ function MiddleColumn({
                   </div>
                 )}
                 {isMobile && renderingCanUnblock && (
-                  <div className="middle-column-footer-button-container" dir={oldLang.isRtl ? 'rtl' : undefined}>
+                  <div className="middle-column-footer-button-container" dir={lang.isRtl ? 'rtl' : undefined}>
                     <Button
                       size="tiny"
                       fluid

src/components/middle/ReactorListModal.tsx

@@ -150,7 +150,7 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
       onCloseAnimationEnd={handleCloseAnimationEnd}
     >
       {canShowFilters && (
-        <div className="Reactions" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <div className="Reactions" dir={lang.isRtl ? 'rtl' : undefined}>
           <Button
             className={buildClassName(!chosenTab && 'chosen')}
             size="tiny"
@@ -185,7 +185,7 @@ const ReactorListModal: FC<OwnProps & StateProps> = ({
         </div>
       )}
 
-      <div dir={oldLang.isRtl ? 'rtl' : undefined} className="reactor-list-wrapper">
+      <div dir={lang.isRtl ? 'rtl' : undefined} className="reactor-list-wrapper">
         {viewportIds?.length ? (
           <InfiniteScroll
             className="reactor-list custom-scroll"

src/components/middle/composer/AttachmentModal.tsx

@@ -532,7 +532,7 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
     }
 
     return (
-      <div className="modal-header-condensed" dir={oldLang.isRtl ? 'rtl' : undefined}>
+      <div className="modal-header-condensed" dir={lang.isRtl ? 'rtl' : undefined}>
         <Button round color="translucent" size="smaller" ariaLabel="Cancel attachments" onClick={onClear}>
           <Icon name="close" />
         </Button>

src/components/middle/composer/CustomSendMenu.tsx

@@ -154,7 +154,7 @@ const CustomSendMenu: FC<OwnProps> = ({
           'CustomSendMenu_items',
           areItemsHidden && 'CustomSendMenu_items-hidden',
         )}
-        dir={oldLang.isRtl ? 'rtl' : undefined}
+        dir={lang.isRtl ? 'rtl' : undefined}
       >
         {onSendSilent && <MenuItem icon="mute" onClick={onSendSilent}>{oldLang('SendWithoutSound')}</MenuItem>}
         {canSchedule && onSendSchedule && (

src/components/middle/composer/MessageInput.tsx

@@ -34,6 +34,7 @@ import { isSelectionInsideInput } from './helpers/selection';
 import useAppLayout from '../../../hooks/useAppLayout';
 import useDerivedState from '../../../hooks/useDerivedState';
 import useFlag from '../../../hooks/useFlag';
+import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 import useOldLang from '../../../hooks/useOldLang';
 import useInputCustomEmojis from './hooks/useInputCustomEmojis';
@@ -167,6 +168,7 @@ const MessageInput: FC<OwnProps & StateProps> = ({
   const absoluteContainerRef = useRef<HTMLDivElement>();
 
   const oldLang = useOldLang();
+  const lang = useLang();
   const isContextMenuOpenRef = useRef(false);
   const [isTextFormatterOpen, openTextFormatter, closeTextFormatter] = useFlag();
   const [textFormatterAnchorPosition, setTextFormatterAnchorPosition] = useState<IAnchorPosition>();
@@ -572,7 +574,7 @@ const MessageInput: FC<OwnProps & StateProps> = ({
   const placeholderAriaLabel = typeof placeholder === 'string' ? placeholder : undefined;
 
   return (
-    <div id={id} onClick={shouldSuppressFocus ? onSuppressedFocus : undefined} dir={oldLang.isRtl ? 'rtl' : undefined}>
+    <div id={id} onClick={shouldSuppressFocus ? onSuppressedFocus : undefined} dir={lang.isRtl ? 'rtl' : undefined}>
       <div
         className={buildClassName('custom-scroll', SCROLLER_CLASS, isNeedPremium && 'is-need-premium')}
         onScroll={onScroll}

src/components/middle/message/CommentButton.tsx

@@ -79,7 +79,7 @@ const CommentButton: FC<OwnProps> = ({
   function renderRecentRepliers() {
     return (
       Boolean(recentRepliers?.length) && (
-        <div className="recent-repliers" dir={oldLang.isRtl ? 'rtl' : 'ltr'}>
+        <div className="recent-repliers" dir={lang.isRtl ? 'rtl' : 'ltr'}>
           {recentRepliers.map((peer) => (
             <Avatar
               key={peer.id}
@@ -112,7 +112,7 @@ const CommentButton: FC<OwnProps> = ({
         isLoading && 'loading',
         asActionButton && 'as-action-button',
       )}
-      dir={oldLang.isRtl ? 'rtl' : 'ltr'}
+      dir={lang.isRtl ? 'rtl' : 'ltr'}
       onClick={handleClick}
       role="button"
       tabIndex={0}

src/components/middle/message/MessageContextMenu.tsx

@@ -404,7 +404,7 @@ const MessageContextMenu: FC<OwnProps> = ({
           'MessageContextMenu_items scrollable-content custom-scroll',
           areItemsHidden && 'MessageContextMenu_items-hidden',
         )}
-        dir={oldLang.isRtl ? 'rtl' : undefined}
+        dir={lang.isRtl ? 'rtl' : undefined}
       >
         {shouldShowGiftButton
           && (
@@ -504,7 +504,7 @@ const MessageContextMenu: FC<OwnProps> = ({
               disabled={!canShowReactionsCount && !seenByDatesCount}
             >
               <span className="MessageContextMenu--seen-by-label-wrapper">
-                <span className="MessageContextMenu--seen-by-label" dir={oldLang.isRtl ? 'rtl' : undefined}>
+                <span className="MessageContextMenu--seen-by-label" dir={lang.isRtl ? 'rtl' : undefined}>
                   {canShowReactionsCount && message.reactors?.count ? (
                     canShowSeenBy && seenByDatesCount
                       ? oldLang(

src/components/middle/message/WebPage.tsx

@@ -19,7 +19,6 @@ import useDynamicColorListener from '../../../hooks/stickers/useDynamicColorList
 import useEnsureStory from '../../../hooks/useEnsureStory';
 import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
-import useOldLang from '../../../hooks/useOldLang';
 
 import Audio from '../../common/Audio';
 import Document from '../../common/Document';
@@ -98,7 +97,6 @@ const WebPage: FC<OwnProps & StateProps> = ({
   const { openUrl, openTelegramLink } = getActions();
   const stickersRef = useRef<HTMLDivElement>();
 
-  const oldLang = useOldLang();
   const lang = useLang();
 
   const handleMediaClick = useLastCallback(() => {
@@ -191,7 +189,7 @@ const WebPage: FC<OwnProps & StateProps> = ({
     <PeerColorWrapper
       className={className}
       data-initial={(siteName || displayUrl)[0]}
-      dir={oldLang.isRtl ? 'rtl' : 'auto'}
+      dir={lang.isRtl ? 'rtl' : 'auto'}
       onClick={handleContainerClick}
     >
       <div className={buildClassName(

src/components/modals/stars/StarsPaymentModal.tsx

@@ -170,7 +170,7 @@ const StarPaymentModal = ({
       onClose={closeStarsPaymentModal}
     >
       <BalanceBlock balance={starsBalanceState?.balance} className={styles.modalBalance} />
-      <div className={styles.paymentImages} dir={oldLang.isRtl ? 'ltr' : 'rtl'}>
+      <div className={styles.paymentImages} dir={lang.isRtl ? 'ltr' : 'rtl'}>
         {paidMediaMessage ? (
           <PaidMediaThumb media={paidMediaMessage.content.paidMedia!.extendedMedia} />
         ) : inviteCustomPeer ? (

src/components/payment/Checkout.tsx

@@ -159,7 +159,7 @@ const Checkout: FC<OwnProps> = ({
   function renderTos(url: string) {
     return (
       <Checkbox
-        label={renderTosLink(url, oldLang.isRtl)}
+        label={renderTosLink(url, lang.isRtl)}
         name="checkout_tos"
         checked={Boolean(isTosAccepted)}
         className={styles.tosCheckbox}

src/components/payment/PaymentModal.tsx

@@ -561,7 +561,7 @@ const PaymentModal: FC<OwnProps & StateProps> = ({
       onClose={closeModal}
       onCloseAnimationEnd={handleModalClose}
     >
-      <div className="header" dir={oldLang.isRtl ? 'rtl' : undefined}>
+      <div className="header" dir={lang.isRtl ? 'rtl' : undefined}>
         <Button
           className="close-button"
           color="translucent"

src/components/story/StoryRibbon.tsx

@@ -7,7 +7,7 @@ import buildClassName from '../../util/buildClassName';
 
 import { getIsMobile } from '../../hooks/useAppLayout';
 import useHorizontalScroll from '../../hooks/useHorizontalScroll';
-import useOldLang from '../../hooks/useOldLang';
+import useLang from '../../hooks/useLang';
 
 import StoryRibbonButton from './StoryRibbonButton';
 
@@ -33,7 +33,7 @@ function StoryRibbon({
   chatsById,
   isClosing,
 }: OwnProps & StateProps) {
-  const lang = useOldLang();
+  const lang = useLang();
   const fullClassName = buildClassName(
     styles.root,
     !orderedPeerIds.length && styles.hidden,

src/components/story/StoryToggler.module.scss

@@ -26,11 +26,17 @@
 }
 
 .avatar {
+  --_gradient-rotation: 90deg;
+
   z-index: 1;
 
+  :dir(rtl) & {
+    --_gradient-rotation: -90deg;
+  }
+
   &:not(:first-child):before {
     mask-composite: exclude;
-    mask-image: linear-gradient(90deg, #fff 75%, transparent 0);
+    mask-image: linear-gradient(var(--_gradient-rotation), #fff 75%, transparent 0);
   }
 
   &:global(.animating) {

src/components/story/StoryToggler.tsx

@@ -10,7 +10,7 @@ import { ANIMATION_END_DELAY, PREVIEW_AVATAR_COUNT } from '../../config';
 import { selectIsForumPanelOpen, selectPerformanceSettingsValue, selectTabState } from '../../global/selectors';
 import { animateClosing, animateOpening, ANIMATION_DURATION } from './helpers/ribbonAnimation';
 
-import useOldLang from '../../hooks/useOldLang';
+import useLang from '../../hooks/useLang';
 import useShowTransition from '../../hooks/useShowTransition';
 import useStoryPreloader from './hooks/useStoryPreloader';
 
@@ -50,7 +50,7 @@ function StoryToggler({
 }: OwnProps & StateProps) {
   const { toggleStoryRibbon } = getActions();
 
-  const lang = useOldLang();
+  const lang = useLang();
 
   const peers = useMemo(() => {
     if (orderedPeerIds.length === 1) {
@@ -117,7 +117,7 @@ function StoryToggler({
       type="button"
       id="StoryToggler"
       className={styles.root}
-      aria-label={lang('Chat.Context.Peer.OpenStory')}
+      aria-label={lang('AriaStoryTogglerOpen')}
       onClick={() => toggleStoryRibbon({ isShown: true, isArchived })}
       dir={lang.isRtl ? 'rtl' : undefined}
     >

src/components/ui/Checkbox.scss

@@ -168,8 +168,8 @@
       grid-row: span 2;
       align-self: center;
 
-      margin-right: 0.5rem;
+      margin-inline-start: auto;
-      margin-left: auto;
+      margin-inline-end: 0.5rem;
 
       font-size: 1.25rem;
       color: var(--color-text-secondary);

src/components/ui/Checkbox.tsx

@@ -16,8 +16,8 @@ import { REM } from '../common/helpers/mediaDimensions';
 import renderText from '../common/helpers/renderText';
 
 import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
+import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
-import useOldLang from '../../hooks/useOldLang';
 
 import Avatar from '../common/Avatar';
 import Icon from '../common/icons/Icon';
@@ -85,7 +85,7 @@ const Checkbox: FC<OwnProps> = ({
   onCheck,
   onClickLabel,
 }) => {
-  const lang = useOldLang();
+  const lang = useLang();
   const labelRef = useRef<HTMLLabelElement>();
   const [showNested, setShowNested] = useState(false);
   const renderingUser = useCurrentOrPrev(user, true);

src/components/ui/InputText.tsx

@@ -7,7 +7,7 @@ import { memo } from '../../lib/teact/teact';
 import { IS_TAURI } from '../../util/browser/globalEnvironment';
 import buildClassName from '../../util/buildClassName';
 
-import useOldLang from '../../hooks/useOldLang';
+import useLang from '../../hooks/useLang';
 
 type OwnProps = {
   ref?: ElementRef<HTMLInputElement>;
@@ -56,7 +56,7 @@ const InputText: FC<OwnProps> = ({
   onBlur,
   onPaste,
 }) => {
-  const lang = useOldLang();
+  const lang = useLang();
   const labelText = error || success || label;
   const fullClassName = buildClassName(
     'input-group',

src/components/ui/ListItem.scss

@@ -90,7 +90,7 @@
     }
 
     > .ListItem-main-icon {
-      margin-right: 1.75rem;
+      margin-inline-end: 1.75rem;
       font-size: 1.5rem;
       color: var(--color-text-secondary);
     }
@@ -234,7 +234,7 @@
     }
 
     .Avatar {
-      margin-right: 0.5rem;
+      margin-inline-end: 0.5rem;
     }
 
     .info {
@@ -368,15 +368,6 @@
     }
 
     &[dir="rtl"] {
-      .ListItem-button {
-        padding: 0.5625rem 0.5625rem 0.5625rem 0.6875rem;
-      }
-
-      .Avatar {
-        margin-right: 0;
-        margin-left: 0.5rem;
-      }
-
       .info > .status {
         width: 100%;
       }

src/components/ui/ListItem.tsx

@@ -12,8 +12,8 @@ import renderText from '../common/helpers/renderText';
 import useContextMenuHandlers from '../../hooks/useContextMenuHandlers';
 import { useFastClick } from '../../hooks/useFastClick';
 import useFlag from '../../hooks/useFlag';
+import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
-import useOldLang from '../../hooks/useOldLang';
 
 import Icon from '../common/icons/Icon';
 import Button from './Button';
@@ -201,7 +201,7 @@ const ListItem = ({
     }
   });
 
-  const lang = useOldLang();
+  const lang = useLang();
 
   const fullClassName = buildClassName(
     'ListItem',

src/components/ui/MenuItem.tsx

@@ -1,5 +1,4 @@
 import type { FC } from '../../lib/teact/teact';
-import type React from '../../lib/teact/teact';
 
 import type { IconName } from '../../types/icons';
 
@@ -7,8 +6,8 @@ import { IS_TEST } from '../../config';
 import buildClassName from '../../util/buildClassName';
 
 import useAppLayout from '../../hooks/useAppLayout';
+import useLang from '../../hooks/useLang';
 import useLastCallback from '../../hooks/useLastCallback';
-import useOldLang from '../../hooks/useOldLang';
 
 import Icon from '../common/icons/Icon';
 
@@ -59,7 +58,7 @@ const MenuItem: FC<MenuItemProps> = (props) => {
     withPreventDefaultOnMouseDown,
   } = props;
 
-  const lang = useOldLang();
+  const lang = useLang();
   const { isTouchScreen } = useAppLayout();
   const handleClick = useLastCallback((e: React.MouseEvent<HTMLDivElement>) => {
     if (disabled || !onClick) {

src/components/ui/Radio.tsx

@@ -4,7 +4,7 @@ import { memo } from '../../lib/teact/teact';
 
 import buildClassName from '../../util/buildClassName';
 
-import useOldLang from '../../hooks/useOldLang';
+import useLang from '../../hooks/useLang';
 
 import Spinner from './Spinner';
 
@@ -49,7 +49,7 @@ const Radio: FC<OwnProps> = ({
   onSubLabelClick,
   isCanCheckedInDisabled,
 }) => {
-  const lang = useOldLang();
+  const lang = useLang();
 
   const fullClassName = buildClassName(
     'Radio',

src/components/ui/RangeSlider.tsx

@@ -4,7 +4,7 @@ import { memo, useCallback, useMemo } from '../../lib/teact/teact';
 
 import buildClassName from '../../util/buildClassName';
 
-import useOldLang from '../../hooks/useOldLang';
+import useLang from '../../hooks/useLang';
 
 import './RangeSlider.scss';
 
@@ -39,7 +39,7 @@ const RangeSlider: FC<OwnProps> = ({
   onChange,
   isCenteredLayout,
 }) => {
-  const lang = useOldLang();
+  const lang = useLang();
   const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     onChange(Number(event.currentTarget.value));
   }, [onChange]);

src/components/ui/SearchInput.tsx

@@ -158,7 +158,7 @@ const SearchInput: FC<OwnProps> = ({
     <div
       className={buildClassName('SearchInput', className, isInputFocused && 'has-focus')}
       onClick={onClick}
-      dir={oldLang.isRtl ? 'rtl' : undefined}
+      dir={lang.isRtl ? 'rtl' : undefined}
     >
       <Transition
         name="fade"

src/components/ui/TabList.tsx

@@ -8,7 +8,7 @@ import { IS_ANDROID, IS_IOS } from '../../util/browser/windowEnvironment';
 import buildClassName from '../../util/buildClassName';
 
 import useHorizontalScroll from '../../hooks/useHorizontalScroll';
-import useOldLang from '../../hooks/useOldLang';
+import useLang from '../../hooks/useLang';
 import usePreviousDeprecated from '../../hooks/usePreviousDeprecated';
 
 import Tab from './Tab';
@@ -29,8 +29,8 @@ type OwnProps = {
   activeTab: number;
   className?: string;
   tabClassName?: string;
-  onSwitchTab: (index: number) => void;
   contextRootElementSelector?: string;
+  onSwitchTab: (index: number) => void;
 };
 
 const TAB_SCROLL_THRESHOLD_PX = 16;
@@ -48,6 +48,8 @@ const TabList = ({
   const containerRef = useRef<HTMLDivElement>();
   const previousActiveTab = usePreviousDeprecated(activeTab);
 
+  const lang = useLang();
+
   useHorizontalScroll(containerRef, undefined, true);
 
   // Scroll container to place active tab in the center
@@ -74,8 +76,6 @@ const TabList = ({
     animateHorizontalScroll(container, newLeft, SCROLL_DURATION);
   }, [activeTab]);
 
-  const lang = useOldLang();
-
   return (
     <div
       className={buildClassName('TabList', 'no-scrollbar', className)}

src/types/language.d.ts

@@ -1728,6 +1728,7 @@ export interface LangPair {
   'UserNoteTitle': undefined;
   'UserNoteHint': undefined;
   'EditUserNoteHint': undefined;
+  'AriaStoryTogglerOpen': undefined;
 }
 
 export interface LangPairWithVariables<V = LangVariable> {