style(arr): give the OpenAI endpoint its own row

Five fields wrapped the model onto a line of its own and clipped the base
URL placeholder. Paired under one label, the way the translator budgets
already are, and the base URL gets the width it needs.
This commit is contained in:
Miguel Palhas
2026-08-25 08:33:47 +01:00
parent abad9b9cfd
commit a45d8ff86a
+13 -7
View File
@@ -824,19 +824,14 @@ export function settingsMain(views: { hide: () => void }[], goHome: () => void):
const timeout = numberControl(settings.remote_command_timeout_seconds);
grid.append(field("remote command timeout (s)", timeout));
// #220: only meaningful when this build compiled the backend in, and the
// engine list is exactly that fact. Placeholders carry the two things
// the labels cannot: that the base URL is optional, and what a local one
// looks like.
const hasOpenAi = settings.available_engines.includes("openai");
const openAiBaseUrl = textControl(
settings.openai_base_url ?? "",
"optional — e.g. http://127.0.0.1:8080/v1",
);
const openAiModel = textControl(settings.openai_model ?? "", "optional — e.g. gpt-4o-mini");
if (hasOpenAi) {
grid.append(field("openai base url", openAiBaseUrl), field("openai model", openAiModel));
}
openAiBaseUrl.setAttribute("aria-label", "openai base url");
openAiModel.setAttribute("aria-label", "openai model");
panel.append(grid);
if (!hasEngines) {
@@ -849,6 +844,17 @@ export function settingsMain(views: { hide: () => void }[], goHome: () => void):
);
}
// Their own labelled row rather than two more cells in the grid above:
// paired, they belong to one engine, and a base URL needs the width.
if (hasOpenAi) {
panel.append(
el("p", "field-label readout dim", "openai-compatible endpoint — blank means its default"),
);
const openAiGrid = el("div", "form-grid");
openAiGrid.append(field("base url", openAiBaseUrl), field("model", openAiModel));
panel.append(openAiGrid);
}
const translatorInputs: Record<string, HTMLInputElement> = {};
if (hasEngines) {
panel.append(el("p", "field-label readout dim", "translator daily budgets"));