From 838134637818ae64127bcb27a9208b0466b438d4 Mon Sep 17 00:00:00 2001
From: Peter De-Ath <peter@de-ath.co.uk>
Date: Fri, 5 Jul 2024 02:05:59 +0100
Subject: [PATCH] enh: add sideways scrolling to settings tabs container

---
 src/lib/components/admin/Settings.svelte     | 17 ++++++++++--
 src/lib/components/chat/SettingsModal.svelte | 29 +++++++++++++++++++-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/admin/Settings.svelte b/src/lib/components/admin/Settings.svelte
index 5538a11cf..24cf595a7 100644
--- a/src/lib/components/admin/Settings.svelte
+++ b/src/lib/components/admin/Settings.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { getContext, tick } from 'svelte';
+	import { getContext, tick, onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
 	import Database from './Settings/Database.svelte';
@@ -21,11 +21,24 @@
 	const i18n = getContext('i18n');
 
 	let selectedTab = 'general';
+
+	onMount(() => {
+		const containerElement = document.getElementById('admin-settings-tabs-container');
+
+		if (containerElement) {
+			containerElement.addEventListener('wheel', function (event) {
+				if (event.deltaY !== 0) {
+					// Adjust horizontal scroll position based on vertical scroll
+					containerElement.scrollLeft += event.deltaY;
+				}
+			});
+		}
+	});
 </script>
 
 <div class="flex flex-col lg:flex-row w-full h-full py-2 lg:space-x-4">
 	<div
-		class="tabs flex flex-row overflow-x-auto space-x-1 max-w-full lg:space-x-0 lg:space-y-1 lg:flex-col lg:flex-none lg:w-44 dark:text-gray-200 text-xs text-left scrollbar-none"
+		id="admin-settings-tabs-container" class="tabs flex flex-row overflow-x-auto space-x-1 max-w-full lg:space-x-0 lg:space-y-1 lg:flex-col lg:flex-none lg:w-44 dark:text-gray-200 text-xs text-left scrollbar-none"
 	>
 		<button
 			class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 lg:flex-none flex text-right transition {selectedTab ===
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 75d656f6b..669f36cfe 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
+	import { getContext, afterUpdate } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import { models, settings, user } from '$lib/stores';
 
@@ -34,6 +34,32 @@
 	};
 
 	let selectedTab = 'general';
+
+	// Function to handle sideways scrolling
+	const handleSidewaysScroll = (event) => {
+		const settingsTabsContainer = document.getElementById('settings-tabs-container');
+		if (settingsTabsContainer) {
+		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);
+			}
+		}
+	});
+
 </script>
 
 <Modal bind:show>
@@ -61,6 +87,7 @@
 
 		<div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
 			<div
+				id="settings-tabs-container"
 				class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-xs text-left mb-3 md:mb-0"
 			>
 				<button