@matdata/yasgui 5.3.0 → 5.5.0

package/src/TabSettingsModal.ts

@@ -2,6 +2,7 @@ import { addClass, removeClass } from "@matdata/yasgui-utils";
 import "./TabSettingsModal.scss";
 import Tab from "./Tab";
 import * as ConfigExportImport from "./ConfigExportImport";
+import { VERSION } from "./version";
 
 // Theme toggle icons
 const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
@@ -110,44 +111,63 @@ export default class TabSettingsModal {
 
     this.modalContent.appendChild(header);
 
-    // Body with tabs
+    // Body with sidebar navigation
     const body = document.createElement("div");
     addClass(body, "modalBody");
 
-    const tabsContainer = document.createElement("div");
-    addClass(tabsContainer, "modalTabs");
+    // Sidebar navigation
+    const sidebar = document.createElement("div");
+    addClass(sidebar, "modalSidebar");
 
     const requestTab = document.createElement("button");
     requestTab.textContent = "Request";
-    addClass(requestTab, "modalTabButton", "active");
+    addClass(requestTab, "modalNavButton", "active");
     requestTab.onclick = () => this.switchTab("request");
 
+    const endpointsTab = document.createElement("button");
+    endpointsTab.textContent = "SPARQL Endpoints";
+    addClass(endpointsTab, "modalNavButton");
+    endpointsTab.onclick = () => this.switchTab("endpoints");
+
     const prefixTab = document.createElement("button");
     prefixTab.textContent = "Prefixes";
-    addClass(prefixTab, "modalTabButton");
+    addClass(prefixTab, "modalNavButton");
     prefixTab.onclick = () => this.switchTab("prefix");
 
     const editorTab = document.createElement("button");
     editorTab.textContent = "Editor";
-    addClass(editorTab, "modalTabButton");
+    addClass(editorTab, "modalNavButton");
     editorTab.onclick = () => this.switchTab("editor");
 
-    const endpointsTab = document.createElement("button");
-    endpointsTab.textContent = "Endpoint Buttons";
-    addClass(endpointsTab, "modalTabButton");
-    endpointsTab.onclick = () => this.switchTab("endpoints");
-
     const importExportTab = document.createElement("button");
     importExportTab.textContent = "Import/Export";
-    addClass(importExportTab, "modalTabButton");
+    addClass(importExportTab, "modalNavButton");
     importExportTab.onclick = () => this.switchTab("importexport");
 
-    tabsContainer.appendChild(requestTab);
-    tabsContainer.appendChild(prefixTab);
-    tabsContainer.appendChild(editorTab);
-    tabsContainer.appendChild(endpointsTab);
-    tabsContainer.appendChild(importExportTab);
-    body.appendChild(tabsContainer);
+    const shortcutsTab = document.createElement("button");
+    shortcutsTab.textContent = "Keyboard Shortcuts";
+    addClass(shortcutsTab, "modalNavButton");
+    shortcutsTab.onclick = () => this.switchTab("shortcuts");
+
+    const aboutTab = document.createElement("button");
+    aboutTab.textContent = "About";
+    addClass(aboutTab, "modalNavButton");
+    aboutTab.onclick = () => this.switchTab("about");
+
+    sidebar.appendChild(requestTab);
+    sidebar.appendChild(endpointsTab);
+    sidebar.appendChild(prefixTab);
+    sidebar.appendChild(editorTab);
+    sidebar.appendChild(importExportTab);
+    sidebar.appendChild(shortcutsTab);
+    sidebar.appendChild(aboutTab);
+
+    // Content area container
+    const contentArea = document.createElement("div");
+    addClass(contentArea, "modalContentArea");
+
+    body.appendChild(sidebar);
+    body.appendChild(contentArea);
 
     // Tab content containers
     const requestContent = document.createElement("div");
@@ -155,6 +175,11 @@ export default class TabSettingsModal {
     requestContent.id = "request-content";
     this.drawRequestSettings(requestContent);
 
+    const endpointsContent = document.createElement("div");
+    addClass(endpointsContent, "modalTabContent");
+    endpointsContent.id = "endpoints-content";
+    this.drawEndpointsSettings(endpointsContent);
+
     const prefixContent = document.createElement("div");
     addClass(prefixContent, "modalTabContent");
     prefixContent.id = "prefix-content";
@@ -165,21 +190,28 @@ export default class TabSettingsModal {
     editorContent.id = "editor-content";
     this.drawEditorSettings(editorContent);
 
-    const endpointsContent = document.createElement("div");
-    addClass(endpointsContent, "modalTabContent");
-    endpointsContent.id = "endpoints-content";
-    this.drawEndpointButtonsSettings(endpointsContent);
-
     const importExportContent = document.createElement("div");
     addClass(importExportContent, "modalTabContent");
     importExportContent.id = "importexport-content";
     this.drawImportExportSettings(importExportContent);
 
-    body.appendChild(requestContent);
-    body.appendChild(prefixContent);
-    body.appendChild(editorContent);
-    body.appendChild(endpointsContent);
-    body.appendChild(importExportContent);
+    const shortcutsContent = document.createElement("div");
+    addClass(shortcutsContent, "modalTabContent");
+    shortcutsContent.id = "shortcuts-content";
+    this.drawKeyboardShortcuts(shortcutsContent);
+
+    const aboutContent = document.createElement("div");
+    addClass(aboutContent, "modalTabContent");
+    aboutContent.id = "about-content";
+    this.drawAboutSettings(aboutContent);
+
+    contentArea.appendChild(requestContent);
+    contentArea.appendChild(endpointsContent);
+    contentArea.appendChild(prefixContent);
+    contentArea.appendChild(editorContent);
+    contentArea.appendChild(importExportContent);
+    contentArea.appendChild(shortcutsContent);
+    contentArea.appendChild(aboutContent);
 
     this.modalContent.appendChild(body);
 
@@ -207,16 +239,18 @@ export default class TabSettingsModal {
   }
 
   private switchTab(tabName: string) {
-    const buttons = this.modalContent.querySelectorAll(".modalTabButton");
+    const buttons = this.modalContent.querySelectorAll(".modalNavButton");
     const contents = this.modalContent.querySelectorAll(".modalTabContent");
 
     buttons.forEach((btn, index) => {
       if (
         (tabName === "request" && index === 0) ||
-        (tabName === "prefix" && index === 1) ||
-        (tabName === "editor" && index === 2) ||
-        (tabName === "endpoints" && index === 3) ||
-        (tabName === "importexport" && index === 4)
+        (tabName === "endpoints" && index === 1) ||
+        (tabName === "prefix" && index === 2) ||
+        (tabName === "editor" && index === 3) ||
+        (tabName === "importexport" && index === 4) ||
+        (tabName === "shortcuts" && index === 5) ||
+        (tabName === "about" && index === 6)
       ) {
         addClass(btn as HTMLElement, "active");
       } else {
@@ -378,6 +412,398 @@ export default class TabSettingsModal {
     constructValidationSection.appendChild(constructValidationCheckboxContainer);
     constructValidationSection.appendChild(constructValidationHelp);
     container.appendChild(constructValidationSection);
+
+    // Code Snippets Bar Visibility Section
+    const snippetsBarSection = document.createElement("div");
+    addClass(snippetsBarSection, "settingsSection");
+
+    const snippetsBarCheckboxContainer = document.createElement("div");
+    addClass(snippetsBarCheckboxContainer, "checkboxContainer");
+
+    const snippetsBarCheckbox = document.createElement("input");
+    snippetsBarCheckbox.type = "checkbox";
+    snippetsBarCheckbox.id = "showSnippetsBar";
+    snippetsBarCheckbox.checked = yasqe.getSnippetsBarVisible();
+
+    const snippetsBarLabel = document.createElement("label");
+    snippetsBarLabel.htmlFor = "showSnippetsBar";
+    snippetsBarLabel.textContent = "Show code snippets bar";
+
+    const snippetsBarHelp = document.createElement("div");
+    snippetsBarHelp.textContent =
+      "Display the code snippets bar above the editor for quick insertion of common SPARQL patterns.";
+    addClass(snippetsBarHelp, "settingsHelp");
+    snippetsBarHelp.style.marginTop = "5px";
+
+    snippetsBarCheckboxContainer.appendChild(snippetsBarCheckbox);
+    snippetsBarCheckboxContainer.appendChild(snippetsBarLabel);
+
+    snippetsBarSection.appendChild(snippetsBarCheckboxContainer);
+    snippetsBarSection.appendChild(snippetsBarHelp);
+    container.appendChild(snippetsBarSection);
+  }
+
+  private drawEndpointsSettings(container: HTMLElement) {
+    const section = document.createElement("div");
+    addClass(section, "settingsSection");
+
+    const label = document.createElement("label");
+    label.textContent = "SPARQL Endpoints";
+    addClass(label, "settingsLabel");
+
+    const help = document.createElement("div");
+    help.textContent =
+      "Manage your SPARQL endpoints. Each endpoint can have its own authentication and be displayed as a quick-switch button.";
+    addClass(help, "settingsHelp");
+
+    section.appendChild(label);
+    section.appendChild(help);
+
+    // List of endpoints
+    const endpointsList = document.createElement("div");
+    addClass(endpointsList, "endpointsTable");
+    this.renderEndpointsList(endpointsList);
+    section.appendChild(endpointsList);
+
+    container.appendChild(section);
+  }
+
+  private renderEndpointsList(container: HTMLElement) {
+    container.innerHTML = "";
+    const configs = this.tab.yasgui.persistentConfig.getEndpointConfigs();
+
+    // Create table (even if empty, we'll show add form)
+    const table = document.createElement("table");
+    addClass(table, "endpointsTableElement");
+
+    // Header
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    const headers = ["Endpoint", "Label", "Button", "Authentication", "Actions"];
+    headers.forEach((h) => {
+      const th = document.createElement("th");
+      th.textContent = h;
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    // Body
+    const tbody = document.createElement("tbody");
+
+    if (configs.length === 0) {
+      // Show empty message in table
+      const emptyRow = document.createElement("tr");
+      const emptyCell = document.createElement("td");
+      emptyCell.colSpan = 5;
+      emptyCell.textContent = "No endpoints yet. Add one below or access an endpoint to have it automatically tracked.";
+      addClass(emptyCell, "emptyMessage");
+      emptyCell.style.textAlign = "center";
+      emptyCell.style.padding = "20px";
+      emptyRow.appendChild(emptyCell);
+      tbody.appendChild(emptyRow);
+    }
+
+    configs.forEach((config, index) => {
+      const row = document.createElement("tr");
+
+      // Endpoint column
+      const endpointCell = document.createElement("td");
+      endpointCell.textContent = config.endpoint;
+      endpointCell.title = config.endpoint;
+      addClass(endpointCell, "endpointCell");
+      row.appendChild(endpointCell);
+
+      // Label column (editable)
+      const labelCell = document.createElement("td");
+      const labelInput = document.createElement("input");
+      labelInput.type = "text";
+      labelInput.value = config.label || "";
+      labelInput.placeholder = "Optional label";
+      addClass(labelInput, "endpointLabelInput");
+      labelInput.onchange = () => {
+        this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(config.endpoint, {
+          label: labelInput.value.trim() || undefined,
+        });
+        this.renderEndpointsList(container);
+        this.tab.refreshEndpointButtons();
+      };
+      labelCell.appendChild(labelInput);
+      row.appendChild(labelCell);
+
+      // Show as Button checkbox (requires label)
+      const buttonCell = document.createElement("td");
+      const buttonCheckbox = document.createElement("input");
+      buttonCheckbox.type = "checkbox";
+      buttonCheckbox.checked = !!config.showAsButton;
+      buttonCheckbox.disabled = !config.label;
+      buttonCheckbox.setAttribute(
+        "aria-label",
+        config.label ? "Show this endpoint as a quick-switch button" : "Add a label first to enable button",
+      );
+      buttonCheckbox.title = config.label
+        ? "Show this endpoint as a quick-switch button"
+        : "Add a label first to enable button";
+      buttonCheckbox.onchange = () => {
+        this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(config.endpoint, {
+          showAsButton: buttonCheckbox.checked,
+        });
+        this.tab.refreshEndpointButtons();
+      };
+      buttonCell.appendChild(buttonCheckbox);
+      addClass(buttonCell, "centerCell");
+      row.appendChild(buttonCell);
+
+      // Authentication column
+      const authCell = document.createElement("td");
+      const authButton = document.createElement("button");
+      authButton.type = "button";
+      addClass(authButton, "configureAuthButton");
+      if (config.authentication) {
+        authButton.textContent = "✓ Configured";
+        addClass(authButton, "authenticated");
+      } else {
+        authButton.textContent = "Configure";
+      }
+      authButton.onclick = () => this.showAuthenticationModal(config.endpoint);
+      authCell.appendChild(authButton);
+      addClass(authCell, "centerCell");
+      row.appendChild(authCell);
+
+      // Actions column
+      const actionsCell = document.createElement("td");
+      const deleteButton = document.createElement("button");
+      deleteButton.type = "button";
+      deleteButton.textContent = "Delete";
+      addClass(deleteButton, "deleteEndpointButton");
+      deleteButton.onclick = () => {
+        if (confirm(`Delete endpoint "${config.endpoint}"?`)) {
+          this.tab.yasgui.persistentConfig.deleteEndpointConfig(config.endpoint);
+          this.renderEndpointsList(container);
+          this.tab.refreshEndpointButtons();
+        }
+      };
+      actionsCell.appendChild(deleteButton);
+      addClass(actionsCell, "centerCell");
+      row.appendChild(actionsCell);
+
+      tbody.appendChild(row);
+    });
+    table.appendChild(tbody);
+    container.appendChild(table);
+
+    // Add endpoint form
+    const addForm = document.createElement("div");
+    addClass(addForm, "addEndpointForm");
+
+    const addFormTitle = document.createElement("div");
+    addFormTitle.textContent = "Add New Endpoint";
+    addClass(addFormTitle, "addFormTitle");
+    addForm.appendChild(addFormTitle);
+
+    const formInputs = document.createElement("div");
+    addClass(formInputs, "addFormInputs");
+
+    const endpointInput = document.createElement("input");
+    endpointInput.type = "url";
+    endpointInput.placeholder = "Endpoint URL (e.g., https://dbpedia.org/sparql)";
+    addClass(endpointInput, "addEndpointInput");
+    formInputs.appendChild(endpointInput);
+
+    const addButton = document.createElement("button");
+    addButton.type = "button";
+    addButton.textContent = "+ Add Endpoint";
+    addClass(addButton, "addEndpointButton");
+    addButton.onclick = () => {
+      const endpoint = endpointInput.value.trim();
+
+      if (!endpoint) {
+        alert("Please enter an endpoint URL.");
+        return;
+      }
+
+      // Validate URL format
+      // Check for supported protocol first
+      if (!/^https?:\/\//i.test(endpoint)) {
+        alert("Endpoint URL must start with http:// or https://");
+        return;
+      }
+      try {
+        new URL(endpoint);
+      } catch (e) {
+        // Show the error message if available, otherwise a generic one
+        alert(e instanceof Error && e.message ? "Malformed URL: " + e.message : "Please enter a valid URL.");
+        return;
+      }
+
+      // Check if endpoint already exists
+      const existing = this.tab.yasgui.persistentConfig.getEndpointConfig(endpoint);
+      if (existing) {
+        alert("This endpoint is already in the list.");
+        return;
+      }
+
+      // Add the endpoint
+      this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {});
+
+      // Clear input
+      endpointInput.value = "";
+
+      // Refresh list
+      this.renderEndpointsList(container);
+      this.tab.refreshEndpointButtons();
+    };
+    formInputs.appendChild(addButton);
+
+    addForm.appendChild(formInputs);
+    container.appendChild(addForm);
+  }
+
+  private showAuthenticationModal(endpoint: string) {
+    const config = this.tab.yasgui.persistentConfig.getEndpointConfig(endpoint);
+    const existingAuth = config?.authentication;
+
+    // Create modal overlay
+    const authModalOverlay = document.createElement("div");
+    addClass(authModalOverlay, "authModalOverlay");
+    authModalOverlay.onclick = () => authModalOverlay.remove();
+
+    // Create modal content
+    const authModal = document.createElement("div");
+    addClass(authModal, "authModal");
+    authModal.onclick = (e) => e.stopPropagation();
+
+    // Header
+    const header = document.createElement("div");
+    addClass(header, "authModalHeader");
+    const title = document.createElement("h3");
+    title.textContent = "Configure Authentication";
+    const subtitle = document.createElement("div");
+    subtitle.textContent = endpoint;
+    addClass(subtitle, "authModalSubtitle");
+    header.appendChild(title);
+    header.appendChild(subtitle);
+    authModal.appendChild(header);
+
+    // Body
+    const body = document.createElement("div");
+    addClass(body, "authModalBody");
+
+    // Auth type (for now only basic, but designed for future)
+    const typeSection = document.createElement("div");
+    addClass(typeSection, "authModalSection");
+    const typeLabel = document.createElement("label");
+    typeLabel.textContent = "Authentication Type";
+    const typeSelect = document.createElement("select");
+    const basicOption = document.createElement("option");
+    basicOption.value = "basic";
+    basicOption.textContent = "HTTP Basic Authentication";
+    typeSelect.appendChild(basicOption);
+    // Future: Add OAuth, Bearer Token, etc.
+    typeSection.appendChild(typeLabel);
+    typeSection.appendChild(typeSelect);
+    body.appendChild(typeSection);
+
+    // Username
+    const usernameSection = document.createElement("div");
+    addClass(usernameSection, "authModalSection");
+    const usernameLabel = document.createElement("label");
+    usernameLabel.textContent = "Username";
+    const usernameInput = document.createElement("input");
+    usernameInput.type = "text";
+    usernameInput.placeholder = "Enter username";
+    usernameInput.value = existingAuth?.username || "";
+    usernameInput.autocomplete = "username";
+    usernameSection.appendChild(usernameLabel);
+    usernameSection.appendChild(usernameInput);
+    body.appendChild(usernameSection);
+
+    // Password
+    const passwordSection = document.createElement("div");
+    addClass(passwordSection, "authModalSection");
+    const passwordLabel = document.createElement("label");
+    passwordLabel.textContent = "Password";
+    const passwordInput = document.createElement("input");
+    passwordInput.type = "password";
+    passwordInput.placeholder = "Enter password";
+    passwordInput.value = existingAuth?.password || "";
+    passwordInput.autocomplete = "current-password";
+    passwordSection.appendChild(passwordLabel);
+    passwordSection.appendChild(passwordInput);
+    body.appendChild(passwordSection);
+
+    // Security notice
+    const securityNotice = document.createElement("div");
+    addClass(securityNotice, "authSecurityNotice");
+    securityNotice.innerHTML = `
+      <strong>⚠️ Security Notice:</strong>
+      <ul>
+        <li>Credentials are stored in browser localStorage</li>
+        <li>Only use with HTTPS endpoints</li>
+        <li>Be cautious when using on shared computers</li>
+      </ul>
+    `;
+    body.appendChild(securityNotice);
+
+    authModal.appendChild(body);
+
+    // Footer
+    const footer = document.createElement("div");
+    addClass(footer, "authModalFooter");
+
+    const removeButton = document.createElement("button");
+    removeButton.textContent = "Remove Authentication";
+    removeButton.type = "button";
+    addClass(removeButton, "authRemoveButton");
+    removeButton.onclick = () => {
+      this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+        authentication: undefined,
+      });
+      authModalOverlay.remove();
+      const endpointsList = this.modalContent.querySelector(".endpointsTable");
+      if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+    };
+    if (!existingAuth) {
+      removeButton.disabled = true;
+    }
+
+    const cancelButton = document.createElement("button");
+    cancelButton.textContent = "Cancel";
+    cancelButton.type = "button";
+    addClass(cancelButton, "authCancelButton");
+    cancelButton.onclick = () => authModalOverlay.remove();
+
+    const saveButton = document.createElement("button");
+    saveButton.textContent = "Save";
+    saveButton.type = "button";
+    addClass(saveButton, "authSaveButton");
+    saveButton.onclick = () => {
+      const username = usernameInput.value.trim();
+      const password = passwordInput.value;
+
+      if (username && password) {
+        this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+          authentication: {
+            type: "basic",
+            username,
+            password,
+          },
+        });
+        authModalOverlay.remove();
+        const endpointsList = this.modalContent.querySelector(".endpointsTable");
+        if (endpointsList) this.renderEndpointsList(endpointsList as HTMLElement);
+      } else {
+        alert("Please enter both username and password.");
+      }
+    };
+
+    footer.appendChild(removeButton);
+    footer.appendChild(cancelButton);
+    footer.appendChild(saveButton);
+    authModal.appendChild(footer);
+
+    authModalOverlay.appendChild(authModal);
+    document.body.appendChild(authModalOverlay);
   }
 
   private drawRequestSettings(container: HTMLElement) {
@@ -499,6 +925,10 @@ export default class TabSettingsModal {
       if (constructValidationCheckbox) {
         yasqe.setCheckConstructVariables(constructValidationCheckbox.checked);
       }
+      const snippetsBarCheckbox = document.getElementById("showSnippetsBar") as HTMLInputElement;
+      if (snippetsBarCheckbox) {
+        yasqe.setSnippetsBarVisible(snippetsBarCheckbox.checked);
+      }
       yasqe.saveQuery();
     }
 
@@ -516,6 +946,9 @@ export default class TabSettingsModal {
       this.tab.setRequestConfig(updates);
     }
 
+    // Note: Authentication is now handled per-endpoint in the Endpoints tab,
+    // not per-tab anymore. No need to save it here.
+
     // Refresh endpoint buttons to show any changes
     this.tab.refreshEndpointButtons();
 
@@ -614,116 +1047,8 @@ export default class TabSettingsModal {
     this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
   }
 
-  private drawEndpointButtonsSettings(container: HTMLElement) {
-    const section = document.createElement("div");
-    addClass(section, "settingsSection");
-
-    const label = document.createElement("label");
-    label.textContent = "Custom Endpoint Buttons";
-    addClass(label, "settingsLabel");
-
-    const help = document.createElement("div");
-    help.textContent = "Add custom endpoint buttons that will appear next to the endpoint textbox.";
-    addClass(help, "settingsHelp");
-
-    section.appendChild(label);
-    section.appendChild(help);
-
-    // List of existing buttons
-    const buttonsList = document.createElement("div");
-    addClass(buttonsList, "endpointButtonsList");
-    this.renderEndpointButtonsList(buttonsList);
-    section.appendChild(buttonsList);
-
-    // Form to add new button
-    const addForm = document.createElement("div");
-    addClass(addForm, "addEndpointButtonForm");
-
-    const labelInput = document.createElement("input");
-    labelInput.type = "text";
-    labelInput.placeholder = "Button label (e.g., DBpedia)";
-    addClass(labelInput, "endpointButtonLabelInput");
-
-    const endpointInput = document.createElement("input");
-    endpointInput.type = "url";
-    endpointInput.placeholder = "Endpoint URL (e.g., https://dbpedia.org/sparql)";
-    addClass(endpointInput, "endpointButtonEndpointInput");
-
-    const addButton = document.createElement("button");
-    addButton.textContent = "+ Add Button";
-    addClass(addButton, "addEndpointButton");
-    addButton.type = "button";
-    addButton.onclick = () => {
-      const labelValue = labelInput.value.trim();
-      const endpointValue = endpointInput.value.trim();
-
-      if (!labelValue || !endpointValue) {
-        alert("Please enter both a label and an endpoint URL.");
-        return;
-      }
-
-      // Add to persistent config
-      const currentButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
-      currentButtons.push({ label: labelValue, endpoint: endpointValue });
-      this.tab.yasgui.persistentConfig.setCustomEndpointButtons(currentButtons);
-
-      // Clear inputs
-      labelInput.value = "";
-      endpointInput.value = "";
-
-      // Refresh list
-      this.renderEndpointButtonsList(buttonsList);
-    };
-
-    addForm.appendChild(labelInput);
-    addForm.appendChild(endpointInput);
-    addForm.appendChild(addButton);
-    section.appendChild(addForm);
-
-    container.appendChild(section);
-  }
-
-  private renderEndpointButtonsList(container: HTMLElement) {
-    container.innerHTML = "";
-    const customButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
-
-    if (customButtons.length === 0) {
-      const emptyMsg = document.createElement("div");
-      emptyMsg.textContent = "No custom buttons yet. Add one below.";
-      addClass(emptyMsg, "emptyMessage");
-      container.appendChild(emptyMsg);
-      return;
-    }
-
-    customButtons.forEach((btn, index) => {
-      const item = document.createElement("div");
-      addClass(item, "endpointButtonItem");
-
-      const labelSpan = document.createElement("span");
-      labelSpan.textContent = `${btn.label}`;
-      addClass(labelSpan, "buttonLabel");
-
-      const endpointSpan = document.createElement("span");
-      endpointSpan.textContent = btn.endpoint;
-      addClass(endpointSpan, "buttonEndpoint");
-
-      const removeBtn = document.createElement("button");
-      removeBtn.textContent = "×";
-      addClass(removeBtn, "removeButton");
-      removeBtn.type = "button";
-      removeBtn.onclick = () => {
-        const currentButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
-        currentButtons.splice(index, 1);
-        this.tab.yasgui.persistentConfig.setCustomEndpointButtons(currentButtons);
-        this.renderEndpointButtonsList(container);
-      };
-
-      item.appendChild(labelSpan);
-      item.appendChild(endpointSpan);
-      item.appendChild(removeBtn);
-      container.appendChild(item);
-    });
-  }
+  // Old endpoint buttons functionality has been merged into drawEndpointsSettings
+  // Keeping this for reference if needed for backwards compatibility
 
   private getThemeToggleIcon(): string {
     const currentTheme = this.tab.yasgui.getTheme();
@@ -885,6 +1210,112 @@ export default class TabSettingsModal {
     container.appendChild(importSection);
   }
 
+  private drawKeyboardShortcuts(container: HTMLElement) {
+    const shortcutsData = [
+      {
+        category: "Query Editor (YASQE)",
+        shortcuts: [
+          { keys: ["Ctrl+Enter", "Cmd+Enter"], description: "Execute query" },
+          { keys: ["Ctrl+Space", "Cmd+Space"], description: "Trigger autocomplete" },
+          { keys: ["Ctrl+S", "Cmd+S"], description: "Save query to local storage" },
+          { keys: ["Ctrl+Shift+F", "Cmd+Shift+F"], description: "Format query" },
+          { keys: ["Ctrl+/", "Cmd+/"], description: "Toggle comment on selected lines" },
+          { keys: ["Ctrl+Shift+D", "Cmd+Shift+D"], description: "Duplicate current line" },
+          { keys: ["Ctrl+Shift+K", "Cmd+Shift+K"], description: "Delete current line" },
+          { keys: ["Esc"], description: "Remove focus from editor" },
+          { keys: ["Ctrl+Click"], description: "Explore URI connections (on URI)" },
+        ],
+      },
+      {
+        category: "Fullscreen",
+        shortcuts: [
+          { keys: ["F11"], description: "Toggle YASQE (editor) fullscreen" },
+          { keys: ["F10"], description: "Toggle YASR (results) fullscreen" },
+          { keys: ["F9"], description: "Switch between YASQE and YASR fullscreen" },
+          { keys: ["Esc"], description: "Exit fullscreen mode" },
+        ],
+      },
+    ];
+
+    shortcutsData.forEach((section) => {
+      const sectionEl = document.createElement("div");
+      addClass(sectionEl, "shortcutsSection");
+
+      const categoryLabel = document.createElement("h3");
+      categoryLabel.textContent = section.category;
+      addClass(categoryLabel, "shortcutsCategory");
+      sectionEl.appendChild(categoryLabel);
+
+      const table = document.createElement("table");
+      addClass(table, "shortcutsTable");
+      table.setAttribute("role", "table");
+      table.setAttribute("aria-label", `${section.category} keyboard shortcuts`);
+
+      // Add table caption for screen readers
+      const caption = document.createElement("caption");
+      caption.textContent = `${section.category} keyboard shortcuts`;
+      caption.style.position = "absolute";
+      caption.style.left = "-10000px";
+      caption.style.width = "1px";
+      caption.style.height = "1px";
+      caption.style.overflow = "hidden";
+      table.appendChild(caption);
+
+      // Add thead with proper headers
+      const thead = document.createElement("thead");
+      const headerRow = document.createElement("tr");
+
+      const keysHeader = document.createElement("th");
+      keysHeader.textContent = "Keys";
+      keysHeader.setAttribute("scope", "col");
+      addClass(keysHeader, "shortcutsKeysHeader");
+      headerRow.appendChild(keysHeader);
+
+      const descHeader = document.createElement("th");
+      descHeader.textContent = "Description";
+      descHeader.setAttribute("scope", "col");
+      addClass(descHeader, "shortcutsDescHeader");
+      headerRow.appendChild(descHeader);
+
+      thead.appendChild(headerRow);
+      table.appendChild(thead);
+
+      // Add tbody
+      const tbody = document.createElement("tbody");
+
+      section.shortcuts.forEach((shortcut) => {
+        const row = document.createElement("tr");
+
+        const keysCell = document.createElement("td");
+        addClass(keysCell, "shortcutsKeys");
+        shortcut.keys.forEach((key, index) => {
+          if (index > 0) {
+            const separator = document.createElement("span");
+            separator.textContent = " / ";
+            addClass(separator, "shortcutsSeparator");
+            keysCell.appendChild(separator);
+          }
+          const kbd = document.createElement("kbd");
+          kbd.textContent = key;
+          keysCell.appendChild(kbd);
+        });
+        row.appendChild(keysCell);
+
+        const descCell = document.createElement("td");
+        addClass(descCell, "shortcutsDescription");
+        descCell.textContent = shortcut.description;
+        row.appendChild(descCell);
+
+        tbody.appendChild(row);
+      });
+
+      table.appendChild(tbody);
+
+      sectionEl.appendChild(table);
+      container.appendChild(sectionEl);
+    });
+  }
+
   private async importConfiguration(turtleContent: string) {
     try {
       const parsedConfig = ConfigExportImport.parseFromTurtle(turtleContent);
@@ -940,6 +1371,108 @@ export default class TabSettingsModal {
     }, 5000);
   }
 
+  private drawAboutSettings(container: HTMLElement) {
+    // About Section
+    const aboutSection = document.createElement("div");
+    addClass(aboutSection, "settingsSection", "aboutSection");
+
+    // YASGUI Title and Version
+    const titleContainer = document.createElement("div");
+    addClass(titleContainer, "aboutTitle");
+
+    const title = document.createElement("h3");
+    title.textContent = "YASGUI";
+    addClass(title, "aboutMainTitle");
+
+    const versionBadge = document.createElement("span");
+    versionBadge.textContent = `v${VERSION}`;
+    addClass(versionBadge, "versionBadge");
+
+    titleContainer.appendChild(title);
+    titleContainer.appendChild(versionBadge);
+    aboutSection.appendChild(titleContainer);
+
+    // Subtitle
+    const subtitle = document.createElement("p");
+    subtitle.textContent = "Yet Another SPARQL GUI";
+    addClass(subtitle, "aboutSubtitle");
+    aboutSection.appendChild(subtitle);
+
+    // Links Section
+    const linksSection = document.createElement("div");
+    addClass(linksSection, "aboutLinks");
+
+    // Documentation Link
+    const docsLink = this.createAboutLink(
+      "📚 Documentation",
+      "https://yasgui-doc.matdata.eu/docs/",
+      "View the complete documentation and guides",
+    );
+    linksSection.appendChild(docsLink);
+
+    // Release Notes Link
+    const releasesLink = this.createAboutLink(
+      "📝 Release Notes",
+      "https://github.com/Matdata-eu/Yasgui/releases",
+      "See what's new in the latest releases",
+    );
+    linksSection.appendChild(releasesLink);
+
+    // Issues/Support Link
+    const issuesLink = this.createAboutLink(
+      "🐛 Report Issues & Get Support",
+      "https://github.com/Matdata-eu/Yasgui/issues",
+      "Report bugs, request features, or ask for help",
+    );
+    linksSection.appendChild(issuesLink);
+
+    aboutSection.appendChild(linksSection);
+
+    // Footer info
+    const footerInfo = document.createElement("div");
+    addClass(footerInfo, "aboutFooter");
+
+    const paragraph1 = document.createElement("p");
+    paragraph1.textContent = "YASGUI is an open-source project maintained by ";
+    const matdataLink = document.createElement("a");
+    matdataLink.href = "https://matdata.eu";
+    matdataLink.target = "_blank";
+    matdataLink.rel = "noopener noreferrer";
+    matdataLink.textContent = "Matdata";
+    paragraph1.appendChild(matdataLink);
+    paragraph1.appendChild(document.createTextNode("."));
+
+    const paragraph2 = document.createElement("p");
+    paragraph2.textContent = "Licensed under the MIT License.";
+
+    footerInfo.appendChild(paragraph1);
+    footerInfo.appendChild(paragraph2);
+    aboutSection.appendChild(footerInfo);
+
+    container.appendChild(aboutSection);
+  }
+
+  private createAboutLink(label: string, url: string, description: string): HTMLElement {
+    const linkContainer = document.createElement("div");
+    addClass(linkContainer, "aboutLinkItem");
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.textContent = label;
+    addClass(link, "aboutLink");
+
+    const desc = document.createElement("p");
+    desc.textContent = description;
+    addClass(desc, "aboutLinkDescription");
+
+    linkContainer.appendChild(link);
+    linkContainer.appendChild(desc);
+
+    return linkContainer;
+  }
+
   public destroy() {
     if (this.modalOverlay && this.modalOverlay.parentNode) {
       this.modalOverlay.parentNode.removeChild(this.modalOverlay);