adam/Remote-Terminal-for-MeshCore
1
0
Fork 0
mirror of https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git synced 2026-08-01 06:22:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add new message sending scroll-to-bottom when near

Browse Source
This commit is contained in:
Jack Kingsman
2026-01-12 23:59:36 -08:00
parent 05508b7f8a
commit 3230d29fbe
3 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/dist/assets/index-CvVcf00q.js → frontend/dist/assets/index-DVwayj9K.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
frontend/dist/index.html
Vendored
+1 -1
View File
@@ -13,7 +13,7 @@
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<script type="module" crossorigin src="/assets/index-CvVcf00q.js"></script>
<script type="module" crossorigin src="/assets/index-DVwayj9K.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DaLCXB8p.css">
</head>
<body>
frontend/src/components/MessageList.tsx
+8 -4
View File
@@ -80,7 +80,9 @@ export function MessageList({
const scrollStateRef = useRef({
scrollTop: 0,
scrollHeight: 0,
clientHeight: 0,
wasNearTop: false,
wasNearBottom: true, // Default to true so initial messages scroll to bottom
});
// Handle scroll position AFTER render
@@ -101,8 +103,8 @@ export function MessageList({
if (scrollStateRef.current.wasNearTop && scrollHeightDiff > 0) {
// User was near top (loading older) - preserve position by adding the height diff
list.scrollTop = scrollStateRef.current.scrollTop + scrollHeightDiff;
} else if (!scrollStateRef.current.wasNearTop) {
// User was at bottom - scroll to bottom for new messages
} else if (scrollStateRef.current.wasNearBottom) {
// User was near bottom - scroll to bottom for new messages (including sent)
list.scrollTop = list.scrollHeight;
}
}
@@ -115,7 +117,7 @@ export function MessageList({
if (messages.length === 0) {
isInitialLoadRef.current = true;
prevMessagesLengthRef.current = 0;
scrollStateRef.current = { scrollTop: 0, scrollHeight: 0, wasNearTop: false };
scrollStateRef.current = { scrollTop: 0, scrollHeight: 0, clientHeight: 0, wasNearTop: false, wasNearBottom: true };
}
}, [messages.length]);
@@ -124,16 +126,18 @@ export function MessageList({
if (!listRef.current) return;
const { scrollTop, scrollHeight, clientHeight } = listRef.current;
const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
// Always capture current scroll state (needed for scroll preservation)
scrollStateRef.current = {
scrollTop,
scrollHeight,
clientHeight,
wasNearTop: scrollTop < 150,
wasNearBottom: distanceFromBottom < 100,
};
// Show scroll-to-bottom button when not near the bottom (more than 100px away)
const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
setShowScrollToBottom(distanceFromBottom > 100);
if (!onLoadOlder || loadingOlder || !hasOlderMessages) return;