left panel

packages/web-svelte/src/widgets/ConnectionList.svelte

@@ -0,0 +1,18 @@
+<script>
+  import InlineButton from './InlineButton.svelte';
+  import SearchInput from './SearchInput.svelte';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+</script>
+
+<div class="search-box">
+  <SearchInput placeholder="Search connection" />
+  <InlineButton>Refresh</InlineButton>
+</div>
+<WidgetsInnerContainer>CONNECTIONS</WidgetsInnerContainer>
+
+<style>
+  .search-box {
+    display: flex;
+    margin-bottom: 5px;
+  }
+</style>

packages/web-svelte/src/widgets/DatabaseWidget.svelte

@@ -1 +1,16 @@
-<div></div>
+<script>
+  import ConnectionList from './ConnectionList.svelte';
+
+  import WidgetColumnBar from './WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
+</script>
+
+<WidgetColumnBar>
+  <WidgetColumnBarItem title="Connections" name="connections" height="50%">
+    <ConnectionList />
+  </WidgetColumnBarItem>
+  <WidgetColumnBarItem title="Tables, views, functions" name="dbObjects">
+    TABLES
+    <!-- <SqlObjectListWrapper /> -->
+  </WidgetColumnBarItem>
+</WidgetColumnBar>

packages/web-svelte/src/widgets/InlineButton.svelte

@@ -0,0 +1,47 @@
+<script>
+  export let disabled;
+  export let square;
+</script>
+
+<div class="outer buttonLike" class:disabled class:square>
+  <div class="inner">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .outer {
+    background: linear-gradient(to bottom, var(--theme-bg-2) 5%, var(--theme-bg-3) 100%);
+    background-color: var(--theme-bg-2);
+    border: 1px solid var(--theme-bg-3);
+    display: inline-block;
+    cursor: pointer;
+    vertical-align: middle;
+    color: var(--theme-font-1);
+    font-size: 12px;
+    padding: 3px;
+    margin: 0;
+    text-decoration: none;
+    display: flex;
+  }
+
+  .outer.disabled {
+    color: var(--theme-font-3);
+  }
+
+  .outer:hover:not(.disabled) {
+    border: 1px solid var(--theme-bg-2);
+    background: linear-gradient(to bottom, var(--theme-bg-3) 5%, var(--theme-bg-2) 100%);
+    background-color: var(--theme-bg-3);
+  }
+
+  .inner {
+    margin: auto;
+    flex: 1;
+    text-align: center;
+  }
+
+  .square {
+    width: 18px;
+  }
+</style>

packages/web-svelte/src/widgets/SearchInput.svelte

@@ -0,0 +1,14 @@
+<script>
+  export let placeholder;
+</script>
+
+<input type="text" {placeholder} />
+
+<style>
+  input {
+    flex: 1;
+    min-width: 10px;
+    width: 10px;
+    border: none;
+  }
+</style>

packages/web-svelte/src/widgets/WidgetColumnBar.svelte

@@ -0,0 +1,13 @@
+<div class="main-container">
+    <slot></slot>
+</div>
+
+<style>
+  .main-container {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    user-select: none;
+  }
+</style>

packages/web-svelte/src/widgets/WidgetColumnBarItem.svelte

@@ -0,0 +1,23 @@
+<script>
+  export let title;
+  export let visible = true;
+</script>
+
+<div class="title" on:click={() => (visible = !visible)}>{title}</div>
+
+{#if visible}
+  <slot />
+{/if}
+
+<style>
+  .title {
+    padding: 5px;
+    font-weight: bold;
+    text-transform: uppercase;
+    background-color: var(--theme-bg-4);
+    border: 1px solid var(--theme-border);
+  }
+  .title:hover {
+    background-color: var(--theme-bg-3);
+  }
+</style>

packages/web-svelte/src/widgets/WidgetsInnerContainer.svelte

@@ -0,0 +1,10 @@
+<div><slot /></div>
+
+<style>
+  div {
+    flex: 1 1;
+    overflow-x: auto;
+    overflow-y: auto;
+    width: var(--dim-left-panel-width);
+  }
+</style>