ability to pin tables

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -378,12 +378,22 @@
       null
     );
   }
+
+  function testEqual(a, b) {
+    return (
+      a.conid == b.conid &&
+      a.database == b.database &&
+      a.objectTypeField == b.objectTypeField &&
+      a.pureName == b.pureName &&
+      a.schemaName == b.schemaName
+    );
+  }
 </script>
 
 <script lang="ts">
   import _ from 'lodash';
   import AppObjectCore from './AppObjectCore.svelte';
-  import { currentDatabase, extensions, openedConnections } from '../stores';
+  import { currentDatabase, extensions, openedConnections, pinnedTables } from '../stores';
   import openNewTab from '../utility/openNewTab';
   import { filterName, generateDbPairingId, getAlterDatabaseScript } from 'dbgate-tools';
   import { getConnectionInfo, getDatabaseInfo } from '../utility/metadataLoaders';
@@ -403,6 +413,7 @@
   import ConfirmModal from '../modals/ConfirmModal.svelte';
 
   export let data;
+  export let passProps;
 
   function handleClick(forceNewTab = false) {
     handleDatabaseObjectClick(data, forceNewTab);
@@ -571,6 +582,8 @@
         };
       });
   }
+
+  $: isPinned = !!$pinnedTables.find(x => testEqual(data, x));
 </script>
 
 <AppObjectCore
@@ -580,6 +593,9 @@
   title={data.schemaName ? `${data.schemaName}.${data.pureName}` : data.pureName}
   icon={databaseObjectIcons[data.objectTypeField]}
   menu={createMenu}
+  showPinnedInsteadOfUnpin={passProps?.showPinnedInsteadOfUnpin}
+  onPin={isPinned ? null : () => pinnedTables.update(list => [...list, data])}
+  onUnpin={isPinned ? () => pinnedTables.update(list => list.filter(x => !testEqual(x, data))) : null}
   on:click={() => handleClick()}
   on:middleclick={() => handleClick(true)}
   on:expand

packages/web/src/appobj/PinnedAppObject.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" context="module">
+  import DatabaseAppObject from './DatabaseAppObject.svelte';
+  import DatabaseObjectAppObject from './DatabaseObjectAppObject.svelte';
+
+  export const extractKey = data => {
+    if (data.objectTypeField) {
+      return `${data.objectTypeField}||${data.schemaName}||${data.pureName}`;
+    }
+    return data.connection._id;
+  };
+</script>
+
+<script lang="ts">
+  export let data;
+</script>
+
+{#if data.objectTypeField}
+  <DatabaseObjectAppObject {...$$props} />
+{:else}
+  <DatabaseAppObject {...$$props} />
+{/if}

packages/web/src/stores.ts

@@ -43,6 +43,7 @@ export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.
 export const activeTab = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected));
 export const recentDatabases = writableWithStorage([], 'recentDatabases');
 export const pinnedDatabases = writableWithStorage([], 'pinnedDatabases');
+export const pinnedTables = writableWithStorage([], 'pinnedTables');
 export const commandsSettings = derived(useSettings(), (config: any) => (config || {}).commands || {});
 export const allResultsInOneTabDefault = writableWithStorage(false, 'allResultsInOneTabDefault');
 export const commandsCustomized = derived([commands, commandsSettings], ([$commands, $commandsSettings]) =>

packages/web/src/widgets/PinnedObjectsList.svelte

@@ -2,17 +2,22 @@
   import _ from 'lodash';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
   import AppObjectList from '../appobj/AppObjectList.svelte';
-  import { pinnedDatabases } from '../stores';
-  import * as databaseAppObject from '../appobj/DatabaseAppObject.svelte';
+  import { currentDatabase, pinnedDatabases, pinnedTables } from '../stores';
+  import * as pinnedAppObject from '../appobj/PinnedAppObject.svelte';
   import { useConnectionColorFactory } from '../utility/useConnectionColor';
+  import AboutModal from '../modals/AboutModal.svelte';
 
   const connectionColorFactory = useConnectionColorFactory(3);
+
+  $: filteredTables = $pinnedTables.filter(
+    x => x.conid == $currentDatabase?.connection?._id && x.database == $currentDatabase?.name
+  );
 </script>
 
 <WidgetsInnerContainer>
   <AppObjectList
-    list={$pinnedDatabases}
-    module={databaseAppObject}
+    list={[...$pinnedDatabases, ...filteredTables]}
+    module={pinnedAppObject}
     passProps={{ connectionColorFactory: $connectionColorFactory }}
   />
 </WidgetsInnerContainer>

packages/web/src/widgets/SqlObjectList.svelte

@@ -54,7 +54,6 @@
   const handleRefreshDatabase = () => {
     axiosInstance.post('database-connections/refresh', { conid, database });
   };
-
 </script>
 
 {#if $status && $status.name == 'error'}
@@ -88,6 +87,7 @@
           data.objectTypeField == 'tables' || data.objectTypeField == 'views' || data.objectTypeField == 'matviews'}
         expandIconFunc={chevronExpandIcon}
         {filter}
+        passProps={{ showPinnedInsteadOfUnpin: true }}
       />
     {/if}
   </WidgetsInnerContainer>