Фикс дерганого скролла в сообщениях, более логичное поведение при пересылке сообщения

This commit is contained in:
RoyceDa
2026-02-19 20:52:27 +02:00
parent a0c73c807f
commit 026a3c9520

View File

@@ -7,14 +7,12 @@ import { MessageSkeleton } from "../MessageSkeleton/MessageSkeleton";
import { ScrollArea } from "@mantine/core"; import { ScrollArea } from "@mantine/core";
import { MESSAGE_AVATAR_NO_RENDER_TIME_DIFF_S, SCROLL_TOP_IN_MESSAGES_TO_VIEW_AFFIX } from "@/app/constants"; import { MESSAGE_AVATAR_NO_RENDER_TIME_DIFF_S, SCROLL_TOP_IN_MESSAGES_TO_VIEW_AFFIX } from "@/app/constants";
import { DialogAffix } from "../DialogAffix/DialogAffix"; import { DialogAffix } from "../DialogAffix/DialogAffix";
import { useReplyMessages } from "@/app/providers/DialogProvider/useReplyMessages";
import { useSetting } from "@/app/providers/SettingsProvider/useSetting"; import { useSetting } from "@/app/providers/SettingsProvider/useSetting";
export function Messages() { export function Messages() {
const colors = useRosettaColors(); const colors = useRosettaColors();
const publicKey = usePublicKey(); const publicKey = usePublicKey();
const { messages, dialog, loadMessagesToTop, loading } = useDialog(); const { messages, dialog, loadMessagesToTop, loading } = useDialog();
const { replyMessages, isSelectionStarted } = useReplyMessages();
const viewportRef = useRef<HTMLDivElement | null>(null); const viewportRef = useRef<HTMLDivElement | null>(null);
const lastMessageRef = useRef<HTMLDivElement | null>(null); const lastMessageRef = useRef<HTMLDivElement | null>(null);
@@ -22,6 +20,7 @@ export function Messages() {
const shouldAutoScrollRef = useRef(true); const shouldAutoScrollRef = useRef(true);
const isFirstRenderRef = useRef(true); const isFirstRenderRef = useRef(true);
const previousScrollHeightRef = useRef(0); const previousScrollHeightRef = useRef(0);
const distanceFromButtomRef = useRef(0);
const [affix, setAffix] = useState(false); const [affix, setAffix] = useState(false);
const [wallpaper] = useSetting<string> const [wallpaper] = useSetting<string>
@@ -121,15 +120,10 @@ export function Messages() {
const lastMessage = messages[messages.length - 1]; const lastMessage = messages[messages.length - 1];
// Скроллим если пользователь внизу или это его собственное сообщение // Скроллим если пользователь внизу или это его собственное сообщение
if ((shouldAutoScrollRef.current || lastMessage.from_me) && !affix) { if ((shouldAutoScrollRef.current || lastMessage.from_me)) {
/**
* Скролл только если пользователь не читает сейчас старую переписку
* (!affix))
*/
//console.info("Scroll because", shouldAutoScrollRef.current);
scrollToBottom(true); scrollToBottom(true);
} }
}, [messages.length, loading, affix, scrollToBottom]); }, [messages.length, loading, scrollToBottom]);
// Восстановление позиции после загрузки старых сообщений // Восстановление позиции после загрузки старых сообщений
useEffect(() => { useEffect(() => {
@@ -142,12 +136,6 @@ export function Messages() {
} }
}, [messages.length]); }, [messages.length]);
// Скролл при отправке reply сообщения
useEffect(() => {
if (replyMessages.messages.length === 0 || isSelectionStarted()) return;
scrollToBottom(true);
}, [replyMessages.messages.length]);
const loadMessagesToScrollAreaTop = async () => { const loadMessagesToScrollAreaTop = async () => {
if (!viewportRef.current) return; if (!viewportRef.current) return;
@@ -195,6 +183,7 @@ export function Messages() {
// Показываем/скрываем кнопку "вниз" // Показываем/скрываем кнопку "вниз"
const distanceFromBottom = const distanceFromBottom =
(viewportRef.current.scrollHeight - viewportRef.current.clientHeight) - scroll.y; (viewportRef.current.scrollHeight - viewportRef.current.clientHeight) - scroll.y;
distanceFromButtomRef.current = distanceFromBottom;
setAffix(distanceFromBottom > SCROLL_TOP_IN_MESSAGES_TO_VIEW_AFFIX); setAffix(distanceFromBottom > SCROLL_TOP_IN_MESSAGES_TO_VIEW_AFFIX);
}} }}