Various padding fixes (#4924)

src/components/common/ChatExtra.module.scss

@@ -1,38 +0,0 @@
-.businessLocation {
-  width: 4rem;
-  height: 4rem;
-  object-fit: cover;
-  border-radius: 0.25rem;
-  flex-shrink: 0;
-  margin-inline-start: 0.25rem;
-}
-
-.personalChannel {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto;
-  column-gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.personalChannelTitle {
-  grid-column: 1;
-  grid-row: 1;
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  margin-inline-start: 0.5rem;
-  margin-bottom: 0;
-}
-
-.personalChannelSubscribers {
-  grid-column: 2;
-  grid-row: 1;
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  margin-inline-end: 0.5rem;
-}
-
-.personalChannelItem {
-  grid-column: 1 / span 2;
-  grid-row: 2;
-}

src/components/common/RecipientPicker.tsx

@@ -104,6 +104,7 @@ const RecipientPicker: FC<OwnProps & StateProps> = ({
       isOpen={isOpen}
       className={className}
       chatOrUserIds={renderingIds}
+      currentUserId={currentUserId}
       searchPlaceholder={searchPlaceholder}
       search={search}
       onSearchChange={setSearch}

src/components/common/pickers/ChatOrUserPicker.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/mixins";
+
 .ChatOrUserPicker {
   .modal-dialog {
     height: 70%;
@@ -54,7 +56,9 @@
       height: 100%;
       overflow-x: hidden;
       overflow-y: auto;
-      padding: 0 0.5rem;
+      padding-inline: 0.5rem;
+
+      @include mixins.adapt-padding-to-scrollbar(0.5rem);
 
       body.is-ios &,
       body.is-android & {
@@ -81,25 +85,12 @@
     position: relative;
   }
 
-  .ListItem {
+  .ChatOrUserPicker-item {
     position: absolute;
     width: 100%;
 
-    body.is-ios &:not(:last-of-type)::after,
+    .online {
-    body.is-android &:not(:last-of-type)::after {
+      color: var(--color-primary);
-      right: -0.5rem;
-    }
-  }
-
-  .ListItem.chat-item-clickable {
-    &:not(.force-rounded-corners) {
-      @media (max-width: 600px) {
-        margin: 0;
-
-        .ListItem-button {
-          border-radius: 0;
-        }
-      }
     }
   }
 

src/components/common/pickers/ChatOrUserPicker.tsx

@@ -1,18 +1,24 @@
 import type { FC } from '../../../lib/teact/teact';
 import React, {
-  memo, useMemo, useRef, useState,
+  memo, useCallback, useMemo, useRef, useState,
 } from '../../../lib/teact/teact';
 import { getActions, getGlobal } from '../../../global';
 
 import type { ApiTopic } from '../../../api/types';
+import type { GlobalState } from '../../../global/types';
 import type { ThreadId } from '../../../types';
 
-import { CHAT_HEIGHT_PX } from '../../../config';
+import { PEER_PICKER_ITEM_HEIGHT_PX } from '../../../config';
-import { getCanPostInChat, isUserId } from '../../../global/helpers';
+import {
+  getCanPostInChat, getGroupStatus, getUserStatus, isUserOnline,
+} from '../../../global/helpers';
+import { isApiPeerChat } from '../../../global/helpers/peers';
+import { selectChat, selectPeer, selectUserStatus } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
 import { REM } from '../helpers/mediaDimensions';
 import renderText from '../helpers/renderText';
 
+import useSelector from '../../../hooks/data/useSelector';
 import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
 import useInputFocusOnOpen from '../../../hooks/useInputFocusOnOpen';
 import useKeyboardListNavigation from '../../../hooks/useKeyboardListNavigation';
@@ -22,13 +28,13 @@ import useOldLang from '../../../hooks/useOldLang';
 import Button from '../../ui/Button';
 import InfiniteScroll from '../../ui/InfiniteScroll';
 import InputText from '../../ui/InputText';
-import ListItem from '../../ui/ListItem';
 import Loading from '../../ui/Loading';
 import Modal from '../../ui/Modal';
 import Transition from '../../ui/Transition';
-import GroupChatInfo from '../GroupChatInfo';
+import Avatar from '../Avatar';
-import PrivateChatInfo from '../PrivateChatInfo';
+import FullNameTitle from '../FullNameTitle';
 import TopicIcon from '../TopicIcon';
+import PickerItem from './PickerItem';
 
 import './ChatOrUserPicker.scss';
 
@@ -49,6 +55,8 @@ export type OwnProps = {
 const CHAT_LIST_SLIDE = 0;
 const TOPIC_LIST_SLIDE = 1;
 const TOPIC_ICON_SIZE = 2.75 * REM;
+const ITEM_CLASS_NAME = 'ChatOrUserPicker-item';
+const TOPIC_ITEM_HEIGHT_PX = 56;
 
 const ChatOrUserPicker: FC<OwnProps> = ({
   isOpen,
@@ -86,22 +94,33 @@ const ChatOrUserPicker: FC<OwnProps> = ({
   useInputFocusOnOpen(searchRef, isOpen && activeKey === CHAT_LIST_SLIDE, resetSearch);
   useInputFocusOnOpen(topicSearchRef, isOpen && activeKey === TOPIC_LIST_SLIDE);
 
+  const selectTopics = useLastCallback((global: GlobalState) => {
+    if (!forumId) {
+      return undefined;
+    }
+
+    return selectChat(global, forumId)?.topics;
+  });
+
+  const forumTopics = useSelector(selectTopics);
+
   const [topicIds, topics] = useMemo(() => {
     const global = getGlobal();
     const chatsById = global.chats.byId;
     const chatFullInfoById = global.chats.fullInfoById;
 
-    const topicsResult = forumId ? chatsById[forumId].topics : undefined;
+    const chat = chatsById[forumId!];
-    if (!topicsResult) {
+
+    if (!chat || !forumTopics) {
       return [undefined, undefined];
     }
 
     const searchTitle = topicSearch.toLowerCase();
 
-    const result = topicsResult
+    const result = forumTopics
-      ? Object.values(topicsResult).reduce((acc, topic) => {
+      ? Object.values(forumTopics).reduce((acc, topic) => {
         if (
-          getCanPostInChat(chatsById[forumId!], topic.id, undefined, chatFullInfoById[forumId!])
+          getCanPostInChat(chat, topic.id, undefined, chatFullInfoById[forumId!])
           && (!searchTitle || topic.title.toLowerCase().includes(searchTitle))
         ) {
           acc[topic.id] = topic;
@@ -109,10 +128,10 @@ const ChatOrUserPicker: FC<OwnProps> = ({
 
         return acc;
       }, {} as Record<number, ApiTopic>)
-      : topicsResult;
+      : forumTopics;
 
     return [Object.keys(result).map(Number), result];
-  }, [forumId, topicSearch]);
+  }, [forumId, topicSearch, forumTopics]);
 
   const handleHeaderBackClick = useLastCallback(() => {
     setForumId(undefined);
@@ -140,15 +159,15 @@ const ChatOrUserPicker: FC<OwnProps> = ({
         onSelectChatOrUser(chatId);
       }
     }
-  }, '.ListItem-button', true);
+  }, `.${ITEM_CLASS_NAME}`, true);
 
   const handleTopicKeyDown = useKeyboardListNavigation(topicContainerRef, isOpen, (index) => {
     if (topicIds?.length) {
       onSelectChatOrUser(forumId!, topicIds[index === -1 ? 0 : index]);
     }
-  }, '.ListItem-button', true);
+  }, `.${ITEM_CLASS_NAME}`, true);
 
-  const handleClick = useLastCallback((e: React.MouseEvent, chatId: string) => {
+  const handleClick = useLastCallback((chatId: string) => {
     const chatsById = getGlobal().chats.byId;
     const chat = chatsById?.[chatId];
     if (chat?.isForum) {
@@ -160,9 +179,52 @@ const ChatOrUserPicker: FC<OwnProps> = ({
     }
   });
 
-  const handleTopicClick = useLastCallback((e: React.MouseEvent, topicId: number) => {
+  const renderChatItem = useCallback((id: string, index: number) => {
-    onSelectChatOrUser(forumId!, topicId);
+    const global = getGlobal();
-  });
+    const peer = selectPeer(global, id);
+    if (!peer) {
+      return undefined;
+    }
+
+    const isSelf = peer && !isApiPeerChat(peer) ? peer.isSelf : undefined;
+
+    function getSubtitle() {
+      if (!peer) return undefined;
+      if (peer.id === currentUserId) return [lang('SavedMessagesInfo')];
+      if (isApiPeerChat(peer)) {
+        return [getGroupStatus(lang, peer)];
+      }
+
+      const userStatus = selectUserStatus(global, peer.id);
+      return [
+        getUserStatus(lang, peer, userStatus),
+        buildClassName(isUserOnline(peer, userStatus, true) && 'online'),
+      ];
+    }
+
+    const [subtitle, subtitleClassName] = getSubtitle() || [];
+
+    return (
+      <PickerItem
+        key={id}
+        className={ITEM_CLASS_NAME}
+        title={<FullNameTitle peer={peer} isSavedMessages={isSelf} />}
+        avatarElement={(
+          <Avatar
+            peer={peer}
+            isSavedMessages={isSelf}
+            size="medium"
+          />
+        )}
+        subtitle={subtitle}
+        subtitleClassName={subtitleClassName}
+        ripple
+        style={`top: ${(viewportOffset + index) * PEER_PICKER_ITEM_HEIGHT_PX}px;`}
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick={() => handleClick(id)}
+      />
+    );
+  }, [currentUserId, lang, viewportOffset]);
 
   function renderTopicList() {
     return (
@@ -184,28 +246,28 @@ const ChatOrUserPicker: FC<OwnProps> = ({
           className="picker-list custom-scroll"
           items={topicIds}
           withAbsolutePositioning
-          maxHeight={!topicIds ? 0 : topicIds.length * CHAT_HEIGHT_PX}
+          maxHeight={(topicIds?.length || 0) * TOPIC_ITEM_HEIGHT_PX}
           onKeyDown={handleTopicKeyDown}
         >
-          {topicIds
+          {!topicIds && <Loading />}
-            ? topicIds.map((topicId, i) => (
+          {topicIds?.map((topicId, i) => (
-              <ListItem
+            <PickerItem
-                key={`${forumId}_${topicId}`}
+              key={`${forumId}_${topicId}`}
-                className="chat-item-clickable force-rounded-corners small-icon topic-item"
+              className={ITEM_CLASS_NAME}
-                style={`top: ${i * CHAT_HEIGHT_PX}px;`}
+              // eslint-disable-next-line react/jsx-no-bind
-                onClick={handleTopicClick}
+              onClick={() => onSelectChatOrUser(forumId!, topicId)}
-                clickArg={topicId}
+              style={`top: ${(viewportOffset + i) * TOPIC_ITEM_HEIGHT_PX}px;`}
-              >
+              avatarElement={(
                 <TopicIcon
                   size={TOPIC_ICON_SIZE}
                   topic={topics[topicId]}
                   className="topic-icon"
                   letterClassName="topic-icon-letter"
                 />
-                <div dir="auto" className="fullName">{renderText(topics[topicId].title)}</div>
+              )}
-              </ListItem>
+              title={renderText(topics[topicId].title)}
-            ))
+            />
-            : <Loading />}
+          ))}
         </InfiniteScroll>
       </>
     );
@@ -237,29 +299,13 @@ const ChatOrUserPicker: FC<OwnProps> = ({
             ref={containerRef}
             className="picker-list custom-scroll"
             items={viewportIds}
+            itemSelector={`.${ITEM_CLASS_NAME}`}
             onLoadMore={getMore}
             withAbsolutePositioning
-            maxHeight={chatOrUserIds!.length * CHAT_HEIGHT_PX}
+            maxHeight={chatOrUserIds!.length * PEER_PICKER_ITEM_HEIGHT_PX}
             onKeyDown={handleKeyDown}
           >
-            {viewportIds.map((id, i) => (
+            {viewportIds.map(renderChatItem)}
-              <ListItem
-                key={id}
-                className="chat-item-clickable force-rounded-corners small-icon"
-                style={`height: ${CHAT_HEIGHT_PX}px; top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
-                onClick={handleClick}
-                clickArg={id}
-              >
-                {isUserId(id) ? (
-                  <PrivateChatInfo
-                    status={id === currentUserId ? lang('SavedMessagesInfo') : undefined}
-                    userId={id}
-                  />
-                ) : (
-                  <GroupChatInfo chatId={id} />
-                )}
-              </ListItem>
-            ))}
           </InfiniteScroll>
         ) : viewportIds && !viewportIds.length ? (
           <p className="no-results">{lang('lng_blocked_list_not_found')}</p>

src/components/common/pickers/PickerItem.module.scss

@@ -60,7 +60,6 @@
   color: var(--color-text-secondary);
   grid-row: 2;
   grid-column: 3;
-  align-self: start;
 }
 
 .title, .subtitle {
@@ -76,6 +75,7 @@
 .multiline {
   .title {
     grid-row: 1;
+    align-self: end;
   }
 }
 

src/components/common/pickers/PickerItem.tsx

@@ -22,6 +22,7 @@ type OwnProps = {
   className?: string;
   titleClassName?: string;
   subtitleClassName?: string;
+  style?: string;
   onClick?: NoneToVoidFunction;
   onDisabledClick?: NoneToVoidFunction;
 };
@@ -38,6 +39,7 @@ const PickerItem = ({
   className,
   titleClassName,
   subtitleClassName,
+  style,
   onClick,
   onDisabledClick,
 }: OwnProps) => {
@@ -66,6 +68,7 @@ const PickerItem = ({
         className,
       )}
       onClick={handleClick}
+      style={style}
       dir={lang.isRtl ? 'rtl' : undefined}
       role={isClickable ? 'button' : undefined}
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex

src/components/common/profile/ChatExtra.module.scss

@@ -40,6 +40,10 @@
 .personalChannelItem {
   grid-column: 1 / span 2;
   grid-row: 2;
+
+  :global(.Avatar) {
+    margin-right: 0.9375rem !important;
+  }
 }
 
 .openAppButton {

src/components/left/main/Chat.tsx

@@ -335,6 +335,7 @@ const Chat: FC<OwnProps & StateProps> = ({
           peer={peer}
           isSavedMessages={user?.isSelf}
           isSavedDialog={isSavedDialog}
+          size={isPreview ? 'medium' : 'large'}
           withStory={!user?.isSelf}
           withStoryGap={isAvatarOnlineShown}
           storyViewerOrigin={StoryViewerOrigin.ChatList}

src/components/left/search/LeftSearch.scss

@@ -86,7 +86,7 @@
   }
 
   .RecentContacts .search-section {
-    padding-left: 0.25rem;
+    padding-inline: 0.5rem;
   }
 
   .WebLink {
@@ -193,7 +193,9 @@
   }
 
   .search-section {
-    padding: 0 0.125rem 0 0.75rem;
+    padding-inline: 0.5rem;
+
+    @include mixins.adapt-padding-to-scrollbar(0.5rem);
 
     .section-heading {
       color: var(--color-text-secondary);

src/components/left/search/RecentContacts.scss

@@ -81,6 +81,6 @@
 
   .clear-recent-chats {
     position: absolute;
-    inset-inline-end: 0.5rem;
+    inset-inline-end: 0;
   }
 }

src/components/ui/Checkbox.scss

@@ -224,12 +224,14 @@
 
   &.onlyInput {
     padding-inline-start: 1.125rem;
+    margin-block: 0 1.25rem;
 
     .Checkbox-main {
       &::before,
       &::after {
         left: 0;
         right: 0;
+        top: 0;
       }
     }
   }

src/components/ui/Tab.scss

@@ -86,11 +86,11 @@
   .platform {
     position: absolute;
     bottom: -0.625rem;
-    left: 0;
+    left: -0.5rem;
+    right: -0.5rem;
     opacity: 0;
     background-color: var(--color-primary);
     height: 0.1875rem;
-    width: 100%;
     border-radius: 0.1875rem 0.1875rem 0 0;
     pointer-events: none;
     box-sizing: content-box;

src/config.ts

@@ -71,6 +71,7 @@ export const MESSAGE_LIST_VIEWPORT_LIMIT = MESSAGE_LIST_SLICE * 2;
 export const ARCHIVE_MINIMIZED_HEIGHT = 36;
 export const CHAT_HEIGHT_PX = 72;
 export const TOPIC_HEIGHT_PX = 65;
+export const PEER_PICKER_ITEM_HEIGHT_PX = 56;
 export const CHAT_LIST_SLICE = isBigScreen ? 30 : 25;
 export const CHAT_LIST_LOAD_SLICE = 100;
 export const SHARED_MEDIA_SLICE = 42;

src/styles/_common.scss

@@ -101,9 +101,9 @@
 .chat-list {
   background: var(--color-background);
   height: 100%;
-  padding: 0.5rem 0.4375rem 0.5rem 0.4375rem;
+  padding: 0.5rem;
 
-  @include mixins.adapt-padding-to-scrollbar(0.4375rem);
+  @include mixins.adapt-padding-to-scrollbar(0.5rem);
 
   overflow-x: hidden;
   overflow-y: scroll;