From e894a866093ff499e3282c9b43f01c0ebcb2f7fe Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Wed, 29 Jul 2026 01:51:48 -0400
Subject: [PATCH] fix: library animation inconsistency

---
 src/lib/Library.svelte         | 24 +++++++++++++++++-------
 src/lib/LibraryTreeItem.svelte |  1 -
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/lib/Library.svelte b/src/lib/Library.svelte
index da02f75..ef50cdd 100644
--- a/src/lib/Library.svelte
+++ b/src/lib/Library.svelte
@@ -293,17 +293,17 @@ function setSearchResults(next: Record<string, unknown>) {
 	);
 }
 
-function captureTreeRowPositions() {
+function captureTreeItemPositions() {
 	if (!animationsEnabled()) return;
 	return new Map(
 		[
-			...(libraryElement?.querySelectorAll<HTMLElement>("[data-tree-row]") ??
+			...(libraryElement?.querySelectorAll<HTMLElement>("[data-tree-key]") ??
 				[]),
 		].map((row) => [row, row.getBoundingClientRect().top]),
 	);
 }
 
-function animateTreeRowPositions(
+function animateTreeItemPositions(
 	positions: Map<HTMLElement, number> | undefined,
 ) {
 	if (!positions) return;
@@ -334,6 +334,14 @@ function animateTreeRowPositions(
 	);
 }
 
+function animateTreeExpansion(
+	key: string,
+	positions: Map<HTMLElement, number> | undefined,
+) {
+	animateTreeEntries([key]);
+	animateTreeItemPositions(positions);
+}
+
 async function activateNode(node: ItemRow) {
 	if (!node.fetcher || isTrackType(node.type)) {
 		node.onActivate?.();
@@ -341,7 +349,7 @@ async function activateNode(node: ItemRow) {
 	}
 	const state = getNodeState(node);
 	if (isNodeBusy(node)) return;
-	const positions = !state.expanded ? captureTreeRowPositions() : undefined;
+	const positions = !state.expanded ? captureTreeItemPositions() : undefined;
 	state.expanded = !state.expanded;
 	if (!state.expanded) {
 		if (lib.focusedId?.startsWith(`${node.key}/`)) lib.focusedId = node.key;
@@ -349,8 +357,7 @@ async function activateNode(node: ItemRow) {
 	}
 	if (!state.items) await loadNode(node, state);
 	if (state.expanded && state.items) {
-		animateTreeEntries([node.key]);
-		animateTreeRowPositions(positions);
+		animateTreeExpansion(node.key, positions);
 	}
 }
 
@@ -414,8 +421,11 @@ function appendSection(
 		label,
 		expanded: isExpanded,
 		toggle: () => {
+			const positions = !expanded[section]
+				? captureTreeItemPositions()
+				: undefined;
 			expanded[section] = !expanded[section];
-			if (expanded[section]) animateTreeEntries([key]);
+			if (expanded[section]) animateTreeExpansion(key, positions);
 			else if (lib.focusedId?.startsWith(`${key}/`)) lib.focusedId = key;
 		},
 	});
diff --git a/src/lib/LibraryTreeItem.svelte b/src/lib/LibraryTreeItem.svelte
index 018a27a..a4204cb 100644
--- a/src/lib/LibraryTreeItem.svelte
+++ b/src/lib/LibraryTreeItem.svelte
@@ -323,7 +323,6 @@ function onDragStart(event: DragEvent) {
 
 <div
 	class="row"
-	data-tree-row
 	data-tree-key={rowKey}
 	style:--tree-depth={depth}
 	style:opacity={isUnavailableOffline ? 0.5 : 1}
-- 
2.51.2