From 19ba9dc16dcd4254ddd98fe3bee0a052ada2fb8e Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 15:31:42 +0100
Subject: [PATCH 01/98] :globe_with_meridians: Remove the word 'Open' from
 context menu

---
 src/assets/locales/en.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index ebda9dfa8..10424e019 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -164,9 +164,9 @@
     "restore-success-msg": "Config Restored Successfully"
   },
   "menu": {
-    "sametab": "Open in Current Tab",
-    "newtab": "Open in New Tab",
-    "modal": "Open in Pop-Up Modal",
-    "workspace": "Open in Workspace View"
+    "sametab": "Current Tab",
+    "newtab": "New Tab",
+    "modal": "Pop-Up Modal",
+    "workspace": "Workspace View"
   }
 }
\ No newline at end of file

From b9b9c3071312424c6bb52331b87178481a549192 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 15:32:18 +0100
Subject: [PATCH 02/98] :construction: Lays ground-work for the Edit Item modal
 form

---
 src/components/InteractiveEditor/EditItem.vue | 44 +++++++++++++++++++
 .../InteractiveEditor/EditSection.vue         | 23 ++++++++++
 src/components/LinkItems/ContextMenu.vue      | 37 +++++++++++-----
 src/components/LinkItems/Item.vue             | 19 ++++++--
 src/utils/defaults.js                         |  3 +-
 5 files changed, 111 insertions(+), 15 deletions(-)
 create mode 100644 src/components/InteractiveEditor/EditItem.vue
 create mode 100644 src/components/InteractiveEditor/EditSection.vue

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
new file mode 100644
index 000000000..5849a1f40
--- /dev/null
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -0,0 +1,44 @@
+<template>
+  <modal
+    :name="modalName"
+    :resizable="true"
+    width="55%"
+    height="80%"
+    classes="dashy-modal edit-item"
+    @closed="modalClosed"
+  >
+  <span>Item Editor</span>
+  <input />
+  </modal>
+</template>
+
+<script>
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+
+export default {
+  name: 'EditItem',
+  data() {
+    return {
+      modalName: modalNames.EDIT_ITEM,
+    };
+  },
+  props: {},
+  computed: {},
+  components: {},
+  mounted() {
+    this.$modal.show(modalNames.EDIT_ITEM);
+  },
+  methods: {
+    modalClosed() {
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+
+</style>
diff --git a/src/components/InteractiveEditor/EditSection.vue b/src/components/InteractiveEditor/EditSection.vue
new file mode 100644
index 000000000..30eeb917a
--- /dev/null
+++ b/src/components/InteractiveEditor/EditSection.vue
@@ -0,0 +1,23 @@
+<template>
+  <span>Item Editor</span>
+</template>
+
+<script>
+
+export default {
+  name: 'EditSection',
+  data() {
+    return {};
+  },
+  props: {},
+  computed: {},
+  components: {},
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+
+</style>
diff --git a/src/components/LinkItems/ContextMenu.vue b/src/components/LinkItems/ContextMenu.vue
index 4d66e2e31..09356a93a 100644
--- a/src/components/LinkItems/ContextMenu.vue
+++ b/src/components/LinkItems/ContextMenu.vue
@@ -1,8 +1,9 @@
 <template>
   <transition name="slide">
-    <div class="context-menu" v-if="show && !isMenuDisabled()"
+    <div class="context-menu" v-if="show && !isMenuDisabled"
       :style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
-      <ul>
+      <ul class="menu-section">
+        <li class="section-title">Open In</li>
         <li @click="launch('sametab')">
           <SameTabOpenIcon />
           <span>{{ $t('menu.sametab') }}</span>
@@ -20,12 +21,20 @@
           <span>{{ $t('menu.workspace') }}</span>
         </li>
       </ul>
+      <ul class="menu-section">
+        <li class="section-title">Options</li>
+        <li @click="openSettings()">
+          <EditIcon />
+          <span>Edit</span>
+        </li>
+      </ul>
     </div>
   </transition>
 </template>
 
 <script>
 // Import icons for each element
+import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
 import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
 import NewTabOpenIcon from '@/assets/interface-icons/open-new-tab.svg';
 import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg';
@@ -34,6 +43,7 @@ import WorkspaceOpenIcon from '@/assets/interface-icons/open-workspace.svg';
 export default {
   name: 'ContextMenu',
   components: {
+    EditIcon,
     SameTabOpenIcon,
     NewTabOpenIcon,
     IframeOpenIcon,
@@ -45,19 +55,18 @@ export default {
     show: Boolean, // Should show or hide the menu
   },
   computed: {
-    appConfig() {
-      return this.$store.getters.appConfig;
+    isMenuDisabled() {
+      return !!this.$store.getters.appConfig.disableContextMenu;
     },
   },
   methods: {
     /* Called on item click, emits an event up to Item */
     /* in order to launch the current app to a given target */
     launch(target) {
-      this.$emit('contextItemClick', target);
+      this.$emit('launchItem', target);
     },
-    /* Checks if the user as disabled context menu in config */
-    isMenuDisabled() {
-      return !!this.appConfig.disableContextMenu;
+    openSettings() {
+      this.$emit('openItemSettings');
     },
   },
 };
@@ -77,10 +86,13 @@ div.context-menu {
   box-shadow: var(--context-menu-shadow);
   opacity: 0.98;
 
-  ul {
+  ul.menu-section {
     list-style-type: none;
     margin: 0;
     padding: 0;
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--context-menu-color);
+    }
     li {
       cursor: pointer;
       padding: 0.5rem 1rem;
@@ -90,9 +102,14 @@ div.context-menu {
       &:not(:last-child) {
         border-bottom: 1px solid var(--context-menu-secondary-color);
       }
-      &:hover {
+      &:hover:not(.section-title) {
         background: var(--context-menu-secondary-color);
       }
+      &.section-title {
+        cursor: default;
+        font-weight: bold;
+        justify-content: center;
+      }
       svg {
         width: 1rem;
          margin-right: 0.5rem;
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 9c6a5a98e..d2c903094 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -37,8 +37,10 @@
       :posX="contextPos.posX"
       :posY="contextPos.posY"
       :id="`context-menu-${id}`"
-      @contextItemClick="contextItemClick"
+      @launchItem="launchItem"
+      @openItemSettings="openItemSettings"
     />
+    <EditItem v-if="editMenuOpen" />
   </div>
 </template>
 
@@ -48,8 +50,10 @@ import router from '@/router';
 import Icon from '@/components/LinkItems/ItemIcon.vue';
 import ItemOpenMethodIcon from '@/components/LinkItems/ItemOpenMethodIcon';
 import StatusIndicator from '@/components/LinkItems/StatusIndicator';
+import EditItem from '@/components/InteractiveEditor/EditItem';
 import ContextMenu from '@/components/LinkItems/ContextMenu';
-import { localStorageKeys, serviceEndpoints } from '@/utils/defaults';
+import StoreKeys from '@/utils/StoreMutations';
+import { localStorageKeys, serviceEndpoints, modalNames } from '@/utils/defaults';
 
 export default {
   name: 'Item',
@@ -94,6 +98,7 @@ export default {
         posX: undefined,
         posY: undefined,
       },
+      editMenuOpen: false,
     };
   },
   components: {
@@ -101,6 +106,7 @@ export default {
     ItemOpenMethodIcon,
     StatusIndicator,
     ContextMenu,
+    EditItem,
   },
   methods: {
     /* Called when an item is clicked, manages the opening of modal & resets the search field */
@@ -194,7 +200,7 @@ export default {
         });
     },
     /* Handle navigation options from the context menu */
-    contextItemClick(method) {
+    launchItem(method) {
       const { url } = this;
       this.contextMenuOpen = false;
       switch (method) {
@@ -213,6 +219,13 @@ export default {
         default: window.open(url, '_blank');
       }
     },
+    /* Open the Edit Item moal form */
+    openItemSettings() {
+      this.editMenuOpen = true;
+      this.contextMenuOpen = false;
+      this.$modal.show(modalNames.EDIT_ITEM);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
     /* Used for smart-sort when sorting items by most used apps */
     incrementMostUsedCount(itemId) {
       const mostUsed = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}');
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 1bfe09c4b..a3d5f44e0 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -119,11 +119,10 @@ module.exports = {
   /* Unique IDs of modals within the app */
   modalNames: {
     CONF_EDITOR: 'CONF_EDITOR',
-    CLOUD_BACKUP: 'CLOUD_BACKUP',
     REBUILD_APP: 'REBUILD_APP',
-    THEME_MAKER: 'THEME_MAKER',
     ABOUT_APP: 'ABOUT_APP',
     LANG_SWITCHER: 'LANG_SWITCHER',
+    EDIT_ITEM: 'EDIT_ITEM',
   },
   /* Key names for the top-level objects in conf.yml */
   topLevelConfKeys: {

From 8c3a8e996f6d1a88ad574ef287b9abd92f295c27 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 15:34:16 +0100
Subject: [PATCH 03/98] :wrench: Support history-mode routing on Netlify

---
 netlify.toml | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/netlify.toml b/netlify.toml
index 79c7438a7..d0b608978 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -16,6 +16,12 @@
   STATUSKIT_SUPPORT_CONTACT_LINK = "https://github.com/lissy93/dashy"
   STATUSKIT_RESOURCES_LINK = "https://dashy.to/docs"
 
+# For router history mode, ensure pages land on index
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
 # Redirect the Node endpoints to serverless functions
 [[redirects]]
   from = "/status-check"

From 7a817c17d4284b8c037a9aad9880efe879b81ef0 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 16:41:10 +0100
Subject: [PATCH 04/98] :zap: Generate and append a unique ID to each item

---
 src/components/LinkItems/Section.vue | 16 +++++-----------
 src/utils/ConfigAccumalator.js       | 13 ++++++++++---
 src/utils/MiscHelpers.js             | 20 ++++++++++++++++++++
 3 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index ee4da0dc9..1e2da1350 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -17,9 +17,9 @@
       :style="gridStyle"
     >
       <Item
-        v-for="(item, index) in sortedItems"
-        :id="makeId(title, item.title, index)"
-        :key="makeId(title, item.title, index)"
+        v-for="(item) in sortedItems"
+        :id="item.id"
+        :key="item.id"
         :url="item.url"
         :title="item.title"
         :description="item.description"
@@ -115,12 +115,6 @@ export default {
     },
   },
   methods: {
-    /* Returns a unique lowercase string, based on name, for section ID */
-    makeId(sectionStr, itemStr, index) {
-      const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
-      const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
-      return `${index}_${charSum}_${itemTitleStr}`;
-    },
     /* Opens the iframe modal */
     triggerModal(url) {
       this.$refs[`iframeModal-${this.groupId}`].show(url);
@@ -145,14 +139,14 @@ export default {
     /* Sorts items by most used to least used, based on click-count */
     sortByMostUsed(items) {
       const usageCount = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}');
-      const gmu = (item) => usageCount[this.makeId(this.title, item.title)] || 0;
+      const gmu = (item) => usageCount[item.id] || 0;
       items.reverse().sort((a, b) => (gmu(a) < gmu(b) ? 1 : -1));
       return items;
     },
     /* Sorts items by most recently used */
     sortBLastUsed(items) {
       const usageCount = JSON.parse(localStorage.getItem(localStorageKeys.LAST_USED) || '{}');
-      const glu = (item) => usageCount[this.makeId(this.title, item.title)] || 0;
+      const glu = (item) => usageCount[item.id] || 0;
       items.reverse().sort((a, b) => (glu(a) < glu(b) ? 1 : -1));
       return items;
     },
diff --git a/src/utils/ConfigAccumalator.js b/src/utils/ConfigAccumalator.js
index ca6bc0757..041306e9b 100644
--- a/src/utils/ConfigAccumalator.js
+++ b/src/utils/ConfigAccumalator.js
@@ -13,6 +13,7 @@ import {
   layout as defaultLayout,
 } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
+import { applyItemId } from '@/utils/MiscHelpers';
 import conf from '../../public/conf.yml';
 
 export default class ConfigAccumulator {
@@ -57,18 +58,24 @@ export default class ConfigAccumulator {
 
   /* Sections */
   sections() {
+    let sections = [];
     // If the user has stored sections in local storage, return those
     const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
     if (localSections) {
       try {
         const json = JSON.parse(localSections);
-        if (json.length >= 1) return json;
+        if (json.length >= 1) sections = json;
       } catch (e) {
         ErrorHandler('Malformed section data in local storage');
       }
     }
-    // If the function hasn't yet returned, then return the config file sections
-    return this.conf ? this.conf.sections || [] : [];
+    // If sections were not set from local data, then use config file instead
+    if (sections.length === 0) {
+      sections = this.conf ? this.conf.sections || [] : [];
+    }
+    // Apply a unique ID to each item
+    sections = applyItemId(sections);
+    return sections;
   }
 
   /* Complete config */
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index d5233e547..ac98566f4 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -25,3 +25,23 @@ export const sanitize = (string) => {
   const reg = /[&<>"'/]/ig;
   return string.replace(reg, (match) => (map[match]));
 };
+
+/* Based on section title, item name and index, return a string value for ID */
+const makeItemId = (sectionStr, itemStr, index) => {
+  const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
+  const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
+  return `${index}_${charSum}_${itemTitleStr}`;
+};
+
+/* Given an array of sections, apply a unique ID to each item, and return modified array */
+export const applyItemId = (inputSections) => {
+  const sections = inputSections || [];
+  sections.forEach((sec, secIdx) => {
+    if (sec.items) {
+      sec.items.forEach((item, itemIdx) => {
+        sections[secIdx].items[itemIdx].id = makeItemId(sec.name, item.title, itemIdx);
+      });
+    }
+  });
+  return sections;
+};

From 36cea32ee59d277871087d7804eae314872ccbfc Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 20:31:43 +0100
Subject: [PATCH 05/98] :alien: Add getter to return specific item

---
 src/store.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/store.js b/src/store.js
index 306c80ef6..2b2ce518a 100644
--- a/src/store.js
+++ b/src/store.js
@@ -35,6 +35,14 @@ const store = new Vuex.Store({
     visibleComponents(state, getters) {
       return componentVisibility(getters.appConfig);
     },
+    getItemById: (state, getters) => (id) => {
+      let item;
+      getters.sections.forEach(sec => {
+        const foundItem = sec.items.find((itm) => itm.id === id);
+        if (foundItem) item = foundItem;
+      });
+      return item;
+    },
   },
   mutations: {
     [UPDATE_CONFIG](state, config) {

From 716bb7419aec5a5ffa5f1be52bd96b57d9f052ae Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 20:33:18 +0100
Subject: [PATCH 06/98] :paperclip: Adds option for description by input

---
 src/components/FormElements/Input.vue | 37 ++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/FormElements/Input.vue b/src/components/FormElements/Input.vue
index 1fd2678c1..1ddc9df85 100644
--- a/src/components/FormElements/Input.vue
+++ b/src/components/FormElements/Input.vue
@@ -1,6 +1,12 @@
 <template>
   <div :class="`input-container ${layout}`">
-    <label v-if="label" for="name">{{label}}</label>
+    <label
+      v-if="label"
+      for="name"
+      class="input-label"
+    >
+      {{label}}
+    </label>
     <input
       :type="type"
       :value="value"
@@ -8,7 +14,14 @@
       :name="name"
       :id="name"
       :placeholder="placeholder"
+      class="input-field"
     />
+    <p
+      v-if="description"
+      class="input-description"
+    >
+    {{ description }}
+    </p>
   </div>
 </template>
 
@@ -21,6 +34,7 @@ export default {
     label: String, // An optional label to display above
     name: String, // Required unique ID value, for accessibility
     placeholder: String, // Optional placeholder value
+    description: String, // Optional info paragraph
     type: {
       default: 'text', // Input type, e.g. text, password, number
       type: String,
@@ -50,10 +64,19 @@ div.input-container {
   &.horizontal {
     flex-direction: row;
     justify-content: space-between;
-    label { margin-right: 0.25rem; }
+    align-items: center;
+    label.input-label,
+    input.input-field,
+    p.input-description {
+      margin: 0.25rem;
+      flex-basis: 8rem;
+      flex-grow: 1;
+    }
+    input.input-field { flex-grow: 2; }
+    p.input-description { flex-grow: 3; }
   }
 
-  input {
+  input.input-field {
     min-width: 10rem;
     padding: 0.5rem 0.75rem;
     margin: 0.5rem auto;
@@ -68,6 +91,14 @@ div.input-container {
       outline: none;
     }
   }
+
+  label.input-label {
+    text-transform: capitalize;
+  }
+
+  p.input-description {
+    opacity: var(--dimming-factor);
+  }
 }
 
 </style>

From 677f0eea4ef72c807f24a15271a045792e9402bd Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 20:34:31 +0100
Subject: [PATCH 07/98] :construction: Able to display form data from schema

---
 src/components/InteractiveEditor/EditItem.vue | 65 +++++++++++++++++--
 src/components/LinkItems/Item.vue             |  8 ++-
 2 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index 5849a1f40..a35b0ff9b 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -2,18 +2,29 @@
   <modal
     :name="modalName"
     :resizable="true"
-    width="55%"
-    height="80%"
+    width="50%"
+    height="50%"
     classes="dashy-modal edit-item"
     @closed="modalClosed"
   >
-  <span>Item Editor</span>
-  <input />
+  <h3>Edit Item</h3>
+  <form>
+    <div class="row" v-for="row in formData" :key="row.name">
+      <Input
+        :label="row.name"
+        :value="row.value"
+        :description="row.description"
+        layout="horizontal"
+        />
+    </div>
+  </form>
   </modal>
 </template>
 
 <script>
+import Input from '@/components/FormElements/Input';
 import StoreKeys from '@/utils/StoreMutations';
+import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
 
 export default {
@@ -21,24 +32,64 @@ export default {
   data() {
     return {
       modalName: modalNames.EDIT_ITEM,
+      schema: DashySchema.properties.sections.items.properties.items.items.properties,
+      formData: [],
+      item: {},
     };
   },
-  props: {},
+  props: {
+    itemId: String,
+  },
   computed: {},
-  components: {},
+  components: {
+    Input,
+  },
   mounted() {
+    this.item = this.getItemFromState(this.itemId);
+    this.formData = this.makeInitialFormData();
     this.$modal.show(modalNames.EDIT_ITEM);
   },
   methods: {
+    makeInitialFormData() {
+      const formData = [];
+      Object.keys(this.schema).forEach((property) => {
+        if (this.item[property]) {
+          formData.push({
+            name: property,
+            description: this.schema[property].description,
+            value: this.item[property] || '',
+          });
+        }
+      });
+      return formData;
+    },
+    getItemFromState(id) {
+      return this.$store.getters.getItemById(id);
+    },
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+      this.$emit('closeEditMenu');
     },
   },
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import '@/styles/style-helpers.scss';
 @import '@/styles/media-queries.scss';
 
+.edit-item {
+  padding: 1rem;
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+  height: 100%;
+  overflow-y: auto;
+  .row {
+    padding: 0.5rem 0.25rem;
+    &:not(:last-child) {
+      border-bottom: 1px dotted var(--config-settings-color);
+    }
+  }
+}
+
 </style>
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index d2c903094..e499ac49a 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -40,7 +40,7 @@
       @launchItem="launchItem"
       @openItemSettings="openItemSettings"
     />
-    <EditItem v-if="editMenuOpen" />
+    <EditItem v-if="editMenuOpen" :itemId="id" @closeEditMenu="closeEditMenu" />
   </div>
 </template>
 
@@ -226,6 +226,10 @@ export default {
       this.$modal.show(modalNames.EDIT_ITEM);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
     },
+    /* Ensure conditional is updated, once menu closed */
+    closeEditMenu() {
+      this.editMenuOpen = false;
+    },
     /* Used for smart-sort when sorting items by most used apps */
     incrementMostUsedCount(itemId) {
       const mostUsed = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}');
@@ -298,7 +302,7 @@ export default {
 /* Text in tile */
 .tile-title {
   white-space: nowrap;
-  overflow: hidden;
+  // overflow: hidden;
   text-overflow: ellipsis;
   min-width: 120px;
   height: 30px;

From f1fc013457cfdae844dea825e403e1bd8c8d6e7b Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 21:03:26 +0100
Subject: [PATCH 08/98] :construction: You can now save items to VueX store,
 neat!

---
 src/components/InteractiveEditor/EditItem.vue | 24 ++++++++++++++-----
 src/store.js                                  | 19 ++++++++++++++-
 src/utils/StoreMutations.js                   |  1 +
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index a35b0ff9b..d248aee99 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -7,22 +7,22 @@
     classes="dashy-modal edit-item"
     @closed="modalClosed"
   >
-  <h3>Edit Item</h3>
-  <form>
-    <div class="row" v-for="row in formData" :key="row.name">
+    <h3>Edit Item</h3>
+    <div class="row" v-for="(row, index) in formData" :key="row.name">
       <Input
-        :label="row.name"
-        :value="row.value"
+        v-model="formData[index].value"
         :description="row.description"
+        :label="row.name"
         layout="horizontal"
         />
     </div>
-  </form>
+    <Button :click="saveItem">Save</Button>
   </modal>
 </template>
 
 <script>
 import Input from '@/components/FormElements/Input';
+import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
@@ -43,6 +43,7 @@ export default {
   computed: {},
   components: {
     Input,
+    Button,
   },
   mounted() {
     this.item = this.getItemFromState(this.itemId);
@@ -66,6 +67,13 @@ export default {
     getItemFromState(id) {
       return this.$store.getters.getItemById(id);
     },
+    saveItem() {
+      const newItem = {};
+      this.formData.forEach((row) => {
+        newItem[row.name] = row.value;
+      });
+      this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+    },
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$emit('closeEditMenu');
@@ -89,6 +97,10 @@ export default {
     &:not(:last-child) {
       border-bottom: 1px dotted var(--config-settings-color);
     }
+    .input-container input.input-field {
+      font-size: 1rem;
+      padding: 0.35rem 0.5rem;
+    }
   }
 }
 
diff --git a/src/store.js b/src/store.js
index 2b2ce518a..dd05f8ef1 100644
--- a/src/store.js
+++ b/src/store.js
@@ -8,7 +8,12 @@ import filterUserSections from '@/utils/CheckSectionVisibility';
 
 Vue.use(Vuex);
 
-const { UPDATE_CONFIG, SET_MODAL_OPEN, SET_LANGUAGE } = Keys;
+const {
+  UPDATE_CONFIG,
+  SET_MODAL_OPEN,
+  SET_LANGUAGE,
+  UPDATE_ITEM,
+} = Keys;
 
 const store = new Vuex.Store({
   state: {
@@ -54,6 +59,18 @@ const store = new Vuex.Store({
     [SET_MODAL_OPEN](state, modalOpen) {
       state.modalOpen = modalOpen;
     },
+    [UPDATE_ITEM](state, payload) {
+      const { itemId, newItem } = payload;
+      const newConfig = state.config;
+      newConfig.sections.forEach((section, secIndex) => {
+        section.items.forEach((item, itemIndex) => {
+          if (item.id === itemId) {
+            newConfig.sections[secIndex].items[itemIndex] = newItem;
+          }
+        });
+      });
+      state.config = newConfig;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index f5ab815fb..4e742276b 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -3,6 +3,7 @@ const KEY_NAMES = [
   'UPDATE_CONFIG',
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',
+  'UPDATE_ITEM',
 ];
 
 // Convert array of key names into an object, and export

From 532d5e1b2232bdcc787e5a101bac15c5cd70194b Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 21:32:54 +0100
Subject: [PATCH 09/98] :memo: Adds solutions for when config not updating

---
 docs/troubleshooting.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
index aed8cf7f8..2655d6af9 100644
--- a/docs/troubleshooting.md
+++ b/docs/troubleshooting.md
@@ -78,6 +78,18 @@ auth:
 
 ---
 
+## Config Not Updating
+
+Dashy has the option to save settings and config locally, in browser storage. Anything here will take precedence over whatever is in your config file, sometimes with unintended consequences. If you've updated the config file manually, and are not seeing changes reflected in the UI, then try visiting the site in Incognito mode. If that works, then the solution is just to clear local storage. This can be done from the config menu, under "Clear Local Settings".
+
+---
+
+## Config Still not Updating
+
+Sometimes your text editor updates files [inode](https://linuxhandbook.com/inode-linux/), meaning changes will not be picked up by the Docker container. This [article](https://medium.com/@jonsbun/why-need-to-be-careful-when-mounting-single-files-into-a-docker-container-4f929340834) explains things further.
+
+---
+
 ## DockerHub `toomanyrequests`
 
 This situation relates to error messages similar to one of the following, returned when pulling, updating or running the Docker container from Docker Hub.

From b1e7ce22ddba641398fc6b6e223c0e9be6071e45 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 21:55:28 +0100
Subject: [PATCH 10/98] :construction: You can now add more items, neat!

---
 src/components/InteractiveEditor/EditItem.vue | 76 +++++++++++++++++--
 1 file changed, 69 insertions(+), 7 deletions(-)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index d248aee99..0a2a3a817 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -7,15 +7,29 @@
     classes="dashy-modal edit-item"
     @closed="modalClosed"
   >
-    <h3>Edit Item</h3>
+    <h3 class="title">Edit Item</h3>
+    <p class="sub-title">Editing {{item.title}} (ID: {{itemId}})</p>
     <div class="row" v-for="(row, index) in formData" :key="row.name">
       <Input
         v-model="formData[index].value"
         :description="row.description"
         :label="row.name"
+        :type="row.type"
         layout="horizontal"
         />
     </div>
+    <div class="add-more-inputs">
+      <h4>More Fields</h4>
+      <div class="more-fields">
+        <span
+          v-for="row in additionalFormData"
+          :key="row.name"
+          @click="() => appendNewField(row.name)"
+          class="add-field-tag">
+          ➕ {{ row.name }}
+        </span>
+      </div>
+    </div>
     <Button :click="saveItem">Save</Button>
   </modal>
 </template>
@@ -34,6 +48,7 @@ export default {
       modalName: modalNames.EDIT_ITEM,
       schema: DashySchema.properties.sections.items.properties.items.items.properties,
       formData: [],
+      additionalFormData: [],
       item: {},
     };
   },
@@ -53,13 +68,20 @@ export default {
   methods: {
     makeInitialFormData() {
       const formData = [];
+      const requiredFields = ['title', 'description', 'url', 'icon', 'target', 'hotkey', 'provider', 'tags'];
+      const acceptedTypes = ['text', 'number'];
+      const getType = (origType) => (acceptedTypes.includes(origType) ? origType : 'text');
       Object.keys(this.schema).forEach((property) => {
-        if (this.item[property]) {
-          formData.push({
-            name: property,
-            description: this.schema[property].description,
-            value: this.item[property] || '',
-          });
+        const singleRow = {
+          name: property,
+          description: this.schema[property].description,
+          value: this.item[property] || '',
+          type: getType(this.schema[property].type),
+        };
+        if (this.item[property] || requiredFields.includes(property)) {
+          formData.push(singleRow);
+        } else {
+          this.additionalFormData.push(singleRow);
         }
       });
       return formData;
@@ -72,8 +94,21 @@ export default {
       this.formData.forEach((row) => {
         newItem[row.name] = row.value;
       });
+      newItem.id = this.itemId;
       this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
     },
+    appendNewField(filedId) {
+      Object.keys(this.schema).forEach((property) => {
+        if (property === filedId) {
+          this.formData.push({
+            name: property,
+            description: this.schema[property].description,
+            value: this.item[property] || '',
+            type: 'text',
+          });
+        }
+      });
+    },
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$emit('closeEditMenu');
@@ -92,6 +127,16 @@ export default {
   color: var(--config-settings-color);
   height: 100%;
   overflow-y: auto;
+  h3.title {
+    font-size: 1.2rem;
+    margin: 0.25rem 0;
+  }
+  p.sub-title {
+    margin: 0.25rem 0;
+    font-size: 0.8rem;
+    font-style: italic;
+    opacity: var(--dimming-factor);
+  }
   .row {
     padding: 0.5rem 0.25rem;
     &:not(:last-child) {
@@ -102,6 +147,23 @@ export default {
       padding: 0.35rem 0.5rem;
     }
   }
+  .more-fields {
+    display: flex;
+    flex-wrap: wrap;
+    .add-field-tag {
+      margin: 0.2rem;
+      padding: 0.2rem 0.5rem;;
+      min-width: 2rem;
+      cursor: pointer;
+      text-align: center;
+      border: 1px solid var(--config-settings-color);
+      border-radius: var(--curve-factor);
+      &:hover {
+        background: var(--config-settings-color);
+        color: var(--config-settings-background);
+      }
+    }
+  }
 }
 
 </style>

From 6ef202337eb17f4bc14411da2b686969c1e8413c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 16 Oct 2021 22:27:16 +0100
Subject: [PATCH 11/98] :bento: Adds icons for add + remove fields

---
 .../interactive-editor-add.svg                |  1 +
 .../interactive-editor-remove.svg             |  1 +
 src/components/InteractiveEditor/EditItem.vue | 33 +++++++++++++++----
 3 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/interface-icons/interactive-editor-add.svg
 create mode 100644 src/assets/interface-icons/interactive-editor-remove.svg

diff --git a/src/assets/interface-icons/interactive-editor-add.svg b/src/assets/interface-icons/interactive-editor-add.svg
new file mode 100644
index 000000000..bfa907d9f
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-add.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" class="svg-inline--fa fa-plus fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/interactive-editor-remove.svg b/src/assets/interface-icons/interactive-editor-remove.svg
new file mode 100644
index 000000000..500af9cb8
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-remove.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="trash-alt" class="svg-inline--fa fa-trash-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"></path></svg>
\ No newline at end of file
diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index 0a2a3a817..765072573 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -17,6 +17,7 @@
         :type="row.type"
         layout="horizontal"
         />
+        <BinIcon />
     </div>
     <div class="add-more-inputs">
       <h4>More Fields</h4>
@@ -26,7 +27,7 @@
           :key="row.name"
           @click="() => appendNewField(row.name)"
           class="add-field-tag">
-          ➕ {{ row.name }}
+          <AddIcon /> {{ row.name }}
         </span>
       </div>
     </div>
@@ -37,6 +38,8 @@
 <script>
 import Input from '@/components/FormElements/Input';
 import Button from '@/components/FormElements/Button';
+import AddIcon from '@/assets/interface-icons/interactive-editor-add.svg';
+import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
 import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
@@ -59,6 +62,8 @@ export default {
   components: {
     Input,
     Button,
+    AddIcon,
+    BinIcon,
   },
   mounted() {
     this.item = this.getItemFromState(this.itemId);
@@ -69,7 +74,7 @@ export default {
     makeInitialFormData() {
       const formData = [];
       const requiredFields = ['title', 'description', 'url', 'icon', 'target', 'hotkey', 'provider', 'tags'];
-      const acceptedTypes = ['text', 'number'];
+      const acceptedTypes = ['text'];
       const getType = (origType) => (acceptedTypes.includes(origType) ? origType : 'text');
       Object.keys(this.schema).forEach((property) => {
         const singleRow = {
@@ -109,6 +114,7 @@ export default {
         }
       });
     },
+    // removeSomeField(filedId) {},
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$emit('closeEditMenu');
@@ -127,6 +133,7 @@ export default {
   color: var(--config-settings-color);
   height: 100%;
   overflow-y: auto;
+  @extend .svg-button;
   h3.title {
     font-size: 1.2rem;
     margin: 0.25rem 0;
@@ -138,22 +145,28 @@ export default {
     opacity: var(--dimming-factor);
   }
   .row {
+    display: flex;
     padding: 0.5rem 0.25rem;
     &:not(:last-child) {
       border-bottom: 1px dotted var(--config-settings-color);
     }
-    .input-container input.input-field {
-      font-size: 1rem;
-      padding: 0.35rem 0.5rem;
+    .input-container {
+        width: 100%;
+        input.input-field {
+        font-size: 1rem;
+        padding: 0.35rem 0.5rem;
+      }
     }
   }
   .more-fields {
     display: flex;
     flex-wrap: wrap;
-    .add-field-tag {
+    span.add-field-tag {
       margin: 0.2rem;
       padding: 0.2rem 0.5rem;;
       min-width: 2rem;
+      display: flex;
+      align-items: center;
       cursor: pointer;
       text-align: center;
       border: 1px solid var(--config-settings-color);
@@ -161,6 +174,14 @@ export default {
       &:hover {
         background: var(--config-settings-color);
         color: var(--config-settings-background);
+        svg {
+          background: var(--config-settings-color);
+          path { fill: var(--config-settings-background); }
+        }
+      }
+      svg {
+        margin-right: 0.25rem;
+        border: none;
       }
     }
   }

From 307d3719aa366c9960f349a980c6c5e4a970699c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 17 Oct 2021 14:41:42 +0100
Subject: [PATCH 12/98] :memo: Updates URL to TypeForm survey

---
 README.md            | 2 +-
 docs/contributing.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index ba6cc1b8a..c568a832a 100644
--- a/README.md
+++ b/README.md
@@ -526,7 +526,7 @@ If you're using Dashy, and would like to help support it's development, then tha
 Several areas that we need a bit of help with at the moment are:
 - Translating - Help make Dashy available to non-native English speakers by [adding youre language](./docs/multi-language-support.md#adding-a-new-language)
 - Donate a small amount, by [Sponsoring @Lissy93 on GitHub](https://github.com/sponsors/Lissy93) and receive some extra perks!
-- Complete a [short survey](https://n9fy6xak9yd.typeform.com/to/gl0L68ou), to have your say about future features
+- Complete a [short survey](https://survey.typeform.com/to/gl0L68ou), to have your say about future features
 - Share your dashboard in the [Showcase](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md#dashy-showcase-), to provide inspiration for others
 - Join the [discussion](https://github.com/Lissy93/dashy/discussions), help answer other users questions, suggest features, share tips and ask questions
 - Spread the word, by sharing Dashy or a screenshot of your dashboard, to help new users discover it
diff --git a/docs/contributing.md b/docs/contributing.md
index 66a8124ad..0f242c384 100644
--- a/docs/contributing.md
+++ b/docs/contributing.md
@@ -13,7 +13,7 @@ If you speak another language, then adding translations would be really helpful,
 ## Take a 2-minute survey
 Help improve Dashy by taking a very short, 6-question survey. This will give me a better understanding of what is important to you, so that I can make Dashy better in the future :)
 
-[![Take the Survey](https://img.shields.io/badge/Take_the-Survey-%231a86fd?style=for-the-badge&logo=buddy)](https://n9fy6xak9yd.typeform.com/to/gl0L68ou)
+[![Take the Survey](https://img.shields.io/badge/Take_the-Survey-%231a86fd?style=for-the-badge&logo=buddy)](https://survey.typeform.com/to/gl0L68ou)
 
 ## Share your dashboard
 Dashy now has a [Showcase](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md#dashy-showcase-) where you can show off a screenshot of your dashboard, and get inspiration from other users. I also really enjoy seeing how people are using Dashy. To [submit your dashboard](https://github.com/Lissy93/dashy/blob/master/docs/showcase.md#submitting-your-dashboard), please either open a PR or raise an issue.

From 8d84dbddb36cf5a1d9f89d1faf2b203a2bf2ca85 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 17 Oct 2021 14:42:42 +0100
Subject: [PATCH 13/98] :construction: Adding and removing of all form items

---
 src/components/InteractiveEditor/EditItem.vue | 73 ++++++++++++++-----
 1 file changed, 53 insertions(+), 20 deletions(-)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index 765072573..a4a27844c 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -3,12 +3,16 @@
     :name="modalName"
     :resizable="true"
     width="50%"
-    height="50%"
+    height="85%"
     classes="dashy-modal edit-item"
     @closed="modalClosed"
   >
+  <div class="edit-item-inner">
     <h3 class="title">Edit Item</h3>
     <p class="sub-title">Editing {{item.title}} (ID: {{itemId}})</p>
+    <p class="warning-note" v-if="formData.length === 0">
+      No data configured yet. Click an attribute in the list below to add the field to the form.
+    </p>
     <div class="row" v-for="(row, index) in formData" :key="row.name">
       <Input
         v-model="formData[index].value"
@@ -17,9 +21,9 @@
         :type="row.type"
         layout="horizontal"
         />
-        <BinIcon />
+        <BinIcon @click="() => removeField(row.name)" />
     </div>
-    <div class="add-more-inputs">
+    <div class="add-more-inputs" v-if="additionalFormData.length > 0">
       <h4>More Fields</h4>
       <div class="more-fields">
         <span
@@ -32,14 +36,15 @@
       </div>
     </div>
     <Button :click="saveItem">Save</Button>
+    </div>
   </modal>
 </template>
 
 <script>
-import Input from '@/components/FormElements/Input';
-import Button from '@/components/FormElements/Button';
 import AddIcon from '@/assets/interface-icons/interactive-editor-add.svg';
 import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
+import Input from '@/components/FormElements/Input';
+import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
@@ -50,8 +55,8 @@ export default {
     return {
       modalName: modalNames.EDIT_ITEM,
       schema: DashySchema.properties.sections.items.properties.items.items.properties,
-      formData: [],
-      additionalFormData: [],
+      formData: [], // Array of form fields
+      additionalFormData: [], // Array of not-yet-used form fields
       item: {},
     };
   },
@@ -71,17 +76,20 @@ export default {
     this.$modal.show(modalNames.EDIT_ITEM);
   },
   methods: {
+    /* For a given item ID, return the item obj from store */
+    getItemFromState(id) {
+      return this.$store.getters.getItemById(id);
+    },
+    /* Using the schema and item obj, generate data to be rendered in the form */
     makeInitialFormData() {
       const formData = [];
       const requiredFields = ['title', 'description', 'url', 'icon', 'target', 'hotkey', 'provider', 'tags'];
-      const acceptedTypes = ['text'];
-      const getType = (origType) => (acceptedTypes.includes(origType) ? origType : 'text');
       Object.keys(this.schema).forEach((property) => {
         const singleRow = {
           name: property,
           description: this.schema[property].description,
-          value: this.item[property] || '',
-          type: getType(this.schema[property].type),
+          value: this.item[property],
+          type: this.getInputType(this.schema[property]),
         };
         if (this.item[property] || requiredFields.includes(property)) {
           formData.push(singleRow);
@@ -91,9 +99,7 @@ export default {
       });
       return formData;
     },
-    getItemFromState(id) {
-      return this.$store.getters.getItemById(id);
-    },
+    /* Saves the updated item to VueX Store */
     saveItem() {
       const newItem = {};
       this.formData.forEach((row) => {
@@ -102,19 +108,43 @@ export default {
       newItem.id = this.itemId;
       this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
     },
-    appendNewField(filedId) {
+    /* Adds filed from extras list to main form, then removes from extras list */
+    appendNewField(fieldId) {
       Object.keys(this.schema).forEach((property) => {
-        if (property === filedId) {
+        if (property === fieldId) {
           this.formData.push({
             name: property,
             description: this.schema[property].description,
-            value: this.item[property] || '',
-            type: 'text',
+            value: this.item[property],
+            type: this.getInputType(this.schema[property]),
           });
         }
       });
+      this.additionalFormData.forEach((elem, index) => {
+        if (elem.name === fieldId) {
+          this.additionalFormData.splice(index, 1);
+        }
+      });
     },
-    // removeSomeField(filedId) {},
+    /* Removes filed from main form, adds back into extras list */
+    removeField(fieldId) {
+      this.formData.forEach((elem, index) => {
+        if (elem.name === fieldId) {
+          this.formData.splice(index, 1);
+          this.additionalFormData.push(elem);
+        }
+      });
+    },
+    /* For a given attribute, determine type from schema */
+    getInputType(schemaItem) {
+      if (schemaItem.type === 'text') {
+        return 'text';
+      } else if (schemaItem.type === 'number') {
+        return 'number';
+      }
+      return 'text';
+    },
+    /* Clean up work, triggered when modal closed */
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$emit('closeEditMenu');
@@ -127,7 +157,7 @@ export default {
 @import '@/styles/style-helpers.scss';
 @import '@/styles/media-queries.scss';
 
-.edit-item {
+.edit-item-inner {
   padding: 1rem;
   background: var(--config-settings-background);
   color: var(--config-settings-color);
@@ -144,6 +174,9 @@ export default {
     font-style: italic;
     opacity: var(--dimming-factor);
   }
+  p.warning-note {
+    color: var(--warning);
+  }
   .row {
     display: flex;
     padding: 0.5rem 0.25rem;

From b78db37a8f4b89958e8398bec1f7edcd909cc480 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 17 Oct 2021 16:20:42 +0100
Subject: [PATCH 14/98] :sparkles: A drop-down select form component

---
 src/components/FormElements/Select.vue | 117 +++++++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 src/components/FormElements/Select.vue

diff --git a/src/components/FormElements/Select.vue b/src/components/FormElements/Select.vue
new file mode 100644
index 000000000..53a1623f1
--- /dev/null
+++ b/src/components/FormElements/Select.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="select-container">
+    <label v-if="label" class="select-label">{{ label }}</label>
+    <v-select
+      @input="updateValue"
+      :value="selectedOption"
+      :selectOnTab="true"
+      :options="options"
+      class="form-dropdown"
+    />
+    <p v-if="description" class="select-description">{{ description }}</p>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Select',
+  components: {},
+  props: {
+    options: Array, // Array of available options
+    initialOption: String, // Optional default option
+    label: String, // Form label for element
+    description: String, // Optional description text
+  },
+  data() {
+    return {
+      selectedOption: '', // The currently selected val
+    };
+  },
+  created() {
+    if (this.initialOption) {
+      this.selectedOption = this.initialOption;
+    }
+  },
+  methods: {
+    updateValue(value) {
+      this.$emit('input', value);
+      this.selectedOption = value;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+div.select-container {
+  margin: 0.25rem auto;
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  label.select-label,
+  .form-dropdown,
+  p.select-description {
+    margin: 0.25rem;
+    flex-basis: 8rem;
+    flex-grow: 1;
+  }
+   label.select-label {
+    text-transform: capitalize;
+  }
+  p.select-description {
+    flex-grow: 3;
+    opacity: var(--dimming-factor);
+  }
+  .form-dropdown {
+    flex-grow: 2;
+    min-width: 10rem;
+    margin: 0.5rem auto;
+    font-size: 1.2rem;
+    box-sizing: border-box;
+    color: var(--primary);
+    background: var(--background);;
+    border-radius: var(--curve-factor);
+    min-width: 12rem;
+    &:focus {
+      box-shadow: 1px 1px 6px var(--config-settings-color);
+      outline: none;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+@import '@/styles/style-helpers.scss';
+.form-dropdown {
+  margin: 1rem auto;
+  ul.vs__dropdown-menu {
+    max-height: 14rem;
+    @extend .scroll-bar;
+  }
+  input.vs__search {
+    color: var(--primary);
+  }
+  div.vs__dropdown-toggle {
+    padding: 0.2rem 0;
+    border-color: var(--primary);
+    background: var(--background);
+    .vs__actions svg {
+      height: 1.2rem;
+      width: 1.2rem;
+      border: none;
+      margin: 0;
+      padding: 0.2rem 0 0 0.2rem;
+      &:hover {
+        background: var(--primary);
+        path { fill: var(--background); }
+      }
+    }
+  }
+  div, input {
+    cursor: pointer;
+  }
+}
+
+</style>

From 3a3a26c3c54cc558ddefe7cec3f79d28fd8c4de3 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 17 Oct 2021 18:54:54 +0100
Subject: [PATCH 15/98] :green_heart: Remove duplicate style

---
 src/components/FormElements/Select.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/FormElements/Select.vue b/src/components/FormElements/Select.vue
index 53a1623f1..3ad72abaf 100644
--- a/src/components/FormElements/Select.vue
+++ b/src/components/FormElements/Select.vue
@@ -66,14 +66,13 @@ div.select-container {
   }
   .form-dropdown {
     flex-grow: 2;
-    min-width: 10rem;
+    min-width: 12rem;
     margin: 0.5rem auto;
     font-size: 1.2rem;
     box-sizing: border-box;
     color: var(--primary);
     background: var(--background);;
     border-radius: var(--curve-factor);
-    min-width: 12rem;
     &:focus {
       box-shadow: 1px 1px 6px var(--config-settings-color);
       outline: none;

From 71a019461219f424d690f69418680acbea4e110f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 17 Oct 2021 18:55:17 +0100
Subject: [PATCH 16/98] :sparkles: Made a radio-button component

---
 src/components/FormElements/Radio.vue | 106 ++++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 src/components/FormElements/Radio.vue

diff --git a/src/components/FormElements/Radio.vue b/src/components/FormElements/Radio.vue
new file mode 100644
index 000000000..cfc0e0ff7
--- /dev/null
+++ b/src/components/FormElements/Radio.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="radio-container">
+    <label v-if="label" class="radio-label">{{ label }}</label>
+    <div class="radio-wrapper">
+      <div v-for="radio in options" :key="radio" class="radio-option">
+        <label :for="`id-${radio}`" class="option-label">{{ radio }}</label>
+        <input
+          :value="radio"
+          :id=" `id-${radio}`"
+          v-model="selectedRadio"
+          type="radio"
+          :name="makeGroupName"
+          class="radio-input"
+          v-on:input="updateValue($event.target.value)"
+        />
+      </div>
+    </div>
+    <p v-if="description" class="radio-description">{{ description }}</p>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Radio',
+  components: {},
+  props: {
+    options: Array, // Array of available options
+    initialOption: String, // Optional default option
+    label: String, // Form label for element
+    description: String, // Optional description text
+  },
+  data() {
+    return {
+      selectedRadio: '', // The currently radio val
+    };
+  },
+  created() {
+    if (this.initialOption) {
+      this.selectedRadio = this.initialOption;
+    }
+  },
+  computed: {
+    makeGroupName() {
+      return this.label.toLowerCase().replace(/[^a-z]+/, '');
+    },
+  },
+  methods: {
+    updateValue(value) {
+      this.$emit('input', value);
+      this.selectedRadio = value;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+div.radio-container {
+  margin: 0.25rem auto;
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  label.radio-label,
+  .radio-wrapper,
+  p.radio-description {
+    margin: 0.25rem;
+    flex-basis: 8rem;
+    flex-grow: 1;
+  }
+   label.radio-label {
+    text-transform: capitalize;
+  }
+  p.radio-description {
+    flex-grow: 3;
+    opacity: var(--dimming-factor);
+  }
+  .radio-wrapper {
+    display: flex;
+    flex-grow: 2;
+    margin: 0.5rem auto;
+    font-size: 1.2rem;
+    color: var(--primary);
+    background: var(--background);;
+    border-radius: var(--curve-factor);
+    min-width: 8rem;
+    .radio-option {
+      margin: 0.2rem;
+      padding: 0.2rem;
+      cursor: pointer;
+      border: 1px solid transparent;
+      border-radius: var(--curve-factor);
+      &:hover {
+        border: 1px solid var(--primary);
+      }
+      label.option-label, input.radio-input {
+        cursor: pointer;
+        text-transform: capitalize;
+        margin: 0.2rem;
+      }
+    }
+  }
+}
+</style>

From 5aefbb272fec58ce70371832695a2a00bcabf4f8 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 17 Oct 2021 18:55:54 +0100
Subject: [PATCH 17/98] :construction: Now displays different input fields,
 dependeing on data type

---
 src/components/InteractiveEditor/EditItem.vue | 110 +++++++++++++-----
 1 file changed, 84 insertions(+), 26 deletions(-)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index a4a27844c..ec1487b2b 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -3,7 +3,7 @@
     :name="modalName"
     :resizable="true"
     width="50%"
-    height="85%"
+    height="80%"
     classes="dashy-modal edit-item"
     @closed="modalClosed"
   >
@@ -15,13 +15,33 @@
     </p>
     <div class="row" v-for="(row, index) in formData" :key="row.name">
       <Input
+        v-if="row.type === 'text' || row.type === 'number'"
         v-model="formData[index].value"
         :description="row.description"
         :label="row.name"
         :type="row.type"
         layout="horizontal"
         />
-        <BinIcon @click="() => removeField(row.name)" />
+      <Radio
+        v-else-if="row.type === 'boolean'"
+        v-model="formData[index].value"
+        :description="row.description"
+        :label="row.name"
+        :options="['true', 'false']"
+        :initialOption="boolToStr(formData[index].value)"
+      />
+      <Select
+        v-else-if="row.type === 'select'"
+        v-model="formData[index].value"
+        :options="formData[index].enum"
+        :description="row.description"
+        :initialOption="formData[index].value"
+        :label="row.name"
+      />
+      <div v-else>
+        {{ row.name }} cannot currently be edited through the UI.
+      </div>
+      <BinIcon @click="() => removeField(row.name)" />
     </div>
     <div class="add-more-inputs" v-if="additionalFormData.length > 0">
       <h4>More Fields</h4>
@@ -44,6 +64,8 @@
 import AddIcon from '@/assets/interface-icons/interactive-editor-add.svg';
 import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
 import Input from '@/components/FormElements/Input';
+import Radio from '@/components/FormElements/Radio';
+import Select from '@/components/FormElements/Select';
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
@@ -66,6 +88,8 @@ export default {
   computed: {},
   components: {
     Input,
+    Radio,
+    Select,
     Button,
     AddIcon,
     BinIcon,
@@ -80,17 +104,22 @@ export default {
     getItemFromState(id) {
       return this.$store.getters.getItemById(id);
     },
-    /* Using the schema and item obj, generate data to be rendered in the form */
+    /* Using the schema, make data structure for the UI form fields to use */
+    makeRowData(property) {
+      return {
+        name: property,
+        description: this.schema[property].description,
+        value: this.item[property],
+        type: this.getInputType(this.schema[property]),
+        enum: this.schema[property].enum,
+      };
+    },
+    /* Make formatted data structure to be rendered as form elements */
     makeInitialFormData() {
       const formData = [];
-      const requiredFields = ['title', 'description', 'url', 'icon', 'target', 'hotkey', 'provider', 'tags'];
+      const requiredFields = ['title', 'description', 'url', 'icon', 'target'];
       Object.keys(this.schema).forEach((property) => {
-        const singleRow = {
-          name: property,
-          description: this.schema[property].description,
-          value: this.item[property],
-          type: this.getInputType(this.schema[property]),
-        };
+        const singleRow = this.makeRowData(property);
         if (this.item[property] || requiredFields.includes(property)) {
           formData.push(singleRow);
         } else {
@@ -99,25 +128,40 @@ export default {
       });
       return formData;
     },
+    boolToStr(bool) {
+      if (bool) return 'true';
+      if (bool === false) return 'false';
+      return undefined;
+    },
+    /* Some fields require a bit of extra processing before they're saved */
+    formatBeforeSave(item) {
+      const newItem = item;
+      newItem.id = this.itemId;
+      if (newItem.hotkey) newItem.hotkey = parseInt(newItem.hotkey, 10);
+      const strToTags = (str) => {
+        const tagArr = str.split(',');
+        return tagArr.map((tag) => tag.trim().toLowerCase().replace(/[^a-z]+/, ''));
+      };
+      const strToBool = (str) => {
+        if (str === undefined) return undefined;
+        return str === 'true';
+      };
+      if (newItem.tags) newItem.tags = strToTags(newItem.tags);
+      if (newItem.statusCheck) newItem.statusCheck = strToBool(newItem.statusCheck);
+      return newItem;
+    },
     /* Saves the updated item to VueX Store */
     saveItem() {
-      const newItem = {};
-      this.formData.forEach((row) => {
-        newItem[row.name] = row.value;
-      });
-      newItem.id = this.itemId;
+      const structured = {};
+      this.formData.forEach((row) => { structured[row.name] = row.value; });
+      const newItem = this.formatBeforeSave(structured);
       this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
     },
     /* Adds filed from extras list to main form, then removes from extras list */
     appendNewField(fieldId) {
       Object.keys(this.schema).forEach((property) => {
         if (property === fieldId) {
-          this.formData.push({
-            name: property,
-            description: this.schema[property].description,
-            value: this.item[property],
-            type: this.getInputType(this.schema[property]),
-          });
+          this.formData.push(this.makeRowData(property));
         }
       });
       this.additionalFormData.forEach((elem, index) => {
@@ -137,10 +181,16 @@ export default {
     },
     /* For a given attribute, determine type from schema */
     getInputType(schemaItem) {
-      if (schemaItem.type === 'text') {
+      const definedType = schemaItem.type;
+      // console.log(definedType);
+      if (definedType === 'text') {
         return 'text';
-      } else if (schemaItem.type === 'number') {
+      } else if (definedType === 'number') {
         return 'number';
+      } else if (definedType === 'boolean') {
+        return 'boolean';
+      } else if (schemaItem.enum) {
+        return 'select';
       }
       return 'text';
     },
@@ -165,7 +215,7 @@ export default {
   overflow-y: auto;
   @extend .svg-button;
   h3.title {
-    font-size: 1.2rem;
+    font-size: 1.5rem;
     margin: 0.25rem 0;
   }
   p.sub-title {
@@ -183,7 +233,7 @@ export default {
     &:not(:last-child) {
       border-bottom: 1px dotted var(--config-settings-color);
     }
-    .input-container {
+    .input-container, .select-container {
         width: 100%;
         input.input-field {
         font-size: 1rem;
@@ -218,6 +268,14 @@ export default {
       }
     }
   }
-}
 
+  /* Override form input colors, to use local CSS variables */
+  .input-container input.input-field,
+  .radio-container div.radio-wrapper,
+  .form-dropdown div.vs__dropdown-toggle {
+    color: var(--config-settings-color);
+    background: var(--config-settings-background);
+    border-color: var(--config-settings-color);
+  }
+}
 </style>

From 159748e3de165af2516544d3402dab326bd4a58f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 17 Oct 2021 19:14:12 +0100
Subject: [PATCH 18/98] :sparkles: Show banner when in edit mode

---
 src/App.vue                                   |  6 ++++++
 src/components/InteractiveEditor/EditItem.vue |  7 +++++++
 .../InteractiveEditor/EditModeTopBanner.vue   | 20 +++++++++++++++++++
 src/store.js                                  |  5 +++++
 src/utils/StoreMutations.js                   |  1 +
 5 files changed, 39 insertions(+)
 create mode 100644 src/components/InteractiveEditor/EditModeTopBanner.vue

diff --git a/src/App.vue b/src/App.vue
index d9619e04b..578f67d93 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="dashy">
+    <EditModeTopBanner v-if="isEditMode" />
     <LoadingScreen :isLoading="isLoading" v-if="shouldShowSplash" />
     <Header :pageInfo="pageInfo" />
     <router-view />
@@ -10,6 +11,7 @@
 
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
+import EditModeTopBanner from '@/components/InteractiveEditor/EditModeTopBanner.vue';
 import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
 import { welcomeMsg } from '@/utils/CoolConsole';
 import ErrorHandler from '@/utils/ErrorHandler';
@@ -27,6 +29,7 @@ export default {
     Header,
     Footer,
     LoadingScreen,
+    EditModeTopBanner,
   },
   data() {
     return {
@@ -57,6 +60,9 @@ export default {
     visibleComponents() {
       return this.$store.getters.visibleComponents;
     },
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
   },
   created() {
     this.$store.dispatch('initializeConfig');
diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index ec1487b2b..f997af1ad 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -152,10 +152,17 @@ export default {
     },
     /* Saves the updated item to VueX Store */
     saveItem() {
+      // Convert form data back into section.item data structure
       const structured = {};
       this.formData.forEach((row) => { structured[row.name] = row.value; });
+      // Some attributes need a little extra formatting
       const newItem = this.formatBeforeSave(structured);
+      // Update the data store, with new item data
       this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+      // If we're not already in edit mode, enable it now
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+      // Close edit menu
+      this.$emit('closeEditMenu');
     },
     /* Adds filed from extras list to main form, then removes from extras list */
     appendNewField(fieldId) {
diff --git a/src/components/InteractiveEditor/EditModeTopBanner.vue b/src/components/InteractiveEditor/EditModeTopBanner.vue
new file mode 100644
index 000000000..77e72716a
--- /dev/null
+++ b/src/components/InteractiveEditor/EditModeTopBanner.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="edit-mode-top-banner">
+    <span>Edit Mode Enabled</span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+div.edit-mode-top-banner {
+  width: 100%;
+  text-align: center;
+  padding: 0.2rem 0;
+  background: var(--primary);
+  opacity: var(--dimming-factor);
+  span {
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--background);
+  }
+}
+</style>
diff --git a/src/store.js b/src/store.js
index dd05f8ef1..0a893ef87 100644
--- a/src/store.js
+++ b/src/store.js
@@ -13,12 +13,14 @@ const {
   SET_MODAL_OPEN,
   SET_LANGUAGE,
   UPDATE_ITEM,
+  SET_EDIT_MODE,
 } = Keys;
 
 const store = new Vuex.Store({
   state: {
     config: {},
     lang: '', // The users language, auto-detected or read from local storage / config
+    editMode: false, // While true, the user can drag and edit items + sections
     modalOpen: false, // KB shortcut functionality will be disabled when modal is open
   },
   getters: {
@@ -59,6 +61,9 @@ const store = new Vuex.Store({
     [SET_MODAL_OPEN](state, modalOpen) {
       state.modalOpen = modalOpen;
     },
+    [SET_EDIT_MODE](state, editMode) {
+      state.editMode = editMode;
+    },
     [UPDATE_ITEM](state, payload) {
       const { itemId, newItem } = payload;
       const newConfig = state.config;
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 4e742276b..5841f1779 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -4,6 +4,7 @@ const KEY_NAMES = [
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',
   'UPDATE_ITEM',
+  'SET_EDIT_MODE',
 ];
 
 // Convert array of key names into an object, and export

From 08da96da2da2fdae117b7fc2a4f5ae26b1ece473 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 17 Oct 2021 20:08:38 +0100
Subject: [PATCH 19/98] :zap: Adds mutation key for INITIALIZE_CONFIG

---
 src/App.vue                 | 2 +-
 src/store.js                | 3 ++-
 src/utils/StoreMutations.js | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 578f67d93..d1f0e7614 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,7 +65,7 @@ export default {
     },
   },
   created() {
-    this.$store.dispatch('initializeConfig');
+    this.$store.dispatch(Keys.INITIALIZE_CONFIG);
   },
   methods: {
     /* Injects the users custom CSS as a style tag */
diff --git a/src/store.js b/src/store.js
index 0a893ef87..5c6adc1f4 100644
--- a/src/store.js
+++ b/src/store.js
@@ -9,6 +9,7 @@ import filterUserSections from '@/utils/CheckSectionVisibility';
 Vue.use(Vuex);
 
 const {
+  INITIALIZE_CONFIG,
   UPDATE_CONFIG,
   SET_MODAL_OPEN,
   SET_LANGUAGE,
@@ -79,7 +80,7 @@ const store = new Vuex.Store({
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
-    initializeConfig({ commit }) {
+    [INITIALIZE_CONFIG]({ commit }) {
       const Accumulator = new ConfigAccumulator();
       const config = Accumulator.config();
       commit(UPDATE_CONFIG, config);
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 5841f1779..2134e9fa0 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -1,5 +1,6 @@
 // A list of mutation names
 const KEY_NAMES = [
+  'INITIALIZE_CONFIG',
   'UPDATE_CONFIG',
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',

From ef57a5be1f14d5a90011ec5059cc6fadc0d38bfa Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 17 Oct 2021 20:09:17 +0100
Subject: [PATCH 20/98] :construction: Started on the save config banner

---
 .../InteractiveEditor/EditModeSaveMenu.vue    | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 src/components/InteractiveEditor/EditModeSaveMenu.vue

diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
new file mode 100644
index 000000000..acf393887
--- /dev/null
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="edit-mode-bottom-banner">
+    <div class="edit-banner-section intro-container">
+      <p class="edit-mode-intro l-1">You are in Edit Mode</p>
+      <p class="edit-mode-intro l-2">
+        This means you can make modifications to your config,
+        and preview the results, but until you save, none of your changes will be preserved.
+      </p>
+    </div>
+    <div class="edit-banner-section"></div>
+    <div class="edit-banner-section save-buttons-container">
+      <Button :click="reset">Reset</Button>
+      <Button>Export Config</Button>
+      <Button>Save Locally</Button>
+      <Button>Save to Disk</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Button from '@/components/FormElements/Button';
+import StoreKeys from '@/utils/StoreMutations';
+
+export default {
+  name: 'EditModeSaveMenu',
+  components: {
+    Button,
+  },
+  methods: {
+    reset() {
+      this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+
+div.edit-mode-bottom-banner {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  vertical-align: middle;
+  justify-content: space-between;
+  padding: 0.25rem 0;
+  border-top: 2px solid var(--primary);
+  background: var(--background);
+  z-index: 5;
+  box-shadow: 0 -5px 7px var(--transparent-50);
+  .edit-banner-section {
+    padding: 0.5rem;
+  }
+  .edit-banner-section.intro-container {
+    max-width: 35%;
+    p.edit-mode-intro {
+      color: var(--primary);
+      cursor: default;
+      margin: 0;
+      &.l-1 {
+        font-weight: bold;
+      }
+    }
+  }
+  .edit-banner-section.save-buttons-container {
+    display: flex;
+    place-self: center;
+    button {
+      margin: 0.25rem;
+      height: fit-content;
+    }
+  }
+  @include tablet-down {
+    flex-direction: column;
+    .edit-banner-section,
+    .edit-banner-section.intro-container {
+      max-width: 90%;
+      width: 100%;
+      margin: 0.2rem auto;
+      flex-direction: column;
+    }
+  }
+}
+</style>

From 31a2d7446143737bb19238d022c5f98feab5e963 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 17 Oct 2021 20:10:59 +0100
Subject: [PATCH 21/98] :zap: Turn on edit mode and close, then show banner on
 hompage when edit mode on

---
 src/components/LinkItems/Item.vue | 2 ++
 src/views/Home.vue                | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index e499ac49a..dcc9ce49f 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -229,6 +229,8 @@ export default {
     /* Ensure conditional is updated, once menu closed */
     closeEditMenu() {
       this.editMenuOpen = false;
+      this.$modal.hide(modalNames.EDIT_ITEM);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
     },
     /* Used for smart-sort when sorting items by most used apps */
     incrementMostUsedCount(itemId) {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b8a2fe5de..1a33412a3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -48,6 +48,7 @@
     <div v-if="checkIfResults()" class="no-data">
       {{searchValue ? $t('home.no-results') : $t('home.no-data')}}
     </div>
+    <EditModeSaveMenu v-if="isEditMode" />
   </div>
 </template>
 
@@ -55,6 +56,7 @@
 
 import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
 import Section from '@/components/LinkItems/Section.vue';
+import EditModeSaveMenu from '@/components/InteractiveEditor/EditModeSaveMenu.vue';
 import { searchTiles } from '@/utils/Search';
 import Defaults, { localStorageKeys, iconCdns } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
@@ -64,6 +66,7 @@ export default {
   name: 'home',
   components: {
     SettingsContainer,
+    EditModeSaveMenu,
     Section,
     BackIcon,
   },
@@ -88,6 +91,9 @@ export default {
     singleSectionView() {
       return this.findSingleSection(this.$store.getters.sections, this.$route.params.section);
     },
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
     /* Get class for num columns, if specified by user */
     colCount() {
       let { colCount } = this.appConfig;

From e6bb509e5707af1e3148e3764190692cb3a274ac Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 18 Oct 2021 21:55:29 +0100
Subject: [PATCH 22/98] :bento: Adds icons for the interactive config editor

---
 src/assets/interface-icons/interactive-editor-app-config.svg     | 1 +
 src/assets/interface-icons/interactive-editor-cancel-changes.svg | 1 +
 src/assets/interface-icons/interactive-editor-export-changes.svg | 1 +
 src/assets/interface-icons/interactive-editor-page-info.svg      | 1 +
 src/assets/interface-icons/interactive-editor-save-disk.svg      | 1 +
 src/assets/interface-icons/interactive-editor-save-locally.svg   | 1 +
 6 files changed, 6 insertions(+)
 create mode 100644 src/assets/interface-icons/interactive-editor-app-config.svg
 create mode 100644 src/assets/interface-icons/interactive-editor-cancel-changes.svg
 create mode 100644 src/assets/interface-icons/interactive-editor-export-changes.svg
 create mode 100644 src/assets/interface-icons/interactive-editor-page-info.svg
 create mode 100644 src/assets/interface-icons/interactive-editor-save-disk.svg
 create mode 100644 src/assets/interface-icons/interactive-editor-save-locally.svg

diff --git a/src/assets/interface-icons/interactive-editor-app-config.svg b/src/assets/interface-icons/interactive-editor-app-config.svg
new file mode 100644
index 000000000..9f9d78647
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-app-config.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="cogs" class="svg-inline--fa fa-cogs fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M217.1 478.1c-23.8 0-41.6-3.5-57.5-7.5-10.6-2.7-18.1-12.3-18.1-23.3v-31.7c-9.4-4.4-18.4-9.6-26.9-15.6l-26.7 15.4c-9.6 5.6-21.9 3.8-29.5-4.3-35.4-37.6-44.2-58.6-57.2-98.5-3.6-10.9 1.1-22.7 11-28.4l26.8-15c-.9-10.3-.9-20.7 0-31.1L12.2 223c-10-5.6-14.6-17.5-11-28.4 13.1-40 21.9-60.9 57.2-98.5 7.6-8.1 19.8-9.9 29.5-4.3l26.7 15.4c8.5-6 17.5-11.2 26.9-15.6V61.4c0-11.1 7.6-20.8 18.4-23.3 44.2-10.5 70-10.5 114.3 0 10.8 2.6 18.4 12.2 18.4 23.3v30.4c9.4 4.4 18.4 9.6 26.9 15.6L346.2 92c9.7-5.6 21.9-3.7 29.6 4.4 26.1 27.9 48.4 58.5 56.8 100.3 2 9.8-2.4 19.8-10.9 25.1l-26.6 16.5c.9 10.3.9 20.7 0 31.1l26.6 16.5c8.4 5.2 12.9 15.2 10.9 24.9-8.1 40.5-29.6 71.3-56.9 100.6-7.6 8.1-19.8 9.9-29.5 4.3l-26.7-15.4c-8.5 6-17.5 11.2-26.9 15.6v31.7c0 11-7.4 20.6-18.1 23.3-15.8 3.8-33.6 7.2-57.4 7.2zm-27.6-50.7c18.3 2.9 36.9 2.9 55.1 0v-44.8l16-5.7c15.2-5.4 29.1-13.4 41.3-23.9l12.9-11 38.8 22.4c11.7-14.4 21-30.5 27.6-47.7l-38.8-22.4 3.1-16.7c2.9-15.9 2.9-32 0-47.9l-3.1-16.7 38.8-22.4c-6.6-17.2-15.9-33.3-27.6-47.7l-38.8 22.4-12.9-11c-12.3-10.5-26.2-18.6-41.3-23.9l-16-5.7V80c-18.3-2.9-36.9-2.9-55.1 0v44.8l-16 5.7c-15.2 5.4-29.1 13.4-41.3 23.9l-12.9 11L80.5 143c-11.7 14.4-21 30.5-27.6 47.7l38.8 22.4-3.1 16.7c-2.9 15.9-2.9 32 0 47.9l3.1 16.7-38.8 22.4c6.6 17.2 15.9 33.4 27.6 47.7l38.8-22.4 12.9 11c12.3 10.5 26.2 18.6 41.3 23.9l16 5.7v44.7zm27.1-85.1c-22.6 0-45.2-8.6-62.4-25.8-34.4-34.4-34.4-90.4 0-124.8 34.4-34.4 90.4-34.4 124.8 0 34.4 34.4 34.4 90.4 0 124.8-17.3 17.2-39.9 25.8-62.4 25.8zm0-128.4c-10.3 0-20.6 3.9-28.5 11.8-15.7 15.7-15.7 41.2 0 56.9 15.7 15.7 41.2 15.7 56.9 0 15.7-15.7 15.7-41.2 0-56.9-7.8-7.9-18.1-11.8-28.4-11.8zM638.5 85c-1-5.8-6-10-11.9-10h-16.1c-3.5-9.9-8.8-19-15.5-26.8l8-13.9c2.9-5.1 1.8-11.6-2.7-15.3C591 11.3 580.5 5.1 569 .8c-5.5-2.1-11.8.1-14.7 5.3l-8 13.9c-10.2-1.9-20.7-1.9-30.9 0l-8-13.9c-3-5.1-9.2-7.3-14.7-5.3-11.5 4.3-22.1 10.5-31.4 18.2-4.5 3.7-5.7 10.2-2.7 15.3l8 13.9c-6.7 7.8-12 16.9-15.5 26.8H435c-5.9 0-11 4.3-11.9 10.2-2 12.2-1.9 24.5 0 36.2 1 5.8 6 10 11.9 10h16.1c3.5 9.9 8.8 19 15.5 26.8l-8 13.9c-2.9 5.1-1.8 11.6 2.7 15.3 9.3 7.7 19.9 13.9 31.4 18.2 5.5 2.1 11.8-.1 14.7-5.3l8-13.9c10.2 1.9 20.7 1.9 30.9 0l8 13.9c3 5.1 9.2 7.3 14.7 5.3 11.5-4.3 22.1-10.5 31.4-18.2 4.5-3.7 5.7-10.2 2.7-15.3l-8-13.9c6.7-7.8 12-16.9 15.5-26.8h16.1c5.9 0 11-4.3 11.9-10.2 1.9-12.2 1.9-24.4-.1-36.2zm-107.8 50.2c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm107.8 255.4c-1-5.8-6-10-11.9-10h-16.1c-3.5-9.9-8.8-19-15.5-26.8l8-13.9c2.9-5.1 1.8-11.6-2.7-15.3-9.3-7.7-19.9-13.9-31.4-18.2-5.5-2.1-11.8.1-14.7 5.3l-8 13.9c-10.2-1.9-20.7-1.9-30.9 0l-8-13.9c-3-5.1-9.2-7.3-14.7-5.3-11.5 4.3-22.1 10.5-31.4 18.2-4.5 3.7-5.7 10.2-2.7 15.3l8 13.9c-6.7 7.8-12 16.9-15.5 26.8h-16.1c-5.9 0-11 4.3-11.9 10.2-2 12.2-1.9 24.5 0 36.2 1 5.8 6 10 11.9 10H451c3.5 9.9 8.8 19 15.5 26.8l-8 13.9c-2.9 5.1-1.8 11.6 2.7 15.3 9.3 7.7 19.9 13.9 31.4 18.2 5.5 2.1 11.8-.1 14.7-5.3l8-13.9c10.2 1.9 20.7 1.9 30.9 0l8 13.9c3 5.1 9.2 7.3 14.7 5.3 11.5-4.3 22.1-10.5 31.4-18.2 4.5-3.7 5.7-10.2 2.7-15.3l-8-13.9c6.7-7.8 12-16.9 15.5-26.8h16.1c5.9 0 11-4.3 11.9-10.2 2-12.1 2-24.4 0-36.2zm-107.8 50.2c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/interactive-editor-cancel-changes.svg b/src/assets/interface-icons/interactive-editor-cancel-changes.svg
new file mode 100644
index 000000000..8db2e459d
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-cancel-changes.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="ban" class="svg-inline--fa fa-ban fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm141.421 106.579c73.176 73.175 77.05 187.301 15.964 264.865L132.556 98.615c77.588-61.105 191.709-57.193 264.865 15.964zM114.579 397.421c-73.176-73.175-77.05-187.301-15.964-264.865l280.829 280.829c-77.588 61.105-191.709 57.193-264.865-15.964z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/interactive-editor-export-changes.svg b/src/assets/interface-icons/interactive-editor-export-changes.svg
new file mode 100644
index 000000000..794407d46
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-export-changes.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="file-download" class="svg-inline--fa fa-file-download fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.45 211.36l-96.42 95.7c-6.65 6.61-17.39 6.61-24.04 0l-96.42-95.7C73.42 337.29 80.54 320 94.82 320H160v-80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v80h65.18c14.28 0 21.4 17.29 11.27 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/interactive-editor-page-info.svg b/src/assets/interface-icons/interactive-editor-page-info.svg
new file mode 100644
index 000000000..5fdfbd54c
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-page-info.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="quote-right" class="svg-inline--fa fa-quote-right fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M200 32H72C32.3 32 0 64.3 0 104v112c0 39.7 32.3 72 72 72h56v8c0 22.1-17.9 40-40 40h-8c-26.5 0-48 21.5-48 48v48c0 26.5 21.5 48 48 48h8c101.5 0 184-82.5 184-184V104c0-39.7-32.3-72-72-72zm24 264c0 75-61 136-136 136h-8v-48h8c48.5 0 88-39.5 88-88v-56H72c-13.2 0-24-10.8-24-24V104c0-13.2 10.8-24 24-24h128c13.2 0 24 10.8 24 24v192zM504 32H376c-39.7 0-72 32.3-72 72v112c0 39.7 32.3 72 72 72h56v8c0 22.1-17.9 40-40 40h-8c-26.5 0-48 21.5-48 48v48c0 26.5 21.5 48 48 48h8c101.5 0 184-82.5 184-184V104c0-39.7-32.3-72-72-72zm24 264c0 75-61 136-136 136h-8v-48h8c48.5 0 88-39.5 88-88v-56H376c-13.2 0-24-10.8-24-24V104c0-13.2 10.8-24 24-24h128c13.2 0 24 10.8 24 24v192z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/interactive-editor-save-disk.svg b/src/assets/interface-icons/interactive-editor-save-disk.svg
new file mode 100644
index 000000000..5b61bcf01
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-save-disk.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="save" class="svg-inline--fa fa-save fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM272 80v80H144V80h128zm122 352H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h42v104c0 13.255 10.745 24 24 24h176c13.255 0 24-10.745 24-24V83.882l78.243 78.243a6 6 0 0 1 1.757 4.243V426a6 6 0 0 1-6 6zM224 232c-48.523 0-88 39.477-88 88s39.477 88 88 88 88-39.477 88-88-39.477-88-88-88zm0 128c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/interactive-editor-save-locally.svg b/src/assets/interface-icons/interactive-editor-save-locally.svg
new file mode 100644
index 000000000..b25a6a1b8
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-save-locally.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="memory" class="svg-inline--fa fa-memory fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M480 160h-64v128h64V160zm-128 0h-64v128h64V160zm-128 0h-64v128h64V160zm408 0h8V96c0-17.67-14.33-32-32-32H32C14.33 64 0 78.33 0 96v64h8c13.26 0 24 10.74 24 24 0 13.25-10.74 24-24 24H0v240h640V208h-8c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24zm-40 240h-64c0-8.84-7.16-16-16-16s-16 7.16-16 16h-96c0-8.84-7.16-16-16-16s-16 7.16-16 16h-96c0-8.84-7.16-16-16-16s-16 7.16-16 16h-96c0-8.84-7.16-16-16-16s-16 7.16-16 16H48v-48h544v48zm0-275.84c-19.29 12.93-32 34.93-32 59.84s12.71 46.91 32 59.84V320H48v-76.16c19.29-12.93 32-34.93 32-59.84s-12.71-46.91-32-59.84V112h544v12.16z"></path></svg>
\ No newline at end of file

From 6f0ee82821253dbe281592f7e47c4a18f37e348a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 18 Oct 2021 21:57:28 +0100
Subject: [PATCH 23/98] :iphone: Responsive mobile-support for form elements

---
 src/components/FormElements/Input.vue  | 34 +++++++++++++++++---------
 src/components/FormElements/Select.vue | 13 ++++++++++
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/src/components/FormElements/Input.vue b/src/components/FormElements/Input.vue
index 1ddc9df85..3acafb1aa 100644
--- a/src/components/FormElements/Input.vue
+++ b/src/components/FormElements/Input.vue
@@ -54,6 +54,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+
 div.input-container {
   margin: 0.25rem auto;
   display: flex;
@@ -62,18 +64,20 @@ div.input-container {
     flex-direction: column;
   }
   &.horizontal {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    label.input-label,
-    input.input-field,
-    p.input-description {
-      margin: 0.25rem;
-      flex-basis: 8rem;
-      flex-grow: 1;
+    @include tablet-up {
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      label.input-label,
+      input.input-field,
+      p.input-description {
+        margin: 0.25rem;
+        flex-basis: 8rem;
+        flex-grow: 1;
+      }
+      input.input-field { flex-grow: 2; }
+      p.input-description { flex-grow: 3; }
     }
-    input.input-field { flex-grow: 2; }
-    p.input-description { flex-grow: 3; }
   }
 
   input.input-field {
@@ -99,6 +103,14 @@ div.input-container {
   p.input-description {
     opacity: var(--dimming-factor);
   }
+
+  @include tablet-down {
+    flex-direction: column;
+    align-items: start;
+    input.input-field {
+      margin: 0.5rem;
+    }
+  }
 }
 
 </style>
diff --git a/src/components/FormElements/Select.vue b/src/components/FormElements/Select.vue
index 3ad72abaf..2c1410d8a 100644
--- a/src/components/FormElements/Select.vue
+++ b/src/components/FormElements/Select.vue
@@ -43,6 +43,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+
 div.select-container {
   margin: 0.25rem auto;
   display: flex;
@@ -78,11 +80,22 @@ div.select-container {
       outline: none;
     }
   }
+  @include tablet-down {
+    flex-direction: column;
+    align-items: start;
+      label.select-label,
+      .form-dropdown,
+      p.select-description {
+        margin: 0.5rem;
+        flex-basis: auto;
+      }
+  }
 }
 </style>
 
 <style lang="scss">
 @import '@/styles/style-helpers.scss';
+
 .form-dropdown {
   margin: 1rem auto;
   ul.vs__dropdown-menu {

From 03906130c73972cbd33af4f9d290449fad0a66c6 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 18 Oct 2021 21:58:18 +0100
Subject: [PATCH 24/98] :construction: Adds responsivness, translations, icons
 and layout to bottom banner

---
 src/assets/locales/en.json                    |  17 +++
 .../InteractiveEditor/EditModeSaveMenu.vue    | 131 ++++++++++++++----
 2 files changed, 121 insertions(+), 27 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 10424e019..991188873 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -168,5 +168,22 @@
     "newtab": "New Tab",
     "modal": "Pop-Up Modal",
     "workspace": "Workspace View"
+  },
+  "interactive-editor": {
+    "edit-page-info-btn": "Edit Page Info",
+    "edit-page-info-tooltip": "App title, description, nav links, footer text, etc",
+    "edit-app-config-btn": "Edit App Config",
+    "edit-app-config-tooltip": "All other app configuration options",
+    "save-locally-btn": "Save Locally",
+    "save-locally-tooltip": "Save config locally, to browser storage. This will not affect your config file, but changes will only be saved on this device",
+    "save-disk-btn": "Save to Disk",
+    "save-disk-tooltip": "Save config to the conf.yml file on disk. This will backup, and then over-write your existing config",
+    "export-config-btn": "Export Config",
+    "export-config-tooltip": "View and export new config, either to a file, or to clipboard",
+    "cancel-changes-btn": "Reset Changes",
+    "cancel-changes-tooltip": "Reset current modifications. This will not affect your saved config",
+    "edit-mode-name": "Edit Mode",
+    "edit-mode-subtitle": "You are in Edit Mode",
+    "edit-mode-description": "This means you can make modifications to your config, and preview the results, but until you save, none of your changes will be preserved."
   }
 }
\ No newline at end of file
diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index acf393887..937896de6 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -1,18 +1,59 @@
 <template>
+  <!-- Intro Info -->
   <div class="edit-mode-bottom-banner">
     <div class="edit-banner-section intro-container">
-      <p class="edit-mode-intro l-1">You are in Edit Mode</p>
+      <p class="section-sub-title edit-mode-intro l-1">
+        {{ $t('interactive-editor.edit-mode-subtitle') }}
+      </p>
       <p class="edit-mode-intro l-2">
-        This means you can make modifications to your config,
-        and preview the results, but until you save, none of your changes will be preserved.
+        {{ $t('interactive-editor.edit-mode-description') }}
       </p>
     </div>
-    <div class="edit-banner-section"></div>
+    <div class="edit-banner-section empty-space"></div>
+    <!-- Save Buttons -->
     <div class="edit-banner-section save-buttons-container">
-      <Button :click="reset">Reset</Button>
-      <Button>Export Config</Button>
-      <Button>Save Locally</Button>
-      <Button>Save to Disk</Button>
+      <p class="section-sub-title">Config Saving Options</p>
+      <Button
+        v-tooltip="tooltip($t('interactive-editor.export-config-tooltip'))"
+      >
+        {{ $t('interactive-editor.export-config-btn') }}
+        <ExportIcon />
+      </Button>
+      <Button
+        :click="reset"
+        v-tooltip="tooltip($t('interactive-editor.cancel-changes-tooltip'))"
+      >
+        {{ $t('interactive-editor.cancel-changes-btn') }}
+        <CancelIcon />
+      </Button>
+      <Button
+        v-tooltip="tooltip($t('interactive-editor.save-locally-tooltip'))"
+      >
+        {{ $t('interactive-editor.save-locally-btn') }}
+        <SaveLocallyIcon />
+      </Button>
+      <Button
+        v-tooltip="tooltip($t('interactive-editor.save-disk-tooltip'))"
+      >
+        {{ $t('interactive-editor.save-disk-btn') }}
+        <SaveToDiskIcon />
+      </Button>
+    </div>
+    <!-- Open Modal Buttons -->
+    <div class="edit-banner-section edit-site-config-buttons">
+      <p class="section-sub-title">Edit Site Data</p>
+      <Button
+        v-tooltip="tooltip($t('interactive-editor.edit-page-info-tooltip'))"
+      >
+        {{ $t('interactive-editor.edit-page-info-btn') }}
+        <PageInfoIcon />
+      </Button>
+      <Button
+        v-tooltip="tooltip($t('interactive-editor.edit-app-config-tooltip'))"
+      >
+        {{ $t('interactive-editor.edit-app-config-btn') }}
+        <AppConfigIcon />
+      </Button>
     </div>
   </div>
 </template>
@@ -21,16 +62,32 @@
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 
+import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
+import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
+import ExportIcon from '@/assets/interface-icons/interactive-editor-export-changes.svg';
+import CancelIcon from '@/assets/interface-icons/interactive-editor-cancel-changes.svg';
+import AppConfigIcon from '@/assets/interface-icons/interactive-editor-app-config.svg';
+import PageInfoIcon from '@/assets/interface-icons/interactive-editor-page-info.svg';
+
 export default {
   name: 'EditModeSaveMenu',
   components: {
     Button,
+    SaveLocallyIcon,
+    SaveToDiskIcon,
+    ExportIcon,
+    CancelIcon,
+    AppConfigIcon,
+    PageInfoIcon,
   },
   methods: {
     reset() {
       this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
       this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
     },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
   },
 };
 </script>
@@ -40,39 +97,59 @@ export default {
 
 div.edit-mode-bottom-banner {
   position: absolute;
+  display: grid;
+  z-index: 5;
   bottom: 0;
   width: 100%;
-  display: flex;
-  vertical-align: middle;
-  justify-content: space-between;
   padding: 0.25rem 0;
   border-top: 2px solid var(--primary);
-  background: var(--background);
-  z-index: 5;
+  background: var(--background-darker);
   box-shadow: 0 -5px 7px var(--transparent-50);
+  grid-template-columns: 45% 10% 45%;
+  @include laptop-up { grid-template-columns: 40% 20% 40%; }
+  @include monitor-up { grid-template-columns: 30% 40% 30%; }
+  @include big-screen-up { grid-template-columns: 25% 50% 25%; }
+
+  /* Main sections */
   .edit-banner-section {
     padding: 0.5rem;
-  }
-  .edit-banner-section.intro-container {
-    max-width: 35%;
-    p.edit-mode-intro {
+    height: 100%;
+    /* Section sub-titles */
+    p.section-sub-title {
+      margin: 0;
       color: var(--primary);
+      font-weight: bold;
       cursor: default;
-      margin: 0;
-      &.l-1 {
-        font-weight: bold;
+    }
+    /* Intro-text container */
+    &.intro-container  {
+        p.edit-mode-intro {
+        margin: 0;
+        color: var(--primary);
+        cursor: default;
       }
     }
-  }
-  .edit-banner-section.save-buttons-container {
-    display: flex;
-    place-self: center;
-    button {
-      margin: 0.25rem;
-      height: fit-content;
+    /* Button containers */
+    &.edit-site-config-buttons,
+    &.save-buttons-container {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      button {
+        margin: 0.25rem;
+        height: fit-content;
+      }
+      p.section-sub-title {
+        grid-column-start: span 2;
+      }
+    }
+    &.save-buttons-container {
+      grid-row-start: span 2;
     }
   }
+
+  /* Mobile layout */
   @include tablet-down {
+    display: flex;
     flex-direction: column;
     .edit-banner-section,
     .edit-banner-section.intro-container {

From 8a4f4373c17dffe737fdbc9e5824f5d6bd11eb83 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 18 Oct 2021 22:14:02 +0100
Subject: [PATCH 25/98] :lipstick: Creates configurable CSS variables for new
 config editor

---
 src/components/InteractiveEditor/EditItem.vue | 22 +++++++++----------
 .../InteractiveEditor/EditModeSaveMenu.vue    |  8 +++----
 .../InteractiveEditor/EditModeTopBanner.vue   |  4 ++--
 src/styles/color-palette.scss                 |  3 +++
 src/styles/color-themes.scss                  | 19 ++++++++++++++--
 5 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index f997af1ad..34b61bde9 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -216,8 +216,8 @@ export default {
 
 .edit-item-inner {
   padding: 1rem;
-  background: var(--config-settings-background);
-  color: var(--config-settings-color);
+  background: var(--interactive-editor-background);
+  color: var(--interactive-editor-color);
   height: 100%;
   overflow-y: auto;
   @extend .svg-button;
@@ -238,7 +238,7 @@ export default {
     display: flex;
     padding: 0.5rem 0.25rem;
     &:not(:last-child) {
-      border-bottom: 1px dotted var(--config-settings-color);
+      border-bottom: 1px dotted var(--interactive-editor-color);
     }
     .input-container, .select-container {
         width: 100%;
@@ -259,14 +259,14 @@ export default {
       align-items: center;
       cursor: pointer;
       text-align: center;
-      border: 1px solid var(--config-settings-color);
+      border: 1px solid var(--interactive-editor-color);
       border-radius: var(--curve-factor);
       &:hover {
-        background: var(--config-settings-color);
-        color: var(--config-settings-background);
+        background: var(--interactive-editor-color);
+        color: var(--interactive-editor-background);
         svg {
-          background: var(--config-settings-color);
-          path { fill: var(--config-settings-background); }
+          background: var(--interactive-editor-color);
+          path { fill: var(--interactive-editor-background); }
         }
       }
       svg {
@@ -280,9 +280,9 @@ export default {
   .input-container input.input-field,
   .radio-container div.radio-wrapper,
   .form-dropdown div.vs__dropdown-toggle {
-    color: var(--config-settings-color);
-    background: var(--config-settings-background);
-    border-color: var(--config-settings-color);
+    color: var(--interactive-editor-color);
+    background: var(--interactive-editor-background);
+    border-color: var(--interactive-editor-color);
   }
 }
 </style>
diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index 937896de6..b1b14713d 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -102,8 +102,8 @@ div.edit-mode-bottom-banner {
   bottom: 0;
   width: 100%;
   padding: 0.25rem 0;
-  border-top: 2px solid var(--primary);
-  background: var(--background-darker);
+  border-top: 2px solid var(--interactive-editor-color);
+  background: var(--interactive-editor-background-darker);
   box-shadow: 0 -5px 7px var(--transparent-50);
   grid-template-columns: 45% 10% 45%;
   @include laptop-up { grid-template-columns: 40% 20% 40%; }
@@ -117,7 +117,7 @@ div.edit-mode-bottom-banner {
     /* Section sub-titles */
     p.section-sub-title {
       margin: 0;
-      color: var(--primary);
+      color: var(--interactive-editor-color);
       font-weight: bold;
       cursor: default;
     }
@@ -125,7 +125,7 @@ div.edit-mode-bottom-banner {
     &.intro-container  {
         p.edit-mode-intro {
         margin: 0;
-        color: var(--primary);
+        color: var(--interactive-editor-color);
         cursor: default;
       }
     }
diff --git a/src/components/InteractiveEditor/EditModeTopBanner.vue b/src/components/InteractiveEditor/EditModeTopBanner.vue
index 77e72716a..4d7047c6b 100644
--- a/src/components/InteractiveEditor/EditModeTopBanner.vue
+++ b/src/components/InteractiveEditor/EditModeTopBanner.vue
@@ -9,12 +9,12 @@ div.edit-mode-top-banner {
   width: 100%;
   text-align: center;
   padding: 0.2rem 0;
-  background: var(--primary);
+  background: var(--interactive-editor-color);
   opacity: var(--dimming-factor);
   span {
     font-size: 1rem;
     font-weight: bold;
-    color: var(--background);
+    color: var(--interactive-editor-background);
   }
 }
 </style>
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 074b1d090..5de5798d8 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -57,6 +57,9 @@
   --config-settings-background: var(--background-darker);
   --code-editor-color: var(--black);
   --code-editor-background: var(--white);
+  --interactive-editor-color: var(--primary);
+  --interactive-editor-background: var(--background);
+  --interactive-editor-background-darker: var(--background-darker);
   // Search bar (on homepage)
   --search-container-background: var(--background-darker);
   --search-field-background: var(--background);
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 042468151..6ff65ea07 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -217,6 +217,9 @@ html[data-theme='material-original'] {
   --item-group-heading-text-color-hover: #01579b;
   --config-settings-background: #01579b;
   --config-settings-color: #fff;
+  --interactive-editor-background: #01579b;
+  --interactive-editor-color: #fff;
+  --interactive-editor-background-darker: #29B6F6;
   --heading-text-color: #fff;
   --status-check-tooltip-background: #f2f2f2;
   --status-check-tooltip-color: #01579b;
@@ -263,6 +266,9 @@ html[data-theme='material-dark-original'] {
   --welcome-popup-text-color: var(--primary);
   --config-settings-background: #131a1f;
   --config-settings-color: #41e2ed;
+  --interactive-editor-color: #41e2ed;
+  --interactive-editor-background: #131a1f;
+  --interactive-editor-background-darker: #092b3a;
   --scroll-bar-color: #08B0BB;
   --scroll-bar-background: #131a1f;
   --status-check-tooltip-background: #131a1f;
@@ -514,6 +520,9 @@ html[data-theme='material'] {
   --config-code-color: #363636;
   --config-settings-background: #f5f5f5;
   --config-settings-color: #473f3f;
+  --interactive-editor-color: #473f3f;
+  --interactive-editor-background: #f5f5f5;
+  --interactive-editor-background-darker: #fff;
   --heading-text-color: #fff;
   --curve-factor: 3px;
   --curve-factor-navbar: 8px;
@@ -622,13 +631,16 @@ html[data-theme='material-dark'] {
   --description-tooltip-color: #e0e0e0;
   --curve-factor: 2px;
   --curve-factor-navbar: 0;
-  
   --side-bar-background: #131a1f;
-
   --welcome-popup-background: #131a1f;
   --welcome-popup-text-color: var(--primary);
+
   --config-settings-background: #131a1f;
   --config-settings-color: #41e2ed;
+  --interactive-editor-background: #131a1f;
+  --interactive-editor-background-darker: #131a1f;
+  --interactive-editor-color: #41e2ed;
+
   --scroll-bar-color: #08B0BB;
   --scroll-bar-background: #131a1f;
   // --login-form-color: #131a1f;
@@ -929,6 +941,9 @@ html[data-theme='glow'], html[data-theme=glow-colorful] {
 --nav-link-border-color-hover: var(--blue);
 --config-settings-background: var(--blue);
 --config-settings-color: var(--pink);
+--interactive-editor-background: var(--blue);
+--interactive-editor-background-darker: var(--blue);
+--interactive-editor-color: var(--pink);
 --search-label-color: var(--blue);
 --item-group-background: var(--blue);
 --item-text-color: var(--pale);

From 1ed55b42c62823583a96deaf7aef5b6194e9989f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 18 Oct 2021 22:47:32 +0100
Subject: [PATCH 26/98] :art: Apply local style vars for embeded form elements,
 and adds in-code docs

---
 src/components/InteractiveEditor/EditItem.vue | 120 ++++++++++++------
 1 file changed, 82 insertions(+), 38 deletions(-)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index 34b61bde9..c2ce79fdd 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -8,12 +8,16 @@
     @closed="modalClosed"
   >
   <div class="edit-item-inner">
+    <!-- Title and Item ID -->
     <h3 class="title">Edit Item</h3>
     <p class="sub-title">Editing {{item.title}} (ID: {{itemId}})</p>
+    <!-- If no elements added to form, show info message -->
     <p class="warning-note" v-if="formData.length === 0">
       No data configured yet. Click an attribute in the list below to add the field to the form.
     </p>
+    <!-- For each data attribute, render the correct type of input field -->
     <div class="row" v-for="(row, index) in formData" :key="row.name">
+      <!-- Text box, for text/ number/ raw input elements -->
       <Input
         v-if="row.type === 'text' || row.type === 'number'"
         v-model="formData[index].value"
@@ -22,6 +26,7 @@
         :type="row.type"
         layout="horizontal"
         />
+      <!-- Radio button, used for True or False input -->
       <Radio
         v-else-if="row.type === 'boolean'"
         v-model="formData[index].value"
@@ -30,6 +35,7 @@
         :options="['true', 'false']"
         :initialOption="boolToStr(formData[index].value)"
       />
+      <!-- Select/ dropdown for enum multiple-choice input -->
       <Select
         v-else-if="row.type === 'select'"
         v-model="formData[index].value"
@@ -37,12 +43,15 @@
         :description="row.description"
         :initialOption="formData[index].value"
         :label="row.name"
+        class="edit-item-select"
       />
+      <!-- Warning note, for any other data types, that aren't yet supported -->
       <div v-else>
         {{ row.name }} cannot currently be edited through the UI.
       </div>
       <BinIcon @click="() => removeField(row.name)" />
     </div>
+    <!-- Show Add chips, for adding more data elements to the form -->
     <div class="add-more-inputs" v-if="additionalFormData.length > 0">
       <h4>More Fields</h4>
       <div class="more-fields">
@@ -55,7 +64,8 @@
         </span>
       </div>
     </div>
-    <Button :click="saveItem">Save</Button>
+    <!-- Save to state button -->
+    <Button class="edit-item-save-btn" :click="saveItem">Save</Button>
     </div>
   </modal>
 </template>
@@ -128,43 +138,13 @@ export default {
       });
       return formData;
     },
+    /* Convert boolean to string */
     boolToStr(bool) {
       if (bool) return 'true';
       if (bool === false) return 'false';
       return undefined;
     },
-    /* Some fields require a bit of extra processing before they're saved */
-    formatBeforeSave(item) {
-      const newItem = item;
-      newItem.id = this.itemId;
-      if (newItem.hotkey) newItem.hotkey = parseInt(newItem.hotkey, 10);
-      const strToTags = (str) => {
-        const tagArr = str.split(',');
-        return tagArr.map((tag) => tag.trim().toLowerCase().replace(/[^a-z]+/, ''));
-      };
-      const strToBool = (str) => {
-        if (str === undefined) return undefined;
-        return str === 'true';
-      };
-      if (newItem.tags) newItem.tags = strToTags(newItem.tags);
-      if (newItem.statusCheck) newItem.statusCheck = strToBool(newItem.statusCheck);
-      return newItem;
-    },
-    /* Saves the updated item to VueX Store */
-    saveItem() {
-      // Convert form data back into section.item data structure
-      const structured = {};
-      this.formData.forEach((row) => { structured[row.name] = row.value; });
-      // Some attributes need a little extra formatting
-      const newItem = this.formatBeforeSave(structured);
-      // Update the data store, with new item data
-      this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
-      // If we're not already in edit mode, enable it now
-      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
-      // Close edit menu
-      this.$emit('closeEditMenu');
-    },
-    /* Adds filed from extras list to main form, then removes from extras list */
+    /* Adds field from extras list to main form, then removes from extras list */
     appendNewField(fieldId) {
       Object.keys(this.schema).forEach((property) => {
         if (property === fieldId) {
@@ -177,7 +157,7 @@ export default {
         }
       });
     },
-    /* Removes filed from main form, adds back into extras list */
+    /* On Remove Field click, removes field from main form, and adds to chip list */
     removeField(fieldId) {
       this.formData.forEach((elem, index) => {
         if (elem.name === fieldId) {
@@ -186,10 +166,9 @@ export default {
         }
       });
     },
-    /* For a given attribute, determine type from schema */
+    /* Use schema to determine type of form element to render, for a given attribute */
     getInputType(schemaItem) {
       const definedType = schemaItem.type;
-      // console.log(definedType);
       if (definedType === 'text') {
         return 'text';
       } else if (definedType === 'number') {
@@ -201,6 +180,37 @@ export default {
       }
       return 'text';
     },
+    /* Saves the updated item to VueX Store */
+    saveItem() {
+      // Convert form data back into section.item data structure
+      const structured = {};
+      this.formData.forEach((row) => { structured[row.name] = row.value; });
+      // Some attributes need a little extra formatting
+      const newItem = this.formatBeforeSave(structured);
+      // Update the data store, with new item data
+      this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+      // If we're not already in edit mode, enable it now
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+      // Close edit menu
+      this.$emit('closeEditMenu');
+    },
+    /* Some fields require a bit of extra processing before they're saved */
+    formatBeforeSave(item) {
+      const newItem = item;
+      newItem.id = this.itemId;
+      if (newItem.hotkey) newItem.hotkey = parseInt(newItem.hotkey, 10);
+      const strToTags = (str) => {
+        const tagArr = str.split(',');
+        return tagArr.map((tag) => tag.trim().toLowerCase().replace(/[^a-z]+/, ''));
+      };
+      const strToBool = (str) => {
+        if (str === undefined) return undefined;
+        return str === 'true';
+      };
+      if (newItem.tags) newItem.tags = strToTags(newItem.tags);
+      if (newItem.statusCheck) newItem.statusCheck = strToBool(newItem.statusCheck);
+      return newItem;
+    },
     /* Clean up work, triggered when modal closed */
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
@@ -276,13 +286,47 @@ export default {
     }
   }
 
-  /* Override form input colors, to use local CSS variables */
-  .input-container input.input-field,
+  /* Override form element colors, with local CSS variables */
+  div.input-container input.input-field,
   .radio-container div.radio-wrapper,
   .form-dropdown div.vs__dropdown-toggle {
     color: var(--interactive-editor-color);
+    border-color: var(--interactive-editor-color);
     background: var(--interactive-editor-background);
+  }
+  button.edit-item-save-btn {
+    color: var(--interactive-editor-color);
     border-color: var(--interactive-editor-color);
+    background: var(--interactive-editor-background);
+    &:hover {
+      color: var(--interactive-editor-background);
+      border-color: var(--interactive-editor-color);
+      background: var(--interactive-editor-color);
+    }
+  }
+  svg {
+    path { fill: var(--interactive-editor-color); }
+    background: var(--interactive-editor-background);
+    &:hover, &.selected {
+      path { fill: var(--interactive-editor-background); }
+      background: var(--interactive-editor-color);
+    }
+  }
+  .edit-item-select .v-select {
+    input.vs__search { color: var(--interactive-editor-color); }
+    div.vs__dropdown-toggle {
+      border-color: var(--interactive-editor-color);
+      background: var(--interactive-editor-background);
+      span.vs__selected { color: var(--interactive-editor-color); }
+      .vs__actions svg {
+        background: var(--interactive-editor-background);
+        path { fill: var(--interactive-editor-color); }
+        &:hover {
+          background: var(--interactive-editor-color);
+          path { fill: var(--interactive-editor-background); }
+        }
+      }
+    }
   }
 }
 </style>

From 37e49ae240ebfc08ea29993370822647a23c5f53 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 18 Oct 2021 23:18:26 +0100
Subject: [PATCH 27/98] :see_no_evil: Perform deep copy of config, to reset
 pointers

---
 src/store.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/store.js b/src/store.js
index 5c6adc1f4..0efe467cf 100644
--- a/src/store.js
+++ b/src/store.js
@@ -81,8 +81,8 @@ const store = new Vuex.Store({
   actions: {
     /* Called when app first loaded. Reads config and sets state */
     [INITIALIZE_CONFIG]({ commit }) {
-      const Accumulator = new ConfigAccumulator();
-      const config = Accumulator.config();
+      const deepCopy = (json) => JSON.parse(JSON.stringify(json));
+      const config = deepCopy(new ConfigAccumulator().config());
       commit(UPDATE_CONFIG, config);
     },
   },

From cd40bb192f2942cb13a97b166945534e4da61b6b Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 19 Oct 2021 21:57:51 +0100
Subject: [PATCH 28/98] :zap: Fixes value not updating on form init

---
 src/components/FormElements/Radio.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FormElements/Radio.vue b/src/components/FormElements/Radio.vue
index cfc0e0ff7..f3415612a 100644
--- a/src/components/FormElements/Radio.vue
+++ b/src/components/FormElements/Radio.vue
@@ -37,7 +37,7 @@ export default {
   },
   created() {
     if (this.initialOption) {
-      this.selectedRadio = this.initialOption;
+      this.updateValue(this.initialOption);
     }
   },
   computed: {

From da7717b6f2e1e0a64df2c4e0f2a117cf2570327d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:22:13 +0100
Subject: [PATCH 29/98] :sparkles: Builds a modal for exporting config to file
 or clipboard

---
 .../interactive-editor-copy-clipboard.svg     |   1 +
 .../InteractiveEditor/ExportConfigMenu.vue    | 124 ++++++++++++++++++
 2 files changed, 125 insertions(+)
 create mode 100644 src/assets/interface-icons/interactive-editor-copy-clipboard.svg
 create mode 100644 src/components/InteractiveEditor/ExportConfigMenu.vue

diff --git a/src/assets/interface-icons/interactive-editor-copy-clipboard.svg b/src/assets/interface-icons/interactive-editor-copy-clipboard.svg
new file mode 100644
index 000000000..78430407c
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-copy-clipboard.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z"></path></svg>
\ No newline at end of file
diff --git a/src/components/InteractiveEditor/ExportConfigMenu.vue b/src/components/InteractiveEditor/ExportConfigMenu.vue
new file mode 100644
index 000000000..f0a9b80fc
--- /dev/null
+++ b/src/components/InteractiveEditor/ExportConfigMenu.vue
@@ -0,0 +1,124 @@
+<template>
+<modal
+    :name="modalName"
+    :resizable="true"
+    width="50%"
+    height="80%"
+    classes="dashy-modal edit-item"
+    @closed="modalClosed"
+  >
+  <div class="export-config-inner">
+    <!-- Download and Copy to CLipboard Buttons -->
+    <h3>{{ $t('interactive-editor.export.export-title') }}</h3>
+    <div class="download-button-container">
+      <Button :click="copyConfigToClipboard"
+        v-tooltip="tooltip($t('interactive-editor.export.copy-clipboard-tooltip'))">
+        {{ $t('interactive-editor.export.copy-clipboard-btn') }}
+        <CopyConfigIcon />
+      </Button>
+      <Button :click="downloadConfig"
+        v-tooltip="tooltip($t('interactive-editor.export.download-file-tooltip'))">
+        {{ $t('interactive-editor.export.download-file-btn') }}
+        <DownloadConfigIcon />
+      </Button>
+    </div>
+    <!-- View Config in Tree Mode Section -->
+    <h3>{{ $t('interactive-editor.export.view-title') }}</h3>
+    <tree-view :data="config" class="config-tree-view" />
+  </div>
+  </modal>
+</template>
+
+<script>
+import JsYaml from 'js-yaml';
+import Button from '@/components/FormElements/Button';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+
+import DownloadConfigIcon from '@/assets/interface-icons/config-download-file.svg';
+import CopyConfigIcon from '@/assets/interface-icons/interactive-editor-copy-clipboard.svg';
+
+export default {
+  name: 'ExportConfigMenu',
+  components: {
+    Button,
+    CopyConfigIcon,
+    DownloadConfigIcon,
+  },
+  data() {
+    return {
+      modalName: modalNames.EXPORT_CONFIG_MENU,
+    };
+  },
+  props: {},
+  computed: {
+    config() {
+      return this.$store.state.config;
+    },
+  },
+  methods: {
+    convertJsonToYaml() {
+      return JsYaml.dump(this.config);
+    },
+    downloadConfig() {
+      const filename = 'dashy_conf.yml';
+      const config = this.convertJsonToYaml();
+      const element = document.createElement('a');
+      element.setAttribute('href', `data:text/plain;charset=utf-8, ${encodeURIComponent(config)}`);
+      element.setAttribute('download', filename);
+      element.style.display = 'none';
+      document.body.appendChild(element);
+      element.click();
+      document.body.removeChild(element);
+    },
+    copyConfigToClipboard() {
+      const config = this.convertJsonToYaml();
+      navigator.clipboard.writeText(config);
+      this.$toasted.show(this.$t('config.data-copied-msg'));
+    },
+    modalClosed() {
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+    tooltip(content) {
+      return {
+        content, trigger: 'hover focus', delay: 250, classes: 'in-modal-tt',
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+.tooltip { z-index: 99; }
+.export-config-inner {
+  padding: 1rem;
+  background: var(--interactive-editor-background);
+  color: var(--interactive-editor-color);
+  height: 100%;
+  overflow-y: auto;
+  h3 {
+    margin: 1rem 0;
+  }
+  .download-button-container {
+    display: flex;
+    justify-content: center;
+    padding: 0 0.5rem 1rem;
+    border-bottom: 1px dashed var(--interactive-editor-color);
+    button { margin: 0 1rem; }
+  }
+  .config-tree-view {
+    padding: 0.5rem;
+    font-family: var(--font-monospace);
+    color: var(--interactive-editor-color);
+    background: var(--interactive-editor-background-darker);
+    border-radius: var(--curve-factor);
+    box-shadow: 0px 0px 3px var(--interactive-editor-color);
+    span {
+      font-family: var(--font-monospace);
+    }
+  }
+}
+
+</style>

From 058529493e961b65e1903480b34dfa5587e1b1b1 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:23:10 +0100
Subject: [PATCH 30/98] =?UTF-8?q?=E2=9E=95=20Adds=20dependency,=20vue-json?=
 =?UTF-8?q?-tree-view=20for=20viewing=20config?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |  4 +++-
 yarn.lock    | 17 +++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d885af331..4ba488b72 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "dependency-audit": "npx improved-yarn-audit --ignore-dev-deps"
   },
   "dependencies": {
+    "@formschema/native": "^2.0.0-beta.5",
     "@sentry/tracing": "^6.13.1",
     "@sentry/vue": "^6.13.1",
     "ajv": "^8.6.3",
@@ -36,6 +37,7 @@
     "vue": "^2.6.10",
     "vue-i18n": "^8.25.1",
     "vue-js-modal": "^2.0.0-rc.6",
+    "vue-json-tree-view": "^2.1.6",
     "vue-material-tabs": "0.1.5",
     "vue-router": "^3.0.3",
     "vue-select": "^3.13.0",
@@ -94,4 +96,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 352b690fe..95e9b04c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1023,6 +1023,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@formschema/native@^2.0.0-beta.5":
+  version "2.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@formschema/native/-/native-2.0.0-beta.5.tgz#7a6cb6850c439893ca033eeb6a5ea15f98944a89"
+  integrity sha512-zu4sdtq9o4qQtsEEpSuzQJKzcLk6WH2bfwZuop82hI/H0IltjaLWJTMdjv4c9MXsS7tNvg7ytby/OnT4GzOj5w==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -6347,7 +6352,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -9809,6 +9814,14 @@ vue-js-modal@^2.0.0-rc.6:
   dependencies:
     resize-observer-polyfill "^1.5.1"
 
+vue-json-tree-view@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/vue-json-tree-view/-/vue-json-tree-view-2.1.6.tgz#a153ac1b18432b8671c65930f545ce134e38cf2d"
+  integrity sha512-gs7VDd1dC5SFQmyMdIq3O0w2IsITZfzyNFe6lsTeQwhFkh0nwWxhKWrS6opNmdOYFYmy52D9DVto78v8mF7IXQ==
+  dependencies:
+    lodash "^4.17.4"
+    vue "^2.5.16"
+
 "vue-loader-v16@npm:vue-loader@^16.1.0":
   version "16.8.1"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.8.1.tgz#354f12bc0897954158b71590f800295713a7792d"
@@ -9890,7 +9903,7 @@ vue-toasted@^1.1.28:
   resolved "https://registry.yarnpkg.com/vue-toasted/-/vue-toasted-1.1.28.tgz#dbabb83acc89f7a9e8765815e491d79f0dc65c26"
   integrity sha512-UUzr5LX51UbbiROSGZ49GOgSzFxaMHK6L00JV8fir/CYNJCpIIvNZ5YmS4Qc8Y2+Z/4VVYRpeQL2UO0G800Raw==
 
-vue@^2.6.10:
+vue@^2.5.16, vue@^2.6.10:
   version "2.6.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==

From 68cd03636a0e91dd5358ec06d02583c1bf8eb097 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:23:49 +0100
Subject: [PATCH 31/98] :globe_with_meridians: Adds new EN translations for
 editing, exporting config

---
 src/assets/locales/en.json | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 991188873..50d4be385 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -37,7 +37,7 @@
     "edit-config-tab": "Edit Config",
     "custom-css-tab": "Custom Styles",
     "heading": "Configuration Options",
-    "download-config-button": "Download Config",
+    "download-config-button": "View / Export Config",
     "edit-config-button": "Edit Config",
     "edit-css-button": "Edit Custom CSS",
     "cloud-sync-button": "Enable Cloud Sync",
@@ -164,26 +164,42 @@
     "restore-success-msg": "Config Restored Successfully"
   },
   "menu": {
+    "open-section-title": "Open In",
     "sametab": "Current Tab",
     "newtab": "New Tab",
     "modal": "Pop-Up Modal",
-    "workspace": "Workspace View"
+    "workspace": "Workspace View",
+    "options-section-title": "Options",
+    "edit-item": "Edit",
+    "move-item": "Move To",
+    "remove-item": "Remove"
   },
   "interactive-editor": {
+    "start-editing-tooltip": "Enter the Interactive Editor",
+    "edit-site-data-subheading": "Edit Site Data",
     "edit-page-info-btn": "Edit Page Info",
     "edit-page-info-tooltip": "App title, description, nav links, footer text, etc",
     "edit-app-config-btn": "Edit App Config",
     "edit-app-config-tooltip": "All other app configuration options",
+    "config-save-methods-subheading": "Config Saving Options",
     "save-locally-btn": "Save Locally",
     "save-locally-tooltip": "Save config locally, to browser storage. This will not affect your config file, but changes will only be saved on this device",
     "save-disk-btn": "Save to Disk",
     "save-disk-tooltip": "Save config to the conf.yml file on disk. This will backup, and then over-write your existing config",
     "export-config-btn": "Export Config",
     "export-config-tooltip": "View and export new config, either to a file, or to clipboard",
-    "cancel-changes-btn": "Reset Changes",
-    "cancel-changes-tooltip": "Reset current modifications. This will not affect your saved config",
+    "cancel-changes-btn": "Cancel Edit",
+    "cancel-changes-tooltip": "Reset current modifications, and exit Edit Mode. This will not affect your saved config",
     "edit-mode-name": "Edit Mode",
     "edit-mode-subtitle": "You are in Edit Mode",
-    "edit-mode-description": "This means you can make modifications to your config, and preview the results, but until you save, none of your changes will be preserved."
+    "edit-mode-description": "This means you can make modifications to your config, and preview the results, but until you save, none of your changes will be preserved.",
+    "export": {
+      "export-title": "Export Config",
+      "copy-clipboard-btn": "Copy to Clipboard",
+      "copy-clipboard-tooltip": "Copy all app config to system clipboard, in YAML format",
+      "download-file-btn": "Download as File",
+      "download-file-tooltip": "Download all app config to your device, in a YAML file",
+      "view-title": "View Config"
+    }
   }
 }
\ No newline at end of file

From 48947785bd5b54fed98539665854b841087947d7 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:24:43 +0100
Subject: [PATCH 32/98] :zap: Adds ExportConfigMenu to Home view

---
 src/views/Home.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1a33412a3..ccfac14b9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -49,6 +49,7 @@
       {{searchValue ? $t('home.no-results') : $t('home.no-data')}}
     </div>
     <EditModeSaveMenu v-if="isEditMode" />
+    <ExportConfigMenu />
   </div>
 </template>
 
@@ -57,6 +58,7 @@
 import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
 import Section from '@/components/LinkItems/Section.vue';
 import EditModeSaveMenu from '@/components/InteractiveEditor/EditModeSaveMenu.vue';
+import ExportConfigMenu from '@/components/InteractiveEditor/ExportConfigMenu.vue';
 import { searchTiles } from '@/utils/Search';
 import Defaults, { localStorageKeys, iconCdns } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
@@ -67,6 +69,7 @@ export default {
   components: {
     SettingsContainer,
     EditModeSaveMenu,
+    ExportConfigMenu,
     Section,
     BackIcon,
   },

From b90301e479a5d0d3b0726d568ed88eb1bd7b26fd Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:25:27 +0100
Subject: [PATCH 33/98] :lipstick: Adds CSS for disabled SVG button option

---
 src/styles/style-helpers.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/styles/style-helpers.scss b/src/styles/style-helpers.scss
index 7bac6d6d2..ce2acc2a4 100644
--- a/src/styles/style-helpers.scss
+++ b/src/styles/style-helpers.scss
@@ -34,6 +34,15 @@
             background: var(--settings-text-color);
             path { fill: var(--background); }
         }
+        &.disabled {
+            opacity: var(--dimming-factor);
+            cursor: not-allowed;
+            &:hover {
+                border: 1px solid currentColor;
+                background: var(--background);
+                path { fill: var(--settings-text-color); }
+            }
+        }
     }
 }
 

From 7d0647f582962a203fce3d2df04d9bf32655cd13 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:26:03 +0100
Subject: [PATCH 34/98] :lipstick: Adds CSS option for tooltip to have higher
 z-index

---
 src/styles/global-styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index a5b170b25..710e78ade 100644
--- a/src/styles/global-styles.scss
+++ b/src/styles/global-styles.scss
@@ -154,7 +154,6 @@ html {
       margin: var(--tooltip-arrow-size) 0;
     }
   }
-
   &[aria-hidden='true'] {
     visibility: hidden;
     opacity: 0;
@@ -165,4 +164,5 @@ html {
     opacity: 1;
     transition: opacity .15s;
   }
+  &.in-modal-tt { z-index: 999; }
 }

From 4fe3d5c5a0ef828381408bf82438c9a79c5401d7 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:26:55 +0100
Subject: [PATCH 35/98] :construction: Adds option for Move and Delete item,
 plus translations

---
 src/components/LinkItems/ContextMenu.vue | 28 +++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/LinkItems/ContextMenu.vue b/src/components/LinkItems/ContextMenu.vue
index 09356a93a..dd90064ff 100644
--- a/src/components/LinkItems/ContextMenu.vue
+++ b/src/components/LinkItems/ContextMenu.vue
@@ -2,8 +2,11 @@
   <transition name="slide">
     <div class="context-menu" v-if="show && !isMenuDisabled"
       :style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
+      <!-- Open Options -->
       <ul class="menu-section">
-        <li class="section-title">Open In</li>
+        <li class="section-title">
+          {{ $t('menu.open-section-title') }}
+        </li>
         <li @click="launch('sametab')">
           <SameTabOpenIcon />
           <span>{{ $t('menu.sametab') }}</span>
@@ -21,11 +24,22 @@
           <span>{{ $t('menu.workspace') }}</span>
         </li>
       </ul>
+      <!-- Edit Options -->
       <ul class="menu-section">
-        <li class="section-title">Options</li>
+        <li class="section-title">
+          {{ $t('menu.options-section-title') }}
+        </li>
         <li @click="openSettings()">
           <EditIcon />
-          <span>Edit</span>
+          <span>{{ $t('menu.edit-item') }}</span>
+        </li>
+        <li v-if="isEditMode">
+          <MoveIcon />
+          <span>{{ $t('menu.move-item') }}</span>
+        </li>
+        <li v-if="isEditMode">
+          <BinIcon />
+          <span>{{ $t('menu.remove-item') }}</span>
         </li>
       </ul>
     </div>
@@ -35,6 +49,9 @@
 <script>
 // Import icons for each element
 import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
+import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
+import MoveIcon from '@/assets/interface-icons/interactive-editor-move-to.svg';
+
 import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
 import NewTabOpenIcon from '@/assets/interface-icons/open-new-tab.svg';
 import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg';
@@ -44,6 +61,8 @@ export default {
   name: 'ContextMenu',
   components: {
     EditIcon,
+    MoveIcon,
+    BinIcon,
     SameTabOpenIcon,
     NewTabOpenIcon,
     IframeOpenIcon,
@@ -58,6 +77,9 @@ export default {
     isMenuDisabled() {
       return !!this.$store.getters.appConfig.disableContextMenu;
     },
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
   },
   methods: {
     /* Called on item click, emits an event up to Item */

From fbbc5e075328f8eff10d97d287a14edaab00cd04 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:27:38 +0100
Subject: [PATCH 36/98] :heavy_plus_sign: Imports Vue-JSON-tree component

---
 src/main.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/main.js b/src/main.js
index f1a7f1a02..8b8fac3be 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import VModal from 'vue-js-modal';      // Modal component
 import VSelect from 'vue-select';       // Select dropdown component
 import VTabs from 'vue-material-tabs';  // Tab view component, used on the config page
 import Toasted from 'vue-toasted';      // Toast component, used to show confirmation notifications
+import TreeView from 'vue-json-tree-view';
 
 // Import base Dashy components and utils
 import Dashy from '@/App.vue';          // Main Dashy Vue app
@@ -27,6 +28,7 @@ Vue.use(VueI18n);
 Vue.use(VTooltip, tooltipOptions);
 Vue.use(VModal);
 Vue.use(VTabs);
+Vue.use(TreeView);
 Vue.use(Toasted, toastedOptions);
 Vue.component('v-select', VSelect);
 Vue.directive('clickOutside', clickOutside);

From 269e6a93bfade897bd95ddcb27b31e37fe6b2684 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:28:41 +0100
Subject: [PATCH 37/98] :bento: Adds icons for editing, moving items

---
 src/assets/interface-icons/interactive-editor-move-to.svg       | 1 +
 src/assets/interface-icons/interactive-editor-start-editing.svg | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 src/assets/interface-icons/interactive-editor-move-to.svg
 create mode 100644 src/assets/interface-icons/interactive-editor-start-editing.svg

diff --git a/src/assets/interface-icons/interactive-editor-move-to.svg b/src/assets/interface-icons/interactive-editor-move-to.svg
new file mode 100644
index 000000000..4a3794d78
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-move-to.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exchange" class="svg-inline--fa fa-exchange fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M0 168v-16c0-13.255 10.745-24 24-24h381.97l-30.467-27.728c-9.815-9.289-10.03-24.846-.474-34.402l10.84-10.84c9.373-9.373 24.568-9.373 33.941 0l82.817 82.343c12.497 12.497 12.497 32.758 0 45.255l-82.817 82.343c-9.373 9.373-24.569 9.373-33.941 0l-10.84-10.84c-9.556-9.556-9.341-25.114.474-34.402L405.97 192H24c-13.255 0-24-10.745-24-24zm488 152H106.03l30.467-27.728c9.815-9.289 10.03-24.846.474-34.402l-10.84-10.84c-9.373-9.373-24.568-9.373-33.941 0L9.373 329.373c-12.497 12.497-12.497 32.758 0 45.255l82.817 82.343c9.373 9.373 24.569 9.373 33.941 0l10.84-10.84c9.556-9.556 9.341-25.113-.474-34.402L106.03 384H488c13.255 0 24-10.745 24-24v-16c0-13.255-10.745-24-24-24z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/interface-icons/interactive-editor-start-editing.svg b/src/assets/interface-icons/interactive-editor-start-editing.svg
new file mode 100644
index 000000000..d85eef0b4
--- /dev/null
+++ b/src/assets/interface-icons/interactive-editor-start-editing.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="pencil-alt" class="svg-inline--fa fa-pencil-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M493.255 56.236l-37.49-37.49c-24.993-24.993-65.515-24.994-90.51 0L12.838 371.162.151 485.346c-1.698 15.286 11.22 28.203 26.504 26.504l114.184-12.687 352.417-352.417c24.992-24.994 24.992-65.517-.001-90.51zM164.686 347.313c6.249 6.249 16.379 6.248 22.627 0L368 166.627l30.059 30.059L174 420.745V386h-48v-48H91.255l224.059-224.059L345.373 144 164.686 324.687c-6.249 6.248-6.249 16.378 0 22.626zm-38.539 121.285l-58.995 6.555-30.305-30.305 6.555-58.995L63.255 366H98v48h48v34.745l-19.853 19.853zm344.48-344.48l-49.941 49.941-82.745-82.745 49.941-49.941c12.505-12.505 32.748-12.507 45.255 0l37.49 37.49c12.506 12.506 12.507 32.747 0 45.255z"></path></svg>
\ No newline at end of file

From 2876357297627e0dddef164385d8364bd3936c60 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:29:44 +0100
Subject: [PATCH 38/98] :fire: Replaces old export code, with new export modal

---
 .../Configuration/ConfigContainer.vue           | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index 782cc2561..3ee00cecf 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -4,7 +4,7 @@
       <div class="main-options-container">
         <div class="config-buttons">
           <h2>Configuration Options</h2>
-          <a class="hyperlink-wrapper"  @click="downloadConfigFile('conf.yml', yaml)">
+          <a class="hyperlink-wrapper"  @click="openExportConfigModal()">
             <button class="config-button center">
               <DownloadIcon class="button-icon"/>
               {{ $t('config.download-config-button') }}
@@ -134,9 +134,8 @@ export default {
     openLanguageSwitchModal() {
       this.$modal.show(modalNames.LANG_SWITCHER);
     },
-    copyConfigToClipboard() {
-      navigator.clipboard.writeText(this.jsonParser(this.config));
-      this.$toasted.show(this.$t('config.data-copied-msg'));
+    openExportConfigModal() {
+      this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
     },
     /* Checks that the user is sure, then resets site-wide local storage, and reloads page */
     resetLocalSettings() {
@@ -151,16 +150,6 @@ export default {
         }, 1900);
       }
     },
-    /* Generates a new file, with the YAML contents, and triggers a download */
-    downloadConfigFile(filename, filecontents) {
-      const element = document.createElement('a');
-      element.setAttribute('href', `data:text/plain;charset=utf-8, ${encodeURIComponent(filecontents)}`);
-      element.setAttribute('download', filename);
-      element.style.display = 'none';
-      document.body.appendChild(element);
-      element.click();
-      document.body.removeChild(element);
-    },
     getLanguage() {
       const lang = getUsersLanguage();
       return lang ? `${lang.flag} ${lang.name}` : '';

From 6f927797d821c3e46005f203612f168e5d6522fc Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:30:43 +0100
Subject: [PATCH 39/98] :sparkles: Adds an option to enable edit mode, in
 settings

---
 src/components/Settings/ConfigLauncher.vue | 42 ++++++++++++----------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 18c227b2b..da90aed29 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -5,7 +5,10 @@
     <div class="config-buttons">
       <IconSpanner @click="showEditor()" tabindex="-2"
         v-tooltip="tooltip($t('settings.config-launcher-tooltip'))" />
-       <IconViewMode @click="openChangeViewMenu()" tabindex="-2"
+      <IconInteractiveEditor @click="startInteractiveEditor()" tabindex="-2"
+        v-tooltip="tooltip(enterEditModeTooltip)"
+        :class="isEditMode ? 'disabled' : ''" />
+      <IconViewMode @click="openChangeViewMenu()" tabindex="-2"
         v-tooltip="tooltip($t('alternate-views.alternate-view-heading'))" />
     </div>
 
@@ -50,6 +53,7 @@ import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
 import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
 import Keys from '@/utils/StoreMutations';
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
+import IconInteractiveEditor from '@/assets/interface-icons/interactive-editor-start-editing.svg';
 import IconViewMode from '@/assets/interface-icons/application-change-view.svg';
 import IconHome from '@/assets/interface-icons/application-home.svg';
 import IconWorkspaceView from '@/assets/interface-icons/open-workspace.svg';
@@ -67,6 +71,7 @@ export default {
     ConfigContainer,
     LanguageSwitcher,
     IconSpanner,
+    IconInteractiveEditor,
     IconViewMode,
     IconHome,
     IconWorkspaceView,
@@ -82,6 +87,15 @@ export default {
     pageInfo() {
       return this.$store.getters.pageInfo;
     },
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
+    enterEditModeTooltip() {
+      // Change tooltip text for 'Enter Edit Mode' button, when already in Edit Mode
+      return this.$t(
+        `interactive-editor.${this.isEditMode ? 'edit-mode-subtitle' : 'start-editing-tooltip'}`,
+      );
+    },
   },
   methods: {
     showEditor: function show() {
@@ -109,34 +123,24 @@ export default {
     closeViewSwitcher() {
       this.viewSwitcherOpen = false;
     },
+    startInteractiveEditor() {
+      if (!this.isEditMode) {
+        this.$store.commit(Keys.SET_EDIT_MODE, true);
+      }
+    },
   },
 };
 </script>
 
 <style scoped lang="scss">
+@import '@/styles/style-helpers.scss';
+
 .config-options {
+  @extend .svg-button;
   display: flex;
   flex-direction: column;
   color: var(--settings-text-color);
   min-width: 3.2rem;
-  svg {
-    path {
-      fill: var(--settings-text-color);
-    }
-    width: 1rem;
-    height: 1rem;
-    margin: 0.2rem;
-    padding: 0.2rem;
-    text-align: center;
-    background: var(--background);
-    border: 1px solid currentColor;
-    border-radius: var(--curve-factor);
-    cursor: pointer;
-    &:hover, &.selected {
-      background: var(--settings-text-color);
-      path { fill: var(--background); }
-    }
-  }
 }
 
 .view-switcher {

From a48024e59c6d50a3e65387cb6681e514e6a3e782 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 22 Oct 2021 00:31:24 +0100
Subject: [PATCH 40/98] :memo: Adds docs for Dashy remote access

---
 docs/management.md | 134 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 127 insertions(+), 7 deletions(-)

diff --git a/docs/management.md b/docs/management.md
index f77880649..e48bec60a 100644
--- a/docs/management.md
+++ b/docs/management.md
@@ -1,6 +1,6 @@
 # Management
 
-_The following article explains aspects of app management, and is useful to know for when self-hosting. It covers everything from keeping the app up-to-date, secure, backed up, to other topics like auto-starting, monitoring, log management, web server configuration and using custom environments. Most of it is aimed at running the Dashy (or any other app) in a container, but some of it also applies to bare metal setups too. It's like a top-15 list of need-to-know knowledge for self-hosting._
+_The following article explains aspects of app management, and is useful to know for when self-hosting. It covers everything from keeping the app up-to-date, secure, backed up, to other topics like auto-starting, monitoring, log management, web server configuration and using custom environments. Most of it is aimed at running the Dashy (or any other app) in a container, but some of it also applies to bare metal setups too. It's like a top-20 list of need-to-know knowledge for self-hosting._
 
 ## Contents
 - [Providing Assets](#providing-assets)
@@ -16,8 +16,10 @@ _The following article explains aspects of app management, and is useful to know
 - [Managing with Compose](#managing-containers-with-docker-compose)
 - [Environmental Variables](#passing-in-environmental-variables)
 - [Securing Containers](#container-security)
+- [Remote Access](#remote-access)
 - [Web Server Configuration](#web-server-configuration)
-- [Running a Modified Apps](#running-a-modified-version-of-the-app)
+- [Running a Modified App](#running-a-modified-version-of-the-app)
+- [Building your Own Container](#building-your-own-container)
 
 ---
 
@@ -37,9 +39,9 @@ In Dashy, commonly configured resources include:
 ---
 ## Running Commands
 
-The project has a few commands that can be used for various tasks, you can find a list of these either in the [Developing Docs](/docs/developing.md#project-commands), or by looking at the [`package.json`](https://github.com/Lissy93/dashy/blob/master/package.json#L5). These can be used by running `yarn [command-name]`.
+ If you're running an app in Docker, then commands will need to be passed to the container to be executed. This can be done by preceding each command with `docker exec -it [container-id]`, where container ID can be found by running `docker ps`. For example `docker exec -it 26c156c467b4 yarn build`. You can also enter the container, with `docker exec -it [container-id] /bin/ash`, and navigate around it with normal Linux commands.
 
- If you're using Docker, then you'll need to execute them within the container. This can be done by preceding each command with `docker exec -it [container-id]`, where container ID can be found by running `docker ps`. For example `docker exec -it 26c156c467b4 yarn build`. You can also enter the container, with `docker exec -it [container-id] /bin/ash`, and navigate around it with normal Linux commands.
+ Dashy has several commands that can be used for various tasks, you can find a list of these either in the [Developing Docs](/docs/developing.md#project-commands), or by looking at the [`package.json`](https://github.com/Lissy93/dashy/blob/master/package.json#L5). These can be used by running `yarn [command-name]`.
 
 **[⬆️ Back to Top](#management)**
 
@@ -48,7 +50,7 @@ The project has a few commands that can be used for various tasks, you can find
 
 Healthchecks are configured to periodically check that Dashy is up and running correctly on the specified port. By default, the health script is called every 5 minutes, but this can be modified with the `--health-interval` option. You can check the current container health with: `docker inspect --format "{{json .State.Health }}" [container-id]`, and a summary of health status will show up under `docker ps`. You can also manually request the current application status by running `docker exec -it [container-id] yarn health-check`. You can disable healthchecks altogether by adding the `--no-healthcheck` flag to your Docker run command.
 
-To restart unhealthy containers automatically, check out [Autoheal](https://hub.docker.com/r/willfarrell/autoheal/). This image watches for unhealthy containers, and automatically triggers a restart. (This is a stand in for Docker's `--exit-on-unhealthy` that was proposed, but [not merged](https://github.com/moby/moby/pull/22719)).
+To restart unhealthy containers automatically, check out [Autoheal](https://hub.docker.com/r/willfarrell/autoheal/). This image watches for unhealthy containers, and automatically triggers a restart. (This is a stand in for Docker's `--exit-on-unhealthy` that was proposed, but [not merged](https://github.com/moby/moby/pull/22719)). There's also [Deunhealth](https://github.com/qdm12/deunhealth), which is super light-weight, and doesn't require network access.
 
 ```
 docker run -d \
@@ -392,6 +394,114 @@ Docker supports several modules that let you write your own security profiles.
 [Seccomp](https://en.wikipedia.org/wiki/Seccomp) (Secure Computing Mode) is a sandboxing facility in the Linux kernel that acts like a firewall for system calls (syscalls). It uses Berkeley Packet Filter (BPF) rules to filter syscalls and control how they are handled. These filters can significantly limit a containers access to the Docker Host’s Linux kernel - especially for simple containers/applications. It requires a Linux-based Docker host, with secomp enabled, and you can check for this by running `docker info | grep seccomp`. A great resource for learning more about this is [DockerLabs](https://training.play-with-docker.com/security-seccomp/).
 
 
+**[⬆️ Back to Top](#management)**
+
+---
+
+## Remote Access
+
+### WireGuard
+
+Using a VPN is one of the easiest ways to provide secure, full access to your local network from remote locations. [WireGuard](https://www.wireguard.com/) is a reasonably new open source VPN protocol, that was designed with ease of use, performance and security in mind. Unlike OpenVPN, it doesn't need to recreate the tunnel whenever connection is dropped, and it's also much easier to setup, using shared keys instead. 
+
+- **Install Wireguard** - See the [Install Docs](https://www.wireguard.com/install/) for download links + instructions
+	- On Debian-based systems, it's `sudo apt install wireguard`
+- **Generate a Private Key** - Run `wg genkey` on the Wireguard server, and copy it to somewhere safe for later
+- **Create Server Config** - Open or create a file at `/etc/wireguard/wg0.conf` and under `[Interface]` add the following (see example below):
+	- `Address` - as a subnet of all desired IPs
+	- `PrivateKey` - that you just generated
+	- `ListenPort` - Default is `51820`, but can be anything
+- **Get Client App** - Download the [WG client app](https://www.wireguard.com/install/) for your platform (Linux, Windows, MacOS, Android or iOS are all supported)
+- **Create new Client Tunnel** - On your client app, there should be an option to create a new tunnel, when doing so a client private key will be generated (but if not, use the `wg genkey` command again), and keep it somewhere safe. A public key will also be generated, and this will go in our saver config
+- **Add Clients to Server Config** - Head back to your `wg0.conf` file on the server, create a `[Peer]` section, and populate the following info
+	- `AllowedIPs` - List of IP address inside the subnet, the client should have access to
+	- `PublicKey` - The public key for the client you just generated
+- **Start the Server** - You can now start the WG server, using: `wg-quick up wg0` on your server
+- **Finish Client Setup** - Head back to your client device, and edit the config file, leave the private key as is, and add the following fields:
+	- `PublicKey` - The public key of the server
+	- `Address` - This should match the `AllowedIPs` section on the servers config file
+	- `DNS` - The DNS server that'll be used when accessing the network through the VPN
+	- `Endpoint` - The hostname or IP + Port where your WG server is running (you may need to forward this in your firewall's settings)
+- **Done** - Your clients should now be able to connect to your WG server :) Depending on your networks firewall rules, you may need to port forward the address of your WG server
+
+**Example Server Config**
+
+```ini
+# Server file
+[Interface]
+# Which networks does my interface belong to? Notice: /24 and /64
+Address = 10.5.0.1/24, 2001:470:xxxx:xxxx::1/64
+PrivateKey = xxx
+ListenPort = 51820
+
+# Peer 1
+[Peer]
+PublicKey = xxx
+# Which source IPs can I expect from that peer? Notice: /32 and /128
+AllowedIps = 10.5.0.35/32, 2001:470:xxxx:xxxx::746f:786f/128
+
+# Peer 2
+[Peer]
+PublicKey = xxx
+# Which source IPs can I expect from that peer? This one has a LAN which can
+# access hosts/jails without NAT.
+# Peer 2 has a single IP address inside the VPN: it's 10.5.0.25/32
+AllowedIps = 10.5.0.25/32,10.21.10.0/24,10.21.20.0/24,10.21.30.0/24,10.31.0.0/24,2001:470:xxxx:xxxx::ca:571e/128
+```
+
+**Example Client Config**
+
+```ini
+[Interface]
+# Which networks does my interface belong to? Notice: /24 and /64
+Address = 10.5.0.35/24, 2001:470:xxxx:xxxx::746f:786f/64
+PrivateKey = xxx
+
+# Server
+[Peer]
+PublicKey = xxx
+# I want to route everything through the server, both IPv4 and IPv6. All IPs are
+# thus available through the Server, and I can expect packets from any IP to
+# come from that peer.
+AllowedIPs = 0.0.0.0/0, ::0/0
+# Where is the server on the internet? This is a public address. The port
+# (:51820) is the same as ListenPort in the [Interface] of the Server file above
+Endpoint = 1.2.3.4:51820
+# Usually, clients are behind NAT. to keep the connection running, keep alive.
+PersistentKeepalive = 15
+```
+
+
+A useful tool for getting WG setup is [Algo](https://github.com/trailofbits/algo). It includes scripts and docs which cover almost all devices, platforms and clients, and has best practices implemented, and security features enabled. All of this is better explained in [this blog post](https://blog.trailofbits.com/2016/12/12/meet-algo-the-vpn-that-works/).
+
+
+### Reverse SSH Tunnel
+
+SSH (or [Secure Shell](https://en.wikipedia.org/wiki/Secure_Shell)) is a secure tunnel that allows you to connect to a remote host. Unlike the VPN methods, an SSH connection does not require an intermediary, and will not be affected by your IP changing. However it only allows you to access a single service at a time. SSH was really designed for terminal access, but because of the latter mentioned benefits it's useful to setup, as a fallback option.
+
+Directly SSH'ing into your home, would require you to open a port (usually 22), which would be terrible for security, and is not recommended. However a reverse SSH connection is initiated from inside your network. Once the connection is established, the port is redirected, allowing you to use the established connection to SSH into your home network. 
+
+The issue you've probably spotted, is that most public, corporate, and institutional networks will block SSH connections. To overcome this, you'd have to establish a server outside of your homelab that your homelab's device could SSH into to establish the reverse SSH connection. You can then connect to that remote server (the _mothership_), which in turn connects to your home network.
+
+Now all of this is starting to sound like quite a lot of work, but this is where services like [remot3.it](https://remote.it/) come in. They maintain the intermediary mothership server, and create the tunnel service for you. It's free for personal use, secure and easy. There are several similar services, such as [RemoteIoT](https://remoteiot.com/), or you could create your own on a cloud VPS (see [this tutorial](https://gist.github.com/nileshtrivedi/4c615e8d3c1bf053b0d31176b9e69e42) for more info on that).
+
+Before getting started, you'll need to head over to [Remote.it](https://app.remote.it/auth/#/sign-up) and create an account.
+
+Then setup your local device:
+1. If you haven't already done so, you'll need to enable and configure SSH.
+	- This is out-of-scope of this article, but I've explained it in detail in [this post](https://notes.aliciasykes.com/22798/my-server-setup#configure-ssh).
+2. Download the Remote.it install script from their [GitHub](https://github.com/remoteit/installer)
+	- `curl -LkO https://github.com/raw/remoteit/installer/master/scripts/auto-install.sh`
+3. Make it executable, with `chmod +x ./auto-install.sh`, and then run it with `sudo ./auto-install.sh`
+4. Finally, configure your device, by running `sudo connectd_installer` and following the on-screen instructions
+
+And when you're ready to connect to it:
+1. Login to [app.remote.it](https://app.remote.it/), and select the name of your device
+2. You should see a list of running services, click SSH
+3. You'll then be presented with some SSH credentials that you can now use to securely connect to your home, via the Remote.it servers
+
+Done :)
+
 **[⬆️ Back to Top](#management)**
 
 ---
@@ -475,9 +585,17 @@ Then restart Apache, with `sudo systemctl restart apache2`
 
 If you'd like to make any code changes to the app, and deploy your modified version, this section briefly explains how.
 
-The first step is to fork the project on GitHub, and clone it to your local system. Next, install the dependencies (`yarn`), and start the development server (`yarn dev`) and visit `localhost:8080` in your browser. You can then make changes to the codebase, and see the live app update in real-time. Once you've finished, running `yarn build` will build the app for production, and output the assets into `./dist` which can then be deployed using a web server, CDN or the built-in Node server with `yarn start`. For more info on all of this, take a look at the [Developing Docs](/docs/developing.md).
+The first step is to fork the project on GitHub, and clone it to your local system. Next, install the dependencies (`yarn`), and start the development server (`yarn dev`) and visit `localhost:8080` in your browser. You can then make changes to the codebase, and see the live app update in real-time. Once you've finished, running `yarn build` will build the app for production, and output the assets into `./dist` which can then be deployed using a web server, CDN or the built-in Node server with `yarn start`. For more info on all of this, take a look at the [Developing Docs](/docs/developing.md). To build your own Docker container from the modified app, see [Building your Own Container](#building-your-own-container)
 
-You probably want to deploy your app with Docker, and this can be done as follows:
+**[⬆️ Back to Top](#management)**
+
+---
+
+## Building your Own Container
+
+Similar to above, you'll first need to fork and clone Dashy to your local system, and then install dependencies.
+
+Then, either use Dashy's default [`Dockerfile`](https://github.com/Lissy93/dashy/blob/master/Dockerfile) as is, or modify it according to your needs.
 
 To build and deploy locally, first build the app with: `docker build -t dashy .`, and then start the app with `docker run -p 8080:80 --name my-dashboard dashy`.  Or modify the `docker-compose.yml` file, replacing `image: lissy93/dashy` with `build: .` and run `docker compose up`.
 
@@ -487,3 +605,5 @@ You may wish to upload your image to a container registry for easier access. Not
 You can push your build image, by running: `docker push ghcr.io/OWNER/IMAGE_NAME:latest`. You will first need to authenticate, this can be done by running `echo $CR_PAT | docker login ghcr.io -u USERNAME --password-stdin`, where `CR_PAT` is an environmental variable containing a token generated from your GitHub account. For more info, see the [Container Registry Docs](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-container-registry).
 
 **[⬆️ Back to Top](#management)**
+
+---
\ No newline at end of file

From 8147f40e9c5aa125a84d8c6f650a2c73d6889ab6 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 23 Oct 2021 13:07:30 +0100
Subject: [PATCH 41/98] :sparkles: Adds ability to edit pageInfo through the UI

---
 src/assets/locales/en.json                    |  1 +
 src/components/FormElements/Button.vue        | 24 ++++-
 .../InteractiveEditor/EditModeSaveMenu.vue    | 34 ++++++-
 .../InteractiveEditor/EditPageInfo.vue        | 96 +++++++++++++++++++
 src/store.js                                  |  6 ++
 src/styles/color-themes.scss                  |  2 +-
 src/styles/style-helpers.scss                 | 47 +++++++++
 src/utils/ConfigSchema.json                   |  6 ++
 src/utils/StoreMutations.js                   |  3 +-
 src/utils/defaults.js                         |  4 +
 10 files changed, 214 insertions(+), 9 deletions(-)
 create mode 100644 src/components/InteractiveEditor/EditPageInfo.vue

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 50d4be385..350bf5b96 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -193,6 +193,7 @@
     "edit-mode-name": "Edit Mode",
     "edit-mode-subtitle": "You are in Edit Mode",
     "edit-mode-description": "This means you can make modifications to your config, and preview the results, but until you save, none of your changes will be preserved.",
+    "save-stage-btn": "Save",
     "export": {
       "export-title": "Export Config",
       "copy-clipboard-btn": "Copy to Clipboard",
diff --git a/src/components/FormElements/Button.vue b/src/components/FormElements/Button.vue
index 54b3265bd..d2da7a7c3 100644
--- a/src/components/FormElements/Button.vue
+++ b/src/components/FormElements/Button.vue
@@ -1,8 +1,11 @@
 <template>
   <button
     @click="click ? click() : () => null"
-    :disabled="disabled"
     :class="disallow ? 'disallowed': ''"
+    :type="type || 'button'"
+    :disabled="disabled"
+    v-tooltip="hoverText"
+    :title="tooltip"
   >
     <slot></slot>
     <slot name="text"></slot>
@@ -15,10 +18,21 @@
 export default {
   name: 'Button',
   props: {
-    text: String,
-    click: Function,
-    disabled: Boolean,
-    disallow: Boolean,
+    text: String, // The text to be displayed in the button
+    click: Function, // Function to call when clicked
+    disabled: Boolean, // If true, button cannot be clicked
+    disallow: Boolean, // Show not-allowed cursor when true
+    type: String, // The html button type attribute
+    tooltip: String, // Text to be displayed on hover
+  },
+  computed: {
+    /* If tooltip prop specified, then return config for v-tooltip */
+    hoverText() {
+      const content = this.tooltip;
+      const trigger = 'hover focus';
+      const delay = { show: 350, hide: 100 };
+      return (content) ? { content, trigger, delay } : undefined;
+    },
   },
 };
 </script>
diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index b1b14713d..8d0318460 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -12,8 +12,11 @@
     <div class="edit-banner-section empty-space"></div>
     <!-- Save Buttons -->
     <div class="edit-banner-section save-buttons-container">
-      <p class="section-sub-title">Config Saving Options</p>
+      <p class="section-sub-title">
+        {{ $t('interactive-editor.config-save-methods-subheading') }}
+      </p>
       <Button
+        :click="openExportConfigMenu"
         v-tooltip="tooltip($t('interactive-editor.export-config-tooltip'))"
       >
         {{ $t('interactive-editor.export-config-btn') }}
@@ -41,8 +44,11 @@
     </div>
     <!-- Open Modal Buttons -->
     <div class="edit-banner-section edit-site-config-buttons">
-      <p class="section-sub-title">Edit Site Data</p>
+      <p class="section-sub-title">
+        {{ $t('interactive-editor.edit-site-data-subheading') }}
+      </p>
       <Button
+        :click="openEditPageInfo"
         v-tooltip="tooltip($t('interactive-editor.edit-page-info-tooltip'))"
       >
         {{ $t('interactive-editor.edit-page-info-btn') }}
@@ -55,12 +61,16 @@
         <AppConfigIcon />
       </Button>
     </div>
+    <!-- Modals for editing appConfig + pageInfo -->
+    <EditPageInfo />
   </div>
 </template>
 
 <script>
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo';
 
 import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
 import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
@@ -73,6 +83,7 @@ export default {
   name: 'EditModeSaveMenu',
   components: {
     Button,
+    EditPageInfo,
     SaveLocallyIcon,
     SaveToDiskIcon,
     ExportIcon,
@@ -88,6 +99,14 @@ export default {
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
     },
+    openExportConfigMenu() {
+      this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
+    openEditPageInfo() {
+      this.$modal.show(modalNames.EDIT_PAGE_INFO);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
   },
 };
 </script>
@@ -159,5 +178,16 @@ div.edit-mode-bottom-banner {
       flex-direction: column;
     }
   }
+  /* Set colors for buttons */
+  .edit-banner-section button {
+    color: var(--interactive-editor-color);
+    border-color: var(--interactive-editor-color);
+    background: var(--interactive-editor-background);
+    &:hover {
+      color: var(--interactive-editor-background);
+      border-color: var(--interactive-editor-color);
+      background: var(--interactive-editor-color);
+    }
+  }
 }
 </style>
diff --git a/src/components/InteractiveEditor/EditPageInfo.vue b/src/components/InteractiveEditor/EditPageInfo.vue
new file mode 100644
index 000000000..8ece01496
--- /dev/null
+++ b/src/components/InteractiveEditor/EditPageInfo.vue
@@ -0,0 +1,96 @@
+<template>
+  <modal
+    :name="modalName"
+    :resizable="true"
+    width="50%"
+    height="80%"
+    classes="dashy-modal edit-page-info"
+    @closed="modalClosed"
+  >
+  <div class="edit-page-info-inner">
+  <h3>{{ $t('interactive-editor.edit-page-info-btn') }}</h3>
+  <FormSchema
+    :schema="schema"
+    v-model="formData"
+    @submit.prevent="saveToState"
+    class="page-info-form"
+    name="pageInfoForm"
+  >
+    <Button type="submit">
+      {{ $t('interactive-editor.save-stage-btn') }}
+      <SaveIcon />
+    </button>
+  </FormSchema>
+  </div>
+  </modal>
+</template>
+
+<script>
+import FormSchema from '@formschema/native';
+import DashySchema from '@/utils/ConfigSchema';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+import Button from '@/components/FormElements/Button';
+import SaveIcon from '@/assets/interface-icons/save-config.svg';
+
+export default {
+  name: 'EditPageInfo',
+  data() {
+    return {
+      formData: {},
+      schema: DashySchema.properties.pageInfo,
+      modalName: modalNames.EDIT_PAGE_INFO,
+    };
+  },
+  props: {},
+  components: {
+    FormSchema,
+    Button,
+    SaveIcon,
+  },
+  mounted() {
+    this.formData = this.pageInfo;
+  },
+  computed: {
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
+  },
+  methods: {
+    /* When form submitteed, update VueX store with new pageInfo, and close modal */
+    saveToState() {
+      this.$store.commit(StoreKeys.UPDATE_PAGE_INFO, this.formData);
+      this.$modal.hide(this.modalName);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+    },
+    /* Called when modal manually closed, updates state to allow searching again */
+    modalClosed() {
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+
+.edit-page-info-inner {
+  padding: 1rem;
+  background: var(--interactive-editor-background);
+  color: var(--interactive-editor-color);
+  height: 100%;
+  overflow-y: auto;
+  @extend .scroll-bar;
+  h3 {
+    font-size: 1.4rem;
+    margin: 0.5rem;
+  }
+  .page-info-form {
+    @extend .schema-form;
+    margin-bottom: 2.5rem;
+  }
+}
+
+</style>
diff --git a/src/store.js b/src/store.js
index 0efe467cf..51951d6d3 100644
--- a/src/store.js
+++ b/src/store.js
@@ -15,6 +15,7 @@ const {
   SET_LANGUAGE,
   UPDATE_ITEM,
   SET_EDIT_MODE,
+  UPDATE_PAGE_INFO,
 } = Keys;
 
 const store = new Vuex.Store({
@@ -77,6 +78,11 @@ const store = new Vuex.Store({
       });
       state.config = newConfig;
     },
+    [UPDATE_PAGE_INFO](state, newPageInfo) {
+      const newConfig = state.config;
+      newConfig.pageInfo = newPageInfo;
+      state.config = newConfig;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 6ff65ea07..0f5cbb527 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -637,7 +637,7 @@ html[data-theme='material-dark'] {
 
   --config-settings-background: #131a1f;
   --config-settings-color: #41e2ed;
-  --interactive-editor-background: #131a1f;
+  --interactive-editor-background: #242a2f;
   --interactive-editor-background-darker: #131a1f;
   --interactive-editor-color: #41e2ed;
 
diff --git a/src/styles/style-helpers.scss b/src/styles/style-helpers.scss
index ce2acc2a4..6e90e711a 100644
--- a/src/styles/style-helpers.scss
+++ b/src/styles/style-helpers.scss
@@ -1,3 +1,4 @@
+@import '@/styles/media-queries.scss';
 
 /* Fancy scrollbar */
 .scroll-bar {
@@ -58,6 +59,52 @@
   }
 }
 
+/* Form elements in the auto-schema form */
+.schema-form {
+  fieldset {
+    border: none;
+    display: flex;
+    flex-direction: column;
+    > div {
+      border-bottom: 1px dashed var(--primary);
+      margin: 0.5rem 0;
+      label {
+        font-size: 1rem;
+        text-decoration: underline;
+      }
+    }
+    div[data-fs-wrapper] {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      padding: 0.5rem 0;
+      @include tablet-down {
+        flex-direction: column-reverse;
+      }
+      span {
+        font-style: italic;
+        margin-right: 0.5rem;
+      }
+      input {
+        min-width: 15rem;
+        padding: 0.5rem 0.75rem;
+        margin: 0.5rem auto;
+        font-size: 1rem;
+        box-sizing: border-box;
+        color: var(--primary);
+        background: var(--background);;
+        border: 1px solid var(--primary);
+        border-radius: var(--curve-factor);
+        &:focus {
+          box-shadow: 1px 1px 6px var(--config-settings-color);
+          outline: none;
+        }
+      }
+    }
+  }
+}
 
 /* Single-style helpers */
 .bold { font-weight: bold; }
diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json
index 3c0651237..2edb0dacf 100644
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@@ -9,16 +9,19 @@
       "type": "object",
       "properties": {
         "title": {
+          "title": "Title",
           "type": "string",
           "description": "Title and heading for the app"
         },
         "description": {
+          "title": "Description",
           "type": "string",
           "description": "Sub-title, displayed in header"
         },
         "navLinks": {
           "type": "array",
           "maxItems": 6,
+          "title": "Navigation Links",
           "description": "Quick access links, displayed in header",
           "items": {
             "type": "object",
@@ -38,9 +41,12 @@
           }
         },
         "footerText": {
+          "title": "Footer Text",
+          "description": "Content to display within the global page footer",
           "type": "string"
         },
         "logo": {
+          "title": "App Logo",
           "type": "string",
           "description": "Path to an optional image asset, to be displayed in the header",
           "pattern": "^(http|/)",
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 2134e9fa0..50c017d9e 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -4,8 +4,9 @@ const KEY_NAMES = [
   'UPDATE_CONFIG',
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',
-  'UPDATE_ITEM',
   'SET_EDIT_MODE',
+  'UPDATE_ITEM',
+  'UPDATE_PAGE_INFO',
 ];
 
 // Convert array of key names into an object, and export
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index a3d5f44e0..bfab30106 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -123,6 +123,10 @@ module.exports = {
     ABOUT_APP: 'ABOUT_APP',
     LANG_SWITCHER: 'LANG_SWITCHER',
     EDIT_ITEM: 'EDIT_ITEM',
+    EDIT_SECTION: 'EDIT_SECTION',
+    EDIT_PAGE_INFO: 'EDIT_PAGE_INFO',
+    EDIT_APP_CONFIG: 'EDIT_APP_CONFIG',
+    EXPORT_CONFIG_MENU: 'EXPORT_CONFIG_MENU',
   },
   /* Key names for the top-level objects in conf.yml */
   topLevelConfKeys: {

From b1a7fce05d81ff0b01222b95cccbb5c776579b38 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 23 Oct 2021 19:26:34 +0100
Subject: [PATCH 42/98] :art: Move interactive-editor styles into own
 stylesheet

---
 .../InteractiveEditor/EditPageInfo.vue        |   1 +
 src/styles/schema-editor.scss                 | 100 ++++++++++++++++++
 src/styles/style-helpers.scss                 |  47 --------
 3 files changed, 101 insertions(+), 47 deletions(-)
 create mode 100644 src/styles/schema-editor.scss

diff --git a/src/components/InteractiveEditor/EditPageInfo.vue b/src/components/InteractiveEditor/EditPageInfo.vue
index 8ece01496..215f8bb86 100644
--- a/src/components/InteractiveEditor/EditPageInfo.vue
+++ b/src/components/InteractiveEditor/EditPageInfo.vue
@@ -75,6 +75,7 @@ export default {
 <style lang="scss">
 @import '@/styles/style-helpers.scss';
 @import '@/styles/media-queries.scss';
+@import '@/styles/schema-editor.scss';
 
 .edit-page-info-inner {
   padding: 1rem;
diff --git a/src/styles/schema-editor.scss b/src/styles/schema-editor.scss
new file mode 100644
index 000000000..d252a5c5f
--- /dev/null
+++ b/src/styles/schema-editor.scss
@@ -0,0 +1,100 @@
+/* Form elements in the auto-schema form */
+.schema-form {
+  fieldset {
+    border: none;
+    display: flex;
+    flex-direction: column;
+    > div {
+      border-bottom: 1px dashed var(--interactive-editor-color);
+      margin: 0.5rem 0;
+      label {
+        font-size: 1rem;
+        text-decoration: underline;
+      }
+    }
+    div[data-fs-wrapper] {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      flex-direction: row-reverse;
+      justify-content: space-between;
+      padding: 0.5rem 0;
+      @include tablet-down {
+        flex-direction: column-reverse;
+      }
+      span {
+        font-style: italic;
+        margin-right: 0.5rem;
+        max-width: 20rem;
+      }
+      input {
+        min-width: 15rem;
+        padding: 0.5rem 0.75rem;
+        margin: 0.5rem auto;
+        font-size: 1rem;
+        box-sizing: border-box;
+        color: var(--interactive-editor-color);
+        background: var(--interactive-editor-background);
+        border: 1px solid var(--interactive-editor-color);
+        border-radius: var(--curve-factor);
+        &[type=text]:focus, &[type=number]:focus {
+          box-shadow: 1px 1px 6px var(--interactive-editor-color);
+          outline: none;
+        }
+      }
+      input[type=checkbox] {
+        width: 1.2rem;
+        height: 1.2rem;
+        cursor: pointer;
+      }
+      input[type=radio] {
+        width: 1rem;
+        height: 1rem;
+        cursor: pointer;
+      }
+      div[data-fs-input=object], div[data-fs-input=array] {
+        width: 100%;
+        padding-left: 0.5rem;
+        border-left: 1px dashed var(--interactive-editor-color);
+      }
+      div[data-fs-kind="radio"] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        label {
+          text-decoration: none;
+          text-transform: capitalize;
+        }
+      }
+      select {
+        width: 10rem;
+        height: 2rem;
+        padding: 0.2rem;
+        font-size: 1rem;
+        color: var(--interactive-editor-color);
+        background: var(--interactive-editor-background);
+        border: 1px solid var(--interactive-editor-color);
+        border-radius: var(--curve-factor);
+        &:focus {
+          box-shadow: 1px 1px 6px var(--interactive-editor-color);
+        }
+      }
+      div[data-fs-input=array] button {
+        font-size: 1rem;
+        margin: 0.25rem;
+        border-radius: var(--curve-factor);
+        color: var(--interactive-editor-color);
+        background: var(--interactive-editor-background);
+        border: 1px solid var(--interactive-editor-color);
+        &:hover {
+          color: var(--interactive-editor-background);
+          background: var(--interactive-editor-color);
+        }
+        &:focus {
+          box-shadow: 1px 1px 6px var(--interactive-editor-color);
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/style-helpers.scss b/src/styles/style-helpers.scss
index 6e90e711a..6b73c9bc9 100644
--- a/src/styles/style-helpers.scss
+++ b/src/styles/style-helpers.scss
@@ -59,53 +59,6 @@
   }
 }
 
-/* Form elements in the auto-schema form */
-.schema-form {
-  fieldset {
-    border: none;
-    display: flex;
-    flex-direction: column;
-    > div {
-      border-bottom: 1px dashed var(--primary);
-      margin: 0.5rem 0;
-      label {
-        font-size: 1rem;
-        text-decoration: underline;
-      }
-    }
-    div[data-fs-wrapper] {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: flex-start;
-      flex-direction: row-reverse;
-      justify-content: space-between;
-      padding: 0.5rem 0;
-      @include tablet-down {
-        flex-direction: column-reverse;
-      }
-      span {
-        font-style: italic;
-        margin-right: 0.5rem;
-      }
-      input {
-        min-width: 15rem;
-        padding: 0.5rem 0.75rem;
-        margin: 0.5rem auto;
-        font-size: 1rem;
-        box-sizing: border-box;
-        color: var(--primary);
-        background: var(--background);;
-        border: 1px solid var(--primary);
-        border-radius: var(--curve-factor);
-        &:focus {
-          box-shadow: 1px 1px 6px var(--config-settings-color);
-          outline: none;
-        }
-      }
-    }
-  }
-}
-
 /* Single-style helpers */
 .bold { font-weight: bold; }
 .light { font-weight: lighter; }

From e6f3cae63d82bb3a4d4e9de9fa6ec2ef060f1131 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 23 Oct 2021 19:27:35 +0100
Subject: [PATCH 43/98] :card_file_box: Update order and descriptors in schema
 for appConfig form

---
 src/utils/ConfigSchema.json | 240 ++++++++++++++++++++++--------------
 1 file changed, 148 insertions(+), 92 deletions(-)

diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json
index 2edb0dacf..707dc0603 100644
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@@ -63,17 +63,10 @@
     },
     "appConfig": {
       "type": "object",
-      "description": "Application configuration",
       "properties": {
-        "backgroundImg": {
-          "type": "string",
-          "description": "A URL to an image asset to be displayed as background"
-        },
-        "language": {
-          "type": "string",
-          "description": "The ISO code of your desired language, must have translations present, check docs for more info"
-        },
         "startingView": {
+          "title": "Starting View",
+          "type": "string",
           "enum": [
             "default",
             "minimal",
@@ -82,7 +75,25 @@
           "default": "default",
           "description": "Which page to load by default, and on the base page or domain root. You can still switch to different views from within the UI"
         },
+        "statusCheck": {
+          "title": "Enable Status Checks",
+          "type": "boolean",
+          "default": false,
+          "description": "Displays an online/ offline status for each of your services"
+        },
+        "statusCheckInterval": {
+          "title": "Status Check Interval",
+          "type": "number",
+          "default": 0,
+          "description": "How often to recheck statuses. If set to 0, status will only be checked on page load"
+        },
+        "language": {
+          "title": "Language",
+          "type": "string",
+          "description": "The ISO code of your desired language, must have translations present, check docs for more info"
+        },
         "theme": {
+          "title": "Theme",
           "type": "string",
           "default": "callisto",
           "description": "A theme to be applied by default on first load",
@@ -110,17 +121,14 @@
             "high-contrast-light"
           ]
         },
-        "enableFontAwesome": {
-          "type": "boolean",
-          "default": true,
-          "description": "Should load font-awesome assets"
-        },
-        "fontAwesomeKey": {
+        "backgroundImg": {
+          "title": "Background Image",
           "type": "string",
-          "pattern": "^[a-z0-9]{10}$",
-          "description": "API key for font-awesome"
+          "description": "A URL to an image asset to be displayed as background"
         },
         "faviconApi": {
+          "title": "Favicon API",
+          "type": "string",
           "enum": [
             "local",
             "faviconkit",
@@ -133,6 +141,8 @@
           "description": "Which service to use to resolve favicons. Set to local to do this locally instead"
         },
         "layout": {
+          "title": "Default Layout",
+          "type": "string",
           "enum": [
             "horizontal",
             "vertical",
@@ -143,6 +153,8 @@
           "description": "Specifies sections layout orientation on the home screen"
         },
         "iconSize": {
+          "title": "Default Icon Size",
+          "type": "string",
           "enum": [
             "small",
             "medium",
@@ -152,48 +164,15 @@
           "description": "The size of each link item / icon"
         },
         "colCount": {
+          "title": "Column Count",
           "type": "number",
           "minimum": 1,
           "maximum": 8,
           "description": "Number of section columns for homepage. Leave blank for column count to be responsively calculated based on screen size"
         },
-        "hideComponents": {
-          "type": "object",
-          "description": "Hide individual parts of the page. If not set, all components are visible by default",
-          "properties": {
-            "hideHeading": {
-              "type": "boolean",
-              "default": "false",
-              "description": "If set to true, the page heading & subtitle will be hidden"
-            },
-            "hideNav": {
-              "type": "boolean",
-              "default": "false",
-              "description": "If set to true, the navigation menu will be hidden"
-            },
-            "hideSearch": {
-              "type": "boolean",
-              "default": "false",
-              "description": "If set to true, the search bar will be hidden"
-            },
-            "hideSettings": {
-              "type": "boolean",
-              "default": "false",
-              "description": "If set to true, the settings buttons will be hidden"
-            },
-            "hideFooter": {
-              "type": "boolean",
-              "default": "false",
-              "description": "If set to true, the page footer will be hidden"
-            },
-            "hideSplashScreen": {
-              "type": "boolean",
-              "default": "true",
-              "description": "If set to true, the loading / splash screen will not be shown"
-            }
-          }
-        },
         "routingMode": {
+          "title": "Routing Mode",
+          "type": "string",
           "enum": [
             "hash",
             "history"
@@ -201,52 +180,31 @@
           "default": "history",
           "description": "The Vue routing mode to use, history mode will remove the annoying hash from the URL, but requires some extra config on some systems"
         },
-        "cssThemes": {
-          "type": "array",
-          "description": "Theme names to be added to the dropdown",
-          "items": {
-            "type": "string"
-          }
-        },
-        "customColors": {
-          "type": "object",
-          "description": "Set a custom color palette for any theme"
-        },
-        "externalStyleSheet": {
-          "description": "URL or URLs of external stylesheets to add to dropdown/ load",
-          "type": [
-            "string",
-            "array"
-          ],
-          "items": {
-            "type": "string"
-          }
-        },
-        "customCss": {
+        "workspaceLandingUrl": {
+          "title": "Workspace Landing URL",
           "type": "string",
-          "description": "Any custom CSS overides, must be minified"
+          "description": "The URL of an app, service or website to render when the Workspace view is opened"
         },
-        "statusCheck": {
+        "enableMultiTasking": {
+          "title": "Enable Multi-Tasking",
           "type": "boolean",
           "default": false,
-          "description": "Displays an online/ offline status for each of your services"
-        },
-        "statusCheckInterval": {
-          "type": "number",
-          "default": 0,
-          "description": "How often to recheck statuses. If set to 0, status will only be checked on page load"
+          "description": "If set to true, will keep apps opened in the workspace open in the background. Useful for switching between sites, but comes at the cost of performance"
         },
         "webSearch": {
+          "title": "Web Search",
           "type": "object",
           "description": "Configure options for web search",
           "additionalProperties": false,
           "properties": {
             "disableWebSearch": {
+              "title": "Disable Web Search?",
               "type": "boolean",
               "default": "false",
               "description": "If set to true, web search will be disabled all together"
             },
             "searchEngine": {
+              "title": "Search Engine",
               "type": "string",
               "default": "duckduckgo",
               "description": "Set your default search engine. Reference provider by key, see docs for all supported search engines, or set to custom to use your own",
@@ -268,10 +226,13 @@
               ]
             },
             "customSearchEngine": {
+              "title": "Custom Search Engine",
               "type": "string",
               "description": "Set the URL of a self-hosted or custom search engine, including GET query params. You must also set searchEngine: custom"
             },
             "openingMethod": {
+              "title": "Search Opening Method",
+              "type": "string",
               "enum": [
                 "newtab",
                 "sametab",
@@ -282,6 +243,7 @@
               "description": "Set where you would like search results to open to"
             },
             "searchBangs": {
+              "title": "Search Bangs",
               "type": "object",
               "additionalProperties": true,
               "examples": [
@@ -294,17 +256,101 @@
             }
           }
         },
+        "enableFontAwesome": {
+          "title": "Enable Font-Awesome?",
+          "type": "boolean",
+          "default": true,
+          "description": "Should load font-awesome assets"
+        },
+        "fontAwesomeKey": {
+          "title": "Font-Awesome API Key",
+          "type": "string",
+          "pattern": "^[a-z0-9]{10}$",
+          "description": "API key for font-awesome"
+        },
+        "cssThemes": {
+          "title": "Additional CSS Themes",
+          "type": "array",
+          "description": "Theme names to be added to the dropdown",
+          "items": {
+            "type": "string"
+          }
+        },
+        "customColors": {
+          "title": "Custom Colors",
+          "type": "object",
+          "description": "Set a custom color palette for any theme"
+        },
+        "externalStyleSheet": {
+          "title": "External Stylesheets",
+          "description": "URL or URLs of external stylesheets to add to dropdown/ load",
+          "type": "array",
+          "items": {
+            "type": "string"
+          }
+        },
+        "customCss": {
+          "title": "Custom CSS",
+          "type": "string",
+          "description": "Any custom CSS overides, must be minified"
+        },
+        "hideComponents": {
+          "title": "Hidden Components",
+          "type": "object",
+          "description": "Hide individual parts of the page. If not set, all components are visible by default",
+          "properties": {
+            "hideHeading": {
+              "title": "Hide Heading?",
+              "type": "boolean",
+              "default": "false",
+              "description": "If set to true, the page heading & subtitle will be hidden"
+            },
+            "hideNav": {
+              "title": "Hide Nav Bar?",
+              "type": "boolean",
+              "default": "false",
+              "description": "If set to true, the navigation menu will be hidden"
+            },
+            "hideSearch": {
+              "title": "Hide Search Bar?",
+              "type": "boolean",
+              "default": "false",
+              "description": "If set to true, the search bar will be hidden"
+            },
+            "hideSettings": {
+              "title": "Hide Settings?",
+              "type": "boolean",
+              "default": "false",
+              "description": "If set to true, the settings buttons will be hidden"
+            },
+            "hideFooter": {
+              "title": "Hide Footer?",
+              "type": "boolean",
+              "default": "false",
+              "description": "If set to true, the page footer will be hidden"
+            },
+            "hideSplashScreen": {
+              "title": "Hide Splash Screen?",
+              "type": "boolean",
+              "default": "true",
+              "description": "If set to true, the loading / splash screen will not be shown"
+            }
+          }
+        },
         "auth": {
+          "title": "Authentication",
           "type": "object",
           "description": "Settings for enabling authentication",
           "additionalProperties": false,
           "properties": {
             "enableGuestAccess": {
+              "title": "Enable Guest Mode?",
               "type": "boolean",
               "default": false,
               "description": "If set to true, an unauthenticated user will be able to have read-only access to dashboard, without needing to login. Requires auth to be configured."
             },
             "users": {
+              "title": "Users",
               "type": "array",
               "description": "Usernames and hashed credentials for frontend authentication",
               "items": {
@@ -316,16 +362,20 @@
                 ],
                 "properties": {
                   "user": {
+                    "title": "Username",
                     "type": "string",
                     "description": "The username for a user"
                   },
                   "hash": {
+                    "title": "Hashed Pass",
                     "type": "string",
                     "description": "A SHA-256 hashed password for that user",
                     "minLength": 64,
                     "maxLength": 64
                   },
                   "type": {
+                    "title": "Privileges",
+                    "type": "string",
                     "enum": [
                       "admin",
                       "normal"
@@ -337,6 +387,7 @@
               }
             },
             "enableKeycloak": {
+              "title": "Enable Keycloak?",
               "type": "boolean",
               "default": false,
               "description": "If set to true, and auth.keycloak is also configured, then Keycloak will be used for app auth"
@@ -352,14 +403,17 @@
               ],
               "properties": {
                 "serverUrl": {
+                  "title": "Server URL",
                   "type": "string",
                   "description": "The URL (or URL/ IP + Port) where your keycloak server is running"
                 },
                 "realm": {
+                  "title": "Realm",
                   "type": "string",
                   "description": "The name of the realm (must already be created) that you want to use"
                 },
                 "clientId": {
+                  "title": "Client ID",
                   "type": "string",
                   "description": "The Client ID of the client you created for use with Dashy"
                 }
@@ -367,48 +421,46 @@
             }
           }
         },
-        "enableMultiTasking": {
-          "type": "boolean",
-          "default": false,
-          "description": "If set to true, will keep apps opened in the workspace open in the background. Useful for switching between sites, but comes at the cost of performance"
-        },
         "allowConfigEdit": {
+          "title": "Allow Config Editing",
           "type": "boolean",
           "default": true,
           "description": "Can user write changes to conf.yml file from the UI. If set to false, preferences are only stored locally"
         },
         "enableServiceWorker": {
+          "title": "Enable Service Worker",
           "type": "boolean",
           "default": false,
           "description": "If set to true, then service workers will be used to cache page contents"
         },
         "disableContextMenu": {
+          "title": "Disable Context Menus",
           "type": "boolean",
           "default": false,
           "description": "If set to true, custom right-click context menu will be disabled"
         },
         "disableUpdateChecks": {
+          "title": "Disable Update Checks",
           "type": "boolean",
           "default": false,
           "description": "Prevents Dashy from checking for updates"
         },
         "disableSmartSort": {
+          "title": "Disable Smart-Sort",
           "type": "boolean",
           "default": false,
           "description": "Prevents the app storing local click count, required for the last-used and most-used sort orders"
         },
         "enableErrorReporting": {
+          "title": "Enable Error Reporting",
           "type": "boolean",
           "default": false,
           "description": "Enable anonymous crash reports. This helps bugs be found and fixed, in order to make Dashy more stable. Reporting is off by default, and no data will EVER be collected without your explicit and active concent."
         },
         "sentryDsn": {
+          "title": "Custom Sentry DSN",
           "type": "string",
           "description": "The DSN to your self-hosted Sentry server, if you need to collect bug reports. Only used if enableErrorReporting is enabled"
-        },
-        "workspaceLandingUrl": {
-          "type": "string",
-          "description": "The URL of an app, service or website to render when the Workspace view is opened"
         }
       },
       "additionalProperties": false
@@ -438,6 +490,7 @@
             "description": "Optional meta data for customizing a section",
             "properties": {
               "sortBy": {
+                "type": "string",
                 "enum": [
                   "default",
                   "most-used",
@@ -463,6 +516,7 @@
                 "description": "CSS overides for section container"
               },
               "itemSize": {
+                "type": "string",
                 "enum": [
                   "small",
                   "medium",
@@ -486,6 +540,7 @@
                 "description": "The amount of space that the section spans horizontally"
               },
               "sectionLayout": {
+                "type": "string",
                 "enum": [
                   "grid",
                   "auto"
@@ -557,6 +612,7 @@
                   "description": "The destination to navigate to when item is clicked"
                 },
                 "target": {
+                  "type": "string",
                   "enum": [
                     "newtab",
                     "sametab",

From 89737ffa5d01521c6ebb1906b1d64ae812fc5d1c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 23 Oct 2021 19:28:08 +0100
Subject: [PATCH 44/98] :sparkles: Implements UI editor form for appConfig

---
 .../InteractiveEditor/EditAppConfig.vue       | 134 ++++++++++++++++++
 .../InteractiveEditor/EditModeSaveMenu.vue    |  14 +-
 src/components/Settings/LanguageSwitcher.vue  |   2 +-
 src/store.js                                  |  11 +-
 src/utils/StoreMutations.js                   |   1 +
 5 files changed, 156 insertions(+), 6 deletions(-)
 create mode 100644 src/components/InteractiveEditor/EditAppConfig.vue

diff --git a/src/components/InteractiveEditor/EditAppConfig.vue b/src/components/InteractiveEditor/EditAppConfig.vue
new file mode 100644
index 000000000..91e9dbb49
--- /dev/null
+++ b/src/components/InteractiveEditor/EditAppConfig.vue
@@ -0,0 +1,134 @@
+<template>
+  <modal
+    :name="modalName"
+    :resizable="true"
+    width="50%"
+    height="80%"
+    classes="dashy-modal edit-app-config"
+    @closed="modalClosed"
+  >
+  <div class="edit-app-config-inner">
+  <h3>{{ $t('interactive-editor.edit-app-config-btn') }}</h3>
+  <div class="app-config-intro">
+    <p class="use-caution">Proceed with Caution</p>
+    The following options are for advanded app configration.
+    If you are unsure about any of the fields, please reference the
+    <a href="https://dashy.to/docs/configuring#appconfig-optional">documentation</a>
+    to avoid unintended consequences.
+  </div>
+  <Button class="save-app-config-btn" :click="saveToState">
+    {{ $t('interactive-editor.save-stage-btn') }}
+    <SaveIcon />
+  </button>
+  <FormSchema
+    :schema="schema"
+    v-model="formData"
+    @submit.prevent="saveToState"
+    :search="true"
+    class="app-config-form"
+    name="appConfigForm"
+  ></FormSchema>
+  <Button class="save-app-config-btn" :click="saveToState">
+    {{ $t('interactive-editor.save-stage-btn') }}
+    <SaveIcon />
+  </button>
+  </div>
+  </modal>
+</template>
+
+<script>
+import FormSchema from '@formschema/native';
+import DashySchema from '@/utils/ConfigSchema';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+import Button from '@/components/FormElements/Button';
+import SaveIcon from '@/assets/interface-icons/save-config.svg';
+
+export default {
+  name: 'EditAppConfig',
+  data() {
+    return {
+      formData: {},
+      schema: DashySchema.properties.appConfig,
+      modalName: modalNames.EDIT_APP_CONFIG,
+    };
+  },
+  props: {},
+  components: {
+    FormSchema,
+    Button,
+    SaveIcon,
+  },
+  mounted() {
+    this.formData = this.appConfig;
+  },
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+  },
+  methods: {
+    /* When form submitteed, update VueX store with new appConfig, and close modal */
+    saveToState() {
+      const processedFormData = this.removeUndefinedValues(this.formData);
+      this.$store.commit(StoreKeys.UPDATE_APP_CONFIG, processedFormData);
+      this.$modal.hide(this.modalName);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+    },
+    /* Called when modal manually closed, updates state to allow searching again */
+    modalClosed() {
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+    /* Remove any attribute which has an undefined value before saving */
+    removeUndefinedValues(rawAppConfig) {
+      const raw = rawAppConfig;
+      const isEmpty = (value) => (value === undefined || value === {} || value === []);
+      Object.keys(raw).forEach(key => isEmpty(raw[key]) && delete raw[key]);
+      return raw;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '@/styles/style-helpers.scss';
+@import '@/styles/media-queries.scss';
+@import '@/styles/schema-editor.scss';
+
+.edit-app-config-inner {
+  padding: 1rem;
+  background: var(--interactive-editor-background);
+  color: var(--interactive-editor-color);
+  height: 100%;
+  overflow-y: auto;
+  @extend .scroll-bar;
+  h3 {
+    font-size: 1.4rem;
+    margin: 0.5rem;
+  }
+  .app-config-form {
+    @extend .schema-form;
+    border-top: 1px dashed var(--interactive-editor-color);
+  }
+  .app-config-intro {
+    padding: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--interactive-editor-color);
+    background: var(--interactive-editor-background-darker);
+    border-radius: var(--interactive-editor-color);
+    p.use-caution {
+      color: var(--warning);
+      margin: 0;
+      font-weight: bold;
+    }
+    a {
+      color: var(--interactive-editor-color);
+    }
+  }
+  button.save-app-config-btn {
+    margin: 0.5rem auto 1.5rem;
+  }
+}
+
+</style>
diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index 8d0318460..4e53cd0c2 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -55,6 +55,7 @@
         <PageInfoIcon />
       </Button>
       <Button
+        :click="openEditAppConfig"
         v-tooltip="tooltip($t('interactive-editor.edit-app-config-tooltip'))"
       >
         {{ $t('interactive-editor.edit-app-config-btn') }}
@@ -63,6 +64,7 @@
     </div>
     <!-- Modals for editing appConfig + pageInfo -->
     <EditPageInfo />
+    <EditAppConfig />
   </div>
 </template>
 
@@ -71,6 +73,7 @@ import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
 import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo';
+import EditAppConfig from '@/components/InteractiveEditor/EditAppConfig';
 
 import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
 import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
@@ -90,15 +93,13 @@ export default {
     CancelIcon,
     AppConfigIcon,
     PageInfoIcon,
+    EditAppConfig,
   },
   methods: {
     reset() {
       this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
       this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
     },
-    tooltip(content) {
-      return { content, trigger: 'hover focus', delay: 250 };
-    },
     openExportConfigMenu() {
       this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
@@ -107,6 +108,13 @@ export default {
       this.$modal.show(modalNames.EDIT_PAGE_INFO);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
     },
+    openEditAppConfig() {
+      this.$modal.show(modalNames.EDIT_APP_CONFIG);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
   },
 };
 </script>
diff --git a/src/components/Settings/LanguageSwitcher.vue b/src/components/Settings/LanguageSwitcher.vue
index 7705cef0a..d9b180976 100644
--- a/src/components/Settings/LanguageSwitcher.vue
+++ b/src/components/Settings/LanguageSwitcher.vue
@@ -56,7 +56,7 @@ export default {
     /* The ISO code for the users language, synced with VueX store */
     savedLanguage: {
       get() {
-        return this.getIsoFromLangObj(this.$store.state.lang);
+        return this.getIsoFromLangObj(this.$store.getters.appConfig.lang);
       },
       set(newLang) {
         this.$store.commit(Keys.SET_LANGUAGE, newLang.code);
diff --git a/src/store.js b/src/store.js
index 51951d6d3..c99d9da9b 100644
--- a/src/store.js
+++ b/src/store.js
@@ -16,12 +16,12 @@ const {
   UPDATE_ITEM,
   SET_EDIT_MODE,
   UPDATE_PAGE_INFO,
+  UPDATE_APP_CONFIG,
 } = Keys;
 
 const store = new Vuex.Store({
   state: {
     config: {},
-    lang: '', // The users language, auto-detected or read from local storage / config
     editMode: false, // While true, the user can drag and edit items + sections
     modalOpen: false, // KB shortcut functionality will be disabled when modal is open
   },
@@ -58,7 +58,9 @@ const store = new Vuex.Store({
       state.config = config;
     },
     [SET_LANGUAGE](state, lang) {
-      state.lang = lang;
+      const newConfig = state.config;
+      newConfig.appConfig.language = lang;
+      state.config = newConfig;
     },
     [SET_MODAL_OPEN](state, modalOpen) {
       state.modalOpen = modalOpen;
@@ -83,6 +85,11 @@ const store = new Vuex.Store({
       newConfig.pageInfo = newPageInfo;
       state.config = newConfig;
     },
+    [UPDATE_APP_CONFIG](state, newAppConfig) {
+      const newConfig = state.config;
+      newConfig.appConfig = newAppConfig;
+      state.config = newConfig;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 50c017d9e..9cb708611 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -7,6 +7,7 @@ const KEY_NAMES = [
   'SET_EDIT_MODE',
   'UPDATE_ITEM',
   'UPDATE_PAGE_INFO',
+  'UPDATE_APP_CONFIG',
 ];
 
 // Convert array of key names into an object, and export

From e5d9463967af2d912f1fd0e748ffdb5b20184378 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 23 Oct 2021 19:29:01 +0100
Subject: [PATCH 45/98] :memo: Adds info for custom domain and remote access
 into Management docs

---
 README.md               | 14 +++----
 docs/management.md      | 84 ++++++++++++++++++++++++++++++++++++++++-
 docs/quick-start.md     | 12 ++++++
 docs/troubleshooting.md |  6 +++
 4 files changed, 108 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index c568a832a..06e2e18f7 100644
--- a/README.md
+++ b/README.md
@@ -68,14 +68,14 @@
 
 - 🔎 Instant search by name, domain and tags + customizable hotkeys & keyboard shortcuts
 - 🎨 Multiple built-in color themes, with UI color editor and support for custom CSS
-- 🧸 Many options for icons, including Font-Awesome, homelab icons, auto-fetching favicon, images and emojis
-- 🚦 Service status feature for each of your apps / links, for basic availability and uptime monitoring
+- 🧸 Many icon options- Font-Awesome, homelab icons, auto-fetching favicon, images, emojis, etc
+- 🚦 Status monitoring for each of your apps / links, for basic availability and uptime checking
 - 💂 Optional authentication with multi-user access, configurable privileges and SSO support
-- 🌎 Multi-language support, with more languages being added regularly
-- ☁ Optional encrypted off-site cloud backup and restore feature available
-- 💼 A workspace view, for easily switching between multiple apps at once
+- 🌎 Multi-language support, with 10+ human-translated languages, and more on the way
+- ☁ Optional, encrypted, free off-site cloud backup and restore feature available
+- 💼 A workspace view, for easily switching between multiple apps at simultaneously
 - 🛩️ A minimal view, for use as a fast-loading browser startpage
-- 🖱️ Choose how to launch apps, either new tab, same tab, a pop-up modal or in the workspace view
+- 🖱️ Choose app launch method, either new tab, same tab, a pop-up modal or in the workspace view
 - 📏 Customizable layout, sizes, text, component visibility, sort order, behavior etc
 - 🖼️ Option for full-screen background image, custom nav-bar links, html footer, title, etc
 - 🚀 Easy to setup with Docker, or on bare metal, or with 1-Click cloud deployment
@@ -84,7 +84,7 @@
 - 🤏 Small bundle size, fully responsive UI and PWA for basic offline access
 - 🆓 100% free and open source
 - 🔐 Strong focus on privacy
-- 🌈 Plus lots more...
+- 🌈 Plus loads more...
 
 ## Demo ⚡
 
diff --git a/docs/management.md b/docs/management.md
index e48bec60a..e43e9db7a 100644
--- a/docs/management.md
+++ b/docs/management.md
@@ -1,6 +1,6 @@
 # Management
 
-_The following article explains aspects of app management, and is useful to know for when self-hosting. It covers everything from keeping the app up-to-date, secure, backed up, to other topics like auto-starting, monitoring, log management, web server configuration and using custom environments. Most of it is aimed at running the Dashy (or any other app) in a container, but some of it also applies to bare metal setups too. It's like a top-20 list of need-to-know knowledge for self-hosting._
+_The following article explains aspects of app management, and is useful to know for when self-hosting. It covers everything from keeping the Dashy (or any other app) up-to-date, secure, backed up, to other topics like auto-starting, monitoring, log management, web server configuration and using custom environments. It's like a top-20 list of need-to-know knowledge for self-hosting._
 
 ## Contents
 - [Providing Assets](#providing-assets)
@@ -17,6 +17,7 @@ _The following article explains aspects of app management, and is useful to know
 - [Environmental Variables](#passing-in-environmental-variables)
 - [Securing Containers](#container-security)
 - [Remote Access](#remote-access)
+- [Custom Domain](#custom-domain)
 - [Web Server Configuration](#web-server-configuration)
 - [Running a Modified App](#running-a-modified-version-of-the-app)
 - [Building your Own Container](#building-your-own-container)
@@ -273,6 +274,22 @@ If you've got many environmental variables, you might find it useful to put them
 
 ## Container Security
 
+- [Keep Docker Up-To-Date](#keep-docker-up-to-date)
+- [Set Resource Quotas](#set-resource-quotas)
+- [Don't Run as Root](#dont-run-as-root)
+- [Specify a User](#specify-a-user)
+- [Limit Capabilities](#limit-capabilities)
+- [Prevent new Privilages being Added](#prevent-new-privilages-being-added)
+- [Disable Inter-Container Communication](#disable-inter-container-communication)
+- [Don't Expose the Docker Daemon Socket](#dont-expose-the-docker-daemon-socket)
+- [Use Read-Only Volumes](#use-read-only-volumes)
+- [Set the Logging Level](#set-the-logging-level)
+- [Verify Image before Pulling](#verify-image-before-pulling)
+- [Specify the Tag](#specify-the-tag)
+- [Container Security Scanning](#container-security-scanning)
+- [Registry Security](#registry-security)
+- [Security Modules](#security-modules)
+
 ### Keep Docker Up-To-Date
 To prevent known container escape vulnerabilities, which typically end in escalating to root/administrator privileges, patching Docker Engine and Docker Machine is crucial. For more info, see the [Docker Installation Docs](https://docs.docker.com/engine/install/).
 
@@ -400,6 +417,9 @@ Docker supports several modules that let you write your own security profiles.
 
 ## Remote Access
 
+- [WireGuard](#wireguard)
+- [Reverse SSH Tunnel](#reverse-ssh-tunnel)
+
 ### WireGuard
 
 Using a VPN is one of the easiest ways to provide secure, full access to your local network from remote locations. [WireGuard](https://www.wireguard.com/) is a reasonably new open source VPN protocol, that was designed with ease of use, performance and security in mind. Unlike OpenVPN, it doesn't need to recreate the tunnel whenever connection is dropped, and it's also much easier to setup, using shared keys instead. 
@@ -506,6 +526,63 @@ Done :)
 
 ---
 
+## Custom Domain
+
+- [Using DNS](#using-nginx)
+- [Using NGINX](#using-dns)
+
+### Using DNS
+For locally running services, a domain can be set up directly in the DNS records. This method is really quick and easy, and doesn't require you to purchase an actual domain. Just update your networks DNS resolver, to point your desired URL to the local IP where Dashy (or any other app) is running. For example, a line in your hosts file might look something like: `192.168.0.2 dashy.homelab.local`.
+
+If you're using Pi-Hole, a similar thing can be done in the `/etc/dnsmasq.d/03-custom-dns.conf` file, add a line like: `address=/dashy.example.com/192.168.2.0` for each of your services.
+
+If you're running OPNSense/ PfSense, then this can be done through the UI with Unbound, it's explained nicely in [this article](https://homenetworkguy.com/how-to/use-custom-domain-name-in-internal-network/), by Dustin Casto. 
+
+### Using NGINX
+If you're using NGINX, then you can use your own domain name, with a config similar to the below example.
+
+```
+upstream dashy {
+  server 127.0.0.1:32400;
+}
+
+server {
+  listen         80;
+  server_name    dashy.mydomain.com;
+
+  # Setup SSL
+  ssl_certificate             /var/www/mydomain/sslcert.pem;
+  ssl_certificate_key         /var/www/mydomain/sslkey.pem;
+  ssl_protocols               TLSv1 TLSv1.1 TLSv1.2;
+  ssl_ciphers                 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
+  ssl_session_timeout         5m;
+  ssl_prefer_server_ciphers   on;
+
+  location / {
+    proxy_pass                http://dashy;
+    proxy_redirect            off;
+    proxy_buffering           off;
+    proxy_set_header          host              $host;
+    proxy_set_header          X-Real-IP         $remote_addr;
+    proxy_set_header          X-Forwarded-For   $proxy_add_x_forwarded_for;
+    proxy_next_upstream       error timeout     invalid_header http_500 http_502 http_503 http_504;
+  }
+}
+```
+Similarly, a basic `Caddyfile` might look like:
+
+```
+dashy.example.com {
+    reverse_proxy / nginx:80
+}
+```
+
+For more info, [this guide](https://thehomelab.wiki/books/dns-reverse-proxy/page/create-domain-records-to-point-to-your-home-server-on-cloudflare-using-nginx-progy-manager) on Setting up Domains with NGINX Proxy Manager and CloudFlare may be useful.
+
+**[⬆️ Back to Top](#management)**
+
+---
+
 ## Web Server Configuration
 
 _The following section only applies if you are not using Docker, and would like to use your own web server_
@@ -521,6 +598,11 @@ Note, that if you choose not to use `server.js` to serve up the app, you will lo
 - Writing config file to disk from the UI
 - Website status indicators, and ping checks
 
+Example Configs
+- [NGINX](#nginx)
+- [Apache](#apache)
+- [cPanel](#cpanel)
+
 ### NGINX
 
 Create a new file in `/etc/nginx/sites-enabled/dashy`
diff --git a/docs/quick-start.md b/docs/quick-start.md
index 67f8c3f46..afa68eef1 100644
--- a/docs/quick-start.md
+++ b/docs/quick-start.md
@@ -127,3 +127,15 @@ Don't have a server? No problem! You can run Dashy for free on Netlify (as well
 2. [Log in](app.netlify.com/login/) to Netlify with GitHub
 3. Click "New site from Git" and select your forked repo, then click **Deploy**!
 4. You can then edit the config in `./public/conf.yml` in your repo, and Netlify will rebuild the app
+
+---
+
+## Alternative Deployment Method 3 - Cloud Services
+
+Dashy supports 1-Click deployments on several popular cloud platforms. To spin up a new instance, just click a link below:
+- [<img src="https://i.ibb.co/ZxtzrP3/netlify.png" width="18"/> Deploy to Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/dashy)
+- [<img src="https://i.ibb.co/d2P1WZ7/heroku.png" width="18"/> Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/Lissy93/dashy)
+- [<img src="https://i.ibb.co/Ld2FZzb/vercel.png" width="18"/> Deploy to Vercel](https://vercel.com/new/project?template=https://github.com/lissy93/dashy)
+- [<img src="https://i.ibb.co/xCHtzgh/render.png" width="18"/> Deploy to Render](https://render.com/deploy?repo=https://github.com/lissy93/dashy/tree/deploy_render)
+- [<img src="https://i.ibb.co/J7MGymY/googlecloud.png" width="18"/> Deploy to GCP](https://deploy.cloud.run/?git_repo=https://github.com/lissy93/dashy.git)
+- [<img src="https://i.ibb.co/HVWVYF7/docker.png" width="18"/> Deploy to PWD](https://labs.play-with-docker.com/?stack=https://github.com/raw/Lissy93/dashy/master/docker-compose.yml)
\ No newline at end of file
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
index 2655d6af9..70c525391 100644
--- a/docs/troubleshooting.md
+++ b/docs/troubleshooting.md
@@ -90,6 +90,12 @@ Sometimes your text editor updates files [inode](https://linuxhandbook.com/inode
 
 ---
 
+## Styles and Assets not Updating
+
+If you find that your styles and other visual assets work when visiting `ip:port` by not `dashy.domain.com`, then this is usually caused by caching. In your browser, do a hard-refresh (<kbd>Ctrl</kbd> + <kbd>F5</kbd>). If you use Cloudflare, then you can clear the cache through the management console, or set the cache level to Bypass for certain files, under the Rules tab.
+
+---
+
 ## DockerHub `toomanyrequests`
 
 This situation relates to error messages similar to one of the following, returned when pulling, updating or running the Docker container from Docker Hub.

From 87bf9263db076d80fb81bb065e25b5877875ff3d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 23 Oct 2021 20:05:43 +0100
Subject: [PATCH 46/98] :zap: If in edit mode, open item-edit instead of
 launching, onclick

---
 ...g.svg => interactive-editor-edit-mode.svg} |  0
 src/components/LinkItems/Item.vue             | 41 +++++++++++++++----
 src/components/Settings/ConfigLauncher.vue    |  2 +-
 3 files changed, 33 insertions(+), 10 deletions(-)
 rename src/assets/interface-icons/{interactive-editor-start-editing.svg => interactive-editor-edit-mode.svg} (100%)

diff --git a/src/assets/interface-icons/interactive-editor-start-editing.svg b/src/assets/interface-icons/interactive-editor-edit-mode.svg
similarity index 100%
rename from src/assets/interface-icons/interactive-editor-start-editing.svg
rename to src/assets/interface-icons/interactive-editor-edit-mode.svg
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 6a6023962..0cc259f02 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -30,6 +30,7 @@
         :statusSuccess="statusResponse ? statusResponse.successStatus : undefined"
         :statusText="statusResponse ? statusResponse.message : undefined"
       />
+      <EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openItemSettings()" />
     </a>
     <ContextMenu
       :show="contextMenuOpen"
@@ -54,6 +55,7 @@ import EditItem from '@/components/InteractiveEditor/EditItem';
 import ContextMenu from '@/components/LinkItems/ContextMenu';
 import StoreKeys from '@/utils/StoreMutations';
 import { targetValidator } from '@/utils/ConfigHelpers';
+import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
 import {
   localStorageKeys,
   serviceEndpoints,
@@ -85,15 +87,27 @@ export default {
     statusCheckInterval: Number,
     statusCheckAllowInsecure: Boolean,
   },
+  components: {
+    Icon,
+    ItemOpenMethodIcon,
+    StatusIndicator,
+    ContextMenu,
+    EditItem,
+    EditModeIcon,
+  },
   computed: {
     appConfig() {
       return this.$store.getters.appConfig;
     },
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
     accumulatedTarget() {
       return this.target || this.appConfig.defaultOpeningMethod || defaultOpeningMethod;
     },
     /* Convert config target value, into HTML anchor target attribute */
     anchorTarget() {
+      if (this.isEditMode) return '_self';
       const target = this.accumulatedTarget;
       switch (target) {
         case 'sametab': return '_self';
@@ -103,10 +117,12 @@ export default {
         default: return undefined;
       }
     },
-    /* Get the href value for the anchor, if not opening in modal/ workspace */
+    /* Get href for anchor, if not in edit mode, or opening in modal/ workspace */
     hyperLinkHref() {
+      const nothing = '#';
+      if (this.isEditMode) return nothing;
       const noAnchorNeeded = ['modal', 'workspace'];
-      return noAnchorNeeded.includes(this.accumulatedTarget) ? '#' : this.url;
+      return noAnchorNeeded.includes(this.accumulatedTarget) ? nothing : this.url;
     },
   },
   data() {
@@ -125,16 +141,14 @@ export default {
       editMenuOpen: false,
     };
   },
-  components: {
-    Icon,
-    ItemOpenMethodIcon,
-    StatusIndicator,
-    ContextMenu,
-    EditItem,
-  },
   methods: {
     /* Called when an item is clicked, manages the opening of modal & resets the search field */
     itemOpened(e) {
+      if (this.isEditMode) {
+        // If in edit mode, open settings, and don't launch app
+        this.openItemSettings();
+        return;
+      }
       if (e.altKey || this.accumulatedTarget === 'modal') {
         e.preventDefault();
         this.$emit('triggerModal', this.url);
@@ -380,6 +394,15 @@ export default {
   }
 }
 
+/* Edit Mode Icon */
+.item .edit-mode-item {
+  width: 1rem;
+  height: 1rem;
+  position: absolute;
+  top: 0.2rem;
+  right: 0.2rem;
+}
+
 /* Specify layout for alternate sized icons */
 .item {
   /* Small Tile Specific Themes */
diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index da90aed29..0f6d479b8 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -53,7 +53,7 @@ import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
 import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
 import Keys from '@/utils/StoreMutations';
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
-import IconInteractiveEditor from '@/assets/interface-icons/interactive-editor-start-editing.svg';
+import IconInteractiveEditor from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
 import IconViewMode from '@/assets/interface-icons/application-change-view.svg';
 import IconHome from '@/assets/interface-icons/application-home.svg';
 import IconWorkspaceView from '@/assets/interface-icons/open-workspace.svg';

From 0a00c9beb2a7e183563d4e71dab6e5d336735c3f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 13:25:22 +0100
Subject: [PATCH 47/98] :nut_and_bolt: Adds updateSection functionality to
 store

---
 src/store.js                | 11 +++++++++++
 src/utils/StoreMutations.js |  1 +
 2 files changed, 12 insertions(+)

diff --git a/src/store.js b/src/store.js
index c99d9da9b..c9cc14146 100644
--- a/src/store.js
+++ b/src/store.js
@@ -17,6 +17,7 @@ const {
   SET_EDIT_MODE,
   UPDATE_PAGE_INFO,
   UPDATE_APP_CONFIG,
+  UPDATE_SECTION,
 } = Keys;
 
 const store = new Vuex.Store({
@@ -44,6 +45,10 @@ const store = new Vuex.Store({
     visibleComponents(state, getters) {
       return componentVisibility(getters.appConfig);
     },
+    // eslint-disable-next-line arrow-body-style
+    getSectionByIndex: (state, getters) => (index) => {
+      return getters.sections[index];
+    },
     getItemById: (state, getters) => (id) => {
       let item;
       getters.sections.forEach(sec => {
@@ -90,6 +95,12 @@ const store = new Vuex.Store({
       newConfig.appConfig = newAppConfig;
       state.config = newConfig;
     },
+    [UPDATE_SECTION](state, payload) {
+      const { sectionIndex, sectionData } = payload;
+      const newConfig = { ...state.config };
+      newConfig.sections[sectionIndex] = sectionData;
+      state.config = newConfig;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 9cb708611..ba3cb51f1 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -8,6 +8,7 @@ const KEY_NAMES = [
   'UPDATE_ITEM',
   'UPDATE_PAGE_INFO',
   'UPDATE_APP_CONFIG',
+  'UPDATE_SECTION',
 ];
 
 // Convert array of key names into an object, and export

From fecd1c6493f0c5328ba6ee1d4779bfc9ddaad5b5 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 13:26:49 +0100
Subject: [PATCH 48/98] :sparkles: Builds edit section form and functionality

---
 .../InteractiveEditor/EditSection.vue         | 110 ++++++++++++++++--
 src/components/LinkItems/Collapsable.vue      |  27 ++++-
 src/components/LinkItems/Section.vue          |  33 +++++-
 3 files changed, 159 insertions(+), 11 deletions(-)

diff --git a/src/components/InteractiveEditor/EditSection.vue b/src/components/InteractiveEditor/EditSection.vue
index 30eeb917a..9b461d827 100644
--- a/src/components/InteractiveEditor/EditSection.vue
+++ b/src/components/InteractiveEditor/EditSection.vue
@@ -1,23 +1,119 @@
 <template>
-  <span>Item Editor</span>
+  <modal
+    :name="modalName"
+    :resizable="true"
+    width="50%"
+    height="80%"
+    classes="dashy-modal edit-section"
+    @closed="modalClosed"
+  >
+  <div class="edit-section-inner">
+    <h3>Edit Section</h3>
+    <FormSchema
+      :schema="customSchema"
+      v-model="sectionData"
+      name="editSectionForm"
+      class="edit-section-form"
+    />
+    <!-- Save to state button -->
+    <Button class="edit-section-save-btn" :click="saveSection">Save</Button>
+    </div>
+  </modal>
 </template>
 
 <script>
+import FormSchema from '@formschema/native';
+import StoreKeys from '@/utils/StoreMutations';
+import DashySchema from '@/utils/ConfigSchema';
+import Button from '@/components/FormElements/Button';
+import { modalNames } from '@/utils/defaults';
 
 export default {
   name: 'EditSection',
+  props: {
+    sectionIndex: Number,
+  },
+  components: {
+    Button,
+    FormSchema,
+  },
   data() {
-    return {};
+    return {
+      modalName: modalNames.EDIT_SECTION,
+      schema: DashySchema.properties.sections.items.properties,
+      sectionData: {},
+    };
+  },
+  computed: {
+    customSchema() {
+      const sectionSchema = this.schema;
+      const displayDataSchema = this.schema.displayData.properties;
+      return {
+        type: 'object',
+        properties: {
+          name: sectionSchema.name,
+          icon: sectionSchema.icon,
+          displayData: {
+            title: '',
+            description: '',
+            type: 'object',
+            properties: {
+              sortBy: displayDataSchema.sortBy,
+              rows: displayDataSchema.rows,
+              cols: displayDataSchema.cols,
+              collapsed: displayDataSchema.collapsed,
+              hideForGuests: displayDataSchema.hideForGuests,
+            },
+          },
+        },
+      };
+    },
+  },
+  mounted() {
+    this.sectionData = this.$store.getters.getSectionByIndex(this.sectionIndex);
+    this.$modal.show(modalNames.EDIT_SECTION);
+  },
+  methods: {
+    getSectionFromState(index) {
+      return this.$store.getters.getSectionByIndex(index);
+    },
+    /* Clean up work, triggered when modal closed */
+    modalClosed() {
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+      this.$emit('closeEditSection');
+    },
+    saveSection() {
+      const { sectionIndex, sectionData } = this;
+      this.$store.commit(StoreKeys.UPDATE_SECTION, { sectionIndex, sectionData });
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+      this.$emit('closeEditSection');
+    },
   },
-  props: {},
-  computed: {},
-  components: {},
-  methods: {},
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 @import '@/styles/style-helpers.scss';
 @import '@/styles/media-queries.scss';
+@import '@/styles/schema-editor.scss';
 
+.edit-section-inner {
+  padding: 1rem;
+  background: var(--interactive-editor-background);
+  color: var(--interactive-editor-color);
+  height: 100%;
+  overflow-y: auto;
+  @extend .scroll-bar;
+  h3 {
+    font-size: 1.4rem;
+    margin: 0.5rem;
+  }
+  .edit-section-form {
+    @extend .schema-form;
+    margin-bottom: 2.5rem;
+  }
+  .edit-section-save-btn {
+    margin-bottom: 2rem;
+  }
+}
 </style>
diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
index f0d08f434..7d8386f20 100644
--- a/src/components/LinkItems/Collapsable.vue
+++ b/src/components/LinkItems/Collapsable.vue
@@ -4,16 +4,17 @@
     :style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
   >
     <input
-      :id="`collapsible-${uniqueKey}`"
+      :id="sectionKey"
       class="toggle"
       type="checkbox"
       :checked="getCollapseState()"
       @change="collapseChanged"
       tabIndex="-1"
     >
-    <label :for="`collapsible-${uniqueKey}`" class="lbl-toggle" tabindex="-1">
+    <label :for="sectionKey" class="lbl-toggle" tabindex="-1">
       <Icon v-if="icon" :icon="icon" size="small" :url="title" class="section-icon" />
       <h3>{{ title }}</h3>
+      <EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openEditModal" />
     </label>
     <div class="collapsible-content">
       <div class="content-inner">
@@ -27,6 +28,7 @@
 
 import { localStorageKeys } from '@/utils/defaults';
 import Icon from '@/components/LinkItems/ItemIcon.vue';
+import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
 
 export default {
   name: 'CollapsableContainer',
@@ -42,6 +44,16 @@ export default {
   },
   components: {
     Icon,
+    EditModeIcon,
+  },
+  computed: {
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
+    sectionKey() {
+      if (this.isEditMode) return undefined;
+      return `collapsible-${this.uniqueKey}`;
+    },
   },
   methods: {
     /* Check that row & column span is valid, and not over the max */
@@ -95,6 +107,9 @@ export default {
         this.setCollapseState(this.uniqueKey.toString(), whatChanged.srcElement.checked);
       }
     },
+    openEditModal() {
+      this.$emit('openEditSection');
+    },
   },
 };
 </script>
@@ -207,5 +222,13 @@ export default {
   .collapsible-content .content-inner {
     padding: 0.5rem;
   }
+
+  .edit-mode-item {
+    width: 1rem;
+    height: 1rem;
+    float: right;
+    right: 0.5rem;
+    top: 0.5rem;
+  }
 }
 </style>
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 1e2da1350..e3d99bc93 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -8,6 +8,7 @@
     :rows="displayData.rows"
     :color="displayData.color"
     :customStyles="displayData.customStyles"
+    @openEditSection="openEditSection"
   >
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
@@ -45,15 +46,22 @@
       :name="`iframeModal-${groupId}`"
       @closed="$emit('itemClicked')"
     />
+    <EditSection
+      v-if="editMenuOpen"
+      @closeEditSection="closeEditSection"
+      :sectionIndex="index"
+    />
   </Collapsable>
 </template>
 
 <script>
-import { sortOrder as defaultSortOrder, localStorageKeys } from '@/utils/defaults';
-import ErrorHandler from '@/utils/ErrorHandler';
 import Item from '@/components/LinkItems/Item.vue';
 import Collapsable from '@/components/LinkItems/Collapsable.vue';
 import IframeModal from '@/components/LinkItems/IframeModal.vue';
+import EditSection from '@/components/InteractiveEditor/EditSection.vue';
+import ErrorHandler from '@/utils/ErrorHandler';
+import StoreKeys from '@/utils/StoreMutations';
+import { sortOrder as defaultSortOrder, localStorageKeys, modalNames } from '@/utils/defaults';
 
 export default {
   name: 'Section',
@@ -64,11 +72,18 @@ export default {
     displayData: Object,
     items: Array,
     itemSize: String,
+    index: Number,
   },
   components: {
     Collapsable,
     Item,
     IframeModal,
+    EditSection,
+  },
+  data() {
+    return {
+      editMenuOpen: false,
+    };
   },
   computed: {
     appConfig() {
@@ -113,6 +128,9 @@ export default {
       }
       return styles;
     },
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
   },
   methods: {
     /* Opens the iframe modal */
@@ -157,6 +175,17 @@ export default {
         .sort((a, b) => a.sort - b.sort)
         .map(({ value }) => value);
     },
+    /* Open the Section Edit Menu */
+    openEditSection() {
+      this.editMenuOpen = true;
+      this.$modal.show(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
+    closeEditSection() {
+      this.editMenuOpen = false;
+      this.$modal.hide(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
   },
 };
 </script>

From 64bd506c91e43367910a81ff82092cea5f34fdb0 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 13:28:20 +0100
Subject: [PATCH 49/98] :zap: Display a different tooltip, depending on if in
 edit mode

---
 src/components/LinkItems/Item.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 0cc259f02..dcccf7881 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -185,8 +185,10 @@ export default {
       const providerText = this.provider ? `<b>Provider</b>: ${this.provider}` : '';
       const lb1 = description && providerText ? '<br>' : '';
       const hotkeyText = this.hotkey ? `<br>Press '${this.hotkey}' to launch` : '';
+      const tooltipText = providerText + lb1 + description + hotkeyText;
+      const editText = 'Click to Edit, or right-click for more options';
       return {
-        content: providerText + lb1 + description + hotkeyText,
+        content: (this.isEditMode ? editText : tooltipText),
         trigger: 'hover focus',
         hideOnTargetClick: true,
         html: true,

From e0a7cbdf96b893fb0ff1afcc5d9eadd300468e41 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 13:31:13 +0100
Subject: [PATCH 50/98] :zap: Adds index to section itterator, for editing

---
 src/views/Home.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index ccfac14b9..378cdcdb9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -31,6 +31,7 @@
       <Section
         v-for="(section, index) in filteredTiles"
         :key="index"
+        :index="index"
         :title="section.name"
         :icon="section.icon || undefined"
         :displayData="getDisplayData(section)"
@@ -48,7 +49,9 @@
     <div v-if="checkIfResults()" class="no-data">
       {{searchValue ? $t('home.no-results') : $t('home.no-data')}}
     </div>
+    <!-- Show banner at bottom of screen, for Saving config changes -->
     <EditModeSaveMenu v-if="isEditMode" />
+    <!-- Modal for viewing and exporting configuration file -->
     <ExportConfigMenu />
   </div>
 </template>
@@ -116,6 +119,7 @@ export default {
       // Otherwise, return the usuall data from conf.yml
       return this.sections;
     },
+    /* Return all sections, that match users search term */
     filteredTiles() {
       const sections = this.singleSectionView || this.allSections;
       return sections.filter((section) => this.filterTiles(section.items, this.searchValue));

From 4667642dbe43087cfa67cb0d677b43e448b8d0f8 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 13:31:48 +0100
Subject: [PATCH 51/98] :zap: Refactors console-out into own function

---
 services/config-validator.js | 15 +++++++++------
 services/update-checker.js   | 10 +++++++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/services/config-validator.js b/services/config-validator.js
index bc6545e3d..b56c4d354 100644
--- a/services/config-validator.js
+++ b/services/config-validator.js
@@ -19,6 +19,9 @@ const ajv = new Ajv(validatorOptions);
 /* Message printed when validation was successful */
 const successMsg = () => '\x1b[1m\x1b[32mNo issues found, your configuration is valid :)\x1b[0m\n';
 
+/* Just a wrapper to system's console.log */
+const logToConsole = (msg) => { console.log(msg); };
+
 /* Formats error message. ready for printing to the console */
 const errorMsg = (output) => {
   const warningFont = '\x1b[103m\x1b[34m';
@@ -46,14 +49,14 @@ const setIsValidVariable = (isValid) => {
 
 /* Start the validation */
 const validate = (config) => {
-  console.log('\nChecking config file against schema...');
+  logToConsole('\nChecking config file against schema...');
   const valid = ajv.validate(schema, config);
   if (valid) {
     setIsValidVariable(true);
-    console.log(successMsg());
+    logToConsole(successMsg());
   } else {
     setIsValidVariable(false);
-    console.log(errorMsg(ajv.errors));
+    logToConsole(errorMsg(ajv.errors));
   }
 };
 
@@ -62,11 +65,11 @@ try {
   validate(config);
 } catch (e) { // Something went very wrong...
   setIsValidVariable(false);
-  console.log(bigError());
-  console.log('Please ensure that your config file is present, '
+  logToConsole(bigError());
+  logToConsole('Please ensure that your config file is present, '
     + 'has the correct access rights and is parsable. '
     + 'If this warning persists, it may be an issue with the '
     + 'validator function. Please raise an issue, and include the following stack trace:\n');
   console.warn('\x1b[33mStack Trace for config-validator.js:\x1b[0m\n', e);
-  console.log('\n\n');
+  logToConsole('\n\n');
 }
diff --git a/services/update-checker.js b/services/update-checker.js
index 8f5038881..5160fa772 100644
--- a/services/update-checker.js
+++ b/services/update-checker.js
@@ -4,6 +4,10 @@ const currentVersion = require('../package.json').version;
 
 const packageUrl = 'https://github.com/raw/Lissy93/dashy/master/package.json';
 
+const logToConsole = (msg) => {
+  console.log(msg); // eslint-disable-line no-console
+};
+
 const makeMsg = (latestVersion) => {
   const parse = (version) => parseInt(version.replace(/\./g, ''), 10);
   const difference = parse(latestVersion) - parse(currentVersion);
@@ -20,9 +24,9 @@ const makeMsg = (latestVersion) => {
 
 axios.get(packageUrl).then((response) => {
   if (response && response.data && response.data.version) {
-    console.log(`\nUsing Dashy V-${currentVersion}. Update Check Complete`);
-    console.log(makeMsg(response.data.version));
+    logToConsole(`\nUsing Dashy V-${currentVersion}. Update Check Complete`);
+    logToConsole(makeMsg(response.data.version));
   }
 }).catch(() => {
-  console.log('Unable to check for updates');
+  logToConsole('Unable to check for updates');
 });

From 7ac233e763b476180ac685015365fd3e219da3d2 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 14:30:22 +0100
Subject: [PATCH 52/98] :globe_with_meridians: Change stucture of context menu

---
 src/assets/locales/en.json | 62 ++++++++++++++++++++++++++------------
 1 file changed, 43 insertions(+), 19 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 350bf5b96..9c0941339 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -174,26 +174,50 @@
     "move-item": "Move To",
     "remove-item": "Remove"
   },
+  "context-menus": {
+    "item": {
+      "open-section-title": "Open In",
+      "sametab": "Current Tab",
+      "newtab": "New Tab",
+      "modal": "Pop-Up Modal",
+      "workspace": "Workspace View",
+      "options-section-title": "Options",
+      "edit-item": "Edit",
+      "move-item": "Move To",
+      "remove-item": "Remove"
+    },
+    "section": {
+      "open-section": "Open Section",
+      "edit-section": "Edit",
+      "move-section": "Move To",
+      "remove-section": "Remove"
+    }
+  },
   "interactive-editor": {
-    "start-editing-tooltip": "Enter the Interactive Editor",
-    "edit-site-data-subheading": "Edit Site Data",
-    "edit-page-info-btn": "Edit Page Info",
-    "edit-page-info-tooltip": "App title, description, nav links, footer text, etc",
-    "edit-app-config-btn": "Edit App Config",
-    "edit-app-config-tooltip": "All other app configuration options",
-    "config-save-methods-subheading": "Config Saving Options",
-    "save-locally-btn": "Save Locally",
-    "save-locally-tooltip": "Save config locally, to browser storage. This will not affect your config file, but changes will only be saved on this device",
-    "save-disk-btn": "Save to Disk",
-    "save-disk-tooltip": "Save config to the conf.yml file on disk. This will backup, and then over-write your existing config",
-    "export-config-btn": "Export Config",
-    "export-config-tooltip": "View and export new config, either to a file, or to clipboard",
-    "cancel-changes-btn": "Cancel Edit",
-    "cancel-changes-tooltip": "Reset current modifications, and exit Edit Mode. This will not affect your saved config",
-    "edit-mode-name": "Edit Mode",
-    "edit-mode-subtitle": "You are in Edit Mode",
-    "edit-mode-description": "This means you can make modifications to your config, and preview the results, but until you save, none of your changes will be preserved.",
-    "save-stage-btn": "Save",
+    "menu": {
+      "start-editing-tooltip": "Enter the Interactive Editor",
+      "edit-site-data-subheading": "Edit Site Data",
+      "edit-page-info-btn": "Edit Page Info",
+      "edit-page-info-tooltip": "App title, description, nav links, footer text, etc",
+      "edit-app-config-btn": "Edit App Config",
+      "edit-app-config-tooltip": "All other app configuration options",
+      "config-save-methods-subheading": "Config Saving Options",
+      "save-locally-btn": "Save Locally",
+      "save-locally-tooltip": "Save config locally, to browser storage. This will not affect your config file, but changes will only be saved on this device",
+      "save-disk-btn": "Save to Disk",
+      "save-disk-tooltip": "Save config to the conf.yml file on disk. This will backup, and then over-write your existing config",
+      "export-config-btn": "Export Config",
+      "export-config-tooltip": "View and export new config, either to a file, or to clipboard",
+      "cancel-changes-btn": "Cancel Edit",
+      "cancel-changes-tooltip": "Reset current modifications, and exit Edit Mode. This will not affect your saved config",
+      "edit-mode-name": "Edit Mode",
+      "edit-mode-subtitle": "You are in Edit Mode",
+      "edit-mode-description": "This means you can make modifications to your config, and preview the results, but until you save, none of your changes will be preserved.",
+      "save-stage-btn": "Save"
+    },
+    "edit-section": {
+      "edit-tooltip": "Click to Edit, or right-click for more options"
+    },
     "export": {
       "export-title": "Export Config",
       "copy-clipboard-btn": "Copy to Clipboard",

From d3772891b5ce83b9ebb33653e3635ef2431ab4a2 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 14:31:14 +0100
Subject: [PATCH 53/98] :sparkles: Adds context menu for more options on
 Settings

---
 src/components/LinkItems/Collapsable.vue      |  13 +-
 src/components/LinkItems/Item.vue             |   4 +-
 .../{ContextMenu.vue => ItemContextMenu.vue}  |   0
 src/components/LinkItems/Section.vue          |  30 +++++
 .../LinkItems/SectionContextMenu.vue          | 115 ++++++++++++++++++
 5 files changed, 158 insertions(+), 4 deletions(-)
 rename src/components/LinkItems/{ContextMenu.vue => ItemContextMenu.vue} (100%)
 create mode 100644 src/components/LinkItems/SectionContextMenu.vue

diff --git a/src/components/LinkItems/Collapsable.vue b/src/components/LinkItems/Collapsable.vue
index 7d8386f20..c2d970845 100644
--- a/src/components/LinkItems/Collapsable.vue
+++ b/src/components/LinkItems/Collapsable.vue
@@ -11,10 +11,12 @@
       @change="collapseChanged"
       tabIndex="-1"
     >
-    <label :for="sectionKey" class="lbl-toggle" tabindex="-1">
+    <label :for="sectionKey" class="lbl-toggle" tabindex="-1"
+      @mouseup.right="openContextMenu" @contextmenu.prevent>
       <Icon v-if="icon" :icon="icon" size="small" :url="title" class="section-icon" />
       <h3>{{ title }}</h3>
-      <EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openEditModal" />
+      <EditModeIcon v-if="isEditMode" @click="openEditModal"
+        v-tooltip="editTooltip()" class="edit-mode-item" />
     </label>
     <div class="collapsible-content">
       <div class="content-inner">
@@ -110,6 +112,13 @@ export default {
     openEditModal() {
       this.$emit('openEditSection');
     },
+    openContextMenu(e) {
+      this.$emit('openContextMenu', e);
+    },
+    editTooltip() {
+      const content = this.$t('interactive-editor.edit-section.edit-tooltip');
+      return { content, trigger: 'hover focus', delay: { show: 100, hide: 0 } };
+    },
   },
 };
 </script>
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index dcccf7881..2b6910b77 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -52,7 +52,7 @@ import Icon from '@/components/LinkItems/ItemIcon.vue';
 import ItemOpenMethodIcon from '@/components/LinkItems/ItemOpenMethodIcon';
 import StatusIndicator from '@/components/LinkItems/StatusIndicator';
 import EditItem from '@/components/InteractiveEditor/EditItem';
-import ContextMenu from '@/components/LinkItems/ContextMenu';
+import ContextMenu from '@/components/LinkItems/ItemContextMenu';
 import StoreKeys from '@/utils/StoreMutations';
 import { targetValidator } from '@/utils/ConfigHelpers';
 import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
@@ -186,7 +186,7 @@ export default {
       const lb1 = description && providerText ? '<br>' : '';
       const hotkeyText = this.hotkey ? `<br>Press '${this.hotkey}' to launch` : '';
       const tooltipText = providerText + lb1 + description + hotkeyText;
-      const editText = 'Click to Edit, or right-click for more options';
+      const editText = this.$t('interactive-editor.edit-section.edit-tooltip');
       return {
         content: (this.isEditMode ? editText : tooltipText),
         trigger: 'hover focus',
diff --git a/src/components/LinkItems/ContextMenu.vue b/src/components/LinkItems/ItemContextMenu.vue
similarity index 100%
rename from src/components/LinkItems/ContextMenu.vue
rename to src/components/LinkItems/ItemContextMenu.vue
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index e3d99bc93..e7092e5c1 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -9,6 +9,7 @@
     :color="displayData.color"
     :customStyles="displayData.customStyles"
     @openEditSection="openEditSection"
+    @openContextMenu="openContextMenu"
   >
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
@@ -51,6 +52,14 @@
       @closeEditSection="closeEditSection"
       :sectionIndex="index"
     />
+    <ContextMenu
+      :show="contextMenuOpen"
+      :posX="contextPos.posX"
+      :posY="contextPos.posY"
+      :id="`context-menu-${groupId}`"
+      v-click-outside="closeContextMenu"
+      @openEditSection="openEditSection"
+    />
   </Collapsable>
 </template>
 
@@ -59,6 +68,7 @@ import Item from '@/components/LinkItems/Item.vue';
 import Collapsable from '@/components/LinkItems/Collapsable.vue';
 import IframeModal from '@/components/LinkItems/IframeModal.vue';
 import EditSection from '@/components/InteractiveEditor/EditSection.vue';
+import ContextMenu from '@/components/LinkItems/SectionContextMenu.vue';
 import ErrorHandler from '@/utils/ErrorHandler';
 import StoreKeys from '@/utils/StoreMutations';
 import { sortOrder as defaultSortOrder, localStorageKeys, modalNames } from '@/utils/defaults';
@@ -76,6 +86,7 @@ export default {
   },
   components: {
     Collapsable,
+    ContextMenu,
     Item,
     IframeModal,
     EditSection,
@@ -83,6 +94,11 @@ export default {
   data() {
     return {
       editMenuOpen: false,
+      contextMenuOpen: false,
+      contextPos: {
+        posX: undefined,
+        posY: undefined,
+      },
     };
   },
   computed: {
@@ -180,12 +196,26 @@ export default {
       this.editMenuOpen = true;
       this.$modal.show(modalNames.EDIT_SECTION);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+      this.contextMenuOpen = false;
     },
     closeEditSection() {
       this.editMenuOpen = false;
       this.$modal.hide(modalNames.EDIT_SECTION);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
     },
+    /* Open custom context menu, and set position */
+    openContextMenu(e) {
+      this.contextMenuOpen = true;
+      if (e && window) {
+        this.contextPos = {
+          posX: e.clientX + window.pageXOffset,
+          posY: e.clientY + window.pageYOffset,
+        };
+      }
+    },
+    closeContextMenu() {
+      this.contextMenuOpen = false;
+    },
   },
 };
 </script>
diff --git a/src/components/LinkItems/SectionContextMenu.vue b/src/components/LinkItems/SectionContextMenu.vue
new file mode 100644
index 000000000..e6cfeb32c
--- /dev/null
+++ b/src/components/LinkItems/SectionContextMenu.vue
@@ -0,0 +1,115 @@
+<template>
+  <transition name="slide">
+    <div class="context-menu" v-if="show && !isMenuDisabled"
+      :style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
+      <!-- Open Options -->
+      <ul class="menu-section">
+        <li @click="openSection()">
+          <SameTabOpenIcon />
+          <span>{{ $t('context-menus.section.open-section') }}</span>
+        </li>
+        <li @click="openEditSectionMenu">
+          <EditIcon />
+          <span>{{ $t('context-menus.section.edit-section') }}</span>
+        </li>
+        <li v-if="isEditMode">
+          <MoveIcon />
+          <span>{{ $t('context-menus.section.move-section') }}</span>
+        </li>
+        <li v-if="isEditMode">
+          <BinIcon />
+          <span>{{ $t('context-menus.section.remove-section') }}</span>
+        </li>
+      </ul>
+    </div>
+  </transition>
+</template>
+
+<script>
+// Import icons for each element
+import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
+import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
+import MoveIcon from '@/assets/interface-icons/interactive-editor-move-to.svg';
+import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
+
+export default {
+  name: 'ContextMenu',
+  components: {
+    EditIcon,
+    MoveIcon,
+    BinIcon,
+    SameTabOpenIcon,
+  },
+  props: {
+    posX: Number, // The X coordinate for positioning
+    posY: Number, // The Y coordinate for positioning
+    show: Boolean, // Should show or hide the menu
+  },
+  computed: {
+    isMenuDisabled() {
+      return !!this.$store.getters.appConfig.disableContextMenu;
+    },
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
+  },
+  methods: {
+    /* Called on item click, emits an event up to Item */
+    /* in order to launch the current app to a given target */
+    openSection() {
+      // TODO: Open Section
+    },
+    openEditSectionMenu() {
+      this.$emit('openEditSection');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+
+div.context-menu {
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  z-index: 8;
+  background: var(--context-menu-background);
+  color: var(--context-menu-color);
+  border: 1px solid var(--context-menu-secondary-color);
+  border-radius: var(--curve-factor);
+  box-shadow: var(--context-menu-shadow);
+  opacity: 0.98;
+
+  ul.menu-section {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    &:not(:last-child) {
+      border-bottom: 1px solid var(--context-menu-color);
+    }
+    li {
+      cursor: pointer;
+      padding: 0.5rem 1rem;
+      display: flex;
+      flex-direction: row;
+      font-size: 1rem;
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--context-menu-secondary-color);
+      }
+      svg {
+        width: 1rem;
+         margin-right: 0.5rem;
+          path { fill: currentColor; }
+      }
+    }
+  }
+}
+
+// Define enter and leave transitions
+.slide-enter-active { animation: slide-in .1s; }
+.slide-leave-active { animation: slide-in .1s reverse; }
+@keyframes slide-in {
+  0% { transform: scaleY(0.5) scaleX(0.8) translateY(-50px); }
+  100% { transform: scaleY(1) translateY(0) translateY(0); }
+}
+</style>

From 51bcd2344e9b3c2f652bbb953c453719de550391 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 14:32:11 +0100
Subject: [PATCH 54/98] :globe_with_meridians: Updates translation keys

---
 .../InteractiveEditor/EditAppConfig.vue       |  6 ++--
 .../InteractiveEditor/EditModeSaveMenu.vue    | 32 +++++++++----------
 .../InteractiveEditor/EditPageInfo.vue        |  4 +--
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/InteractiveEditor/EditAppConfig.vue b/src/components/InteractiveEditor/EditAppConfig.vue
index 91e9dbb49..a1dfb0219 100644
--- a/src/components/InteractiveEditor/EditAppConfig.vue
+++ b/src/components/InteractiveEditor/EditAppConfig.vue
@@ -8,7 +8,7 @@
     @closed="modalClosed"
   >
   <div class="edit-app-config-inner">
-  <h3>{{ $t('interactive-editor.edit-app-config-btn') }}</h3>
+  <h3>{{ $t('interactive-editor.menu.edit-app-config-btn') }}</h3>
   <div class="app-config-intro">
     <p class="use-caution">Proceed with Caution</p>
     The following options are for advanded app configration.
@@ -17,7 +17,7 @@
     to avoid unintended consequences.
   </div>
   <Button class="save-app-config-btn" :click="saveToState">
-    {{ $t('interactive-editor.save-stage-btn') }}
+    {{ $t('interactive-editor.menu.save-stage-btn') }}
     <SaveIcon />
   </button>
   <FormSchema
@@ -29,7 +29,7 @@
     name="appConfigForm"
   ></FormSchema>
   <Button class="save-app-config-btn" :click="saveToState">
-    {{ $t('interactive-editor.save-stage-btn') }}
+    {{ $t('interactive-editor.menu.save-stage-btn') }}
     <SaveIcon />
   </button>
   </div>
diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index 4e53cd0c2..fad2ebc3c 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -3,62 +3,62 @@
   <div class="edit-mode-bottom-banner">
     <div class="edit-banner-section intro-container">
       <p class="section-sub-title edit-mode-intro l-1">
-        {{ $t('interactive-editor.edit-mode-subtitle') }}
+        {{ $t('interactive-editor.menu.edit-mode-subtitle') }}
       </p>
       <p class="edit-mode-intro l-2">
-        {{ $t('interactive-editor.edit-mode-description') }}
+        {{ $t('interactive-editor.menu.edit-mode-description') }}
       </p>
     </div>
     <div class="edit-banner-section empty-space"></div>
     <!-- Save Buttons -->
     <div class="edit-banner-section save-buttons-container">
       <p class="section-sub-title">
-        {{ $t('interactive-editor.config-save-methods-subheading') }}
+        {{ $t('interactive-editor.menu.config-save-methods-subheading') }}
       </p>
       <Button
         :click="openExportConfigMenu"
-        v-tooltip="tooltip($t('interactive-editor.export-config-tooltip'))"
+        v-tooltip="tooltip($t('interactive-editor.menu.export-config-tooltip'))"
       >
-        {{ $t('interactive-editor.export-config-btn') }}
+        {{ $t('interactive-editor.menu.export-config-btn') }}
         <ExportIcon />
       </Button>
       <Button
         :click="reset"
-        v-tooltip="tooltip($t('interactive-editor.cancel-changes-tooltip'))"
+        v-tooltip="tooltip($t('interactive-editor.menu.cancel-changes-tooltip'))"
       >
-        {{ $t('interactive-editor.cancel-changes-btn') }}
+        {{ $t('interactive-editor.menu.cancel-changes-btn') }}
         <CancelIcon />
       </Button>
       <Button
-        v-tooltip="tooltip($t('interactive-editor.save-locally-tooltip'))"
+        v-tooltip="tooltip($t('interactive-editor.menu.save-locally-tooltip'))"
       >
-        {{ $t('interactive-editor.save-locally-btn') }}
+        {{ $t('interactive-editor.menu.save-locally-btn') }}
         <SaveLocallyIcon />
       </Button>
       <Button
-        v-tooltip="tooltip($t('interactive-editor.save-disk-tooltip'))"
+        v-tooltip="tooltip($t('interactive-editor.menu.save-disk-tooltip'))"
       >
-        {{ $t('interactive-editor.save-disk-btn') }}
+        {{ $t('interactive-editor.menu.save-disk-btn') }}
         <SaveToDiskIcon />
       </Button>
     </div>
     <!-- Open Modal Buttons -->
     <div class="edit-banner-section edit-site-config-buttons">
       <p class="section-sub-title">
-        {{ $t('interactive-editor.edit-site-data-subheading') }}
+        {{ $t('interactive-editor.menu.edit-site-data-subheading') }}
       </p>
       <Button
         :click="openEditPageInfo"
-        v-tooltip="tooltip($t('interactive-editor.edit-page-info-tooltip'))"
+        v-tooltip="tooltip($t('interactive-editor.menu.edit-page-info-tooltip'))"
       >
-        {{ $t('interactive-editor.edit-page-info-btn') }}
+        {{ $t('interactive-editor.menu.edit-page-info-btn') }}
         <PageInfoIcon />
       </Button>
       <Button
         :click="openEditAppConfig"
-        v-tooltip="tooltip($t('interactive-editor.edit-app-config-tooltip'))"
+        v-tooltip="tooltip($t('interactive-editor.menu.edit-app-config-tooltip'))"
       >
-        {{ $t('interactive-editor.edit-app-config-btn') }}
+        {{ $t('interactive-editor.menu.edit-app-config-btn') }}
         <AppConfigIcon />
       </Button>
     </div>
diff --git a/src/components/InteractiveEditor/EditPageInfo.vue b/src/components/InteractiveEditor/EditPageInfo.vue
index 215f8bb86..25c595bdf 100644
--- a/src/components/InteractiveEditor/EditPageInfo.vue
+++ b/src/components/InteractiveEditor/EditPageInfo.vue
@@ -8,7 +8,7 @@
     @closed="modalClosed"
   >
   <div class="edit-page-info-inner">
-  <h3>{{ $t('interactive-editor.edit-page-info-btn') }}</h3>
+  <h3>{{ $t('interactive-editor.menu.edit-page-info-btn') }}</h3>
   <FormSchema
     :schema="schema"
     v-model="formData"
@@ -17,7 +17,7 @@
     name="pageInfoForm"
   >
     <Button type="submit">
-      {{ $t('interactive-editor.save-stage-btn') }}
+      {{ $t('interactive-editor.menu.save-stage-btn') }}
       <SaveIcon />
     </button>
   </FormSchema>

From f5965a788ffbbdfb9ca6326b2695fc12b5c3d3b8 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 14:32:41 +0100
Subject: [PATCH 55/98] :sparkles: Adds edit title button next to page title

---
 src/components/PageStrcture/PageTitle.vue | 52 +++++++++++++++++++++--
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/components/PageStrcture/PageTitle.vue b/src/components/PageStrcture/PageTitle.vue
index 98d752121..26c7cceff 100644
--- a/src/components/PageStrcture/PageTitle.vue
+++ b/src/components/PageStrcture/PageTitle.vue
@@ -1,14 +1,23 @@
 <template>
-  <router-link to="/" class="page-titles">
+  <router-link to="/" class="page-titles" :disabled="isEditMode">
+    <!-- Optional page logo image -->
     <img v-if="logo" :src="logo" class="site-logo" />
+    <!-- Page heading and sub-heading -->
     <div class="text">
-    <h1>{{ title }}</h1>
-    <span class="subtitle">{{ description }}</span>
+      <h1>{{ title }}</h1>
+      <span class="subtitle">{{ description }}</span>
     </div>
+    <!-- When in edit mode, show Edit Title button -->
+    <EditModeIcon v-if="isEditMode" @click="editTitle()"
+      class="edit-icon" v-tooltip="tooltip()" />
   </router-link>
 </template>
 
 <script>
+import EditModeIcon from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+
 export default {
   name: 'PageTitle',
   props: {
@@ -16,6 +25,26 @@ export default {
     description: String,
     logo: String,
   },
+  components: {
+    EditModeIcon,
+  },
+  computed: {
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
+  },
+  methods: {
+    /* On edit button click, open the edit pageInfo modal */
+    editTitle() {
+      this.$modal.show(modalNames.EDIT_PAGE_INFO);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
+    /* Edit button tooltip */
+    tooltip() {
+      const content = this.$t('interactive-editor.menu.edit-page-info-btn');
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
+  },
 };
 </script>
 
@@ -28,6 +57,7 @@ export default {
   flex-direction: row;
   align-items: center;
   text-decoration: none;
+  position: relative;
   h1 {
     color: var(--heading-text-color);
     font-size: 2.5rem;
@@ -49,5 +79,21 @@ export default {
     text-align: center;
     padding: 0.25rem 0;
   }
+  &[disabled] {
+    cursor: default;
+  }
+  svg.edit-icon {
+    width: 1rem;
+    height: 1rem;
+    right: 1rem;
+    top: 0.5rem;
+    padding: 0.25rem;
+    margin: 0.25rem;
+    cursor: pointer;
+    border: 1px solid var(--background-darker);
+    border-radius: var(--curve-factor);
+    path { fill: var(--primary); }
+    &:hover { border: 1px solid var(--primary); }
+  }
 }
 </style>

From 640e605ea58ed091805141eeff8d0ce3da2cc42b Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 14:37:54 +0100
Subject: [PATCH 56/98] :globe_with_meridians: Add translations for edit mode
 tooltip

---
 src/components/Settings/ConfigLauncher.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 0f6d479b8..6ff468809 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -47,11 +47,12 @@
 </template>
 
 <script>
-
+// Import components, and store-key identifiers
 import ConfigContainer from '@/components/Configuration/ConfigContainer';
 import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
-import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
 import Keys from '@/utils/StoreMutations';
+import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
+// Import icons for config launcher buttons
 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
 import IconInteractiveEditor from '@/assets/interface-icons/interactive-editor-edit-mode.svg';
 import IconViewMode from '@/assets/interface-icons/application-change-view.svg';
@@ -90,10 +91,11 @@ export default {
     isEditMode() {
       return this.$store.state.editMode;
     },
+    /* Tooltip text for Edit Mode button, to change depending on it in edit mode */
     enterEditModeTooltip() {
-      // Change tooltip text for 'Enter Edit Mode' button, when already in Edit Mode
       return this.$t(
-        `interactive-editor.${this.isEditMode ? 'edit-mode-subtitle' : 'start-editing-tooltip'}`,
+        `interactive-editor.menu.${this.isEditMode
+          ? 'edit-mode-subtitle' : 'start-editing-tooltip'}`,
       );
     },
   },

From df030462889e1a24b50a062bc27efde412949f9c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 14:47:37 +0100
Subject: [PATCH 57/98] :sparkles: Adds functionality for navigating to
 single-section view

---
 src/components/LinkItems/Section.vue            | 13 ++++++++++++-
 src/components/LinkItems/SectionContextMenu.vue |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index e7092e5c1..0c8d34572 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -59,11 +59,13 @@
       :id="`context-menu-${groupId}`"
       v-click-outside="closeContextMenu"
       @openEditSection="openEditSection"
+      @navigateToSection="navigateToSection"
     />
   </Collapsable>
 </template>
 
 <script>
+import router from '@/router';
 import Item from '@/components/LinkItems/Item.vue';
 import Collapsable from '@/components/LinkItems/Collapsable.vue';
 import IframeModal from '@/components/LinkItems/IframeModal.vue';
@@ -191,13 +193,21 @@ export default {
         .sort((a, b) => a.sort - b.sort)
         .map(({ value }) => value);
     },
+    /* Navigate to the section's single-section view page */
+    navigateToSection() {
+      const parse = (section) => section.replace(' ', '-').toLowerCase().trim();
+      const sectionIdentifier = parse(this.title);
+      router.push({ path: `/home/${sectionIdentifier}` });
+      this.closeContextMenu();
+    },
     /* Open the Section Edit Menu */
     openEditSection() {
       this.editMenuOpen = true;
       this.$modal.show(modalNames.EDIT_SECTION);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
-      this.contextMenuOpen = false;
+      this.closeContextMenu();
     },
+    /* Close the section edit menu */
     closeEditSection() {
       this.editMenuOpen = false;
       this.$modal.hide(modalNames.EDIT_SECTION);
@@ -213,6 +223,7 @@ export default {
         };
       }
     },
+    /* Hide the right-click context menu */
     closeContextMenu() {
       this.contextMenuOpen = false;
     },
diff --git a/src/components/LinkItems/SectionContextMenu.vue b/src/components/LinkItems/SectionContextMenu.vue
index e6cfeb32c..3ddf8afa4 100644
--- a/src/components/LinkItems/SectionContextMenu.vue
+++ b/src/components/LinkItems/SectionContextMenu.vue
@@ -57,7 +57,7 @@ export default {
     /* Called on item click, emits an event up to Item */
     /* in order to launch the current app to a given target */
     openSection() {
-      // TODO: Open Section
+      this.$emit('navigateToSection');
     },
     openEditSectionMenu() {
       this.$emit('openEditSection');

From 9d361142bba1b3a966e5fd807376ac74e3d8cee7 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 17:20:38 +0100
Subject: [PATCH 58/98] :construction: Creates copy part of move item

---
 .../InteractiveEditor/MoveItemTo.vue          | 132 ++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 src/components/InteractiveEditor/MoveItemTo.vue

diff --git a/src/components/InteractiveEditor/MoveItemTo.vue b/src/components/InteractiveEditor/MoveItemTo.vue
new file mode 100644
index 000000000..19efb4d79
--- /dev/null
+++ b/src/components/InteractiveEditor/MoveItemTo.vue
@@ -0,0 +1,132 @@
+<template>
+  <modal
+    :name="modalName" @closed="close"
+    :resizable="true" width="40%" height="40%" classes="dashy-modal">
+    <div class="move-menu-inner">
+      <h3 class="move-title">Move or Copy Item</h3>
+      <p class="item-id">Editing {{ itemId }}</p>
+      <Radio
+        v-model="operation"
+        :options="['Move', 'Copy']"
+        label="Operation Type"
+        :initialOption="operation"
+      />
+      <Select
+        v-model="selectedSection"
+        :options="sectionList"
+        :initialOption="currentSection"
+        label="Destination"
+      />
+      <Radio
+        v-model="appendTo"
+        :options="['Begining', 'End']"
+        label="Append To"
+        :initialOption="appendTo"
+      />
+      <div class="button-wrapper">
+        <Button class="save-move" :click="save">
+          {{ $t('interactive-editor.menu.save-stage-btn') }}
+          <SaveIcon />
+        </Button>
+        <Button class="save-move" :click="close">
+          {{ $t('interactive-editor.menu.cancel-stage-btn') }}
+          <CancelIcon />
+        </Button>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+import Select from '@/components/FormElements/Select';
+import Radio from '@/components/FormElements/Radio';
+import Button from '@/components/FormElements/Button';
+import SaveIcon from '@/assets/interface-icons/save-config.svg';
+import CancelIcon from '@/assets/interface-icons/config-close.svg';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+
+export default {
+  name: 'MoveItemTo',
+  components: {
+    Select,
+    Radio,
+    Button,
+    SaveIcon,
+    CancelIcon,
+  },
+  props: {
+    itemId: String, // Unique ID for item
+    initialSection: String, // The current section
+  },
+  data() {
+    return {
+      selectedSection: '',
+      operation: 'Move',
+      appendTo: 'End',
+      modalName: `${modalNames.MOVE_ITEM_TO}-${this.itemId}`,
+    };
+  },
+  computed: {
+    sections() {
+      return this.$store.getters.sections;
+    },
+    sectionList() {
+      return this.sections.map((section) => section.name);
+    },
+    currentSection() {
+      let sectionName = '';
+      this.sections.forEach((section) => {
+        section.items.forEach((item) => {
+          if (item.id === this.itemId) sectionName = section.name;
+        });
+      });
+      return sectionName;
+    },
+  },
+  methods: {
+    save() {
+      const item = this.$store.getters.getItemById(this.itemId);
+      // Copy item to new section
+      const copyPayload = { item, toSection: this.selectedSection };
+      this.$store.commit(StoreKeys.COPY_ITEM, copyPayload);
+      // Remove item from previous section
+      if (this.operation === 'Move') {
+        // TODO: Remove
+      }
+      this.close();
+    },
+    close() {
+      this.$modal.hide(this.modalName);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.move-menu-inner {
+  padding: 1rem;
+  background: var(--interactive-editor-background);
+  color: var(--interactive-editor-color);
+  height: 100%;
+  overflow-y: auto;
+  h3.move-title {
+    margin: 0.25rem 0;
+  }
+  p.item-id {
+    font-size: 1rem;
+    font-style: italic;
+    margin: 0.25rem 0;
+    opacity: var(--dimming-factor);
+  }
+  .button-wrapper {
+    display: flex;
+    width: fit-content;
+    margin: 1.5rem auto;
+    button {
+      margin: 0 0.5rem;
+    }
+  }
+}
+</style>

From f4053d9bc0e74aae30a3a47eb1acf90d037076f9 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 17:21:17 +0100
Subject: [PATCH 59/98] :convenience_store: Adds copy_item action to store

---
 src/store.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/store.js b/src/store.js
index c9cc14146..708033d7d 100644
--- a/src/store.js
+++ b/src/store.js
@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 import Keys from '@/utils/StoreMutations';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import { componentVisibility } from '@/utils/ConfigHelpers';
+import { applyItemId } from '@/utils/MiscHelpers';
 import filterUserSections from '@/utils/CheckSectionVisibility';
 
 Vue.use(Vuex);
@@ -18,6 +19,7 @@ const {
   UPDATE_PAGE_INFO,
   UPDATE_APP_CONFIG,
   UPDATE_SECTION,
+  COPY_ITEM,
 } = Keys;
 
 const store = new Vuex.Store({
@@ -75,7 +77,7 @@ const store = new Vuex.Store({
     },
     [UPDATE_ITEM](state, payload) {
       const { itemId, newItem } = payload;
-      const newConfig = state.config;
+      const newConfig = { ...state.config };
       newConfig.sections.forEach((section, secIndex) => {
         section.items.forEach((item, itemIndex) => {
           if (item.id === itemId) {
@@ -101,6 +103,18 @@ const store = new Vuex.Store({
       newConfig.sections[sectionIndex] = sectionData;
       state.config = newConfig;
     },
+    [COPY_ITEM](state, payload) {
+      const { item, toSection } = payload;
+      const config = { ...state.config };
+      const newItem = { ...item };
+      config.sections.forEach((section) => {
+        if (section.name === toSection) {
+          section.items.push(newItem);
+        }
+      });
+      config.sections = applyItemId(config.sections);
+      state.config = config;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */

From 9bec26d4ab1f03ad8f64d87e386ad1f1cd974d01 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 17:22:51 +0100
Subject: [PATCH 60/98] :art: Adds store and modal keys for move item

---
 src/utils/StoreMutations.js | 1 +
 src/utils/defaults.js       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index ba3cb51f1..73383ce17 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -9,6 +9,7 @@ const KEY_NAMES = [
   'UPDATE_PAGE_INFO',
   'UPDATE_APP_CONFIG',
   'UPDATE_SECTION',
+  'COPY_ITEM',
 ];
 
 // Convert array of key names into an object, and export
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 80c314bd4..d698fa870 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -127,6 +127,7 @@ module.exports = {
     EDIT_PAGE_INFO: 'EDIT_PAGE_INFO',
     EDIT_APP_CONFIG: 'EDIT_APP_CONFIG',
     EXPORT_CONFIG_MENU: 'EXPORT_CONFIG_MENU',
+    MOVE_ITEM_TO: 'MOVE_ITEM_TO',
   },
   /* Key names for the top-level objects in conf.yml */
   topLevelConfKeys: {

From 16e649c67f644f23155735dc74f5929dc934809d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 17:23:26 +0100
Subject: [PATCH 61/98] :art: Update Input to accept Number or Text

---
 src/components/FormElements/Input.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FormElements/Input.vue b/src/components/FormElements/Input.vue
index 3acafb1aa..42ec58afb 100644
--- a/src/components/FormElements/Input.vue
+++ b/src/components/FormElements/Input.vue
@@ -30,7 +30,7 @@
 export default {
   name: 'Input',
   props: {
-    value: String, // The value bound to v-model
+    value: [String, Number], // The value bound to v-model
     label: String, // An optional label to display above
     name: String, // Required unique ID value, for accessibility
     placeholder: String, // Optional placeholder value

From 91956d88a2254a47d63864657b483151b13ca5a3 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 17:24:09 +0100
Subject: [PATCH 62/98] :zap: Convert hotkey value to Number

---
 src/components/InteractiveEditor/EditItem.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index c2ce79fdd..dd79f4c8a 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -209,6 +209,7 @@ export default {
       };
       if (newItem.tags) newItem.tags = strToTags(newItem.tags);
       if (newItem.statusCheck) newItem.statusCheck = strToBool(newItem.statusCheck);
+      // if (newItem.hotkey) newItem.hotkey = parseInt(newItem.hotkey, 10);
       return newItem;
     },
     /* Clean up work, triggered when modal closed */

From f4500942350035a21d846631aebd9ed9a7d524ea Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 17:35:29 +0100
Subject: [PATCH 63/98] :card_file_box: Adds descriptors to schema

---
 src/utils/ConfigSchema.json | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json
index d842575f1..49715b40e 100644
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@@ -483,6 +483,7 @@
       "type": "array",
       "description": "Array of sections, containing items",
       "items": {
+        "title": "Items",
         "type": "object",
         "required": [
           "name",
@@ -491,19 +492,23 @@
         "additionalProperties": false,
         "properties": {
           "name": {
+            "title": "Section Name",
             "type": "string",
             "description": "Title/ heading for a section"
           },
           "icon": {
+            "title": "Section Icon",
             "type": "string",
             "description": "Icon will be displayed next to title"
           },
           "displayData": {
+            "title": "Display Data",
             "type": "object",
             "additionalProperties": false,
             "description": "Optional meta data for customizing a section",
             "properties": {
               "sortBy": {
+                "title": "Sort By",
                 "type": "string",
                 "enum": [
                   "default",
@@ -517,19 +522,23 @@
                 "description": "How to sort items within the section. By default items are displayed in the order in which they are listed in within the config"
               },
               "collapsed": {
+                "title": "Is Collapsed?",
                 "type": "boolean",
                 "default": false,
                 "description": "If true, section needs to be clicked to open"
               },
               "color": {
+                "title": "Color",
                 "type": "string",
                 "description": "Hex code, or HTML color for section fill"
               },
               "customStyles": {
+                "title": "Custom Styles",
                 "type": "string",
                 "description": "CSS overides for section container"
               },
               "itemSize": {
+                "title": "Item Size",
                 "type": "string",
                 "enum": [
                   "small",
@@ -540,6 +549,7 @@
                 "description": "Size of items within the section"
               },
               "rows": {
+                "title": "Num Rows",
                 "type": "number",
                 "minimum": 1,
                 "maximum": 5,
@@ -547,6 +557,7 @@
                 "description": "The amount of space that the section spans vertically"
               },
               "cols": {
+                "title": "Num Cols",
                 "type": "number",
                 "minimum": 1,
                 "maximum": 5,
@@ -554,6 +565,7 @@
                 "description": "The amount of space that the section spans horizontally"
               },
               "sectionLayout": {
+                "title": "Layout Type",
                 "type": "string",
                 "enum": [
                   "grid",
@@ -563,18 +575,21 @@
                 "description": "If set to grid, items have uniform width, and itemCount can be set"
               },
               "itemCountX": {
+                "title": "Item Count X",
                 "type": "number",
                 "minimum": 1,
                 "maximum": 12,
                 "description": "Number of items per column"
               },
               "itemCountY": {
+                "title": "Item Count Y",
                 "type": "number",
                 "minimum": 1,
                 "maximum": 12,
                 "description": "Number of items per row"
               },
               "hideForUsers": {
+                "title": "Hide for Users",
                 "type": "array",
                 "description": "Section will be visible to all users, except for those specified in this list",
                 "items": {
@@ -583,6 +598,7 @@
                 }
               },
               "showForUsers": {
+                "title": "Show for Users",
                 "type": "array",
                 "description": "Section will be hidden from all users, except for those specified in this list",
                 "items": {
@@ -591,6 +607,7 @@
                 }
               },
               "hideForGuests": {
+                "title": "Hide for Guests?",
                 "type": "boolean",
                 "default": false,
                 "description": "If set to true, section will be visible for logged in users, but not for guests"
@@ -598,6 +615,7 @@
             }
           },
           "items": {
+            "title": "Items",
             "type": "array",
             "description": "Array of items to display with a section",
             "items": {

From f398a374e72b060198ad62517be7bc1f66f9ed3c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 24 Oct 2021 17:36:30 +0100
Subject: [PATCH 64/98] :construction: Working on interactive editor, commiting
 to switch computer

---
 src/assets/locales/en.json                   | 7 ++++---
 src/components/LinkItems/Item.vue            | 9 +++++++++
 src/components/LinkItems/ItemContextMenu.vue | 6 ++++--
 src/components/LinkItems/Section.vue         | 8 ++++++--
 src/styles/schema-editor.scss                | 1 +
 src/utils/MiscHelpers.js                     | 3 ++-
 6 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 9c0941339..2c90a3924 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -171,7 +171,7 @@
     "workspace": "Workspace View",
     "options-section-title": "Options",
     "edit-item": "Edit",
-    "move-item": "Move To",
+    "move-item": "Copy or Move",
     "remove-item": "Remove"
   },
   "context-menus": {
@@ -183,7 +183,7 @@
       "workspace": "Workspace View",
       "options-section-title": "Options",
       "edit-item": "Edit",
-      "move-item": "Move To",
+      "move-item": "Copy or Move",
       "remove-item": "Remove"
     },
     "section": {
@@ -213,7 +213,8 @@
       "edit-mode-name": "Edit Mode",
       "edit-mode-subtitle": "You are in Edit Mode",
       "edit-mode-description": "This means you can make modifications to your config, and preview the results, but until you save, none of your changes will be preserved.",
-      "save-stage-btn": "Save"
+      "save-stage-btn": "Save",
+      "cancel-stage-btn": "Cancel"
     },
     "edit-section": {
       "edit-tooltip": "Click to Edit, or right-click for more options"
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 2b6910b77..1a45ad4fb 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -40,7 +40,9 @@
       :id="`context-menu-${id}`"
       @launchItem="launchItem"
       @openItemSettings="openItemSettings"
+      @openMoveItemMenu="openMoveItemMenu"
     />
+    <MoveItemTo v-if="isEditMode" :itemId="id" />
     <EditItem v-if="editMenuOpen" :itemId="id" @closeEditMenu="closeEditMenu" />
   </div>
 </template>
@@ -52,6 +54,7 @@ import Icon from '@/components/LinkItems/ItemIcon.vue';
 import ItemOpenMethodIcon from '@/components/LinkItems/ItemOpenMethodIcon';
 import StatusIndicator from '@/components/LinkItems/StatusIndicator';
 import EditItem from '@/components/InteractiveEditor/EditItem';
+import MoveItemTo from '@/components/InteractiveEditor/MoveItemTo';
 import ContextMenu from '@/components/LinkItems/ItemContextMenu';
 import StoreKeys from '@/utils/StoreMutations';
 import { targetValidator } from '@/utils/ConfigHelpers';
@@ -92,6 +95,7 @@ export default {
     ItemOpenMethodIcon,
     StatusIndicator,
     ContextMenu,
+    MoveItemTo,
     EditItem,
     EditModeIcon,
   },
@@ -289,6 +293,11 @@ export default {
       lastUsed[itemId] = new Date().getTime();
       localStorage.setItem(localStorageKeys.LAST_USED, JSON.stringify(lastUsed));
     },
+    openMoveItemMenu() {
+      this.$modal.show(`${modalNames.MOVE_ITEM_TO}-${this.id}`);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+      this.closeContextMenu();
+    },
   },
   mounted() {
     // If ststus checking is enabled, then check service status
diff --git a/src/components/LinkItems/ItemContextMenu.vue b/src/components/LinkItems/ItemContextMenu.vue
index dd90064ff..702f74693 100644
--- a/src/components/LinkItems/ItemContextMenu.vue
+++ b/src/components/LinkItems/ItemContextMenu.vue
@@ -33,7 +33,7 @@
           <EditIcon />
           <span>{{ $t('menu.edit-item') }}</span>
         </li>
-        <li v-if="isEditMode">
+        <li v-if="isEditMode" @click="openMoveMenu()">
           <MoveIcon />
           <span>{{ $t('menu.move-item') }}</span>
         </li>
@@ -51,7 +51,6 @@
 import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
 import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
 import MoveIcon from '@/assets/interface-icons/interactive-editor-move-to.svg';
-
 import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
 import NewTabOpenIcon from '@/assets/interface-icons/open-new-tab.svg';
 import IframeOpenIcon from '@/assets/interface-icons/open-iframe.svg';
@@ -90,6 +89,9 @@ export default {
     openSettings() {
       this.$emit('openItemSettings');
     },
+    openMoveMenu() {
+      this.$emit('openMoveItemMenu');
+    },
   },
 };
 </script>
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 0c8d34572..737a92ff5 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -16,7 +16,7 @@
     </div>
     <div v-else
       :class="`there-are-items ${isGridLayout? 'item-group-grid': ''} inner-size-${itemSize}`"
-      :style="gridStyle"
+      :style="gridStyle" :id="`section-${groupId}`"
     >
       <Item
         v-for="(item) in sortedItems"
@@ -73,7 +73,11 @@ import EditSection from '@/components/InteractiveEditor/EditSection.vue';
 import ContextMenu from '@/components/LinkItems/SectionContextMenu.vue';
 import ErrorHandler from '@/utils/ErrorHandler';
 import StoreKeys from '@/utils/StoreMutations';
-import { sortOrder as defaultSortOrder, localStorageKeys, modalNames } from '@/utils/defaults';
+import {
+  sortOrder as defaultSortOrder,
+  localStorageKeys,
+  modalNames,
+} from '@/utils/defaults';
 
 export default {
   name: 'Section',
diff --git a/src/styles/schema-editor.scss b/src/styles/schema-editor.scss
index d252a5c5f..e0f114bc9 100644
--- a/src/styles/schema-editor.scss
+++ b/src/styles/schema-editor.scss
@@ -26,6 +26,7 @@
         font-style: italic;
         margin-right: 0.5rem;
         max-width: 20rem;
+        opacity: var(--dimming-factor);
       }
       input {
         min-width: 15rem;
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index ac98566f4..a2c74fe43 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -30,7 +30,7 @@ export const sanitize = (string) => {
 const makeItemId = (sectionStr, itemStr, index) => {
   const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
   const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
-  return `${index}_${charSum}_${itemTitleStr}`;
+  return `${index}_${charSum}_${itemTitleStr}_${Math.random()}`;
 };
 
 /* Given an array of sections, apply a unique ID to each item, and return modified array */
@@ -40,6 +40,7 @@ export const applyItemId = (inputSections) => {
     if (sec.items) {
       sec.items.forEach((item, itemIdx) => {
         sections[secIdx].items[itemIdx].id = makeItemId(sec.name, item.title, itemIdx);
+        // TODO: Check if ID already exists, and if so, modify it
       });
     }
   });

From 31e172befb98726ddc7133e5d5404a3c7714fcd0 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Mon, 25 Oct 2021 19:11:13 +0100
Subject: [PATCH 65/98] :sparkles: Implements move, copy and delete item, and
 delete section functionality

---
 .../Configuration/CloudBackupRestore.vue      |  2 +-
 .../InteractiveEditor/ExportConfigMenu.vue    |  1 +
 .../InteractiveEditor/MoveItemTo.vue          | 10 +++--
 src/components/LinkItems/Item.vue             |  9 ++++
 src/components/LinkItems/ItemContextMenu.vue  |  5 ++-
 src/components/LinkItems/Section.vue          |  7 ++++
 .../LinkItems/SectionContextMenu.vue          | 11 ++---
 src/store.js                                  | 41 ++++++++++++++++++-
 src/utils/MiscHelpers.js                      |  2 +-
 src/utils/StoreMutations.js                   |  2 +
 10 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/src/components/Configuration/CloudBackupRestore.vue b/src/components/Configuration/CloudBackupRestore.vue
index e4a4139c0..92f6709d8 100644
--- a/src/components/Configuration/CloudBackupRestore.vue
+++ b/src/components/Configuration/CloudBackupRestore.vue
@@ -244,7 +244,7 @@ export default {
   }
 
   /* Overide form element colors, so that config menu can be themed by user */
-  input, button, {
+  input, button {
     color: var(--config-settings-color);
     border: 1px solid var(--config-settings-color);
     background: none;
diff --git a/src/components/InteractiveEditor/ExportConfigMenu.vue b/src/components/InteractiveEditor/ExportConfigMenu.vue
index f0a9b80fc..d30bbcdf3 100644
--- a/src/components/InteractiveEditor/ExportConfigMenu.vue
+++ b/src/components/InteractiveEditor/ExportConfigMenu.vue
@@ -115,6 +115,7 @@ export default {
     background: var(--interactive-editor-background-darker);
     border-radius: var(--curve-factor);
     box-shadow: 0px 0px 3px var(--interactive-editor-color);
+    margin-bottom: 1.5rem;
     span {
       font-family: var(--font-monospace);
     }
diff --git a/src/components/InteractiveEditor/MoveItemTo.vue b/src/components/InteractiveEditor/MoveItemTo.vue
index 19efb4d79..fd12eb983 100644
--- a/src/components/InteractiveEditor/MoveItemTo.vue
+++ b/src/components/InteractiveEditor/MoveItemTo.vue
@@ -14,7 +14,7 @@
       <Select
         v-model="selectedSection"
         :options="sectionList"
-        :initialOption="currentSection"
+        :initialOption="selectedSection"
         label="Destination"
       />
       <Radio
@@ -84,15 +84,19 @@ export default {
       return sectionName;
     },
   },
+  mounted() {
+    this.selectedSection = this.currentSection;
+  },
   methods: {
     save() {
       const item = this.$store.getters.getItemById(this.itemId);
       // Copy item to new section
-      const copyPayload = { item, toSection: this.selectedSection };
+      const copyPayload = { item, toSection: this.selectedSection, appendTo: this.appendTo };
       this.$store.commit(StoreKeys.COPY_ITEM, copyPayload);
       // Remove item from previous section
       if (this.operation === 'Move') {
-        // TODO: Remove
+        const payload = { itemId: this.itemId, sectionName: this.currentSection };
+        this.$store.commit(StoreKeys.REMOVE_ITEM, payload);
       }
       this.close();
     },
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 1a45ad4fb..8fc556da1 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -41,6 +41,7 @@
       @launchItem="launchItem"
       @openItemSettings="openItemSettings"
       @openMoveItemMenu="openMoveItemMenu"
+      @openDeleteItem="openDeleteItem"
     />
     <MoveItemTo v-if="isEditMode" :itemId="id" />
     <EditItem v-if="editMenuOpen" :itemId="id" @closeEditMenu="closeEditMenu" />
@@ -293,11 +294,19 @@ export default {
       lastUsed[itemId] = new Date().getTime();
       localStorage.setItem(localStorageKeys.LAST_USED, JSON.stringify(lastUsed));
     },
+    /* Open the modal for moving/ copying item to other section */
     openMoveItemMenu() {
       this.$modal.show(`${modalNames.MOVE_ITEM_TO}-${this.id}`);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
       this.closeContextMenu();
     },
+    /* Deletes the current item from the state */
+    openDeleteItem() {
+      const parentSection = this.$store.getters.getParentSectionOfItem(this.id);
+      const payload = { itemId: this.id, sectionName: parentSection.name };
+      this.$store.commit(StoreKeys.REMOVE_ITEM, payload);
+      this.closeContextMenu();
+    },
   },
   mounted() {
     // If ststus checking is enabled, then check service status
diff --git a/src/components/LinkItems/ItemContextMenu.vue b/src/components/LinkItems/ItemContextMenu.vue
index 702f74693..1e1c375db 100644
--- a/src/components/LinkItems/ItemContextMenu.vue
+++ b/src/components/LinkItems/ItemContextMenu.vue
@@ -37,7 +37,7 @@
           <MoveIcon />
           <span>{{ $t('menu.move-item') }}</span>
         </li>
-        <li v-if="isEditMode">
+        <li v-if="isEditMode" @click="openDeleteItem()">
           <BinIcon />
           <span>{{ $t('menu.remove-item') }}</span>
         </li>
@@ -92,6 +92,9 @@ export default {
     openMoveMenu() {
       this.$emit('openMoveItemMenu');
     },
+    openDeleteItem() {
+      this.$emit('openDeleteItem');
+    },
   },
 };
 </script>
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 737a92ff5..adba954b0 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -60,6 +60,7 @@
       v-click-outside="closeContextMenu"
       @openEditSection="openEditSection"
       @navigateToSection="navigateToSection"
+      @removeSection="removeSection"
     />
   </Collapsable>
 </template>
@@ -217,6 +218,12 @@ export default {
       this.$modal.hide(modalNames.EDIT_SECTION);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
     },
+    /* Deletes current section, in local state */
+    removeSection() {
+      const payload = { sectionIndex: this.index, sectionName: this.title };
+      this.$store.commit(StoreKeys.REMOVE_SECTION, payload);
+      this.closeContextMenu();
+    },
     /* Open custom context menu, and set position */
     openContextMenu(e) {
       this.contextMenuOpen = true;
diff --git a/src/components/LinkItems/SectionContextMenu.vue b/src/components/LinkItems/SectionContextMenu.vue
index 3ddf8afa4..1836fc46b 100644
--- a/src/components/LinkItems/SectionContextMenu.vue
+++ b/src/components/LinkItems/SectionContextMenu.vue
@@ -12,11 +12,7 @@
           <EditIcon />
           <span>{{ $t('context-menus.section.edit-section') }}</span>
         </li>
-        <li v-if="isEditMode">
-          <MoveIcon />
-          <span>{{ $t('context-menus.section.move-section') }}</span>
-        </li>
-        <li v-if="isEditMode">
+        <li v-if="isEditMode" @click="removeSection">
           <BinIcon />
           <span>{{ $t('context-menus.section.remove-section') }}</span>
         </li>
@@ -29,14 +25,12 @@
 // Import icons for each element
 import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
 import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
-import MoveIcon from '@/assets/interface-icons/interactive-editor-move-to.svg';
 import SameTabOpenIcon from '@/assets/interface-icons/open-current-tab.svg';
 
 export default {
   name: 'ContextMenu',
   components: {
     EditIcon,
-    MoveIcon,
     BinIcon,
     SameTabOpenIcon,
   },
@@ -62,6 +56,9 @@ export default {
     openEditSectionMenu() {
       this.$emit('openEditSection');
     },
+    removeSection() {
+      this.$emit('removeSection');
+    },
   },
 };
 </script>
diff --git a/src/store.js b/src/store.js
index 708033d7d..13fcd7013 100644
--- a/src/store.js
+++ b/src/store.js
@@ -19,7 +19,9 @@ const {
   UPDATE_PAGE_INFO,
   UPDATE_APP_CONFIG,
   UPDATE_SECTION,
+  REMOVE_SECTION,
   COPY_ITEM,
+  REMOVE_ITEM,
 } = Keys;
 
 const store = new Vuex.Store({
@@ -59,6 +61,15 @@ const store = new Vuex.Store({
       });
       return item;
     },
+    getParentSectionOfItem: (state, getters) => (itemId) => {
+      let foundSection;
+      getters.sections.forEach((section) => {
+        section.items.forEach((item) => {
+          if (item.id === itemId) foundSection = section;
+        });
+      });
+      return foundSection;
+    },
   },
   mutations: {
     [UPDATE_CONFIG](state, config) {
@@ -103,18 +114,44 @@ const store = new Vuex.Store({
       newConfig.sections[sectionIndex] = sectionData;
       state.config = newConfig;
     },
+    [REMOVE_SECTION](state, payload) {
+      const { sectionIndex, sectionName } = payload;
+      const newConfig = { ...state.config };
+      if (newConfig.sections[sectionIndex].name === sectionName) {
+        newConfig.sections.splice(sectionIndex, 1);
+      }
+      state.config = newConfig;
+    },
     [COPY_ITEM](state, payload) {
-      const { item, toSection } = payload;
+      const { item, toSection, appendTo } = payload;
       const config = { ...state.config };
       const newItem = { ...item };
       config.sections.forEach((section) => {
         if (section.name === toSection) {
-          section.items.push(newItem);
+          if (appendTo === 'Begining') {
+            section.items.unshift(newItem);
+          } else {
+            section.items.push(newItem);
+          }
         }
       });
       config.sections = applyItemId(config.sections);
       state.config = config;
     },
+    [REMOVE_ITEM](state, payload) {
+      const { itemId, sectionName } = payload;
+      const config = { ...state.config };
+      config.sections.forEach((section) => {
+        if (section.name === sectionName) {
+          section.items.forEach((item, index) => {
+            if (item.id === itemId) {
+              section.items.splice(index, 1);
+            }
+          });
+        }
+      });
+      state.config = config;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index a2c74fe43..092f2869e 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -30,7 +30,7 @@ export const sanitize = (string) => {
 const makeItemId = (sectionStr, itemStr, index) => {
   const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
   const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
-  return `${index}_${charSum}_${itemTitleStr}_${Math.random()}`;
+  return `${index}_${charSum}_${itemTitleStr}}`;
 };
 
 /* Given an array of sections, apply a unique ID to each item, and return modified array */
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 73383ce17..f48aca9e1 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -9,7 +9,9 @@ const KEY_NAMES = [
   'UPDATE_PAGE_INFO',
   'UPDATE_APP_CONFIG',
   'UPDATE_SECTION',
+  'REMOVE_SECTION',
   'COPY_ITEM',
+  'REMOVE_ITEM',
 ];
 
 // Convert array of key names into an object, and export

From 06d08a8fffce695119868653c1163a3c4362ca82 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Mon, 25 Oct 2021 23:22:41 +0100
Subject: [PATCH 66/98] :sparkles: Implements Add new Item functionality

---
 src/components/InteractiveEditor/EditItem.vue | 15 ++++++++---
 src/components/LinkItems/Item.vue             | 11 ++++++--
 src/components/LinkItems/Section.vue          | 26 ++++++++++++++++++-
 src/store.js                                  | 12 +++++++++
 src/utils/StoreMutations.js                   |  1 +
 5 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index dd79f4c8a..ead995a3e 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -94,6 +94,8 @@ export default {
   },
   props: {
     itemId: String,
+    isNew: Boolean,
+    parentSectionTitle: String, // If adding new item, which section to add it under
   },
   computed: {},
   components: {
@@ -105,7 +107,9 @@ export default {
     BinIcon,
   },
   mounted() {
-    this.item = this.getItemFromState(this.itemId);
+    if (!this.isNew) { // Get existing item data
+      this.item = this.getItemFromState(this.itemId);
+    }
     this.formData = this.makeInitialFormData();
     this.$modal.show(modalNames.EDIT_ITEM);
   },
@@ -187,8 +191,13 @@ export default {
       this.formData.forEach((row) => { structured[row.name] = row.value; });
       // Some attributes need a little extra formatting
       const newItem = this.formatBeforeSave(structured);
-      // Update the data store, with new item data
-      this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+      if (this.isNew) { // Insert new item into data store
+        newItem.id = `temp_${newItem.title}`;
+        const payload = { newItem, targetSection: this.parentSectionTitle };
+        this.$store.commit(StoreKeys.INSERT_ITEM, payload);
+      } else { // Update existing item from form data, in the store
+        this.$store.commit(StoreKeys.UPDATE_ITEM, { newItem, itemId: this.itemId });
+      }
       // If we're not already in edit mode, enable it now
       this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
       // Close edit menu
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 8fc556da1..8763ef08e 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -5,7 +5,7 @@
       @contextmenu.prevent
       :href="hyperLinkHref"
       :target="anchorTarget"
-      :class="`item ${!icon? 'short': ''} size-${itemSize}`"
+      :class="`item ${!icon? 'short': ''} size-${itemSize} ${isAddNew ? 'add-new' : ''}`"
       v-tooltip="getTooltipOptions()"
       rel="noopener noreferrer" tabindex="0"
       :id="`link-${id}`"
@@ -44,7 +44,9 @@
       @openDeleteItem="openDeleteItem"
     />
     <MoveItemTo v-if="isEditMode" :itemId="id" />
-    <EditItem v-if="editMenuOpen" :itemId="id" @closeEditMenu="closeEditMenu" />
+    <EditItem v-if="editMenuOpen" :itemId="id"
+      @closeEditMenu="closeEditMenu"
+      :isNew="isAddNew" :parentSectionTitle="parentSectionTitle" />
   </div>
 </template>
 
@@ -90,6 +92,8 @@ export default {
     statusCheckUrl: String,
     statusCheckInterval: Number,
     statusCheckAllowInsecure: Boolean,
+    parentSectionTitle: String,
+    isAddNew: Boolean,
   },
   components: {
     Icon,
@@ -360,6 +364,9 @@ export default {
   &.short:not(.size-large) {
     height: 2rem;
   }
+  &.add-new {
+    border-style: dashed !important;
+  }
 }
 
 /* Text in tile */
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index adba954b0..5c3b681b4 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -11,13 +11,15 @@
     @openEditSection="openEditSection"
     @openContextMenu="openContextMenu"
   >
+    <!-- If no items, show message -->
     <div v-if="!items || items.length < 1" class="no-items">
       No Items to Show Yet
     </div>
+    <!-- Item Container -->
     <div v-else
       :class="`there-are-items ${isGridLayout? 'item-group-grid': ''} inner-size-${itemSize}`"
       :style="gridStyle" :id="`section-${groupId}`"
-    >
+    > <!-- Show for each item -->
       <Item
         v-for="(item) in sortedItems"
         :id="item.id"
@@ -34,24 +36,40 @@
         :itemSize="newItemSize"
         :hotkey="item.hotkey"
         :provider="item.provider"
+        :parentSectionTitle="title"
         :enableStatusCheck="shouldEnableStatusCheck(item.statusCheck)"
         :statusCheckInterval="getStatusCheckInterval()"
         :statusCheckAllowInsecure="item.statusCheckAllowInsecure"
         @itemClicked="$emit('itemClicked')"
         @triggerModal="triggerModal"
       />
+      <!-- When in edit mode, show additional item, for Add New item -->
+      <Item v-if="isEditMode"
+        :isAddNew="true"
+        :parentSectionTitle="title"
+        icon=":heavy_plus_sign:"
+        id="add-new"
+        title="Add New Item"
+        description="Click to add new item"
+        key="add-new"
+        class="add-new-item"
+        :itemSize="newItemSize"
+      />
       <div ref="modalContainer"></div>
     </div>
+    <!-- Modal for opening in modal view -->
     <IframeModal
       :ref="`iframeModal-${groupId}`"
       :name="`iframeModal-${groupId}`"
       @closed="$emit('itemClicked')"
     />
+    <!-- Edit item menu -->
     <EditSection
       v-if="editMenuOpen"
       @closeEditSection="closeEditSection"
       :sectionIndex="index"
     />
+    <!-- Right-click item options context menu -->
     <ContextMenu
       :show="contextMenuOpen"
       :posX="contextPos.posX"
@@ -300,4 +318,10 @@ export default {
   }
 }
 
+.add-new-item {
+  display: flex;
+  a {
+    border-style: dashed;
+  }
+}
 </style>
diff --git a/src/store.js b/src/store.js
index 13fcd7013..42d85aa1a 100644
--- a/src/store.js
+++ b/src/store.js
@@ -22,6 +22,7 @@ const {
   REMOVE_SECTION,
   COPY_ITEM,
   REMOVE_ITEM,
+  INSERT_ITEM,
 } = Keys;
 
 const store = new Vuex.Store({
@@ -122,6 +123,17 @@ const store = new Vuex.Store({
       }
       state.config = newConfig;
     },
+    [INSERT_ITEM](state, payload) {
+      const { newItem, targetSection } = payload;
+      const config = { ...state.config };
+      config.sections.forEach((section) => {
+        if (section.name === targetSection) {
+          section.items.push(newItem);
+        }
+      });
+      config.sections = applyItemId(config.sections);
+      state.config = config;
+    },
     [COPY_ITEM](state, payload) {
       const { item, toSection, appendTo } = payload;
       const config = { ...state.config };
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index f48aca9e1..dd6f16c43 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -12,6 +12,7 @@ const KEY_NAMES = [
   'REMOVE_SECTION',
   'COPY_ITEM',
   'REMOVE_ITEM',
+  'INSERT_ITEM',
 ];
 
 // Convert array of key names into an object, and export

From b882a38950624d93e665b1a58c4880fe310146d5 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Mon, 25 Oct 2021 23:41:05 +0100
Subject: [PATCH 67/98] :construction: WIP, redo layout and size, to use VueX
 state

---
 src/components/Settings/ItemSizeSelector.vue | 2 ++
 src/components/Settings/LayoutSelector.vue   | 2 ++
 src/store.js                                 | 8 ++++++++
 src/utils/StoreMutations.js                  | 2 ++
 4 files changed, 14 insertions(+)

diff --git a/src/components/Settings/ItemSizeSelector.vue b/src/components/Settings/ItemSizeSelector.vue
index 135d26be6..470a186f3 100644
--- a/src/components/Settings/ItemSizeSelector.vue
+++ b/src/components/Settings/ItemSizeSelector.vue
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import StoreKeys from '@/utils/StoreMutations';
 import IconSmall from '@/assets/interface-icons/icon-size-small.svg';
 import IconMedium from '@/assets/interface-icons/icon-size-medium.svg';
 import IconLarge from '@/assets/interface-icons/icon-size-large.svg';
@@ -47,6 +48,7 @@ export default {
   methods: {
     updateIconSize(iconSize) {
       this.$emit('iconSizeUpdated', iconSize);
+      this.$store.commit(StoreKeys.SET_ITEM_SIZE, iconSize);
     },
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
diff --git a/src/components/Settings/LayoutSelector.vue b/src/components/Settings/LayoutSelector.vue
index b40cd4d4b..f7fea7a01 100644
--- a/src/components/Settings/LayoutSelector.vue
+++ b/src/components/Settings/LayoutSelector.vue
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import StoreKeys from '@/utils/StoreMutations';
 import IconDeafault from '@/assets/interface-icons/layout-default.svg';
 import IconHorizontal from '@/assets/interface-icons/layout-horizontal.svg';
 import IconVertical from '@/assets/interface-icons/layout-vertical.svg';
@@ -47,6 +48,7 @@ export default {
   methods: {
     updateDisplayLayout(layout) {
       this.$emit('layoutUpdated', layout);
+      this.$store.commit(StoreKeys.SET_ITEM_LAYOUT, layout);
     },
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
diff --git a/src/store.js b/src/store.js
index 42d85aa1a..b89e0122a 100644
--- a/src/store.js
+++ b/src/store.js
@@ -14,6 +14,8 @@ const {
   UPDATE_CONFIG,
   SET_MODAL_OPEN,
   SET_LANGUAGE,
+  SET_ITEM_LAYOUT,
+  SET_ITEM_SIZE,
   UPDATE_ITEM,
   SET_EDIT_MODE,
   UPDATE_PAGE_INFO,
@@ -164,6 +166,12 @@ const store = new Vuex.Store({
       });
       state.config = config;
     },
+    [SET_ITEM_LAYOUT](state, layout) {
+      state.config.appConfig.layout = layout;
+    },
+    [SET_ITEM_SIZE](state, iconSize) {
+      state.config.appConfig.iconSize = iconSize;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index dd6f16c43..e32a2bd64 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -5,6 +5,8 @@ const KEY_NAMES = [
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',
   'SET_EDIT_MODE',
+  'SET_ITEM_LAYOUT',
+  'SET_ITEM_SIZE',
   'UPDATE_ITEM',
   'UPDATE_PAGE_INFO',
   'UPDATE_APP_CONFIG',

From 6bdc4fe313a6a0e2c5a6c424e43746606c8235b3 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Tue, 26 Oct 2021 17:01:36 +0100
Subject: [PATCH 68/98] :zap: Reusable save/cancel buttons for new config
 editors

---
 src/assets/locales/en.json                    | 11 +++-
 .../InteractiveEditor/EditAppConfig.vue       | 40 ++++++------
 src/components/InteractiveEditor/EditItem.vue | 16 +----
 .../InteractiveEditor/EditPageInfo.vue        | 10 +--
 .../InteractiveEditor/EditSection.vue         | 12 ++--
 .../InteractiveEditor/MoveItemTo.vue          | 19 +-----
 .../InteractiveEditor/SaveCancelButtons.vue   | 61 +++++++++++++++++++
 src/components/LinkItems/Item.vue             | 18 +++---
 src/components/LinkItems/ItemContextMenu.vue  | 18 +++---
 src/components/LinkItems/Section.vue          |  8 ++-
 10 files changed, 131 insertions(+), 82 deletions(-)
 create mode 100644 src/components/InteractiveEditor/SaveCancelButtons.vue

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 2c90a3924..6d24c59fe 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -217,7 +217,16 @@
       "cancel-stage-btn": "Cancel"
     },
     "edit-section": {
-      "edit-tooltip": "Click to Edit, or right-click for more options"
+      "edit-section-title": "Edit Section",
+      "edit-tooltip": "Click to Edit, or right-click for more options",
+      "remove-confirm": "Are you sure you want to remove this section? This action can be undone later."
+    },
+    "edit-app-config": {
+      "warning-msg-title": "Proceed with Caution",
+      "warning-msg-l1": "The following options are for advanced app configuration.",
+      "warning-msg-l2": "If you are unsure about any of the fields, please reference the",
+      "warning-msg-docs": "documentation",
+      "warning-msg-l3": "to avoid unintended consequences."
     },
     "export": {
       "export-title": "Export Config",
diff --git a/src/components/InteractiveEditor/EditAppConfig.vue b/src/components/InteractiveEditor/EditAppConfig.vue
index a1dfb0219..7bb47e318 100644
--- a/src/components/InteractiveEditor/EditAppConfig.vue
+++ b/src/components/InteractiveEditor/EditAppConfig.vue
@@ -9,17 +9,21 @@
   >
   <div class="edit-app-config-inner">
   <h3>{{ $t('interactive-editor.menu.edit-app-config-btn') }}</h3>
+  <!-- Show caution message -->
   <div class="app-config-intro">
-    <p class="use-caution">Proceed with Caution</p>
-    The following options are for advanded app configration.
-    If you are unsure about any of the fields, please reference the
-    <a href="https://dashy.to/docs/configuring#appconfig-optional">documentation</a>
-    to avoid unintended consequences.
+    <p class="use-caution">
+      {{ $t('interactive-editor.edit-app-config.warning-msg-title') }}
+    </p>
+    {{ $t('interactive-editor.edit-app-config.warning-msg-l1') }}
+    {{ $t('interactive-editor.edit-app-config.warning-msg-l2') }}
+    <a href="https://dashy.to/docs/configuring#appconfig-optional">
+      {{ $t('interactive-editor.edit-app-config.warning-msg-docs') }}
+    </a>
+    {{ $t('interactive-editor.edit-app-config.warning-msg-l3') }}
   </div>
-  <Button class="save-app-config-btn" :click="saveToState">
-    {{ $t('interactive-editor.menu.save-stage-btn') }}
-    <SaveIcon />
-  </button>
+  <!-- Save Button, upper -->
+  <SaveCancelButtons :saveClick="saveToState" :cancelClick="cancelEditing" />
+  <!-- The main form -->
   <FormSchema
     :schema="schema"
     v-model="formData"
@@ -28,10 +32,8 @@
     class="app-config-form"
     name="appConfigForm"
   ></FormSchema>
-  <Button class="save-app-config-btn" :click="saveToState">
-    {{ $t('interactive-editor.menu.save-stage-btn') }}
-    <SaveIcon />
-  </button>
+  <!-- Save Button, lower -->
+  <SaveCancelButtons :saveClick="saveToState" :cancelClick="cancelEditing" />
   </div>
   </modal>
 </template>
@@ -41,8 +43,7 @@ import FormSchema from '@formschema/native';
 import DashySchema from '@/utils/ConfigSchema';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
-import Button from '@/components/FormElements/Button';
-import SaveIcon from '@/assets/interface-icons/save-config.svg';
+import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
 
 export default {
   name: 'EditAppConfig',
@@ -56,8 +57,7 @@ export default {
   props: {},
   components: {
     FormSchema,
-    Button,
-    SaveIcon,
+    SaveCancelButtons,
   },
   mounted() {
     this.formData = this.appConfig;
@@ -76,6 +76,9 @@ export default {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
     },
+    cancelEditing() {
+      this.$modal.hide(this.modalName);
+    },
     /* Called when modal manually closed, updates state to allow searching again */
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
@@ -126,9 +129,6 @@ export default {
       color: var(--interactive-editor-color);
     }
   }
-  button.save-app-config-btn {
-    margin: 0.5rem auto 1.5rem;
-  }
 }
 
 </style>
diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index ead995a3e..b7a420d3d 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -65,7 +65,7 @@
       </div>
     </div>
     <!-- Save to state button -->
-    <Button class="edit-item-save-btn" :click="saveItem">Save</Button>
+    <SaveCancelButtons :saveClick="saveItem" :cancelClick="modalClosed" />
     </div>
   </modal>
 </template>
@@ -73,10 +73,10 @@
 <script>
 import AddIcon from '@/assets/interface-icons/interactive-editor-add.svg';
 import BinIcon from '@/assets/interface-icons/interactive-editor-remove.svg';
+import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
 import Input from '@/components/FormElements/Input';
 import Radio from '@/components/FormElements/Radio';
 import Select from '@/components/FormElements/Select';
-import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
 import { modalNames } from '@/utils/defaults';
@@ -102,9 +102,9 @@ export default {
     Input,
     Radio,
     Select,
-    Button,
     AddIcon,
     BinIcon,
+    SaveCancelButtons,
   },
   mounted() {
     if (!this.isNew) { // Get existing item data
@@ -304,16 +304,6 @@ export default {
     border-color: var(--interactive-editor-color);
     background: var(--interactive-editor-background);
   }
-  button.edit-item-save-btn {
-    color: var(--interactive-editor-color);
-    border-color: var(--interactive-editor-color);
-    background: var(--interactive-editor-background);
-    &:hover {
-      color: var(--interactive-editor-background);
-      border-color: var(--interactive-editor-color);
-      background: var(--interactive-editor-color);
-    }
-  }
   svg {
     path { fill: var(--interactive-editor-color); }
     background: var(--interactive-editor-background);
diff --git a/src/components/InteractiveEditor/EditPageInfo.vue b/src/components/InteractiveEditor/EditPageInfo.vue
index 25c595bdf..290381fc0 100644
--- a/src/components/InteractiveEditor/EditPageInfo.vue
+++ b/src/components/InteractiveEditor/EditPageInfo.vue
@@ -1,11 +1,8 @@
 <template>
   <modal
-    :name="modalName"
-    :resizable="true"
-    width="50%"
-    height="80%"
+    :name="modalName" @closed="modalClosed"
+    :resizable="true" width="50%" height="80%"
     classes="dashy-modal edit-page-info"
-    @closed="modalClosed"
   >
   <div class="edit-page-info-inner">
   <h3>{{ $t('interactive-editor.menu.edit-page-info-btn') }}</h3>
@@ -19,7 +16,7 @@
     <Button type="submit">
       {{ $t('interactive-editor.menu.save-stage-btn') }}
       <SaveIcon />
-    </button>
+    </Button>
   </FormSchema>
   </div>
   </modal>
@@ -42,7 +39,6 @@ export default {
       modalName: modalNames.EDIT_PAGE_INFO,
     };
   },
-  props: {},
   components: {
     FormSchema,
     Button,
diff --git a/src/components/InteractiveEditor/EditSection.vue b/src/components/InteractiveEditor/EditSection.vue
index 9b461d827..b7840c560 100644
--- a/src/components/InteractiveEditor/EditSection.vue
+++ b/src/components/InteractiveEditor/EditSection.vue
@@ -8,15 +8,17 @@
     @closed="modalClosed"
   >
   <div class="edit-section-inner">
-    <h3>Edit Section</h3>
+    <h3>{{ $t('interactive-editor.edit-section.edit-section-title') }}</h3>
     <FormSchema
       :schema="customSchema"
       v-model="sectionData"
       name="editSectionForm"
       class="edit-section-form"
     />
-    <!-- Save to state button -->
-    <Button class="edit-section-save-btn" :click="saveSection">Save</Button>
+    <SaveCancelButtons
+      :saveClick="saveSection"
+      :cancelClick="modalClosed"
+    />
     </div>
   </modal>
 </template>
@@ -25,8 +27,8 @@
 import FormSchema from '@formschema/native';
 import StoreKeys from '@/utils/StoreMutations';
 import DashySchema from '@/utils/ConfigSchema';
-import Button from '@/components/FormElements/Button';
 import { modalNames } from '@/utils/defaults';
+import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
 
 export default {
   name: 'EditSection',
@@ -34,7 +36,7 @@ export default {
     sectionIndex: Number,
   },
   components: {
-    Button,
+    SaveCancelButtons,
     FormSchema,
   },
   data() {
diff --git a/src/components/InteractiveEditor/MoveItemTo.vue b/src/components/InteractiveEditor/MoveItemTo.vue
index fd12eb983..6d26a8b0e 100644
--- a/src/components/InteractiveEditor/MoveItemTo.vue
+++ b/src/components/InteractiveEditor/MoveItemTo.vue
@@ -23,16 +23,7 @@
         label="Append To"
         :initialOption="appendTo"
       />
-      <div class="button-wrapper">
-        <Button class="save-move" :click="save">
-          {{ $t('interactive-editor.menu.save-stage-btn') }}
-          <SaveIcon />
-        </Button>
-        <Button class="save-move" :click="close">
-          {{ $t('interactive-editor.menu.cancel-stage-btn') }}
-          <CancelIcon />
-        </Button>
-      </div>
+      <SaveCancelButtons :saveClick="save" :cancelClick="close" />
     </div>
   </modal>
 </template>
@@ -40,9 +31,7 @@
 <script>
 import Select from '@/components/FormElements/Select';
 import Radio from '@/components/FormElements/Radio';
-import Button from '@/components/FormElements/Button';
-import SaveIcon from '@/assets/interface-icons/save-config.svg';
-import CancelIcon from '@/assets/interface-icons/config-close.svg';
+import SaveCancelButtons from '@/components/InteractiveEditor/SaveCancelButtons';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
 
@@ -51,9 +40,7 @@ export default {
   components: {
     Select,
     Radio,
-    Button,
-    SaveIcon,
-    CancelIcon,
+    SaveCancelButtons,
   },
   props: {
     itemId: String, // Unique ID for item
diff --git a/src/components/InteractiveEditor/SaveCancelButtons.vue b/src/components/InteractiveEditor/SaveCancelButtons.vue
new file mode 100644
index 000000000..b2f77424e
--- /dev/null
+++ b/src/components/InteractiveEditor/SaveCancelButtons.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="save-cancel-btn-container">
+    <Button class="save-app-config-btn" :click="saveClick">
+      {{ $t('interactive-editor.menu.save-stage-btn') }}
+      <SaveIcon />
+    </Button>
+    <Button class="save-app-config-btn" :click="cancelClick">
+      {{ $t('interactive-editor.menu.cancel-stage-btn') }}
+      <CancelIcon />
+    </Button>
+  </div>
+</template>
+
+<script>
+
+import Button from '@/components/FormElements/Button';
+import SaveIcon from '@/assets/interface-icons/save-config.svg';
+import CancelIcon from '@/assets/interface-icons/config-close.svg';
+
+export default {
+  name: 'SaveCancelButton',
+  props: {
+    saveClick: Function,
+    cancelClick: Function,
+  },
+  components: {
+    Button,
+    SaveIcon,
+    CancelIcon,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.save-cancel-btn-container {
+  display: flex;
+  margin: 0.5rem 0;
+  justify-content: center;
+  border-top: 1px dashed var(--interactive-editor-color);
+    button {
+    margin: 1rem 0.5rem;
+    color: var(--interactive-editor-color);
+    border-color: var(--interactive-editor-color);
+    background: var(--interactive-editor-background);
+    svg {
+      border: none;
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+    &:hover {
+      color: var(--interactive-editor-background);
+      border-color: var(--interactive-editor-color);
+      background: var(--interactive-editor-color);
+      svg {
+        background: var(--interactive-editor-color);
+        path { fill: var(--interactive-editor-background); }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 8763ef08e..9420d98b1 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -33,7 +33,7 @@
       <EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openItemSettings()" />
     </a>
     <ContextMenu
-      :show="contextMenuOpen"
+      :show="contextMenuOpen && !isAddNew"
       v-click-outside="closeContextMenu"
       :posX="contextPos.posX"
       :posY="contextPos.posY"
@@ -86,14 +86,14 @@ export default {
       type: String,
       validator: targetValidator,
     },
-    itemSize: String,
-    enableStatusCheck: Boolean,
-    statusCheckHeaders: Object,
-    statusCheckUrl: String,
-    statusCheckInterval: Number,
-    statusCheckAllowInsecure: Boolean,
-    parentSectionTitle: String,
-    isAddNew: Boolean,
+    itemSize: String, // Item size: small | medium | large
+    enableStatusCheck: Boolean, // Should run status checks
+    statusCheckHeaders: Object, // Custom status check headers
+    statusCheckUrl: String, // Custom URL for status check endpoint
+    statusCheckInterval: Number, // Num seconds beteween repeating checks
+    statusCheckAllowInsecure: Boolean, // Status check ignore SSL certs
+    parentSectionTitle: String, // Title of parent section (for add new)
+    isAddNew: Boolean, // Only set if 'fake' item used as Add New button
   },
   components: {
     Icon,
diff --git a/src/components/LinkItems/ItemContextMenu.vue b/src/components/LinkItems/ItemContextMenu.vue
index 1e1c375db..1d29a7568 100644
--- a/src/components/LinkItems/ItemContextMenu.vue
+++ b/src/components/LinkItems/ItemContextMenu.vue
@@ -5,41 +5,41 @@
       <!-- Open Options -->
       <ul class="menu-section">
         <li class="section-title">
-          {{ $t('menu.open-section-title') }}
+          {{ $t('context-menus.item.open-section-title') }}
         </li>
         <li @click="launch('sametab')">
           <SameTabOpenIcon />
-          <span>{{ $t('menu.sametab') }}</span>
+          <span>{{ $t('context-menus.item.sametab') }}</span>
         </li>
         <li @click="launch('newtab')">
           <NewTabOpenIcon />
-          <span>{{ $t('menu.newtab') }}</span>
+          <span>{{ $t('context-menus.item.newtab') }}</span>
         </li>
         <li @click="launch('modal')">
           <IframeOpenIcon />
-          <span>{{ $t('menu.modal') }}</span>
+          <span>{{ $t('context-menus.item.modal') }}</span>
         </li>
         <li @click="launch('workspace')">
           <WorkspaceOpenIcon />
-          <span>{{ $t('menu.workspace') }}</span>
+          <span>{{ $t('context-menus.item.workspace') }}</span>
         </li>
       </ul>
       <!-- Edit Options -->
       <ul class="menu-section">
         <li class="section-title">
-          {{ $t('menu.options-section-title') }}
+          {{ $t('context-menus.item.options-section-title') }}
         </li>
         <li @click="openSettings()">
           <EditIcon />
-          <span>{{ $t('menu.edit-item') }}</span>
+          <span>{{ $t('context-menus.item.edit-item') }}</span>
         </li>
         <li v-if="isEditMode" @click="openMoveMenu()">
           <MoveIcon />
-          <span>{{ $t('menu.move-item') }}</span>
+          <span>{{ $t('context-menus.item.move-item') }}</span>
         </li>
         <li v-if="isEditMode" @click="openDeleteItem()">
           <BinIcon />
-          <span>{{ $t('menu.remove-item') }}</span>
+          <span>{{ $t('context-menus.item.remove-item') }}</span>
         </li>
       </ul>
     </div>
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 5c3b681b4..e56bdc42a 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -238,8 +238,12 @@ export default {
     },
     /* Deletes current section, in local state */
     removeSection() {
-      const payload = { sectionIndex: this.index, sectionName: this.title };
-      this.$store.commit(StoreKeys.REMOVE_SECTION, payload);
+      const confirmMsg = this.$t('interactive-editor.edit-section.remove-confirm');
+      const youSure = confirm(confirmMsg); // eslint-disable-line no-alert, no-restricted-globals
+      if (youSure) {
+        const payload = { sectionIndex: this.index, sectionName: this.title };
+        this.$store.commit(StoreKeys.REMOVE_SECTION, payload);
+      }
       this.closeContextMenu();
     },
     /* Open custom context menu, and set position */

From 7cda6651c03dcd4f3d18c561a91a8508faa90157 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Tue, 26 Oct 2021 17:02:17 +0100
Subject: [PATCH 69/98] :sparkles: Implements save to disk functionality

---
 .../InteractiveEditor/EditModeSaveMenu.vue    | 73 ++++++++++++++++++-
 src/views/Home.vue                            | 25 ++-----
 2 files changed, 79 insertions(+), 19 deletions(-)

diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index fad2ebc3c..7f36dd61b 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -30,12 +30,14 @@
         <CancelIcon />
       </Button>
       <Button
+        :click="saveLocally"
         v-tooltip="tooltip($t('interactive-editor.menu.save-locally-tooltip'))"
       >
         {{ $t('interactive-editor.menu.save-locally-btn') }}
         <SaveLocallyIcon />
       </Button>
       <Button
+        :click="writeToDisk"
         v-tooltip="tooltip($t('interactive-editor.menu.save-disk-tooltip'))"
       >
         {{ $t('interactive-editor.menu.save-disk-btn') }}
@@ -69,11 +71,16 @@
 </template>
 
 <script>
+import axios from 'axios';
+import jsYaml from 'js-yaml';
+import ProgressBar from 'rsup-progress';
+
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
-import { modalNames } from '@/utils/defaults';
 import EditPageInfo from '@/components/InteractiveEditor/EditPageInfo';
 import EditAppConfig from '@/components/InteractiveEditor/EditAppConfig';
+import { modalNames, localStorageKeys, serviceEndpoints } from '@/utils/defaults';
+import ErrorHandler, { InfoHandler } from '@/utils/ErrorHandler';
 
 import SaveLocallyIcon from '@/assets/interface-icons/interactive-editor-save-locally.svg';
 import SaveToDiskIcon from '@/assets/interface-icons/interactive-editor-save-disk.svg';
@@ -95,6 +102,18 @@ export default {
     PageInfoIcon,
     EditAppConfig,
   },
+  computed: {
+    config() {
+      return this.$store.state.config;
+    },
+  },
+  data() {
+    return {
+      saveSuccess: undefined,
+      responseText: '',
+      progress: new ProgressBar({ color: 'var(--progress-bar)' }),
+    };
+  },
   methods: {
     reset() {
       this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
@@ -115,6 +134,58 @@ export default {
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
     },
+    showToast(message, success) {
+      this.$toasted.show(message, { className: `toast-${success ? 'success' : 'error'}` });
+    },
+    carefullyClearLocalStorage() {
+      localStorage.removeItem(localStorageKeys.PAGE_INFO);
+      localStorage.removeItem(localStorageKeys.APP_CONFIG);
+      localStorage.removeItem(localStorageKeys.CONF_SECTIONS);
+    },
+    saveLocally() {
+      const data = this.config;
+      localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(data.sections));
+      localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(data.pageInfo));
+      localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(data.appConfig));
+      if (data.appConfig.theme) {
+        localStorage.setItem(localStorageKeys.THEME, data.appConfig.theme);
+      }
+      InfoHandler('Config has succesfully been saved in browser storage', 'Config Update');
+      this.showToast(this.$t('config-editor.success-msg-local'), true);
+    },
+    writeToDisk() {
+      // 1. Convert JSON into YAML
+      const yamlOptions = {};
+      const yaml = jsYaml.dump(this.config, yamlOptions);
+      // 2. Prepare the request
+      const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
+      const endpoint = `${baseUrl}${serviceEndpoints.save}`;
+      const headers = { 'Content-Type': 'text/plain' };
+      const body = { config: yaml, timestamp: new Date() };
+      const request = axios.post(endpoint, body, headers);
+      // 3. Make the request, and handle response
+      this.progress.start();
+      request.then((response) => {
+        this.saveSuccess = response.data.success || false;
+        this.responseText = response.data.message;
+        if (this.saveSuccess) {
+          this.carefullyClearLocalStorage();
+          this.showToast(this.$t('config-editor.success-msg-disk'), true);
+        } else {
+          this.showToast(this.$t('config-editor.error-msg-cannot-save'), false);
+        }
+        InfoHandler('Config has been written to disk succesfully', 'Config Update');
+        this.progress.end();
+        this.$store.commit(StoreKeys.SET_EDIT_MODE, false);
+      })
+        .catch((error) => {
+          this.saveSuccess = false;
+          this.responseText = error;
+          this.showToast(error, false);
+          ErrorHandler(`Failed to save config. ${error}`);
+          this.progress.end();
+        });
+    },
   },
 };
 </script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 378cdcdb9..8a6198288 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -108,20 +108,9 @@ export default {
       if (colCount > 8) colCount = 8;
       return colCount;
     },
-    /* Combines sections from config file, with those in local storage */
-    allSections() {
-      // If the user has stored sections in local storage, return those
-      const localSections = localStorage[localStorageKeys.CONF_SECTIONS];
-      if (localSections) {
-        const json = JSON.parse(localSections);
-        if (json.length >= 1) return json;
-      }
-      // Otherwise, return the usuall data from conf.yml
-      return this.sections;
-    },
     /* Return all sections, that match users search term */
     filteredTiles() {
-      const sections = this.singleSectionView || this.allSections;
+      const sections = this.singleSectionView || this.sections;
       return sections.filter((section) => this.filterTiles(section.items, this.searchValue));
     },
     /* Updates layout (when button clicked), and saves in local storage */
@@ -176,11 +165,11 @@ export default {
       this.$store.commit('SET_MODAL_OPEN', modalState);
     },
     /* If on sub-route, and section exists, then return only that section */
-    findSingleSection: (allSectios, sectionTitle) => {
+    findSingleSection: (allSections, sectionTitle) => {
       if (!sectionTitle) return undefined;
       let sectionToReturn;
       const parse = (section) => section.replace(' ', '-').toLowerCase().trim();
-      allSectios.forEach((section) => {
+      allSections.forEach((section) => {
         if (parse(sectionTitle) === parse(section.name)) {
           sectionToReturn = [section];
         }
@@ -209,8 +198,8 @@ export default {
     /* Checks if any sections or items use icons from a given CDN */
     checkIfIconLibraryNeeded(prefix) {
       let isNeeded = false;
-      if (!this.allSections) return false;
-      this.allSections.forEach((section) => {
+      if (!this.sections) return false;
+      this.sections.forEach((section) => {
         if (section.icon && section.icon.includes(prefix)) isNeeded = true;
         section.items.forEach((item) => {
           if (item.icon && item.icon.includes(prefix)) isNeeded = true;
@@ -249,10 +238,10 @@ export default {
     },
     /* Returns true if there is more than 1 sub-result visible during searching */
     checkIfResults() {
-      if (!this.allSections) return false;
+      if (!this.sections) return false;
       else {
         let itemsFound = true;
-        this.allSections.forEach((section) => {
+        this.sections.forEach((section) => {
           if (this.filterTiles(section.items, this.searchValue).length > 0) itemsFound = false;
         });
         return itemsFound;

From 26f464f2b373a2d54584616e3ba93df762ce29ad Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 26 Oct 2021 22:46:35 +0100
Subject: [PATCH 70/98] :lipstick: Interactive editor style updates for
 Material Themes

---
 src/styles/color-themes.scss | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index f8ebb1f16..b593b40eb 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -378,6 +378,9 @@ html[data-theme='material'], html[data-theme='material-dark'] {
     margin: 0;
     padding: 0;
   }
+  .item-wrapper.add-new-item {
+    flex-grow: inherit;
+  }
   /* Custom layout for medium and large icons */
   .item-wrapper .item:not(.size-small) {
     display: flex;
@@ -520,6 +523,7 @@ html[data-theme='material'] {
   --welcome-popup-text-color: #f5f5f5;
   --footer-text-color: #f5f5f5cc;
   // --login-form-background-secondary: #f5f5f5cc;
+  --context-menu-background: #fff;
   --context-menu-secondary-color: #f5f5f5;
   --transparent-white-50: #00000080;
   --status-check-tooltip-background: #fff;
@@ -576,11 +580,6 @@ html[data-theme='material'] {
   .item:focus {
     outline-color: #4285f4cc;
   }
-  div.context-menu {
-    border: none;
-    background: var(--white);
-    ul li:hover { svg path { fill: var(--background-darker); }}
-  }
 }
 
 html[data-theme='material-dark'] {
@@ -645,6 +644,7 @@ html[data-theme='material-dark'] {
   // --minimal-view-search-color: var(--primary);
   // --minimal-view-group-color: var(--primary);
   --minimal-view-group-background: #131a1f;
+  --context-menu-secondary-color: #131a1f;
 
   div.minimal-section-heading h3, div.minimal-section-heading.selected h3 {
     color: #d5d5d5;
@@ -663,13 +663,6 @@ html[data-theme='material-dark'] {
       background: #131a1f !important;
     }
   }
-  div.context-menu {
-    border: none;
-    background: var(--background);
-    ul li:hover {
-      background: #131a1f;
-    }
-  }
 }
 
 html[data-theme='minimal-light'] {

From 2190b6eb84975263640ac441f4a6b2008260ad9f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 26 Oct 2021 22:47:25 +0100
Subject: [PATCH 71/98] :zap: Improved regex for url validation

---
 src/utils/ConfigSchema.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json
index 49715b40e..bea58ddfd 100644
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@@ -49,7 +49,7 @@
           "title": "App Logo",
           "type": "string",
           "description": "Path to an optional image asset, to be displayed in the header",
-          "pattern": "^(http|/)",
+          "pattern": "^(http|/)(.*?)",
           "examples": [
             "/web-icons/dashy-logo.png",
             "https://i.ibb.co/yhbt6CY/dashy.png"

From 4b291808f20d5497b7eaa5a7830a3b7569cd25f8 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 26 Oct 2021 22:48:02 +0100
Subject: [PATCH 72/98] :art: Minor imprvments to code structure

---
 src/components/InteractiveEditor/MoveItemTo.vue | 5 +++++
 src/components/LinkItems/Section.vue            | 1 +
 src/components/LinkItems/SectionContextMenu.vue | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/InteractiveEditor/MoveItemTo.vue b/src/components/InteractiveEditor/MoveItemTo.vue
index 6d26a8b0e..03196996c 100644
--- a/src/components/InteractiveEditor/MoveItemTo.vue
+++ b/src/components/InteractiveEditor/MoveItemTo.vue
@@ -3,26 +3,31 @@
     :name="modalName" @closed="close"
     :resizable="true" width="40%" height="40%" classes="dashy-modal">
     <div class="move-menu-inner">
+    <!-- Title and item ID -->
       <h3 class="move-title">Move or Copy Item</h3>
       <p class="item-id">Editing {{ itemId }}</p>
+      <!-- Radio, for move or copy -->
       <Radio
         v-model="operation"
         :options="['Move', 'Copy']"
         label="Operation Type"
         :initialOption="operation"
       />
+      <!-- Select destionation section -->
       <Select
         v-model="selectedSection"
         :options="sectionList"
         :initialOption="selectedSection"
         label="Destination"
       />
+      <!-- Radio, for choosing append to beginning or end -->
       <Radio
         v-model="appendTo"
         :options="['Begining', 'End']"
         label="Append To"
         :initialOption="appendTo"
       />
+      <!-- Save and cancel buttons -->
       <SaveCancelButtons :saveClick="save" :cancelClick="close" />
     </div>
   </modal>
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index e56bdc42a..910607897 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -42,6 +42,7 @@
         :statusCheckAllowInsecure="item.statusCheckAllowInsecure"
         @itemClicked="$emit('itemClicked')"
         @triggerModal="triggerModal"
+        :isAddNew="false"
       />
       <!-- When in edit mode, show additional item, for Add New item -->
       <Item v-if="isEditMode"
diff --git a/src/components/LinkItems/SectionContextMenu.vue b/src/components/LinkItems/SectionContextMenu.vue
index 1836fc46b..8f9b12c1f 100644
--- a/src/components/LinkItems/SectionContextMenu.vue
+++ b/src/components/LinkItems/SectionContextMenu.vue
@@ -63,7 +63,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 
 div.context-menu {
   position: absolute;

From 3e7eae2624d0740ee6941f3ac9e146e244f97caa Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 26 Oct 2021 22:48:28 +0100
Subject: [PATCH 73/98] :globe_with_meridians: Updates structure for context
 menu in French translations

---
 src/assets/locales/fr.json | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/assets/locales/fr.json b/src/assets/locales/fr.json
index 4eabbeb34..577cfd0ee 100644
--- a/src/assets/locales/fr.json
+++ b/src/assets/locales/fr.json
@@ -163,10 +163,13 @@
     "backup-success-msg": "Sauvegarde effectuée avec succès",
     "restore-success-msg": "Configuration restaurée avec succès"
   },
-  "menu": {
-    "sametab": "Ouvrir dans l'onglet actuel",
-    "newtab": "Ouvrir dans un nouvel onglet",
-    "modal": "Ouvrir en mode fenêtré",
-    "workspace": "Ouvrir en plein écran"
+  "context-menus": {
+    "item": {
+      "sametab": "Ouvrir dans l'onglet actuel",
+      "newtab": "Ouvrir dans un nouvel onglet",
+      "modal": "Ouvrir en mode fenêtré",
+      "workspace": "Ouvrir en plein écran"
+    },
+    "section": {}
   }
-}
+}
\ No newline at end of file

From dde5b36abc50b1403d57efdb5d23c7c85e8e5bdc Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 26 Oct 2021 22:55:55 +0100
Subject: [PATCH 74/98] :bookmark: Bumps to 1.8.9 and updates changelog

---
 .github/CHANGELOG.md | 6 ++++++
 package.json         | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
index 47e586a26..06f8b5484 100644
--- a/.github/CHANGELOG.md
+++ b/.github/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## ✨ 1.8.9 - All New Interactive Config Editor [PR #298](https://github.com/Lissy93/dashy/pull/298)
+- Builds a new UI-based config editor
+- Support for sections, items, app config and page info
+- Live preview, and undoing of local changes
+- Export config or write changes to disk through UI
+
 ## ✨ 1.8.8 - Improved Item Targets [PR #292](https://github.com/Lissy93/dashy/pull/292)
 - Adds support for `_top` and `_parent` anchor targets on items, Re: #289
 - Adds `appConfig.defaultOpeningMethod` option to specify default target
diff --git a/package.json b/package.json
index 127866a07..a48dcd73d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "license": "MIT",
   "main": "server",
   "scripts": {
@@ -96,4 +96,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}
\ No newline at end of file

From 016dfb17c4fe33b1d5d41f5e5d4e97bb93ecda31 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 26 Oct 2021 23:18:55 +0100
Subject: [PATCH 75/98] :green_heart: Fixes CI

---
 src/components/FormElements/Radio.vue              | 1 -
 src/components/FormElements/Select.vue             | 1 -
 src/components/InteractiveEditor/EditAppConfig.vue | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/FormElements/Radio.vue b/src/components/FormElements/Radio.vue
index f3415612a..7fcb29f6b 100644
--- a/src/components/FormElements/Radio.vue
+++ b/src/components/FormElements/Radio.vue
@@ -58,7 +58,6 @@ export default {
 div.radio-container {
   margin: 0.25rem auto;
   display: flex;
-  align-items: baseline;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
diff --git a/src/components/FormElements/Select.vue b/src/components/FormElements/Select.vue
index 2c1410d8a..9e4916f9b 100644
--- a/src/components/FormElements/Select.vue
+++ b/src/components/FormElements/Select.vue
@@ -48,7 +48,6 @@ export default {
 div.select-container {
   margin: 0.25rem auto;
   display: flex;
-  align-items: baseline;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
diff --git a/src/components/InteractiveEditor/EditAppConfig.vue b/src/components/InteractiveEditor/EditAppConfig.vue
index 7bb47e318..f4c97ea95 100644
--- a/src/components/InteractiveEditor/EditAppConfig.vue
+++ b/src/components/InteractiveEditor/EditAppConfig.vue
@@ -86,7 +86,7 @@ export default {
     /* Remove any attribute which has an undefined value before saving */
     removeUndefinedValues(rawAppConfig) {
       const raw = rawAppConfig;
-      const isEmpty = (value) => (value === undefined || value === {} || value === []);
+      const isEmpty = (value) => (value === undefined);
       Object.keys(raw).forEach(key => isEmpty(raw[key]) && delete raw[key]);
       return raw;
     },

From f9991837faca71c4254ad6bfb2cc73c9e8f396c2 Mon Sep 17 00:00:00 2001
From: EVOTk <45015615+EVOTk@users.noreply.github.com>
Date: Wed, 27 Oct 2021 13:18:11 +0200
Subject: [PATCH 76/98] Update fr for interactive-editor

---
 src/assets/locales/fr.json | 71 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 68 insertions(+), 3 deletions(-)

diff --git a/src/assets/locales/fr.json b/src/assets/locales/fr.json
index 577cfd0ee..9b6b34151 100644
--- a/src/assets/locales/fr.json
+++ b/src/assets/locales/fr.json
@@ -163,13 +163,78 @@
     "backup-success-msg": "Sauvegarde effectuée avec succès",
     "restore-success-msg": "Configuration restaurée avec succès"
   },
+  "menu": {
+    "open-section-title": "Open In",
+    "sametab": "Ouvrir dans l'onglet actuel",
+    "newtab": "Ouvrir dans un nouvel onglet",
+    "modal": "Ouvrir en mode fenêtré",
+    "workspace": "Ouvrir en plein écran",
+    "options-section-title": "Options",
+    "edit-item": "Modifier",
+    "move-item": "Copier et Déplacer",
+    "remove-item": "Supprimer"
+  },
   "context-menus": {
     "item": {
+      "open-section-title": "Open In",
       "sametab": "Ouvrir dans l'onglet actuel",
       "newtab": "Ouvrir dans un nouvel onglet",
       "modal": "Ouvrir en mode fenêtré",
-      "workspace": "Ouvrir en plein écran"
+      "workspace": "Ouvrir en plein écran",
+      "options-section-title": "Options",
+      "edit-item": "Modifier",
+      "move-item": "Copier et Déplacer",
+      "remove-item": "Supprimer"
+    },
+    "section": {
+      "open-section": "Open Section",
+      "edit-section": "Modifier",
+      "move-section": "Déplacer vers",
+      "remove-section": "Supprimer"
+    }
+  },
+  "interactive-editor": {
+    "menu": {
+      "start-editing-tooltip": "Entrer dans l'éditeur interactif",
+      "edit-site-data-subheading": "Modifier l'application",
+      "edit-page-info-btn": "Modifier les informations",
+      "edit-page-info-tooltip": "Titre de l'application, description, liens de navigation, texte de pied de page, etc.",
+      "edit-app-config-btn": "Modifier la configuration",
+      "edit-app-config-tooltip": "Toutes les autres options de configuration",
+      "config-save-methods-subheading": "Options de sauvegarde",
+      "save-locally-btn": "Enregistrer localement",
+      "save-locally-tooltip": "Enregistrez la configuration localement, dans le stockage du navigateur. Cela n'affectera pas votre fichier de configuration, mais les modifications ne seront présentes que sur cet appareil",
+      "save-disk-btn": "Enregistrer sur le disque",
+      "save-disk-tooltip": "Enregistrez la configuration dans le fichier conf.yml sur le disque. Cela sauvegardera, puis écrasera votre configuration existante",
+      "export-config-btn": "Exporter la configuration",
+      "export-config-tooltip": "Afficher et exporter la nouvelle configuration, soit dans un fichier, soit dans le presse-papier",
+      "cancel-changes-btn": "Annuler",
+      "cancel-changes-tooltip": "Réinitialisez les modifications en cours et quittez le mode d'édition. Cela n'affectera pas votre configuration enregistrée",
+      "edit-mode-name": "Éditeur interactif",
+      "edit-mode-subtitle": "Vous êtes en mode d'édition",
+      "edit-mode-description": "Vous pouvez apporter des modifications à votre configuration et prévisualiser les résultats, mais jusqu'à ce que vous sauvegardiez, aucune de vos modifications ne sera conservée.",
+      "save-stage-btn": "Enregistrer",
+      "cancel-stage-btn": "Annuler"
+    },
+    "edit-section": {
+      "edit-section-title": "Edit Section",
+      "edit-tooltip": "Cliquer pour modifier ou cliquer droit pour plus d'options",
+      "remove-confirm": "Voulez-vous vraiment supprimer cette section ? Cette action peut être annulée ultérieurement."
+    },
+    "edit-app-config": {
+      "warning-msg-title": "Procéder avec prudence",
+      "warning-msg-l1": "Les options suivantes concernent la configuration avancée de l'application.",
+      "warning-msg-l2": "Si vous n'êtes pas sûr de l'un des champs, veuillez consulter la",
+      "warning-msg-docs": "documentation",
+      "warning-msg-l3": "pour éviter des conséquences inattendues."
     },
-    "section": {}
+    "export": {
+      "export-title": "Exporter la configuration",
+      "copy-clipboard-btn": "Copier dans le presse-papier",
+      "copy-clipboard-tooltip": "Copier la configuration complète de l'application sur votre appareil dans un fichier YAML",
+      "download-file-btn": "Télécharger",
+      "download-file-tooltip": "Téléchargez la configuration complète de l'application sur votre appareil dans un fichier YAML",
+      "view-title": "Afficher la configuration"
+    }
   }
-}
\ No newline at end of file
+}

From 793ada1902a16d5938c710be0d732427e6dfaddd Mon Sep 17 00:00:00 2001
From: EVOTk <45015615+EVOTk@users.noreply.github.com>
Date: Wed, 27 Oct 2021 13:30:26 +0200
Subject: [PATCH 77/98] =?UTF-8?q?=F0=9F=8C=90=20Update=20fr=20for=20intera?=
 =?UTF-8?q?ctive-editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/locales/fr.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/locales/fr.json b/src/assets/locales/fr.json
index 9b6b34151..b2ccfb49d 100644
--- a/src/assets/locales/fr.json
+++ b/src/assets/locales/fr.json
@@ -164,7 +164,7 @@
     "restore-success-msg": "Configuration restaurée avec succès"
   },
   "menu": {
-    "open-section-title": "Open In",
+    "open-section-title": "Ouvrir ...",
     "sametab": "Ouvrir dans l'onglet actuel",
     "newtab": "Ouvrir dans un nouvel onglet",
     "modal": "Ouvrir en mode fenêtré",
@@ -176,7 +176,7 @@
   },
   "context-menus": {
     "item": {
-      "open-section-title": "Open In",
+      "open-section-title": "Ouvrir ...",
       "sametab": "Ouvrir dans l'onglet actuel",
       "newtab": "Ouvrir dans un nouvel onglet",
       "modal": "Ouvrir en mode fenêtré",
@@ -187,7 +187,7 @@
       "remove-item": "Supprimer"
     },
     "section": {
-      "open-section": "Open Section",
+      "open-section": "Ouvrir",
       "edit-section": "Modifier",
       "move-section": "Déplacer vers",
       "remove-section": "Supprimer"
@@ -217,7 +217,7 @@
       "cancel-stage-btn": "Annuler"
     },
     "edit-section": {
-      "edit-section-title": "Edit Section",
+      "edit-section-title": "Éditeur",
       "edit-tooltip": "Cliquer pour modifier ou cliquer droit pour plus d'options",
       "remove-confirm": "Voulez-vous vraiment supprimer cette section ? Cette action peut être annulée ultérieurement."
     },

From 08072f1fb6bb9250bc11dbfa3d2417da38e1f36d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 27 Oct 2021 21:24:32 +0100
Subject: [PATCH 78/98] :zap: Adds info log for interactive-editor to store

---
 .../InteractiveEditor/ExportConfigMenu.vue     |  4 +++-
 src/store.js                                   | 18 +++++++++++++++++-
 src/utils/ErrorHandler.js                      |  5 +++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/InteractiveEditor/ExportConfigMenu.vue b/src/components/InteractiveEditor/ExportConfigMenu.vue
index d30bbcdf3..9737ed91c 100644
--- a/src/components/InteractiveEditor/ExportConfigMenu.vue
+++ b/src/components/InteractiveEditor/ExportConfigMenu.vue
@@ -34,9 +34,9 @@ import JsYaml from 'js-yaml';
 import Button from '@/components/FormElements/Button';
 import StoreKeys from '@/utils/StoreMutations';
 import { modalNames } from '@/utils/defaults';
-
 import DownloadConfigIcon from '@/assets/interface-icons/config-download-file.svg';
 import CopyConfigIcon from '@/assets/interface-icons/interactive-editor-copy-clipboard.svg';
+import { InfoHandler } from '@/utils/ErrorHandler';
 
 export default {
   name: 'ExportConfigMenu',
@@ -70,11 +70,13 @@ export default {
       document.body.appendChild(element);
       element.click();
       document.body.removeChild(element);
+      InfoHandler('Config downloaded as YAML file', 'Interactive Editor');
     },
     copyConfigToClipboard() {
       const config = this.convertJsonToYaml();
       navigator.clipboard.writeText(config);
       this.$toasted.show(this.$t('config.data-copied-msg'));
+      InfoHandler('Config copied to clipboard', 'Interactive Editor');
     },
     modalClosed() {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
diff --git a/src/store.js b/src/store.js
index b89e0122a..2eae4ef1f 100644
--- a/src/store.js
+++ b/src/store.js
@@ -6,6 +6,7 @@ import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import { componentVisibility } from '@/utils/ConfigHelpers';
 import { applyItemId } from '@/utils/MiscHelpers';
 import filterUserSections from '@/utils/CheckSectionVisibility';
+import { InfoHandler, InfoKeys } from '@/utils/ErrorHandler';
 
 Vue.use(Vuex);
 
@@ -27,6 +28,10 @@ const {
   INSERT_ITEM,
 } = Keys;
 
+const editorLog = (logMessage) => {
+  InfoHandler(logMessage, InfoKeys.EDITOR);
+};
+
 const store = new Vuex.Store({
   state: {
     config: {},
@@ -87,7 +92,10 @@ const store = new Vuex.Store({
       state.modalOpen = modalOpen;
     },
     [SET_EDIT_MODE](state, editMode) {
-      state.editMode = editMode;
+      if (editMode !== state.editMode) {
+        editorLog(editMode ? 'Edit session started' : 'Edit session ended');
+        state.editMode = editMode;
+      }
     },
     [UPDATE_ITEM](state, payload) {
       const { itemId, newItem } = payload;
@@ -96,6 +104,7 @@ const store = new Vuex.Store({
         section.items.forEach((item, itemIndex) => {
           if (item.id === itemId) {
             newConfig.sections[secIndex].items[itemIndex] = newItem;
+            editorLog('Item updated');
           }
         });
       });
@@ -105,23 +114,27 @@ const store = new Vuex.Store({
       const newConfig = state.config;
       newConfig.pageInfo = newPageInfo;
       state.config = newConfig;
+      editorLog('Page info updated');
     },
     [UPDATE_APP_CONFIG](state, newAppConfig) {
       const newConfig = state.config;
       newConfig.appConfig = newAppConfig;
       state.config = newConfig;
+      editorLog('App config updated');
     },
     [UPDATE_SECTION](state, payload) {
       const { sectionIndex, sectionData } = payload;
       const newConfig = { ...state.config };
       newConfig.sections[sectionIndex] = sectionData;
       state.config = newConfig;
+      editorLog('Section updated');
     },
     [REMOVE_SECTION](state, payload) {
       const { sectionIndex, sectionName } = payload;
       const newConfig = { ...state.config };
       if (newConfig.sections[sectionIndex].name === sectionName) {
         newConfig.sections.splice(sectionIndex, 1);
+        editorLog('Section removed');
       }
       state.config = newConfig;
     },
@@ -131,6 +144,7 @@ const store = new Vuex.Store({
       config.sections.forEach((section) => {
         if (section.name === targetSection) {
           section.items.push(newItem);
+          editorLog('New item added');
         }
       });
       config.sections = applyItemId(config.sections);
@@ -147,6 +161,7 @@ const store = new Vuex.Store({
           } else {
             section.items.push(newItem);
           }
+          editorLog('Item copied');
         }
       });
       config.sections = applyItemId(config.sections);
@@ -160,6 +175,7 @@ const store = new Vuex.Store({
           section.items.forEach((item, index) => {
             if (item.id === itemId) {
               section.items.splice(index, 1);
+              editorLog('Item removed');
             }
           });
         }
diff --git a/src/utils/ErrorHandler.js b/src/utils/ErrorHandler.js
index 1d2532813..4ef180dd1 100644
--- a/src/utils/ErrorHandler.js
+++ b/src/utils/ErrorHandler.js
@@ -38,4 +38,9 @@ export const WarningInfoHandler = (msg, title, log) => {
   statusErrorMsg(title || 'Warning', msg, log);
 };
 
+/* Titles for info logging */
+export const InfoKeys = {
+  EDITOR: 'Interactive Editor',
+};
+
 export default ErrorHandler;

From b3b84c6a138d7824c98aa9456a7318a31caaf932 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 27 Oct 2021 22:01:28 +0100
Subject: [PATCH 79/98] :card_file_box: Updates shcema title and description
 attributes

---
 src/utils/ConfigSchema.json | 52 +++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json
index bea58ddfd..ccab89f9c 100644
--- a/src/utils/ConfigSchema.json
+++ b/src/utils/ConfigSchema.json
@@ -285,7 +285,7 @@
         "cssThemes": {
           "title": "Additional CSS Themes",
           "type": "array",
-          "description": "Theme names to be added to the dropdown",
+          "description": "Theme names to be added to the dropdown, once added you can then add custom CSS to style your theme",
           "items": {
             "type": "string"
           }
@@ -293,11 +293,11 @@
         "customColors": {
           "title": "Custom Colors",
           "type": "object",
-          "description": "Set a custom color palette for any theme"
+          "description": "Set a custom color palette for any theme, see docs for more info"
         },
         "externalStyleSheet": {
           "title": "External Stylesheets",
-          "description": "URL or URLs of external stylesheets to add to dropdown/ load",
+          "description": "List of URLs of external stylesheets to add to dropdown/ load",
           "type": "array",
           "items": {
             "type": "string"
@@ -306,7 +306,7 @@
         "customCss": {
           "title": "Custom CSS",
           "type": "string",
-          "description": "Any custom CSS overides, must be minified"
+          "description": "Any custom CSS overides to be applied globally, should be minified"
         },
         "hideComponents": {
           "title": "Hidden Components",
@@ -626,24 +626,29 @@
               ],
               "properties": {
                 "title": {
+                  "title": "Item Text",
                   "type": "string",
-                  "description": "Text shown on the item"
+                  "description": "Title of the item"
                 },
                 "description": {
+                  "title": "Description",
                   "type": "string",
                   "nullable": true,
                   "description": "Short description, shown on hover or in a tooltip"
                 },
                 "icon": {
+                  "title": "Icon",
                   "type": "string",
                   "nullable": true,
-                  "description": "An icon, either as a font-awesome identifier, local or remote URL, or the word favicon or generative"
+                  "description": "An icon, either as a font-awesome, simple-icon or mdi identifier, emoji, favicon, generative or the URL/ path to a local or remote icon asset"
                 },
                 "url": {
+                  "title": "Service URL",
                   "type": "string",
-                  "description": "The destination to navigate to when item is clicked"
+                  "description": "The destination to navigate to when item is clicked, expressed as a valid URL, IP or hostname"
                 },
                 "target": {
+                  "title": "Opening Method",
                   "type": "string",
                   "enum": [
                     "newtab",
@@ -654,45 +659,58 @@
                     "workspace"
                   ],
                   "default": "newtab",
-                  "description": "Opening method, when item is clicked"
+                  "description": "Where / how the item is opened when it's clicked"
                 },
                 "hotkey": {
+                  "title": "Hot Key",
                   "type": "number",
                   "description": "A numeric shortcut key, between 0 and 9. Useful for quickly launching frequently used applications"
                 },
                 "tags": {
+                  "title": "Tags",
                   "type": "array",
-                  "description": "Tags, which can be used for improved search",
+                  "description": "A list of tags for improved search. Separate using a comma",
                   "maxItems": 12,
                   "items": {
                     "type": "string"
                   }
                 },
-                "color": {
-                  "type": "string",
-                  "description": "A custom fill color of the item"
-                },
                 "provider": {
+                  "title": "Provider",
                   "type": "string",
-                  "description": "Provider name, e.g. Microsoft"
+                  "description": "Provider name, e.g. Microsoft, Nebucasa, DigitalOcean, etc"
                 },
                 "statusCheck": {
+                  "title": "Enable Status Check",
                   "type": "boolean",
                   "default": false,
                   "description": "Whether or not to display online/ offline status for this service. Will override appConfig.statusCheck"
                 },
                 "statusCheckUrl": {
+                  "title": "Status Check URL",
                   "type": "string",
-                  "description": "If you've enabled statusCheck, and want to use a different URL to what is defined under the item, then specify it here"
+                  "description": "Custom status check endpoint for this item. Useful if the default URL doesn't return 200, or if your service has a dedicated status check endpoint"
                 },
                 "statusCheckHeaders": {
+                  "title": "Status Check Headers",
                   "type": "object",
-                  "description": " If you're endpoint requires any specific headers for the status checking, then define them here"
+                  "description": " Custom headers for status checking, useful if your service requires authorization headers to return a 200"
                 },
                 "statusCheckAllowInsecure": {
+                  "title": "Status Check Disable SSL",
                   "type": "boolean",
                   "default": false,
-                  "description": "Allows for running status checks on insecure content/ non-HTTPS apps"
+                  "description": "Allows for running status checks on insecure content/ non-HTTPS apps. Prevents checks failing for non-SSL sites"
+                },
+                "color": {
+                  "title": "Custom Color",
+                  "type": "string",
+                  "description": "A custom fill color of the item, expressed either as hex code or color name"
+                },
+                "id": {
+                  "title": "Item ID",
+                  "type": "string",
+                  "description": "Unique ID for each item. Generated automatically, shouldn't need to be set manually."
                 }
               }
             }

From f135de5129d5a4710a4b3970016a0f56a1661b92 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 27 Oct 2021 22:02:06 +0100
Subject: [PATCH 80/98] :adhesive_bandage: Removes trailing curly brace

---
 src/utils/MiscHelpers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index 092f2869e..da9a683f9 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -30,7 +30,7 @@ export const sanitize = (string) => {
 const makeItemId = (sectionStr, itemStr, index) => {
   const charSum = sectionStr.split('').map((a) => a.charCodeAt(0)).reduce((x, y) => x + y);
   const itemTitleStr = itemStr.replace(/\s+/g, '-').replace(/[^a-zA-Z ]/g, '').toLowerCase();
-  return `${index}_${charSum}_${itemTitleStr}}`;
+  return `${index}_${charSum}_${itemTitleStr}`;
 };
 
 /* Given an array of sections, apply a unique ID to each item, and return modified array */

From c7e6047385abb242e28e3655357a57d7940f66a3 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 27 Oct 2021 22:02:39 +0100
Subject: [PATCH 81/98] :lipstick: Min width for select dropdown

---
 src/styles/schema-editor.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/schema-editor.scss b/src/styles/schema-editor.scss
index e0f114bc9..49ce3dddd 100644
--- a/src/styles/schema-editor.scss
+++ b/src/styles/schema-editor.scss
@@ -69,7 +69,7 @@
         }
       }
       select {
-        width: 10rem;
+        width: 15rem;
         height: 2rem;
         padding: 0.2rem;
         font-size: 1rem;

From 06dd8ed525a3e18d2e7d55194fa5a48b83fe3673 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 27 Oct 2021 22:03:28 +0100
Subject: [PATCH 82/98] :art: Use schema title attribute if available and fixed
 position save menu

---
 src/components/InteractiveEditor/EditItem.vue | 19 ++++++++++++-------
 .../InteractiveEditor/EditModeSaveMenu.vue    |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index b7a420d3d..65705e2fc 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -22,7 +22,7 @@
         v-if="row.type === 'text' || row.type === 'number'"
         v-model="formData[index].value"
         :description="row.description"
-        :label="row.name"
+        :label="row.title || row.name"
         :type="row.type"
         layout="horizontal"
         />
@@ -31,7 +31,7 @@
         v-else-if="row.type === 'boolean'"
         v-model="formData[index].value"
         :description="row.description"
-        :label="row.name"
+        :label="row.title || row.name"
         :options="['true', 'false']"
         :initialOption="boolToStr(formData[index].value)"
       />
@@ -42,7 +42,7 @@
         :options="formData[index].enum"
         :description="row.description"
         :initialOption="formData[index].value"
-        :label="row.name"
+        :label="row.title || row.name"
         class="edit-item-select"
       />
       <!-- Warning note, for any other data types, that aren't yet supported -->
@@ -60,7 +60,7 @@
           :key="row.name"
           @click="() => appendNewField(row.name)"
           class="add-field-tag">
-          <AddIcon /> {{ row.name }}
+          <AddIcon /> {{ row.title || row.name }}
         </span>
       </div>
     </div>
@@ -126,15 +126,20 @@ export default {
         value: this.item[property],
         type: this.getInputType(this.schema[property]),
         enum: this.schema[property].enum,
+        title: this.schema[property].title,
       };
     },
     /* Make formatted data structure to be rendered as form elements */
     makeInitialFormData() {
       const formData = [];
       const requiredFields = ['title', 'description', 'url', 'icon', 'target'];
+      const unneededFields = ['id'];
+      const isPrimaryField = (property) => (
+        this.item[property] || requiredFields.includes(property)
+      ) && !unneededFields.includes(property);
       Object.keys(this.schema).forEach((property) => {
         const singleRow = this.makeRowData(property);
-        if (this.item[property] || requiredFields.includes(property)) {
+        if (isPrimaryField(property)) {
           formData.push(singleRow);
         } else {
           this.additionalFormData.push(singleRow);
@@ -263,8 +268,8 @@ export default {
     .input-container, .select-container {
         width: 100%;
         input.input-field {
-        font-size: 1rem;
-        padding: 0.35rem 0.5rem;
+          font-size: 1rem;
+          padding: 0.35rem 0.5rem;
       }
     }
   }
diff --git a/src/components/InteractiveEditor/EditModeSaveMenu.vue b/src/components/InteractiveEditor/EditModeSaveMenu.vue
index 7f36dd61b..2d1b4c954 100644
--- a/src/components/InteractiveEditor/EditModeSaveMenu.vue
+++ b/src/components/InteractiveEditor/EditModeSaveMenu.vue
@@ -194,7 +194,7 @@ export default {
 @import '@/styles/media-queries.scss';
 
 div.edit-mode-bottom-banner {
-  position: absolute;
+  position: fixed;
   display: grid;
   z-index: 5;
   bottom: 0;

From 618ab1c439eb0249a89699e53e46e98858d796bc Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 27 Oct 2021 23:33:31 +0100
Subject: [PATCH 83/98] :art: Update to read + write conf from store

---
 .../Configuration/CloudBackupRestore.vue      | 137 ++++++++++--------
 1 file changed, 77 insertions(+), 60 deletions(-)

diff --git a/src/components/Configuration/CloudBackupRestore.vue b/src/components/Configuration/CloudBackupRestore.vue
index 92f6709d8..7430229d0 100644
--- a/src/components/Configuration/CloudBackupRestore.vue
+++ b/src/components/Configuration/CloudBackupRestore.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="cloud-backup-restore-wrapper">
+    <!-- Intro text -->
     <div class="section intro">
       <h2>{{ $t('cloud-sync.title') }}</h2>
       <p class="intro">
@@ -11,6 +12,7 @@
         <a href="https://github.com/Lissy93/dashy/blob/master/docs/backup-restore.md">docs</a>
       </p>
     </div>
+    <!-- Create or update a backup form -->
     <div class="section backup-section">
       <h3 v-if="backupId">{{ $t('cloud-sync.backup-title-setup') }}</h3>
       <h3 v-else>{{ $t('cloud-sync.backup-title-setup') }}</h3>
@@ -23,11 +25,9 @@
         type="password"
       />
       <Button :click="checkPass">
-        <template v-slot:text>
-          {{backupId
-            ? $t('cloud-sync.backup-button-update') : $t('cloud-sync.backup-button-setup')}}
-        </template>
-        <template v-slot:icon><IconBackup /></template>
+        {{backupId
+          ? $t('cloud-sync.backup-button-update') : $t('cloud-sync.backup-button-setup')}}
+        <IconBackup />
       </Button>
       <div class="results-view" v-if="backupId">
         <span class="backup-id-label">{{ $t('cloud-sync.backup-id-label') }}: </span>
@@ -35,6 +35,7 @@
         <span class="backup-id-note">{{ $t('cloud-sync.backup-id-note') }}</span>
       </div>
     </div>
+    <!-- Restore from backup form -->
     <div class="section restore-section">
       <h3>{{ $t('cloud-sync.restore-title') }}</h3>
       <Input
@@ -49,32 +50,38 @@
         type="password"
       />
       <Button :click="restoreBackup">
-        <template v-slot:text>{{ $t('cloud-sync.restore-button') }}</template>
-        <template v-slot:icon><IconRestore /></template>
+        {{ $t('cloud-sync.restore-button') }}
+        <IconRestore />
       </Button>
     </div>
   </div>
 </template>
 
 <script>
-
+// Import libraries
 import sha256 from 'crypto-js/sha256';
 import ProgressBar from 'rsup-progress';
+// Import form elements
 import Button from '@/components/FormElements/Button';
 import Input from '@/components/FormElements/Input';
-import IconBackup from '@/assets/interface-icons/config-backup.svg';
-import IconRestore from '@/assets/interface-icons/config-restore.svg';
+// Import utils and constants
+import StoreKeys from '@/utils/StoreMutations';
 import { backup, update, restore } from '@/utils/CloudBackup';
 import { localStorageKeys } from '@/utils/defaults';
 import { InfoHandler, WarningInfoHandler } from '@/utils/ErrorHandler';
+// Import Icons
+import IconBackup from '@/assets/interface-icons/config-backup.svg';
+import IconRestore from '@/assets/interface-icons/config-restore.svg';
 
 export default {
   name: 'CloudBackupRestore',
-  props: {
-    config: Object,
+  computed: {
+    config() { // Users config from store
+      return this.$store.state.config;
+    },
   },
   data() {
-    return {
+    return { // Store current form data (temp)
       backupPassword: '',
       restorePassword: '',
       restoreCode: '',
@@ -82,36 +89,26 @@ export default {
       progress: new ProgressBar({ color: 'var(--progress-bar)' }),
     };
   },
-  components: {
+  components: { // UI components / icons
     Button,
     Input,
     IconBackup,
     IconRestore,
   },
   methods: {
+    /* Make request to server-side, then either show error, or proceed to restore */
     restoreBackup() {
       this.progress.start();
       restore(this.restoreCode, this.restorePassword)
         .then((response) => {
-          this.restoreFromBackup(response, this.restoreCode);
+          this.applyRestoredData(response, this.restoreCode);
           this.progress.end();
         }).catch((msg) => {
           this.showErrorMsg(msg);
           this.progress.end();
         });
     },
-    checkPass() {
-      const savedHash = localStorage[localStorageKeys.BACKUP_HASH] || undefined;
-      if (!this.backupPassword) {
-        this.showErrorMsg(this.$t('cloud-sync.backup-missing-password'));
-      } else if (!savedHash) {
-        this.makeBackup();
-      } else if (savedHash === this.makeHash(this.backupPassword)) {
-        this.makeUpdate();
-      } else {
-        this.showErrorMsg(this.$t('cloud-sync.backup-error-password'));
-      }
-    },
+    /* Send request to backup server, to upload a new backup */
     makeBackup() {
       this.progress.start();
       backup(this.config, this.backupPassword)
@@ -127,6 +124,7 @@ export default {
           this.progress.end();
         });
     },
+    /* Send request to backup server, to update an existing backup */
     makeUpdate() {
       this.progress.start();
       update(this.config, this.backupPassword, this.backupId)
@@ -142,17 +140,36 @@ export default {
           this.progress.end();
         });
     },
-    restoreFromBackup(config, backupId) {
+    /* For create / update a backup- checks pass is valid, then calls makeBackup */
+    checkPass() {
+      const savedHash = localStorage[localStorageKeys.BACKUP_HASH] || undefined;
+      if (!this.backupPassword) {
+        this.showErrorMsg(this.$t('cloud-sync.backup-missing-password'));
+      } else if (!savedHash) {
+        this.makeBackup();
+      } else if (savedHash === this.makeHash(this.backupPassword)) {
+        this.makeUpdate();
+      } else {
+        this.showErrorMsg(this.$t('cloud-sync.backup-error-password'));
+      }
+    },
+    /* When restored data is revieved, then save to local storage, and apply it in state */
+    applyRestoredData(config, backupId) {
+      // Store restored data in local storage
       localStorage.setItem(localStorageKeys.CONF_SECTIONS, JSON.stringify(config.sections));
       localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(config.appConfig));
       localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(config.pageInfo));
       if (config.appConfig.theme) {
         localStorage.setItem(localStorageKeys.THEME, config.appConfig.theme);
       }
+      // Save hashed token in local storage
       this.setBackupIdLocally(backupId, this.restorePassword);
+      // Update the current state
+      this.$store.commit(StoreKeys.SET_CONFIG, config);
+      // Show success message
       this.showSuccessMsg(this.$t('cloud-sync.restore-success-msg'));
-      setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals
     },
+    /* After backup/ update is made, then replace 'Make Backup' with 'Update Backup' */
     updateUiAfterBackup(backupId, isUpdate = false) {
       this.setBackupIdLocally(backupId, this.backupPassword);
       this.showSuccessMsg(
@@ -160,17 +177,21 @@ export default {
       );
       this.backupPassword = '';
     },
+    /* If the server returns a warning, then show to user and log it */
     showErrorMsg(errorMsg) {
       WarningInfoHandler(errorMsg, 'Cloud Backup');
       this.$toasted.show(errorMsg, { className: 'toast-error' });
     },
+    /* When server returns success message, then show to user and log it */
     showSuccessMsg(msg) {
       InfoHandler(msg, 'Cloud Backup');
       this.$toasted.show(msg, { className: 'toast-success' });
     },
+    /* Call to hash function, to hash the users chosen/ entered password */
     makeHash(pass) {
       return sha256(pass).toString();
     },
+    /* After backup is applied, hash the backup ID, and save in browser storage */
     setBackupIdLocally(backupId, pass) {
       this.backupId = backupId;
       const hash = this.makeHash(pass);
@@ -185,49 +206,48 @@ export default {
   @import '@/styles/style-helpers.scss';
   div.cloud-backup-restore-wrapper {
     display: flex;
-    flex-direction: row;
     flex-wrap: wrap;
+    flex-direction: row;
     text-align: center;
     overflow: auto;
     height: 100%;
-    background: var(--config-settings-background);
-    color: var(--config-settings-color);
+    color: var(--cloud-backup-color);
+    background: var(--cloud-backup-background);
     @extend .scroll-bar;
 
+    /* Text styling */
+    h2, h3 { font-size: 1.6rem; }
+    p.intro {
+      text-align: left;
+      font-size: 1rem;
+      margin: 0.25rem;
+      padding: 0.25rem;
+    }
+
+    /* Main sections */
     .section {
       display: flex;
       flex-direction: column;
       width: fit-content;
       margin: 0 auto 1rem auto;
       padding: 0 0.5rem 1rem 0.5rem;
-      &:first-child {
-        border-bottom: 1px dashed var(--config-settings-color);
-      }
-      &.intro {
-        width: 100%;
-        height: fit-content;
-        a {
-          color: var(--config-settings-color);
-        }
-      }
     }
-
-    h2 { font-size: 2rem; }
-    h3 { font-size: 1.6rem; }
-    p.intro {
-      text-align: left;
-      font-size: 1rem;
-      margin: 0.25rem;
-      padding: 0.25rem;
+    /* Intro section */
+    .section.intro {
+      width: 100%;
+      height: fit-content;
+      border-bottom: 1px dashed var(--cloud-backup-color);
+      a { color: var(--cloud-backup-color); }
     }
   }
 
+  /* Container to show backup ID result from server */
   div.results-view {
     width: 16rem;
     margin: 0.5rem auto;
     padding: 0.5rem 0.75rem;
     box-sizing: border-box;
-    border: 1px dashed var(--config-settings-color);
+    border: 1px dashed var(--cloud-backup-color);
     border-radius: var(--curve-factor);
     text-align: left;
     .backup-id-label, .backup-id-value {
@@ -245,21 +265,18 @@ export default {
 
   /* Overide form element colors, so that config menu can be themed by user */
   input, button {
-    color: var(--config-settings-color);
-    border: 1px solid var(--config-settings-color);
+    color: var(--cloud-backup-color);
+    border: 1px solid var(--cloud-backup-color);
     background: none;
     width: 16rem;
   }
   input:focus {
-    box-shadow: 1px 1px 6px var(--config-settings-color);
+    box-shadow: 1px 1px 6px var(--cloud-backup-color);
   }
   button:hover {
-    color: var(--config-settings-background);
-    border: 1px solid var(--config-settings-background);
-    background: var(--config-settings-color);
-  }
-  h2, h3 {
-    margin: 1rem;
+    color: var(--cloud-backup-background);
+    border: 1px solid var(--cloud-backup-background);
+    background: var(--cloud-backup-color);
   }
 
 </style>

From a19b8b8f888b8c3577021df6a0cc26a98b2ff9c5 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 28 Oct 2021 00:11:46 +0100
Subject: [PATCH 84/98] :art: Updates data state for custom CSS

---
 src/components/Configuration/CustomCss.vue | 60 ++++++++++++++--------
 1 file changed, 38 insertions(+), 22 deletions(-)

diff --git a/src/components/Configuration/CustomCss.vue b/src/components/Configuration/CustomCss.vue
index bb448ca35..9167b6f3d 100644
--- a/src/components/Configuration/CustomCss.vue
+++ b/src/components/Configuration/CustomCss.vue
@@ -4,7 +4,7 @@
     <div class="css-wrapper">
       <h2 class="css-input-title">Custom CSS</h2>
       <textarea class="css-editor" v-model="customCss" />
-      <Button class="save-button" :click="save">{{ $t('config.css-save-btn') }}</button>
+      <Button class="save-button" :click="save">{{ $t('config.css-save-btn') }}</Button>
       <p class="quick-note">
         <b>{{ $t('config.css-note-label') }}:</b>
         {{ $t('config.css-note-l1') }} {{ $t('config.css-note-l2') }} {{ $t('config.css-note-l3') }}
@@ -20,49 +20,65 @@
 
 import CustomThemeMaker from '@/components/Settings/CustomThemeMaker';
 import Button from '@/components/FormElements/Button';
-import { getTheme } from '@/utils/ConfigHelpers';
-import { localStorageKeys } from '@/utils/defaults';
+import StoreKeys from '@/utils/StoreMutations';
 import { InfoHandler } from '@/utils/ErrorHandler';
+import { localStorageKeys, theme as defaultTheme } from '@/utils/defaults';
 
 export default {
   name: 'StyleEditor',
-  props: {
-    config: Object,
-  },
   components: {
     Button,
     CustomThemeMaker,
   },
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    currentTheme() {
+      return this.appConfig.theme || defaultTheme;
+    },
+  },
   data() {
     return {
-      customCss: this.config.appConfig.customCss || '\n\n',
-      currentTheme: getTheme(),
+      customCss: '',
     };
   },
+  mounted() {
+    // Get existing custom styles (if present) from appConfig
+    this.customCss = this.appConfig.customCss || '\n\n';
+  },
   methods: {
-    /* Save custom CSS in browser, call inject, and show success message */
+    /* Sanitizes input, saves to browser and store, applies to page and shows message */
     save() {
-      // Get, and sanitize users CSS
       const css = this.customCss.replace(/<\/?[^>]+(>|$)/g, '');
-      // Update app config, and apply settings locally
-      const appConfig = { ...this.config.appConfig };
-      appConfig.customCss = css;
-      localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(appConfig));
-      // Immidiatley inject new CSS
-      this.inject(css);
-      // If reseting styles, then refresh the page
-      if (css === '') setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals
-      // Show status message
-      InfoHandler('User syles has been saved', 'Custom CSS Update');
-      this.$toasted.show('Changes saved successfully');
+      this.$store.commit(StoreKeys.UPDATE_CUSTOM_CSS, css);
+      this.saveToBrowser(css);
+      this.injectToPage(css);
+      this.showSuccessMsg();
+      if (css === '') this.reloadPage();
     },
     /* Formats CSS, and applies it to page */
-    inject(userStyles) {
+    injectToPage(userStyles) {
       const cleanedCss = userStyles.replace(/<\/?[^>]+(>|$)/g, '');
       const style = document.createElement('style');
       style.textContent = cleanedCss;
       document.head.append(style);
     },
+    /* Saves custom CSS local storage */
+    saveToBrowser(css) {
+      const localAppConfig = JSON.parse(localStorage.getItem(localStorageKeys.APP_CONFIG) || '{}');
+      localAppConfig.customCss = css;
+      localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(localAppConfig));
+    },
+    /* Reload the page (only called if removing styles) */
+    reloadPage() {
+      setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals
+    },
+    /* Show success toast and lot update */
+    showSuccessMsg() {
+      this.$toasted.show('Changes saved successfully');
+      InfoHandler('User syles has been saved', 'Custom CSS');
+    },
   },
 };
 </script>

From 2facae3dc1560b80b6215faabddffffe385f41fa Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 28 Oct 2021 01:33:35 +0100
Subject: [PATCH 85/98] :sparkles: Adds live preview mode to JSON editor

Also updates the YAML parser, uses reusable radio bttons, reads initial config from state, refactos code, and few other things :)
---
 src/components/Configuration/JsonEditor.vue | 166 ++++++++++++--------
 1 file changed, 97 insertions(+), 69 deletions(-)

diff --git a/src/components/Configuration/JsonEditor.vue b/src/components/Configuration/JsonEditor.vue
index ef90c53d2..4e315b7c6 100644
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -1,31 +1,24 @@
 <template>
   <div class="json-editor-outer">
     <!-- Main JSON editor -->
-    <v-jsoneditor
-      v-model="jsonData"
-      :options="options"
-    />
+    <v-jsoneditor v-model="jsonData" :options="options" />
     <!-- Options raido, and save button -->
-    <div class="save-options">
-      <span class="save-option-title">{{ $t('config-editor.save-location-label') }}:</span>
-      <div class="option">
-        <input type="radio" id="local" value="local"
-          v-model="saveMode" class="radio-option" :disabled="!allowWriteToDisk" />
-        <label for="local" class="save-option-label">
-          {{ $t('config-editor.location-local-label') }}
-        </label>
-      </div>
-      <div class="option">
-        <input type="radio" id="file" value="file" v-model="saveMode" class="radio-option"
-          :disabled="!allowWriteToDisk" />
-        <label for="file" class="save-option-label">
-          {{ $t('config-editor.location-disk-label') }}
-        </label>
-      </div>
+    <Radio class="save-options"
+      v-model="saveMode"
+      :label="$t('config-editor.save-location-label')"
+      :options="saveOptions"
+      :initialOption="initialSaveMode"
+      :disabled="!allowWriteToDisk"
+      />
+    <!-- Save Buttons -->
+    <div :class="`btn-container ${!isValid ? 'err' : ''}`">
+      <Button :click="save">
+        {{ $t('config-editor.save-button') }}
+      </Button>
+      <Button :click="startPreview">
+        {{ $t('config-editor.preview-button') }}
+      </Button>
     </div>
-    <button :class="`save-button ${!isValid ? 'err' : ''}`" @click="save()">
-      {{ $t('config-editor.save-button') }}
-    </button>
     <!-- List validation warnings -->
     <p class="errors">
       <ul>
@@ -50,7 +43,6 @@
     <p v-if="saveSuccess" class="response-output">
       {{ $t('config-editor.success-note-l1') }}
       {{ $t('config-editor.success-note-l2') }}
-      {{ $t('config-editor.success-note-l3') }}
     </p>
     <p class="note">{{ $t('config.backup-note') }}</p>
   </div>
@@ -61,25 +53,27 @@
 import axios from 'axios';
 import ProgressBar from 'rsup-progress';
 import VJsoneditor from 'v-jsoneditor';
+import jsYaml from 'js-yaml';
 import ErrorHandler, { InfoHandler } from '@/utils/ErrorHandler';
 import configSchema from '@/utils/ConfigSchema.json';
-import JsonToYaml from '@/utils/JsonToYaml';
-import { localStorageKeys, serviceEndpoints } from '@/utils/defaults';
+import StoreKeys from '@/utils/StoreMutations';
+import { localStorageKeys, serviceEndpoints, modalNames } from '@/utils/defaults';
 import { isUserAdmin } from '@/utils/Auth';
+import Button from '@/components/FormElements/Button';
+import Radio from '@/components/FormElements/Radio';
 
 export default {
   name: 'JsonEditor',
-  props: {
-    config: Object,
-  },
   components: {
     VJsoneditor,
+    Button,
+    Radio,
   },
   data() {
     return {
-      jsonData: this.config,
+      jsonData: {},
       errorMessages: [],
-      saveMode: 'file',
+      saveMode: '',
       options: {
         schema: configSchema,
         mode: 'tree',
@@ -87,26 +81,36 @@ export default {
         name: 'config',
         onValidationError: this.validationErrors,
       },
-      jsonParser: JsonToYaml,
       responseText: '',
       saveSuccess: undefined,
-      allowWriteToDisk: this.shouldAllowWriteToDisk(),
       progress: new ProgressBar({ color: 'var(--progress-bar)' }),
+      saveOptions: [
+        { label: this.$t('config-editor.location-disk-label'), value: 'file' },
+        { label: this.$t('config-editor.location-local-label'), value: 'local' },
+      ],
     };
   },
   computed: {
+    config() {
+      return this.$store.state.config;
+    },
     isValid() {
       return this.errorMessages.length < 1;
     },
+    allowWriteToDisk() {
+      const { appConfig } = this.config;
+      return appConfig.allowConfigEdit !== false && isUserAdmin();
+    },
+    initialSaveMode() {
+      return this.allowWriteToDisk ? 'file' : 'local';
+    },
   },
   mounted() {
+    this.jsonData = this.config;
     if (!this.allowWriteToDisk) this.saveMode = 'local';
   },
   methods: {
-    shouldAllowWriteToDisk() {
-      const { appConfig } = this.config;
-      return appConfig.allowConfigEdit !== false && isUserAdmin();
-    },
+    /* Calls appropriate save method, based on save-type radio selected */
     save() {
       if (this.saveMode === 'local' || !this.allowWriteToDisk) {
         this.saveConfigLocally();
@@ -116,9 +120,21 @@ export default {
         this.$toasted.show(this.$t('config-editor.error-msg-save-mode'));
       }
     },
+    /* Applies changes to the local state, begins edit mode and closes modal */
+    startPreview() {
+      InfoHandler('Applying changes to local state...', 'Config Update');
+      const data = this.jsonData;
+      this.$store.commit(StoreKeys.SET_APP_CONFIG, data.appConfig);
+      this.$store.commit(StoreKeys.SET_PAGE_INFO, data.pageInfo);
+      this.$store.commit(StoreKeys.SET_SECTIONS, data.sections);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+      this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
+      this.$modal.hide(modalNames.CONF_EDITOR);
+    },
+    /* Converts config to YAML, and writes it to disk */
     writeConfigToDisk() {
       // 1. Convert JSON into YAML
-      const yaml = this.jsonParser(this.jsonData);
+      const yaml = jsYaml.dump(this.config);
       // 2. Prepare the request
       const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
       const endpoint = `${baseUrl}${serviceEndpoints.save}`;
@@ -137,6 +153,7 @@ export default {
           this.showToast(this.$t('config-editor.error-msg-cannot-save'), false);
         }
         InfoHandler('Config has been written to disk succesfully', 'Config Update');
+        this.$store.commit(StoreKeys.SET_CONFIG, this.jsonData);
         this.progress.end();
       })
         .catch((error) => {
@@ -147,6 +164,7 @@ export default {
           this.progress.end();
         });
     },
+    /* Saves config to local browser storage */
     saveConfigLocally() {
       const data = this.jsonData;
       if (data.sections) {
@@ -165,11 +183,13 @@ export default {
       InfoHandler('Config has succesfully been saved in browser storage', 'Config Update');
       this.showToast(this.$t('config-editor.success-msg-local'), true);
     },
+    /* Clears config from browser storage, only removing relevant items  */
     carefullyClearLocalStorage() {
       localStorage.removeItem(localStorageKeys.PAGE_INFO);
       localStorage.removeItem(localStorageKeys.APP_CONFIG);
       localStorage.removeItem(localStorageKeys.CONF_SECTIONS);
     },
+    /* Convert error messages into readable format for UI */
     validationErrors(errors) {
       const errorMessages = [];
       errors.forEach((error) => {
@@ -197,6 +217,7 @@ export default {
       });
       this.errorMessages = errorMessages;
     },
+    /* Shows toast message */
     showToast(message, success) {
       this.$toasted.show(message, { className: `toast-${success ? 'success' : 'error'}` });
     },
@@ -259,52 +280,59 @@ p.no-permission-note {
   color: var(--config-settings-color);
 }
 
-button.save-button {
-  padding:  0.5rem 1rem;
-  margin: 0.25rem auto;
-  font-size: 1.2rem;
-  background: var(--config-settings-color);
-  color: var(--config-settings-background);
-  border: 1px solid var(--config-settings-background);
-  border-radius: var(--curve-factor);
-  cursor: pointer;
-  &:hover {
+.btn-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  button {
+    padding:  0.5rem 1rem;
+    margin: 0.25rem;
+    font-size: 1.2rem;
     background: var(--config-settings-background);
     color: var(--config-settings-color);
-    border-color: var(--config-settings-color);
+    border: 1px solid var(--config-settings-color);
+    border-radius: var(--curve-factor);
+    &:hover {
+      background: var(--config-settings-color);
+      color: var(--config-settings-background);
+      border-color: var(--config-settings-background);
+    }
   }
-  &.err {
+  &.err button {
     opacity: 0.8;
     cursor: default;
     &:hover {
-      background: var(--config-settings-color);
-      color: var(--config-settings-background);
+      background: var(--config-settings-background);
+      color: var(--config-settings-color);
       border-color: var(--danger);
     }
   }
 }
 
-div.save-options {
+div.save-options.radio-container {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: center;
-  padding: 0.5rem;
-  margin-bottom: 0.5rem;
-  background: var(--code-editor-background);
-  color: var(--code-editor-color);
+  margin: 0;
+  padding: 0;
   border-top: 2px solid var(--config-settings-background);
-  @include tablet-down { flex-direction: column; }
-  .option {
-    @include tablet-up { margin-left: 2rem; }
-  }
-  span.save-option-title {
-    cursor: default;
-  }
-  input.radio-option {
-    cursor: pointer;
+  background: var(--code-editor-background);
+  label.radio-label {
+    font-size: 1rem;
+    flex-grow: revert;
+    flex-basis: revert;
+    color: var(--code-editor-color);
+    padding-left: 1rem;
   }
-  label.save-option-label {
-    cursor: pointer;
+  .radio-wrapper {
+    margin: 0;
+    font-size: 1rem;
+    justify-content: space-around;
+    background: var(--code-editor-background);
+    color: var(--code-editor-color);
+    .radio-option:hover:not(.wrap-disabled) {
+      border: 1px solid var(--code-editor-color);
+    }
   }
 }
 

From e4ea1c802d65dfc1ecc383e4fac201bc5cd573fe Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 28 Oct 2021 23:38:43 +0100
Subject: [PATCH 86/98] :zap: Radio button component accepts object input for
 options

---
 src/components/FormElements/Radio.vue         | 24 +++++++++++--------
 src/components/InteractiveEditor/EditItem.vue |  6 ++++-
 .../InteractiveEditor/MoveItemTo.vue          | 18 ++++++++++----
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/FormElements/Radio.vue b/src/components/FormElements/Radio.vue
index 7fcb29f6b..b87ea4ca3 100644
--- a/src/components/FormElements/Radio.vue
+++ b/src/components/FormElements/Radio.vue
@@ -2,15 +2,15 @@
   <div class="radio-container">
     <label v-if="label" class="radio-label">{{ label }}</label>
     <div class="radio-wrapper">
-      <div v-for="radio in options" :key="radio" class="radio-option">
-        <label :for="`id-${radio}`" class="option-label">{{ radio }}</label>
-        <input
-          :value="radio"
-          :id=" `id-${radio}`"
-          v-model="selectedRadio"
-          type="radio"
+      <div v-for="radio in options" :key="radio.value"
+        :class="`radio-option ${disabled ? 'wrap-disabled' : ''}`">
+        <label :for="`id-${radio.value}`" class="option-label">{{ radio.label }}</label>
+        <input type="radio" class="radio-input"
+          :id=" `id-${radio.value}`"
           :name="makeGroupName"
-          class="radio-input"
+          :value="radio.value"
+          :disabled="disabled || radio.disabled"
+          v-model="selectedRadio"
           v-on:input="updateValue($event.target.value)"
         />
       </div>
@@ -25,10 +25,11 @@ export default {
   name: 'Radio',
   components: {},
   props: {
-    options: Array, // Array of available options
+    options: Array, // Array of objects for available options
     initialOption: String, // Optional default option
     label: String, // Form label for element
     description: String, // Optional description text
+    disabled: Boolean, // Disable all radio buttons
   },
   data() {
     return {
@@ -91,9 +92,12 @@ div.radio-container {
       cursor: pointer;
       border: 1px solid transparent;
       border-radius: var(--curve-factor);
-      &:hover {
+      &:hover:not(.wrap-disabled) {
         border: 1px solid var(--primary);
       }
+      &:disabled {
+        opacity: var(--dimming-factor);
+      }
       label.option-label, input.radio-input {
         cursor: pointer;
         text-transform: capitalize;
diff --git a/src/components/InteractiveEditor/EditItem.vue b/src/components/InteractiveEditor/EditItem.vue
index 65705e2fc..e924f3ef8 100644
--- a/src/components/InteractiveEditor/EditItem.vue
+++ b/src/components/InteractiveEditor/EditItem.vue
@@ -32,7 +32,7 @@
         v-model="formData[index].value"
         :description="row.description"
         :label="row.title || row.name"
-        :options="['true', 'false']"
+        :options="[ ...boolRadioOptions ]"
         :initialOption="boolToStr(formData[index].value)"
       />
       <!-- Select/ dropdown for enum multiple-choice input -->
@@ -90,6 +90,10 @@ export default {
       formData: [], // Array of form fields
       additionalFormData: [], // Array of not-yet-used form fields
       item: {},
+      boolRadioOptions: [
+        { label: 'true', value: 'true' },
+        { label: 'false', value: 'false' },
+      ],
     };
   },
   props: {
diff --git a/src/components/InteractiveEditor/MoveItemTo.vue b/src/components/InteractiveEditor/MoveItemTo.vue
index 03196996c..7a604d309 100644
--- a/src/components/InteractiveEditor/MoveItemTo.vue
+++ b/src/components/InteractiveEditor/MoveItemTo.vue
@@ -9,7 +9,7 @@
       <!-- Radio, for move or copy -->
       <Radio
         v-model="operation"
-        :options="['Move', 'Copy']"
+        :options="operationRadioOptions"
         label="Operation Type"
         :initialOption="operation"
       />
@@ -23,7 +23,7 @@
       <!-- Radio, for choosing append to beginning or end -->
       <Radio
         v-model="appendTo"
-        :options="['Begining', 'End']"
+        :options="appendToRadioOptions"
         label="Append To"
         :initialOption="appendTo"
       />
@@ -54,9 +54,17 @@ export default {
   data() {
     return {
       selectedSection: '',
-      operation: 'Move',
-      appendTo: 'End',
+      operation: 'move',
+      appendTo: 'end',
       modalName: `${modalNames.MOVE_ITEM_TO}-${this.itemId}`,
+      operationRadioOptions: [
+        { label: 'Move', value: 'move' },
+        { label: 'Copy', value: 'copy' },
+      ],
+      appendToRadioOptions: [
+        { label: 'Beginning', value: 'beginning' },
+        { label: 'End', value: 'end' },
+      ],
     };
   },
   computed: {
@@ -86,7 +94,7 @@ export default {
       const copyPayload = { item, toSection: this.selectedSection, appendTo: this.appendTo };
       this.$store.commit(StoreKeys.COPY_ITEM, copyPayload);
       // Remove item from previous section
-      if (this.operation === 'Move') {
+      if (this.operation === 'move') {
         const payload = { itemId: this.itemId, sectionName: this.currentSection };
         this.$store.commit(StoreKeys.REMOVE_ITEM, payload);
       }

From 229e67aca8a4ad29b3c549bfa3d8adea3ad7dd28 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Thu, 28 Oct 2021 23:40:27 +0100
Subject: [PATCH 87/98] :zap: Updates key names

---
 src/components/InteractiveEditor/EditAppConfig.vue |  2 +-
 src/components/InteractiveEditor/EditPageInfo.vue  |  2 +-
 src/utils/StoreMutations.js                        | 10 +++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/InteractiveEditor/EditAppConfig.vue b/src/components/InteractiveEditor/EditAppConfig.vue
index f4c97ea95..56779b4ca 100644
--- a/src/components/InteractiveEditor/EditAppConfig.vue
+++ b/src/components/InteractiveEditor/EditAppConfig.vue
@@ -71,7 +71,7 @@ export default {
     /* When form submitteed, update VueX store with new appConfig, and close modal */
     saveToState() {
       const processedFormData = this.removeUndefinedValues(this.formData);
-      this.$store.commit(StoreKeys.UPDATE_APP_CONFIG, processedFormData);
+      this.$store.commit(StoreKeys.SET_APP_CONFIG, processedFormData);
       this.$modal.hide(this.modalName);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
diff --git a/src/components/InteractiveEditor/EditPageInfo.vue b/src/components/InteractiveEditor/EditPageInfo.vue
index 290381fc0..71f978dae 100644
--- a/src/components/InteractiveEditor/EditPageInfo.vue
+++ b/src/components/InteractiveEditor/EditPageInfo.vue
@@ -55,7 +55,7 @@ export default {
   methods: {
     /* When form submitteed, update VueX store with new pageInfo, and close modal */
     saveToState() {
-      this.$store.commit(StoreKeys.UPDATE_PAGE_INFO, this.formData);
+      this.$store.commit(StoreKeys.SET_PAGE_INFO, this.formData);
       this.$modal.hide(this.modalName);
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index e32a2bd64..ebe55f4f2 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -1,20 +1,24 @@
 // A list of mutation names
 const KEY_NAMES = [
   'INITIALIZE_CONFIG',
-  'UPDATE_CONFIG',
+  'SET_CONFIG',
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',
   'SET_EDIT_MODE',
   'SET_ITEM_LAYOUT',
   'SET_ITEM_SIZE',
+  'SET_THEME',
   'UPDATE_ITEM',
-  'UPDATE_PAGE_INFO',
-  'UPDATE_APP_CONFIG',
+  'SET_PAGE_INFO',
+  'SET_APP_CONFIG',
+  'SET_SECTIONS',
   'UPDATE_SECTION',
+  'INSERT_SECTION',
   'REMOVE_SECTION',
   'COPY_ITEM',
   'REMOVE_ITEM',
   'INSERT_ITEM',
+  'UPDATE_CUSTOM_CSS',
 ];
 
 // Convert array of key names into an object, and export

From beb532b9673586f7c81756b83c679f93a0b65270 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 29 Oct 2021 19:16:10 +0100
Subject: [PATCH 88/98] :sparkles: Add new section functionality

---
 .../AddNewSectionLauncher.vue                 | 66 +++++++++++++++++++
 .../InteractiveEditor/EditSection.vue         | 22 +++++--
 src/views/Home.vue                            | 30 ++++++++-
 3 files changed, 110 insertions(+), 8 deletions(-)
 create mode 100644 src/components/InteractiveEditor/AddNewSectionLauncher.vue

diff --git a/src/components/InteractiveEditor/AddNewSectionLauncher.vue b/src/components/InteractiveEditor/AddNewSectionLauncher.vue
new file mode 100644
index 000000000..965778ed7
--- /dev/null
+++ b/src/components/InteractiveEditor/AddNewSectionLauncher.vue
@@ -0,0 +1,66 @@
+<!-- Main homepage for default view -->
+<template>
+  <div class="add-section">
+  <!-- When in edit mode, show Add New Section button -->
+  <div v-if="isEditMode" @click="openAddNewSectionMenu()" class="add-new-section">
+    <p>➕ {{ $t('interactive-editor.edit-section.add-section-title') }}</p>
+  </div>
+  <!-- Add new section form -->
+  <EditSectionMenu
+    v-if="isEditMode && addNewSectionOpen"
+    :isAddNew="true"
+    @closeEditSection="closeEditSection"
+  />
+  </div>
+</template>
+
+<script>
+
+import EditSectionMenu from '@/components/InteractiveEditor/EditSection.vue';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+
+export default {
+  name: 'add-section-container',
+  components: {
+    EditSectionMenu,
+  },
+  data: () => ({
+    addNewSectionOpen: false,
+  }),
+  computed: {
+    isEditMode() {
+      return this.$store.state.editMode;
+    },
+  },
+  methods: {
+    openAddNewSectionMenu() {
+      this.addNewSectionOpen = true;
+      this.$modal.show(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
+    closeEditSection() {
+      this.addNewSectionOpen = false;
+      this.$modal.hide(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.add-new-section {
+  border: 2px dashed var(--primary);
+  border-radius: var(--curve-factor);
+  padding: var(--item-group-padding);
+  background: var(--item-group-background);
+  color: var(--primary);
+  font-size: 1.2rem;
+  cursor: pointer;
+  text-align: center;
+  height: fit-content;
+  margin: 10px;
+}
+
+</style>
diff --git a/src/components/InteractiveEditor/EditSection.vue b/src/components/InteractiveEditor/EditSection.vue
index b7840c560..7e9b26358 100644
--- a/src/components/InteractiveEditor/EditSection.vue
+++ b/src/components/InteractiveEditor/EditSection.vue
@@ -1,14 +1,13 @@
 <template>
   <modal
-    :name="modalName"
-    :resizable="true"
-    width="50%"
-    height="80%"
+    :name="modalName" @closed="modalClosed"
+    :resizable="true" width="50%" height="80%"
     classes="dashy-modal edit-section"
-    @closed="modalClosed"
   >
   <div class="edit-section-inner">
-    <h3>{{ $t('interactive-editor.edit-section.edit-section-title') }}</h3>
+    <h3>
+      {{ $t(`interactive-editor.edit-section.${isAddNew ? 'add' : 'edit'}-section-title`) }}
+    </h3>
     <FormSchema
       :schema="customSchema"
       v-model="sectionData"
@@ -34,6 +33,7 @@ export default {
   name: 'EditSection',
   props: {
     sectionIndex: Number,
+    isAddNew: Boolean,
   },
   components: {
     SaveCancelButtons,
@@ -47,6 +47,7 @@ export default {
     };
   },
   computed: {
+    /* Make a custom schema object, using fields from ConfigSchema */
     customSchema() {
       const sectionSchema = this.schema;
       const displayDataSchema = this.schema.displayData.properties;
@@ -76,7 +77,9 @@ export default {
     this.$modal.show(modalNames.EDIT_SECTION);
   },
   methods: {
+    /* From the current index, return section data */
     getSectionFromState(index) {
+      if (this.isAddNew) return {};
       return this.$store.getters.getSectionByIndex(index);
     },
     /* Clean up work, triggered when modal closed */
@@ -84,9 +87,14 @@ export default {
       this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
       this.$emit('closeEditSection');
     },
+    /* Either update existing section, or insert new one, then close modal */
     saveSection() {
       const { sectionIndex, sectionData } = this;
-      this.$store.commit(StoreKeys.UPDATE_SECTION, { sectionIndex, sectionData });
+      if (this.isAddNew) {
+        this.$store.commit(StoreKeys.INSERT_SECTION, sectionData);
+      } else {
+        this.$store.commit(StoreKeys.UPDATE_SECTION, { sectionIndex, sectionData });
+      }
       this.$store.commit(StoreKeys.SET_EDIT_MODE, true);
       this.$emit('closeEditSection');
     },
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8a6198288..ba8b513d5 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -44,6 +44,8 @@
         :class="
         (searchValue && filterTiles(section.items, searchValue).length === 0) ? 'no-results' : ''"
       />
+      <!-- Show add new section button, in edit mode -->
+      <AddNewSection v-if="isEditMode" />
     </div>
     <!-- Show message when there's no data to show -->
     <div v-if="checkIfResults()" class="no-data">
@@ -62,8 +64,10 @@ import SettingsContainer from '@/components/Settings/SettingsContainer.vue';
 import Section from '@/components/LinkItems/Section.vue';
 import EditModeSaveMenu from '@/components/InteractiveEditor/EditModeSaveMenu.vue';
 import ExportConfigMenu from '@/components/InteractiveEditor/ExportConfigMenu.vue';
+import AddNewSection from '@/components/InteractiveEditor/AddNewSectionLauncher.vue';
 import { searchTiles } from '@/utils/Search';
-import Defaults, { localStorageKeys, iconCdns } from '@/utils/defaults';
+import StoreKeys from '@/utils/StoreMutations';
+import Defaults, { localStorageKeys, iconCdns, modalNames } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
 import BackIcon from '@/assets/interface-icons/back-arrow.svg';
 
@@ -73,6 +77,7 @@ export default {
     SettingsContainer,
     EditModeSaveMenu,
     ExportConfigMenu,
+    AddNewSection,
     Section,
     BackIcon,
   },
@@ -80,6 +85,7 @@ export default {
     searchValue: '',
     layout: '',
     itemSizeBound: '',
+    addNewSectionOpen: false,
   }),
   computed: {
     sections() {
@@ -164,6 +170,16 @@ export default {
     updateModalVisibility(modalState) {
       this.$store.commit('SET_MODAL_OPEN', modalState);
     },
+    openAddNewSectionMenu() {
+      this.addNewSectionOpen = true;
+      this.$modal.show(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, true);
+    },
+    closeEditSection() {
+      this.addNewSectionOpen = false;
+      this.$modal.hide(modalNames.EDIT_SECTION);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
     /* If on sub-route, and section exists, then return only that section */
     findSingleSection: (allSections, sectionTitle) => {
       if (!sectionTitle) return undefined;
@@ -346,6 +362,18 @@ export default {
   &.single-section-view {
     display: block;
   }
+  .add-new-section {
+    border: 2px dashed var(--primary);
+    border-radius: var(--curve-factor);
+    padding: var(--item-group-padding);
+    background: var(--item-group-background);
+    color: var(--primary);
+    font-size: 1.2rem;
+    cursor: pointer;
+    text-align: center;
+    height: fit-content;
+    margin: 10px;
+  }
 }
 
 /* Custom styles only applied when there is no sections in config */

From a237ec082701c86d632b6d3ec8521714cc08d112 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 29 Oct 2021 23:01:18 +0100
Subject: [PATCH 89/98] :convenience_store: Adds setup / update section to
 store

---
 src/store.js | 45 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/store.js b/src/store.js
index 2eae4ef1f..85e68e3c3 100644
--- a/src/store.js
+++ b/src/store.js
@@ -12,20 +12,24 @@ Vue.use(Vuex);
 
 const {
   INITIALIZE_CONFIG,
-  UPDATE_CONFIG,
+  SET_CONFIG,
   SET_MODAL_OPEN,
   SET_LANGUAGE,
   SET_ITEM_LAYOUT,
   SET_ITEM_SIZE,
+  SET_THEME,
   UPDATE_ITEM,
   SET_EDIT_MODE,
-  UPDATE_PAGE_INFO,
-  UPDATE_APP_CONFIG,
+  SET_PAGE_INFO,
+  SET_APP_CONFIG,
+  SET_SECTIONS,
   UPDATE_SECTION,
+  INSERT_SECTION,
   REMOVE_SECTION,
   COPY_ITEM,
   REMOVE_ITEM,
   INSERT_ITEM,
+  UPDATE_CUSTOM_CSS,
 } = Keys;
 
 const editorLog = (logMessage) => {
@@ -48,6 +52,9 @@ const store = new Vuex.Store({
     appConfig(state) {
       return state.config.appConfig || {};
     },
+    theme(state) {
+      return state.config.appConfig.theme;
+    },
     sections(state) {
       return filterUserSections(state.config.sections || []);
     },
@@ -80,7 +87,7 @@ const store = new Vuex.Store({
     },
   },
   mutations: {
-    [UPDATE_CONFIG](state, config) {
+    [SET_CONFIG](state, config) {
       state.config = config;
     },
     [SET_LANGUAGE](state, lang) {
@@ -110,18 +117,24 @@ const store = new Vuex.Store({
       });
       state.config = newConfig;
     },
-    [UPDATE_PAGE_INFO](state, newPageInfo) {
+    [SET_PAGE_INFO](state, newPageInfo) {
       const newConfig = state.config;
       newConfig.pageInfo = newPageInfo;
       state.config = newConfig;
       editorLog('Page info updated');
     },
-    [UPDATE_APP_CONFIG](state, newAppConfig) {
+    [SET_APP_CONFIG](state, newAppConfig) {
       const newConfig = state.config;
       newConfig.appConfig = newAppConfig;
       state.config = newConfig;
       editorLog('App config updated');
     },
+    [SET_SECTIONS](state, newSections) {
+      const newConfig = state.config;
+      newConfig.sections = newSections;
+      state.config = newConfig;
+      editorLog('Sections updated');
+    },
     [UPDATE_SECTION](state, payload) {
       const { sectionIndex, sectionData } = payload;
       const newConfig = { ...state.config };
@@ -129,6 +142,13 @@ const store = new Vuex.Store({
       state.config = newConfig;
       editorLog('Section updated');
     },
+    [INSERT_SECTION](state, newSection) {
+      const newConfig = { ...state.config };
+      newSection.items = [];
+      newConfig.sections.push(newSection);
+      state.config = newConfig;
+      editorLog('New section added');
+    },
     [REMOVE_SECTION](state, payload) {
       const { sectionIndex, sectionName } = payload;
       const newConfig = { ...state.config };
@@ -156,7 +176,7 @@ const store = new Vuex.Store({
       const newItem = { ...item };
       config.sections.forEach((section) => {
         if (section.name === toSection) {
-          if (appendTo === 'Begining') {
+          if (appendTo === 'beginning') {
             section.items.unshift(newItem);
           } else {
             section.items.push(newItem);
@@ -182,19 +202,28 @@ const store = new Vuex.Store({
       });
       state.config = config;
     },
+    [SET_THEME](state, theme) {
+      const newConfig = { ...state.config };
+      newConfig.appConfig.theme = theme;
+      state.config = newConfig;
+      InfoHandler('Theme updated', InfoKeys.VISUAL);
+    },
     [SET_ITEM_LAYOUT](state, layout) {
       state.config.appConfig.layout = layout;
     },
     [SET_ITEM_SIZE](state, iconSize) {
       state.config.appConfig.iconSize = iconSize;
     },
+    [UPDATE_CUSTOM_CSS](state, customCss) {
+      state.config.appConfig.customCss = customCss;
+    },
   },
   actions: {
     /* Called when app first loaded. Reads config and sets state */
     [INITIALIZE_CONFIG]({ commit }) {
       const deepCopy = (json) => JSON.parse(JSON.stringify(json));
       const config = deepCopy(new ConfigAccumulator().config());
-      commit(UPDATE_CONFIG, config);
+      commit(SET_CONFIG, config);
     },
   },
   modules: {},

From f624dba4f9246f6f23fb881ae61b484c096e929c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 29 Oct 2021 23:01:56 +0100
Subject: [PATCH 90/98] :exclamation: Adds status message keys to error handler

---
 src/utils/ErrorHandler.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/ErrorHandler.js b/src/utils/ErrorHandler.js
index 4ef180dd1..a0624fab1 100644
--- a/src/utils/ErrorHandler.js
+++ b/src/utils/ErrorHandler.js
@@ -41,6 +41,7 @@ export const WarningInfoHandler = (msg, title, log) => {
 /* Titles for info logging */
 export const InfoKeys = {
   EDITOR: 'Interactive Editor',
+  VISUAL: 'Layout & Styles',
 };
 
 export default ErrorHandler;

From e6a607572e8bd92d15be68f9ef3d45d4ca415a4f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 29 Oct 2021 23:02:45 +0100
Subject: [PATCH 91/98] :zap: Add attribute for isNew to section form, to
 determine if editing existing

---
 src/components/LinkItems/Section.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 910607897..6d197694d 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -12,7 +12,7 @@
     @openContextMenu="openContextMenu"
   >
     <!-- If no items, show message -->
-    <div v-if="!items || items.length < 1" class="no-items">
+    <div v-if="(!items || items.length < 1) && !isEditMode" class="no-items">
       No Items to Show Yet
     </div>
     <!-- Item Container -->
@@ -69,6 +69,7 @@
       v-if="editMenuOpen"
       @closeEditSection="closeEditSection"
       :sectionIndex="index"
+      :isAddNew="false"
     />
     <!-- Right-click item options context menu -->
     <ContextMenu

From fb13f84c0e87e038c0e8bff8c3144795256e045f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 29 Oct 2021 23:03:26 +0100
Subject: [PATCH 92/98] :no_mouth: what am i doing with my life...

---
 src/components/Settings/ThemeSelector.vue | 77 +++++++++++++++++------
 1 file changed, 58 insertions(+), 19 deletions(-)

diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index 7cceb2f6d..5c1b7501b 100644
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -5,8 +5,10 @@
     <v-select
       :options="themeNames"
       v-model="selectedTheme"
+      :value="$store.getters.theme"
       class="theme-dropdown"
       :tabindex="-2"
+      @input="themeChanged"
     />
     </div>
     <IconPalette
@@ -36,62 +38,99 @@ import IconPalette from '@/assets/interface-icons/config-color-palette.svg';
 
 export default {
   name: 'ThemeSelector',
-  props: {
-    externalThemes: Object,
-    confTheme: String,
-    userThemes: Array,
-  },
   components: {
     CustomThemeMaker,
     IconPalette,
   },
   watch: {
-    /* When the theme changes, then call the update method */
-    selectedTheme(newTheme) {
+    /* When theme in VueX store changes, then update theme */
+    themeFromStore(newTheme) {
+      this.selectedTheme = newTheme;
       this.updateTheme(newTheme);
     },
   },
   data() {
     return {
-      selectedTheme: this.getInitialTheme(),
-      builtInThemes: [...Defaults.builtInThemes, ...this.userThemes],
-      themeHelper: new LoadExternalTheme(),
+      selectedTheme: '',
       themeConfiguratorOpen: false, // Control the opening of theme config popup
+      themeHelper: new LoadExternalTheme(),
       ApplyLocalTheme,
       ApplyCustomVariables,
     };
   },
   computed: {
+    /* Get appConfig from store */
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    /* Get users theme from store */
+    themeFromStore() {
+      return this.$store.getters.theme;
+    },
     /* Combines all theme names (builtin and user defined) together */
     themeNames: function themeNames() {
       const externalThemeNames = Object.keys(this.externalThemes);
       const specialThemes = ['custom'];
-      return [...externalThemeNames, ...this.builtInThemes, ...specialThemes];
+      return [...externalThemeNames, ...Defaults.builtInThemes, ...specialThemes];
+    },
+    extraThemeNames() {
+      const userThemes = this.appConfig.cssThemes || [];
+      if (typeof userThemes === 'string') return [userThemes];
+      return userThemes;
+    },
+    /* Returns an array of links to external CSS from the Config */
+    externalThemes() {
+      const availibleThemes = {};
+      if (this.appConfig) {
+        if (this.appConfig.externalStyleSheet) {
+          const externals = this.appConfig.externalStyleSheet;
+          if (Array.isArray(externals)) {
+            externals.forEach((ext, i) => {
+              availibleThemes[`External Stylesheet ${i + 1}`] = ext;
+            });
+          } else {
+            availibleThemes['External Stylesheet'] = this.appConfig.externalStyleSheet;
+          }
+        }
+      }
+      availibleThemes.Default = '#';
+      return availibleThemes;
     },
   },
-  created() {
+  mounted() {
+    const initialTheme = this.getInitialTheme();
+    this.selectedTheme = initialTheme;
     // Pass all user custom stylesheets to the themehelper
     const added = Object.keys(this.externalThemes).map(
       name => this.themeHelper.add(name, this.externalThemes[name]),
     );
     // Quicker loading, if the theme is local we can apply it immidiatley
-    if (this.isThemeLocal(this.selectedTheme)) {
-      this.updateTheme(this.selectedTheme);
+    if (this.isThemeLocal(initialTheme)) {
+      this.updateTheme(initialTheme);
     // If it's an external stylesheet, then wait for promise to resolve
-    } else if (this.selectedTheme !== Defaults.theme) {
+    } else if (initialTheme !== Defaults.theme) {
       Promise.all(added).then(() => {
-        this.updateTheme(this.selectedTheme);
+        this.updateTheme(initialTheme);
       });
     }
   },
   methods: {
-    /* Get default theme */
+    /* Called when dropdown changed
+     * Updates store, which will in turn update theme through watcher
+     */
+    themeChanged() {
+      this.$store.commit(Keys.SET_THEME, this.selectedTheme);
+    },
+    /* Returns the initial theme */
     getInitialTheme() {
-      return localStorage[localStorageKeys.THEME] || this.confTheme || Defaults.theme;
+      const localTheme = localStorage[localStorageKeys.THEME];
+      if (localTheme && localTheme !== 'undefined') return localTheme;
+      return this.confTheme || Defaults.theme;
     },
     /* Determines if a given theme is local / not a custom user stylesheet */
     isThemeLocal(themeToCheck) {
-      return this.builtInThemes.includes(themeToCheck);
+      const localThemes = [...Defaults.builtInThemes, ...this.extraThemeNames];
+      return localThemes.includes(themeToCheck);
     },
     /* Opens the theme color configurator popup */
     openThemeConfigurator() {

From 160f72e32a5e83e53fe080e815d1447d3c8d7f96 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 29 Oct 2021 23:03:58 +0100
Subject: [PATCH 93/98] :lipstick: Improved styling variables for config editor

---
 src/styles/color-palette.scss | 13 +++++++++----
 src/styles/color-themes.scss  | 10 +++++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 5de5798d8..71bcc2d50 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -48,18 +48,23 @@
   --item-group-outer-background: var(--primary);
   --item-group-heading-text-color: var(--item-group-background);
   --item-group-heading-text-color-hover: var(--background);
-  // Settings and config
-  --settings-background: var(--background);
+  // Homepage settings
   --settings-text-color: var(--primary);
-  --config-code-background: #fff;
-  --config-code-color: var(--background);
+  --settings-background: var(--background);
+  // Config menu
   --config-settings-color: var(--primary);
   --config-settings-background: var(--background-darker);
+  --config-code-color: var(--background);
+  --config-code-background: #fff;
   --code-editor-color: var(--black);
   --code-editor-background: var(--white);
+  // Interactive editor
   --interactive-editor-color: var(--primary);
   --interactive-editor-background: var(--background);
   --interactive-editor-background-darker: var(--background-darker);
+  // Cloud backup/ restore menu
+  --cloud-backup-color: var(--config-settings-color);
+  --cloud-backup-background: var(--config-settings-background);
   // Search bar (on homepage)
   --search-container-background: var(--background-darker);
   --search-field-background: var(--background);
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index b593b40eb..f535eba8c 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -378,9 +378,6 @@ html[data-theme='material'], html[data-theme='material-dark'] {
     margin: 0;
     padding: 0;
   }
-  .item-wrapper.add-new-item {
-    flex-grow: inherit;
-  }
   /* Custom layout for medium and large icons */
   .item-wrapper .item:not(.size-small) {
     display: flex;
@@ -416,6 +413,13 @@ html[data-theme='material'], html[data-theme='material-dark'] {
       }	
     }
   }
+  .item-wrapper.add-new-item {
+    flex-grow: inherit;
+  }
+  .add-new-item a {
+    flex-grow: inherit;
+    flex-basis: inherit;
+  }
   .tooltip.item-description-tooltip:not(.tooltip-is-small) {
     display: none !important;
   }

From e556445094c56f30a4395755e85df99c264f85cf Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 30 Oct 2021 12:41:50 +0100
Subject: [PATCH 94/98] :globe_with_meridians: Preview changes button, and Add
 section title

---
 src/assets/locales/en.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 6d24c59fe..c4a69b7f1 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -112,6 +112,7 @@
     "location-local-label": "Apply Locally",
     "location-disk-label": "Write Changes to Config File",
     "save-button": "Save Changes",
+    "preview-button": "Preview Changes",
     "valid-label": "Config is Valid",
     "status-success-msg": "Task Complete",
     "status-fail-msg": "Task Failed",
@@ -218,6 +219,7 @@
     },
     "edit-section": {
       "edit-section-title": "Edit Section",
+      "add-section-title": "Add New Section",
       "edit-tooltip": "Click to Edit, or right-click for more options",
       "remove-confirm": "Are you sure you want to remove this section? This action can be undone later."
     },

From 6f3570eed2bdd8db4116637eb82fdbcb7c1d29ac Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 30 Oct 2021 13:22:58 +0100
Subject: [PATCH 95/98] :convenience_store: Adds custom theme options to store

---
 src/components/Settings/CustomThemeMaker.vue | 70 +++++++++++---------
 src/store.js                                 |  7 ++
 src/utils/StoreMutations.js                  |  1 +
 3 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/src/components/Settings/CustomThemeMaker.vue b/src/components/Settings/CustomThemeMaker.vue
index 6230f2c03..7e70daaf7 100644
--- a/src/components/Settings/CustomThemeMaker.vue
+++ b/src/components/Settings/CustomThemeMaker.vue
@@ -2,45 +2,48 @@
   <div :class="`theme-configurator-wrapper ${showingAllVars ? 'showing-all' : ''}`">
     <h3 class="configurator-title">{{ $t('theme-maker.title') }}</h3>
     <div class="color-row-container">
-    <div class="color-row" v-for="colorName in Object.keys(customColors)" :key="colorName">
-      <label :for="`color-input-${colorName}`" class="color-name">
-        {{colorName.replaceAll('-', ' ')}}
-      </label>
-      <v-swatches
-        v-if="isColor(colorName, customColors[colorName])"
-        v-model="customColors[colorName]"
-        show-fallback
-        fallback-input-type="color"
-        popover-x="left"
-        :swatches="swatches"
-        @input="setVariable(colorName, customColors[colorName])"
-      >
-      <input
-        :id="`color-input-${colorName}`"
-        slot="trigger"
-        :value="customColors[colorName]"
-        class="swatch-input form__input__element"
-        readonly
-        :style="makeSwatchStyles(colorName)"
-      />
-      </v-swatches>
-      <input v-else
-        :id="`color-input-${colorName}`"
-        :value="customColors[colorName]"
-        class="misc-input"
-        @input="setVariable(colorName, customColors[colorName])"
-      />
-    </div> <!-- End of color list -->
+      <!-- Show color swatch input for each color -->
+      <div class="color-row" v-for="colorName in Object.keys(customColors)" :key="colorName">
+        <label :for="`color-input-${colorName}`" class="color-name">
+          {{colorName.replaceAll('-', ' ')}}
+        </label>
+        <v-swatches
+          v-if="isColor(colorName, customColors[colorName])"
+          v-model="customColors[colorName]"
+          show-fallback
+          fallback-input-type="color"
+          popover-x="left"
+          :swatches="swatches"
+          @input="setVariable(colorName, customColors[colorName])"
+        >
+          <input
+            :id="`color-input-${colorName}`"
+            slot="trigger"
+            :value="customColors[colorName]"
+            class="swatch-input form__input__element"
+            readonly
+            :style="makeSwatchStyles(colorName)"
+          />
+        </v-swatches>
+        <input v-else
+          :id="`color-input-${colorName}`"
+          :value="customColors[colorName]"
+          class="misc-input"
+          @input="setVariable(colorName, customColors[colorName])"
+        />
+      </div> <!-- End of color list -->
     </div>
+    <!-- More options: Export, Reset, Show all -->
     <p @click="exportToClipboard" class="action-text-btn">
       {{ $t('theme-maker.export-button') }}
     </p>
-    <p @click="resetAndSave" class="action-text-btn show-all-vars-btn">
+    <p @click="resetAndSave" class="action-text-btn">
        {{ $t('theme-maker.reset-button') }} '{{ themeToEdit }}'
     </p>
-    <p @click="findAllVariableNames" class="action-text-btn">
+    <p @click="findAllVariableNames" class="action-text-btn show-all-vars-btn">
        {{ $t('theme-maker.show-all-button') }}
     </p>
+    <!-- Save and cancel buttons -->
     <div class="action-buttons">
       <Button :click="saveChanges">
         <SaveIcon /> {{ $t('theme-maker.save-button') }}
@@ -55,8 +58,8 @@
 <script>
 import VSwatches from 'vue-swatches';
 import 'vue-swatches/dist/vue-swatches.css';
+import StoreKeys from '@/utils/StoreMutations';
 import { localStorageKeys, mainCssVars, swatches } from '@/utils/defaults';
-
 import Button from '@/components/FormElements/Button';
 import SaveIcon from '@/assets/interface-icons/save-config.svg';
 import CancelIcon from '@/assets/interface-icons/config-cancel.svg';
@@ -88,11 +91,12 @@ export default {
     setVariable(variable, value) {
       document.documentElement.style.setProperty(`--${variable}`, value);
     },
-    /* Saves the users omdified variables in local storage */
+    /* Updates browser storage, and srore with new color settings, and shows success msg */
     saveChanges() {
       const priorSettings = JSON.parse(localStorage[localStorageKeys.CUSTOM_COLORS] || '{}');
       priorSettings[this.themeToEdit] = this.customColors;
       localStorage.setItem(localStorageKeys.CUSTOM_COLORS, JSON.stringify(priorSettings));
+      this.$store.commit(StoreKeys.SET_CUSTOM_COLORS, priorSettings);
       this.$toasted.show(this.$t('theme-maker.saved-toast', { theme: this.themeToEdit }));
       this.$emit('closeThemeConfigurator');
     },
diff --git a/src/store.js b/src/store.js
index 85e68e3c3..fa986990c 100644
--- a/src/store.js
+++ b/src/store.js
@@ -18,6 +18,7 @@ const {
   SET_ITEM_LAYOUT,
   SET_ITEM_SIZE,
   SET_THEME,
+  SET_CUSTOM_COLORS,
   UPDATE_ITEM,
   SET_EDIT_MODE,
   SET_PAGE_INFO,
@@ -208,6 +209,12 @@ const store = new Vuex.Store({
       state.config = newConfig;
       InfoHandler('Theme updated', InfoKeys.VISUAL);
     },
+    [SET_CUSTOM_COLORS](state, customColors) {
+      const newConfig = { ...state.config };
+      newConfig.appConfig.customColors = customColors;
+      state.config = newConfig;
+      InfoHandler('Color palette updated', InfoKeys.VISUAL);
+    },
     [SET_ITEM_LAYOUT](state, layout) {
       state.config.appConfig.layout = layout;
     },
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index ebe55f4f2..1bdbbbd29 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -8,6 +8,7 @@ const KEY_NAMES = [
   'SET_ITEM_LAYOUT',
   'SET_ITEM_SIZE',
   'SET_THEME',
+  'SET_CUSTOM_COLORS',
   'UPDATE_ITEM',
   'SET_PAGE_INFO',
   'SET_APP_CONFIG',

From 513b1cd95552466fcf111d1b86243aaefe0f1e06 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 30 Oct 2021 13:23:54 +0100
Subject: [PATCH 96/98] :fire: Remove no-longer needed prop attrs

---
 .../Configuration/ConfigContainer.vue           | 17 ++++++++---------
 src/components/LinkItems/Item.vue               |  2 +-
 src/components/Settings/SettingsContainer.vue   |  3 +--
 src/views/Home.vue                              |  2 +-
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index 3ee00cecf..aa5350312 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -3,7 +3,7 @@
     <TabItem :name="$t('config.main-tab')" class="main-tab">
       <div class="main-options-container">
         <div class="config-buttons">
-          <h2>Configuration Options</h2>
+          <h2>{{ $t('config.heading') }}</h2>
           <a class="hyperlink-wrapper"  @click="openExportConfigModal()">
             <button class="config-button center">
               <DownloadIcon class="button-icon"/>
@@ -52,13 +52,13 @@
       <RebuildApp />
     </TabItem>
     <TabItem :name="$t('config.edit-config-tab')">
-      <JsonEditor :config="config" />
+      <JsonEditor />
     </TabItem>
     <TabItem :name="$t('cloud-sync.title')">
-      <CloudBackupRestore :config="config" />
+      <CloudBackupRestore />
     </TabItem>
     <TabItem :name="$t('config.custom-css-tab')">
-      <CustomCssEditor :config="config" />
+      <CustomCssEditor />
     </TabItem>
   </Tabs>
 </template>
@@ -68,6 +68,7 @@
 import JsonToYaml from '@/utils/JsonToYaml';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 import { getUsersLanguage } from '@/utils/ConfigHelpers';
+import StoreKeys from '@/utils/StoreMutations';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import CustomCssEditor from '@/components/Configuration/CustomCss';
 import CloudBackupRestore from '@/components/Configuration/CloudBackupRestore';
@@ -139,15 +140,13 @@ export default {
     },
     /* Checks that the user is sure, then resets site-wide local storage, and reloads page */
     resetLocalSettings() {
-      const msg = `${this.$t('config.reset-config-msg-l1')
-      }${this.$t('config.reset-config-msg-l2')}\n\n${this.$t('config.reset-config-msg-l3')}`;
+      const msg = `${this.$t('config.reset-config-msg-l1')} `
+      + `${this.$t('config.reset-config-msg-l2')}\n\n${this.$t('config.reset-config-msg-l3')}`;
       const isTheUserSure = confirm(msg); // eslint-disable-line no-alert, no-restricted-globals
       if (isTheUserSure) {
         localStorage.clear();
         this.$toasted.show(this.$t('config.data-cleared-msg'));
-        setTimeout(() => {
-          location.reload(true); // eslint-disable-line no-restricted-globals
-        }, 1900);
+        this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
       }
     },
     getLanguage() {
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 9420d98b1..e9a18a099 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -365,7 +365,7 @@ export default {
     height: 2rem;
   }
   &.add-new {
-    border-style: dashed !important;
+    border: 2px dashed var(--primary) !important;
   }
 }
 
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 93361d002..36f9226ab 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -6,8 +6,7 @@
     />
     <div class="options-outer">
       <div :class="`options-container ${!settingsVisible ? 'hide' : ''}`">
-        <ThemeSelector :externalThemes="externalThemes"
-          :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
+        <ThemeSelector />
         <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
         <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
         <ConfigLauncher />
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ba8b513d5..ef782c04e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -184,7 +184,7 @@ export default {
     findSingleSection: (allSections, sectionTitle) => {
       if (!sectionTitle) return undefined;
       let sectionToReturn;
-      const parse = (section) => section.replace(' ', '-').toLowerCase().trim();
+      const parse = (section) => section.replaceAll(' ', '-').toLowerCase().trim();
       allSections.forEach((section) => {
         if (parse(sectionTitle) === parse(section.name)) {
           sectionToReturn = [section];

From 168e52c251aaac67ae4be6ef0c1bcd077bc5eac9 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 30 Oct 2021 13:45:47 +0100
Subject: [PATCH 97/98] :zap: Item size and layout are now managed by store

---
 src/components/Settings/ItemSizeSelector.vue  |  1 -
 src/components/Settings/LayoutSelector.vue    |  6 ----
 src/components/Settings/SettingsContainer.vue | 10 ++----
 src/store.js                                  |  9 +++++
 src/views/Home.vue                            | 36 ++++++++-----------
 5 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/src/components/Settings/ItemSizeSelector.vue b/src/components/Settings/ItemSizeSelector.vue
index 470a186f3..9143a4656 100644
--- a/src/components/Settings/ItemSizeSelector.vue
+++ b/src/components/Settings/ItemSizeSelector.vue
@@ -47,7 +47,6 @@ export default {
   },
   methods: {
     updateIconSize(iconSize) {
-      this.$emit('iconSizeUpdated', iconSize);
       this.$store.commit(StoreKeys.SET_ITEM_SIZE, iconSize);
     },
     tooltip(content) {
diff --git a/src/components/Settings/LayoutSelector.vue b/src/components/Settings/LayoutSelector.vue
index f7fea7a01..f4c624e50 100644
--- a/src/components/Settings/LayoutSelector.vue
+++ b/src/components/Settings/LayoutSelector.vue
@@ -32,11 +32,6 @@ import IconVertical from '@/assets/interface-icons/layout-vertical.svg';
 
 export default {
   name: 'LayoutSelector',
-  data() {
-    return {
-      input: '',
-    };
-  },
   props: {
     displayLayout: String,
   },
@@ -47,7 +42,6 @@ export default {
   },
   methods: {
     updateDisplayLayout(layout) {
-      this.$emit('layoutUpdated', layout);
       this.$store.commit(StoreKeys.SET_ITEM_LAYOUT, layout);
     },
     tooltip(content) {
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 36f9226ab..dd3834f13 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -7,8 +7,8 @@
     <div class="options-outer">
       <div :class="`options-container ${!settingsVisible ? 'hide' : ''}`">
         <ThemeSelector />
-        <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
-        <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
+        <LayoutSelector :displayLayout="displayLayout" />
+        <ItemSizeSelector :iconSize="iconSize" />
         <ConfigLauncher />
         <AuthButtons  v-if="userState != 'noone'" :userType="userState" />
       </div>
@@ -106,12 +106,6 @@ export default {
     clearFilterInput() {
       this.$refs.SearchBar.clearFilterInput();
     },
-    updateDisplayLayout(layout) {
-      this.$emit('change-display-layout', layout);
-    },
-    updateIconSize(iconSize) {
-      this.$emit('change-icon-size', iconSize);
-    },
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
diff --git a/src/store.js b/src/store.js
index fa986990c..f978bcc5e 100644
--- a/src/store.js
+++ b/src/store.js
@@ -86,6 +86,12 @@ const store = new Vuex.Store({
       });
       return foundSection;
     },
+    layout(state) {
+      return state.config.appConfig.layout || 'auto';
+    },
+    iconSize(state) {
+      return state.config.appConfig.iconSize || 'medium';
+    },
   },
   mutations: {
     [SET_CONFIG](state, config) {
@@ -217,12 +223,15 @@ const store = new Vuex.Store({
     },
     [SET_ITEM_LAYOUT](state, layout) {
       state.config.appConfig.layout = layout;
+      InfoHandler('Layout updated', InfoKeys.VISUAL);
     },
     [SET_ITEM_SIZE](state, iconSize) {
       state.config.appConfig.iconSize = iconSize;
+      InfoHandler('Item size updated', InfoKeys.VISUAL);
     },
     [UPDATE_CUSTOM_CSS](state, customCss) {
       state.config.appConfig.customCss = customCss;
+      InfoHandler('Custom colors updated', InfoKeys.VISUAL);
     },
   },
   actions: {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ef782c04e..bba5b52ba 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,8 +4,6 @@
     <!-- Search bar, layout options and settings -->
     <SettingsContainer ref="filterComp"
       @user-is-searchin="searching"
-      @change-display-layout="setLayoutOrientation"
-      @change-icon-size="setItemSize"
       @change-modal-visibility="updateModalVisibility"
       :displayLayout="layout"
       :iconSize="itemSizeBound"
@@ -120,20 +118,22 @@ export default {
       return sections.filter((section) => this.filterTiles(section.items, this.searchValue));
     },
     /* Updates layout (when button clicked), and saves in local storage */
-    layoutOrientation: {
-      get() { return this.appConfig.layout || Defaults.layout; },
-      set: function setLayout(layout) {
-        localStorage.setItem(localStorageKeys.LAYOUT_ORIENTATION, layout);
-        this.layout = layout;
-      },
+    layoutOrientation() {
+      return this.$store.getters.layout;
     },
     /* Updates icon size (when button clicked), and saves in local storage */
-    iconSize: {
-      get() { return this.appConfig.iconSize || Defaults.iconSize; },
-      set: function setIconSize(iconSize) {
-        localStorage.setItem(localStorageKeys.ICON_SIZE, iconSize);
-        this.itemSizeBound = iconSize;
-      },
+    iconSize() {
+      return this.$store.getters.iconSize;
+    },
+  },
+  watch: {
+    layoutOrientation(layout) {
+      localStorage.setItem(localStorageKeys.LAYOUT_ORIENTATION, layout);
+      this.layout = layout;
+    },
+    iconSize(size) {
+      localStorage.setItem(localStorageKeys.ICON_SIZE, size);
+      this.itemSizeBound = size;
     },
   },
   methods: {
@@ -158,14 +158,6 @@ export default {
     getDisplayData(section) {
       return !section.displayData ? {} : section.displayData;
     },
-    /* Sets layout attribute, which is used by Section */
-    setLayoutOrientation(layout) {
-      this.layoutOrientation = layout;
-    },
-    /* Sets item size attribute, which is used by Section */
-    setItemSize(itemSize) {
-      this.iconSize = itemSize;
-    },
     /* Update data when modal is open (so that key bindings can be disabled) */
     updateModalVisibility(modalState) {
       this.$store.commit('SET_MODAL_OPEN', modalState);

From 785695b7f58c6302189cf59a4c9550a728d7f825 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 30 Oct 2021 13:59:56 +0100
Subject: [PATCH 98/98] :zap: Updates method of getting initial theme

---
 src/components/Settings/ThemeSelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index 5c1b7501b..10fb8db16 100644
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -125,7 +125,7 @@ export default {
     getInitialTheme() {
       const localTheme = localStorage[localStorageKeys.THEME];
       if (localTheme && localTheme !== 'undefined') return localTheme;
-      return this.confTheme || Defaults.theme;
+      return this.appConfig.theme || Defaults.theme;
     },
     /* Determines if a given theme is local / not a custom user stylesheet */
     isThemeLocal(themeToCheck) {