Redesign: Follow Up (#6966)

src/components/common/PrivateChatInfo.tsx

@@ -59,6 +59,7 @@ type BaseOwnProps = {
   noVerified?: boolean;
   emojiStatusSize?: number;
   noStatusOrTyping?: boolean;
+  noUserStatus?: boolean;
   noRtl?: boolean;
   chatMemberOriginId?: string;
   chatMember?: ApiChatMember;
@@ -109,6 +110,7 @@ const PrivateChatInfo = ({
   withUpdatingStatus,
   emojiStatusSize,
   noStatusOrTyping,
+  noUserStatus,
   noEmojiStatus,
   noFake,
   noVerified,
@@ -231,10 +233,10 @@ const PrivateChatInfo = ({
       return undefined;
     }
 
-    const translatedStatus = getUserStatus(oldLang, user, userStatus);
+    const translatedStatus = noUserStatus ? undefined : getUserStatus(oldLang, user, userStatus);
     const mainUserNameClassName = buildClassName('handle', translatedStatus && 'withStatus');
     return (
-      <span className={buildClassName('status', isUserOnline(user, userStatus, true) && 'online')}>
+      <span className={buildClassName('status', !noUserStatus && isUserOnline(user, userStatus, true) && 'online')}>
         {mainUsername && <span className={mainUserNameClassName}>{mainUsername}</span>}
         {translatedStatus && <span className="user-status" dir="auto">{translatedStatus}</span>}
       </span>

src/components/gili/primitives/Switch.tsx

@@ -54,6 +54,7 @@ const Switch = ({
   return (
     <span
       className={buildClassName(
+        'Switch',
         styles.root,
         isDisabled && styles.disabled,
         locked && styles.locked,

src/components/left/settings/Settings.scss

@@ -3,6 +3,21 @@
 #Settings {
   height: 100%;
 
+  .multiline-item .title-with-date {
+    display: flex;
+    justify-content: space-between;
+
+    .date {
+      flex-shrink: 0;
+
+      margin-inline-start: 1rem;
+
+      font-size: 0.75rem;
+      font-weight: normal;
+      color: var(--color-text-secondary);
+    }
+  }
+
   .chat-list {
     padding-bottom: 0;
 
@@ -228,13 +243,6 @@
       .subtitle.tight {
         line-height: 1rem;
       }
-
-      .date {
-        float: right;
-        margin-left: 1rem;
-        font-size: 0.75rem;
-        color: var(--color-text-secondary);
-      }
     }
 
     &.destructive {
@@ -247,14 +255,6 @@
       }
     }
 
-    &[dir="rtl"] {
-      .multiline-item .date {
-        float: left;
-        margin-right: 1rem;
-        margin-left: 0;
-      }
-    }
-
     & + .settings-item-description {
       margin-top: 0.5rem;
     }

src/components/left/settings/SettingsAcceptedGift.tsx

@@ -9,8 +9,8 @@ import useLang from '../../../hooks/useLang';
 import useLastCallback from '../../../hooks/useLastCallback';
 
 import Island, { IslandDescription, IslandTitle } from '../../gili/layout/Island';
+import Switch from '../../gili/primitives/Switch';
 import ListItem from '../../ui/ListItem';
-import Switcher from '../../ui/Switcher';
 
 type StateProps = {
   disallowedGifts?: ApiDisallowedGiftsSettings;
@@ -97,40 +97,32 @@ const SettingsAcceptedGift = ({
       <Island>
         <ListItem onClick={handleLimitedEditionChange}>
           <span>{lang('PrivacyGiftLimitedEdition')}</span>
-          <Switcher
+          <Switch
             id="limited_edition"
-            label={disallowedGifts?.shouldDisallowLimitedStarGifts ? lang('PrivacyDisableLimitedEditionStarGifts')
-              : lang('PrivacyEnableLimitedEditionStarGifts')}
             disabled={!isCurrentUserPremium}
             checked={!isCurrentUserPremium ? true : !disallowedGifts?.shouldDisallowLimitedStarGifts}
           />
         </ListItem>
         <ListItem onClick={handleUnlimitedEditionChange}>
           <span>{lang('PrivacyGiftUnlimited')}</span>
-          <Switcher
+          <Switch
             id="unlimited"
-            label={disallowedGifts?.shouldDisallowUnlimitedStarGifts ? lang('PrivacyDisableUnlimitedStarGifts')
-              : lang('PrivacyEnableUnlimitedStarGifts')}
             disabled={!isCurrentUserPremium}
             checked={!isCurrentUserPremium ? true : !disallowedGifts?.shouldDisallowUnlimitedStarGifts}
           />
         </ListItem>
         <ListItem onClick={handleUniqueChange}>
           <span>{lang('PrivacyGiftUnique')}</span>
-          <Switcher
+          <Switch
             id="unique"
-            label={disallowedGifts?.shouldDisallowUniqueStarGifts ? lang('PrivacyDisableUniqueStarGifts')
-              : lang('PrivacyEnableUniqueStarGifts')}
             disabled={!isCurrentUserPremium}
             checked={!isCurrentUserPremium ? true : !disallowedGifts?.shouldDisallowUniqueStarGifts}
           />
         </ListItem>
         <ListItem onClick={handlePremiumSubscriptionChange}>
           <span>{lang('PrivacyGiftPremiumSubscription')}</span>
-          <Switcher
+          <Switch
             id="premium_subscription"
-            label={disallowedGifts?.shouldDisallowPremiumGifts ? lang('PrivacyDisablePremiumGifts')
-              : lang('PrivacyEnablePremiumGifts')}
             disabled={!isCurrentUserPremium}
             checked={!isCurrentUserPremium ? true : !disallowedGifts?.shouldDisallowPremiumGifts}
           />

src/components/left/settings/SettingsActiveSession.tsx

@@ -11,10 +11,10 @@ import getSessionIcon from './helpers/getSessionIcon';
 import useCurrentOrPrev from '../../../hooks/useCurrentOrPrev';
 import useLang from '../../../hooks/useLang';
 
+import Switch from '../../gili/primitives/Switch';
 import Button from '../../ui/Button';
 import ListItem from '../../ui/ListItem';
 import Modal from '../../ui/Modal';
-import Switcher from '../../ui/Switcher';
 
 import styles from './SettingsActiveSession.module.scss';
 
@@ -128,17 +128,15 @@ const SettingsActiveSession: FC<OwnProps & StateProps> = ({
 
       <ListItem onClick={handleSecretChatsStateChange}>
         <span className={styles.actionName}>{lang('SessionPreviewAcceptSecret')}</span>
-        <Switcher
+        <Switch
           id="accept_secrets"
-          label="On"
           checked={renderingSession.areSecretChatsEnabled}
         />
       </ListItem>
       <ListItem onClick={handleCallsStateChange}>
         <span className={styles.actionName}>{lang('SessionPreviewAcceptCalls')}</span>
-        <Switcher
+        <Switch
           id="accept_calls"
-          label="On"
           checked={renderingSession.areCallsEnabled}
         />
       </ListItem>

src/components/left/settings/SettingsActiveSessions.tsx

@@ -239,8 +239,10 @@ const SettingsActiveSessions: FC<OwnProps & StateProps> = ({
         onClick={() => { handleOpenSessionModal(session.hash); }}
       >
         <div className="multiline-item full-size" dir="auto">
-          <span className="date">{formatPastTimeShort(oldLang, session.dateActive * 1000)}</span>
+          <span className="title title-with-date">
-          <span className="title">{session.deviceModel}</span>
+            {session.deviceModel}
+            <span className="date">{formatPastTimeShort(oldLang, session.dateActive * 1000)}</span>
+          </span>
           <span className="subtitle black tight">
             {session.appName}
             {' '}

src/components/left/settings/SettingsActiveWebsites.tsx

@@ -114,8 +114,10 @@ const SettingsActiveWebsites: FC<OwnProps & StateProps> = ({
       >
         <Avatar className={styles.avatar} peer={bot} size="tiny" />
         <div className="multiline-item full-size" dir="auto">
-          <span className="date">{formatPastTimeShort(lang, session.dateActive * 1000)}</span>
+          <div className="title title-with-date">
-          {bot && <FullNameTitle className={styles.title} peer={bot} />}
+            {bot && <FullNameTitle className={styles.title} peer={bot} />}
+            <span className="date">{formatPastTimeShort(lang, session.dateActive * 1000)}</span>
+          </div>
           <span className={buildClassName('subtitle', 'black', 'tight', styles.platform)}>
             {session.domain}
             ,

src/components/left/settings/SettingsPasskeys.tsx

@@ -112,8 +112,10 @@ const SettingsPasskeys = ({
         )}
       >
         <div className="multiline-item full-size" dir="auto">
-          <span className="date">{formatDate(lang, secondsToDate(date))}</span>
+          <span className="title title-with-date">
-          <span className="title">{name || lang('SettingsPasskeyFallbackTitle')}</span>
+            {name || lang('SettingsPasskeyFallbackTitle')}
+            <span className="date">{formatDate(lang, secondsToDate(date))}</span>
+          </span>
           {Boolean(lastUsageDate) && (
             <span className="subtitle">
               {lang('SettingsPasskeyUsedAt', {

src/components/left/settings/SettingsPrivacyVisibility.tsx

@@ -15,9 +15,9 @@ import useOldLang from '../../../hooks/useOldLang';
 
 import Icon from '../../common/icons/Icon';
 import Island, { IslandDescription, IslandTitle } from '../../gili/layout/Island';
+import Switch from '../../gili/primitives/Switch';
 import ListItem from '../../ui/ListItem';
 import RadioGroup from '../../ui/RadioGroup';
-import Switcher from '../../ui/Switcher';
 import PremiumStatusItem from './PremiumStatusItem';
 import PrivacyLockedOption from './PrivacyLockedOption';
 import SettingsAcceptedGift from './SettingsAcceptedGift';
@@ -100,11 +100,10 @@ const SettingsPrivacyVisibility: FC<OwnProps & StateProps> = ({
           <Island>
             <ListItem onClick={handleShowGiftIconInChats}>
               <span>{lang('PrivacyDisplayGiftsButton')}</span>
-              <Switcher
+              <Switch
                 id="gift"
                 disabled={!isCurrentUserPremium}
-                label={shouldDisplayGiftsButton ? lang('HideGiftsButton') : lang('DisplayGiftsButton')}
+                checked={Boolean(shouldDisplayGiftsButton)}
-                checked={shouldDisplayGiftsButton}
               />
             </ListItem>
           </Island>

src/components/middle/composer/MentionTooltip.scss

@@ -2,7 +2,7 @@
   z-index: -1;
   flex-direction: column;
   width: calc(100% - 4rem);
-  max-width: 20rem;
+  max-width: 25rem;
 
   .ListItem.chat-item-clickable {
     margin: 0;

src/components/middle/composer/MentionTooltip.tsx

@@ -107,6 +107,7 @@ const MentionTooltip: FC<OwnProps> = ({
             userId={id}
             avatarSize="small"
             withUsername
+            noUserStatus
           />
         </ListItem>
       ))}

src/components/right/RightColumn.tsx

@@ -164,6 +164,12 @@ const RightColumn: FC<OwnProps & StateProps> = ({
   });
 
   const [isAnimating, startAnimating, stopAnimating] = useFlag();
+  const wasOpenRef = useRef(false);
+  const shouldSkipOpenTransition = isOpen && !wasOpenRef.current;
+
+  useLayoutEffect(() => {
+    wasOpenRef.current = isOpen;
+  }, [isOpen]);
 
   useLayoutEffect(() => {
     const elements = containerRef.current?.querySelectorAll<HTMLElement>(
@@ -437,7 +443,9 @@ const RightColumn: FC<OwnProps & StateProps> = ({
         />
         <Transition
           ref={containerRef}
-          name={resolveTransitionName('layers', animationLevel, !isOpen || shouldSkipHistoryAnimations)}
+          name={resolveTransitionName(
+            'layers', animationLevel, !isOpen || shouldSkipOpenTransition || shouldSkipHistoryAnimations,
+          )}
           renderCount={MAIN_SCREENS_COUNT + MANAGEMENT_SCREENS_COUNT}
           activeKey={isManagement ? MAIN_SCREENS_COUNT + managementScreen : renderingContentKey}
           shouldCleanup

src/components/right/management/ManageChannel.tsx

@@ -22,12 +22,12 @@ import useMedia from '../../../hooks/useMedia';
 import useOldLang from '../../../hooks/useOldLang';
 
 import Island from '../../gili/layout/Island';
+import Switch from '../../gili/primitives/Switch';
 import AvatarEditable from '../../ui/AvatarEditable';
 import ConfirmDialog from '../../ui/ConfirmDialog';
 import FloatingActionButton from '../../ui/FloatingActionButton';
 import InputText from '../../ui/InputText';
 import ListItem from '../../ui/ListItem';
-import Switcher from '../../ui/Switcher';
 import TextArea from '../../ui/TextArea';
 
 import './Management.scss';
@@ -312,10 +312,9 @@ const ManageChannel: FC<OwnProps & StateProps> = ({
               onClick={handleAutoTranslationChange}
             >
               <span>{lang('AutomaticTranslation')}</span>
-              <Switcher
+              <Switch
                 id="auto-translation"
-                label={lang('AutomaticTranslation')}
+                checked={Boolean(hasAutoTranslation)}
-                checked={hasAutoTranslation}
               />
             </ListItem>
           )}

src/components/right/management/ManageGroup.tsx

@@ -29,13 +29,13 @@ import useMedia from '../../../hooks/useMedia';
 import useOldLang from '../../../hooks/useOldLang';
 
 import Island, { IslandDescription } from '../../gili/layout/Island';
+import Switch from '../../gili/primitives/Switch';
 import AvatarEditable from '../../ui/AvatarEditable';
 import Checkbox from '../../ui/Checkbox';
 import ConfirmDialog from '../../ui/ConfirmDialog';
 import FloatingActionButton from '../../ui/FloatingActionButton';
 import InputText from '../../ui/InputText';
 import ListItem from '../../ui/ListItem';
-import Switcher from '../../ui/Switcher';
 import TextArea from '../../ui/TextArea';
 
 import './Management.scss';
@@ -425,11 +425,9 @@ const ManageGroup: FC<OwnProps & StateProps> = ({
             <>
               <ListItem icon="forums" ripple onClick={handleForumToggle}>
                 <span>{lang('ChannelTopics')}</span>
-                <Switcher
+                <Switch
                   id="group-notifications"
-                  label={lang('ChannelTopics')}
+                  checked={Boolean(isForumEnabled)}
-                  checked={isForumEnabled}
-                  inactive
                 />
               </ListItem>
               <IslandDescription>{lang('ForumToggleDescription')}</IslandDescription>

src/components/right/management/ManageGroupMembers.tsx

@@ -28,12 +28,12 @@ import useOldLang from '../../../hooks/useOldLang';
 import NothingFound from '../../common/NothingFound';
 import PrivateChatInfo from '../../common/PrivateChatInfo';
 import Island, { IslandDescription } from '../../gili/layout/Island';
+import Switch from '../../gili/primitives/Switch';
 import FloatingActionButton from '../../ui/FloatingActionButton';
 import InfiniteScroll from '../../ui/InfiniteScroll';
 import InputText from '../../ui/InputText';
 import ListItem, { type MenuItemContextAction } from '../../ui/ListItem';
 import Loading from '../../ui/Loading';
-import Switcher from '../../ui/Switcher';
 import DeleteMemberModal from '../DeleteMemberModal';
 
 type OwnProps = {
@@ -216,7 +216,7 @@ const ManageGroupMembers: FC<OwnProps & StateProps> = ({
             <Island>
               <ListItem icon="group" ripple onClick={handleToggleParticipantsHidden}>
                 <span>{oldLang('ChannelHideMembers')}</span>
-                <Switcher label={oldLang('ChannelHideMembers')} checked={areParticipantsHidden} />
+                <Switch checked={Boolean(areParticipantsHidden)} />
               </ListItem>
             </Island>
             <IslandDescription>

src/components/right/management/ManageGroupPermissions.tsx

@@ -28,10 +28,10 @@ import useManagePermissions from '../hooks/useManagePermissions';
 import PaidMessagePrice from '../../common/paidMessage/PaidMessagePrice';
 import PrivateChatInfo from '../../common/PrivateChatInfo';
 import Island, { IslandDescription, IslandTitle } from '../../gili/layout/Island';
+import Switch from '../../gili/primitives/Switch';
 import PermissionCheckboxList from '../../main/PermissionCheckboxList';
 import FloatingActionButton from '../../ui/FloatingActionButton';
 import ListItem from '../../ui/ListItem';
-import Switcher from '../../ui/Switcher';
 
 type OwnProps = {
   chatId: string;
@@ -251,10 +251,9 @@ const ManageGroupPermissions: FC<OwnProps & StateProps> = ({
           <Island>
             <ListItem onClick={handleChargeStarsForMessages}>
               <span>{lang('GroupMessagesChargePrice')}</span>
-              <Switcher
+              <Switch
                 id="charge_for_messages"
-                label={lang('GroupMessagesChargePrice')}
+                checked={Boolean(isPriceForMessagesOpen)}
-                checked={isPriceForMessagesOpen}
               />
             </ListItem>
           </Island>

src/components/right/management/Management.scss

@@ -67,7 +67,7 @@
   }
 
   .invite-link {
-    padding: 0 1rem;
+    padding: 0;
   }
 
   .input-admin-title {
@@ -205,7 +205,6 @@
 .ManageInvite {
   .link-name {
     margin-bottom: 1rem;
-    padding: 0 1rem;
   }
 
   .expire-limit {
@@ -326,6 +325,6 @@
 }
 
 .settings-edit {
-  padding: 1.125rem !important;
+  padding: 0.125rem;
   padding-bottom: 0 !important;
 }

src/components/ui/ListItem.scss

@@ -95,7 +95,8 @@
       color: var(--color-text-secondary);
     }
 
-    > .Switcher {
+    > .Switcher,
+    > .Switch {
       margin-inline-start: auto;
     }