Skip to content

Commit 686f7f2

Browse files
mrubensmrubens
committed
Make experimental settings more visually consistent
1 parent ff50a47 commit 686f7f2

File tree

2 files changed

+116
-99
lines changed

2 files changed

+116
-99
lines changed

‎webview-ui/src/components/settings/CodeIndexSettings.tsx‎

Lines changed: 116 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -140,23 +140,27 @@ export const CodeIndexSettings: React.FC<CodeIndexSettingsProps> = ({
140140

141141
return (
142142
<>
143-
<VSCodeCheckbox
144-
checked={codebaseIndexConfig?.codebaseIndexEnabled}
145-
onChange={(e: any) =>
146-
setCachedStateField("codebaseIndexConfig", {
147-
...codebaseIndexConfig,
148-
codebaseIndexEnabled: e.target.checked,
149-
})
150-
}>
151-
⚠️ {t("settings:codeIndex.enableLabel")}
152-
</VSCodeCheckbox>
153-
<div className="text-vscode-descriptionForeground text-sm mt-1 pl-6">
154-
{t("settings:codeIndex.enableDescription")}
143+
<div>
144+
<div className="flex items-center gap-2">
145+
<VSCodeCheckbox
146+
checked={codebaseIndexConfig?.codebaseIndexEnabled}
147+
onChange={(e: any) =>
148+
setCachedStateField("codebaseIndexConfig", {
149+
...codebaseIndexConfig,
150+
codebaseIndexEnabled: e.target.checked,
151+
})
152+
}>
153+
<span className="font-medium">{t("settings:codeIndex.enableLabel")}</span>
154+
</VSCodeCheckbox>
155+
</div>
156+
<p className="text-vscode-descriptionForeground text-sm mt-0">
157+
{t("settings:codeIndex.enableDescription")}
158+
</p>
155159
</div>
156160

157161
{codebaseIndexConfig?.codebaseIndexEnabled && (
158-
<div className="mt-4 space-y-4">
159-
<div className="text-sm text-vscode-descriptionForeground mt-4">
162+
<div className="flex flex-col gap-3 pl-3 border-l-2 border-vscode-button-background">
163+
<div className="text-sm text-vscode-descriptionForeground">
160164
<span
161165
className={`
162166
inline-block w-3 h-3 rounded-full mr-2
@@ -177,7 +181,7 @@ export const CodeIndexSettings: React.FC<CodeIndexSettingsProps> = ({
177181
</div>
178182

179183
{indexingStatus.systemStatus === "Indexing" && (
180-
<div className="mt-4 space-y-1">
184+
<div className="space-y-1">
181185
<ProgressPrimitive.Root
182186
className="relative h-2 w-full overflow-hidden rounded-full bg-secondary"
183187
value={progressPercentage}>
@@ -191,76 +195,86 @@ export const CodeIndexSettings: React.FC<CodeIndexSettingsProps> = ({
191195
</div>
192196
)}
193197

194-
<div style={{ fontWeight: "normal", marginBottom: "4px" }}>
195-
{t("settings:codeIndex.providerLabel")}
198+
<div className="flex items-center gap-4 font-bold">
199+
<div>{t("settings:codeIndex.providerLabel")}</div>
196200
</div>
197-
<div className="flex items-center gap-2">
198-
<Select
199-
value={codebaseIndexConfig?.codebaseIndexEmbedderProvider || "openai"}
200-
onValueChange={(value) => {
201-
const newProvider = value as EmbedderProvider
202-
const models = codebaseIndexModels?.[newProvider]
203-
const modelIds = models ? Object.keys(models) : []
204-
const defaultModelId = modelIds.length > 0 ? modelIds[0] : "" // Use empty string if no models
201+
<div>
202+
<div className="flex items-center gap-2">
203+
<Select
204+
value={codebaseIndexConfig?.codebaseIndexEmbedderProvider || "openai"}
205+
onValueChange={(value) => {
206+
const newProvider = value as EmbedderProvider
207+
const models = codebaseIndexModels?.[newProvider]
208+
const modelIds = models ? Object.keys(models) : []
209+
const defaultModelId = modelIds.length > 0 ? modelIds[0] : "" // Use empty string if no models
205210

206-
if (codebaseIndexConfig) {
207-
setCachedStateField("codebaseIndexConfig", {
208-
...codebaseIndexConfig,
209-
codebaseIndexEmbedderProvider: newProvider,
210-
codebaseIndexEmbedderModelId: defaultModelId,
211-
})
212-
}
213-
}}>
214-
<SelectTrigger className="w-full">
215-
<SelectValue placeholder={t("settings:codeIndex.selectProviderPlaceholder")} />
216-
</SelectTrigger>
217-
<SelectContent>
218-
<SelectItem value="openai">{t("settings:codeIndex.openaiProvider")}</SelectItem>
219-
<SelectItem value="ollama">{t("settings:codeIndex.ollamaProvider")}</SelectItem>
220-
</SelectContent>
221-
</Select>
211+
if (codebaseIndexConfig) {
212+
setCachedStateField("codebaseIndexConfig", {
213+
...codebaseIndexConfig,
214+
codebaseIndexEmbedderProvider: newProvider,
215+
codebaseIndexEmbedderModelId: defaultModelId,
216+
})
217+
}
218+
}}>
219+
<SelectTrigger className="w-full">
220+
<SelectValue placeholder={t("settings:codeIndex.selectProviderPlaceholder")} />
221+
</SelectTrigger>
222+
<SelectContent>
223+
<SelectItem value="openai">{t("settings:codeIndex.openaiProvider")}</SelectItem>
224+
<SelectItem value="ollama">{t("settings:codeIndex.ollamaProvider")}</SelectItem>
225+
</SelectContent>
226+
</Select>
227+
</div>
222228
</div>
223229

224230
{codebaseIndexConfig?.codebaseIndexEmbedderProvider === "openai" && (
225-
<div className="space-y-2">
226-
<VSCodeTextField
227-
type="password"
228-
value={apiConfiguration.codeIndexOpenAiKey || ""}
229-
onInput={(e: any) => setApiConfigurationField("codeIndexOpenAiKey", e.target.value)}
230-
style={{ width: "100%" }}>
231-
{t("settings:codeIndex.openaiKeyLabel")}
232-
</VSCodeTextField>
231+
<div className="flex flex-col gap-3">
232+
<div className="flex items-center gap-4 font-bold">
233+
<div>{t("settings:codeIndex.openaiKeyLabel")}</div>
234+
</div>
235+
<div>
236+
<VSCodeTextField
237+
type="password"
238+
value={apiConfiguration.codeIndexOpenAiKey || ""}
239+
onInput={(e: any) => setApiConfigurationField("codeIndexOpenAiKey", e.target.value)}
240+
style={{ width: "100%" }}></VSCodeTextField>
241+
</div>
233242
</div>
234243
)}
235244

236-
<div style={{ fontWeight: "normal", marginBottom: "4px" }}>
237-
{t("settings:codeIndex.modelLabel")}
245+
<div className="flex items-center gap-4 font-bold">
246+
<div>{t("settings:codeIndex.modelLabel")}</div>
238247
</div>
239-
<div className="flex items-center gap-2">
240-
<Select
241-
value={codebaseIndexConfig?.codebaseIndexEmbedderModelId || ""}
242-
onValueChange={(value) =>
243-
setCachedStateField("codebaseIndexConfig", {
244-
...codebaseIndexConfig,
245-
codebaseIndexEmbedderModelId: value,
246-
})
247-
}>
248-
<SelectTrigger className="w-full">
249-
<SelectValue placeholder={t("settings:codeIndex.selectModelPlaceholder")} />
250-
</SelectTrigger>
251-
<SelectContent>
252-
{availableModelIds.map((modelId) => (
253-
<SelectItem key={modelId} value={modelId}>
254-
{modelId}
255-
</SelectItem>
256-
))}
257-
</SelectContent>
258-
</Select>
248+
<div>
249+
<div className="flex items-center gap-2">
250+
<Select
251+
value={codebaseIndexConfig?.codebaseIndexEmbedderModelId || ""}
252+
onValueChange={(value) =>
253+
setCachedStateField("codebaseIndexConfig", {
254+
...codebaseIndexConfig,
255+
codebaseIndexEmbedderModelId: value,
256+
})
257+
}>
258+
<SelectTrigger className="w-full">
259+
<SelectValue placeholder={t("settings:codeIndex.selectModelPlaceholder")} />
260+
</SelectTrigger>
261+
<SelectContent>
262+
{availableModelIds.map((modelId) => (
263+
<SelectItem key={modelId} value={modelId}>
264+
{modelId}
265+
</SelectItem>
266+
))}
267+
</SelectContent>
268+
</Select>
269+
</div>
259270
</div>
260271

261272
{codebaseIndexConfig?.codebaseIndexEmbedderProvider === "ollama" && (
262-
<>
263-
<div className="space-y-2">
273+
<div className="flex flex-col gap-3">
274+
<div className="flex items-center gap-4 font-bold">
275+
<div>{t("settings:codeIndex.ollamaUrlLabel")}</div>
276+
</div>
277+
<div>
264278
<VSCodeTextField
265279
value={codebaseIndexConfig.codebaseIndexEmbedderBaseUrl || ""}
266280
onInput={(e: any) =>
@@ -269,38 +283,42 @@ export const CodeIndexSettings: React.FC<CodeIndexSettingsProps> = ({
269283
codebaseIndexEmbedderBaseUrl: e.target.value,
270284
})
271285
}
272-
style={{ width: "100%" }}>
273-
{t("settings:codeIndex.ollamaUrlLabel")}
274-
</VSCodeTextField>
286+
style={{ width: "100%" }}></VSCodeTextField>
275287
</div>
276-
</>
288+
</div>
277289
)}
278290

279-
<div className="space-y-2">
280-
<VSCodeTextField
281-
value={codebaseIndexConfig.codebaseIndexQdrantUrl}
282-
onInput={(e: any) =>
283-
setCachedStateField("codebaseIndexConfig", {
284-
...codebaseIndexConfig,
285-
codebaseIndexQdrantUrl: e.target.value,
286-
})
287-
}
288-
style={{ width: "100%" }}>
289-
{t("settings:codeIndex.qdrantUrlLabel")}
290-
</VSCodeTextField>
291+
<div className="flex flex-col gap-3">
292+
<div className="flex items-center gap-4 font-bold">
293+
<div>{t("settings:codeIndex.qdrantUrlLabel")}</div>
294+
</div>
295+
<div>
296+
<VSCodeTextField
297+
value={codebaseIndexConfig.codebaseIndexQdrantUrl}
298+
onInput={(e: any) =>
299+
setCachedStateField("codebaseIndexConfig", {
300+
...codebaseIndexConfig,
301+
codebaseIndexQdrantUrl: e.target.value,
302+
})
303+
}
304+
style={{ width: "100%" }}></VSCodeTextField>
305+
</div>
291306
</div>
292307

293-
<div className="space-y-2">
294-
<VSCodeTextField
295-
type="password"
296-
value={apiConfiguration.codeIndexQdrantApiKey}
297-
onInput={(e: any) => setApiConfigurationField("codeIndexQdrantApiKey", e.target.value)}
298-
style={{ width: "100%" }}>
299-
{t("settings:codeIndex.qdrantKeyLabel")}
300-
</VSCodeTextField>
308+
<div className="flex flex-col gap-3">
309+
<div className="flex items-center gap-4 font-bold">
310+
<div>{t("settings:codeIndex.qdrantKeyLabel")}</div>
311+
</div>
312+
<div>
313+
<VSCodeTextField
314+
type="password"
315+
value={apiConfiguration.codeIndexQdrantApiKey}
316+
onInput={(e: any) => setApiConfigurationField("codeIndexQdrantApiKey", e.target.value)}
317+
style={{ width: "100%" }}></VSCodeTextField>
318+
</div>
301319
</div>
302320

303-
<div className="flex gap-2 mt-4">
321+
<div className="flex gap-2">
304322
{(indexingStatus.systemStatus === "Error" || indexingStatus.systemStatus === "Standby") && (
305323
<VSCodeButton
306324
onClick={() => vscode.postMessage({ type: "startIndexing" })}

‎webview-ui/src/components/settings/ExperimentalFeature.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export const ExperimentalFeature = ({ enabled, onChange, experimentKey }: Experi
1818
return (
1919
<div>
2020
<div className="flex items-center gap-2">
21-
<span className="text-vscode-errorForeground">{t("settings:experimental.warning")}</span>
2221
<VSCodeCheckbox checked={enabled} onChange={(e: any) => onChange(e.target.checked)}>
2322
<span className="font-medium">{t(nameKey)}</span>
2423
</VSCodeCheckbox>

0 commit comments

Comments
 (0)