web-svelte => web

2026-04-20 10:06:00 +00:00 · 2021-02-20 19:16:05 +01:00
parent daf9e9d18b
commit 321eedefea
38 changed files with 2 additions and 3 deletions
--- a/packages/web/src/App.svelte
+++ b/packages/web/src/App.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+  import Screen from './Screen.svelte';
+
+</script>
+
+<Screen />
--- a/packages/web/src/Screen.svelte
+++ b/packages/web/src/Screen.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import WidgetContainer from './widgets/WidgetContainer.svelte';
+  import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
+  import { selectedWidget } from './stores';
+</script>
+
+<div class="theme-light">
+  <div class="iconbar">
+    <WidgetIconPanel />
+  </div>
+  <div class="statusbar" />
+  {#if $selectedWidget}
+    <div class="leftpanel">
+      <WidgetContainer />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .iconbar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: var(--dim-statusbar-height);
+    width: var(--dim-widget-icon-size);
+    background: var(--theme-bg-inv-1);
+  }
+  .statusbar {
+    position: fixed;
+    background: var(--theme-bg-statusbar-inv);
+    height: var(--dim-statusbar-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .leftpanel {
+    position: fixed;
+    top: 0;
+    left: var(--dim-widget-icon-size);
+    bottom: var(--dim-statusbar-height);
+    width: var(--dim-left-panel-width);
+    background-color: var(--theme-bg-2);
+    display: flex;
+  }
+</style>
--- a/packages/web/src/appobj/AppObjectCore.svelte
+++ b/packages/web/src/appobj/AppObjectCore.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let isBold;
+  export let prefix;
+  export let icon;
+  export let isBusy;
+  export let title;
+  export let statusIcon;
+  export let statusTitle;
+  export let extInfo;
+</script>
+
+<div class="main" class:isBold draggable>
+  {prefix}
+  {#if isBusy}
+    <FontIcon icon="icon loading" />
+  {:else}
+    <FontIcon {icon} />
+  {/if}
+  {title}
+  {#if statusIcon}
+    <span class="status">
+      <FontIcon icon={statusIcon} title={statusTitle} />
+    </span>
+  {/if}
+  {#if extInfo}
+    <span class="ext-info">
+      {extInfo}
+    </span>
+  {/if}
+</div>
+<slot />
+
+<style>
+  .main {
+    padding: 5px;
+    cursor: pointer;
+    white-space: nowrap;
+    font-weight: normal;
+  }
+  .isBold {
+    font-weight: bold;
+  }
+  .status {
+    margin-left: 5px;
+  }
+  .ext-info {
+    font-weight: normal;
+    margin-left: 5px;
+    color: vra(--theme-font-3);
+  }
+</style>
--- a/packages/web/src/appobj/AppObjectList.svelte
+++ b/packages/web/src/appobj/AppObjectList.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import AppObjectListItem from './AppObjectListItem.svelte';
+
+  export let groupFunc;
+  export let list;
+  export let component;
+</script>
+
+{#each list as data}
+  <AppObjectListItem {component} {data} />
+{/each}
--- a/packages/web/src/appobj/AppObjectListItem.svelte
+++ b/packages/web/src/appobj/AppObjectListItem.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let component;
+  export let data;
+
+  let isExpanded = false;
+</script>
+
+<svelte:component this={component} {data} />
--- a/packages/web/src/appobj/ConnectionAppObject.svelte
+++ b/packages/web/src/appobj/ConnectionAppObject.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import AppObjectCore from './AppObjectCore.svelte';
+
+  export let commonProps;
+  export let data;
+
+</script>
+
+<AppObjectCore {...commonProps} title={data.displayName || data.server} icon="img server" />
--- a/packages/web/src/icons/FontIcon.svelte
+++ b/packages/web/src/icons/FontIcon.svelte
@@ -0,0 +1,105 @@
+<script>
+  export let icon;
+  export let title = null;
+
+  const iconNames = {
+    'icon minus-box': 'mdi mdi-minus-box-outline',
+    'icon plus-box': 'mdi mdi-plus-box-outline',
+    'icon invisible-box': 'mdi mdi-minus-box-outline icon-invisible',
+    'icon cloud-upload': 'mdi mdi-cloud-upload',
+    'icon import': 'mdi mdi-application-import',
+    'icon export': 'mdi mdi-application-export',
+    'icon new-connection': 'mdi mdi-database-plus',
+    'icon tables': 'mdi mdi-table-multiple',
+    'icon favorite': 'mdi mdi-star',
+    'icon share': 'mdi mdi-share-variant',
+    'icon add': 'mdi mdi-plus-circle',
+    'icon connection': 'mdi mdi-connection',
+
+    'icon database': 'mdi mdi-database',
+    'icon server': 'mdi mdi-server',
+    'icon table': 'mdi mdi-table',
+    'icon archive': 'mdi mdi-archive',
+    'icon file': 'mdi mdi-file',
+    'icon loading': 'mdi mdi-loading mdi-spin',
+    'icon close': 'mdi mdi-close',
+    'icon filter': 'mdi mdi-filter',
+    'icon filter-off': 'mdi mdi-filter-off',
+    'icon reload': 'mdi mdi-reload',
+    'icon undo': 'mdi mdi-undo',
+    'icon redo': 'mdi mdi-redo',
+    'icon save': 'mdi mdi-content-save',
+    'icon account': 'mdi mdi-account',
+    'icon sql-file': 'mdi mdi-file',
+    'icon web': 'mdi mdi-web',
+    'icon home': 'mdi mdi-home',
+    'icon query-design': 'mdi mdi-vector-polyline-edit',
+    'icon form': 'mdi mdi-form-select',
+
+    'icon edit': 'mdi mdi-pencil',
+    'icon delete': 'mdi mdi-delete',
+    'icon arrow-up': 'mdi mdi-arrow-up',
+    'icon arrow-down': 'mdi mdi-arrow-down',
+    'icon arrow-left': 'mdi mdi-arrow-left',
+    'icon arrow-begin': 'mdi mdi-arrow-collapse-left',
+    'icon arrow-end': 'mdi mdi-arrow-collapse-right',
+    'icon arrow-right': 'mdi mdi-arrow-right',
+    'icon format-code': 'mdi mdi-code-tags-check',
+    'icon show-wizard': 'mdi mdi-comment-edit',
+    'icon disconnected': 'mdi mdi-lan-disconnect',
+    'icon theme': 'mdi mdi-brightness-6',
+    'icon error': 'mdi mdi-close-circle',
+    'icon ok': 'mdi mdi-check-circle',
+    'icon markdown': 'mdi mdi-application',
+    'icon preview': 'mdi mdi-file-find',
+    'icon eye': 'mdi mdi-eye',
+
+    'icon run': 'mdi mdi-play',
+    'icon chevron-down': 'mdi mdi-chevron-down',
+    'icon chevron-left': 'mdi mdi-chevron-left',
+    'icon chevron-right': 'mdi mdi-chevron-right',
+    'icon chevron-up': 'mdi mdi-chevron-up',
+    'icon plugin': 'mdi mdi-toy-brick',
+    'icon menu': 'mdi mdi-menu',
+
+    'img ok': 'mdi mdi-check-circle color-green-8',
+    'img alert': 'mdi mdi-alert-circle color-blue-6',
+    'img error': 'mdi mdi-close-circle color-red-7',
+    'img warn': 'mdi mdi-alert color-gold-7',
+    // 'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',
+
+    'img archive': 'mdi mdi-table color-gold-7',
+    'img archive-folder': 'mdi mdi-database-outline color-green-7',
+    'img autoincrement': 'mdi mdi-numeric-1-box-multiple-outline',
+    'img column': 'mdi mdi-table-column',
+    'img server': 'mdi mdi-server color-blue-7',
+    'img primary-key': 'mdi mdi-key-star color-yellow-7',
+    'img foreign-key': 'mdi mdi-key-link',
+    'img sql-file': 'mdi mdi-file',
+    'img shell': 'mdi mdi-flash color-blue-7',
+    'img chart': 'mdi mdi-chart-bar color-magenta-7',
+    'img markdown': 'mdi mdi-application color-red-7',
+    'img preview': 'mdi mdi-file-find color-red-7',
+    'img favorite': 'mdi mdi-star color-yellow-7',
+    'img query-design': 'mdi mdi-vector-polyline-edit color-red-7',
+
+    'img free-table': 'mdi mdi-table color-green-7',
+    'img macro': 'mdi mdi-hammer-wrench',
+
+    'img database': 'mdi mdi-database color-gold-7',
+    'img table': 'mdi mdi-table color-blue-7',
+    'img view': 'mdi mdi-table color-magenta-7',
+    'img procedure': 'mdi mdi-cog color-blue-7',
+    'img function': 'mdi mdi-function-variant',
+
+    'img sort-asc': 'mdi mdi-sort-alphabetical-ascending color-green',
+    'img sort-desc': 'mdi mdi-sort-alphabetical-descending color-green',
+
+    'img reference': 'mdi mdi-link-box',
+    'img link': 'mdi mdi-link',
+    'img filter': 'mdi mdi-filter',
+    'img group': 'mdi mdi-group',
+  };
+</script>
+
+<span class={iconNames[icon] || icon} {title} />
--- a/packages/web/src/main.ts
+++ b/packages/web/src/main.ts
@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+  target: document.body,
+  props: {
+    name: 'world',
+  },
+});
+
+export default app;
--- a/packages/web/src/stores.ts
+++ b/packages/web/src/stores.ts
@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store';
+
+export const selectedWidget = writable('database');
+export const openedConnections = writable([]);
+export const currentDatabase = writable(null);
+
+// export const leftPanelWidth = writable(300);
--- a/packages/web/src/utility/axios.js
+++ b/packages/web/src/utility/axios.js
@@ -0,0 +1,14 @@
+import axios from 'axios';
+import resolveApi from './resolveApi';
+
+const axiosInstance = axios.create({
+  baseURL: resolveApi(),
+});
+
+axiosInstance.defaults.headers = {
+  'Cache-Control': 'no-cache',
+  Pragma: 'no-cache',
+  Expires: '0',
+};
+
+export default axiosInstance;
--- a/packages/web/src/utility/cache.ts
+++ b/packages/web/src/utility/cache.ts
@@ -0,0 +1,40 @@
+import getAsArray from './getAsArray';
+
+let cachedByKey = {};
+let cachedPromisesByKey = {};
+const cachedKeysByReloadTrigger = {};
+
+export function cacheGet(key) {
+  return cachedByKey[key];
+}
+
+export function cacheSet(key, value, reloadTrigger) {
+  cachedByKey[key] = value;
+  for (const item of getAsArray(reloadTrigger)) {
+    if (!(item in cachedKeysByReloadTrigger)) {
+      cachedKeysByReloadTrigger[item] = [];
+    }
+    cachedKeysByReloadTrigger[item].push(key);
+  }
+  delete cachedPromisesByKey[key];
+}
+
+export function cacheClean(reloadTrigger) {
+  for (const item of getAsArray(reloadTrigger)) {
+    const keys = cachedKeysByReloadTrigger[item];
+    if (keys) {
+      for (const key of keys) {
+        delete cachedByKey[key];
+        delete cachedPromisesByKey[key];
+      }
+    }
+    delete cachedKeysByReloadTrigger[item];
+  }
+}
+
+export function getCachedPromise(key, func) {
+  if (key in cachedPromisesByKey) return cachedPromisesByKey[key];
+  const promise = func();
+  cachedPromisesByKey[key] = promise;
+  return promise;
+}
--- a/packages/web/src/utility/getAsArray.ts
+++ b/packages/web/src/utility/getAsArray.ts
@@ -0,0 +1,7 @@
+import _ from 'lodash';
+
+export default function getAsArray(obj) {
+  if (_.isArray(obj)) return obj;
+  if (obj != null) return [obj];
+  return [];
+}
--- a/packages/web/src/utility/getElectron.ts
+++ b/packages/web/src/utility/getElectron.ts
@@ -0,0 +1,7 @@
+export default function getElectron() {
+  if (window['require']) {
+    const electron = window['require']('electron');
+    return electron;
+  }
+  return null;
+}
--- a/packages/web/src/utility/metadataLoaders.ts
+++ b/packages/web/src/utility/metadataLoaders.ts
@@ -0,0 +1,378 @@
+import axios from './axios';
+import _ from 'lodash';
+import { cacheGet, cacheSet, getCachedPromise } from './cache';
+import stableStringify from 'json-stable-stringify';
+import { cacheClean } from './cache';
+import socket from './socket';
+import getAsArray from './getAsArray';
+
+const databaseInfoLoader = ({ conid, database }) => ({
+  url: 'database-connections/structure',
+  params: { conid, database },
+  reloadTrigger: `database-structure-changed-${conid}-${database}`,
+  transform: db => {
+    const allForeignKeys = _.flatten(db.tables.map(x => x.foreignKeys));
+    return {
+      ...db,
+      tables: db.tables.map(table => ({
+        ...table,
+        dependencies: allForeignKeys.filter(
+          (x: any) => x.refSchemaName == table.schemaName && x.refTableName == table.pureName
+        ),
+      })),
+    };
+  },
+});
+
+// const tableInfoLoader = ({ conid, database, schemaName, pureName }) => ({
+//   url: 'metadata/table-info',
+//   params: { conid, database, schemaName, pureName },
+//   reloadTrigger: `database-structure-changed-${conid}-${database}`,
+// });
+
+// const sqlObjectInfoLoader = ({ objectTypeField, conid, database, schemaName, pureName }) => ({
+//   url: 'metadata/sql-object-info',
+//   params: { objectTypeField, conid, database, schemaName, pureName },
+//   reloadTrigger: `database-structure-changed-${conid}-${database}`,
+// });
+
+const connectionInfoLoader = ({ conid }) => ({
+  url: 'connections/get',
+  params: { conid },
+  reloadTrigger: 'connection-list-changed',
+});
+
+const configLoader = () => ({
+  url: 'config/get',
+  params: {},
+  reloadTrigger: 'config-changed',
+});
+
+const platformInfoLoader = () => ({
+  url: 'config/platform-info',
+  params: {},
+  reloadTrigger: 'platform-info-changed',
+});
+
+const favoritesLoader = () => ({
+  url: 'files/favorites',
+  params: {},
+  reloadTrigger: 'files-changed-favorites',
+});
+
+// const sqlObjectListLoader = ({ conid, database }) => ({
+//   url: 'metadata/list-objects',
+//   params: { conid, database },
+//   reloadTrigger: `database-structure-changed-${conid}-${database}`,
+// });
+
+const databaseStatusLoader = ({ conid, database }) => ({
+  url: 'database-connections/status',
+  params: { conid, database },
+  reloadTrigger: `database-status-changed-${conid}-${database}`,
+});
+
+const databaseListLoader = ({ conid }) => ({
+  url: 'server-connections/list-databases',
+  params: { conid },
+  reloadTrigger: `database-list-changed-${conid}`,
+});
+
+const archiveFoldersLoader = () => ({
+  url: 'archive/folders',
+  params: {},
+  reloadTrigger: `archive-folders-changed`,
+});
+
+const archiveFilesLoader = ({ folder }) => ({
+  url: 'archive/files',
+  params: { folder },
+  reloadTrigger: `archive-files-changed-${folder}`,
+});
+
+const serverStatusLoader = () => ({
+  url: 'server-connections/server-status',
+  params: {},
+  reloadTrigger: `server-status-changed`,
+});
+
+const connectionListLoader = () => ({
+  url: 'connections/list',
+  params: {},
+  reloadTrigger: `connection-list-changed`,
+});
+
+const installedPluginsLoader = () => ({
+  url: 'plugins/installed',
+  params: {},
+  reloadTrigger: `installed-plugins-changed`,
+});
+
+const filesLoader = ({ folder }) => ({
+  url: 'files/list',
+  params: { folder },
+  reloadTrigger: `files-changed-${folder}`,
+});
+const allFilesLoader = () => ({
+  url: 'files/list-all',
+  params: {},
+  reloadTrigger: `all-files-changed`,
+});
+
+async function getCore(loader, args) {
+  const { url, params, reloadTrigger, transform } = loader(args);
+  const key = stableStringify({ url, ...params });
+
+  async function doLoad() {
+    const resp = await axios.request({
+      method: 'get',
+      url,
+      params,
+    });
+    return (transform || (x => x))(resp.data);
+  }
+
+  const fromCache = cacheGet(key);
+  if (fromCache) return fromCache;
+  const res = await getCachedPromise(key, doLoad);
+
+  cacheSet(key, res, reloadTrigger);
+  return res;
+}
+
+function useCore(loader, args) {
+  const { url, params, reloadTrigger, transform } = loader(args);
+  const cacheKey = stableStringify({ url, ...params });
+
+  return {
+    subscribe: onChange => {
+      async function handleReload() {
+        async function doLoad() {
+          const resp = await axios.request({
+            method: 'get',
+            params,
+            url,
+          });
+          return (transform || (x => x))(resp.data);
+        }
+
+        if (cacheKey) {
+          const fromCache = cacheGet(cacheKey);
+          if (fromCache) {
+            onChange(fromCache);
+          } else {
+            try {
+              const res = await getCachedPromise(cacheKey, doLoad);
+              cacheSet(cacheKey, res, reloadTrigger);
+              onChange(res);
+            } catch (err) {
+              console.error('Error when using cached promise', err);
+              cacheClean(cacheKey);
+              const res = await doLoad();
+              cacheSet(cacheKey, res, reloadTrigger);
+              onChange(res);
+            }
+          }
+        } else {
+          const res = await doLoad();
+          onChange(res);
+        }
+      }
+
+      if (reloadTrigger && !socket) {
+        console.error('Socket not available, reloadTrigger not planned');
+      }
+      handleReload();
+      if (reloadTrigger && socket) {
+        for (const item of getAsArray(reloadTrigger)) {
+          socket.on(item, handleReload);
+        }
+        return () => {
+          for (const item of getAsArray(reloadTrigger)) {
+            socket.off(item, handleReload);
+          }
+        };
+      }
+    },
+  };
+
+  // const useTrack = track => ({
+  //   subscribe: onChange => {
+  //     onChange('TRACK ' + track);
+  //     if (track) {
+  //       const handle = setInterval(() => onChange('TRACK ' + track + ';' + new Date()), 1000);
+  //       // console.log("ON", track);
+  //       const oldTrack = track;
+  //       return () => {
+  //         clearInterval(handle);
+  //         // console.log("OFF", oldTrack);
+  //       };
+  //     }
+  //   },
+  // });
+
+  // const res = useFetch({
+  //   url,
+  //   params,
+  //   reloadTrigger,
+  //   cacheKey,
+  //   transform,
+  // });
+
+  // return res;
+}
+
+/** @returns {Promise<import('dbgate-types').DatabaseInfo>} */
+export function getDatabaseInfo(args) {
+  return getCore(databaseInfoLoader, args);
+}
+
+/** @returns {import('dbgate-types').DatabaseInfo} */
+export function useDatabaseInfo(args) {
+  return useCore(databaseInfoLoader, args);
+}
+
+export async function getDbCore(args, objectTypeField = undefined) {
+  const db = await getDatabaseInfo(args);
+  if (!db) return null;
+  return db[objectTypeField || args.objectTypeField].find(
+    x => x.pureName == args.pureName && x.schemaName == args.schemaName
+  );
+}
+
+export function useDbCore(args, objectTypeField = undefined) {
+  const db = useDatabaseInfo(args);
+  if (!db) return null;
+  return db[objectTypeField || args.objectTypeField].find(
+    x => x.pureName == args.pureName && x.schemaName == args.schemaName
+  );
+}
+
+/** @returns {Promise<import('dbgate-types').TableInfo>} */
+export function getTableInfo(args) {
+  return getDbCore(args, 'tables');
+}
+
+/** @returns {import('dbgate-types').TableInfo} */
+export function useTableInfo(args) {
+  return useDbCore(args, 'tables');
+}
+
+/** @returns {Promise<import('dbgate-types').ViewInfo>} */
+export function getViewInfo(args) {
+  return getDbCore(args, 'views');
+}
+
+/** @returns {import('dbgate-types').ViewInfo} */
+export function useViewInfo(args) {
+  return useDbCore(args, 'views');
+}
+
+export function getSqlObjectInfo(args) {
+  return getDbCore(args);
+}
+
+export function useSqlObjectInfo(args) {
+  return useDbCore(args);
+}
+
+/** @returns {Promise<import('dbgate-types').StoredConnection>} */
+export function getConnectionInfo(args) {
+  return getCore(connectionInfoLoader, args);
+}
+
+/** @returns {import('dbgate-types').StoredConnection} */
+export function useConnectionInfo(args) {
+  return useCore(connectionInfoLoader, args);
+}
+
+// export function getSqlObjectList(args) {
+//   return getCore(sqlObjectListLoader, args);
+// }
+// export function useSqlObjectList(args) {
+//   return useCore(sqlObjectListLoader, args);
+// }
+
+export function getDatabaseStatus(args) {
+  return getCore(databaseStatusLoader, args);
+}
+export function useDatabaseStatus(args) {
+  return useCore(databaseStatusLoader, args);
+}
+
+export function getDatabaseList(args) {
+  return getCore(databaseListLoader, args);
+}
+export function useDatabaseList(args) {
+  return useCore(databaseListLoader, args);
+}
+
+export function getServerStatus() {
+  return getCore(serverStatusLoader, {});
+}
+export function useServerStatus() {
+  return useCore(serverStatusLoader, {});
+}
+
+export function getConnectionList() {
+  return getCore(connectionListLoader, {});
+}
+export function useConnectionList() {
+  return useCore(connectionListLoader, {});
+}
+
+export function getConfig() {
+  return getCore(configLoader, {}) || {};
+}
+export function useConfig() {
+  return useCore(configLoader, {}) || {};
+}
+
+export function getPlatformInfo() {
+  return getCore(platformInfoLoader, {}) || {};
+}
+export function usePlatformInfo() {
+  return useCore(platformInfoLoader, {}) || {};
+}
+
+export function getArchiveFiles(args) {
+  return getCore(archiveFilesLoader, args);
+}
+export function useArchiveFiles(args) {
+  return useCore(archiveFilesLoader, args);
+}
+
+export function getArchiveFolders(args) {
+  return getCore(archiveFoldersLoader, args);
+}
+export function useArchiveFolders(args) {
+  return useCore(archiveFoldersLoader, args);
+}
+
+export function getInstalledPlugins(args) {
+  return getCore(installedPluginsLoader, args) || [];
+}
+export function useInstalledPlugins(args) {
+  return useCore(installedPluginsLoader, args) || [];
+}
+
+export function getFiles(args) {
+  return getCore(filesLoader, args);
+}
+export function useFiles(args) {
+  return useCore(filesLoader, args);
+}
+
+export function getAllFiles(args) {
+  return getCore(allFilesLoader, args);
+}
+export function useAllFiles(args) {
+  return useCore(allFilesLoader, args);
+}
+
+export function getFavorites(args) {
+  return getCore(favoritesLoader, args);
+}
+export function useFavorites(args) {
+  return useCore(favoritesLoader, args);
+}
--- a/packages/web/src/utility/resolveApi.ts
+++ b/packages/web/src/utility/resolveApi.ts
@@ -0,0 +1,21 @@
+export default function resolveApi() {
+  if (window['require']) {
+    const electron = window['require']('electron');
+
+    if (electron) {
+      const port = electron.remote.getGlobal('port');
+      if (port) {
+        return `http://localhost:${port}`;
+      }
+    }
+  }
+
+  // // eslint-disable-next-line
+  // const apiUrl = process.env.REACT_APP_API_URL;
+  // if (apiUrl) {
+  //   if (apiUrl == 'ORIGIN') return window.location.origin;
+  //   return apiUrl;
+  // }
+
+  return 'http://localhost:3000';
+}
--- a/packages/web/src/utility/socket.js
+++ b/packages/web/src/utility/socket.js
@@ -0,0 +1,8 @@
+import io from 'socket.io-client';
+import resolveApi from './resolveApi';
+import { cacheClean } from './cache';
+
+const socket = io(resolveApi());
+socket.on('clean-cache', reloadTrigger => cacheClean(reloadTrigger));
+
+export default socket;
--- a/packages/web/src/widgets/ConnectionList.svelte
+++ b/packages/web/src/widgets/ConnectionList.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import _ from 'lodash';
+  import InlineButton from './InlineButton.svelte';
+  import SearchInput from './SearchInput.svelte';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+  import { useConnectionList, useServerStatus } from '../utility/metadataLoaders';
+  import SearchBoxWrapper from './SearchBoxWrapper.svelte';
+  import AppObjectList from '../appobj/AppObjectList.svelte';
+  import ConnectionAppObject from '../appobj/ConnectionAppObject.svelte';
+
+  const connections = useConnectionList();
+  const serverStatus = useServerStatus();
+
+  $: connectionsWithStatus =
+    $connections && $serverStatus
+      ? $connections.map(conn => ({ ...conn, status: $serverStatus[conn._id] }))
+      : $connections;
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search connection" />
+  <InlineButton>Refresh</InlineButton>
+</SearchBoxWrapper>
+<WidgetsInnerContainer>
+  <AppObjectList
+    list={_.sortBy(connectionsWithStatus, ({ displayName, server }) => (displayName || server || '').toUpperCase())}
+    component={ConnectionAppObject}
+  />
+</WidgetsInnerContainer>
--- a/packages/web/src/widgets/DatabaseWidget.svelte
+++ b/packages/web/src/widgets/DatabaseWidget.svelte
@@ -0,0 +1,16 @@
+ <script lang="ts">
+  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>
--- a/packages/web/src/widgets/InlineButton.svelte
+++ b/packages/web/src/widgets/InlineButton.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  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>
--- a/packages/web/src/widgets/SearchBoxWrapper.svelte
+++ b/packages/web/src/widgets/SearchBoxWrapper.svelte
@@ -0,0 +1,8 @@
+<div><slot /></div>
+
+<style>
+  div {
+    display: flex;
+    margin-bottom: 5px;
+  }
+</style>
--- a/packages/web/src/widgets/SearchInput.svelte
+++ b/packages/web/src/widgets/SearchInput.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  export let placeholder;
+</script>
+
+<input type="text" {placeholder} />
+
+<style>
+  input {
+    flex: 1;
+    min-width: 10px;
+    width: 10px;
+    border: none;
+  }
+</style>
--- a/packages/web/src/widgets/SqlObjectList.svelte
+++ b/packages/web/src/widgets/SqlObjectList.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import InlineButton from './InlineButton.svelte';
+  import SearchInput from './SearchInput.svelte';
+  import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
+  import { useDatabaseInfo, useDatabaseStatus } from '../utility/metadataLoaders';
+  import SearchBoxWrapper from './SearchBoxWrapper.svelte';
+
+  export let conid;
+  export let database;
+
+  $: objects = useDatabaseInfo({ conid, database });
+  $: status = useDatabaseStatus({ conid, database });
+
+  $: console.log('objects', $objects);
+</script>
+
+<SearchBoxWrapper>
+  <SearchInput placeholder="Search connection" />
+  <InlineButton>Refresh</InlineButton>
+</SearchBoxWrapper>
+<WidgetsInnerContainer>CONNECTIONS</WidgetsInnerContainer>
--- a/packages/web/src/widgets/WidgetColumnBar.svelte
+++ b/packages/web/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>
--- a/packages/web/src/widgets/WidgetColumnBarItem.svelte
+++ b/packages/web/src/widgets/WidgetColumnBarItem.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  export let title;
+  export let name;
+  export let height = null;
+  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>
--- a/packages/web/src/widgets/WidgetContainer.svelte
+++ b/packages/web/src/widgets/WidgetContainer.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { selectedWidget } from '../stores';
+  import DatabaseWidget from './DatabaseWidget.svelte';
+
+
+</script>
+
+{#if $selectedWidget == 'database'}
+  <DatabaseWidget />
+{/if}
--- a/packages/web/src/widgets/WidgetIconPanel.svelte
+++ b/packages/web/src/widgets/WidgetIconPanel.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { selectedWidget } from '../stores';
+
+  const widgets = [
+    {
+      icon: 'icon database',
+      name: 'database',
+      title: 'Database connections',
+    },
+    // {
+    //   icon: 'fa-table',
+    //   name: 'table',
+    // },
+    {
+      icon: 'icon file',
+      name: 'file',
+      title: 'Closed tabs & Saved SQL files',
+    },
+    {
+      icon: 'icon archive',
+      name: 'archive',
+      title: 'Archive (saved tabular data)',
+    },
+    {
+      icon: 'icon plugin',
+      name: 'plugins',
+      title: 'Extensions & Plugins',
+    },
+    {
+      icon: 'icon favorite',
+      name: 'favorites',
+      title: 'Favorites',
+    },
+    // {
+    //   icon: 'fa-cog',
+    //   name: 'settings',
+    // },
+    // {
+    //   icon: 'fa-check',
+    //   name: 'settings',
+    // },
+  ];
+
+  function handleChangeWidget(name) {
+    $selectedWidget = name == $selectedWidget ? null : name;
+  }
+  //const handleChangeWidget= e => (selectedWidget.set(item.name))
+</script>
+
+{#each widgets as item}
+  <div class="wrapper" class:selected={item.name == $selectedWidget} on:click={() => handleChangeWidget(item.name)}>
+    <FontIcon icon={item.icon} />
+  </div>
+{/each}
+
+<style>
+  .wrapper {
+    font-size: 23pt;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--theme-font-inv-2);
+  }
+  .wrapper:hover {
+    color: var(--theme-font-inv-1);
+  }
+  .wrapper.selected {
+    color: var(--theme-font-inv-1);
+    background: var(--theme-bg-inv-3);
+  }
+</style>
--- a/packages/web/src/widgets/WidgetsInnerContainer.svelte
+++ b/packages/web/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>