feat: context menu to close tabs, closes #392

src/main/main.ts

@@ -124,8 +124,8 @@ else {
       if (isWindows)
          mainWindow.show();
 
-      // if (isDevelopment)
-      //    mainWindow.webContents.openDevTools();
+      if (isDevelopment)
+         mainWindow.webContents.openDevTools();
 
       process.on('uncaughtException', error => {
          mainWindow.webContents.send('unhandled-exception', error);

src/renderer/components/Workspace.vue

@@ -1,5 +1,15 @@
 <template>
    <div v-show="isSelected" class="workspace column columns col-gapless">
+      <WorkspaceTabsContext
+         v-if="isTabContext"
+         :context-event="contextEvent"
+         :selected-tab="selectedContextTab"
+         @close-all-tabs="closeAllTabs"
+         @close-other-tabs="closeOtherTabs"
+         @close-to-left="closeTabsToLeft"
+         @close-to-right="closeTabsToRight"
+         @close-context="closeContext"
+      />
       <WorkspaceExploreBar
          v-if="workspace?.connectionStatus === 'connected'"
          :connection="connection"
@@ -23,6 +33,7 @@
                   :class="{'active': selectedTab === element.uid}"
                   @mousedown.left="selectTab({uid: workspace.uid, tab: element.uid})"
                   @mouseup.middle="closeTab(element)"
+                  @contextmenu.prevent="contextMenu($event, element)"
                >
                   <a
                      v-if="element.type === 'query'"
@@ -501,6 +512,7 @@ import WorkspaceTabNewRoutine from '@/components/WorkspaceTabNewRoutine.vue';
 import WorkspaceTabNewFunction from '@/components/WorkspaceTabNewFunction.vue';
 import WorkspaceTabNewScheduler from '@/components/WorkspaceTabNewScheduler.vue';
 import WorkspaceTabNewTriggerFunction from '@/components/WorkspaceTabNewTriggerFunction.vue';
+import WorkspaceTabsContext from '@/components/WorkspaceTabsContext.vue';
 
 import WorkspaceTabPropsTable from '@/components/WorkspaceTabPropsTable.vue';
 import WorkspaceTabPropsView from '@/components/WorkspaceTabPropsView.vue';
@@ -545,6 +557,9 @@ const hasWheelEvent = ref(false);
 const isProcessesModal = ref(false);
 const unsavedTab = ref(null);
 const tabWrap = ref(null);
+const contextEvent = ref(null);
+const isTabContext = ref(false);
+const selectedContextTab = ref(null);
 
 const workspace = computed(() => getWorkspace(props.connection.uid));
 
@@ -627,6 +642,34 @@ const closeTab = (tab: WorkspaceTab, force = false) => {
    removeTab({ uid: props.connection.uid, tab: tab.uid });
 };
 
+const closeAllTabs = () => {
+   for (const tab of draggableTabs.value)
+      removeTab({ uid: props.connection.uid, tab: tab.uid });
+};
+
+const closeOtherTabs = () => {
+   const otherTabs = draggableTabs.value.filter(t => t.uid !== selectedContextTab.value.uid);
+
+   for (const tab of otherTabs)
+      removeTab({ uid: props.connection.uid, tab: tab.uid });
+};
+
+const closeTabsToLeft = () => {
+   const tabIndex = draggableTabs.value.findIndex(t => t.uid === selectedContextTab.value.uid);
+   const leftTabs = draggableTabs.value.filter((t, i) => i < tabIndex);
+
+   for (const tab of leftTabs)
+      removeTab({ uid: props.connection.uid, tab: tab.uid });
+};
+
+const closeTabsToRight = () => {
+   const tabIndex = draggableTabs.value.findIndex(t => t.uid === selectedContextTab.value.uid);
+   const leftTabs = draggableTabs.value.filter((t, i) => i > tabIndex);
+
+   for (const tab of leftTabs)
+      removeTab({ uid: props.connection.uid, tab: tab.uid });
+};
+
 const showProcessesModal = () => {
    isProcessesModal.value = true;
 };
@@ -647,6 +690,16 @@ const addWheelEvent = () => {
    }
 };
 
+const contextMenu = (event: MouseEvent, tab: WorkspaceTab) => {
+   selectedContextTab.value = tab;
+   contextEvent.value = event;
+   isTabContext.value = true;
+};
+
+const closeContext = () => {
+   isTabContext.value = false;
+};
+
 (async () => {
    await addWorkspace(props.connection.uid);
    const isInitiated = await Connection.checkConnection(props.connection.uid);

src/renderer/components/WorkspaceTabsContext.vue

@@ -0,0 +1,66 @@
+<template>
+   <BaseContextMenu
+      :context-event="props.contextEvent"
+      @close-context="closeContext"
+   >
+      <div class="context-element" @click.stop="closeAllTabs">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-asterisk text-light pr-1" /> {{ t('message.closeAllTabs') }}</span>
+      </div>
+
+      <div class="context-element" @click.stop="closeOtherTabs">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-not-equal text-light pr-1" /> {{ t('message.closeOtherTabs') }}</span>
+      </div>
+
+      <div class="context-element" @click.stop="closeLeftTabs">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-less-than text-light pr-1" /> {{ t('message.closeTabsToLeft') }}</span>
+      </div>
+
+      <div class="context-element" @click.stop="closeRightTabs">
+         <span class="d-flex"><i class="mdi mdi-18px mdi-greater-than text-light pr-1" /> {{ t('message.closeTabsToRight') }}</span>
+      </div>
+   </BaseContextMenu>
+</template>
+
+<script setup lang="ts">
+import BaseContextMenu from '@/components/BaseContextMenu.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const props = defineProps({
+   contextEvent: MouseEvent,
+   selectedTab: Object
+});
+
+const emit = defineEmits([
+   'close-context',
+   'close-all-tabs',
+   'close-other-tabs',
+   'close-to-left',
+   'close-to-right'
+]);
+
+const closeContext = () => {
+   emit('close-context');
+};
+
+const closeAllTabs = () => {
+   emit('close-all-tabs');
+   closeContext();
+};
+
+const closeLeftTabs = () => {
+   emit('close-to-left');
+   closeContext();
+};
+
+const closeRightTabs = () => {
+   emit('close-to-right');
+   closeContext();
+};
+
+const closeOtherTabs = () => {
+   emit('close-other-tabs');
+   closeContext();
+};
+</script>

src/renderer/i18n/en-US.ts

@@ -344,7 +344,11 @@ export const enUS = {
       noResultsPresent: 'No results present',
       sqlExportOptions: 'SQL export options',
       targetTable: 'Target table',
-      phpArray: 'PHP array'
+      phpArray: 'PHP array',
+      closeAllTabs: 'Close all tabs',
+      closeOtherTabs: 'Close other tabs',
+      closeTabsToLeft: 'Close tabs to the left',
+      closeTabsToRight: 'Close tabs to the right'
    },
    faker: {
       address: 'Address',