Frontend reorganisation

frontend/src/app.svelte

@@ -1,10 +1,13 @@
 <script>
   import { EventsOn } from '../wailsjs/runtime';
   import ContextMenu from './components/contextmenu.svelte';
+  import { connections } from './lib/stores/connections';
+  import contextMenu from './lib/stores/contextmenu';
+  import environment from './lib/stores/environment';
+  import applicationInited from './lib/stores/inited';
   import About from './organisms/about/index.svelte';
   import Connection from './organisms/connection/index.svelte';
   import Settings from './organisms/settings/index.svelte';
-  import { applicationInited, connections, contextMenu, environment } from './stores';
 
   const hosts = {};
   const activeHostKey = '';

frontend/src/components/datepicker.svelte

@@ -1,7 +1,7 @@
 <script>
   import { addDays, getWeek, isDate, isSameDay, startOfWeek } from 'date-fns';
   import { onMount } from 'svelte';
-  import { daysAbbr, months } from '../utils';
+  import { daysAbbr, months } from '../lib/utils';
   import Clock from './clock.svelte';
   import Icon from './icon.svelte';
   import Modal from './modal.svelte';

frontend/src/components/forminput.svelte

@@ -1,6 +1,6 @@
 <script>
-  import { canBeObjectId, numericInputTypes } from '../utils';
-  import { input } from '../actions';
+  import { canBeObjectId, numericInputTypes } from '../lib/utils';
+  import { input } from '../lib/actions';
   import Icon from './icon.svelte';
   import { ObjectId } from 'bson';
   import Datepicker from './datepicker.svelte';

frontend/src/components/grid-items.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { contextMenu } from '../stores';
   import { createEventDispatcher } from 'svelte';
   import Icon from './icon.svelte';
-  import { resolveKeypath, setValue } from '../utils';
+  import { resolveKeypath, setValue } from '../lib/utils';
   import FormInput from './forminput.svelte';
+  import contextMenu from '../lib/stores/contextmenu';
 
   export let items = [];
   export let columns = [];

frontend/src/components/objectgrid.svelte

@@ -1,6 +1,6 @@
 <script>
   import { isDate } from 'date-fns';
-  import { isBsonBuiltin } from '../utils';
+  import { isBsonBuiltin } from '../lib/utils';
   import Grid from './grid.svelte';
 
   export let data = [];

frontend/src/lib/stores/busy.js

@@ -0,0 +1,20 @@
+import { writable } from 'svelte/store';
+
+const { update, subscribe } = writable(0);
+
+subscribe(isBusy => {
+  if (isBusy) {
+    document.body.classList.add('busy');
+  }
+  else {
+    document.body.classList.remove('busy');
+  }
+});
+
+const busy = {
+  start: () => update(v => ++v),
+  end: () => update(v => --v),
+  subscribe,
+};
+
+export default busy;

frontend/src/lib/stores/connections.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const connections = writable({});

frontend/src/lib/stores/contextmenu.js

@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store';
+
+const { set, subscribe } = writable();
+
+const contextMenu = {
+  show: (evt, menu) => set(Object.keys(menu || {}).length ? {
+    position: [ evt.clientX, evt.clientY ],
+    items: menu,
+  } : undefined),
+  hide: () => set(undefined),
+  subscribe,
+};
+
+export default contextMenu;

frontend/src/lib/stores/environment.js

@@ -0,0 +1,15 @@
+import { writable } from 'svelte/store';
+import { Environment } from '../../../wailsjs/go/app/App';
+
+const { set, subscribe } = writable({});
+
+async function reload() {
+  const newEnv = await Environment();
+  set(newEnv);
+  return newEnv;
+}
+
+reload();
+
+const environment = { reload, subscribe };
+export default environment;

frontend/src/lib/stores/inited.js

@@ -0,0 +1,14 @@
+import { derived } from 'svelte/store';
+import environment from './environment';
+import applicationSettings from './settings';
+
+const applicationInited = derived([ environment, applicationSettings ], ([ env, settings ], set) => {
+  if (env && settings) {
+    set(true);
+
+    // Remove loading spinner.
+    document.getElementById('app-loading')?.remove();
+  }
+}, false);
+
+export default applicationInited;

frontend/src/lib/stores/settings.js

@@ -0,0 +1,23 @@
+import { writable } from 'svelte/store';
+import { Settings, UpdateSettings } from '../../../wailsjs/go/app/App';
+
+const { set, subscribe } = writable({});
+let skipUpdate = true;
+
+async function reload() {
+  const newSettings = await Settings();
+  set(newSettings);
+  return newSettings;
+}
+
+reload();
+subscribe(newSettings => {
+  if (skipUpdate) {
+    skipUpdate = false;
+    return;
+  }
+  UpdateSettings(JSON.stringify(newSettings || {}));
+});
+
+const applicationSettings = { reload, set, subscribe };
+export default applicationSettings;

frontend/src/lib/stores/views.js

@@ -0,0 +1,36 @@
+import { get, writable } from 'svelte/store';
+import { UpdateViewStore, Views } from '../../../wailsjs/go/app/App';
+
+const { set, subscribe } = writable({});
+let skipUpdate = true;
+
+async function reload() {
+  const newViewStore = await Views();
+  set(newViewStore);
+  return newViewStore;
+}
+
+function forCollection(hostKey, dbKey, collKey)  {
+  const allViews = get({ subscribe });
+  const entries = Object.entries(allViews).filter(v => (
+    v[0] === 'list' || (
+      v[1].host === hostKey &&
+        v[1].database === dbKey &&
+        v[1].collection === collKey
+    )
+  ));
+
+  return Object.fromEntries(entries);
+}
+
+reload();
+subscribe(newViewStore => {
+  if (skipUpdate) {
+    skipUpdate = false;
+    return;
+  }
+  UpdateViewStore(JSON.stringify(newViewStore));
+});
+
+const views = { reload, set, subscribe, forCollection };
+export default views;

frontend/src/lib/utils.js

@@ -1,6 +1,6 @@
 import { ObjectId } from 'bson';
 import { get } from 'svelte/store';
-import { environment } from './stores';
+import environment from './stores/environment';
 
 // Calculate the min and max values of (un)signed integers with n bits
 export const intMin = bits => Math.pow(2, bits - 1) * -1;

frontend/src/main.js

@@ -1,6 +1,7 @@
-import './reset.css';
-import './style.css';
-import './loading.css';
+import './styles/reset.css';
+import './styles/style.css';
+import './styles/loading.css';
+
 import App from './app.svelte';
 import { LogError } from '../wailsjs/runtime/runtime';
 

frontend/src/organisms/connection/collection/components/form.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { inputTypes, resolveKeypath, setValue } from '../../../../utils';
+  import { inputTypes, resolveKeypath, setValue } from '../../../../lib/utils';
   import Icon from '../../../../components/icon.svelte';
   import FormInput from '../../../../components/forminput.svelte';
 

frontend/src/organisms/connection/collection/components/indexdetail.svelte

@@ -1,6 +1,6 @@
 <script>
   import Icon from '../../../../components/icon.svelte';
-  import { input } from '../../../../actions';
+  import { input } from '../../../../lib/actions';
   import Modal from '../../../../components/modal.svelte';
   import { CreateIndex } from '../../../../../wailsjs/go/app/App';
   import { createEventDispatcher } from 'svelte';

frontend/src/organisms/connection/collection/components/viewconfig.svelte

@@ -2,9 +2,9 @@
   import TabBar from '../../../../components/tabbar.svelte';
   import Modal from '../../../../components/modal.svelte';
   import Icon from '../../../../components/icon.svelte';
-  import { views } from '../../../../stores';
-  import { randomString } from '../../../../utils';
-  import { input } from '../../../../actions';
+  import { randomString } from '../../../../lib/utils';
+  import { input } from '../../../../lib/actions';
+  import views from '../../../../lib/stores/views';
 
   export let collection;
   export let show = false;

frontend/src/organisms/connection/collection/find.svelte

@@ -1,14 +1,15 @@
 <script>
   import { EJSON } from 'bson';
+  import applicationSettings from '../../../lib/stores/settings';
   import { createEventDispatcher, onMount } from 'svelte';
   import { FindItems, RemoveItemById } from '../../../../wailsjs/go/app/App';
-  import { input } from '../../../actions';
+  import { input } from '../../../lib/actions';
   import CodeExample from '../../../components/code-example.svelte';
   import Grid from '../../../components/grid.svelte';
   import Icon from '../../../components/icon.svelte';
   import ObjectGrid from '../../../components/objectgrid.svelte';
+  import views from '../../../lib/stores/views';
   // import ObjectViewer from '../../../components/objectviewer.svelte';
-  import { applicationSettings, views } from '../../../stores';
 
   export let collection;
 

frontend/src/organisms/connection/collection/insert.svelte

@@ -1,15 +1,15 @@
 <script>
-  import { views } from '../../../stores';
   import { createEventDispatcher } from 'svelte';
   import { InsertItems } from '../../../../wailsjs/go/app/App';
-  import { input } from '../../../actions';
+  import { input } from '../../../lib/actions';
   import Icon from '../../../components/icon.svelte';
   import Form from './components/form.svelte';
   import ObjectViewer from '../../../components/objectviewer.svelte';
   import Grid from '../../../components/grid.svelte';
-  import { inputTypes, randomString } from '../../../utils';
+  import { inputTypes, randomString } from '../../../lib/utils';
   import { EJSON } from 'bson';
   import Details from '../../../components/details.svelte';
+  import views from '../../../lib/stores/views';
 
   export let collection;
 

frontend/src/organisms/connection/collection/remove.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { input } from '../../../actions';
+  import { input } from '../../../lib/actions';
   import { RemoveItems } from '../../../../wailsjs/go/app/App';
   import CodeExample from '../../../components/code-example.svelte';
   import Icon from '../../../components/icon.svelte';

frontend/src/organisms/connection/collection/update.svelte

@@ -1,6 +1,6 @@
 <script>
   import Icon from '../../../components/icon.svelte';
-  import { input } from '../../../actions';
+  import { input } from '../../../lib/actions';
   import { UpdateItems } from '../../../../wailsjs/go/app/App';
   import CodeExample from '../../../components/code-example.svelte';
 

frontend/src/organisms/connection/export/export.svelte

@@ -1,9 +1,11 @@
 <script>
-  import { applicationSettings, busy, connections } from '../../../stores';
   import Grid from '../../../components/grid.svelte';
   import Modal from '../../../components/modal.svelte';
   import { OpenConnection, OpenDatabase, PerformExport } from '../../../../wailsjs/go/app/App';
   import DirectoryChooser from '../../../components/directorychooser.svelte';
+  import applicationSettings from '../../../lib/stores/settings';
+  import { connections } from '../../../lib/stores/connections';
+  import busy from '../../../lib/stores/busy';
 
   export let info;
   export let hosts = {};

frontend/src/organisms/connection/hostdetail.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { input } from '../../actions';
+  import { input } from '../../lib/actions';
   import { createEventDispatcher } from 'svelte';
   import { AddHost, UpdateHost } from '../../../wailsjs/go/app/App';
   import Modal from '../../components/modal.svelte';

frontend/src/organisms/connection/hosttree.svelte

@@ -1,9 +1,10 @@
 <script>
-  import { busy, connections } from '../../stores';
   import { createEventDispatcher } from 'svelte';
   import { DropCollection, DropDatabase, OpenCollection, OpenConnection, OpenDatabase, TruncateCollection } from '../../../wailsjs/go/app/App';
   import Grid from '../../components/grid.svelte';
   import { WindowSetTitle } from '../../../wailsjs/runtime/runtime';
+  import { connections } from '../../lib/stores/connections';
+  import busy from '../../lib/stores/busy';
 
   export let hosts = {};
   export let activeHostKey = '';

frontend/src/organisms/connection/index.svelte

@@ -1,16 +1,17 @@
 <script>
   import { onMount } from 'svelte';
   import { Hosts, RenameCollection } from '../../../wailsjs/go/app/App';
-  import { input } from '../../actions';
+  import { input } from '../../lib/actions';
   import Modal from '../../components/modal.svelte';
   import HostTree from './hosttree.svelte';
-  import { busy, connections } from '../../stores';
   import CollectionDetail from './collection/index.svelte';
   import HostDetail from './hostdetail.svelte';
   import Icon from '../../components/icon.svelte';
   import { EventsOn } from '../../../wailsjs/runtime/runtime';
   import Export from './export/export.svelte';
   import Hint from '../../components/hint.svelte';
+  import { connections } from '../../lib/stores/connections';
+  import busy from '../../lib/stores/busy';
 
   export let hosts = {};
   export let activeHostKey = '';

frontend/src/organisms/settings/index.svelte

@@ -1,8 +1,8 @@
 <script>
   import DirectoryChooser from '../../components/directorychooser.svelte';
-  import { input } from '../../actions';
+  import { input } from '../../lib/actions';
   import Modal from '../../components/modal.svelte';
-  import { applicationSettings as settings } from '../../stores';
+  import settings from '../../lib/stores/settings';
 
   export let show = false;
 </script>

frontend/src/stores.js

@@ -1,117 +0,0 @@
-import { derived, writable } from 'svelte/store';
-import { Environment, Settings, UpdateSettings, UpdateViewStore, Views } from '../wailsjs/go/app/App';
-
-export const busy = (() => {
-  const { update, subscribe } = writable(0);
-
-  subscribe(isBusy => {
-    if (isBusy) {
-      document.body.classList.add('busy');
-    }
-    else {
-      document.body.classList.remove('busy');
-    }
-  });
-
-  return {
-    start: () => update(v => ++v),
-    end: () => update(v => --v),
-    subscribe,
-  };
-})();
-
-export const contextMenu = (() => {
-  const { set, subscribe } = writable();
-
-  return {
-    show: (evt, menu) => set(Object.keys(menu || {}).length ? {
-      position: [ evt.clientX, evt.clientY ],
-      items: menu,
-    } : undefined),
-    hide: () => set(undefined),
-    subscribe,
-  };
-})();
-
-export const connections = writable({});
-
-export const applicationSettings = (() => {
-  const { set, subscribe } = writable({});
-  const reload = async() => {
-    const newSettings = await Settings();
-    set(newSettings);
-    return newSettings;
-  };
-
-  let skipUpdate = true;
-
-  reload();
-  subscribe(newSettings => {
-    if (skipUpdate) {
-      skipUpdate = false;
-      return;
-    }
-    UpdateSettings(JSON.stringify(newSettings || {}));
-  });
-
-  return { reload, set, subscribe };
-})();
-
-export const environment = (() => {
-  const { set, subscribe } = writable({});
-  const reload = async() => {
-    const newEnv = await Environment();
-    set(newEnv);
-    return newEnv;
-  };
-
-  reload();
-  return { reload, subscribe };
-})();
-
-export const views = (() => {
-  const { set, subscribe } = writable({});
-
-  const reload = async() => {
-    const newViewStore = await Views();
-    set(newViewStore);
-    return newViewStore;
-  };
-
-  const forCollection = (hostKey, dbKey, collKey) => {
-    let allViews;
-    subscribe(v => allViews = v)();
-
-    const entries = Object.entries(allViews).filter(v => (
-      v[0] === 'list' || (
-        v[1].host === hostKey &&
-        v[1].database === dbKey &&
-        v[1].collection === collKey
-      )
-    ));
-
-    return Object.fromEntries(entries);
-  };
-
-  let skipUpdate = true;
-
-  reload();
-  subscribe(newViewStore => {
-    if (skipUpdate) {
-      skipUpdate = false;
-      return;
-    }
-    UpdateViewStore(JSON.stringify(newViewStore));
-  });
-
-  return { reload, set, subscribe, forCollection };
-})();
-
-export const applicationInited = derived([ environment, applicationSettings ], ([ env, settings ], set) => {
-  if (env && settings) {
-    set(true);
-
-    // Remove loading spinner.
-    // document.getElementById('app-loading')?.remove();
-  }
-}, false);

frontend/src/styles/style.css

@@ -15,7 +15,7 @@ body {
   cursor: default;
   font-size: 13px;
   line-height: 13px;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: rgba(255, 255, 255, 0.35);
 }
 
 * {