From 5293095eb8a94a408776425080f41646989da190 Mon Sep 17 00:00:00 2001
From: Mathew Pareles <mathewpareles@gmail.com>
Date: Mon, 6 Jan 2025 23:11:52 -0800
Subject: [PATCH] custom scrollbar

---
 .../contrib/void/browser/media/void.css       | 33 ++++++++++
 .../react/src/sidebar-tsx/SidebarChat.tsx     | 62 +++++++++++++++++++
 2 files changed, 95 insertions(+)

diff --git a/src/vs/workbench/contrib/void/browser/media/void.css b/src/vs/workbench/contrib/void/browser/media/void.css
index c6358adc..0ec9730b 100644
--- a/src/vs/workbench/contrib/void/browser/media/void.css
+++ b/src/vs/workbench/contrib/void/browser/media/void.css
@@ -71,3 +71,36 @@
 	color: #3b82f6;
 	cursor: pointer;
 }
+
+
+
+
+.void-scrollable-element *::-webkit-scrollbar {
+    width: 14px !important;
+    height: 14px !important;
+}
+
+.void-scrollable-element *::-webkit-scrollbar-track {
+    background: transparent !important;
+}
+
+.void-scrollable-element *::-webkit-scrollbar-thumb {
+    background-color: transparent !important;
+    border-radius: 0px !important;
+}
+
+.void-scrollable-element.show-scrollbar *::-webkit-scrollbar-thumb {
+    background-color: var(--vscode-scrollbarSlider-background) !important;
+}
+
+.void-scrollable-element *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--vscode-scrollbarSlider-hoverBackground) !important;
+}
+
+.void-scrollable-element *::-webkit-scrollbar-thumb:active {
+    background-color: var(--vscode-scrollbarSlider-activeBackground) !important;
+}
+
+.void-scrollable-element *::-webkit-scrollbar-corner {
+    background-color: transparent !important;
+}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 66fb4c99..c7a514e1 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -417,6 +417,63 @@ const ChatBubble = ({ chatMessage, isLoading }: {
 
 
 
+const useScrollFade = (ref: React.MutableRefObject<HTMLDivElement | null>) => {
+    useEffect(() => {
+        if (!ref.current) return;
+
+        let fadeTimeout: NodeJS.Timeout | null = null;
+        const parent = ref.current;
+        const scrollElement = parent.querySelector('[class*="void-overflow-"]');
+        if (!scrollElement) return;
+
+        const onMouseEnter = () => {
+            parent.classList.add('show-scrollbar');
+        };
+
+        const onMouseLeave = () => {
+            if (fadeTimeout) {
+                clearTimeout(fadeTimeout);
+            }
+            fadeTimeout = setTimeout(() => {
+                parent.classList.remove('show-scrollbar');
+            }, 1000);
+        };
+
+        scrollElement.addEventListener('mouseenter', onMouseEnter);
+        scrollElement.addEventListener('mouseleave', onMouseLeave);
+
+        return () => {
+            scrollElement.removeEventListener('mouseenter', onMouseEnter);
+            scrollElement.removeEventListener('mouseleave', onMouseLeave);
+            if (fadeTimeout) {
+                clearTimeout(fadeTimeout);
+            }
+        };
+    }, [ref]);
+};
+
+
+const Test = ({ children, className = "", }: { children: React.ReactNode; className?: string; maxHeight?: string; maxWidth?: string; }) => {
+
+
+	const ref = useRef<HTMLDivElement | null>(null)
+
+	useScrollFade(ref)
+
+	return (
+		<div ref={ref}
+			className={`@@void-scrollable-element`}
+		>
+			<div
+				className='relative overflow-auto max-h-80 max-w-80 bg-blue-400'
+			>
+				{children}
+			</div>
+		</div>
+	);
+};
+
+
 export const SidebarChat = () => {
 
 	const inputBoxRef: React.MutableRefObject<InputBox | null> = useRef(null);
@@ -579,6 +636,11 @@ export const SidebarChat = () => {
 		ref={sidebarRef}
 		className={`w-full h-full`}
 	>
+		<Test>
+			aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
+			aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
+			aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa
+		</Test>
 		{/* thread selector */}
 		<div ref={historyRef}
 			className={`w-full h-auto mb-2 ${isHistoryOpen ? '' : 'hidden'} ring-2 ring-widget-shadow z-10`}