feat: persist scroll position per conversation tab

- Added scrollPosition to Conversation interface
- Save scroll position when switching away from a tab
- Restore exact scroll position when switching back
- Uses -1 to indicate auto-scroll mode (scroll to bottom)
- Prevents interference between scroll restore and auto-scroll
This commit is contained in:
2026-01-23 14:57:06 -08:00
committed by Naomi Carrigan
parent 371e4efde3
commit c088dc0096
3 changed files with 59 additions and 3 deletions
+37 -3
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { claudeStore, type TerminalLine } from "$lib/stores/claude";
import { afterUpdate } from "svelte";
import { afterUpdate, tick } from "svelte";
import ConversationTabs from "./ConversationTabs.svelte";
import Markdown from "./Markdown.svelte";
import HighlightedText from "./HighlightedText.svelte";
@@ -10,6 +10,8 @@
let shouldAutoScroll = true;
let lines: TerminalLine[] = [];
let currentSearchQuery = "";
let currentConversationId: string | null = null;
let isRestoringScroll = false;
searchQuery.subscribe((value) => {
currentSearchQuery = value;
@@ -19,14 +21,46 @@
lines = value;
});
claudeStore.activeConversationId.subscribe(async (newId) => {
if (!newId) return;
// Save current conversation's scroll position before switching
if (currentConversationId && currentConversationId !== newId && terminalElement) {
const position = shouldAutoScroll ? -1 : terminalElement.scrollTop;
claudeStore.saveScrollPosition(currentConversationId, position);
}
currentConversationId = newId;
// Restore scroll position for the new conversation after DOM updates
await tick();
if (terminalElement) {
const savedPosition = claudeStore.getScrollPosition(newId);
isRestoringScroll = true;
if (savedPosition === -1) {
// Auto-scroll to bottom
shouldAutoScroll = true;
terminalElement.scrollTop = terminalElement.scrollHeight;
} else {
// Restore to saved position
shouldAutoScroll = false;
terminalElement.scrollTop = savedPosition;
}
// Small delay to prevent the scroll handler from overriding our restore
setTimeout(() => {
isRestoringScroll = false;
}, 50);
}
});
function handleScroll() {
if (!terminalElement) return;
if (!terminalElement || isRestoringScroll) return;
const { scrollTop, scrollHeight, clientHeight } = terminalElement;
shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 100;
}
afterUpdate(() => {
if (shouldAutoScroll && terminalElement) {
if (shouldAutoScroll && terminalElement && !isRestoringScroll) {
terminalElement.scrollTop = terminalElement.scrollHeight;
}
});