From 7d1eaa55dacd98a4794a21edb305b9ea68ef5127 Mon Sep 17 00:00:00 2001
From: zubiden <19638254+zubiden@users.noreply.github.com>
Date: Thu, 29 Aug 2024 15:52:19 +0200
Subject: [PATCH] Picker Refactoring: Follow-up (#4884)

---
 src/api/gramjs/methods/client.ts                       |  5 +++++
 src/components/common/pickers/ItemPicker.tsx           | 10 +++++++---
 src/components/common/pickers/PeerPicker.tsx           | 10 +++++++---
 src/components/common/profile/ChatExtra.tsx            |  4 ++--
 src/components/left/settings/PremiumStatusItem.tsx     |  3 +--
 src/components/left/settings/Settings.scss             |  5 +++--
 .../left/settings/SettingsActiveSessions.tsx           |  2 +-
 src/components/left/settings/SettingsMain.tsx          |  3 ---
 .../left/settings/SettingsPrivacyLastSeen.tsx          |  3 +--
 .../settings/SettingsPrivacyPublicProfilePhoto.tsx     |  2 ++
 src/components/right/management/ManageChannel.tsx      |  1 -
 11 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/api/gramjs/methods/client.ts b/src/api/gramjs/methods/client.ts
index 7b5cc4672..f6434f55e 100644
--- a/src/api/gramjs/methods/client.ts
+++ b/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;
   }
 }
diff --git a/src/components/common/pickers/ItemPicker.tsx b/src/components/common/pickers/ItemPicker.tsx
index d4634ee9c..ebdb2064b 100644
--- a/src/components/common/pickers/ItemPicker.tsx
+++ b/src/components/common/pickers/ItemPicker.tsx
@@ -100,12 +100,16 @@ const ItemPicker = ({
   const lockedUnselectedValues = allowMultiple ? optionalProps.lockedUnselectedValues : undefined;
 
   useEffect(() => {
-    if (!isSearchable) return;
-    setTimeout(() => {
+    if (!isSearchable) return undefined;
+    const timeoutId = window.setTimeout(() => {
       requestMeasure(() => {
-        inputRef.current!.focus();
+        inputRef.current?.focus();
       });
     }, FOCUS_DELAY_MS);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
   }, [isSearchable]);
 
   const selectedValues = useMemo(() => {
diff --git a/src/components/common/pickers/PeerPicker.tsx b/src/components/common/pickers/PeerPicker.tsx
index 3edfe5dbf..3fe713c26 100644
--- a/src/components/common/pickers/PeerPicker.tsx
+++ b/src/components/common/pickers/PeerPicker.tsx
@@ -138,12 +138,16 @@ const PeerPicker = ({
   const shouldMinimize = selectedIds.length > MAX_FULL_ITEMS;
 
   useEffect(() => {
-    if (!isSearchable) return;
-    setTimeout(() => {
+    if (!isSearchable) return undefined;
+    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]);
diff --git a/src/components/common/profile/ChatExtra.tsx b/src/components/common/profile/ChatExtra.tsx
index 63f04aced..14e7ea5e4 100644
--- a/src/components/common/profile/ChatExtra.tsx
+++ b/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>
       )}
diff --git a/src/components/left/settings/PremiumStatusItem.tsx b/src/components/left/settings/PremiumStatusItem.tsx
index 080a70630..22a953bc4 100644
--- a/src/components/left/settings/PremiumStatusItem.tsx
+++ b/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" />}
-        className="settings-main-menu-star"
+        leftElement={<StarIcon className="icon ListItem-main-icon" type="premium" size="big" />}
         onClick={handleOpenPremiumModal}
       >
         {lang('PrivacyLastSeenPremium')}
diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss
index c08f9decd..e13b3608d 100644
--- a/src/components/left/settings/Settings.scss
+++ b/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;
diff --git a/src/components/left/settings/SettingsActiveSessions.tsx b/src/components/left/settings/SettingsActiveSessions.tsx
index e4f334b88..37ad25543 100644
--- a/src/components/left/settings/SettingsActiveSessions.tsx
+++ b/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}
diff --git a/src/components/left/settings/SettingsMain.tsx b/src/components/left/settings/SettingsMain.tsx
index 9bde85136..afcfbbf21 100644
--- a/src/components/left/settings/SettingsMain.tsx
+++ b/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()}
diff --git a/src/components/left/settings/SettingsPrivacyLastSeen.tsx b/src/components/left/settings/SettingsPrivacyLastSeen.tsx
index 7551b9cfe..0149e7b4e 100644
--- a/src/components/left/settings/SettingsPrivacyLastSeen.tsx
+++ b/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" />}
-          className="settings-main-menu-star"
+          leftElement={<StarIcon className="icon ListItem-main-icon" type="premium" size="big" />}
           onClick={handleOpenPremiumModal}
         >
           {isCurrentUserPremium ? lang('PrivacyLastSeenPremiumForPremium') : lang('PrivacyLastSeenPremium')}
diff --git a/src/components/left/settings/SettingsPrivacyPublicProfilePhoto.tsx b/src/components/left/settings/SettingsPrivacyPublicProfilePhoto.tsx
index 51d7bb579..0c351dd53 100644
--- a/src/components/left/settings/SettingsPrivacyPublicProfilePhoto.tsx
+++ b/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
diff --git a/src/components/right/management/ManageChannel.tsx b/src/components/right/management/ManageChannel.tsx
index 9c9b19047..abbd8f2b8 100644
--- a/src/components/right/management/ManageChannel.tsx
+++ b/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>