statusbar

packages/web/public/icon-colors.css

@@ -21,3 +21,12 @@
 .color-icon-magenta {
   color: var(--theme-icon-magenta);
 }
+
+
+.color-icon-inv-green {
+  color: var(--theme-icon-inv-green);
+}
+
+.color-icon-inv-red {
+  color: var(--theme-icon-inv-red);
+}

packages/web/src/Screen.svelte

@@ -8,13 +8,16 @@
   import Toolbar from './widgets/Toolbar.svelte';
   import splitterDrag from './utility/splitterDrag';
   import CurrentDropDownMenu from './modals/CurrentDropDownMenu.svelte';
+  import StatusBar from './widgets/StatusBar.svelte';
 </script>
 
 <div class={`${$currentTheme} root`}>
   <div class="iconbar">
     <WidgetIconPanel />
   </div>
-  <div class="statusbar" />
+  <div class="statusbar">
+    <StatusBar />
+  </div>
   {#if $selectedWidget}
     <div class="leftpanel">
       <WidgetContainer />

packages/web/src/icons/FontIcon.svelte

@@ -63,8 +63,10 @@
     'icon menu': 'mdi mdi-menu',
 
     'img ok': 'mdi mdi-check-circle color-icon-green',
+    'img ok-inv': 'mdi mdi-check-circle color-icon-inv-green',
     'img alert': 'mdi mdi-alert-circle color-icon-blue',
     'img error': 'mdi mdi-close-circle color-icon-red',
+    'img error-inv': 'mdi mdi-close-circle color-icon-inv-red',
     'img warn': 'mdi mdi-alert color-icon-gold',
     // 'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',
 

packages/web/src/plugins/ThemeDark.svelte

@@ -55,5 +55,8 @@
     --theme-icon-gold: #e8b339;
     --theme-icon-yellow: #e8d639;
     --theme-icon-magenta: #e0529c;
+
+    --theme-icon-inv-green: #8fd460;
+    --theme-icon-inv-red: #e84749;
   }
 </style>

packages/web/src/plugins/ThemeLight.svelte

@@ -48,5 +48,8 @@
     --theme-icon-gold: #d48806; /* gold-7 */
     --theme-icon-yellow: #d4b106; /* yellow-7 */
     --theme-icon-magenta: #c41d7f; /* magenta-7 */
+
+    --theme-icon-inv-green: #8fd460;
+    --theme-icon-inv-red: #e84749;
   }
 </style>

packages/web/src/widgets/StatusBar.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  import { currentDatabase } from '../stores';
+  import { useDatabaseStatus } from '../utility/metadataLoaders';
+
+  $: databaseName = $currentDatabase && $currentDatabase.name;
+  $: connection = $currentDatabase && $currentDatabase.connection;
+  $: status = useDatabaseStatus(connection ? { conid: connection._id, database: databaseName } : {});
+</script>
+
+<div class="main">
+  <div class="container">
+    {#if databaseName}
+      <div class="item">
+        <FontIcon icon="icon database" />
+        {databaseName}
+      </div>
+    {/if}
+    {#if connection && (connection.displayName || connection.server)}
+      <div class="item">
+        <FontIcon icon="icon server" />
+        {connection.displayName || connection.server}
+      </div>
+    {/if}
+    {#if connection && connection.user}
+      <div class="item">
+        <FontIcon icon="icon account" />
+        {connection.user}
+      </div>
+    {/if}
+    {#if connection && $status}
+      <div class="item">
+        {#if $status.name == 'pending'}
+          <FontIcon icon="icon loading" /> Loading
+        {:else if $status.name == 'ok'}
+          <FontIcon icon="img ok-inv" /> Connected
+        {:else if $status.name == 'error'}
+          <FontIcon icon="img error-inv" /> Error
+        {/if}
+      </div>
+    {/if}
+    {#if !connection}
+      <div class="item">
+        <FontIcon icon="icon disconnected" /> Not connected
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .main {
+    display: flex;
+    color: var(--theme-font-inv-1);
+    align-items: stretch;
+    justify-content: space-between;
+  }
+  .container {
+    display: flex;
+  }
+  .item {
+    padding: 2px 10px;
+  }
+</style>