create sqlite database command

packages/web/src/appobj/SavedFileAppObject.svelte

@@ -47,12 +47,21 @@
     currentConnection: true,
   };
 
+  const sqlite: FileTypeHandler = {
+    icon: 'img sqlite-database',
+    format: 'binary',
+    tabComponent: null,
+    folder: 'sqlite',
+    currentConnection: true,
+  };
+
   const HANDLERS = {
     sql,
     shell,
     markdown,
     charts,
     query,
+    sqlite,
   };
 
   export const extractKey = data => data.file;
@@ -93,7 +102,7 @@
 
   function createMenu() {
     return [
-      { text: 'Open', onClick: openTab },
+      handler?.tabComponent && { text: 'Open', onClick: openTab },
       hasPermission(`files/${data.folder}/write`) && { text: 'Rename', onClick: handleRename },
       hasPermission(`files/${data.folder}/write`) && { text: 'Delete', onClick: handleDelete },
       folder == 'markdown' && { text: 'Show page', onClick: showMarkdownPage },
@@ -152,4 +161,11 @@
   }
 </script>
 
-<AppObjectCore {...$$restProps} {data} icon={handler?.icon} title={data?.file} menu={createMenu()} on:click={openTab} />
+<AppObjectCore
+  {...$$restProps}
+  {data}
+  icon={handler?.icon}
+  title={data?.file}
+  menu={createMenu()}
+  on:click={handler?.tabComponent && openTab}
+/>

packages/web/src/commands/stdCommands.ts

@@ -1,6 +1,6 @@
 import { currentDatabase, currentTheme, extensions, getExtensions, getVisibleToolbar, visibleToolbar } from '../stores';
 import registerCommand from './registerCommand';
-import { derived, get } from 'svelte/store';
+import { get } from 'svelte/store';
 import { ThemeDefinition } from 'dbgate-types';
 import ConnectionModal from '../modals/ConnectionModal.svelte';
 import AboutModal from '../modals/AboutModal.svelte';
@@ -17,9 +17,11 @@ import { getDefaultFileFormat } from '../plugins/fileformats';
 import { getCurrentConfig, getCurrentDatabase } from '../stores';
 import './recentDatabaseSwitch';
 import hasPermission from '../utility/hasPermission';
+import axiosInstance from '../utility/axiosInstance';
 import _ from 'lodash';
 import { findEngineDriver } from 'dbgate-tools';
 import { openArchiveFolder } from '../utility/openArchiveFolder';
+import InputTextModal from '../modals/InputTextModal.svelte';
 
 const electron = getElectron();
 
@@ -185,6 +187,25 @@ registerCommand({
   },
 });
 
+registerCommand({
+  id: 'new.sqliteDatabase',
+  category: 'New',
+  icon: 'img sqlite-database',
+  name: 'New SQLite database',
+  onClick: () => {
+    showModal(InputTextModal, {
+      value: 'newdb',
+      label: 'New database name',
+      header: 'Create SQLite database',
+      onConfirm: async file => {
+        const resp = await axiosInstance.post('connections/new-sqlite-database', { file });
+        const connection = resp.data;
+        currentDatabase.set({ connection, name: `${file}.sqlite` });
+      },
+    });
+  },
+});
+
 registerCommand({
   id: 'group.save',
   category: null,

packages/web/src/icons/FontIcon.svelte

@@ -116,6 +116,7 @@
     'img macro': 'mdi mdi-hammer-wrench',
 
     'img database': 'mdi mdi-database color-icon-gold',
+    'img sqlite-database': 'mdi mdi-database color-icon-blue',
     'img table': 'mdi mdi-table color-icon-blue',
     'img collection': 'mdi mdi-table color-icon-red',
     'img view': 'mdi mdi-table color-icon-magenta',

packages/web/src/widgets/SavedFilesList.svelte

@@ -12,6 +12,7 @@ import { useFiles } from '../utility/metadataLoaders';
   const markdownFiles = useFiles({ folder: 'markdown' });
   const chartFiles = useFiles({ folder: 'charts' });
   const queryFiles = useFiles({ folder: 'query' });
+  const sqliteFiles = useFiles({ folder: 'sqlite' });
 
   $: files = [
     ...($sqlFiles || []),
@@ -19,6 +20,7 @@ import { useFiles } from '../utility/metadataLoaders';
     ...($markdownFiles || []),
     ...($chartFiles || []),
     ...($queryFiles || []),
+    ...($sqliteFiles || []),
   ];
 
 </script>