favorites & about button in toolbar

packages/web/src/commands/stdCommands.ts

@@ -12,6 +12,7 @@ import openNewTab from '../utility/openNewTab';
 import getElectron from '../utility/getElectron';
 import { openElectronFile } from '../utility/openElectronFile';
 import { getDefaultFileFormat } from '../plugins/fileformats';
+import { getCurrentConfig } from '../stores';
 
 const electron = getElectron();
 
@@ -63,11 +64,12 @@ registerCommand({
 registerCommand({
   id: 'new.connection',
   toolbar: true,
-  icon: 'icon connection',
+  icon: 'icon new-connection',
   toolbarName: 'Add connection',
   category: 'New',
   toolbarOrder: 1,
   name: 'Connection',
+  testEnabled: () => !getCurrentConfig()?.runAsPortal,
   onClick: () => showModal(ConnectionModal),
 });
 

packages/web/src/stores.ts

@@ -3,6 +3,7 @@ import { ExtensionsDirectory } from 'dbgate-types';
 import invalidateCommands from './commands/invalidateCommands';
 import getElectron from './utility/getElectron';
 import { GlobalCommand } from './commands/registerCommand';
+import { useConfig } from './utility/metadataLoaders';
 
 interface TabDefinition {
   title: string;
@@ -98,3 +99,11 @@ activeTab.subscribe(value => {
   activeTabValue = value;
 });
 export const getActiveTab = () => activeTabValue;
+
+const currentConfigStore = useConfig();
+let currentConfigValue = null;
+currentConfigStore.subscribe(value => {
+  currentConfigValue = value;
+  invalidateCommands();
+});
+export const getCurrentConfig = () => currentConfigValue;

packages/web/src/utility/metadataLoaders.ts

@@ -332,7 +332,7 @@ export function useConnectionList() {
 }
 
 export function getConfig() {
-  return getCore(configLoader, {}) || {};
+  return getCore(configLoader, {});
 }
 export function useConfig() {
   return useCore(configLoader, {});

packages/web/src/widgets/ConnectionList.svelte

@@ -8,8 +8,10 @@
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import * as connectionAppObject from '../appobj/ConnectionAppObject.svelte';
   import SubDatabaseList from '../appobj/SubDatabaseList.svelte';
-  import { openedConnections } from '../stores';
+  import { commands, openedConnections } from '../stores';
   import axiosInstance from '../utility/axiosInstance';
+  import ToolbarButton from './ToolbarButton.svelte';
+  import runCommand from '../commands/runCommand';
 
   const connections = useConnectionList();
   const serverStatus = useServerStatus();
@@ -41,4 +43,9 @@
     isExpandable={data => $openedConnections.includes(data._id)}
     {filter}
   />
+  {#if $connections && $connections.length == 0 && $commands['new.connection']?.enabled}
+    <ToolbarButton icon="icon new-connection" on:click={() => runCommand('new.connection')}>
+      Add new connection
+    </ToolbarButton>
+  {/if}
 </WidgetsInnerContainer>

packages/web/src/widgets/Toolbar.svelte

@@ -8,10 +8,17 @@
 
 <script>
   import _ from 'lodash';
-  import App from '../App.svelte';
+  import { openFavorite } from '../appobj/FavoriteFileAppObject.svelte';
+  import runCommand from '../commands/runCommand';
   import { commands } from '../stores';
+  import getElectron from '../utility/getElectron';
+  import { useFavorites } from '../utility/metadataLoaders';
   import ToolbarButton from './ToolbarButton.svelte';
 
+  const electron = getElectron();
+
+  $: favorites = useFavorites();
+
   $: list = _.sortBy(
     Object.values($commands).filter(x => (x.enabled || x.showDisabled) && x.toolbar && x.onClick),
     x => (x.toolbarOrder == null ? 100 : x.toolbarOrder)
@@ -19,6 +26,15 @@
 </script>
 
 <div class="container">
+  {#if !electron}
+    <ToolbarButton externalImage="logo192.png" on:click={() => runCommand('about.show')} />
+  {/if}
+  {#each ($favorites || []).filter(x => x.showInToolbar) as item}
+    <ToolbarButton on:click={() => openFavorite(item)} icon={item.icon || 'icon favorite'}>
+      {item.title}
+    </ToolbarButton>
+  {/each}
+
   {#each list as command}
     <ToolbarButton
       icon={command.icon}

packages/web/src/widgets/ToolbarButton.svelte

@@ -2,9 +2,10 @@
   import { createEventDispatcher } from 'svelte';
   import FontIcon from '../icons/FontIcon.svelte';
 
-  export let disabled;
+  export let disabled = false;
-  export let icon;
+  export let icon = null;
-  export let title;
+  export let title = null;
+  export let externalImage = null;
 
   const dispatch = createEventDispatcher();
 
@@ -16,8 +17,12 @@
 
 <div class="button" on:click={handleClick} class:disabled {title}>
   <div class="inner">
-    <span class="icon" class:disabled><FontIcon {icon} /></span>
+    {#if externalImage}
-    <slot />
+      <img src={externalImage} />
+    {:else}
+      <span class="icon" class:disabled><FontIcon {icon} /></span>
+      <slot />
+    {/if}
   </div>
 </div>
 
@@ -54,4 +59,8 @@
     white-space: nowrap;
     align-self: center;
   }
+  img {
+    width: 20px;
+    height: 20px;
+  }
 </style>