tab preview mode - basic concept #767

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -701,7 +701,8 @@
     forceNewTab?,
     initialData?,
     icon?,
-    appObjectData?
+    appObjectData?,
+    preventPreviewMode?
   ) {
     const connection = await getConnectionInfo({ conid });
     const tooltip = `${getConnectionLabel(connection)}\n${database}\n${fullDisplayName({
@@ -717,6 +718,7 @@
         tabComponent: scriptTemplate ? 'QueryTab' : tabComponent,
         appObject: 'DatabaseObjectAppObject',
         appObjectData,
+        tabPreviewMode: !preventPreviewMode,
         props: {
           schemaName,
           pureName,
@@ -731,7 +733,7 @@
     );
   }
 
-  export function handleDatabaseObjectClick(data, forceNewTab = false) {
+  export function handleDatabaseObjectClick(data, forceNewTab = false, preventPreviewMode = false) {
     const { schemaName, pureName, conid, database, objectTypeField } = data;
     const driver = findEngineDriver(data, getExtensions());
 
@@ -755,7 +757,8 @@
       forceNewTab,
       null,
       null,
-      data
+      data,
+      preventPreviewMode
     );
   }
 
@@ -881,8 +884,8 @@
   export let data;
   export let passProps;
 
-  function handleClick(forceNewTab = false) {
-    handleDatabaseObjectClick(data, forceNewTab);
+  function handleClick(forceNewTab = false, preventPreviewMode = false) {
+    handleDatabaseObjectClick(data, forceNewTab, preventPreviewMode);
   }
 
   function createMenu() {
@@ -917,6 +920,7 @@
   extInfo={getExtInfo(data)}
   on:click={() => handleClick()}
   on:middleclick={() => handleClick(true)}
+  on:dblclick={() => handleClick(false, true)}
   on:expand
   on:dragstart
   on:dragenter

packages/web/src/stores.ts

@@ -22,6 +22,7 @@ export interface TabDefinition {
   tabOrder?: number;
   multiTabIndex?: number;
   unsaved?: boolean;
+  tabPreviewMode?: boolean;
 }
 
 export function writableWithStorage<T>(defaultValue: T, storageName) {

packages/web/src/tabpanel/TabsPanel.svelte

@@ -349,6 +349,17 @@
     }
   };
 
+  const handleDoubleClick = (e, tabid) => {
+    e.preventDefault();
+
+    openedTabs.update(tabs =>
+      tabs.map(x => ({
+        ...x,
+        tabPreviewMode: x.tabid == tabid ? false : x.tabPreviewMode,
+      }))
+    );
+  };
+
   const getContextMenu = tab => () => {
     const { tabid, props, tabComponent, appObject, appObjectData } = tab;
 
@@ -568,9 +579,11 @@
               class:selected={$draggingTab || $draggingDbGroup
                 ? tab.tabid == $draggingTabTarget?.tabid
                 : tab.tabid == shownTab?.tabid}
+              class:preview={!!tab.tabPreviewMode}
               on:click={e => handleTabClick(e, tab.tabid)}
               on:mousedown={e => handleMouseDown(e, tab.tabid)}
               on:mouseup={e => handleMouseUp(e, tab.tabid)}
+              on:dblclick={e => handleDoubleClick(e, tab.tabid)}
               use:contextMenu={getContextMenu(tab)}
               draggable={true}
               on:dragstart={async e => {
@@ -714,6 +727,9 @@
   .file-tab-item.selected {
     background-color: var(--theme-bg-0);
   }
+  .file-tab-item.preview {
+    font-style: italic;
+  }
   .file-name {
     margin-left: 5px;
     white-space: nowrap;

packages/web/src/utility/common.ts

@@ -30,10 +30,12 @@ export function markTabSaved(tabid) {
   openedTabs.update(files => files.map(tab => (tab.tabid == tabid ? { ...tab, unsaved: false } : tab)));
 }
 
-export function setSelectedTabFunc(files, tabid) {
+export function setSelectedTabFunc(files, tabid, previewModeValue = undefined) {
   return [
     ...(files || []).filter(x => x.tabid != tabid).map(x => ({ ...x, selected: false })),
-    ...(files || []).filter(x => x.tabid == tabid).map(x => ({ ...x, selected: true })),
+    ...(files || [])
+      .filter(x => x.tabid == tabid)
+      .map(x => ({ ...x, selected: true, tabPreviewMode: previewModeValue ?? x.tabPreviewMode })),
   ];
 }
 

packages/web/src/utility/openNewTab.ts

@@ -22,6 +22,7 @@ export default async function openNewTab(newTab, initialData: any = undefined, o
   let existing = null;
 
   const { savedFile, savedFolder, savedFilePath } = newTab.props || {};
+  const { tabPreviewMode } = newTab;
   if (savedFile || savedFilePath) {
     existing = oldTabs.find(
       x =>
@@ -49,7 +50,7 @@ export default async function openNewTab(newTab, initialData: any = undefined, o
   }
 
   if (existing) {
-    openedTabs.update(tabs => setSelectedTabFunc(tabs, existing.tabid));
+    openedTabs.update(tabs => setSelectedTabFunc(tabs, existing.tabid, !tabPreviewMode ? false : undefined));
     return;
   }
 
@@ -92,8 +93,14 @@ export default async function openNewTab(newTab, initialData: any = undefined, o
       items.push(newItem);
     }
 
+    const filesFiltered = tabPreviewMode ? (files || []).filter(x => !x.tabPreviewMode) : files;
+
     return [
-      ...(files || []).map(x => ({ ...x, selected: false, tabOrder: _.findIndex(items, y => y.tabid == x.tabid) })),
+      ...(filesFiltered || []).map(x => ({
+        ...x,
+        selected: false,
+        tabOrder: _.findIndex(items, y => y.tabid == x.tabid),
+      })),
       {
         ...newTab,
         tabid,