From 82ffd4e8f4bc29ede5c9593772aae461abadd1c4 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Thu, 6 Mar 2025 03:34:57 -0800
Subject: [PATCH] slider styles

---
 .../react/src/sidebar-tsx/SidebarChat.tsx     | 78 ++++++++++++++++---
 .../void/browser/react/src/util/inputs.tsx    | 26 +++++--
 .../src/void-settings-tsx/ModelDropdown.tsx   |  2 +-
 .../react/src/void-settings-tsx/Settings.tsx  |  2 +-
 4 files changed, 90 insertions(+), 18 deletions(-)

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 b86cdd22..edccdd8c 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
@@ -165,16 +165,14 @@ const ReasoningOptionDropdown = () => {
 
 	let toggleButton: React.ReactNode = null
 	if (canToggleReasoning) {
-		toggleButton =
-			<div className='flex items-center gap-x-3'>
-				<span className='text-void-fg-3 text-xs pointer-events-none inline-block w-10'>{isEnabled ? 'Thinking' : 'Thinking'}</span>
-				<VoidSwitch
-					size='xs'
-					value={isEnabled}
-					onChange={(newVal) => { voidSettingsService.setOptionsOfModelSelection(modelSelection.providerName, modelSelection.modelName, { reasoningEnabled: newVal }) }}
-				/>
-			</div>
-
+		toggleButton = <div className='flex items-center gap-x-3'>
+			<span className='text-void-fg-3 text-xs pointer-events-none inline-block w-10'>{isEnabled ? 'Thinking' : 'Thinking'}</span>
+			<VoidSwitch
+				size='xxs'
+				value={isEnabled}
+				onChange={(newVal) => { voidSettingsService.setOptionsOfModelSelection(modelSelection.providerName, modelSelection.modelName, { reasoningEnabled: newVal }) }}
+			/>
+		</div>
 	}
 
 	let slider: React.ReactNode = null
@@ -205,6 +203,66 @@ const ReasoningOptionDropdown = () => {
 
 
 
+// SLIDER ONLY:
+// const ReasoningOptionDropdown = () => {
+// 	const accessor = useAccessor()
+
+// 	const voidSettingsService = accessor.get('IVoidSettingsService')
+// 	const voidSettingsState = useSettingsState()
+
+// 	const modelSelection = voidSettingsState.modelSelectionOfFeature['Ctrl+L']
+// 	if (!modelSelection) return null
+
+// 	const { modelName, providerName } = modelSelection
+// 	const { canToggleReasoning, reasoningBudgetOptions } = getModelCapabilities(providerName, modelName).supportsReasoningOutput || {}
+
+// 	const defaultEnabledVal = canToggleReasoning ? true : false
+// 	const isEnabled = voidSettingsState.optionsOfModelSelection[modelSelection.providerName]?.[modelSelection.modelName]?.reasoningEnabled ?? defaultEnabledVal
+
+// 	if (canToggleReasoning && !reasoningBudgetOptions) { // if it's just a on/off toggle without a power slider (no models right now)
+// 		return <div className='flex items-center gap-x-2'>
+// 			<span className='text-void-fg-3 text-xs pointer-events-none inline-block w-10'>{isEnabled ? 'Thinking' : 'Thinking'}</span>
+// 			<VoidSwitch
+// 				size='xs'
+// 				value={isEnabled}
+// 				onChange={(newVal) => { }}
+// 			/>
+// 		</div>
+// 	}
+
+// 	if (reasoningBudgetOptions?.type === 'slider') { // if it's a slider
+// 		const { min: min_, max, default: defaultVal } = reasoningBudgetOptions
+
+// 		const value = voidSettingsState.optionsOfModelSelection[modelSelection.providerName]?.[modelSelection.modelName]?.reasoningBudget ?? defaultVal
+
+// 		const nSteps = 8 // only used in calculating stepSize, stepSize is what actually matters
+// 		const stepSize = Math.round((max - min_) / 8)
+// 		const min = canToggleReasoning ? min_ - stepSize : min_
+
+// 		return <div className='flex items-center gap-x-2'>
+// 			<span className='text-void-fg-3 text-xs pointer-events-none inline-block w-10'>Thinking</span>
+// 			<VoidSlider
+// 				width={50}
+// 				size='xs'
+// 				min={min}
+// 				max={max}
+// 				step={stepSize}
+// 				value={value}
+// 				onChange={(newVal) => {
+// 					const disabled = newVal === min && canToggleReasoning
+// 					voidSettingsService.setOptionsOfModelSelection(modelSelection.providerName, modelSelection.modelName, { reasoningEnabled: !disabled, reasoningBudget: newVal })
+// 				}}
+// 			/>
+// 			<span className='text-void-fg-3 text-xs pointer-events-none'>{isEnabled ? `${value} tokens` : 'Thinking disabled'}</span>
+// 		</div>
+// 	}
+
+// 	return null
+// }
+
+
+
+
 
 interface VoidChatAreaProps {
 	// Required
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
index f5a45795..00a1fbbb 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
@@ -211,8 +211,6 @@ export const VoidInputBox = ({ onChangeText, onCreateInstance, inputBoxRef, plac
 	/>
 };
 
-
-
 export const VoidSlider = ({
 	value,
 	onChange,
@@ -300,11 +298,23 @@ export const VoidSlider = ({
 				style={{
 					width,
 					// Add horizontal padding equal to half the thumb width
-					paddingLeft: thumbSizePx / 2,
-					paddingRight: thumbSizePx / 2
+					// paddingLeft: thumbSizePx / 2,
+					// paddingRight: thumbSizePx / 2
 				}}>
 				{/* Track container with adjusted width */}
 				<div className="relative w-full">
+					{/* Invisible wider clickable area that sits above the track */}
+					<div
+						className="absolute w-full cursor-pointer"
+						style={{
+							height: '16px',
+							top: '50%',
+							transform: 'translateY(-50%)',
+							zIndex: 1
+						}}
+						onClick={handleTrackClick}
+					/>
+
 					{/* Track */}
 					<div
 						className={`relative ${size === 'xs' ? 'h-1' :
@@ -328,7 +338,7 @@ export const VoidSlider = ({
 						className={`absolute top-1/2 transform -translate-x-1/2 -translate-y-1/2
 							${size === 'xs' ? 'h-2.5 w-2.5' : size === 'sm' ? 'h-3 w-3' : size === 'sm+' ? 'h-3.5 w-3.5' : 'h-4 w-4'}
 							bg-white dark:bg-gray-900 rounded-full shadow-md ${disabled ? 'cursor-not-allowed' : 'cursor-grab active:cursor-grabbing'}`}
-						style={{ left: `${percentage}%` }}
+						style={{ left: `${percentage}%`, zIndex: 2 }}  // Ensure thumb is above the invisible clickable area
 						onMouseDown={(e) => {
 							if (disabled) return;
 
@@ -361,6 +371,7 @@ export const VoidSlider = ({
 
 
 
+
 export const VoidSwitch = ({
 	value,
 	onChange,
@@ -370,7 +381,7 @@ export const VoidSwitch = ({
 	value: boolean;
 	onChange: (value: boolean) => void;
 	disabled?: boolean;
-	size?: 'xs' | 'sm' | 'sm+' | 'md';
+	size?: 'xxs' | 'xs' | 'sm' | 'sm+' | 'md';
 }) => {
 	return (
 		<label className="inline-flex items-center">
@@ -381,6 +392,7 @@ export const VoidSwitch = ({
 			relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out
 			${value ? 'bg-gray-900 dark:bg-white' : 'bg-gray-200 dark:bg-gray-700'}
 			${disabled ? 'opacity-25' : ''}
+			${size === 'xxs' ? 'h-3 w-5' : ''}
 			${size === 'xs' ? 'h-4 w-7' : ''}
 			${size === 'sm' ? 'h-5 w-9' : ''}
 			${size === 'sm+' ? 'h-5 w-10' : ''}
@@ -390,10 +402,12 @@ export const VoidSwitch = ({
 				<span
 					className={`
 			  inline-block transform rounded-full bg-white dark:bg-gray-900 shadow transition-transform duration-200 ease-in-out
+			  ${size === 'xxs' ? 'h-2 w-2' : ''}
 			  ${size === 'xs' ? 'h-2.5 w-2.5' : ''}
 			  ${size === 'sm' ? 'h-3 w-3' : ''}
 			  ${size === 'sm+' ? 'h-3.5 w-3.5' : ''}
 			  ${size === 'md' ? 'h-4 w-4' : ''}
+			  ${size === 'xxs' ? (value ? 'translate-x-2.5' : 'translate-x-0.5') : ''}
 			  ${size === 'xs' ? (value ? 'translate-x-3.5' : 'translate-x-0.5') : ''}
 			  ${size === 'sm' ? (value ? 'translate-x-5' : 'translate-x-1') : ''}
 			  ${size === 'sm+' ? (value ? 'translate-x-6' : 'translate-x-1') : ''}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
index a4ecde94..f4943936 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
@@ -40,7 +40,7 @@ const ModelSelectBox = ({ options, featureName }: { options: ModelOption[], feat
 		getOptionDropdownName={(option) => option.selection.modelName}
 		getOptionDropdownDetail={(option) => option.selection.providerName}
 		getOptionsEqual={(a, b) => optionsEqual([a], [b])}
-		className='text-xs text-void-fg-3 px-1'
+		className='text-xs text-void-fg-3'
 		matchInputWidth={false}
 	/>
 }
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 8073ca12..d809aa44 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
@@ -443,7 +443,7 @@ export const FeaturesTab = () => {
 				<div className='w-full'>
 					<h4 className={`text-base`}>{displayInfoOfFeatureName('Autocomplete')}</h4>
 					<div className='text-sm italic text-void-fg-3 my-1'>Experimental. Only works with models that support FIM.</div>
-					<div className='flex items-center gap-x-3'>
+					<div className='flex items-center gap-x-2'>
 						<VoidSwitch
 							size='xs'
 							value={voidSettingsState.globalSettings.enableAutocomplete}