@matdata/yasgui 5.10.0 → 5.11.0

package/src/TabElements.scss

@@ -8,6 +8,31 @@ $minTabHeight: 35px;
     display: flex;
     flex-wrap: wrap;
 
+    .queryBrowserToggle {
+      cursor: pointer;
+      min-height: $minTabHeight;
+      padding: 0 10px;
+      background: transparent;
+      border: none;
+      color: var(--yasgui-button-text, #505050);
+      fill: var(--yasgui-button-text, #505050);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-bottom: 2px solid transparent;
+      box-sizing: border-box;
+
+      &:hover,
+      &:focus-visible {
+        color: var(--yasgui-button-hover, #000);
+        background: var(--yasgui-bg-secondary, #f7f7f7);
+      }
+
+      i {
+        font-size: 20px;
+      }
+    }
+
     .sortable-placeholder {
       min-width: 100px;
       min-height: $minTabHeight;
@@ -33,7 +58,6 @@ $minTabHeight: 35px;
       background: transparent;
       border: none;
       color: var(--yasgui-button-text, #505050);
-      fill: var(--yasgui-button-text, #505050);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -41,14 +65,8 @@ $minTabHeight: 35px;
 
       &:hover {
         color: var(--yasgui-button-hover, #000);
-        fill: var(--yasgui-button-hover, #000);
         background: var(--yasgui-bg-secondary, #f7f7f7);
       }
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
     }
 
     .addTab {
@@ -77,6 +95,18 @@ $minTabHeight: 35px;
       $activeColor: #337ab7;
       $hoverColor: color.adjust($activeColor, $lightness: 30%);
 
+      // Distinguish managed-query tabs from legacy tabs via background.
+      // Legacy tabs keep their current styling.
+      &.managed a {
+        background: var(--yasgui-tab-managed, #a4cbed);
+      }
+
+      // Unsaved changes indicator for managed queries.
+      // The dot indicates the user still needs to save.
+      &.managedDirty a span::before {
+        content: "• ";
+      }
+
       .loader {
         display: none;
         background-color: color.adjust(#555, $lightness: 50%);
@@ -118,6 +148,15 @@ $minTabHeight: 35px;
         display: block;
       }
 
+      &.renamingInProgress .loader {
+        display: block;
+      }
+
+      &.renamingInProgress input {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
       &.active a {
         border-bottom-color: $activeColor;
         color: var(--yasgui-text-primary, #555);

package/src/TabElements.ts

@@ -4,14 +4,6 @@ import { hasClass, addClass, removeClass } from "@matdata/yasgui-utils";
 import sortablejs from "sortablejs";
 import "./TabElements.scss";
 
-// Theme toggle icons
-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>`;
-
-const SUN_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
-  <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
-</svg>`;
 export interface TabList {}
 export class TabListEl {
   private tabList: TabList;
@@ -20,6 +12,7 @@ export class TabListEl {
   private renameEl?: HTMLInputElement;
   private nameEl?: HTMLSpanElement;
   public tabEl?: HTMLDivElement;
+  private renameSubmitted = false;
   constructor(yasgui: Yasgui, tabList: TabList, tabId: string) {
     this.tabList = tabList;
     this.yasgui = yasgui;
@@ -35,6 +28,7 @@ export class TabListEl {
     if (this.renameEl) {
       const tab = this.yasgui.getTab(this.tabId);
       if (tab) {
+        this.renameSubmitted = false;
         this.renameEl.value = tab.name();
         addClass(this.tabEl, "renaming");
         this.renameEl.focus();
@@ -67,6 +61,15 @@ export class TabListEl {
       removeClass(this.tabEl, "querying");
     }
   }
+  public setAsRenaming(renaming: boolean) {
+    if (renaming) {
+      addClass(this.tabEl, "renamingInProgress");
+      if (this.renameEl) this.renameEl.disabled = true;
+    } else {
+      removeClass(this.tabEl, "renamingInProgress");
+      if (this.renameEl) this.renameEl.disabled = false;
+    }
+  }
   public draw(name: string) {
     this.tabEl = document.createElement("div");
     this.tabEl.setAttribute("role", "presentation");
@@ -74,8 +77,21 @@ export class TabListEl {
       this.startRename();
     };
     addClass(this.tabEl, "tab");
+
+    const tabConf = this.yasgui.persistentConfig.getTab(this.tabId) as any;
+    if (tabConf?.managedQuery) {
+      addClass(this.tabEl, "managed");
+    }
+
+    // Set initial dirty state for managed queries (e.g., after reload).
+    const initialTab = this.yasgui.getTab(this.tabId);
+    if (initialTab?.hasUnsavedManagedChanges?.()) {
+      addClass(this.tabEl, "managedDirty");
+    }
+
     this.tabEl.addEventListener("keydown", (e: KeyboardEvent) => {
       // Don't handle Delete key if we're renaming the tab (input field is active)
+      if (!this.tabEl) return;
       if (e.code === "Delete" && !this.tabEl.classList.contains("renaming")) {
         handleDeleteTab();
       }
@@ -103,9 +119,10 @@ export class TabListEl {
     tabLinkEl.addEventListener("focus", () => {
       if (!this.tabEl) return;
       if (this.tabEl.classList.contains("active")) {
-        const allTabs = Object.keys(this.tabList._tabs);
-        const currentTabIndex = allTabs.indexOf(this.tabId);
-        this.tabList.tabEntryIndex = currentTabIndex;
+        // Keep arrow-key navigation in sync with actual DOM order
+        const listEl = this.tabList._tabsListEl;
+        if (!listEl) return;
+        this.tabList.tabEntryIndex = Array.prototype.indexOf.call(listEl.children, this.tabEl);
       }
     });
     // if (this.yasgui.persistentConfig.tabIsActive(this.tabId)) {
@@ -134,15 +151,19 @@ export class TabListEl {
     const renameEl = (this.renameEl = document.createElement("input"));
     renameEl.type = "text";
     renameEl.value = name;
+    const submitRename = () => {
+      if (this.renameSubmitted) return;
+      this.renameSubmitted = true;
+      void this.yasgui.getTab(this.tabId)?.renameTab(renameEl.value);
+      removeClass(this.tabEl, "renaming");
+    };
     renameEl.onkeyup = (event) => {
       if (event.key === "Enter") {
-        this.yasgui.getTab(this.tabId)?.setName(renameEl.value);
-        removeClass(this.tabEl, "renaming");
+        submitRename();
       }
     };
     renameEl.onblur = () => {
-      this.yasgui.getTab(this.tabId)?.setName(renameEl.value);
-      removeClass(this.tabEl, "renaming");
+      submitRename();
     };
     // Prevent sortablejs from detecting drag events on the input field
     renameEl.addEventListener("mousedown", (e) => {
@@ -185,6 +206,7 @@ export class TabList {
   public _tabsListEl?: HTMLDivElement;
   public tabContextMenu?: TabContextMenu;
   public tabEntryIndex: number | undefined;
+  private _queryBrowserToggleEl?: HTMLDivElement;
 
   constructor(yasgui: Yasgui) {
     this.yasgui = yasgui;
@@ -214,6 +236,24 @@ export class TabList {
         this._tabs[id].setAsQuerying(false);
       }
     });
+
+    this.yasgui.on("tabChange", (_yasgui, tab) => {
+      const id = tab.getId();
+      const tabEl = this._tabs[id]?.tabEl;
+      if (!tabEl) return;
+
+      if (tab.isManagedQueryTab()) {
+        addClass(tabEl, "managed");
+      } else {
+        removeClass(tabEl, "managed");
+      }
+
+      if (tab.hasUnsavedManagedChanges()) {
+        addClass(tabEl, "managedDirty");
+      } else {
+        removeClass(tabEl, "managedDirty");
+      }
+    });
   }
   private getActiveIndex() {
     if (!this._selectedTab) return;
@@ -228,26 +268,37 @@ export class TabList {
       if (!this._tabsListEl) return;
       const numOfChildren = this._tabsListEl.childElementCount;
       if (typeof this.tabEntryIndex !== "number") return;
+
+      const isQueryBrowserToggleEntry = (el: Element) => !!(el as HTMLElement).querySelector?.(".queryBrowserToggle");
+      const advance = (direction: -1 | 1) => {
+        let nextIndex = this.tabEntryIndex as number;
+        for (let i = 0; i < numOfChildren; i++) {
+          nextIndex += direction;
+          if (nextIndex < 0) nextIndex = numOfChildren - 1;
+          if (nextIndex >= numOfChildren) nextIndex = 0;
+
+          const candidate = this._tabsListEl!.children[nextIndex];
+          if (isQueryBrowserToggleEntry(candidate)) continue;
+          if (!candidate.children[0]) continue;
+          return nextIndex;
+        }
+        return this.tabEntryIndex as number;
+      };
+
       const tabEntryDiv = this._tabsListEl.children[this.tabEntryIndex];
       // If the current tab does not have active set its tabindex to -1
       if (!tabEntryDiv.classList.contains("active")) {
-        tabEntryDiv.children[0].setAttribute("tabindex", "-1"); // cur tab removed from tab index
+        tabEntryDiv.children[0]?.setAttribute("tabindex", "-1"); // cur tab removed from tab index
       }
       if (e.code === "ArrowLeft") {
-        this.tabEntryIndex--;
-        if (this.tabEntryIndex < 0) {
-          this.tabEntryIndex = numOfChildren - 1;
-        }
+        this.tabEntryIndex = advance(-1);
       }
       if (e.code === "ArrowRight") {
-        this.tabEntryIndex++;
-        if (this.tabEntryIndex >= numOfChildren) {
-          this.tabEntryIndex = 0;
-        }
+        this.tabEntryIndex = advance(1);
       }
       const newTabEntryDiv = this._tabsListEl.children[this.tabEntryIndex];
-      newTabEntryDiv.children[0].setAttribute("tabindex", "0");
-      (newTabEntryDiv.children[0] as HTMLElement).focus(); // focus on the a tag inside the div for click event
+      newTabEntryDiv.children[0]?.setAttribute("tabindex", "0");
+      (newTabEntryDiv.children[0] as HTMLElement | undefined)?.focus(); // focus on the a tag inside the div for click event
     }
   };
   drawTabsList() {
@@ -256,6 +307,22 @@ export class TabList {
     this._tabsListEl.setAttribute("role", "tablist");
     this._tabsListEl.addEventListener("keydown", this.handleKeydownArrowKeys);
 
+    this._queryBrowserToggleEl = document.createElement("div");
+    this._queryBrowserToggleEl.setAttribute("role", "presentation");
+
+    const queryBrowserButton = document.createElement("button");
+    queryBrowserButton.type = "button";
+    queryBrowserButton.className = "queryBrowserToggle";
+    queryBrowserButton.setAttribute("aria-label", "Open query browser");
+    queryBrowserButton.title = "Open query browser";
+    queryBrowserButton.innerHTML = '<i class="fas fa-bars"></i>';
+    queryBrowserButton.addEventListener("click", () => {
+      this.yasgui.queryBrowser.toggle(queryBrowserButton);
+    });
+
+    this._queryBrowserToggleEl.appendChild(queryBrowserButton);
+    this._tabsListEl.appendChild(this._queryBrowserToggleEl);
+
     sortablejs.create(this._tabsListEl, {
       group: "tabList",
       animation: 100,
@@ -264,7 +331,7 @@ export class TabList {
         this.yasgui.emit("tabOrderChanged", this.yasgui, tabs);
         this.yasgui.persistentConfig.setTabOrder(tabs);
       },
-      filter: ".addTab, input, .renaming",
+      filter: ".queryBrowserToggle, .addTab, input, .renaming",
       preventOnFilter: false,
       onMove: (ev: any, _origEv: any) => {
         return hasClass(ev.related, "tab");
@@ -353,6 +420,7 @@ export class TabList {
     this.tabContextMenu?.destroy();
     this._tabsListEl?.remove();
     this._tabsListEl = undefined;
+    this._queryBrowserToggleEl = undefined;
   }
 }
 

package/src/TabSettingsModal.scss

@@ -9,11 +9,6 @@
   align-items: center;
   justify-content: center;
 
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-
   &:hover {
     opacity: 0.7;
   }
@@ -165,6 +160,108 @@
   font-style: italic;
 }
 
+.settingsField {
+  margin-bottom: 10px;
+}
+
+.settingsFieldLabel {
+  font-size: 12px;
+  color: var(--yasgui-text-secondary, #666);
+  margin-bottom: 6px;
+}
+
+.settingsActionsRow {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.workspaceList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.workspaceListRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid var(--yasgui-border-color, #e0e0e0);
+  border-radius: 6px;
+  background: var(--yasgui-bg-secondary, white);
+}
+
+.workspaceListLabel {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--yasgui-text-primary, #000);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspaceListActions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  .dangerButton {
+    margin-top: 0;
+  }
+}
+
+.workspaceListStatus {
+  flex: 1;
+  font-size: 12px;
+  color: var(--yasgui-text-secondary, #666);
+  min-width: 0;
+}
+
+.workspaceConfigModalOverlay {
+  z-index: 10001;
+}
+
+.workspaceConfigModal {
+  background: var(--yasgui-bg-primary, white);
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  width: 700px;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.workspaceConfigModalBody {
+  padding: 20px;
+  overflow: auto;
+}
+
+.workspaceConfigModalFooter {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 20px;
+  border-top: 1px solid var(--yasgui-border-color, #e0e0e0);
+}
+
+.settingsActionsRow {
+  .dangerButton {
+    margin-top: 0;
+  }
+}
+
+.settingsStatus {
+  flex: 1;
+  font-size: 12px;
+  color: var(--yasgui-text-secondary, #666);
+}
+
 .settingsSelect {
   width: 100%;
   padding: 8px;

package/src/TabSettingsModal.ts

@@ -5,19 +5,7 @@ import * as ConfigExportImport from "./ConfigExportImport";
 import { VERSION } from "./version";
 import * as OAuth2Utils from "./OAuth2Utils";
 import PersistentConfig from "./PersistentConfig";
-
-// Theme toggle icons
-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>`;
-
-const SUN_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
-  <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/>
-</svg>`;
-
-const SETTINGS_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
-  <path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-7.43 2.52c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/>
-</svg>`;
+import { WorkspaceSettingsForm } from "./queryManagement/WorkspaceSettingsForm";
 
 const AcceptOptionsMap: { key: string; value: string }[] = [
   { key: "JSON", value: "application/sparql-results+json" },
@@ -48,6 +36,12 @@ export default class TabSettingsModal {
   private prefixButton!: HTMLButtonElement;
   private prefixTextarea!: HTMLTextAreaElement;
   private autoCaptureCheckbox!: HTMLInputElement;
+  private handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== "Escape") return;
+    if (!this.modalOverlay.classList.contains("open")) return;
+    e.preventDefault();
+    this.close();
+  };
 
   constructor(tab: Tab, controlBarEl: HTMLElement) {
     this.tab = tab;
@@ -60,7 +54,7 @@ export default class TabSettingsModal {
     addClass(this.settingsButton, "tabContextButton");
     this.settingsButton.setAttribute("aria-label", "Settings");
     this.settingsButton.title = "Settings";
-    this.settingsButton.innerHTML = SETTINGS_ICON;
+    this.settingsButton.innerHTML = '<i class="fas fa-cog"></i>';
     this.settingsButton.onclick = () => this.open();
     controlBarEl.appendChild(this.settingsButton);
 
@@ -82,9 +76,7 @@ export default class TabSettingsModal {
     this.prefixButton = document.createElement("button");
     this.prefixButton.setAttribute("aria-label", "Insert Prefixes");
     this.prefixButton.title = "Insert saved prefixes into query";
-    this.prefixButton.innerHTML = `<svg viewBox="0 0 24 24" fill="currentColor">
-      <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z"/>
-    </svg>`;
+    this.prefixButton.innerHTML = '<i class="fas fa-arrow-up-right-from-square"></i>';
     addClass(this.prefixButton, "tabContextButton", "prefixButton");
     controlBarEl.appendChild(this.prefixButton);
     this.prefixButton.onclick = () => this.insertPrefixesIntoQuery();
@@ -137,6 +129,11 @@ export default class TabSettingsModal {
     addClass(endpointsTab, "modalNavButton");
     endpointsTab.onclick = () => this.switchTab("endpoints");
 
+    const workspacesTab = document.createElement("button");
+    workspacesTab.textContent = "Workspaces";
+    addClass(workspacesTab, "modalNavButton");
+    workspacesTab.onclick = () => this.switchTab("workspaces");
+
     const prefixTab = document.createElement("button");
     prefixTab.textContent = "Prefixes";
     addClass(prefixTab, "modalNavButton");
@@ -164,6 +161,7 @@ export default class TabSettingsModal {
 
     sidebar.appendChild(requestTab);
     sidebar.appendChild(endpointsTab);
+    sidebar.appendChild(workspacesTab);
     sidebar.appendChild(prefixTab);
     sidebar.appendChild(editorTab);
     sidebar.appendChild(importExportTab);
@@ -188,6 +186,11 @@ export default class TabSettingsModal {
     endpointsContent.id = "endpoints-content";
     this.drawEndpointsSettings(endpointsContent);
 
+    const workspacesContent = document.createElement("div");
+    addClass(workspacesContent, "modalTabContent");
+    workspacesContent.id = "workspaces-content";
+    this.drawWorkspacesSettings(workspacesContent);
+
     const prefixContent = document.createElement("div");
     addClass(prefixContent, "modalTabContent");
     prefixContent.id = "prefix-content";
@@ -215,6 +218,7 @@ export default class TabSettingsModal {
 
     contentArea.appendChild(requestContent);
     contentArea.appendChild(endpointsContent);
+    contentArea.appendChild(workspacesContent);
     contentArea.appendChild(prefixContent);
     contentArea.appendChild(editorContent);
     contentArea.appendChild(importExportContent);
@@ -254,11 +258,12 @@ export default class TabSettingsModal {
       if (
         (tabName === "request" && index === 0) ||
         (tabName === "endpoints" && index === 1) ||
-        (tabName === "prefix" && index === 2) ||
-        (tabName === "editor" && index === 3) ||
-        (tabName === "importexport" && index === 4) ||
-        (tabName === "shortcuts" && index === 5) ||
-        (tabName === "about" && index === 6)
+        (tabName === "workspaces" && index === 2) ||
+        (tabName === "prefix" && index === 3) ||
+        (tabName === "editor" && index === 4) ||
+        (tabName === "importexport" && index === 5) ||
+        (tabName === "shortcuts" && index === 6) ||
+        (tabName === "about" && index === 7)
       ) {
         addClass(btn as HTMLElement, "active");
       } else {
@@ -287,6 +292,22 @@ export default class TabSettingsModal {
     });
   }
 
+  private drawWorkspacesSettings(container: HTMLElement) {
+    const form = new WorkspaceSettingsForm(container, {
+      persistentConfig: this.tab.yasgui.persistentConfig,
+      onDeleteRequested: (workspaceId) => {
+        const w = this.tab.yasgui.persistentConfig.getWorkspace(workspaceId);
+        const name = w?.label || workspaceId;
+        if (confirm(`Delete workspace "${name}"? This only removes the local configuration.`)) {
+          this.tab.yasgui.persistentConfig.deleteWorkspace(workspaceId);
+          form.render();
+        }
+      },
+    });
+
+    form.render();
+  }
+
   private drawPrefixSettings(container: HTMLElement) {
     const section = document.createElement("div");
     addClass(section, "settingsSection");
@@ -1298,10 +1319,12 @@ export default class TabSettingsModal {
       }
     }
     addClass(this.modalOverlay, "open");
+    document.addEventListener("keydown", this.handleKeyDown);
   }
 
   public close() {
     removeClass(this.modalOverlay, "open");
+    document.removeEventListener("keydown", this.handleKeyDown);
   }
 
   private loadSettings() {
@@ -1488,9 +1511,9 @@ export default class TabSettingsModal {
 
   private getThemeToggleIcon(): string {
     const currentTheme = this.tab.yasgui.getTheme();
-    // In dark mode, show moon icon (clicking will switch to light)
-    // In light mode, show sun icon (clicking will switch to dark)
-    return currentTheme === "dark" ? MOON_ICON : SUN_ICON;
+    // In dark mode, show lightbulb icon (clicking will switch to light)
+    // In light mode, show moon icon (clicking will switch to dark)
+    return currentTheme === "dark" ? '<i class="fas fa-lightbulb"></i>' : '<i class="fas fa-moon"></i>';
   }
 
   private drawImportExportSettings(container: HTMLElement) {

package/src/endpointSelect.scss

@@ -186,9 +186,8 @@
     flex-shrink: 0;
     transition: all 0.2s ease;
 
-    svg {
-      width: 16px;
-      height: 16px;
+    i {
+      font-size: 16px;
     }
 
     &:hover {

package/src/index.scss

@@ -1,3 +1,7 @@
+// Font Awesome icons
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
+
 // Main YASGUI container - fills 100% of parent element
 // Parent element (typically body) should have height: 100%; width: 100%
 .yasgui {

package/src/index.ts

@@ -16,6 +16,7 @@ import TablePlugin from "@matdata/yasgui-table-plugin";
 import "@matdata/yasgui-graph-plugin/dist/yasgui-graph-plugin.min.css";
 import "@matdata/yasgui-table-plugin/dist/yasgui-table-plugin.min.css";
 import { ThemeManager, Theme } from "./ThemeManager";
+import QueryBrowser from "./queryManagement/QueryBrowser";
 import "./index.scss";
 import "./themes.scss";
 import "../../yasr/src/scss/global.scss";
@@ -152,6 +153,7 @@ export class Yasgui extends EventEmitter {
   public config: Config;
   public persistentConfig: PersistentConfig;
   public themeManager: ThemeManager;
+  public queryBrowser: QueryBrowser;
   public static Tab = Tab;
   constructor(parent: HTMLElement, config: PartialConfig) {
     super();
@@ -178,8 +180,11 @@ export class Yasgui extends EventEmitter {
     this.tabElements = new TabElements(this);
     this.tabPanelsEl = document.createElement("div");
 
+    this.queryBrowser = new QueryBrowser(this);
+
     this.rootEl.appendChild(this.tabElements.drawTabsList());
     this.rootEl.appendChild(this.tabPanelsEl);
+    this.rootEl.appendChild(this.queryBrowser.getElement());
     let executeIdAfterInit: string | undefined;
     let optionsFromUrl: PersistedTabJson | undefined;
     if (this.config.populateFromUrl) {
@@ -456,5 +461,7 @@ export function getRandomId() {
   return Math.random().toString(36).substring(7);
 }
 
+export * from "./queryManagement";
+
 export type { Theme } from "./ThemeManager";
 export default Yasgui;