feat(ui): add scrollToTop and auto-scroll on tab change in settings modal

Author: nshcr

apps/desktop/src/components/ConfigurableScrollableContainer.svelte

@@ -18,6 +18,13 @@
 			scrollableContainer.scrollToBottom();
 		}
 	}
+
+	// Export method to scroll to top
+	export function scrollToTop() {
+		if (scrollableContainer?.scrollToTop) {
+			scrollableContainer.scrollToTop();
+		}
+	}
 </script>
 
 <ScrollableContainer

apps/desktop/src/components/SettingsModalLayout.svelte

@@ -27,11 +27,18 @@
 
 	let currentSelectedId = $state(selectedId || pages[0]?.id || '');
 	const currentPage = $derived(pages.find((p) => p.id === currentSelectedId));
+	let scrollableContainer: ConfigurableScrollableContainer;
 
 	function selectPage(pageId: string) {
 		currentSelectedId = pageId;
 		onSelectPage(pageId);
 	}
+
+	$effect(() => {
+		if (currentSelectedId) {
+			scrollableContainer?.scrollToTop();
+		}
+	});
 </script>
 
 <div class="modal-settings-wrapper">
@@ -64,7 +71,7 @@
 	</div>
 
 	<section class="page-view" use:focusable={{ vertical: true }}>
-		<ConfigurableScrollableContainer>
+		<ConfigurableScrollableContainer bind:this={scrollableContainer}>
 			<div class="page-view__content">
 				{@render content({ currentPage })}
 			</div>