statusbar - show current database

packages/web/src/widgets/StatusBar.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { getEngineIcon } from '../icons';
+import { useCurrentDatabase } from '../utility/globalState';
+
+const Container = styled.div`
+  display: flex;
+  color: white;
+  align-items: stretch;
+`;
+
+const Item = styled.div`
+  padding: 2px 10px;
+  //   margin: auto;
+  //   flex-grow: 0;
+`;
+
+export default function StatusBar() {
+  const { name, connection } = useCurrentDatabase() || {};
+  const { displayName, server, user, engine } = connection || {};
+  const EngineIcon = getEngineIcon(engine);
+  return (
+    <Container>
+      {name && (
+        <Item>
+          <i className="fas fa-database" /> {name}
+        </Item>
+      )}
+      {(displayName || server) && (
+        <Item>
+          <EngineIcon size={12} /> {displayName || server}
+        </Item>
+      )}
+
+      {user && (
+        <Item>
+          <i className="fas fa-user" /> {user}
+        </Item>
+      )}
+    </Container>
+  );
+}

packages/web/src/widgets/Toolbar.js

@@ -3,6 +3,7 @@ import useModalState from '../modals/useModalState';
 import ConnectionModal from '../modals/ConnectionModal';
 import styled from 'styled-components';
 import ToolbarButton from './ToolbarButton';
+import useNewQuery from '../query/useNewQuery';
 
 const ToolbarContainer = styled.div`
   display: flex;
@@ -11,11 +12,13 @@ const ToolbarContainer = styled.div`
 
 export default function ToolBar({ toolbarPortalRef }) {
   const modalState = useModalState();
+  const newQuery = useNewQuery();
 
   return (
     <ToolbarContainer>
       <ConnectionModal modalState={modalState} />
       <ToolbarButton onClick={modalState.open}>Add connection</ToolbarButton>
+      <ToolbarButton onClick={newQuery}>Query</ToolbarButton>
       <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
     </ToolbarContainer>
   );