saving diagrams

packages/web/src/appobj/SavedFileAppObject.svelte

@@ -55,6 +55,14 @@
     currentConnection: true,
   };
 
+  const diagrams: FileTypeHandler = {
+    icon: 'img diagram',
+    format: 'json',
+    tabComponent: 'DiagramTab',
+    folder: 'diagrams',
+    currentConnection: true,
+  };
+
   const HANDLERS = {
     sql,
     shell,
@@ -62,6 +70,7 @@
     charts,
     query,
     sqlite,
+    diagrams,
   };
 
   export const extractKey = data => data.file;
@@ -74,7 +83,7 @@
   import { showModal } from '../modals/modalTools';
 
   import { currentDatabase } from '../stores';
-import { apiCall } from '../utility/api';
+  import { apiCall } from '../utility/api';
 
   import getConnectionLabel from '../utility/getConnectionLabel';
   import hasPermission from '../utility/hasPermission';

packages/web/src/widgets/SavedFilesList.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-import _ from 'lodash';
-
+  import _ from 'lodash';
   import AppObjectList from '../appobj/AppObjectList.svelte';
-import * as savedFileAppObject from '../appobj/SavedFileAppObject.svelte';
-import { useFiles } from '../utility/metadataLoaders';
-
+  import * as savedFileAppObject from '../appobj/SavedFileAppObject.svelte';
+  import { useFiles } from '../utility/metadataLoaders';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
 
   const sqlFiles = useFiles({ folder: 'sql' });
@@ -13,6 +11,7 @@ import { useFiles } from '../utility/metadataLoaders';
   const chartFiles = useFiles({ folder: 'charts' });
   const queryFiles = useFiles({ folder: 'query' });
   const sqliteFiles = useFiles({ folder: 'sqlite' });
+  const diagramFiles = useFiles({ folder: 'diagrams' });
 
   $: files = [
     ...($sqlFiles || []),
@@ -21,8 +20,8 @@ import { useFiles } from '../utility/metadataLoaders';
     ...($chartFiles || []),
     ...($queryFiles || []),
     ...($sqliteFiles || []),
+    ...($diagramFiles || []),
   ];
-
 </script>
 
 <WidgetsInnerContainer>