From 20e1b287f8344eb205ad08daa25de160d3427b9d Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Wed, 8 Jan 2025 19:32:19 -0800
Subject: [PATCH] scrollbar settings

---
 .../react/src/void-settings-tsx/Settings.tsx  |  8 +++--
 .../contrib/void/browser/voidSettingsPane.ts  | 34 +++++++++----------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
index 95b13787..af6edb50 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
@@ -11,6 +11,7 @@ import { VoidCheckBox, VoidInputBox, VoidSelectBox, VoidSwitch } from '../util/i
 import { useAccessor, useIsDark, useRefreshModelListener, useRefreshModelState, useSettingsState } from '../util/services.js'
 import { X, RefreshCw, Loader2, Check, MoveRight } from 'lucide-react'
 import { ChatMarkdownRender } from '../markdown/ChatMarkdownRender.js'
+import { useScrollbarStyles } from '../util/useScrollbarStyles.js'
 
 const SubtleButton = ({ onClick, text, icon, disabled }: { onClick: () => void, text: string, icon: React.ReactNode, disabled: boolean }) => {
 
@@ -464,8 +465,11 @@ export const Settings = () => {
 
 	const [tab, setTab] = useState<TabName>('models')
 
-	return <div className={`@@void-scope ${isDark ? 'dark' : ''}`}>
-		<div className='w-full h-full px-10 py-10 select-none'>
+	const containerRef = useRef<HTMLDivElement | null>(null)
+	useScrollbarStyles(containerRef)
+
+	return <div className={`@@void-scope ${isDark ? 'dark' : ''}`} style={{ height: '100%', width: '100%' }}>
+		<div ref={containerRef} className='overflow-y-auto w-full h-full px-10 py-10 select-none'>
 
 			<div className='max-w-5xl mx-auto'>
 
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
index 51803ce2..684a7567 100644
--- a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
@@ -26,7 +26,6 @@ import { ContextKeyExpr } from '../../../../platform/contextkey/common/contextke
 import { mountVoidSettings } from './react/out/void-settings-tsx/index.js'
 import { Codicon } from '../../../../base/common/codicons.js';
 import { IDisposable } from '../../../../base/common/lifecycle.js';
-import { DomScrollableElement } from '../../../../base/browser/ui/scrollbar/scrollableElement.js';
 
 
 // refer to preferences.contribution.ts keybindings editor
@@ -63,7 +62,7 @@ class VoidSettingsInput extends EditorInput {
 class VoidSettingsPane extends EditorPane {
 	static readonly ID = 'workbench.test.myCustomPane';
 
-	private _scrollbar: DomScrollableElement | undefined;
+	// private _scrollbar: DomScrollableElement | undefined;
 
 	constructor(
 		group: IEditorGroup,
@@ -79,32 +78,31 @@ class VoidSettingsPane extends EditorPane {
 		parent.style.height = '100%';
 		parent.style.width = '100%';
 
-		const scrollableContent = document.createElement('div');
-		scrollableContent.style.height = '100%';
-		scrollableContent.style.width = '100%';
+		const settingsElt = document.createElement('div');
+		settingsElt.style.height = '100%';
+		settingsElt.style.width = '100%';
 
-		this._scrollbar = this._register(new DomScrollableElement(scrollableContent, {}));
-		parent.appendChild(this._scrollbar.getDomNode());
-		this._scrollbar.scanDomNode();
+		parent.appendChild(settingsElt);
+
+		// this._scrollbar = this._register(new DomScrollableElement(scrollableContent, {}));
+		// parent.appendChild(this._scrollbar.getDomNode());
+		// this._scrollbar.scanDomNode();
 
 		// Mount React into the scrollable content
 		this.instantiationService.invokeFunction(accessor => {
-			const disposables: IDisposable[] | undefined = mountVoidSettings(scrollableContent, accessor);
+			const disposables: IDisposable[] | undefined = mountVoidSettings(settingsElt, accessor);
 
-			setTimeout(() => { // this is a complete hack and I don't really understand how scrollbar works here
-				this._scrollbar?.scanDomNode();
-			}, 1000)
+			// setTimeout(() => { // this is a complete hack and I don't really understand how scrollbar works here
+			// 	this._scrollbar?.scanDomNode();
+			// }, 1000)
 			disposables?.forEach(d => this._register(d));
 		});
 	}
 
 	layout(dimension: Dimension): void {
-		if (!this._scrollbar) return;
-
-		this._scrollbar.getDomNode().style.height = `${dimension.height}px`;
-		this._scrollbar.getDomNode().style.width = `${dimension.width}px`;
-		this._scrollbar.scanDomNode();
-
+		// if (!settingsElt) return
+		// settingsElt.style.height = `${dimension.height}px`;
+		// settingsElt.style.width = `${dimension.width}px`;
 	}