From 5f2afc037e37bb3efd0f31566ecc390c69bf5c4f Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 25 Mar 2021 10:53:35 +0100
Subject: [PATCH] favorites & about button in toolbar

---
 packages/web/src/commands/stdCommands.ts      |  4 +++-
 packages/web/src/stores.ts                    |  9 +++++++++
 packages/web/src/utility/metadataLoaders.ts   |  2 +-
 .../web/src/widgets/ConnectionList.svelte     |  9 ++++++++-
 packages/web/src/widgets/Toolbar.svelte       | 18 +++++++++++++++++-
 packages/web/src/widgets/ToolbarButton.svelte | 19 ++++++++++++++-----
 6 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts
index 67deb9bd..6a308a70 100644
--- a/packages/web/src/commands/stdCommands.ts
+++ b/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),
 });
 
diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts
index 134294bb..76c37b05 100644
--- a/packages/web/src/stores.ts
+++ b/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;
diff --git a/packages/web/src/utility/metadataLoaders.ts b/packages/web/src/utility/metadataLoaders.ts
index c1210dc5..7e05e0a5 100644
--- a/packages/web/src/utility/metadataLoaders.ts
+++ b/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, {});
diff --git a/packages/web/src/widgets/ConnectionList.svelte b/packages/web/src/widgets/ConnectionList.svelte
index 62902642..1aceab4e 100644
--- a/packages/web/src/widgets/ConnectionList.svelte
+++ b/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>
diff --git a/packages/web/src/widgets/Toolbar.svelte b/packages/web/src/widgets/Toolbar.svelte
index 4e12e60c..a51e1f08 100644
--- a/packages/web/src/widgets/Toolbar.svelte
+++ b/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}
diff --git a/packages/web/src/widgets/ToolbarButton.svelte b/packages/web/src/widgets/ToolbarButton.svelte
index 1de9ee67..4c9cbd85 100644
--- a/packages/web/src/widgets/ToolbarButton.svelte
+++ b/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>