aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2026-01-02 14:04:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix search scrolling (#1982)

Browse Source
This commit is contained in:
Zane
2025-04-01 11:50:55 -07:00
committed by GitHub
parent 177cdbe0f2
commit efabdbd397
1 changed files with 30 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
ui/desktop/src/components/conversation/SearchView.tsx
View File

@@ -102,26 +102,39 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
const marks = containerRef.current.querySelectorAll('mark');
const mark = marks[index] as HTMLElement;
if (!mark) return;
if (mark) {
// Update highlight
marks.forEach((m) => m.classList.remove('current'));
mark.classList.add('current');
// Update highlight
marks.forEach((m) => m.classList.remove('current'));
mark.classList.add('current');
// Calculate position to center the mark in the viewport
const markRect = mark.getBoundingClientRect();
const viewportRect = mark
.closest('[data-radix-scroll-area-viewport]')
?.getBoundingClientRect();
// Find the viewport element
const viewport = mark.closest('[data-radix-scroll-area-viewport]') as HTMLElement;
if (!viewport) return;
if (viewportRect) {
const targetPosition = mark.offsetTop - viewportRect.height / 2 + markRect.height / 2;
scrollAreaRef.current.scrollToPosition({
top: targetPosition,
behavior: 'smooth',
});
}
}
// Get measurements
const viewportRect = viewport.getBoundingClientRect();
const markRect = mark.getBoundingClientRect();
const currentScrollTop = viewport.scrollTop;
// Calculate how far the element is from the top of the viewport
const elementRelativeToViewport = markRect.top - viewportRect.top;
// Calculate the new scroll position that would center the element
const targetPosition =
currentScrollTop + elementRelativeToViewport - (viewportRect.height - markRect.height) / 2;
// Ensure we don't scroll past the bottom
const maxScroll = viewport.scrollHeight - viewport.clientHeight;
const finalPosition = Math.max(0, Math.min(targetPosition, maxScroll));
// Use requestAnimationFrame to ensure DOM measurements are accurate
requestAnimationFrame(() => {
scrollAreaRef.current?.scrollToPosition({
top: finalPosition,
behavior: 'smooth',
});
});
};
const clearHighlights = () => {