favorites & about button in toolbar

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 icon;
-  export let title;
+  export let disabled = false;
+  export let icon = null;
+  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>
-    <slot />
+    {#if externalImage}
+      <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>