From 2ba04a78a8bbc6fa1f4ec879c39c9fc0e4d54b6d Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Sun, 5 Jan 2025 21:02:31 -0800
Subject: [PATCH] add X to ctrlK

---
 .../react/src/markdown/ChatMarkdownRender.tsx |  8 ++---
 .../src/quick-edit-tsx/QuickEditChat.tsx      | 17 +++++++----
 .../react/src/sidebar-tsx/ErrorDisplay.tsx    | 30 +++++++++----------
 .../react/src/sidebar-tsx/SidebarChat.tsx     |  9 ++----
 .../src/sidebar-tsx/SidebarThreadSelector.tsx |  4 +--
 .../react/src/void-settings-tsx/Settings.tsx  | 17 +++++------
 6 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx b/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx
index dc134d6f..e89cb665 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx
@@ -49,14 +49,14 @@ const CodeButtonsOnHover = ({ text }: { text: string }) => {
 
 	return <>
 		<button
-			className={`${isSingleLine ? '' : 'px-1 py-0.5'} text-xs bg-void-bg-1 text-void-fg-1 hover:brightness-110 border border-vscode-input-border rounded text-xs`}
+			className={`${isSingleLine ? '' : 'px-1 py-0.5'} text-sm bg-void-bg-1 text-void-fg-1 hover:brightness-110 border border-vscode-input-border rounded`}
 			onClick={onCopy}
 		>
 			{copyButtonState}
 		</button>
 		<button
-			// btn btn-secondary btn-sm border text-xs border-vscode-input-border rounded
-			className={`${isSingleLine ? '' : 'px-1 py-0.5'} text-xs bg-void-bg-1 text-void-fg-1 hover:brightness-110 border border-vscode-input-border rounded text-xs`}
+			// btn btn-secondary btn-sm border text-sm border-vscode-input-border rounded
+			className={`${isSingleLine ? '' : 'px-1 py-0.5'} text-sm bg-void-bg-1 text-void-fg-1 hover:brightness-110 border border-vscode-input-border rounded`}
 			onClick={onApply}
 		>
 			Apply
@@ -215,7 +215,7 @@ const RenderToken = ({ token, nested = false }: { token: Token | string, nested?
 	// default
 	return (
 		<div className="bg-orange-50 rounded-sm overflow-hidden">
-			<span className="text-xs text-orange-500">Unknown type:</span>
+			<span className="text-sm text-orange-500">Unknown type:</span>
 			{t.raw}
 		</div>
 	)
diff --git a/src/vs/workbench/contrib/void/browser/react/src/quick-edit-tsx/QuickEditChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/quick-edit-tsx/QuickEditChat.tsx
index 6925079d..6d66c5a3 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/quick-edit-tsx/QuickEditChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/quick-edit-tsx/QuickEditChat.tsx
@@ -120,12 +120,7 @@ export const QuickEditChat = ({ diffareaid, onGetInputBox, onUserUpdateText, onC
 					@@[&_div.monaco-inputbox]:!void-border-none
 					@@[&_div.monaco-inputbox]:!void-outline-none`}
 			>
-				<div className='flex flex-row justify-between items-end gap-1'>
-					<div className='absolute size-[4px] top-0 right-4 z-[1]'>
-						<X
-							onClick={onX}
-						/>
-					</div>
+				<div className='flex flex-row items-center justify-between items-end gap-1'>
 
 					{/* input */}
 					<div // copied from SidebarChat.tsx
@@ -150,6 +145,16 @@ export const QuickEditChat = ({ diffareaid, onGetInputBox, onUserUpdateText, onC
 						/>
 					</div>
 
+					<div className='absolute pt-1 -top-1 -right-1'>
+						<span className='cursor-pointer hover:bg-red-500 rounded-md z-1'>
+							<X
+								className='size-3 text-vscode-toolbar-foreground'
+								onClick={onX}
+							/>
+						</span>
+					</div>
+
+
 				</div>
 
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ErrorDisplay.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ErrorDisplay.tsx
index 714fbf26..55519668 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ErrorDisplay.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ErrorDisplay.tsx
@@ -36,38 +36,38 @@ export const ErrorDisplay = ({
 	return (
 		<div className={`rounded-lg border border-red-200 bg-red-50 p-4 overflow-auto`}>
 			{/* Header */}
-			<div className="flex items-start justify-between">
-				<div className="flex gap-3">
-					<AlertCircle className="h-5 w-5 text-red-600 mt-0.5" />
-					<div className="flex-1">
-						<h3 className="font-semibold text-red-800">
+			<div className='flex items-start justify-between'>
+				<div className='flex gap-3'>
+					<AlertCircle className='h-5 w-5 text-red-600 mt-0.5' />
+					<div className='flex-1'>
+						<h3 className='font-semibold text-red-800'>
 							{/* eg Error */}
 							Error
 						</h3>
-						<p className="text-red-700 mt-1">
+						<p className='text-red-700 mt-1'>
 							{/* eg Something went wrong */}
 							{message}
 						</p>
 					</div>
 				</div>
 
-				<div className="flex gap-2">
+				<div className='flex gap-2'>
 					{details && (
-						<button className="text-red-600 hover:text-red-800 p-1 rounded"
+						<button className='text-red-600 hover:text-red-800 p-1 rounded'
 							onClick={() => setIsExpanded(!isExpanded)}
 						>
 							{isExpanded ? (
-								<ChevronUp className="h-5 w-5" />
+								<ChevronUp className='h-5 w-5' />
 							) : (
-								<ChevronDown className="h-5 w-5" />
+								<ChevronDown className='h-5 w-5' />
 							)}
 						</button>
 					)}
 					{showDismiss && onDismiss && (
-						<button className="text-red-600 hover:text-red-800 p-1 rounded"
+						<button className='text-red-600 hover:text-red-800 p-1 rounded'
 							onClick={onDismiss}
 						>
-							<X className="h-5 w-5" />
+							<X className='h-5 w-5' />
 						</button>
 					)}
 				</div>
@@ -75,10 +75,10 @@ export const ErrorDisplay = ({
 
 			{/* Expandable Details */}
 			{isExpanded && details && (
-				<div className="mt-4 space-y-3 border-t border-red-200 pt-3 overflow-auto">
+				<div className='mt-4 space-y-3 border-t border-red-200 pt-3 overflow-auto'>
 					<div>
-						<span className="font-semibold text-red-800">Full Error: </span>
-						<pre className="text-red-700">{details}</pre>
+						<span className='font-semibold text-red-800'>Full Error: </span>
+						<pre className='text-red-700'>{details}</pre>
 					</div>
 				</div>
 			)}
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 6b6e3bc3..e34209ae 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
@@ -272,7 +272,7 @@ export const SelectedFiles = (
 	return (
 		!!selections && selections.length !== 0 && (
 			<div
-				className='flex flex-wrap gap-2 text-left'
+				className='flex flex-wrap gap-0.5 text-left'
 			>
 				{selections.map((selection, i) => {
 
@@ -311,12 +311,7 @@ export const SelectedFiles = (
 								{/* X button */}
 								{type === 'staging' &&
 									<span
-										className='
-											cursor-pointer
-											bg-vscode-editorwidget-bg hover:bg-vscode-toolbar-hover-bg
-											rounded-md
-											z-1
-										'
+										className='cursor-pointer hover:bg-vscode-toolbar-hover-bg rounded-md z-1'
 										onClick={(e) => {
 											e.stopPropagation();
 											if (type !== 'staging') return;
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
index e6adb5f2..130ccf10 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
@@ -53,7 +53,7 @@ export const SidebarThreadSelector = () => {
 			</div>
 
 			{/* a list of all the past threads */}
-			<div className='flex flex-col gap-y-1 overflow-y-auto'>
+			<div className='px-1'><div className='flex flex-col gap-y-1 overflow-y-auto'>
 				{sortedThreadIds.map((threadId) => {
 					if (!allThreads)
 						return <>Error: Threads not found.</>
@@ -88,7 +88,7 @@ export const SidebarThreadSelector = () => {
 						</button>
 					)
 				})}
-			</div>
+			</div></div>
 
 		</div>
 	)
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 fa27d55a..8239ef88 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
@@ -197,7 +197,6 @@ export const ModelDump = () => {
 
 			return <div key={`${modelName}${providerName}`}
 				className={`flex items-center justify-between gap-4 hover:bg-black/10 dark:hover:bg-gray-300/10 py-1 px-3 rounded-sm overflow-hidden cursor-default truncate
-					${isNewProviderName ? 'border-void-bg-1 border-t' : ''}
 				`}
 			>
 				{/* left part is width:full */}
@@ -285,7 +284,7 @@ const ProviderSetting = ({ providerName, settingName }: { providerName: Provider
 				}, [voidSettingsService, providerName, settingName])}
 				multiline={false}
 			/>
-			{subTextMd === undefined ? null : <div className='py-1 px-3 opacity-50 text-xs'>
+			{subTextMd === undefined ? null : <div className='py-1 px-3 opacity-50 text-sm'>
 				<ChatMarkdownRender string={subTextMd} />
 			</div>}
 
@@ -425,13 +424,13 @@ export const Settings = () => {
 							{/* <h3 className={`opacity-50 mb-2`}>{`Keep your data private by hosting AI locally on your computer.`}</h3> */}
 							{/* <h3 className={`opacity-50 mb-2`}>{`Instructions:`}</h3> */}
 							{/* <h3 className={`mb-2`}>{`Void can access any model that you host locally. We automatically detect your local models by default.`}</h3> */}
-							<h3 className={`text-void-fg-3 mb-2`}>{`Host a model locally and use it in Void. Instructions:`}</h3>
+							<h3 className={`text-void-fg-3 mb-2`}>{`Void can access any model that you host locally. We automatically detect your local models by default.`}</h3>
 							<div className='pl-4 select-text opacity-50'>
-								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`1. Download [Ollama](https://ollama.com/download).`} /></h4>
-								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`2. Open your terminal.`} /></h4>
-								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`3. Run \`ollama run llama3.1\`. This installs Meta's llama3.1 model which is best for chat and inline edits. Requires 5GB of memory.`} /></h4>
-								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`4. Run \`ollama run qwen2.5-coder:1.5b\`. This installs a faster autocomplete model. Requires 1GB of memory.`} /></h4>
-								<h4 className={`text-xs mb-2`}><ChatMarkdownRender string={`Void automatically detects locally running models and enables them.`} /></h4>
+								<h4 className={`text-sm mb-2`}><ChatMarkdownRender string={`1. Download [Ollama](https://ollama.com/download).`} /></h4>
+								<h4 className={`text-sm mb-2`}><ChatMarkdownRender string={`2. Open your terminal.`} /></h4>
+								<h4 className={`text-sm mb-2`}><ChatMarkdownRender string={`3. Run \`ollama run llama3.1\`. This installs Meta's llama3.1 model which is best for chat and inline edits. Requires 5GB of memory.`} /></h4>
+								<h4 className={`text-sm mb-2`}><ChatMarkdownRender string={`4. Run \`ollama run qwen2.5-coder:1.5b\`. This installs a faster autocomplete model. Requires 1GB of memory.`} /></h4>
+								<h4 className={`text-sm mb-2`}><ChatMarkdownRender string={`Void automatically detects locally running models and enables them.`} /></h4>
 								{/* TODO we should create UI for downloading models without user going into terminal */}
 							</div>
 
@@ -440,7 +439,7 @@ export const Settings = () => {
 							</ErrorBoundary>
 
 							<h2 className={`text-3xl mb-2 mt-16`}>More Providers</h2>
-							<h3 className={`text-void-fg-3 mb-2`}>{`Get access to frontier models. We recommend Anthropic or OpenAI.`}</h3>
+							<h3 className={`text-void-fg-3 mb-2`}>{`Void can also access models from Anthropic, OpenAI, OpenRouter, and more.`}</h3>
 							{/* <h3 className={`opacity-50 mb-2`}>{`Access models like ChatGPT and Claude. We recommend using Anthropic or OpenAI as providers, or Groq as a faster alternative.`}</h3> */}
 							<ErrorBoundary>
 								<VoidProviderSettings providerNames={nonlocalProviderNames} />