@matdata/yasgui 5.2.0 → 5.4.0

package/src/TabSettingsModal.ts

@@ -1,6 +1,8 @@
 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">
@@ -126,14 +128,38 @@ export default class TabSettingsModal {
     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);
 
     // Tab content containers
@@ -147,14 +173,38 @@ export default class TabSettingsModal {
     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);
 
@@ -189,7 +239,11 @@ export default class TabSettingsModal {
       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 as HTMLElement, "active");
       } else {
@@ -200,6 +254,11 @@ export default class TabSettingsModal {
     contents.forEach((content) => {
       if (content.id === `${tabName}-content`) {
         addClass(content as HTMLElement, "active");
+        // Reload editor settings if switching to editor tab and it hasn't been loaded yet
+        if (tabName === "editor" && content.innerHTML.indexOf("not yet initialized") > -1) {
+          content.innerHTML = "";
+          this.drawEditorSettings(content as HTMLElement);
+        }
       } else {
         removeClass(content as HTMLElement, "active");
       }
@@ -246,6 +305,137 @@ export default class TabSettingsModal {
     container.appendChild(section);
   }
 
+  private drawEditorSettings(container: HTMLElement) {
+    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;
+    }
+
+    // Formatter Type Section
+    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 = yasqe.persistentConfig?.formatterType || "sparql-formatter";
+    formatterSelect.value = currentFormatter;
+
+    formatterSection.appendChild(formatterLabel);
+    formatterSection.appendChild(formatterHelp);
+    formatterSection.appendChild(formatterSelect);
+    container.appendChild(formatterSection);
+
+    // Auto-format on Query Section
+    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 = yasqe.persistentConfig?.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);
+
+    // CONSTRUCT Variable Validation Section
+    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 = yasqe.config.checkConstructVariables ?? 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);
+
+    // 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 drawRequestSettings(container: HTMLElement) {
     // This is a simplified version - you can expand based on TabPanel.ts
     const reqConfig = this.tab.getRequestConfig();
@@ -312,6 +502,11 @@ export default class TabSettingsModal {
 
   public open() {
     this.loadSettings();
+    // Reload editor settings in case yasqe wasn't available during init
+    const editorContent = this.modalContent.querySelector("#editor-content");
+    if (editorContent && editorContent.innerHTML === "") {
+      this.drawEditorSettings(editorContent as HTMLElement);
+    }
     addClass(this.modalOverlay, "open");
   }
 
@@ -344,6 +539,29 @@ export default class TabSettingsModal {
     this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
     this.tab.yasgui.persistentConfig.setAutoCaptureEnabled(autoCapture);
 
+    // Save editor settings
+    const yasqe = this.tab.getYasqe();
+    if (yasqe && yasqe.persistentConfig) {
+      const formatterSelect = document.getElementById("formatterTypeSelect") as HTMLSelectElement;
+      const autoformatCheckbox = document.getElementById("autoformatOnQuery") as HTMLInputElement;
+      const constructValidationCheckbox = document.getElementById("checkConstructVariables") as HTMLInputElement;
+
+      if (formatterSelect) {
+        yasqe.persistentConfig.formatterType = formatterSelect.value as "sparql-formatter" | "legacy";
+      }
+      if (autoformatCheckbox) {
+        yasqe.persistentConfig.autoformatOnQuery = autoformatCheckbox.checked;
+      }
+      if (constructValidationCheckbox) {
+        yasqe.setCheckConstructVariables(constructValidationCheckbox.checked);
+      }
+      const snippetsBarCheckbox = document.getElementById("showSnippetsBar") as HTMLInputElement;
+      if (snippetsBarCheckbox) {
+        yasqe.setSnippetsBarVisible(snippetsBarCheckbox.checked);
+      }
+      yasqe.saveQuery();
+    }
+
     // Save request settings
     const requestContent = this.modalContent.querySelector("#request-content");
     if (requestContent) {
@@ -414,10 +632,10 @@ export default class TabSettingsModal {
     // If we didn't find a non-PREFIX line, all lines are PREFIX or empty
     if (firstNonPrefixLine === 0 && lines.length > 0) {
       // Check if there's any content at all
-      const hasContent = lines.some((line) => line.trim().length > 0);
+      const hasContent = lines.some((line: string) => line.trim().length > 0);
       if (
         !hasContent ||
-        lines.every((line) => line.trim().length === 0 || line.trim().toUpperCase().startsWith("PREFIX"))
+        lines.every((line: string) => line.trim().length === 0 || line.trim().toUpperCase().startsWith("PREFIX"))
       ) {
         firstNonPrefixLine = lines.length;
       }
@@ -574,6 +792,422 @@ export default class TabSettingsModal {
     return currentTheme === "dark" ? MOON_ICON : SUN_ICON;
   }
 
+  private drawImportExportSettings(container: HTMLElement) {
+    // Export Section
+    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 = async () => {
+      try {
+        const config = this.tab.yasgui.persistentConfig.getPersistedConfig();
+        await ConfigExportImport.copyConfigToClipboard(config);
+        this.showNotification("Configuration copied to clipboard!", "success");
+      } catch (error) {
+        this.showNotification("Failed to copy to clipboard: " + (error as 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 as Error).message, "error");
+      }
+    };
+
+    exportButtonsContainer.appendChild(copyButton);
+    exportButtonsContainer.appendChild(downloadButton);
+
+    exportSection.appendChild(exportLabel);
+    exportSection.appendChild(exportHelp);
+    exportSection.appendChild(exportButtonsContainer);
+    container.appendChild(exportSection);
+
+    // Import Section
+    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");
+
+    // Drag and drop area
+    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 = async () => {
+      try {
+        const content = await ConfigExportImport.readConfigFromClipboard();
+        await this.importConfiguration(content);
+      } catch (error) {
+        this.showNotification("Failed to read from clipboard: " + (error as Error).message, "error");
+      }
+    };
+
+    // File input change handler
+    fileInput.onchange = async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (file) {
+        try {
+          const content = await ConfigExportImport.readConfigFromFile(file);
+          await this.importConfiguration(content);
+        } catch (error) {
+          this.showNotification("Failed to read file: " + (error as Error).message, "error");
+        }
+      }
+    };
+
+    // Drag and drop handlers
+    dropZone.ondragover = (e) => {
+      e.preventDefault();
+      addClass(dropZone, "dragover");
+    };
+
+    dropZone.ondragleave = () => {
+      removeClass(dropZone, "dragover");
+    };
+
+    dropZone.ondrop = async (e) => {
+      e.preventDefault();
+      removeClass(dropZone, "dragover");
+
+      const file = e.dataTransfer?.files?.[0];
+      if (file) {
+        try {
+          const content = await ConfigExportImport.readConfigFromFile(file);
+          await this.importConfiguration(content);
+        } catch (error) {
+          this.showNotification("Failed to read file: " + (error as 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);
+  }
+
+  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);
+
+      // Confirm with user before importing
+      const confirmMsg = `This will replace your current configuration with ${parsedConfig.tabs?.length || 0} tab(s). Continue?`;
+      if (!confirm(confirmMsg)) {
+        return;
+      }
+
+      // Close the modal first
+      this.close();
+
+      // Apply theme if provided
+      if (parsedConfig.theme) {
+        this.tab.yasgui.themeManager.setTheme(parsedConfig.theme);
+      }
+
+      // Apply global orientation if provided
+      if (parsedConfig.orientation) {
+        this.tab.yasgui.config.orientation = parsedConfig.orientation;
+      }
+
+      // Close all existing tabs
+      const existingTabIds = [...this.tab.yasgui.persistentConfig.getTabs()];
+      for (const tabId of existingTabIds) {
+        const tab = this.tab.yasgui.getTab(tabId);
+        if (tab) {
+          tab.close();
+        }
+      }
+
+      // Update the configuration storage
+      this.tab.yasgui.persistentConfig.updatePersistedConfig(parsedConfig);
+
+      window.location.reload();
+    } catch (error) {
+      this.showNotification("Failed to import configuration: " + (error as Error).message, "error");
+    }
+  }
+
+  private showNotification(message: string, type: "success" | "error") {
+    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);
+  }
+
+  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);