web-svelte => web

2026-04-26 23:46:23 +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/README.md
+++ b/packages/web/README.md
@@ -0,0 +1,105 @@
+*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+## Using TypeScript
+
+This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
+
+```bash
+node scripts/setupTypeScript.js
+```
+
+Or remove the script via:
+
+```bash
+rm scripts/setupTypeScript.js
+```
+
+## Deploying to the web
+
+### With [Vercel](https://vercel.com)
+
+Install `vercel` if you haven't already:
+
+```bash
+npm install -g vercel
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+vercel deploy --name my-project
+```
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "dbgate-web",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public",
+    "validate": "svelte-check"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@tsconfig/svelte": "^1.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-copy": "^3.3.0",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "svelte": "^3.0.0",
+    "svelte-check": "^1.0.0",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.3",
+    "socket.io-client": "^2.3.0",
+    "sql-formatter": "^2.3.3",
+    "uuid": "^3.4.0",
+    "json-stable-stringify": "^1.0.1",
+    "localforage": "^1.9.0",
+    "lodash": "^4.17.15"
+  },
+  "dependencies": {
+    "@mdi/font": "^5.9.55",
+    "sirv-cli": "^1.0.0"
+  }
+}
--- a/packages/web/public/dimensions.css
+++ b/packages/web/public/dimensions.css
@@ -0,0 +1,5 @@
+:root {
+  --dim-widget-icon-size: 50px;
+  --dim-statusbar-height: 20px;
+  --dim-left-panel-width: 300px;
+}
--- a/packages/web/public/favicon.png
+++ b/packages/web/public/favicon.png
--- a/packages/web/public/global.css
+++ b/packages/web/public/global.css
@@ -0,0 +1,75 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans,
+    sans-serif;
+  font-size: 14px;
+  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+	  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+	  sans-serif; 
+	  */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+} */
--- a/packages/web/public/index.html
+++ b/packages/web/public/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Svelte app</title>
+
+	<link rel='icon' type='image/png' href='/favicon.png'>
+	<link rel='stylesheet' href='/global.css'>
+	<link rel='stylesheet' href='/theme-light.css'>
+	<link rel='stylesheet' href='/theme-dark.css'>
+	<link rel='stylesheet' href='/dimensions.css'>
+	<link rel='stylesheet' href='/build/bundle.css'>
+	<link rel='stylesheet' href='/build/fonts/materialdesignicons.css'>
+
+	<script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>
--- a/packages/web/public/theme-dark.css
+++ b/packages/web/public/theme-dark.css
@@ -0,0 +1,25 @@
+.theme-dark {
+  --theme-font-1: #000000;
+  --theme-font-2: #4d4d4d;
+  --theme-font-3: #808080;
+  --theme-font-4: #b3b3b3;
+
+  --theme-bg-1: #ededed;
+  --theme-bg-2: #d4d4d4;
+  --theme-bg-3: #bbbbbb;
+  --theme-bg-4: #a2a2a2;
+
+  --theme-font-inv-1: #FFFFFF;
+  --theme-font-inv-2: #b3b3b3;
+  --theme-font-inv-3: #808080;
+  --theme-font-inv-4: #4d4d4d;
+
+  --theme-bg-inv-1: #222;
+  --theme-bg-inv-2: #3c3c3c;
+  --theme-bg-inv-3: #565656;
+  --theme-bg-inv-4: #707070;
+
+  --theme-border: #ccc;
+
+  --theme-bg-statusbar-inv: blue;
+}
--- a/packages/web/public/theme-light.css
+++ b/packages/web/public/theme-light.css
@@ -0,0 +1,25 @@
+.theme-light {
+  --theme-font-1: #000000;
+  --theme-font-2: #4d4d4d;
+  --theme-font-3: #808080;
+  --theme-font-4: #b3b3b3;
+
+  --theme-bg-1: #ededed;
+  --theme-bg-2: #d4d4d4;
+  --theme-bg-3: #bbbbbb;
+  --theme-bg-4: #a2a2a2;
+
+  --theme-font-inv-1: #FFFFFF;
+  --theme-font-inv-2: #b3b3b3;
+  --theme-font-inv-3: #808080;
+  --theme-font-inv-4: #4d4d4d;
+
+  --theme-bg-inv-1: #222;
+  --theme-bg-inv-2: #3c3c3c;
+  --theme-bg-inv-3: #565656;
+  --theme-bg-inv-4: #707070;
+
+  --theme-border: #ccc;
+
+  --theme-bg-statusbar-inv: blue;
+}
--- a/packages/web/rollup.config.js
+++ b/packages/web/rollup.config.js
@@ -0,0 +1,99 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import copy from 'rollup-plugin-copy';
+import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
+import css from 'rollup-plugin-css-only';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+  let server;
+
+  function toExit() {
+    if (server) server.kill(0);
+  }
+
+  return {
+    writeBundle() {
+      if (server) return;
+      server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+        stdio: ['ignore', 'inherit', 'inherit'],
+        shell: true,
+      });
+
+      process.on('SIGTERM', toExit);
+      process.on('exit', toExit);
+    },
+  };
+}
+
+export default {
+  input: 'src/main.ts',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/build/bundle.js',
+  },
+  plugins: [
+    copy({
+      targets: [
+        {
+          src:
+            '../../node_modules/@mdi/font/css/materialdesignicons.css',
+          dest: 'public/build/fonts/',
+        },
+        {
+			src:
+			  '../../node_modules/@mdi/font/fonts/*',
+			dest: 'public/build/fonts/',
+		  },
+		],
+    }),
+
+    svelte({
+      preprocess: sveltePreprocess({ sourceMap: !production }),
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+      },
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: 'bundle.css' }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ['svelte'],
+    }),
+    commonjs(),
+    typescript({
+      sourceMap: !production,
+      inlineSources: !production,
+    }),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
+};
--- 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>
--- a/packages/web/tsconfig.json
+++ b/packages/web/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  // "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "public/*"]
+}