checkbox

src/vs/platform/void/common/configTypes.ts

@@ -250,17 +250,17 @@ export const descOfSettingName = (providerName: ProviderName, settingName: Union
 
 export const inputTypeOfSettingName = (settingName: UnionOfKeys<VoidConfigState[ProviderName]>) => {
 	if (settingName === 'apiKey')
-		return 'string'
+		return 'string' as const
 	else if (settingName === 'endpoint')
-		return 'string'
+		return 'string' as const
 	else if (settingName === 'maxTokens')
-		return 'number'
+		return 'number' as const
 	else if (settingName === 'model')
-		return 'string'
+		return 'string' as const
 	else if (settingName === 'enabled')
-		return 'boolean'
+		return 'boolean' as const
 	else if (settingName === 'models')
-		return 'string[]?'
+		return 'string[]?' as const
 
 	throw new Error(`inputType: Unknown setting name: "${settingName}"`)
 }

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarProviderSettings.tsx

@@ -4,8 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 import React, { Fragment } from 'react'
-import { descOfSettingName, ProviderName, providerNames, voidProviderDefaults } from '../../../../../../../platform/void/common/configTypes.js'
+import { descOfSettingName, inputTypeOfSettingName, ProviderName, providerNames, voidProviderDefaults } from '../../../../../../../platform/void/common/configTypes.js'
-import { VoidInputBox, VoidSelectBox } from './inputs.js'
+import { VoidCheckBox, VoidInputBox, VoidSelectBox } from './inputs.js'
 import { useConfigState, useService } from '../util/services.js'
 
 const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) => {
@@ -25,13 +25,22 @@ const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) =
 
 			return <Fragment key={i}>
 				<h2>{descOfSettingName(providerName, sName)}</h2>
-				<VoidInputBox
+				{
-					initVal={defaultVal}
+					inputTypeOfSettingName(sName) === 'boolean' ?
-					onChangeText={(newVal) => { () => { voidConfigService.setState(providerName, sName, newVal) } }}
+						<VoidCheckBox
-					placeholder={settingName}
+							initVal={defaultVal === 'true'}
-					multiline={false}
+							onChangeChecked={(newVal) => { voidConfigService.setState(providerName, sName, newVal ? 'true' : 'false') }}
-					inputBoxRef={{ current: null }}
+							label={settingName}
-				/>
+							checkboxRef={{ current: null }}
+						/>
+						:
+						<VoidInputBox
+							initVal={defaultVal}
+							onChangeText={(newVal) => { () => { voidConfigService.setState(providerName, sName, newVal) } }}
+							placeholder={settingName}
+							multiline={false}
+							inputBoxRef={{ current: null }}
+						/>}
 			</Fragment>
 		})}
 
@@ -45,8 +54,7 @@ const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) =
 				selectBoxRef={{ current: null }}
 			/>}
 
-		<h2>{'Enabled'}</h2>
+
-		todo
 
 	</>
 }

src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx

@@ -1,8 +1,11 @@
 import React, { useEffect, useRef } from 'react';
 import { useService } from '../util/services.js';
 import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
-import { defaultInputBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
+import { defaultCheckboxStyles, defaultInputBoxStyles, defaultToggleStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
 import { SelectBox, unthemedSelectBoxStyles } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
+import { Checkbox, Toggle } from '../../../../../../../base/browser/ui/toggle/toggle.js';
+
+// settingitem
 
 export const VoidInputBox = ({ onChangeText, initVal, placeholder, inputBoxRef, multiline }: {
 	onChangeText: (value: string) => void;
@@ -102,3 +105,49 @@ export const VoidSelectBox = ({ onChangeSelection, initVal, selectBoxRef, option
 
 	return <div ref={containerRef} className="w-full" />;
 };
+
+
+
+
+
+export const VoidCheckBox = ({ onChangeChecked, initVal, label, checkboxRef, }: {
+	onChangeChecked: (checked: boolean) => void;
+	initVal: boolean;
+	checkboxRef: React.MutableRefObject<Toggle | null>;
+	label: string;
+}) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!containerRef.current) return;
+
+		// Create and mount the Checkbox using VSCode's implementation
+		checkboxRef.current = new Toggle({
+			title: label,
+			isChecked: initVal,
+			...defaultToggleStyles
+		});
+
+		containerRef.current.appendChild(checkboxRef.current.domNode);
+
+		checkboxRef.current.onChange(checked => {
+			console.log('CHANGE checked state on checkbox', checked);
+			onChangeChecked(checked);
+		});
+
+		// cleanup
+		return () => {
+			if (checkboxRef.current) {
+				checkboxRef.current.dispose();
+				if (containerRef.current) {
+					while (containerRef.current.firstChild) {
+						containerRef.current.removeChild(containerRef.current.firstChild);
+					}
+				}
+				checkboxRef.current = null;
+			}
+		};
+	}, [checkboxRef, label, initVal, onChangeChecked]);
+
+	return <div ref={containerRef} className="w-full" />;
+};