database widget

web/src/Screen.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import FilesTabsPanel from './FilesTabsPanel';
 import WidgetIconPanel from './widgets/WidgetIconPanel';
 import useCurrentWidget from './widgets/useCurrentWidget';
+import WidgetContainer from './widgets/WidgetContainer';
 
 const BodyDiv = styled.div`
   position: fixed;
@@ -59,7 +60,11 @@ export default function Screen({ children }) {
       <IconBar>
         <WidgetIconPanel />
       </IconBar>
-      {!!currentWidget && <LeftPanel></LeftPanel>}
+      {!!currentWidget && (
+        <LeftPanel>
+          <WidgetContainer />
+        </LeftPanel>
+      )}
       <TabsPanel leftPanelWidth={leftPanelWidth}>
         <FilesTabsPanel></FilesTabsPanel>
       </TabsPanel>

web/src/widgets/DatabaseWidget.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function DatabaseWidget() {
+  return <button onClick={() => {}}>Add connection</button>;
+}

web/src/widgets/WidgetContainer.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import useCurrentWidget from './useCurrentWidget';
+import DatabaseWidget from './DatabaseWidget';
+
+export default function WidgetContainer() {
+  const currentWidget = useCurrentWidget();
+  if (currentWidget === 'database') return <DatabaseWidget />;
+  return null;
+}