Chat List: Better forum panel animation

src/components/common/ChatForumLastMessage.tsx

@@ -11,11 +11,13 @@ import type { ObserveFn } from '../../hooks/useIntersectionObserver';
 import type { FC } from '../../lib/teact/teact';
 import type { ApiChat } from '../../api/types';
 
-import { REM } from './helpers/mediaDimensions';
+import { IS_TOUCH_ENV } from '../../util/environment';
 import buildClassName from '../../util/buildClassName';
 import { getOrderedTopics } from '../../global/helpers';
-import renderText from './helpers/renderText';
+import { getIsMobile } from '../../hooks/useAppLayout';
 import useLang from '../../hooks/useLang';
+import { REM } from './helpers/mediaDimensions';
+import renderText from './helpers/renderText';
 
 import TopicIcon from './TopicIcon';
 
@@ -60,7 +62,13 @@ const ChatForumLastMessage: FC<OwnProps> = ({
   function handleOpenTopic(e: React.MouseEvent<HTMLDivElement>) {
     if (lastActiveTopic.unreadCount === 0) return;
     e.stopPropagation();
-    openChat({ id: chat.id, threadId: lastActiveTopic.id, shouldReplaceHistory: true });
+    e.preventDefault();
+    openChat({
+      id: chat.id,
+      threadId: lastActiveTopic.id,
+      shouldReplaceHistory: true,
+      noForumTopicPanel: getIsMobile(),
+    });
   }
 
   useLayoutEffect(() => {
@@ -97,7 +105,8 @@ const ChatForumLastMessage: FC<OwnProps> = ({
               lastActiveTopic.unreadCount && styles.unread,
             )}
             ref={mainColumnRef}
-            onMouseDown={handleOpenTopic}
+            onMouseDown={IS_TOUCH_ENV ? undefined : handleOpenTopic}
+            onClick={IS_TOUCH_ENV ? handleOpenTopic : undefined}
           >
             <TopicIcon
               topic={lastActiveTopic}
@@ -135,7 +144,8 @@ const ChatForumLastMessage: FC<OwnProps> = ({
       <div
         className={buildClassName(styles.lastMessage, lastActiveTopic?.unreadCount && styles.unread)}
         ref={lastMessageRef}
-        onMouseDown={handleOpenTopic}
+        onMouseDown={IS_TOUCH_ENV ? undefined : handleOpenTopic}
+        onClick={IS_TOUCH_ENV ? handleOpenTopic : undefined}
       >
         {lastMessage}
         {!overwrittenWidth && !isReversedCorner && (

src/components/left/main/Archive.module.scss

@@ -46,7 +46,7 @@
   }
 
   &::after {
-    opacity: 0;
+    display: none;
   }
 }
 

src/components/left/main/Chat.scss

@@ -51,7 +51,7 @@
   }
 
   &:last-of-type {
-    padding-bottom: 0.5rem;
+    border-bottom: 0.5rem solid transparent; // `margin` does not help, and `padding` affects forum indicator height
   }
 
   @media (max-width: 600px) {
@@ -66,22 +66,9 @@
         border-color: var(--color-chat-hover);
       }
     }
-
-    &.selected-forum {
-      .avatar-badge-wrapper {
-        --outline-color: var(--color-chat-hover);
-      }
-    }
   }
 
   @media (min-width: 600px) {
-    &.selected-forum.forum,
-    &.selected-forum.forum:hover {
-      .avatar-badge-wrapper {
-        --outline-color: var(--color-chat-hover);
-      }
-    }
-
     &.selected:not(.forum),
     &.selected:not(.forum):hover {
       --background-color: var(--color-chat-active) !important;
@@ -144,7 +131,9 @@
   }
 
   &.selected-forum {
-    --background-color: var(--color-chat-hover) !important;
+    &::before {
+      transform: translateX(0) scaleY(1) !important;
+    }
   }
 
   @media (max-width: 600px) {
@@ -156,6 +145,30 @@
   &.forum {
     --color-chat-username: var(--color-text);
 
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0.625rem;
+      bottom: 0.625rem;
+      left: -0.4375rem; // `.chat-list` left padding
+      width: 0.3125rem;
+
+      transform: translateX(-0.375rem) scaleY(0.5);
+      transition: transform var(--layer-transition);
+
+      background: var(--color-primary);
+      z-index: 1;
+
+      border-start-end-radius: var(--border-radius-default);
+      border-end-end-radius: var(--border-radius-default);
+    }
+
+    @media (max-width: 600px) {
+      &::before {
+        left: 0;
+      }
+    }
+
     .ListItem-button {
       padding-top: 0.25rem;
       padding-bottom: 0.375rem;

src/components/left/main/Chat.tsx

@@ -157,7 +157,7 @@ const Chat: FC<OwnProps & StateProps> = ({
 
   const handleClick = useCallback(() => {
     if (isForum) {
-      openForumPanel({ chatId });
+      openForumPanel({ chatId }, { forceOnHeavyAnimation: true });
       return;
     }
 

src/styles/_common.scss

@@ -95,6 +95,16 @@
     .Chat[dir="rtl"] .info {
       transform: translateX(20%);
     }
+
+    .Avatar {
+      transform: scale(0.9);
+    }
+  }
+
+  @media (min-width: 600px) {
+    &.forum-panel-open .selected-forum .Avatar {
+      transform: none;
+    }
   }
 
   @media (max-width: 600px) {