From fa924f087d1ac633975b3b4f25cfdf38b45247be Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Mon, 23 Jan 2023 20:47:43 +0100
Subject: [PATCH] Custom views!

---
 frontend/src/components/grid-items.svelte     |  16 +-
 frontend/src/components/tabbar.svelte         |  64 +++++-
 .../collection/find-viewconfig.svelte         | 171 ++++++++++------
 .../connection/collection/find.svelte         |  57 ++----
 frontend/src/stores.js                        |  18 +-
 frontend/src/style.css                        |   7 +
 frontend/src/utils.js                         |  15 ++
 frontend/wailsjs/go/app/App.d.ts              |   6 +
 frontend/wailsjs/go/app/App.js                |  12 ++
 internal/app/collection_find_views.go         | 182 ++++++++++++++++++
 internal/app/hosts.go                         |  15 +-
 11 files changed, 437 insertions(+), 126 deletions(-)
 create mode 100644 internal/app/collection_find_views.go

diff --git a/frontend/src/components/grid-items.svelte b/frontend/src/components/grid-items.svelte
index c3d7624..e93b0a6 100644
--- a/frontend/src/components/grid-items.svelte
+++ b/frontend/src/components/grid-items.svelte
@@ -40,14 +40,16 @@
   }
 
   function select(itemKey) {
-    activeKey = itemKey;
-    if (level === 0) {
-      activePath = [ itemKey ];
+    if (activeKey !== itemKey) {
+      activeKey = itemKey;
+      if (level === 0) {
+        activePath = [ itemKey ];
+      }
+      else {
+        activePath = [ ...path, itemKey ];
+      }
+      dispatch('select', { level, itemKey });
     }
-    else {
-      activePath = [ ...path, itemKey ];
-    }
-    dispatch('select', { level, itemKey });
   }
 
   function closeAll() {
diff --git a/frontend/src/components/tabbar.svelte b/frontend/src/components/tabbar.svelte
index 475ccbd..c9668e1 100644
--- a/frontend/src/components/tabbar.svelte
+++ b/frontend/src/components/tabbar.svelte
@@ -1,8 +1,10 @@
 <script>
   import { createEventDispatcher } from 'svelte';
+  import Icon from './icon.svelte';
 
   export let tabs = [];
   export let selectedKey = {};
+  export let canAddTab = false;
 
   const dispatch = createEventDispatcher();
 
@@ -15,24 +17,52 @@
 <nav class="tabs">
   <ul>
     {#each tabs as tab (tab.key)}
-      <li class="tab" class:active={tab.key === selectedKey}>
-        <button on:click={() => select(tab.key)}>{tab.title}</button>
+      <li class:active={tab.key === selectedKey}>
+        <button class="tab" on:click={() => select(tab.key)}>{tab.title}</button>
+        {#if tab.closable}
+          <button class="close" on:click={() => dispatch('closeTab', tab.key)}>
+            <Icon name="x" />
+          </button>
+        {/if}
       </li>
     {/each}
+
+    {#if canAddTab}
+      <li class="tab add">
+        <button class="tab" on:click={() => dispatch('addTab')}>
+          <Icon name="+" />
+        </button>
+      </li>
+    {/if}
   </ul>
 </nav>
 
 <style>
-  .tabs ul {
+  ul {
     overflow-x: scroll;
     display: flex;
     list-style: none;
   }
-  .tabs li {
+  li {
     display: inline-block;
     flex-grow: 1;
+    position: relative;
   }
-  .tabs li button {
+
+  li.add {
+    flex: 0 1;
+  }
+
+  .tabs :global(svg) {
+    width: 13px;
+    height: 13px;
+    vertical-align: bottom;
+  }
+  li.active :global(svg) {
+    color: #fff;
+  }
+
+  button.tab {
     width: 100%;
     padding: 0.7rem 1rem;
     border: 1px solid #ccc;
@@ -40,13 +70,33 @@
     cursor: pointer;
     background-color: #fff;
   }
-  .tabs li:last-child button {
+  button.tab:hover {
+    background-color: #eee;
+  }
+  button.tab:active {
+    background-color: #ddd;
+  }
+  li:last-child button.tab {
     border-right: 1px solid #ccc;
   }
-  .tabs li.active button {
+  li.active button.tab {
     color: #fff;
     background-color: #00008b;
     border-color: #00008b;
     cursor: not-allowed;
   }
+
+  button.close {
+    position: absolute;
+    right: 7px;
+    top: 7px;
+    padding: 3px;
+    border-radius: 2px;
+  }
+  button.close:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  button.close:active {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
 </style>
diff --git a/frontend/src/organisms/connection/collection/find-viewconfig.svelte b/frontend/src/organisms/connection/collection/find-viewconfig.svelte
index 405a907..1039468 100644
--- a/frontend/src/organisms/connection/collection/find-viewconfig.svelte
+++ b/frontend/src/organisms/connection/collection/find-viewconfig.svelte
@@ -2,32 +2,69 @@
   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';
 
+  export let collection;
   export let show = false;
-  export let activeView = 'list';
-  export let config = {
-    hideObjectIndicators: false,
-    columns: [],
-  };
+  export let activeViewKey = 'list';
   export let firstItem = {};
 
-  let activeTab = activeView || 'list';
+  $: tabs = Object.entries($views).filter(v => (
+    v[0] === 'list' || (
+      v[1].host === collection.hostKey &&
+      v[1].database === collection.dbKey &&
+      v[1].collection === collection.key
+    )
+  )).sort((a, b) => sortTabKeys(a[0], b[0]))
+    .map(([ key, v ]) => ({ key, title: v.name, closable: key !== 'list' }));
 
-  $: activeView && (activeTab = activeView);
-  $: if (!config.columns || (config.columns.length === 0)) {
-    config.columns = [ { key: '_id' } ];
+  function sortTabKeys(a, b) {
+    if (a === 'list') {
+      return -1;
+    }
+    if (b === 'list') {
+      return 1;
+    }
+    else {
+      return a.localeCompare(b);
+    }
+  }
+
+  function createView() {
+    const newViewKey = randomString();
+    $views[newViewKey] = {
+      name: 'Table view',
+      host: collection.hostKey,
+      database: collection.dbKey,
+      collection: collection.key,
+      type: 'table',
+      columns: [ { key: '_id' } ],
+    };
+    activeViewKey = newViewKey;
+  }
+
+  function removeView(viewKey) {
+    const keys = Object.keys($views).sort(sortTabKeys);
+    const oldIndex = keys.indexOf(viewKey);
+    const newKey = keys[oldIndex - 1];
+    console.log(keys, oldIndex, newKey);
+    activeViewKey = newKey;
+    delete $views[viewKey];
+    $views = $views;
   }
 
   function addColumn(before) {
     if (typeof before === 'number') {
-      config.columns = [
-        ...config.columns.slice(0, before),
+      $views[activeViewKey].columns = [
+        ...$views[activeViewKey].columns.slice(0, before),
         {},
-        ...config.columns.slice(before),
+        ...$views[activeViewKey].columns.slice(before),
       ];
     }
     else {
-      config.columns = [ ...config.columns, {} ];
+      $views[activeViewKey].columns = [ ...$views[activeViewKey].columns, {} ];
     }
   }
 
@@ -35,67 +72,85 @@
     if ((typeof firstItem !== 'object') || (firstItem === null)) {
       return;
     }
-    config.columns = Object.keys(firstItem).map(key => ({ key }));
+    $views[activeViewKey].columns = Object.keys(firstItem).map(key => ({ key }));
   }
 
   function moveColumn(oldIndex, delta) {
-    const column = config.columns[oldIndex];
+    const column = $views[activeViewKey].columns[oldIndex];
     const newIndex = oldIndex + delta;
 
-    config.columns.splice(oldIndex, 1);
-    config.columns.splice(newIndex, 0, column);
-    config.columns = config.columns;
+    $views[activeViewKey].columns.splice(oldIndex, 1);
+    $views[activeViewKey].columns.splice(newIndex, 0, column);
+    $views[activeViewKey].columns = $views[activeViewKey].columns;
   }
 
   function removeColumn(index) {
-    config.columns.splice(index, 1);
-    config.columns = config.columns;
+    $views[activeViewKey].columns.splice(index, 1);
+    $views[activeViewKey].columns = $views[activeViewKey].columns;
   }
 </script>
 
 <Modal title="View configuration" bind:show contentPadding={false}>
   <TabBar
-    tabs={[
-      { key: 'list', title: 'List view' },
-      { key: 'table', title: 'Table view columns' },
-    ]}
-    bind:selectedKey={activeTab}
+    {tabs}
+    canAddTab={true}
+    on:addTab={createView}
+    on:closeTab={e => removeView(e.detail)}
+    bind:selectedKey={activeViewKey}
   />
 
   <div class="options">
-    {#if activeTab === 'list'}
-      <div class="flex">
-        <input type="checkbox" id="hideObjectIndicators" bind:checked={config.hideObjectIndicators} />
-        <label for="hideObjectIndicators">
-          Hide object indicators ({'{...}'} and [...]) in list view and show nothing instead
+    {#if $views[activeViewKey]}
+      <div class="meta">
+        {#key activeViewKey}
+          <label class="field">
+            <span class="label">View name</span>
+            <input type="text" use:input={{ autofocus: true }} bind:value={$views[activeViewKey].name} disabled={activeViewKey === 'list'} />
+          </label>
+        {/key}
+        <label class="field">
+          <span class="label">View type</span>
+          <select bind:value={$views[activeViewKey].type} disabled={activeViewKey === 'list'}>
+            <option value="list">List view</option>
+            <option value="table">Table view</option>
+          </select>
         </label>
       </div>
-    {:else if activeTab === 'table'}
-      {#each config.columns as column, columnIndex}
-        <div class="column">
-          <label class="field">
-            <input type="text" bind:value={column.key} placeholder="Column keypath" />
+
+      {#if $views[activeViewKey].type === 'list'}
+        <div class="flex">
+          <input type="checkbox" id="hideObjectIndicators" bind:checked={$views[activeViewKey].hideObjectIndicators} />
+          <label for="hideObjectIndicators">
+            Hide object indicators ({'{...}'} and [...]) in list view and show nothing instead
           </label>
-          <button class="btn" type="button" on:click={() => addColumn(columnIndex)} title="Add column before this one">
-            <Icon name="+" />
-          </button>
-          <button class="btn" type="button" on:click={() => moveColumn(columnIndex, -1)} disabled={columnIndex === 0} title="Move column one position up">
-            <Icon name="chev-u" />
-          </button>
-          <button class="btn" type="button" on:click={() => moveColumn(columnIndex, 1)} disabled={columnIndex === config.columns.length - 1} title="Move column one position down">
-            <Icon name="chev-d" />
-          </button>
-          <button class="btn danger" type="button" on:click={() => removeColumn(columnIndex)} title="Remove this column">
-            <Icon name="x" />
-          </button>
         </div>
-      {/each}
-      <button class="btn" on:click={addColumn}>
-        <Icon name="+" /> Add column
-      </button>
-      <button class="btn" on:click={addSuggestedColumns} disabled={!firstItem}>
-        <Icon name="zap" /> Add suggested columns
-      </button>
+      {:else if $views[activeViewKey].type === 'table'}
+        {#each $views[activeViewKey].columns as column, columnIndex}
+          <div class="column">
+            <label class="field">
+              <input type="text" use:input bind:value={column.key} placeholder="Column keypath" />
+            </label>
+            <button class="btn" type="button" on:click={() => addColumn(columnIndex)} title="Add column before this one">
+              <Icon name="+" />
+            </button>
+            <button class="btn" type="button" on:click={() => moveColumn(columnIndex, -1)} disabled={columnIndex === 0} title="Move column one position up">
+              <Icon name="chev-u" />
+            </button>
+            <button class="btn" type="button" on:click={() => moveColumn(columnIndex, 1)} disabled={columnIndex === $views[activeViewKey].columns.length - 1} title="Move column one position down">
+              <Icon name="chev-d" />
+            </button>
+            <button class="btn danger" type="button" on:click={() => removeColumn(columnIndex)} title="Remove this column">
+              <Icon name="x" />
+            </button>
+          </div>
+        {/each}
+        <button class="btn" on:click={addColumn}>
+          <Icon name="+" /> Add column
+        </button>
+        <button class="btn" on:click={addSuggestedColumns} disabled={!firstItem}>
+          <Icon name="zap" /> Add suggested columns
+        </button>
+      {/if}
     {/if}
   </div>
 </Modal>
@@ -105,9 +160,17 @@
     padding: 1rem;
   }
 
+  .meta {
+    display: grid;
+    grid-template: 1fr / 1fr 1fr;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+
   .flex {
     display: flex;
     gap: 0.5rem;
+    align-items: center;
   }
 
   .column {
diff --git a/frontend/src/organisms/connection/collection/find.svelte b/frontend/src/organisms/connection/collection/find.svelte
index 8eb6601..d6497a8 100644
--- a/frontend/src/organisms/connection/collection/find.svelte
+++ b/frontend/src/organisms/connection/collection/find.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { FindItems, Hosts, RemoveItemById, UpdateHost } from '../../../../wailsjs/go/app/App';
+  import { FindItems, RemoveItemById } from '../../../../wailsjs/go/app/App';
   import CodeExample from '../../../components/code-example.svelte';
   import { input } from '../../../actions';
   import ObjectGrid from '../../../components/objectgrid.svelte';
@@ -8,7 +8,7 @@
   import FindViewConfigModal from './find-viewconfig.svelte';
   import { onMount } from 'svelte';
   import Grid from '../../../components/grid.svelte';
-  import { applicationSettings } from '../../../stores';
+  import { applicationSettings, views } from '../../../stores';
 
   export let collection;
 
@@ -21,46 +21,18 @@
   };
 
   let form = { ...defaults };
-  let view = 'list';
+  let activeViewKey = 'list';
   let result = {};
   let submittedForm = {};
   let queryField;
   let activePath = [];
   let objectViewerData;
   let viewConfigModalOpen = false;
-  let viewConfig = {};
   $: code = `db.${collection.key}.find(${form.query || '{}'}${form.fields && form.fields !== '{}' ? `, ${form.fields}` : ''}).sort(${form.sort})${form.skip ? `.skip(${form.skip})` : ''}${form.limit ? `.limit(${form.limit})` : ''};`;
   $: lastPage = (submittedForm.limit && result?.results?.length) ? Math.max(0, Math.ceil((result.total - submittedForm.limit) / submittedForm.limit)) : 0;
   $: activePage = (submittedForm.limit && submittedForm.skip && result?.results?.length) ? submittedForm.skip / submittedForm.limit : 0;
 
   $: collection && refresh();
-  $: updateConfig(viewConfig);
-
-  async function getViewConfig() {
-    try {
-      const hosts = await Hosts();
-      viewConfig = hosts?.[collection.hostKey]?.databases?.[collection.dbKey]?.collections?.[collection.key]?.viewConfig || {};
-      console.log(hosts, viewConfig);
-    }
-    catch (e) {
-      console.error(e);
-    }
-  }
-
-  async function updateConfig(viewConfig) {
-    try {
-      const hosts = await Hosts();
-      hosts[collection.hostKey].databases = hosts[collection.hostKey].databases || {};
-      hosts[collection.hostKey].databases[collection.dbKey] = hosts[collection.hostKey].databases[collection.dbKey] || {};
-      hosts[collection.hostKey].databases[collection.dbKey].collections = hosts[collection.hostKey].databases[collection.dbKey].collections || {};
-      hosts[collection.hostKey].databases[collection.dbKey].collections[collection.key] = hosts[collection.hostKey].databases[collection.dbKey].collections[collection.key] || {};
-      hosts[collection.hostKey].databases[collection.dbKey].collections[collection.key].viewConfig = viewConfig;
-      await UpdateHost(collection.hostKey, JSON.stringify(hosts[collection.hostKey]));
-    }
-    catch (e) {
-      console.error(e);
-    }
-  }
 
   async function submitQuery() {
     activePath = [];
@@ -72,7 +44,6 @@
   }
 
   async function refresh() {
-    await getViewConfig();
     if ($applicationSettings.autosubmitQuery) {
       await submitQuery();
     }
@@ -121,10 +92,6 @@
     objectViewerData = item;
   }
 
-  function toggleView() {
-    view = view === 'table' ? 'list' : 'table';
-  }
-
   export function performQuery(q) {
     form = { ...defaults, ...q };
     submitQuery();
@@ -172,19 +139,19 @@
   <div class="result">
     <div class="grid">
       {#key result}
-        {#if view === 'table'}
+        {#if activeViewKey === 'table'}
           <Grid
             key="_id"
-            columns={viewConfig.columns?.map(c => ({ key: c.key, title: c.key })) || []}
+            columns={$views[activeViewKey]?.columns?.map(c => ({ key: c.key, title: c.key })) || []}
             showHeaders={true}
             items={result.results || []}
             bind:activePath
             on:trigger={e => openJson(e.detail?.itemKey)}
           />
-        {:else if view === 'list'}
+        {:else if activeViewKey === 'list'}
           <ObjectGrid
             data={result.results}
-            hideObjectIndicators={viewConfig?.hideObjectIndicators}
+            hideObjectIndicators={$views[activeViewKey]?.hideObjectIndicators}
             bind:activePath
             on:trigger={e => openJson(e.detail?.itemKey)}
           />
@@ -202,9 +169,6 @@
         <button class="btn" on:click={() => viewConfigModalOpen = true} title="Configure view">
           <Icon name="cog" />
         </button>
-        <button class="btn" on:click={toggleView} title="Toggle view">
-          <Icon name={view === 'table' ? 'list' : 'table'} />
-        </button>
         <button class="btn danger" on:click={removeActive} disabled={!activePath?.length} title="Drop selected item">
           <Icon name="-" />
         </button>
@@ -226,7 +190,12 @@
 </div>
 
 <ObjectViewer bind:data={objectViewerData} />
-<FindViewConfigModal bind:show={viewConfigModalOpen} activeView={view} bind:config={viewConfig} firstItem={result.results?.[0]} />
+<FindViewConfigModal
+  bind:show={viewConfigModalOpen}
+  bind:activeViewKey
+  firstItem={result.results?.[0]}
+  {collection}
+/>
 
 <datalist id="limits">
   {#each [ 1, 5, 10, 25, 50, 100, 200 ] as value}
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index e6b79a4..49ae2eb 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 import { Environment } from '../wailsjs/runtime/runtime';
-import { Settings, UpdateSettings } from '../wailsjs/go/app/App';
+import { Settings, UpdateSettings, UpdateViewStore, Views } from '../wailsjs/go/app/App';
 
 export const busy = (() => {
   const { update, subscribe } = writable(0);
@@ -63,3 +63,19 @@ export const environment = (() => {
   reload();
   return { reload, subscribe };
 })();
+
+export const views = (() => {
+  const { set, subscribe } = writable({});
+  const reload = async() => {
+    const newViewStore = await Views();
+    set(newViewStore);
+    return newViewStore;
+  };
+
+  reload();
+  subscribe(newViewStore => {
+    UpdateViewStore(JSON.stringify(newViewStore));
+  });
+
+  return { reload, set, subscribe };
+})();
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 251390f..c94a3f9 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -44,6 +44,13 @@ p strong {
   cursor: wait;
 }
 
+input:disabled,
+select:disabled {
+  cursor: not-allowed;
+  opacity: 1;
+  color: #444;
+}
+
 .field {
   display: flex;
   white-space: nowrap;
diff --git a/frontend/src/utils.js b/frontend/src/utils.js
index c36d6fc..41a8e4d 100644
--- a/frontend/src/utils.js
+++ b/frontend/src/utils.js
@@ -33,3 +33,18 @@ export function controlKeyDown(event) {
     return event?.ctrlKey;
   }
 }
+
+function randInt(min, max) {
+  return Math.round(Math.random() * (max - min) + min);
+}
+
+export function randomString(length = 12) {
+  const chars = 'qwertyuiopasdfghjklzxcvbnm1234567890';
+  let output = '';
+
+  Array(length).fill('').forEach(() => {
+    output += chars[randInt(0, chars.length - 1)];
+  });
+
+  return output;
+}
diff --git a/frontend/wailsjs/go/app/App.d.ts b/frontend/wailsjs/go/app/App.d.ts
index 903d449..25166fd 100755
--- a/frontend/wailsjs/go/app/App.d.ts
+++ b/frontend/wailsjs/go/app/App.d.ts
@@ -37,6 +37,8 @@ export function RemoveItemById(arg1:string,arg2:string,arg3:string,arg4:string):
 
 export function RemoveItems(arg1:string,arg2:string,arg3:string,arg4:string,arg5:boolean):Promise<number>;
 
+export function RemoveView(arg1:string):Promise<void>;
+
 export function RenameCollection(arg1:string,arg2:string,arg3:string,arg4:string):Promise<boolean>;
 
 export function Settings():Promise<app.Settings>;
@@ -48,3 +50,7 @@ export function UpdateHost(arg1:string,arg2:string):Promise<void>;
 export function UpdateItems(arg1:string,arg2:string,arg3:string,arg4:string):Promise<number>;
 
 export function UpdateSettings(arg1:string):Promise<app.Settings>;
+
+export function UpdateViewStore(arg1:string):Promise<void>;
+
+export function Views():Promise<app.ViewStore>;
diff --git a/frontend/wailsjs/go/app/App.js b/frontend/wailsjs/go/app/App.js
index f6f24c8..ec49617 100755
--- a/frontend/wailsjs/go/app/App.js
+++ b/frontend/wailsjs/go/app/App.js
@@ -66,6 +66,10 @@ export function RemoveItems(arg1, arg2, arg3, arg4, arg5) {
   return window['go']['app']['App']['RemoveItems'](arg1, arg2, arg3, arg4, arg5);
 }
 
+export function RemoveView(arg1) {
+  return window['go']['app']['App']['RemoveView'](arg1);
+}
+
 export function RenameCollection(arg1, arg2, arg3, arg4) {
   return window['go']['app']['App']['RenameCollection'](arg1, arg2, arg3, arg4);
 }
@@ -89,3 +93,11 @@ export function UpdateItems(arg1, arg2, arg3, arg4) {
 export function UpdateSettings(arg1) {
   return window['go']['app']['App']['UpdateSettings'](arg1);
 }
+
+export function UpdateViewStore(arg1) {
+  return window['go']['app']['App']['UpdateViewStore'](arg1);
+}
+
+export function Views() {
+  return window['go']['app']['App']['Views']();
+}
diff --git a/internal/app/collection_find_views.go b/internal/app/collection_find_views.go
new file mode 100644
index 0000000..4adbdbb
--- /dev/null
+++ b/internal/app/collection_find_views.go
@@ -0,0 +1,182 @@
+package app
+
+import (
+	"encoding/json"
+	"errors"
+	"fmt"
+	"io/ioutil"
+	"os"
+
+	"github.com/wailsapp/wails/v2/pkg/runtime"
+)
+
+type ViewType string
+
+const (
+	TableView ViewType = "table"
+	ListView  ViewType = "list"
+)
+
+type ViewColumn struct {
+	Key   string `json:"key"`
+	Width int64  `json:"width"`
+}
+
+type View struct {
+	Name                 string       `json:"name"`
+	Host                 string       `json:"host"`
+	Database             string       `json:"database"`
+	Collection           string       `json:"collection"`
+	Type                 ViewType     `json:"type"`
+	HideObjectIndicators bool         `json:"hideObjectIndicators"`
+	Columns              []ViewColumn `json:"columns"`
+}
+
+var BuiltInListView = View{
+	Name: "List",
+	Type: ListView,
+}
+
+type ViewStore map[string]View
+
+func updateViewStore(newData ViewStore) error {
+	filePath, err := appDataFilePath("views.json")
+	if err != nil {
+		return err
+	}
+
+	jsonData, err := json.MarshalIndent(newData, "", "\t")
+	if err != nil {
+		return err
+	}
+
+	err = ioutil.WriteFile(filePath, jsonData, os.ModePerm)
+	return err
+}
+
+func (a *App) Views() (ViewStore, error) {
+	views := make(ViewStore, 0)
+	filePath, err := appDataFilePath("views.json")
+	if err != nil {
+		fmt.Println(err.Error())
+		return views, err
+	}
+
+	jsonData, err := ioutil.ReadFile(filePath)
+	if err != nil {
+		// It's ok if the file cannot be opened, for example if it is not accessible.
+		// Therefore no error is returned.
+		fmt.Println(err.Error())
+		return views, nil
+	}
+
+	if len(jsonData) > 0 {
+		err = json.Unmarshal(jsonData, &views)
+		if err != nil {
+			fmt.Println(err.Error())
+			return nil, errors.New("views.json file contains malformatted JSON data")
+		}
+	}
+
+	views["list"] = BuiltInListView
+	return views, nil
+}
+
+// func (a *App) AddView(jsonData string) error {
+// 	views, err := a.Views()
+// 	if err != nil {
+// 		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
+// 			Type:  runtime.InfoDialog,
+// 			Title: "Could not retrieve views",
+// 		})
+// 		return errors.New("could not retrieve existing view store")
+// 	}
+
+// 	var newView View
+// 	err = json.Unmarshal([]byte(jsonData), &newView)
+// 	if err != nil {
+// 		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
+// 			Type:  runtime.InfoDialog,
+// 			Title: "Malformed JSON",
+// 		})
+// 		return errors.New("invalid JSON")
+// 	}
+
+// 	id, err := uuid.NewRandom()
+// 	if err != nil {
+// 		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
+// 			Type:  runtime.InfoDialog,
+// 			Title: "Failed to generate a UUID",
+// 		})
+// 		return errors.New("could not generate a UUID")
+// 	}
+
+// 	views[id.String()] = newView
+// 	err = updateViewStore(views)
+// 	if err != nil {
+// 		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
+// 			Type:  runtime.InfoDialog,
+// 			Title: "Could not update view store",
+// 		})
+// 		return errors.New("could not update view store")
+// 	}
+
+// 	return nil
+// }
+
+func (a *App) UpdateViewStore(jsonData string) error {
+	var viewStore ViewStore
+	err := json.Unmarshal([]byte(jsonData), &viewStore)
+	if err != nil {
+		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
+			Type:  runtime.InfoDialog,
+			Title: "Malformed JSON",
+		})
+		return errors.New("invalid JSON")
+	}
+
+	err = updateViewStore(viewStore)
+	if err != nil {
+		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
+			Type:  runtime.InfoDialog,
+			Title: "Could not update view store",
+		})
+		return errors.New("could not update view store")
+	}
+
+	return nil
+}
+
+func (a *App) RemoveView(viewKey string) error {
+	views, err := a.Views()
+	if err != nil {
+		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
+			Type:  runtime.InfoDialog,
+			Title: "Could not retrieve views",
+		})
+		return errors.New("could not retrieve existing view store")
+	}
+
+	sure, _ := runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
+		Title:         "Confirm",
+		Message:       "Are you sure you want to remove " + views[viewKey].Name + "?",
+		Buttons:       []string{"Yes", "No"},
+		DefaultButton: "Yes",
+		CancelButton:  "No",
+	})
+	if sure != "Yes" {
+		return errors.New("operation aborted")
+	}
+
+	delete(views, viewKey)
+	err = updateViewStore(views)
+
+	if err != nil {
+		runtime.MessageDialog(a.ctx, runtime.MessageDialogOptions{
+			Type:  runtime.InfoDialog,
+			Title: "Could not update view store",
+		})
+		return errors.New("could not update view store")
+	}
+	return nil
+}
diff --git a/internal/app/hosts.go b/internal/app/hosts.go
index fc9b9ea..583df98 100644
--- a/internal/app/hosts.go
+++ b/internal/app/hosts.go
@@ -12,19 +12,8 @@ import (
 )
 
 type Host struct {
-	Name      string `json:"name"`
-	URI       string `json:"uri"`
-	Databases map[string]struct {
-		Collections map[string]struct {
-			ViewConfig struct {
-				HideObjectIndicators bool `json:"hideObjectIndicators"`
-				Columns              []struct {
-					Key   string `json:"key"`
-					Width int64  `json:"width"`
-				} `json:"columns"`
-			} `json:"viewConfig"`
-		} `json:"collections"`
-	} `json:"databases"`
+	Name string `json:"name"`
+	URI  string `json:"uri"`
 }
 
 func updateHostsFile(newData map[string]Host) error {