Auto-scroll ProjectGrid to focused project on agent selection

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DexterFromLab 2026-03-12 12:16:13 +01:00
parent adde8462ef
commit 42907f22a4

View file

@ -12,6 +12,19 @@
Math.min(projects.length, Math.max(1, Math.floor(containerWidth / 520))), Math.min(projects.length, Math.max(1, Math.floor(containerWidth / 520))),
); );
// Track slot elements for auto-scroll
let slotEls = $state<Record<string, HTMLElement>>({});
// Auto-scroll to active project when it changes
$effect(() => {
const id = activeProjectId;
if (!id) return;
const el = slotEls[id];
if (!el) return;
// Use smooth scroll; block: nearest avoids jumping if already visible
el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
});
let observer: ResizeObserver | undefined; let observer: ResizeObserver | undefined;
onMount(() => { onMount(() => {
@ -37,7 +50,7 @@
style="--visible-count: {visibleCount}" style="--visible-count: {visibleCount}"
> >
{#each projects as project, i (project.id)} {#each projects as project, i (project.id)}
<div class="project-slot"> <div class="project-slot" bind:this={slotEls[project.id]}>
<ProjectBox <ProjectBox
{project} {project}
slotIndex={i} slotIndex={i}