tab preview mode UX

packages/web/src/icons/FontIcon.svelte

@@ -58,6 +58,7 @@
     'icon auth': 'mdi mdi-account-key',
     'icon version': 'mdi mdi-ticket-confirmation',
     'icon pin': 'mdi mdi-pin',
+    'icon pin-outline': 'mdi mdi-pin-outline',
     'icon arrange': 'mdi mdi-arrange-send-to-back',
     'icon app': 'mdi mdi-layers-triple',
     'icon open-in-new': 'mdi mdi-open-in-new',

packages/web/src/tabpanel/TabsPanel.svelte

@@ -27,7 +27,9 @@
     });
   }
 
-  const closeTabFunc = closeCondition => async tabid => {
+  const closeTabFunc =
+    (closeCondition, afterOperation = null) =>
+    async tabid => {
       const activeCandidate = getOpenedTabs().find(x => x.tabid == tabid);
       const closeCandidates = getOpenedTabs()
         .filter(x => closeCondition(x, activeCandidate))
@@ -52,10 +54,15 @@
 
         const selectedIndex = _.findLastIndex(newFiles, x => shouldShowTab(x));
 
-      return newFiles.map((x, index) => ({
+        const res = newFiles.map((x, index) => ({
           ...x,
           selected: index == selectedIndex,
         }));
+
+        if (afterOperation) {
+          return afterOperation(res);
+        }
+        return res;
       });
     };
 
@@ -128,6 +135,10 @@
       }))
     );
   };
+  const pinTab = tabid => {
+    openedTabs.update(tabs => tabs.map(x => (x.tabid == tabid ? { ...x, tabPreviewMode: false } : x)));
+  };
+
   const closeTabsWithCurrentDb = () => {
     const db = getCurrentDatabase();
     closeMultipleTabs(tab => {
@@ -154,7 +165,10 @@
       _.get(x, 'props.database') != _.get(active, 'props.database')
   );
   const closeOthersInMultiTab = multiTabIndex =>
-    closeTabFunc((x, active) => x.tabid != active.tabid && (x.multiTabIndex || 0) == multiTabIndex);
+    closeTabFunc(
+      (x, active) => x.tabid != active.tabid && (x.multiTabIndex || 0) == multiTabIndex,
+      tabs => tabs.map(x => (x.selected ? { ...x, tabPreviewMode: false } : x))
+    );
   const reopenClosedTab = () => {
     const lastClosedTabId = getOpenedTabs()
       .filter(x => x.closedTime)
@@ -396,6 +410,10 @@
     const appobj = appObject ? appObjectTypes[appObject] : null;
 
     return [
+      tab.tabPreviewMode && {
+        text: 'Pin tab',
+        onClick: () => pinTab(tabid),
+      },
       {
         text: 'Close',
         onClick: () => closeTab(tabid),
@@ -639,6 +657,15 @@
                 $draggingTabTarget = null;
               }}
             >
+              {#if tab.tabPreviewMode}
+                <span
+                  class="pin-button"
+                  on:click={e => pinTab(tab.tabid)}
+                  title="This tab is in preview mode, it will be replaced eg. when clicking table. Click to switch to normal mode. You could also double-click tab header."
+                >
+                  <FontIcon icon="icon pin-outline" />
+                </span>
+              {/if}
               <FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />
               <span class="file-name">
                 {tab.title}
@@ -775,4 +802,13 @@
   .tab-group-button:hover {
     color: var(--theme-font-1);
   }
+
+  .pin-button {
+    color: var(--theme-font-3);
+    cursor: pointer;
+  }
+
+  .pin-button:hover {
+    color: var(--theme-font-1);
+  }
 </style>