close tabs question

packages/web/src/modals/CloseTabModal.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let tabs;
+  export let onConfirm;
+  export let onCancel;
+</script>
+
+<FormProvider>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">Confirm close tabs</svelte:fragment>
+
+    <div>
+      Following files are modified, really close tabs? After closing, you could reopen them in history
+      <FontIcon icon="icon history" />
+      widget
+    </div>
+
+    {#each tabs as tab}
+      <div class="ml-2"><FontIcon icon={tab.icon} /> {tab.title}</div>
+    {/each}
+
+    <svelte:fragment slot="footer">
+      <FormSubmit
+        value="Close tabs"
+        on:click={() => {
+          closeCurrentModal();
+          onConfirm();
+        }}
+      />
+      <FormStyledButton
+        type="button"
+        value="Cancel"
+        on:click={() => {
+          closeCurrentModal();
+          onCancel();
+        }}
+      />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>

packages/web/src/widgets/TabsPanel.svelte

@@ -1,5 +1,23 @@
 <script lang="ts" context="module">
-  const closeTabFunc = closeCondition => tabid => {
+  function allowCloseTabs(tabs) {
+    if (tabs.length == 0) return Promise.resolve(true);
+    return new Promise(resolve => {
+      showModal(CloseTabModal, {
+        onCancel: () => resolve(false),
+        onConfirm: () => resolve(true),
+        tabs,
+      });
+    });
+  }
+
+  const closeTabFunc = closeCondition => async tabid => {
+    const activeCandidate = getOpenedTabs().find(x => x.tabid == tabid);
+    const closeCandidates = getOpenedTabs()
+      .filter(x => closeCondition(x, activeCandidate))
+      .filter(x => x.unsaved && x.closedTime == null);
+
+    if (!(await allowCloseTabs(closeCandidates))) return;
+
     openedTabs.update(files => {
       const active = files.find(x => x.tabid == tabid);
       if (!active) return files;
@@ -22,7 +40,13 @@
     });
   };
 
-  export const closeMultipleTabs = (closeCondition, deleteFromHistory = false) => {
+  export const closeMultipleTabs = async (closeCondition, deleteFromHistory = false) => {
+    const closeCandidates = getOpenedTabs()
+      .filter(x => closeCondition(x))
+      .filter(x => x.unsaved && x.closedTime == null);
+
+    if (!(await allowCloseTabs(closeCandidates))) return;
+
     openedTabs.update(files => {
       const newFiles = deleteFromHistory
         ? files.filter(x => !closeCondition(x))
@@ -45,7 +69,11 @@
   };
 
   const closeTab = closeTabFunc((x, active) => x.tabid == active.tabid);
-  const closeAll = () => {
+  const closeAll = async () => {
+    const closeCandidates = getOpenedTabs().filter(x => x.unsaved && x.closedTime == null);
+
+    if (!(await allowCloseTabs(closeCandidates))) return;
+
     const closedTime = new Date().getTime();
     openedTabs.update(tabs =>
       tabs.map(tab => ({
@@ -213,6 +241,7 @@
   import { duplicateTab, getTabDbKey, sortTabs, groupTabs } from '../utility/openNewTab';
   import { useConnectionColorFactory } from '../utility/useConnectionColor';
   import TabCloseButton from '../elements/TabCloseButton.svelte';
+  import CloseTabModal from '../modals/CloseTabModal.svelte';
 
   $: connectionList = useConnectionList();