From 93c9974019002b57d8184c23d70f68390be316c0 Mon Sep 17 00:00:00 2001
From: wsw <944627549@qq.com>
Date: Fri, 12 May 2023 17:54:40 +0800
Subject: [PATCH] feat: scrolling effect when switching chat windows

---
 app/components/chat-list.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/components/chat-list.tsx b/app/components/chat-list.tsx
index 02ea086b..c1365182 100644
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@@ -16,6 +16,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { Path } from "../constant";
 import { MaskAvatar } from "./mask";
 import { Mask } from "../store/mask";
+import { useRef, useEffect } from "react";
 
 export function ChatItem(props: {
   onClick?: () => void;
@@ -29,6 +30,14 @@ export function ChatItem(props: {
   narrow?: boolean;
   mask: Mask;
 }) {
+  const draggableRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (props.selected && draggableRef.current) {
+      draggableRef.current?.scrollIntoView({
+        block: "center",
+      });
+    }
+  }, [props.selected]);
   return (
     <Draggable draggableId={`${props.id}`} index={props.index}>
       {(provided) => (
@@ -37,7 +46,10 @@ export function ChatItem(props: {
             props.selected && styles["chat-item-selected"]
           }`}
           onClick={props.onClick}
-          ref={provided.innerRef}
+          ref={(ele) => {
+            draggableRef.current = ele;
+            provided.innerRef(ele);
+          }}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
           title={`${props.title}\n${Locale.ChatItem.ChatItemCount(