@matdata/yasgui 5.14.0 → 5.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.14.0",
+  "version": "5.16.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/Tab.ts

@@ -17,6 +17,7 @@ import { saveManagedQuery } from "./queryManagement/saveManagedQuery";
 import { getWorkspaceBackend } from "./queryManagement/backends/getWorkspaceBackend";
 import { asWorkspaceBackendError } from "./queryManagement/backends/errors";
 import { normalizeQueryFilename } from "./queryManagement/normalizeQueryFilename";
+import { resolveEndpointUrl } from "./urlUtils";
 
 export interface PersistedJsonYasr extends YasrPersistentConfig {
   responseSummary: Parser.ResponseSummary;
@@ -174,6 +175,42 @@ export class Tab extends EventEmitter {
     return this.persistentJson.yasqe.value;
   }
 
+  public async downloadAsRqFile() {
+    const query = this.getQueryTextForSave();
+    const tabName = this.name() || "query";
+    const filename = tabName.endsWith(".rq") || tabName.endsWith(".sparql") ? tabName : `${tabName}.rq`;
+    const blob = new Blob([query], { type: "application/sparql-query" });
+
+    // Use File System Access API if available so the user can choose the save location
+    if ("showSaveFilePicker" in window) {
+      try {
+        const showSaveFilePicker = (
+          window as Window & { showSaveFilePicker: (...args: unknown[]) => Promise<FileSystemFileHandle> }
+        ).showSaveFilePicker;
+        const fileHandle = await showSaveFilePicker({
+          suggestedName: filename,
+          types: [{ description: "SPARQL Query", accept: { "application/sparql-query": [".rq", ".sparql"] } }],
+        });
+        const writable = await fileHandle.createWritable();
+        await writable.write(blob);
+        await writable.close();
+        return;
+      } catch (e: any) {
+        // User cancelled the picker – abort silently
+        if (e?.name === "AbortError") return;
+        // Other errors fall through to the legacy download below
+      }
+    }
+
+    // Fallback for browsers without File System Access API
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
   public async saveManagedQueryOrSaveAsManagedQuery(): Promise<void> {
     const meta = this.getManagedQueryMetadata();
     if (!meta) {
@@ -304,7 +341,7 @@ export class Tab extends EventEmitter {
         name: result.name,
         filename: result.filename,
         queryText: this.getQueryTextForSave(),
-        associatedEndpoint: workspace.type === "sparql" ? this.getEndpoint() : undefined,
+        associatedEndpoint: workspace.type === "sparql" ? resolveEndpointUrl(this.getEndpoint()) : undefined,
         message: result.message,
         expectedVersionTag,
       });
@@ -534,7 +571,7 @@ export class Tab extends EventEmitter {
     if (!this.controlBarEl) return;
 
     this.orientationToggleButton = document.createElement("button");
-    this.orientationToggleButton.className = "tabContextButton orientationToggle";
+    this.orientationToggleButton.className = "tabContextButton orientationToggle desktopOnly";
     this.orientationToggleButton.setAttribute("aria-label", "Toggle layout orientation");
     this.orientationToggleButton.title = "Toggle layout orientation";
 
@@ -614,6 +651,10 @@ export class Tab extends EventEmitter {
     return this.yasr;
   }
 
+  public getCurrentOrientation() {
+    return this.currentOrientation;
+  }
+
   private initTabSettingsMenu() {
     if (!this.controlBarEl) throw new Error("Need to initialize wrapper elements before drawing tab settings");
     this.settingsModal = new TabSettingsModal(this, this.controlBarEl);
@@ -1301,6 +1342,11 @@ export class Tab extends EventEmitter {
       void this.saveManagedQueryOrSaveAsManagedQuery();
     });
 
+    // Hook up download as .rq file
+    this.yasqe.on("downloadRqFile", () => {
+      void this.downloadAsRqFile();
+    });
+
     // Show/hide save button based on workspace configuration
     this.updateSaveButtonVisibility();
 
@@ -1445,14 +1491,38 @@ export class Tab extends EventEmitter {
 
     // Check if token is a URI (not a variable)
     // URIs typically have token.type of 'string-2' or might be in angle brackets
-    const tokenString = token.string.trim();
+    let tokenString = token.string.trim();
 
     // Skip if it's a variable (starts with ? or $)
     if (tokenString.startsWith("?") || tokenString.startsWith("$")) return;
 
+    // Handle prefixed names that may be split into multiple tokens by the tokenizer
+    // The tokenizer splits "prefix:localname" into two tokens:
+    // - PNAME_LN_PREFIX (e.g., "bnd:") with type "string-2"
+    // - PNAME_LN_LOCAL (e.g., "_subnetwork_bane_KVGB") with type "string"
+    // We need to combine them to get the full prefixed name
+    if (token.type === "string-2" && tokenString.endsWith(":")) {
+      // This is a prefix token, get the next token for the local name
+      const nextToken = this.yasqe.getTokenAt({ line: pos.line, ch: token.end + 1 });
+      if (nextToken && nextToken.type === "string" && nextToken.start === token.end) {
+        tokenString = `${tokenString}${nextToken.string.trim()}`;
+      }
+    } else if (token.type === "string" && token.start > 0) {
+      // This might be a local name token, check if previous token is a prefix
+      const prevToken = this.yasqe.getTokenAt({ line: pos.line, ch: token.start - 1 });
+      if (
+        prevToken &&
+        prevToken.type === "string-2" &&
+        prevToken.string.trim().endsWith(":") &&
+        prevToken.end === token.start
+      ) {
+        tokenString = `${prevToken.string.trim()}${tokenString}`;
+      }
+    }
+
     // Check if it's a URI - either in angle brackets or a prefixed name
     const isFullUri = tokenString.startsWith("<") && tokenString.endsWith(">");
-    const isPrefixedName = /^[\w-]+:[\w-]+/.test(tokenString);
+    const isPrefixedName = /^[\w-]+:/.test(tokenString);
 
     if (!isFullUri && !isPrefixedName) return;
 
@@ -1467,7 +1537,8 @@ export class Tab extends EventEmitter {
     } else if (isPrefixedName) {
       // Expand prefixed name to full URI
       const prefixes = this.yasqe.getPrefixesFromQuery();
-      const [prefix, localName] = tokenString.split(":");
+      const [prefix, ...localParts] = tokenString.split(":");
+      const localName = localParts.join(":");
       const prefixUri = prefixes[prefix];
       if (prefixUri) {
         uri = prefixUri + localName;
@@ -1601,6 +1672,13 @@ WHERE {
         // Add default renderers to the end, to give our custom ones priority.
         ...(Yasr.defaults.errorRenderers || []),
       ],
+      executeQuery: async (query: string, options?: { acceptHeader?: string }) => {
+        if (!this.yasqe) throw new Error("No YASQE instance available");
+        return Yasqe.Sparql.executeQuery(this.yasqe, undefined, {
+          customQuery: query,
+          customAccept: options?.acceptHeader,
+        });
+      },
     };
     // Allow getDownloadFilName to be overwritten by the global config
     if (yasrConf.getDownloadFileName === undefined) {

package/src/TabContextMenu.ts

@@ -14,8 +14,9 @@ export default class TabContextMenu {
   private contextEl!: HTMLElement;
   private newTabEl!: HTMLElement;
   private renameTabEl!: HTMLElement;
-  private copyTabEl!: HTMLElement;
+  private duplicateTabEl!: HTMLElement;
   private saveManagedQueryEl!: HTMLElement;
+  private saveAsRqFileEl!: HTMLElement;
   private closeTabEl!: HTMLElement;
   private closeOtherTabsEl!: HTMLElement;
   private reOpenOldTab!: HTMLElement;
@@ -48,10 +49,12 @@ export default class TabContextMenu {
 
     this.renameTabEl = this.getMenuItemEl("Rename Tab");
 
-    this.copyTabEl = this.getMenuItemEl("Copy Tab");
+    this.duplicateTabEl = this.getMenuItemEl("Duplicate Tab");
 
     this.saveManagedQueryEl = this.getMenuItemEl("Save as managed query");
 
+    this.saveAsRqFileEl = this.getMenuItemEl("Save as .rq file");
+
     this.closeTabEl = this.getMenuItemEl("Close Tab");
 
     this.closeOtherTabsEl = this.getMenuItemEl("Close other tabs");
@@ -61,8 +64,9 @@ export default class TabContextMenu {
     // Add items to list
     dropDownList.appendChild(this.newTabEl);
     dropDownList.appendChild(this.renameTabEl);
-    dropDownList.appendChild(this.copyTabEl);
+    dropDownList.appendChild(this.duplicateTabEl);
     dropDownList.appendChild(this.saveManagedQueryEl);
+    dropDownList.appendChild(this.saveAsRqFileEl);
     // Add divider
     dropDownList.appendChild(document.createElement("hr"));
     dropDownList.appendChild(this.closeTabEl);
@@ -101,8 +105,8 @@ export default class TabContextMenu {
     // Set rename functionality
     this.renameTabEl.onclick = () => currentTabEl.startRename();
 
-    // Copy tab functionality`
-    this.copyTabEl.onclick = () => {
+    // Duplicate tab functionality
+    this.duplicateTabEl.onclick = () => {
       if (!tab) return;
       const config = cloneDeep(tab.getPersistedJson());
       config.id = getRandomId();
@@ -115,6 +119,12 @@ export default class TabContextMenu {
       this.closeConfigMenu();
     };
 
+    this.saveAsRqFileEl.onclick = () => {
+      if (!tab) return;
+      tab.downloadAsRqFile();
+      this.closeConfigMenu();
+    };
+
     // Close tab functionality
     this.closeTabEl.onclick = () => tab?.close();
 

package/src/TabElements.scss

@@ -94,6 +94,10 @@ $minTabHeight: 35px;
       position: relative;
       $activeColor: #337ab7;
       $hoverColor: color.adjust($activeColor, $lightness: 30%);
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
 
       // Distinguish managed-query tabs from legacy tabs via background.
       // Legacy tabs keep their current styling.
@@ -190,6 +194,19 @@ $minTabHeight: 35px;
         padding: 0px 24px 0px 30px;
         white-space: nowrap;
         overflow: hidden;
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -webkit-user-drag: none;
+
+        span {
+          user-select: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          pointer-events: none;
+        }
 
         &:hover {
           border-bottom-color: $hoverColor;

package/src/TabElements.ts

@@ -107,7 +107,7 @@ export class TabListEl {
     tabLinkEl.href = "#" + this.tabId;
     tabLinkEl.id = "tab-" + this.tabId; // use the id for the tabpanel which is tabId to set the actual tab id
     tabLinkEl.setAttribute("aria-controls", this.tabId); // respective tabPanel id
-    tabLinkEl.draggable = false; // Prevent default link dragging that interferes with text selection
+    // Note: draggable attribute removed - CSS user-select:none prevents text selection during drag
     tabLinkEl.addEventListener("blur", () => {
       if (!this.tabEl) return;
       if (this.tabEl.classList.contains("active")) {
@@ -133,6 +133,17 @@ export class TabListEl {
       this.yasgui.selectTabId(this.tabId);
     });
 
+    // Prevent anchor default drag behavior that interferes with SortableJS in some browsers
+    tabLinkEl.addEventListener("dragstart", (e) => {
+      e.preventDefault();
+    });
+    tabLinkEl.addEventListener("mousedown", (e) => {
+      // Only prevent default on middle/right click to avoid navigation
+      if (e.button !== 0) {
+        e.preventDefault();
+      }
+    });
+
     //tab name
     this.nameEl = document.createElement("span");
     this.nameEl.textContent = name;
@@ -315,7 +326,7 @@ export class TabList {
     queryBrowserButton.className = "queryBrowserToggle";
     queryBrowserButton.setAttribute("aria-label", "Open query browser");
     queryBrowserButton.title = "Open query browser";
-    queryBrowserButton.innerHTML = '<i class="fas fa-bars"></i>';
+    queryBrowserButton.innerHTML = '<i class="fa-regular fa-file-lines"></i>';
     queryBrowserButton.addEventListener("click", () => {
       this.yasgui.queryBrowser.toggle(queryBrowserButton);
     });
@@ -326,12 +337,15 @@ export class TabList {
     sortablejs.create(this._tabsListEl, {
       group: "tabList",
       animation: 100,
+      draggable: ".tab",
+      forceFallback: true,
+      fallbackTolerance: 3,
       onUpdate: (_ev: any) => {
         const tabs = this.deriveTabOrderFromEls();
         this.yasgui.emit("tabOrderChanged", this.yasgui, tabs);
         this.yasgui.persistentConfig.setTabOrder(tabs);
       },
-      filter: ".queryBrowserToggle, .addTab, input, .renaming",
+      filter: ".queryBrowserToggle, .addTab, input, .renaming, .closeTab",
       preventOnFilter: false,
       onMove: (ev: any, _origEv: any) => {
         return hasClass(ev.related, "tab");

package/src/TabSettingsModal.scss

@@ -1251,3 +1251,76 @@
     transform: translateY(1px);
   }
 }
+
+// Hamburger menu styles
+.hamburgerContainer {
+  position: relative;
+  display: none; // Hidden by default (desktop)
+
+  @media (max-width: 768px) {
+    display: flex; // Show on mobile
+  }
+}
+
+.hamburgerMenuButton {
+  &.active {
+    color: var(--yasgui-accent-color, #337ab7);
+  }
+}
+
+.hamburgerDropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: var(--yasgui-bg-primary, white);
+  border: 1px solid var(--yasgui-border-color, #e0e0e0);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 200px;
+  z-index: 1000;
+  margin-top: 5px;
+  overflow: hidden;
+}
+
+.hamburgerMenuItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--yasgui-border-color, #f0f0f0);
+  text-align: left;
+  cursor: pointer;
+  color: var(--yasgui-text-primary, #333);
+  transition: background-color 0.2s;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: var(--yasgui-bg-secondary, #f7f7f7);
+  }
+
+  i {
+    font-size: 16px;
+    width: 20px;
+    text-align: center;
+    color: var(--yasgui-button-text, #505050);
+  }
+
+  span {
+    flex: 1;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+// Responsive visibility classes
+.desktopOnly {
+  @media (max-width: 768px) {
+    display: none !important;
+  }
+}

package/src/TabSettingsModal.ts

@@ -39,6 +39,10 @@ export default class TabSettingsModal {
   private prefixButton!: HTMLButtonElement;
   private prefixTextarea!: HTMLTextAreaElement;
   private autoCaptureCheckbox!: HTMLInputElement;
+  private hamburgerMenuButton!: HTMLButtonElement;
+  private hamburgerDropdown!: HTMLElement;
+  private isHamburgerOpen = false;
+  private mouseDownOnOverlay = false;
   private handleKeyDown = (e: KeyboardEvent) => {
     if (e.key !== "Escape") return;
     if (!this.modalOverlay.classList.contains("open")) return;
@@ -54,7 +58,7 @@ export default class TabSettingsModal {
   private init(controlBarEl: HTMLElement) {
     // Settings button
     this.settingsButton = document.createElement("button");
-    addClass(this.settingsButton, "tabContextButton");
+    addClass(this.settingsButton, "tabContextButton", "desktopOnly");
     this.settingsButton.setAttribute("aria-label", "Settings");
     this.settingsButton.title = "Settings";
     this.settingsButton.innerHTML = '<i class="fas fa-cog"></i>';
@@ -64,7 +68,7 @@ export default class TabSettingsModal {
     // Theme toggle button (if enabled)
     if (this.tab.yasgui.config.showThemeToggle) {
       this.themeToggleButton = document.createElement("button");
-      addClass(this.themeToggleButton, "tabContextButton", "themeToggle");
+      addClass(this.themeToggleButton, "tabContextButton", "themeToggle", "desktopOnly");
       this.themeToggleButton.setAttribute("aria-label", "Toggle between light and dark theme");
       this.themeToggleButton.title = "Toggle theme";
       this.themeToggleButton.innerHTML = this.getThemeToggleIcon();
@@ -80,19 +84,143 @@ export default class TabSettingsModal {
     this.prefixButton.setAttribute("aria-label", "Insert Prefixes");
     this.prefixButton.title = "Insert saved prefixes into query";
     this.prefixButton.innerHTML = '<i class="fas fa-arrow-up-right-from-square"></i>';
-    addClass(this.prefixButton, "tabContextButton", "prefixButton");
+    addClass(this.prefixButton, "tabContextButton", "prefixButton", "desktopOnly");
     controlBarEl.appendChild(this.prefixButton);
     this.prefixButton.onclick = () => this.insertPrefixesIntoQuery();
 
+    // Hamburger menu button and dropdown (mobile only)
+    const hamburgerContainer = document.createElement("div");
+    addClass(hamburgerContainer, "hamburgerContainer", "mobileOnly");
+
+    this.hamburgerMenuButton = document.createElement("button");
+    addClass(this.hamburgerMenuButton, "tabContextButton", "hamburgerMenuButton");
+    this.hamburgerMenuButton.setAttribute("aria-label", "Menu");
+    this.hamburgerMenuButton.title = "Open menu";
+    this.hamburgerMenuButton.innerHTML = '<i class="fas fa-bars"></i>';
+    this.hamburgerMenuButton.onclick = (e) => {
+      e.stopPropagation();
+      this.toggleHamburgerMenu();
+    };
+    hamburgerContainer.appendChild(this.hamburgerMenuButton);
+
+    // Create hamburger dropdown menu
+    this.createHamburgerDropdown(hamburgerContainer);
+
+    controlBarEl.appendChild(hamburgerContainer);
+
+    // Close hamburger menu when clicking outside
+    document.addEventListener("click", (e) => {
+      if (
+        this.isHamburgerOpen &&
+        !this.hamburgerDropdown.contains(e.target as Node) &&
+        e.target !== this.hamburgerMenuButton
+      ) {
+        this.closeHamburgerMenu();
+      }
+    });
+
     this.createModal();
   }
 
+  private createHamburgerDropdown(hamburgerContainer: HTMLElement) {
+    this.hamburgerDropdown = document.createElement("div");
+    addClass(this.hamburgerDropdown, "hamburgerDropdown");
+    this.hamburgerDropdown.style.display = "none";
+
+    // Settings menu item
+    const settingsItem = document.createElement("button");
+    addClass(settingsItem, "hamburgerMenuItem");
+    settingsItem.innerHTML = '<i class="fas fa-cog"></i><span>Settings</span>';
+    settingsItem.onclick = () => {
+      this.open();
+      this.closeHamburgerMenu();
+    };
+    this.hamburgerDropdown.appendChild(settingsItem);
+
+    // Prefix menu item
+    const prefixItem = document.createElement("button");
+    addClass(prefixItem, "hamburgerMenuItem");
+    prefixItem.innerHTML = '<i class="fas fa-arrow-up-right-from-square"></i><span>Insert Prefixes</span>';
+    prefixItem.onclick = () => {
+      this.insertPrefixesIntoQuery();
+      this.closeHamburgerMenu();
+    };
+    this.hamburgerDropdown.appendChild(prefixItem);
+
+    // Theme toggle menu item (if enabled)
+    if (this.tab.yasgui.config.showThemeToggle) {
+      const themeItem = document.createElement("button");
+      addClass(themeItem, "hamburgerMenuItem", "themeMenuItem");
+      themeItem.innerHTML = this.getThemeToggleIcon() + "<span>Toggle Theme</span>";
+      themeItem.onclick = () => {
+        this.tab.yasgui.toggleTheme();
+        themeItem.innerHTML = this.getThemeToggleIcon() + "<span>Toggle Theme</span>";
+        // Keep menu open for theme toggle so user can see the change
+      };
+      this.hamburgerDropdown.appendChild(themeItem);
+    }
+
+    // Layout orientation menu item
+    const layoutItem = document.createElement("button");
+    addClass(layoutItem, "hamburgerMenuItem", "layoutMenuItem");
+    this.updateLayoutMenuItemContent(layoutItem);
+    layoutItem.onclick = () => {
+      this.tab.toggleOrientation();
+      this.updateLayoutMenuItemContent(layoutItem);
+      // Keep menu open for layout toggle so user can see the change
+    };
+    this.hamburgerDropdown.appendChild(layoutItem);
+
+    hamburgerContainer.appendChild(this.hamburgerDropdown);
+  }
+
+  private updateLayoutMenuItemContent(layoutItem: HTMLButtonElement) {
+    const orientation = this.tab.getCurrentOrientation();
+    const icon =
+      orientation === "vertical" ? '<i class="fas fa-grip-lines-vertical"></i>' : '<i class="fas fa-grip-lines"></i>';
+    const label = orientation === "vertical" ? "Horizontal Layout" : "Vertical Layout";
+    layoutItem.innerHTML = icon + "<span>" + label + "</span>";
+  }
+
+  private toggleHamburgerMenu() {
+    if (this.isHamburgerOpen) {
+      this.closeHamburgerMenu();
+    } else {
+      this.openHamburgerMenu();
+    }
+  }
+
+  private openHamburgerMenu() {
+    this.isHamburgerOpen = true;
+    this.hamburgerDropdown.style.display = "block";
+    addClass(this.hamburgerMenuButton, "active");
+  }
+
+  private closeHamburgerMenu() {
+    this.isHamburgerOpen = false;
+    this.hamburgerDropdown.style.display = "none";
+    removeClass(this.hamburgerMenuButton, "active");
+  }
+
   private createModal() {
     // Modal overlay
     this.modalOverlay = document.createElement("div");
     addClass(this.modalOverlay, "tabSettingsModalOverlay");
-    // Removed: this.modalOverlay.onclick = () => this.close();
-    // Users must explicitly click 'Save' or 'Cancel' to close the modal
+
+    // Track mousedown on overlay to distinguish from text selection that moves outside
+    this.modalOverlay.addEventListener("mousedown", (e) => {
+      if (e.target === this.modalOverlay) {
+        this.mouseDownOnOverlay = true;
+      }
+    });
+
+    // Only close if mousedown also happened on overlay (not during text selection)
+    this.modalOverlay.addEventListener("mouseup", (e) => {
+      if (e.target === this.modalOverlay && this.mouseDownOnOverlay) {
+        this.close();
+      }
+      this.mouseDownOnOverlay = false;
+    });
 
     // Modal content
     this.modalContent = document.createElement("div");
@@ -912,10 +1040,27 @@ export default class TabSettingsModal {
     const config = this.tab.yasgui.persistentConfig.getEndpointConfig(endpoint);
     const existingAuth = config?.authentication;
 
+    // Track mousedown for proper modal close behavior
+    let mouseDownOnOverlay = false;
+
     // Create modal overlay
     const authModalOverlay = document.createElement("div");
     addClass(authModalOverlay, "authModalOverlay");
-    authModalOverlay.onclick = () => authModalOverlay.remove();
+
+    // Track mousedown on overlay to distinguish from text selection that moves outside
+    authModalOverlay.addEventListener("mousedown", (e) => {
+      if (e.target === authModalOverlay) {
+        mouseDownOnOverlay = true;
+      }
+    });
+
+    // Only close if mousedown also happened on overlay (not during text selection)
+    authModalOverlay.addEventListener("mouseup", (e) => {
+      if (e.target === authModalOverlay && mouseDownOnOverlay) {
+        authModalOverlay.remove();
+      }
+      mouseDownOnOverlay = false;
+    });
 
     // Create modal content
     const authModal = document.createElement("div");
@@ -1516,6 +1661,7 @@ export default class TabSettingsModal {
   }
 
   public close() {
+    this.mouseDownOnOverlay = false;
     removeClass(this.modalOverlay, "open");
     document.removeEventListener("keydown", this.handleKeyDown);
   }

package/src/endpointSelect.scss

@@ -99,28 +99,6 @@
     }
   }
 
-  .clearEndpointBtn {
-    border: 1px solid #d1d1d1;
-    background-color: #d1d1d1;
-    color: #505050;
-    border-radius: 3px;
-    cursor: pointer;
-
-    padding: 4px 8px;
-    margin: 4px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    opacity: 1;
-    transition: opacity ease-in 200ms;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
   .endpointButtonsContainer {
     display: flex;
     align-items: center;

package/src/endpointSelect.ts

@@ -92,7 +92,7 @@ export class EndpointSelect extends EventEmitter {
     // Create clear button
     const clearBtn = document.createElement("button");
     clearBtn.title = "Clear endpoint";
-    addClass(clearBtn, "clearEndpointBtn");
+    addClass(clearBtn, "tabContextButton");
     clearBtn.innerText = "✖";
     clearBtn.addEventListener("click", () => {
       this.inputField.value = "";