upgrade to switches

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

@@ -13,7 +13,7 @@ import { IStorageService, StorageScope, StorageTarget } from '../../storage/comm
 import { defaultSettingsOfProvider, FeatureName, ProviderName, ModelSelectionOfFeature, SettingsOfProvider, SettingName, providerNames, ModelSelection, modelSelectionsEqual, featureNames, modelInfoOfDefaultNames, VoidModelInfo, FeatureFlagSettings, FeatureFlagName, defaultFeatureFlagSettings } from './voidSettingsTypes.js';
 
 
-const STORAGE_KEY = 'void.voidSettingsI'
+const STORAGE_KEY = 'void.voidSettingsStorage'
 
 type SetSettingOfProviderFn = <S extends SettingName>(
 	providerName: ProviderName,

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

@@ -110,8 +110,8 @@ export const customProviderSettings = {
 		apiKey: '',
 	},
 	openAICompatible: {
-		apiKey: '',
 		endpoint: '',
+		apiKey: '',
 	},
 	gemini: {
 		apiKey: '',

src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx

@@ -4,11 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 
 import React, { useCallback, useEffect, useRef } from 'react';
-import { useService } from '../util/services.js';
+import { useIsDark, useService } from '../util/services.js';
 import { IInputBoxStyles, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
-import { defaultInputBoxStyles, defaultSelectBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
+import { defaultCheckboxStyles, defaultInputBoxStyles, defaultSelectBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
 import { IDisposable } from '../../../../../../../base/common/lifecycle.js';
+import { Checkbox } from '../../../../../../../base/browser/ui/toggle/toggle.js';
 
 
 
@@ -48,7 +49,6 @@ export const VoidInputBox = ({ onChangeText, onCreateInstance, inputBoxRef, plac
 }) => {
 
 	const contextViewProvider = useService('contextViewService');
-
 	return <WidgetComponent
 		ctor={InputBox}
 		propsFn={useCallback((container) => [
@@ -93,6 +93,96 @@ export const VoidInputBox = ({ onChangeText, onCreateInstance, inputBoxRef, plac
 
 
 
+export const VoidSwitch = ({
+	value,
+	onChange,
+	label,
+	disabled = false,
+	size = 'md'
+}: {
+	value: boolean;
+	onChange: (value: boolean) => void;
+	label?: string;
+	disabled?: boolean;
+	size?: 'xs' | 'sm' | 'msm' | 'md';
+}) => {
+	return (
+		<label className="inline-flex items-center cursor-pointer">
+			<div
+				onClick={() => !disabled && onChange(!value)}
+				className={`
+			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-50 cursor-not-allowed' : 'cursor-pointer'}
+			${size === 'xs' ? 'h-4 w-7' : ''}
+			${size === 'sm' ? 'h-5 w-9' : ''}
+			${size === 'msm' ? 'h-5 w-10' : ''}
+			${size === 'md' ? 'h-6 w-11' : ''}
+		  `}
+			>
+				<span
+					className={`
+			  inline-block transform rounded-full bg-white dark:bg-gray-900 shadow transition-transform duration-200 ease-in-out
+			  ${size === 'xs' ? 'h-2.5 w-2.5' : ''}
+			  ${size === 'sm' ? 'h-3 w-3' : ''}
+			  ${size === 'msm' ? 'h-3.5 w-3.5' : ''}
+			  ${size === 'md' ? 'h-4 w-4' : ''}
+			  ${size === 'xs' ? (value ? 'translate-x-3.5' : 'translate-x-0.5') : ''}
+			  ${size === 'sm' ? (value ? 'translate-x-5' : 'translate-x-1') : ''}
+			  ${size === 'msm' ? (value ? 'translate-x-6' : 'translate-x-1') : ''}
+			  ${size === 'md' ? (value ? 'translate-x-6' : 'translate-x-1') : ''}
+			`}
+				/>
+			</div>
+			{label && (
+				<span className={`
+			ml-3 font-medium text-gray-900 dark:text-gray-100
+			${size === 'xs' ? 'text-xs' : 'text-sm'}
+		  `}>
+					{label}
+				</span>
+			)}
+		</label>
+	);
+};
+
+
+
+
+
+export const VoidCheckBox = ({ label, value, onClick, className }: { label: string, value: boolean, onClick: (checked: boolean) => void, className?: string }) => {
+	const divRef = useRef<HTMLDivElement | null>(null)
+	const instanceRef = useRef<Checkbox | null>(null)
+
+	useEffect(() => {
+		if (!instanceRef.current) return
+		instanceRef.current.checked = value
+	}, [value])
+
+
+	return <WidgetComponent
+		className={className ?? ''}
+		ctor={Checkbox}
+		propsFn={useCallback((container: HTMLDivElement) => {
+			divRef.current = container
+			return [label, value, defaultCheckboxStyles] as const
+		}, [label, value])}
+		onCreateInstance={useCallback((instance: Checkbox) => {
+			instanceRef.current = instance;
+			divRef.current?.append(instance.domNode)
+			const d = instance.onChange(() => onClick(instance.checked))
+			return [d]
+		}, [onClick])}
+		dispose={useCallback((instance: Checkbox) => {
+			instance.dispose()
+			instance.domNode.remove()
+		}, [])}
+
+	/>
+
+}
+
+
 export const VoidSelectBox = <T,>({ onChangeSelection, onCreateInstance, selectBoxRef, options }: {
 	onChangeSelection: (value: T) => void;
 	onCreateInstance?: ((instance: SelectBox) => void | IDisposable[]);

src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'
 import { ProviderName, SettingName, displayInfoOfSettingName, titleOfProviderName, providerNames, VoidModelInfo, featureFlagNames, displayInfoOfFeatureFlag, customSettingNamesOfProvider } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
 import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
-import { VoidInputBox, VoidSelectBox } from '../util/inputs.js'
+import { VoidCheckBox, VoidInputBox, VoidSelectBox, VoidSwitch } from '../util/inputs.js'
 import { useIsDark, useRefreshModelListener, useRefreshModelState, useService, useSettingsState } from '../util/services.js'
 import { X, RefreshCw, Loader2, Check } from 'lucide-react'
 import { RefreshableProviderName, refreshableProviderNames } from '../../../../../../../platform/void/common/refreshModelService.js'
@@ -226,7 +226,29 @@ const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) =
 	return <>
 		<div className='flex items-center gap-4'>
 			<h3 className='text-xl'>{titleOfProviderName(providerName)}</h3>
-			<button onClick={() => { voidSettingsService.setSettingOfProvider(providerName, 'enabled', !enabled) }}>{enabled ? '✅' : '❌'}</button>
+			<VoidSwitch
+				value={!!enabled}
+				onChange={
+					useCallback(() => {
+						const enabledRef = voidSettingsService.state.settingsOfProvider[providerName].enabled
+						voidSettingsService.setSettingOfProvider(providerName, 'enabled', !enabledRef)
+					}, [voidSettingsService, providerName])}
+				size='xs'
+				disabled={false}
+				label=''
+			/>
+			{/* <VoidCheckBox
+				checked={!!enabled}
+				onChange={
+					useCallback(() => {
+						const enabledRef = voidSettingsService.state.settingsOfProvider[providerName].enabled
+						voidSettingsService.setSettingOfProvider(providerName, 'enabled', !enabledRef)
+					}, [voidSettingsService, providerName])}
+			/> */}
+
+			{/* <button className='flex items-center'
+				onClick={() => { voidSettingsService.setSettingOfProvider(providerName, 'enabled', !enabled) }}
+			>{enabled ? '✅' : '❌'}</button> */}
 		</div>
 		{/* settings besides models (e.g. api key) */}
 		{settingNames.map((settingName, i) => {
@@ -254,10 +276,12 @@ export const VoidFeatureFlagSettings = () => {
 			const value = voidSettingsState.featureFlagSettings[flagName]
 			const { description } = displayInfoOfFeatureFlag(flagName)
 			return <div key={flagName} className='hover:bg-black/10 hover:dark:bg-gray-200/10 rounded-sm overflow-hidden py-1 px-3 my-1'>
-				<div className='flex items-center gap-4'>
-					<button onClick={() => { voidSettingsService.setFeatureFlag(flagName, !value) }}>
-						{value ? '✅' : '❌'}
-					</button>
+				<div className='flex items-center'>
+					<VoidCheckBox
+						label=''
+						value={value}
+						onClick={() => { voidSettingsService.setFeatureFlag(flagName, !value) }}
+					/>
 					<h4 className='text-sm'>{description}</h4>
 				</div>
 			</div>