@matdata/yasgui 5.3.0 → 5.5.0

package/build/ts/src/TabSettingsModal.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { addClass, removeClass } from "@matdata/yasgui-utils";
 import "./TabSettingsModal.scss";
 import * as ConfigExportImport from "./ConfigExportImport";
+import { VERSION } from "./version";
 const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
   <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
 </svg>`;
@@ -89,38 +90,55 @@ export default class TabSettingsModal {
         this.modalContent.appendChild(header);
         const body = document.createElement("div");
         addClass(body, "modalBody");
-        const tabsContainer = document.createElement("div");
-        addClass(tabsContainer, "modalTabs");
+        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);
+        const contentArea = document.createElement("div");
+        addClass(contentArea, "modalContentArea");
+        body.appendChild(sidebar);
+        body.appendChild(contentArea);
         const requestContent = document.createElement("div");
         addClass(requestContent, "modalTabContent", "active");
         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";
@@ -129,19 +147,25 @@ export default class TabSettingsModal {
         addClass(editorContent, "modalTabContent");
         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);
         const footer = document.createElement("div");
         addClass(footer, "modalFooter");
@@ -160,14 +184,16 @@ export default class TabSettingsModal {
         document.body.appendChild(this.modalOverlay);
     }
     switchTab(tabName) {
-        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, "active");
             }
             else {
@@ -293,6 +319,317 @@ export default class TabSettingsModal {
         constructValidationSection.appendChild(constructValidationCheckboxContainer);
         constructValidationSection.appendChild(constructValidationHelp);
         container.appendChild(constructValidationSection);
+        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);
+    }
+    drawEndpointsSettings(container) {
+        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);
+        const endpointsList = document.createElement("div");
+        addClass(endpointsList, "endpointsTable");
+        this.renderEndpointsList(endpointsList);
+        section.appendChild(endpointsList);
+        container.appendChild(section);
+    }
+    renderEndpointsList(container) {
+        container.innerHTML = "";
+        const configs = this.tab.yasgui.persistentConfig.getEndpointConfigs();
+        const table = document.createElement("table");
+        addClass(table, "endpointsTableElement");
+        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);
+        const tbody = document.createElement("tbody");
+        if (configs.length === 0) {
+            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");
+            const endpointCell = document.createElement("td");
+            endpointCell.textContent = config.endpoint;
+            endpointCell.title = config.endpoint;
+            addClass(endpointCell, "endpointCell");
+            row.appendChild(endpointCell);
+            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);
+            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);
+            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);
+            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);
+        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;
+            }
+            if (!/^https?:\/\//i.test(endpoint)) {
+                alert("Endpoint URL must start with http:// or https://");
+                return;
+            }
+            try {
+                new URL(endpoint);
+            }
+            catch (e) {
+                alert(e instanceof Error && e.message ? "Malformed URL: " + e.message : "Please enter a valid URL.");
+                return;
+            }
+            const existing = this.tab.yasgui.persistentConfig.getEndpointConfig(endpoint);
+            if (existing) {
+                alert("This endpoint is already in the list.");
+                return;
+            }
+            this.tab.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {});
+            endpointInput.value = "";
+            this.renderEndpointsList(container);
+            this.tab.refreshEndpointButtons();
+        };
+        formInputs.appendChild(addButton);
+        addForm.appendChild(formInputs);
+        container.appendChild(addForm);
+    }
+    showAuthenticationModal(endpoint) {
+        const config = this.tab.yasgui.persistentConfig.getEndpointConfig(endpoint);
+        const existingAuth = config === null || config === void 0 ? void 0 : config.authentication;
+        const authModalOverlay = document.createElement("div");
+        addClass(authModalOverlay, "authModalOverlay");
+        authModalOverlay.onclick = () => authModalOverlay.remove();
+        const authModal = document.createElement("div");
+        addClass(authModal, "authModal");
+        authModal.onclick = (e) => e.stopPropagation();
+        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);
+        const body = document.createElement("div");
+        addClass(body, "authModalBody");
+        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);
+        typeSection.appendChild(typeLabel);
+        typeSection.appendChild(typeSelect);
+        body.appendChild(typeSection);
+        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 === null || existingAuth === void 0 ? void 0 : existingAuth.username) || "";
+        usernameInput.autocomplete = "username";
+        usernameSection.appendChild(usernameLabel);
+        usernameSection.appendChild(usernameInput);
+        body.appendChild(usernameSection);
+        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 === null || existingAuth === void 0 ? void 0 : existingAuth.password) || "";
+        passwordInput.autocomplete = "current-password";
+        passwordSection.appendChild(passwordLabel);
+        passwordSection.appendChild(passwordInput);
+        body.appendChild(passwordSection);
+        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);
+        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);
+        };
+        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);
+            }
+            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);
     }
     drawRequestSettings(container) {
         const reqConfig = this.tab.getRequestConfig();
@@ -388,6 +725,10 @@ export default class TabSettingsModal {
             if (constructValidationCheckbox) {
                 yasqe.setCheckConstructVariables(constructValidationCheckbox.checked);
             }
+            const snippetsBarCheckbox = document.getElementById("showSnippetsBar");
+            if (snippetsBarCheckbox) {
+                yasqe.setSnippetsBarVisible(snippetsBarCheckbox.checked);
+            }
             yasqe.saveQuery();
         }
         const requestContent = this.modalContent.querySelector("#request-content");
@@ -475,90 +816,6 @@ export default class TabSettingsModal {
         const deduplicated = this.deduplicatePrefixes(combined);
         this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
     }
-    drawEndpointButtonsSettings(container) {
-        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);
-        const buttonsList = document.createElement("div");
-        addClass(buttonsList, "endpointButtonsList");
-        this.renderEndpointButtonsList(buttonsList);
-        section.appendChild(buttonsList);
-        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;
-            }
-            const currentButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
-            currentButtons.push({ label: labelValue, endpoint: endpointValue });
-            this.tab.yasgui.persistentConfig.setCustomEndpointButtons(currentButtons);
-            labelInput.value = "";
-            endpointInput.value = "";
-            this.renderEndpointButtonsList(buttonsList);
-        };
-        addForm.appendChild(labelInput);
-        addForm.appendChild(endpointInput);
-        addForm.appendChild(addButton);
-        section.appendChild(addForm);
-        container.appendChild(section);
-    }
-    renderEndpointButtonsList(container) {
-        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);
-        });
-    }
     getThemeToggleIcon() {
         const currentTheme = this.tab.yasgui.getTheme();
         return currentTheme === "dark" ? MOON_ICON : SUN_ICON;
@@ -695,6 +952,93 @@ export default class TabSettingsModal {
         importSection.appendChild(fileInput);
         container.appendChild(importSection);
     }
+    drawKeyboardShortcuts(container) {
+        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`);
+            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);
+            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);
+            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);
+        });
+    }
     importConfiguration(turtleContent) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a;
@@ -737,6 +1081,67 @@ export default class TabSettingsModal {
             }
         }, 5000);
     }
+    drawAboutSettings(container) {
+        const aboutSection = document.createElement("div");
+        addClass(aboutSection, "settingsSection", "aboutSection");
+        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);
+        const subtitle = document.createElement("p");
+        subtitle.textContent = "Yet Another SPARQL GUI";
+        addClass(subtitle, "aboutSubtitle");
+        aboutSection.appendChild(subtitle);
+        const linksSection = document.createElement("div");
+        addClass(linksSection, "aboutLinks");
+        const docsLink = this.createAboutLink("📚 Documentation", "https://yasgui-doc.matdata.eu/docs/", "View the complete documentation and guides");
+        linksSection.appendChild(docsLink);
+        const releasesLink = this.createAboutLink("📝 Release Notes", "https://github.com/Matdata-eu/Yasgui/releases", "See what's new in the latest releases");
+        linksSection.appendChild(releasesLink);
+        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);
+        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);
+    }
+    createAboutLink(label, url, description) {
+        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;
+    }
     destroy() {
         if (this.modalOverlay && this.modalOverlay.parentNode) {
             this.modalOverlay.parentNode.removeChild(this.modalOverlay);