Redesign: Follow Up (#6966)

2026-06-01 01:16:15 +02:00 · 2026-06-01 01:16:15 +02:00 · d82240b06c
commit d82240b06c
parent 8edd3fe4ba
18 changed files with 69 additions and 66 deletions
--- a/src/components/common/PrivateChatInfo.tsx
+++ b/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>
--- a/src/components/gili/primitives/Switch.tsx
+++ b/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,
--- a/src/components/left/settings/Settings.scss
+++ b/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;
    }
--- a/src/components/left/settings/SettingsAcceptedGift.tsx
+++ b/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}
          />
--- a/src/components/left/settings/SettingsActiveSession.tsx
+++ b/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>
--- a/src/components/left/settings/SettingsActiveSessions.tsx
+++ b/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">{session.deviceModel}</span>
+          <span className="title title-with-date">
+            {session.deviceModel}
+            <span className="date">{formatPastTimeShort(oldLang, session.dateActive * 1000)}</span>
+          </span>
          <span className="subtitle black tight">
            {session.appName}
            {' '}
--- a/src/components/left/settings/SettingsActiveWebsites.tsx
+++ b/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>
-          {bot && <FullNameTitle className={styles.title} peer={bot} />}
+          <div className="title title-with-date">
+            {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}
            ,
--- a/src/components/left/settings/SettingsPasskeys.tsx
+++ b/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">{name || lang('SettingsPasskeyFallbackTitle')}</span>
+          <span className="title title-with-date">
+            {name || lang('SettingsPasskeyFallbackTitle')}
+            <span className="date">{formatDate(lang, secondsToDate(date))}</span>
+          </span>
          {Boolean(lastUsageDate) && (
            <span className="subtitle">
              {lang('SettingsPasskeyUsedAt', {
--- a/src/components/left/settings/SettingsPrivacyVisibility.tsx
+++ b/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={shouldDisplayGiftsButton}
+                checked={Boolean(shouldDisplayGiftsButton)}
              />
            </ListItem>
          </Island>
--- a/src/components/middle/composer/MentionTooltip.scss
+++ b/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;
--- a/src/components/middle/composer/MentionTooltip.tsx
+++ b/src/components/middle/composer/MentionTooltip.tsx
@ -107,6 +107,7 @@ const MentionTooltip: FC<OwnProps> = ({
            userId={id}
            avatarSize="small"
            withUsername
+            noUserStatus
          />
        </ListItem>
      ))}
--- a/src/components/right/RightColumn.tsx
+++ b/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
--- a/src/components/right/management/ManageChannel.tsx
+++ b/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={hasAutoTranslation}
+                checked={Boolean(hasAutoTranslation)}
              />
            </ListItem>
          )}
--- a/src/components/right/management/ManageGroup.tsx
+++ b/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={isForumEnabled}
-                  inactive
+                  checked={Boolean(isForumEnabled)}
                />
              </ListItem>
              <IslandDescription>{lang('ForumToggleDescription')}</IslandDescription>
--- a/src/components/right/management/ManageGroupMembers.tsx
+++ b/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>
--- a/src/components/right/management/ManageGroupPermissions.tsx
+++ b/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={isPriceForMessagesOpen}
+                checked={Boolean(isPriceForMessagesOpen)}
              />
            </ListItem>
          </Island>
--- a/src/components/right/management/Management.scss
+++ b/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;
 }
--- a/src/components/ui/ListItem.scss
+++ b/src/components/ui/ListItem.scss
@ -95,7 +95,8 @@
      color: var(--color-text-secondary);
    }

-    > .Switcher {
+    > .Switcher,
+    > .Switch {
      margin-inline-start: auto;
    }