feat(yasgui): redesign the settings and make request settings global

The settings follow the settings window of textfold: pages grouped in the
navigation with icons, each setting a row with one line about it and its
control on the right, a fixed header and footer, and changes that apply at
once (the footer says "Saved"; Done closes). A new General page holds the
theme (Light, Dark or System), the editor themes, the request settings and
what happens before a query runs.

Request method, Accept headers and custom HTTP headers now apply to every
tab, including tabs opened later. The formatter, auto-format and the
CONSTRUCT check apply to every tab too and are kept across reloads.

Settings > AI keeps the services as cards and gets a form with a provider
list that fills in the base URL (still editable, with a reset), a link to
get an API key, and Fetch models with a searchable model list. When a
browser can't read a model list (CORS), the provider's known models are
offered and the form explains what to do.

Author: MathiasVDA

.changeset/settings-redesign.md

@@ -0,0 +1,9 @@
+---
+"@matdata/yasgui": minor
+---
+
+Redesign the settings, after the settings window of textfold. The pages are grouped in the navigation (Querying, Your data, Assistant, Help) with an icon each, and each setting is a row with one line about it and its control on the right (switches, segmented choices, selects). The header and footer stay in place while the page scrolls. Changes apply at once: the Save and Cancel buttons are gone, the footer says "Saved" after a change, and Done closes the settings.
+
+The new **General** page holds the theme (Light, Dark or System), the editor themes, the request settings and what happens before a query runs. The request method, Accept headers and custom HTTP headers now apply to every tab, including tabs opened later (stored as `requestSettings` in the persisted config); the formatter, auto-format and the CONSTRUCT check now apply to every tab too, and are kept across reloads. `tab.openSettings("request")` still works and opens General.
+
+Settings → AI: services stay cards, with the default one selected. Adding or editing a service now starts with a **Provider** list (searchable, grouped); the provider fills in the base URL, which can still be changed (marked "Changed", with a reset) and links to the page where users get an API key. **Fetch models** replaces Test connection and fills a searchable **Model** list, with the provider's recommended models first and any model id accepted. When a browser can't read a service's model list (CORS), MatGUI says so, offers the models it knows for that provider, and explains what to do (a proxy, OpenRouter, or the CORS setting of Ollama or LM Studio). Services remember their provider (`providerId`).

docs/developer-guide.md

@@ -712,7 +712,7 @@ interface Config {
   showSnippetsBar?: boolean;  // default: false
 
   // Tooltip with the label, description and type of an IRI hovered in the editor,
-  // fetched from the tab's endpoint. Users can also switch it off in Settings → Editor
+  // fetched from the tab's endpoint. Users can also switch it off in Settings → General
   iriHover?: boolean;  // default: true
 
   // Look up IRIs the endpoint doesn't describe in LOV (lov.linkeddata.es)
@@ -2574,7 +2574,7 @@ const id = tab.getId();
 
 ##### `openSettings(section?: string): void`
 
-Open the settings modal of this tab, optionally on a section (for example `"endpoints"`).
+Open the settings modal of this tab, optionally on a page: `"general"`, `"endpoints"`, `"prefix"`, `"editor"`, `"workspaces"`, `"importexport"`, `"ai"`, `"shortcuts"` or `"about"`. `"request"`, the name of an earlier page, opens `"general"`.
 
 ```javascript
 tab.openSettings("endpoints");

docs/user-guide.md

@@ -23,6 +23,21 @@ export interface PersistedJson {
   codeMirrorThemeLight?: string; // User-selected CodeMirror theme for light mode
   codeMirrorThemeDark?: string; // User-selected CodeMirror theme for dark mode
   sidePanel?: SidePanelState; // Left side panel (Queries / Endpoint / AI)
+  requestSettings?: RequestSettings; // Request settings of Settings → General, shared by all tabs
+  editorSettings?: EditorSettings; // Formatter and checks of Settings → General and Editor, shared by all tabs
+}
+/** Settings of the query editor that apply to every tab */
+export interface EditorSettings {
+  formatterType?: "sparql-formatter" | "legacy";
+  autoformatOnQuery?: boolean;
+  checkConstructVariables?: boolean;
+}
+/** The request settings users change in Settings → General; they apply to every tab */
+export interface RequestSettings {
+  method?: "GET" | "POST";
+  acceptHeaderSelect?: string;
+  acceptHeaderGraph?: string;
+  headers?: { [name: string]: string };
 }
 export interface SidePanelState {
   open: boolean;
@@ -193,6 +208,25 @@ export default class PersistentConfig {
     this.toStorage();
   }
 
+  /** The request settings shared by all tabs, or undefined when the user never changed them */
+  public getRequestSettings(): RequestSettings | undefined {
+    return this.persistedJson.requestSettings;
+  }
+
+  public setRequestSettings(settings: RequestSettings) {
+    this.persistedJson.requestSettings = { ...this.persistedJson.requestSettings, ...settings };
+    this.toStorage();
+  }
+
+  public getEditorSettings(): EditorSettings {
+    return this.persistedJson.editorSettings || {};
+  }
+
+  public setEditorSettings(settings: EditorSettings) {
+    this.persistedJson.editorSettings = { ...this.persistedJson.editorSettings, ...settings };
+    this.toStorage();
+  }
+
   public getIriHoverEnabled(): boolean {
     return this.persistedJson.iriHoverEnabled !== false;
   }

packages/yasgui/src/PersistentConfig.ts

@@ -881,6 +881,21 @@ export class Tab extends EventEmitter {
     return undefined;
   }
 
+  /** Apply the editor settings shared by all tabs (Settings → General and Editor) to the query editor */
+  public applyEditorSettings() {
+    if (!this.yasqe) return;
+    const settings = this.yasgui.persistentConfig.getEditorSettings();
+    if (this.yasqe.persistentConfig) {
+      if (settings.formatterType) this.yasqe.persistentConfig.formatterType = settings.formatterType;
+      if (settings.autoformatOnQuery !== undefined) {
+        this.yasqe.persistentConfig.autoformatOnQuery = settings.autoformatOnQuery;
+      }
+    }
+    if (settings.checkConstructVariables !== undefined) {
+      this.yasqe.setCheckConstructVariables(settings.checkConstructVariables);
+    }
+  }
+
   /** Open the settings modal of this tab, optionally on a section (e.g. "endpoints") */
   public openSettings(section?: string) {
     this.settingsModal?.open(section);
@@ -1488,6 +1503,7 @@ export class Tab extends EventEmitter {
       throw new Error("Expected a wrapper element before instantiating yasqe");
     }
     this.yasqe = new Yasqe(this.yasqeWrapperEl, yasqeConf);
+    this.applyEditorSettings();
 
     // Hook up the save button to managed query save
     this.yasqe.on("saveManagedQuery", () => {