Settings Folders: Unify icons for chat types (#4873)

Co-authored-by: zubiden <19638254+zubiden@users.noreply.github.com>

src/components/left/settings/Settings.scss

@@ -80,7 +80,6 @@
   align-items: center;
   padding: 0 1.5rem 1rem;
   text-align: center;
-  margin-bottom: 0.625rem;
 
   @include mixins.side-panel-section;
 

src/components/left/settings/folders/SettingsFoldersEdit.tsx

@@ -16,13 +16,10 @@ import { selectCanShareFolder } from '../../../../global/selectors';
 import { selectCurrentLimit } from '../../../../global/selectors/limits';
 import { findIntersectionWithSet } from '../../../../util/iteratees';
 import { MEMO_EMPTY_ARRAY } from '../../../../util/memo';
+import { CUSTOM_PEER_EXCLUDED_CHAT_TYPES, CUSTOM_PEER_INCLUDED_CHAT_TYPES } from '../../../../util/objects/customPeer';
 import { LOCAL_TGS_URLS } from '../../../common/helpers/animatedAssets';
 
-import {
-  EXCLUDED_CHAT_TYPES,
-  INCLUDED_CHAT_TYPES,
-  selectChatFilters,
-} from '../../../../hooks/reducers/useFoldersReducer';
+import { selectChatFilters } from '../../../../hooks/reducers/useFoldersReducer';
 import useHistoryBack from '../../../../hooks/useHistoryBack';
 import useOldLang from '../../../../hooks/useOldLang';
 
@@ -216,8 +213,8 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
 
   function renderChatType(key: string, mode: 'included' | 'excluded') {
     const chatType = mode === 'included'
-      ? INCLUDED_CHAT_TYPES.find(({ key: typeKey }) => typeKey === key)
-      : EXCLUDED_CHAT_TYPES.find(({ key: typeKey }) => typeKey === key);
+      ? CUSTOM_PEER_INCLUDED_CHAT_TYPES.find(({ type: typeKey }) => typeKey === key)
+      : CUSTOM_PEER_EXCLUDED_CHAT_TYPES.find(({ type: typeKey }) => typeKey === key);
 
     if (!chatType) {
       return undefined;
@@ -225,13 +222,15 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
 
     return (
       <ListItem
-        key={chatType.key}
+        key={chatType.type}
         className="settings-folders-list-item mb-1"
-        icon={chatType.icon}
         narrow
         inactive
       >
-        {lang(chatType.title)}
+        <PrivateChatInfo
+          avatarSize="small"
+          customPeer={chatType}
+        />
       </ListItem>
     );
   }

src/components/ui/ListItem.scss

@@ -82,7 +82,7 @@
 
     > .ListItem-main-icon {
       font-size: 1.5rem;
-      margin-inline-end: 1.25rem;
+      margin-inline-end: 1.8125rem;
       color: var(--color-text-secondary);
     }
 

src/hooks/reducers/useFoldersReducer.ts

@@ -17,20 +17,6 @@ export type FolderChatType = {
   )>;
 };
 
-export const INCLUDED_CHAT_TYPES: FolderChatType[] = [
-  { icon: 'user', title: 'FilterContacts', key: 'contacts' },
-  { icon: 'non-contacts', title: 'FilterNonContacts', key: 'nonContacts' },
-  { icon: 'group', title: 'FilterGroups', key: 'groups' },
-  { icon: 'channel', title: 'FilterChannels', key: 'channels' },
-  { icon: 'bots', title: 'FilterBots', key: 'bots' },
-];
-
-export const EXCLUDED_CHAT_TYPES: FolderChatType[] = [
-  { icon: 'mute', title: 'FilterMuted', key: 'excludeMuted' },
-  { icon: 'archive', title: 'FilterArchived', key: 'excludeArchived' },
-  { icon: 'readchats', title: 'FilterRead', key: 'excludeRead' },
-];
-
 const INCLUDE_FILTER_FIELDS: Array<keyof FolderIncludeFilters> = [
   'includedChatIds', 'bots', 'channels', 'groups', 'contacts', 'nonContacts',
 ];