@matdata/yasgui 5.2.0 → 5.4.0

package/build/ts/src/TabSettingsModal.js

@@ -1,5 +1,16 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 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,13 +100,33 @@ export default class TabSettingsModal {
         prefixTab.textContent = "Prefixes";
         addClass(prefixTab, "modalTabButton");
         prefixTab.onclick = () => this.switchTab("prefix");
+        const editorTab = document.createElement("button");
+        editorTab.textContent = "Editor";
+        addClass(editorTab, "modalTabButton");
+        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");
+        importExportTab.onclick = () => this.switchTab("importexport");
+        const shortcutsTab = document.createElement("button");
+        shortcutsTab.textContent = "Keyboard Shortcuts";
+        addClass(shortcutsTab, "modalTabButton");
+        shortcutsTab.onclick = () => this.switchTab("shortcuts");
+        const aboutTab = document.createElement("button");
+        aboutTab.textContent = "About";
+        addClass(aboutTab, "modalTabButton");
+        aboutTab.onclick = () => this.switchTab("about");
         tabsContainer.appendChild(requestTab);
         tabsContainer.appendChild(prefixTab);
+        tabsContainer.appendChild(editorTab);
         tabsContainer.appendChild(endpointsTab);
+        tabsContainer.appendChild(importExportTab);
+        tabsContainer.appendChild(shortcutsTab);
+        tabsContainer.appendChild(aboutTab);
         body.appendChild(tabsContainer);
         const requestContent = document.createElement("div");
         addClass(requestContent, "modalTabContent", "active");
@@ -105,13 +136,33 @@ export default class TabSettingsModal {
         addClass(prefixContent, "modalTabContent");
         prefixContent.id = "prefix-content";
         this.drawPrefixSettings(prefixContent);
+        const editorContent = document.createElement("div");
+        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);
+        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);
         body.appendChild(requestContent);
         body.appendChild(prefixContent);
+        body.appendChild(editorContent);
         body.appendChild(endpointsContent);
+        body.appendChild(importExportContent);
+        body.appendChild(shortcutsContent);
+        body.appendChild(aboutContent);
         this.modalContent.appendChild(body);
         const footer = document.createElement("div");
         addClass(footer, "modalFooter");
@@ -135,7 +186,11 @@ export default class TabSettingsModal {
         buttons.forEach((btn, index) => {
             if ((tabName === "request" && index === 0) ||
                 (tabName === "prefix" && index === 1) ||
-                (tabName === "endpoints" && index === 2)) {
+                (tabName === "editor" && index === 2) ||
+                (tabName === "endpoints" && index === 3) ||
+                (tabName === "importexport" && index === 4) ||
+                (tabName === "shortcuts" && index === 5) ||
+                (tabName === "about" && index === 6)) {
                 addClass(btn, "active");
             }
             else {
@@ -145,6 +200,10 @@ export default class TabSettingsModal {
         contents.forEach((content) => {
             if (content.id === `${tabName}-content`) {
                 addClass(content, "active");
+                if (tabName === "editor" && content.innerHTML.indexOf("not yet initialized") > -1) {
+                    content.innerHTML = "";
+                    this.drawEditorSettings(content);
+                }
             }
             else {
                 removeClass(content, "active");
@@ -181,6 +240,104 @@ export default class TabSettingsModal {
         section.appendChild(checkboxContainer);
         container.appendChild(section);
     }
+    drawEditorSettings(container) {
+        var _a, _b, _c;
+        const yasqe = this.tab.getYasqe();
+        if (!yasqe) {
+            const notice = document.createElement("div");
+            notice.textContent = "Query editor is not yet initialized.";
+            addClass(notice, "settingsHelp");
+            container.appendChild(notice);
+            return;
+        }
+        const formatterSection = document.createElement("div");
+        addClass(formatterSection, "settingsSection");
+        const formatterLabel = document.createElement("label");
+        formatterLabel.textContent = "Query Formatter";
+        addClass(formatterLabel, "settingsLabel");
+        const formatterHelp = document.createElement("div");
+        formatterHelp.textContent = "Choose which formatter to use when formatting SPARQL queries (Shift+Ctrl+F).";
+        addClass(formatterHelp, "settingsHelp");
+        const formatterSelect = document.createElement("select");
+        formatterSelect.id = "formatterTypeSelect";
+        addClass(formatterSelect, "settingsSelect");
+        const sparqlFormatterOption = document.createElement("option");
+        sparqlFormatterOption.value = "sparql-formatter";
+        sparqlFormatterOption.textContent = "SPARQL Formatter (external library)";
+        formatterSelect.appendChild(sparqlFormatterOption);
+        const legacyOption = document.createElement("option");
+        legacyOption.value = "legacy";
+        legacyOption.textContent = "Legacy Formatter (built-in)";
+        formatterSelect.appendChild(legacyOption);
+        const currentFormatter = ((_a = yasqe.persistentConfig) === null || _a === void 0 ? void 0 : _a.formatterType) || "sparql-formatter";
+        formatterSelect.value = currentFormatter;
+        formatterSection.appendChild(formatterLabel);
+        formatterSection.appendChild(formatterHelp);
+        formatterSection.appendChild(formatterSelect);
+        container.appendChild(formatterSection);
+        const autoformatSection = document.createElement("div");
+        addClass(autoformatSection, "settingsSection");
+        const autoformatCheckboxContainer = document.createElement("div");
+        addClass(autoformatCheckboxContainer, "checkboxContainer");
+        const autoformatCheckbox = document.createElement("input");
+        autoformatCheckbox.type = "checkbox";
+        autoformatCheckbox.id = "autoformatOnQuery";
+        autoformatCheckbox.checked = ((_b = yasqe.persistentConfig) === null || _b === void 0 ? void 0 : _b.autoformatOnQuery) || true;
+        const autoformatLabel = document.createElement("label");
+        autoformatLabel.htmlFor = "autoformatOnQuery";
+        autoformatLabel.textContent = "Auto-format query before execution";
+        const autoformatHelp = document.createElement("div");
+        autoformatHelp.textContent = "Automatically format the query using the selected formatter before executing it.";
+        addClass(autoformatHelp, "settingsHelp");
+        autoformatHelp.style.marginTop = "5px";
+        autoformatCheckboxContainer.appendChild(autoformatCheckbox);
+        autoformatCheckboxContainer.appendChild(autoformatLabel);
+        autoformatSection.appendChild(autoformatCheckboxContainer);
+        autoformatSection.appendChild(autoformatHelp);
+        container.appendChild(autoformatSection);
+        const constructValidationSection = document.createElement("div");
+        addClass(constructValidationSection, "settingsSection");
+        const constructValidationCheckboxContainer = document.createElement("div");
+        addClass(constructValidationCheckboxContainer, "checkboxContainer");
+        const constructValidationCheckbox = document.createElement("input");
+        constructValidationCheckbox.type = "checkbox";
+        constructValidationCheckbox.id = "checkConstructVariables";
+        constructValidationCheckbox.checked = (_c = yasqe.config.checkConstructVariables) !== null && _c !== void 0 ? _c : true;
+        const constructValidationLabel = document.createElement("label");
+        constructValidationLabel.htmlFor = "checkConstructVariables";
+        constructValidationLabel.textContent = "Validate CONSTRUCT query variables";
+        const constructValidationHelp = document.createElement("div");
+        constructValidationHelp.textContent =
+            "Show warnings for variables used in CONSTRUCT template but not defined in WHERE clause.";
+        addClass(constructValidationHelp, "settingsHelp");
+        constructValidationHelp.style.marginTop = "5px";
+        constructValidationCheckboxContainer.appendChild(constructValidationCheckbox);
+        constructValidationCheckboxContainer.appendChild(constructValidationLabel);
+        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);
+    }
     drawRequestSettings(container) {
         const reqConfig = this.tab.getRequestConfig();
         const methodSection = this.createSection("Request Method");
@@ -236,6 +393,10 @@ export default class TabSettingsModal {
     }
     open() {
         this.loadSettings();
+        const editorContent = this.modalContent.querySelector("#editor-content");
+        if (editorContent && editorContent.innerHTML === "") {
+            this.drawEditorSettings(editorContent);
+        }
         addClass(this.modalOverlay, "open");
     }
     close() {
@@ -257,6 +418,26 @@ export default class TabSettingsModal {
         const deduplicated = this.deduplicatePrefixes(prefixText);
         this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
         this.tab.yasgui.persistentConfig.setAutoCaptureEnabled(autoCapture);
+        const yasqe = this.tab.getYasqe();
+        if (yasqe && yasqe.persistentConfig) {
+            const formatterSelect = document.getElementById("formatterTypeSelect");
+            const autoformatCheckbox = document.getElementById("autoformatOnQuery");
+            const constructValidationCheckbox = document.getElementById("checkConstructVariables");
+            if (formatterSelect) {
+                yasqe.persistentConfig.formatterType = formatterSelect.value;
+            }
+            if (autoformatCheckbox) {
+                yasqe.persistentConfig.autoformatOnQuery = autoformatCheckbox.checked;
+            }
+            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");
         if (requestContent) {
             const selects = requestContent.querySelectorAll("select[data-config]");
@@ -430,6 +611,328 @@ export default class TabSettingsModal {
         const currentTheme = this.tab.yasgui.getTheme();
         return currentTheme === "dark" ? MOON_ICON : SUN_ICON;
     }
+    drawImportExportSettings(container) {
+        const exportSection = document.createElement("div");
+        addClass(exportSection, "settingsSection");
+        const exportLabel = document.createElement("label");
+        exportLabel.textContent = "Export Configuration";
+        addClass(exportLabel, "settingsLabel");
+        const exportHelp = document.createElement("div");
+        exportHelp.textContent =
+            "Export your YASGUI configuration in RDF Turtle format. This includes tabs, queries, endpoints, and preferences.";
+        addClass(exportHelp, "settingsHelp");
+        const exportButtonsContainer = document.createElement("div");
+        addClass(exportButtonsContainer, "exportButtons");
+        const copyButton = document.createElement("button");
+        copyButton.textContent = "📋 Copy to Clipboard";
+        copyButton.type = "button";
+        addClass(copyButton, "secondaryButton");
+        copyButton.onclick = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const config = this.tab.yasgui.persistentConfig.getPersistedConfig();
+                yield ConfigExportImport.copyConfigToClipboard(config);
+                this.showNotification("Configuration copied to clipboard!", "success");
+            }
+            catch (error) {
+                this.showNotification("Failed to copy to clipboard: " + error.message, "error");
+            }
+        });
+        const downloadButton = document.createElement("button");
+        downloadButton.textContent = "💾 Download as File";
+        downloadButton.type = "button";
+        addClass(downloadButton, "primaryButton");
+        downloadButton.onclick = () => {
+            try {
+                const config = this.tab.yasgui.persistentConfig.getPersistedConfig();
+                ConfigExportImport.downloadConfigAsFile(config);
+                this.showNotification("Configuration downloaded!", "success");
+            }
+            catch (error) {
+                this.showNotification("Failed to download: " + error.message, "error");
+            }
+        };
+        exportButtonsContainer.appendChild(copyButton);
+        exportButtonsContainer.appendChild(downloadButton);
+        exportSection.appendChild(exportLabel);
+        exportSection.appendChild(exportHelp);
+        exportSection.appendChild(exportButtonsContainer);
+        container.appendChild(exportSection);
+        const importSection = document.createElement("div");
+        addClass(importSection, "settingsSection");
+        const importLabel = document.createElement("label");
+        importLabel.textContent = "Import Configuration";
+        addClass(importLabel, "settingsLabel");
+        const importHelp = document.createElement("div");
+        importHelp.textContent = "Import a previously exported configuration in RDF Turtle format.";
+        addClass(importHelp, "settingsHelp");
+        const dropZone = document.createElement("div");
+        addClass(dropZone, "dropZone");
+        dropZone.innerHTML = `
+      <div class="dropZoneContent">
+        <div class="dropZoneIcon">📁</div>
+        <div class="dropZoneText">Drag & drop a .ttl file here</div>
+        <div class="dropZoneOr">or</div>
+      </div>
+    `;
+        const fileInput = document.createElement("input");
+        fileInput.type = "file";
+        fileInput.accept = ".ttl,.turtle,text/turtle";
+        fileInput.style.display = "none";
+        fileInput.id = "config-file-input";
+        const browseButton = document.createElement("button");
+        browseButton.textContent = "📂 Browse Files";
+        browseButton.type = "button";
+        addClass(browseButton, "secondaryButton");
+        browseButton.onclick = () => fileInput.click();
+        const pasteButton = document.createElement("button");
+        pasteButton.textContent = "📋 Paste from Clipboard";
+        pasteButton.type = "button";
+        addClass(pasteButton, "secondaryButton");
+        pasteButton.onclick = () => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const content = yield ConfigExportImport.readConfigFromClipboard();
+                yield this.importConfiguration(content);
+            }
+            catch (error) {
+                this.showNotification("Failed to read from clipboard: " + error.message, "error");
+            }
+        });
+        fileInput.onchange = (e) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (file) {
+                try {
+                    const content = yield ConfigExportImport.readConfigFromFile(file);
+                    yield this.importConfiguration(content);
+                }
+                catch (error) {
+                    this.showNotification("Failed to read file: " + error.message, "error");
+                }
+            }
+        });
+        dropZone.ondragover = (e) => {
+            e.preventDefault();
+            addClass(dropZone, "dragover");
+        };
+        dropZone.ondragleave = () => {
+            removeClass(dropZone, "dragover");
+        };
+        dropZone.ondrop = (e) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
+            e.preventDefault();
+            removeClass(dropZone, "dragover");
+            const file = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0];
+            if (file) {
+                try {
+                    const content = yield ConfigExportImport.readConfigFromFile(file);
+                    yield this.importConfiguration(content);
+                }
+                catch (error) {
+                    this.showNotification("Failed to read file: " + error.message, "error");
+                }
+            }
+        });
+        const importButtonsContainer = document.createElement("div");
+        addClass(importButtonsContainer, "importButtons");
+        importButtonsContainer.appendChild(browseButton);
+        importButtonsContainer.appendChild(pasteButton);
+        dropZone.appendChild(importButtonsContainer);
+        importSection.appendChild(importLabel);
+        importSection.appendChild(importHelp);
+        importSection.appendChild(dropZone);
+        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;
+            try {
+                const parsedConfig = ConfigExportImport.parseFromTurtle(turtleContent);
+                const confirmMsg = `This will replace your current configuration with ${((_a = parsedConfig.tabs) === null || _a === void 0 ? void 0 : _a.length) || 0} tab(s). Continue?`;
+                if (!confirm(confirmMsg)) {
+                    return;
+                }
+                this.close();
+                if (parsedConfig.theme) {
+                    this.tab.yasgui.themeManager.setTheme(parsedConfig.theme);
+                }
+                if (parsedConfig.orientation) {
+                    this.tab.yasgui.config.orientation = parsedConfig.orientation;
+                }
+                const existingTabIds = [...this.tab.yasgui.persistentConfig.getTabs()];
+                for (const tabId of existingTabIds) {
+                    const tab = this.tab.yasgui.getTab(tabId);
+                    if (tab) {
+                        tab.close();
+                    }
+                }
+                this.tab.yasgui.persistentConfig.updatePersistedConfig(parsedConfig);
+                window.location.reload();
+            }
+            catch (error) {
+                this.showNotification("Failed to import configuration: " + error.message, "error");
+            }
+        });
+    }
+    showNotification(message, type) {
+        const notification = document.createElement("div");
+        addClass(notification, "importExportNotification", type);
+        notification.textContent = message;
+        this.modalContent.appendChild(notification);
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
+            }
+        }, 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);