From c3c15cbb7e788e6c0591377839bb44b47f4ab984 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Fri, 5 Jul 2024 21:27:59 -0700
Subject: [PATCH] refac

---
 src/lib/components/chat/SettingsModal.svelte | 46 +++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 669f36cfe..66f0efad5 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { getContext, afterUpdate } from 'svelte';
+	import { getContext, tick } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import { models, settings, user } from '$lib/stores';
-
+	import { updateUserSettings } from '$lib/apis/users';
 	import { getModels as _getModels } from '$lib/apis';
+	import { goto } from '$app/navigation';
 
 	import Modal from '../common/Modal.svelte';
 	import Account from './Settings/Account.svelte';
@@ -14,8 +15,6 @@
 	import Chats from './Settings/Chats.svelte';
 	import User from '../icons/User.svelte';
 	import Personalization from './Settings/Personalization.svelte';
-	import { updateUserSettings } from '$lib/apis/users';
-	import { goto } from '$app/navigation';
 	import Valves from './Settings/Valves.svelte';
 
 	const i18n = getContext('i18n');
@@ -36,30 +35,35 @@
 	let selectedTab = 'general';
 
 	// Function to handle sideways scrolling
-	const handleSidewaysScroll = (event) => {
+	const scrollHandler = (event) => {
 		const settingsTabsContainer = document.getElementById('settings-tabs-container');
 		if (settingsTabsContainer) {
-		event.preventDefault(); // Prevent default vertical scrolling
-		settingsTabsContainer.scrollLeft += event.deltaY; // Scroll sideways
+			event.preventDefault(); // Prevent default vertical scrolling
+			settingsTabsContainer.scrollLeft += event.deltaY; // Scroll sideways
 		}
 	};
 
-	// Use afterUpdate to add the event listener after the modal is confirmed to be visible
-	// and remove it when the modal is closed
-	afterUpdate(() => {
-		if (show) {
-			const settingsTabsContainer = document.getElementById('settings-tabs-container');
-			if (settingsTabsContainer) {
-				settingsTabsContainer.addEventListener('wheel', handleSidewaysScroll);
-			}
-		} else {
-			const settingsTabsContainer = document.getElementById('settings-tabs-container');
-			if (settingsTabsContainer) {
-				settingsTabsContainer.removeEventListener('wheel', handleSidewaysScroll);
-			}
+	const addScrollListener = async () => {
+		await tick();
+		const settingsTabsContainer = document.getElementById('settings-tabs-container');
+		if (settingsTabsContainer) {
+			settingsTabsContainer.addEventListener('wheel', scrollHandler);
 		}
-	});
+	};
 
+	const removeScrollListener = async () => {
+		await tick();
+		const settingsTabsContainer = document.getElementById('settings-tabs-container');
+		if (settingsTabsContainer) {
+			settingsTabsContainer.removeEventListener('wheel', scrollHandler);
+		}
+	};
+
+	$: if (show) {
+		addScrollListener();
+	} else {
+		removeScrollListener();
+	}
 </script>
 
 <Modal bind:show>