Picker Refactoring: Follow-up (#4884)

src/api/gramjs/methods/client.ts

@@ -337,6 +337,11 @@ export async function downloadMedia(
       }
     }
 
+    if (DEBUG) {
+      // eslint-disable-next-line no-console
+      console.error('Failed to download media', args.url, err);
+    }
+
     throw err;
   }
 }

src/components/common/pickers/ItemPicker.tsx

@@ -100,12 +100,16 @@ const ItemPicker = ({
   const lockedUnselectedValues = allowMultiple ? optionalProps.lockedUnselectedValues : undefined;
 
   useEffect(() => {
-    if (!isSearchable) return;
+    if (!isSearchable) return undefined;
-    setTimeout(() => {
+    const timeoutId = window.setTimeout(() => {
       requestMeasure(() => {
-        inputRef.current!.focus();
+        inputRef.current?.focus();
       });
     }, FOCUS_DELAY_MS);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
   }, [isSearchable]);
 
   const selectedValues = useMemo(() => {

src/components/common/pickers/PeerPicker.tsx

@@ -138,12 +138,16 @@ const PeerPicker = ({
   const shouldMinimize = selectedIds.length > MAX_FULL_ITEMS;
 
   useEffect(() => {
-    if (!isSearchable) return;
+    if (!isSearchable) return undefined;
-    setTimeout(() => {
+    const timeoutId = window.setTimeout(() => {
       requestMeasure(() => {
-        inputRef.current!.focus();
+        inputRef.current?.focus();
       });
     }, FOCUS_DELAY_MS);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
   }, [isSearchable]);
 
   const lockedSelectedIdsSet = useMemo(() => new Set(lockedSelectedIds), [lockedSelectedIds]);

src/components/common/profile/ChatExtra.tsx

@@ -352,7 +352,7 @@ const ChatExtra: FC<OwnProps & StateProps> = ({
         <UserBirthday key={peerId} birthday={birthday} user={user!} isInSettings={isInSettings} />
       )}
       {!isInSettings && (
-        <ListItem icon="unmute" ripple onClick={handleNotificationChange}>
+        <ListItem icon="unmute" narrow ripple onClick={handleNotificationChange}>
           <span>{lang('Notifications')}</span>
           <Switcher
             id="group-notifications"
@@ -379,7 +379,7 @@ const ChatExtra: FC<OwnProps & StateProps> = ({
         </ListItem>
       )}
       {hasSavedMessages && !isInSettings && (
-        <ListItem icon="saved-messages" ripple onClick={handleOpenSavedDialog}>
+        <ListItem icon="saved-messages" narrow ripple onClick={handleOpenSavedDialog}>
           <span>{lang('SavedMessagesTab')}</span>
         </ListItem>
       )}

src/components/left/settings/PremiumStatusItem.tsx

@@ -21,8 +21,7 @@ function PremiumStatusItem({ premiumSection }: OwnProps) {
   return (
     <div className="settings-item">
       <ListItem
-        leftElement={<StarIcon className="icon" type="premium" size="big" />}
+        leftElement={<StarIcon className="icon ListItem-main-icon" type="premium" size="big" />}
-        className="settings-main-menu-star"
         onClick={handleOpenPremiumModal}
       >
         {lang('PrivacyLastSeenPremium')}

src/components/left/settings/Settings.scss

@@ -119,7 +119,7 @@
     }
   }
 
-  .ListItem.narrow {
+  .ListItem.narrow:not(.multiline) {
     margin-bottom: 0;
 
     .ListItem-button {
@@ -187,8 +187,9 @@
     font-size: 1rem;
     line-height: 1.3125rem;
     color: var(--color-text-secondary);
-    margin-top: 2rem;
+    margin-top: 1rem;
     margin-bottom: 0.75rem;
+    padding-inline-start: 1rem;
 
     &.premium-info {
       margin-top: 1rem;

src/components/left/settings/SettingsActiveSessions.tsx

@@ -193,7 +193,7 @@ const SettingsActiveSessions: FC<OwnProps & StateProps> = ({
           {lang('TerminateOldSessionHeader')}
         </h4>
 
-        <p>{lang('IfInactiveFor')}</p>
+        <p className="settings-item-description-larger">{lang('IfInactiveFor')}</p>
         <RadioGroup
           name="session_ttl"
           options={AUTO_TERMINATE_OPTIONS}

src/components/left/settings/SettingsMain.tsx

@@ -172,7 +172,6 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
         {canBuyPremium && (
           <ListItem
             leftElement={<StarIcon className="icon ListItem-main-icon" type="premium" size="big" />}
-            className="settings-main-menu-star"
             narrow
             // eslint-disable-next-line react/jsx-no-bind
             onClick={() => openPremiumModal()}
@@ -183,7 +182,6 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
         {shouldDisplayStars && (
           <ListItem
             leftElement={<StarIcon className="icon ListItem-main-icon" type="gold" size="big" />}
-            className="settings-main-menu-star"
             narrow
             // eslint-disable-next-line react/jsx-no-bind
             onClick={() => openStarsBalanceModal({})}
@@ -197,7 +195,6 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
         {isGiveawayAvailable && (
           <ListItem
             icon="gift"
-            className="settings-main-menu-star"
             narrow
             // eslint-disable-next-line react/jsx-no-bind
             onClick={() => openPremiumGiftingModal()}

src/components/left/settings/SettingsPrivacyLastSeen.tsx

@@ -55,8 +55,7 @@ const SettingsPrivacyLastSeen = ({
       )}
       <div className="settings-item">
         <ListItem
-          leftElement={<StarIcon className="icon" type="premium" size="big" />}
+          leftElement={<StarIcon className="icon ListItem-main-icon" type="premium" size="big" />}
-          className="settings-main-menu-star"
           onClick={handleOpenPremiumModal}
         >
           {isCurrentUserPremium ? lang('PrivacyLastSeenPremiumForPremium') : lang('PrivacyLastSeenPremium')}

src/components/left/settings/SettingsPrivacyPublicProfilePhoto.tsx

@@ -66,6 +66,7 @@ const SettingsPrivacyPublicProfilePhoto: FC<OwnProps> = ({
   return (
     <div className="settings-item">
       <ListItem
+        narrow
         icon="camera-add"
         onClick={handleOpenFileSelector}
       >
@@ -79,6 +80,7 @@ const SettingsPrivacyPublicProfilePhoto: FC<OwnProps> = ({
       </ListItem>
       {currentUserFallbackPhoto && (
         <ListItem
+          narrow
           leftElement={<Avatar photo={currentUserFallbackPhoto} size="mini" className={styles.fallbackPhoto} />}
           onClick={openDeleteFallbackPhotoModal}
           destructive

src/components/right/management/ManageChannel.tsx

@@ -328,7 +328,6 @@ const ManageChannel: FC<OwnProps & StateProps> = ({
           <ListItem
             icon="delete-user"
             multiline
-            narrow
             onClick={handleRemovedUsersClick}
           >
             <span className="title">{lang('ChannelBlockedUsers')}</span>