Auto-scroll ProjectGrid to focused project on agent selection
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
adde8462ef
commit
42907f22a4
1 changed files with 14 additions and 1 deletions
|
|
@ -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}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue