From 6a4146eb4c837eea1808b1496894b6b26c8cbdbd Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 3 Oct 2021 22:41:30 +0100
Subject: [PATCH 01/20] :building_construction: Ignore 429 status codes in
 link-checker action

---
 .github/workflows/docs-link-checker.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/docs-link-checker.yml b/.github/workflows/docs-link-checker.yml
index 023bc5a9..527b5af9 100644
--- a/.github/workflows/docs-link-checker.yml
+++ b/.github/workflows/docs-link-checker.yml
@@ -4,7 +4,7 @@ on:
   repository_dispatch:
   workflow_dispatch:
   schedule:
-    - cron: '0 1 * * 0' # At 01:00 on Sunday.
+    - cron: '0 1 1 * *' # Run monthly
 jobs:
   link-checker:
     runs-on: ubuntu-latest
@@ -14,7 +14,7 @@ jobs:
       - name: Check for Broken Links
         uses: lycheeverse/lychee-action@v1.0.8
         with:
-          args: --verbose --no-progress **/*.md **/*.html
+          args: --verbose -a 200,302,304,429 --no-progress **/*.md **/*.html
         env:
           GITHUB_TOKEN: ${{secrets.BOT_GITHUB_TOKEN}}
           LYCHEE_OUT: .github/broken-link-report.md

From 362db365bbde2c90cbfe9f68177252e7a652efa5 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 3 Oct 2021 22:42:40 +0100
Subject: [PATCH 02/20] =?UTF-8?q?=E2=9E=95=20Adds=20VueX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 5 +++--
 yarn.lock    | 5 +++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index dfa86226..cbbf243f 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,8 @@
     "vue-router": "^3.0.3",
     "vue-select": "^3.12.1",
     "vue-swatches": "^2.1.1",
-    "vue-toasted": "^1.1.28"
+    "vue-toasted": "^1.1.28",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@architect/sandbox": "^3.7.4",
@@ -92,4 +93,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index edca2bb2..fbd2289f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9866,6 +9866,11 @@ vue@^2.6.10:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==
 
+vuex@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"

From 41682c8914e0a517825fccb1faa17463d0a84474 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 5 Oct 2021 20:24:51 +0100
Subject: [PATCH 03/20] :sparkles: Implementing VueX

---
 src/main.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index a5d4c764..cae12b4f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,6 +14,7 @@ import Toasted from 'vue-toasted';      // Toast component, used to show confirm
 // Import base Dashy components and utils
 import Dashy from '@/App.vue';          // Main Dashy Vue app
 import router from '@/router';          // Router, for navigation
+import store from '@/store';            // Store, for local state management
 import serviceWorker from '@/utils/InitServiceWorker'; // Service worker initialization
 import clickOutside from '@/utils/ClickOutside';      // Directive for closing popups, modals, etc
 import { messages } from '@/utils/languages';         // Language texts
@@ -63,7 +64,9 @@ if (!isKeycloakEnabled()) {
       window.location.reload();
     } else {
       // Yay - user successfully authenticated with Keycloak, render the app!
-      new Vue({ router, render, i18n }).$mount('#app');
+      new Vue({
+        router, store, render, i18n,
+      }).$mount('#app');
     }
   });
 }

From 2946412b4c7da84583575cf4d7e1b737c55dc121 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Tue, 5 Oct 2021 20:25:10 +0100
Subject: [PATCH 04/20] :construction: WIP, working on VueX store

---
 src/store.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/store.js

diff --git a/src/store.js b/src/store.js
new file mode 100644
index 00000000..1ee854ac
--- /dev/null
+++ b/src/store.js
@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  state: {
+    count: 0,
+  },
+  mutations: {
+    increment(state) {
+      state.count++;
+    },
+  },
+});
+
+export default store;

From c2e70dc07e83fd5df548adbed186a4b114a1647a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 9 Oct 2021 18:30:47 +0100
Subject: [PATCH 05/20] :zap: Adds VueX store into main Vue entry point

---
 src/main.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/main.js b/src/main.js
index cae12b4f..280aad5c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -49,9 +49,14 @@ ErrorReporting(Vue, router);
 // Render function
 const render = (awesome) => awesome(Dashy);
 
+// Mount the app, with router, store i18n and render func
+const mount = () => new Vue({
+  router, render, i18n, store,
+}).$mount('#app');
+
 // If Keycloak not enabled, then proceed straight to the app
 if (!isKeycloakEnabled()) {
-  new Vue({ router, render, i18n }).$mount('#app');
+  mount();
 } else { // Keycloak is enabled, redirect to KC login page
   const { serverUrl, realm, clientId } = getKeycloakConfig();
   const initOptions = {
@@ -64,9 +69,7 @@ if (!isKeycloakEnabled()) {
       window.location.reload();
     } else {
       // Yay - user successfully authenticated with Keycloak, render the app!
-      new Vue({
-        router, store, render, i18n,
-      }).$mount('#app');
+      mount();
     }
   });
 }

From 8a8166bb47db03652e7c994e1d562467a3a0c875 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 9 Oct 2021 18:31:10 +0100
Subject: [PATCH 06/20] :zap: Implements a very very basic config store

---
 src/App.vue                 | 26 ++++++++++++++++++++------
 src/store.js                | 35 +++++++++++++++++++++++++++++++----
 src/utils/StoreMutations.js |  9 +++++++++
 3 files changed, 60 insertions(+), 10 deletions(-)
 create mode 100644 src/utils/StoreMutations.js

diff --git a/src/App.vue b/src/App.vue
index cb34b125..cd30bed1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
 import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
-import { componentVisibility } from '@/utils/ConfigHelpers';
+// import { componentVisibility } from '@/utils/ConfigHelpers';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import { welcomeMsg } from '@/utils/CoolConsole';
 import ErrorHandler from '@/utils/ErrorHandler';
@@ -23,8 +23,9 @@ import {
 } from '@/utils/defaults';
 
 const Accumulator = new ConfigAccumulator();
-const config = Accumulator.config();
-const visibleComponents = componentVisibility(config.appConfig) || defaultVisibleComponents;
+const config2 = Accumulator.config();
+// const visibleComponents = componentVisibility(config.appConfig) || defaultVisibleComponents;
+const visibleComponents = defaultVisibleComponents;
 
 export default {
   name: 'app',
@@ -34,15 +35,13 @@ export default {
     LoadingScreen,
   },
   provide: {
-    config,
+    config: config2,
     visibleComponents,
   },
   data() {
     return {
       isLoading: true, // Set to false after mount complete
       showFooter: visibleComponents.footer,
-      appConfig: Accumulator.appConfig(),
-      pageInfo: Accumulator.pageInfo(),
       visibleComponents,
     };
   },
@@ -55,6 +54,21 @@ export default {
     shouldShowSplash() {
       return (this.visibleComponents || defaultVisibleComponents).splashScreen;
     },
+    config() {
+      return this.$store.state.config;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
+    sections() {
+      return this.$store.getters.pageInfo;
+    },
+  },
+  created() {
+    this.$store.dispatch('initializeConfig');
   },
   methods: {
     /* Injects the users custom CSS as a style tag */
diff --git a/src/store.js b/src/store.js
index 1ee854ac..880207e2 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,17 +1,44 @@
+/* eslint-disable no-param-reassign */
 import Vue from 'vue';
 import Vuex from 'vuex';
+import Keys from '@/utils/StoreMutations';
+import ConfigAccumulator from '@/utils/ConfigAccumalator';
 
 Vue.use(Vuex);
 
+const { UPDATE_CONFIG } = Keys;
+
 const store = new Vuex.Store({
   state: {
-    count: 0,
+    config: {},
   },
-  mutations: {
-    increment(state) {
-      state.count++;
+  getters: {
+    config(state) {
+      return state.config;
+    },
+    pageInfo(state) {
+      return state.config.pageInfo || {};
+    },
+    appConfig(state) {
+      return state.config.appConfig || {};
+    },
+    sections(state) {
+      return state.config.sections || [];
     },
   },
+  mutations: {
+    [UPDATE_CONFIG](state, config) {
+      state.config = config;
+    },
+  },
+  actions: {
+    initializeConfig({ commit }) {
+      const Accumulator = new ConfigAccumulator();
+      const config = Accumulator.config();
+      commit(UPDATE_CONFIG, config);
+    },
+  },
+  modules: {},
 });
 
 export default store;
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
new file mode 100644
index 00000000..1348ca81
--- /dev/null
+++ b/src/utils/StoreMutations.js
@@ -0,0 +1,9 @@
+// A list of mutation names
+const KEY_NAMES = [
+  'UPDATE_CONFIG',
+];
+
+// Convert array of key names into an object, and export
+const MUTATIONS = {};
+KEY_NAMES.forEach((key) => { MUTATIONS[key] = key; });
+export default MUTATIONS;

From b55f96c839391951a713ecba5136e918f96efc19 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 9 Oct 2021 19:24:51 +0100
Subject: [PATCH 07/20] :zap: Remove all instances of inject, replace with VueX
 store

---
 src/components/Configuration/AppVersion.vue   |  9 ++--
 src/components/Configuration/RebuildApp.vue   | 14 +++---
 src/components/LinkItems/ContextMenu.vue      | 16 +++----
 src/components/LinkItems/Item.vue             |  8 +++-
 src/components/LinkItems/ItemIcon.vue         |  9 ++--
 src/components/LinkItems/Section.vue          | 10 +++--
 src/components/MinimalView/MinimalSearch.vue  | 12 +++---
 src/components/MinimalView/MinimalSection.vue | 10 +++--
 src/components/PageStrcture/Header.vue        | 21 ++++-----
 src/components/Settings/LanguageSwitcher.vue  |  7 ++-
 src/components/Settings/SearchBar.vue         |  3 +-
 src/components/Settings/SettingsContainer.vue | 43 ++++++++++---------
 src/components/Workspace/SideBar.vue          |  1 -
 src/components/Workspace/SideBarItem.vue      |  1 -
 src/components/Workspace/SideBarSection.vue   |  1 -
 src/store.js                                  |  7 +++
 16 files changed, 97 insertions(+), 75 deletions(-)

diff --git a/src/components/Configuration/AppVersion.vue b/src/components/Configuration/AppVersion.vue
index 973cbb4f..c0c8f0de 100644
--- a/src/components/Configuration/AppVersion.vue
+++ b/src/components/Configuration/AppVersion.vue
@@ -36,7 +36,11 @@ import ErrorHandler from '@/utils/ErrorHandler';
 
 export default {
   name: 'AppInfoModal',
-  inject: ['config'],
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+  },
   data() {
     return {
       appVersion: process.env.VUE_APP_VERSION, // Current version, from package.json
@@ -50,8 +54,7 @@ export default {
     };
   },
   mounted() {
-    const appConfig = this.config.appConfig || {};
-    if (!this.appVersion || (appConfig && appConfig.disableUpdateChecks)) {
+    if (!this.appVersion || (this.appConfig && this.appConfig.disableUpdateChecks)) {
       // Either current version isn't found, or user disabled checks
       this.checksEnabled = false;
     } else {
diff --git a/src/components/Configuration/RebuildApp.vue b/src/components/Configuration/RebuildApp.vue
index 5bcefdf0..725ee091 100644
--- a/src/components/Configuration/RebuildApp.vue
+++ b/src/components/Configuration/RebuildApp.vue
@@ -55,7 +55,11 @@ import { modalNames, serviceEndpoints } from '@/utils/defaults';
 
 export default {
   name: 'RebuildApp',
-  inject: ['config'],
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+  },
   components: {
     Button,
     RebuildIcon,
@@ -112,12 +116,8 @@ export default {
     },
   },
   mounted() {
-    if (this.config) {
-      if (this.config.appConfig) {
-        if (this.config.appConfig.allowConfigEdit === false) {
-          this.allowRebuild = false;
-        }
-      }
+    if (this.appConfig.allowConfigEdit === false) {
+      this.allowRebuild = false;
     }
   },
 };
diff --git a/src/components/LinkItems/ContextMenu.vue b/src/components/LinkItems/ContextMenu.vue
index 68349c24..4d66e2e3 100644
--- a/src/components/LinkItems/ContextMenu.vue
+++ b/src/components/LinkItems/ContextMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="slide">
-    <div class="context-menu" v-if="show && menuEnabled"
+    <div class="context-menu" v-if="show && !isMenuDisabled()"
       :style="posX && posY ? `top:${posY}px;left:${posX}px;` : ''">
       <ul>
         <li @click="launch('sametab')">
@@ -33,7 +33,6 @@ import WorkspaceOpenIcon from '@/assets/interface-icons/open-workspace.svg';
 
 export default {
   name: 'ContextMenu',
-  inject: ['config'],
   components: {
     SameTabOpenIcon,
     NewTabOpenIcon,
@@ -45,10 +44,10 @@ export default {
     posY: Number, // The Y coordinate for positioning
     show: Boolean, // Should show or hide the menu
   },
-  data() {
-    return {
-      menuEnabled: !this.isMenuDisabled(), // Specifies if the context menu should be used
-    };
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
   },
   methods: {
     /* Called on item click, emits an event up to Item */
@@ -58,10 +57,7 @@ export default {
     },
     /* Checks if the user as disabled context menu in config */
     isMenuDisabled() {
-      if (this.config && this.config.appConfig) {
-        return !!this.config.appConfig.disableContextMenu;
-      }
-      return false;
+      return !!this.appConfig.disableContextMenu;
     },
   },
 };
diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 7b5e2fd0..3ce80502 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -53,7 +53,6 @@ import { localStorageKeys, serviceEndpoints } from '@/utils/defaults';
 
 export default {
   name: 'Item',
-  inject: ['config'],
   props: {
     id: String, // The unique ID of a tile (e.g. 001)
     title: String, // The main text of tile, required
@@ -77,6 +76,11 @@ export default {
     statusCheckInterval: Number,
     statusCheckAllowInsecure: Boolean,
   },
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+  },
   data() {
     return {
       contextMenuOpen: false,
@@ -110,7 +114,7 @@ export default {
         this.$emit('itemClicked');
       }
       // Update the most/ last used ledger, for smart-sorting
-      if (!this.config.appConfig.disableSmartSort) {
+      if (!this.appConfig.disableSmartSort) {
         this.incrementMostUsedCount(this.id);
         this.incrementLastUsedCount(this.id);
       }
diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
index 3a8d12cc..f3c296e0 100644
--- a/src/components/LinkItems/ItemIcon.vue
+++ b/src/components/LinkItems/ItemIcon.vue
@@ -30,7 +30,6 @@ import { asciiHash } from '@/utils/MiscHelpers';
 
 export default {
   name: 'Icon',
-  inject: ['config'],
   props: {
     icon: String, // Path to icon asset
     url: String, // Used for fetching the favicon
@@ -40,6 +39,10 @@ export default {
     BrokenImage,
   },
   computed: {
+    /* Get appConfig from store */
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     /* Determines the type of icon */
     iconType: function iconType() {
       return this.determineImageType(this.icon);
@@ -96,7 +99,7 @@ export default {
         if (urlParts.length >= 2) return `${urlParts[0]}/${urlParts[1]}/${urlParts[2]}/${iconCdns.faviconName}`;
       } else if (fullUrl.includes('http')) { // Service is running publicly
         const host = this.getHostName(fullUrl);
-        const faviconApi = specificApi || this.config.appConfig.faviconApi || defaultFaviconApi;
+        const faviconApi = specificApi || this.appConfig.faviconApi || defaultFaviconApi;
         const endpoint = faviconApiEndpoints[faviconApi];
         return endpoint.replace('$URL', host);
       }
@@ -120,7 +123,7 @@ export default {
     /* or if user prefers local favicon, then return true */
     shouldUseDefaultFavicon(fullUrl) {
       const isLocalIP = /(127\.)|(192\.168\.)|(10\.)|(172\.1[6-9]\.)|(172\.2[0-9]\.)|(172\.3[0-1]\.)|(::1$)|([fF][cCdD])|(localhost)/;
-      return (isLocalIP.test(fullUrl) || this.config.appConfig.faviconApi === 'local');
+      return (isLocalIP.test(fullUrl) || this.appConfig.faviconApi === 'local');
     },
     /* Fetches the path of local images, from Docker container */
     getLocalImagePath(img) {
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index 7ec2831c..effabb52 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -58,7 +58,6 @@ import IframeModal from '@/components/LinkItems/IframeModal.vue';
 
 export default {
   name: 'Section',
-  inject: ['config'],
   props: {
     groupId: String,
     title: String,
@@ -74,13 +73,16 @@ export default {
     IframeModal,
   },
   computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     sortOrder() {
       return this.displayData.sortBy || defaultSortOrder;
     },
     /* If the sortBy attribute is specified, then return sorted data */
     sortedItems() {
       let { items } = this;
-      if (this.config.appConfig.disableSmartSort) return items;
+      if (this.appConfig.disableSmartSort) return items;
       if (this.sortOrder === 'alphabetical') {
         this.sortAlphabetically(items);
       } else if (this.sortOrder === 'reverse-alphabetical') {
@@ -128,12 +130,12 @@ export default {
     },
     /* Determines if user has enabled online status checks */
     shouldEnableStatusCheck(itemPreference) {
-      const globalPreference = this.config.appConfig.statusCheck || false;
+      const globalPreference = this.appConfig.statusCheck || false;
       return itemPreference !== undefined ? itemPreference : globalPreference;
     },
     /* Determine how often to re-fire status checks */
     getStatusCheckInterval() {
-      let interval = this.config.appConfig.statusCheckInterval;
+      let interval = this.appConfig.statusCheckInterval;
       if (!interval) return 0;
       if (interval > 60) interval = 60;
       if (interval < 1) interval = 0;
diff --git a/src/components/MinimalView/MinimalSearch.vue b/src/components/MinimalView/MinimalSearch.vue
index 74c8311b..729c27e2 100644
--- a/src/components/MinimalView/MinimalSearch.vue
+++ b/src/components/MinimalView/MinimalSearch.vue
@@ -35,7 +35,6 @@ import {
 
 export default {
   name: 'MinimalSearch',
-  inject: ['config'],
   props: {
     active: Boolean,
   },
@@ -47,10 +46,12 @@ export default {
     };
   },
   computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     webSearchEnabled() {
-      const { appConfig } = this.config;
-      if (appConfig && appConfig.webSearch) {
-        return !appConfig.webSearch.disableWebSearch;
+      if (this.appConfig && this.appConfig.webSearch) {
+        return !this.appConfig.webSearch.disableWebSearch;
       }
       return true;
     },
@@ -117,8 +118,7 @@ export default {
     /* If web search enabled, then launch search results when enter is pressed */
     searchSubmitted() {
       // Get search preferences from appConfig
-      const { appConfig } = this.config;
-      const searchPrefs = appConfig.webSearch || {};
+      const searchPrefs = this.appConfig.webSearch || {};
       if (this.webSearchEnabled) { // Only proceed if user hasn't disabled web search
         const openingMethod = searchPrefs.openingMethod || defaultSearchOpeningMethod;
         // Get search engine, and make URL
diff --git a/src/components/MinimalView/MinimalSection.vue b/src/components/MinimalView/MinimalSection.vue
index d4d3aac7..a42879a2 100644
--- a/src/components/MinimalView/MinimalSection.vue
+++ b/src/components/MinimalView/MinimalSection.vue
@@ -37,7 +37,6 @@ import IframeModal from '@/components/LinkItems/IframeModal.vue';
 
 export default {
   name: 'ItemGroup',
-  inject: ['config'],
   props: {
     groupId: String,
     title: String,
@@ -50,6 +49,11 @@ export default {
     selected: Boolean,
     showAll: Boolean,
   },
+  computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+  },
   components: {
     Item,
     IframeModal,
@@ -70,11 +74,11 @@ export default {
       this.$emit('change-modal-visibility', changedTo);
     },
     shouldEnableStatusCheck(itemPreference) {
-      const globalPreference = this.config.appConfig.statusCheck || false;
+      const globalPreference = this.appConfig.statusCheck || false;
       return itemPreference !== undefined ? itemPreference : globalPreference;
     },
     getStatusCheckInterval() {
-      let interval = this.config.appConfig.statusCheckInterval;
+      let interval = this.appConfig.statusCheckInterval;
       if (!interval) return 0;
       if (interval > 60) interval = 60;
       if (interval < 1) interval = 0;
diff --git a/src/components/PageStrcture/Header.vue b/src/components/PageStrcture/Header.vue
index 6fb4679e..d17a41f4 100644
--- a/src/components/PageStrcture/Header.vue
+++ b/src/components/PageStrcture/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <header v-if="visible">
+    <header v-if="componentVisible">
       <PageTitle
         v-if="titleVisible"
         :title="pageInfo.title"
@@ -13,12 +13,10 @@
 <script>
 import PageTitle from '@/components/PageStrcture/PageTitle.vue';
 import Nav from '@/components/PageStrcture/Nav.vue';
-import { visibleComponents as defaultVisibleComponents } from '@/utils/defaults';
 import { shouldBeVisible } from '@/utils/MiscHelpers';
 
 export default {
   name: 'Header',
-  inject: ['visibleComponents'],
   components: {
     PageTitle,
     Nav,
@@ -26,16 +24,19 @@ export default {
   props: {
     pageInfo: Object,
   },
-  data() {
-    return {
-      titleVisible: (this.visibleComponents || defaultVisibleComponents).pageTitle,
-      navVisible: (this.visibleComponents || defaultVisibleComponents).navigation,
-    };
-  },
   computed: {
-    visible() {
+    componentVisible() {
       return shouldBeVisible(this.$route.name);
     },
+    visibleComponents() {
+      return this.$store.getters.visibleComponents;
+    },
+    titleVisible() {
+      return this.visibleComponents.pageTitle;
+    },
+    navVisible() {
+      return this.visibleComponents.navigation;
+    },
   },
 };
 </script>
diff --git a/src/components/Settings/LanguageSwitcher.vue b/src/components/Settings/LanguageSwitcher.vue
index 5944301f..26925772 100644
--- a/src/components/Settings/LanguageSwitcher.vue
+++ b/src/components/Settings/LanguageSwitcher.vue
@@ -33,7 +33,6 @@ import { localStorageKeys, modalNames } from '@/utils/defaults';
 
 export default {
   name: 'LanguageSwitcher',
-  inject: ['config'],
   components: {
     Button,
     SaveConfigIcon,
@@ -45,6 +44,10 @@ export default {
     };
   },
   computed: {
+    /* Get appConfig from store */
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     /* Return the array of language objects, plus a friends name */
     languageList: () => languages.map((lang) => {
       const newLang = lang;
@@ -85,7 +88,7 @@ export default {
     /* Gets the users current language from local storage */
     getCurrentLanguage() {
       const getLanguageFromIso = (iso) => languages.find((lang) => lang.code === iso);
-      const current = localStorage[localStorageKeys.LANGUAGE] || this.config.appConfig.language;
+      const current = localStorage[localStorageKeys.LANGUAGE] || this.appConfig.language;
       return getLanguageFromIso(current);
     },
   },
diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue
index 6174f9a7..d084ce47 100644
--- a/src/components/Settings/SearchBar.vue
+++ b/src/components/Settings/SearchBar.vue
@@ -35,7 +35,6 @@ import {
 
 export default {
   name: 'FilterTile',
-  inject: ['config'],
   props: {
     active: Boolean,
   },
@@ -48,7 +47,7 @@ export default {
   },
   computed: {
     searchPrefs() {
-      return this.config.appConfig.webSearch || {};
+      return this.$store.getters.webSearch || {};
     },
   },
   mounted() {
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 0024ad6c..57a21b70 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -69,7 +69,29 @@ export default {
     IconOpen,
     IconClose,
   },
-  inject: ['visibleComponents'],
+  computed: {
+    /**
+    * Determines which button should display, based on the user type
+    * 0 = Auth not configured, don't show anything
+    * 1 = Auth condifured, and user logged in, show logout button
+    * 2 = Auth configured, guest access enabled, and not logged in, show login
+    * Note that if auth is enabled, but not guest access, and user not logged in,
+    * then they will never be able to view the homepage, so no button needed
+    */
+    userState() {
+      return getUserState();
+    },
+    /* Object indicating which components should be hidden, based on user preferences */
+    visibleComponents() {
+      return this.$store.getters.visibleComponents;
+    },
+  },
+  data() {
+    return {
+      settingsVisible: this.getSettingsVisibility(),
+      searchVisible: (this.visibleComponents || defaultVisibleComponents).searchBar,
+    };
+  },
   methods: {
     userIsTypingSomething(something) {
       this.$emit('user-is-searchin', something);
@@ -104,25 +126,6 @@ export default {
         || (this.visibleComponents || defaultVisibleComponents).settings);
     },
   },
-  computed: {
-    /**
-    * Determines which button should display, based on the user type
-    * 0 = Auth not configured, don't show anything
-    * 1 = Auth condifured, and user logged in, show logout button
-    * 2 = Auth configured, guest access enabled, and not logged in, show login
-    * Note that if auth is enabled, but not guest access, and user not logged in,
-    * then they will never be able to view the homepage, so no button needed
-    */
-    userState() {
-      return getUserState();
-    },
-  },
-  data() {
-    return {
-      settingsVisible: this.getSettingsVisibility(),
-      searchVisible: (this.visibleComponents || defaultVisibleComponents).searchBar,
-    };
-  },
 };
 </script>
 
diff --git a/src/components/Workspace/SideBar.vue b/src/components/Workspace/SideBar.vue
index 0c8fa5a4..cc81fa3b 100644
--- a/src/components/Workspace/SideBar.vue
+++ b/src/components/Workspace/SideBar.vue
@@ -36,7 +36,6 @@ import IconMinimalView from '@/assets/interface-icons/application-minimal.svg';
 
 export default {
   name: 'SideBar',
-  inject: ['config'],
   props: {
     sections: Array,
     initUrl: String,
diff --git a/src/components/Workspace/SideBarItem.vue b/src/components/Workspace/SideBarItem.vue
index da5508c6..90319afe 100644
--- a/src/components/Workspace/SideBarItem.vue
+++ b/src/components/Workspace/SideBarItem.vue
@@ -12,7 +12,6 @@ import Icon from '@/components/LinkItems/ItemIcon.vue';
 
 export default {
   name: 'SideBarItem',
-  inject: ['config'],
   props: {
     icon: String,
     title: String,
diff --git a/src/components/Workspace/SideBarSection.vue b/src/components/Workspace/SideBarSection.vue
index e2f8f8ff..778a6cff 100644
--- a/src/components/Workspace/SideBarSection.vue
+++ b/src/components/Workspace/SideBarSection.vue
@@ -19,7 +19,6 @@ import SideBarItem from '@/components/Workspace/SideBarItem.vue';
 
 export default {
   name: 'SideBarSection',
-  inject: ['config'],
   props: {
     items: Array,
   },
diff --git a/src/store.js b/src/store.js
index 880207e2..2229c6ce 100644
--- a/src/store.js
+++ b/src/store.js
@@ -3,6 +3,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import Keys from '@/utils/StoreMutations';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
+import { componentVisibility } from '@/utils/ConfigHelpers';
 
 Vue.use(Vuex);
 
@@ -25,6 +26,12 @@ const store = new Vuex.Store({
     sections(state) {
       return state.config.sections || [];
     },
+    webSearch(state, getters) {
+      return getters.appConfig.webSearch || {};
+    },
+    visibleComponents(state, getters) {
+      return componentVisibility(getters.appConfig);
+    },
   },
   mutations: {
     [UPDATE_CONFIG](state, config) {

From 5e6f78e6e752c52e373e49098931d43142bd7ab8 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 9 Oct 2021 19:28:36 +0100
Subject: [PATCH 08/20] :fire: Removes provides from App.vue, replaced with
 Store

---
 src/App.vue | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index cd30bed1..014a0652 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,8 +11,6 @@
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
 import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
-// import { componentVisibility } from '@/utils/ConfigHelpers';
-import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import { welcomeMsg } from '@/utils/CoolConsole';
 import ErrorHandler from '@/utils/ErrorHandler';
 import {
@@ -22,11 +20,6 @@ import {
   language as defaultLanguage,
 } from '@/utils/defaults';
 
-const Accumulator = new ConfigAccumulator();
-const config2 = Accumulator.config();
-// const visibleComponents = componentVisibility(config.appConfig) || defaultVisibleComponents;
-const visibleComponents = defaultVisibleComponents;
-
 export default {
   name: 'app',
   components: {
@@ -34,15 +27,9 @@ export default {
     Footer,
     LoadingScreen,
   },
-  provide: {
-    config: config2,
-    visibleComponents,
-  },
   data() {
     return {
       isLoading: true, // Set to false after mount complete
-      showFooter: visibleComponents.footer,
-      visibleComponents,
     };
   },
   computed: {
@@ -66,6 +53,9 @@ export default {
     sections() {
       return this.$store.getters.pageInfo;
     },
+    visibleComponents() {
+      return this.$store.getters.visibleComponents;
+    },
   },
   created() {
     this.$store.dispatch('initializeConfig');

From 0e5eca1b7bc1594025c8e061c9ee7be6f9d74e5f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 9 Oct 2021 19:42:51 +0100
Subject: [PATCH 09/20] :fire: Use VueX store instead of props for router

---
 src/components/Settings/ConfigLauncher.vue    | 14 ++++++++++----
 src/components/Settings/SettingsContainer.vue |  3 +--
 src/router.js                                 |  8 --------
 src/views/DownloadConfig.vue                  | 13 ++++---------
 src/views/Home.vue                            | 14 +++++++++-----
 src/views/Login.vue                           |  6 +++---
 src/views/Minimal.vue                         | 19 ++++++++++++-------
 src/views/Workspace.vue                       | 10 ++++++----
 8 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 796c05e0..152119fc 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -71,10 +71,16 @@ export default {
     IconWorkspaceView,
     IconMinimalView,
   },
-  props: {
-    sections: Array,
-    pageInfo: Object,
-    appConfig: Object,
+  computed: {
+    sections() {
+      return this.$store.getters.sections;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
   },
   methods: {
     showEditor: function show() {
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 57a21b70..2d148a38 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -11,8 +11,7 @@
           :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
         <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
         <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-        <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
-          @modalChanged="modalChanged" />
+        <ConfigLauncher @modalChanged="modalChanged" />
         <AuthButtons  v-if="userState != 'noone'" :userType="userState" />
       </div>
       <div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
diff --git a/src/router.js b/src/router.js
index e76efe42..a41918e9 100644
--- a/src/router.js
+++ b/src/router.js
@@ -62,37 +62,30 @@ const router = new Router({
       path: '/',
       name: `landing-page-${getStartingView()}`,
       component: getStartingComponent(),
-      props: config,
       meta: makeMetaTags('Home Page'),
     },
     { // Default home page
       path: routePaths.home,
       name: 'home',
       component: Home,
-      props: config,
       meta: makeMetaTags('Home Page'),
     },
     { // Workspace view page
       path: routePaths.workspace,
       name: 'workspace',
       component: Workspace,
-      props: config,
       meta: makeMetaTags('Workspace'),
     },
     { // Minimal view page
       path: routePaths.minimal,
       name: 'minimal',
       component: Minimal,
-      props: config,
       meta: makeMetaTags('Start Page'),
     },
     { // The login page
       path: routePaths.login,
       name: 'login',
       component: Login,
-      props: {
-        appConfig: config.appConfig,
-      },
       beforeEnter: (to, from, next) => {
         // If the user already logged in + guest mode not enabled, then redirect home
         if (isAuthenticated() && !isGuestAccessEnabled()) router.push({ path: '/' });
@@ -109,7 +102,6 @@ const router = new Router({
       path: routePaths.download,
       name: 'download',
       component: () => import('./views/DownloadConfig.vue'),
-      props: config,
       meta: makeMetaTags('Download Config'),
     },
     { // Page not found, any non-defined routes will land here
diff --git a/src/views/DownloadConfig.vue b/src/views/DownloadConfig.vue
index 9a695052..ef3bf58c 100644
--- a/src/views/DownloadConfig.vue
+++ b/src/views/DownloadConfig.vue
@@ -7,18 +7,13 @@ import JsonToYaml from '@/utils/JsonToYaml';
 
 export default {
   name: 'DownloadConfig',
-  props: {
-    sections: Array,
-    appConfig: Object,
-    pageInfo: Object,
+  computed: {
+    config() {
+      return this.$store.state.config;
+    },
   },
   data() {
     return {
-      config: {
-        appConfig: this.appConfig,
-        pageInfo: this.pageInfo,
-        sections: this.sections,
-      },
       jsonParser: JsonToYaml,
     };
   },
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6c36bb2f..c73c11e4 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -55,11 +55,6 @@ import Defaults, { localStorageKeys, iconCdns } from '@/utils/defaults';
 
 export default {
   name: 'home',
-  props: {
-    sections: Array, // Main site content
-    appConfig: Object, // Main site configuation (optional)
-    pageInfo: Object, // Page metadata (optional)
-  },
   components: {
     SettingsContainer,
     Section,
@@ -71,6 +66,15 @@ export default {
     modalOpen: false, // When true, keybindings are disabled
   }),
   computed: {
+    sections() {
+      return this.$store.getters.sections;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
     /* Get class for num columns, if specified by user */
     colCount() {
       let { colCount } = this.appConfig;
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 27030208..cea52489 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -91,9 +91,6 @@ export default {
     Button,
     Input,
   },
-  props: {
-    appConfig: Object,
-  },
   data() {
     return {
       username: '',
@@ -104,6 +101,9 @@ export default {
     };
   },
   computed: {
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     /* Data for timeout dropdown menu, translated label + value in ms */
     dropDownMenu() {
       return [
diff --git a/src/views/Minimal.vue b/src/views/Minimal.vue
index cf2b9aa9..95e6b101 100644
--- a/src/views/Minimal.vue
+++ b/src/views/Minimal.vue
@@ -2,8 +2,7 @@
   <div class="minimal-home" :style="getBackgroundImage() + setColumnCount()">
     <!-- Buttons for config and home page -->
     <div class="minimal-buttons">
-      <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
-        @modalChanged="modalChanged" class="config-launcher" />
+      <ConfigLauncher @modalChanged="modalChanged" class="config-launcher" />
     </div>
     <!-- Page title and search bar -->
     <div class="title-and-search">
@@ -60,11 +59,6 @@ import ConfigLauncher from '@/components/Settings/ConfigLauncher';
 
 export default {
   name: 'home',
-  props: {
-    sections: Array, // Main site content
-    appConfig: Object, // Main site configuation (optional)
-    pageInfo: Object,
-  },
   components: {
     MinimalSection,
     MinimalHeading,
@@ -79,6 +73,17 @@ export default {
     tabbedView: true, // By default use tabs, when searching then show all instead
     theme: GetTheme(),
   }),
+  computed: {
+    sections() {
+      return this.$store.getters.sections;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
+  },
   watch: {
     /* When the theme changes, then call the update method */
     searchValue() {
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index c23eb98f..ea84c042 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -16,10 +16,6 @@ import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHe
 
 export default {
   name: 'Workspace',
-  props: {
-    sections: Array,
-    appConfig: Object,
-  },
   data: () => ({
     url: '',
     GetTheme,
@@ -27,6 +23,12 @@ export default {
     ApplyCustomVariables,
   }),
   computed: {
+    sections() {
+      return this.$store.getters.sections;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
     isMultiTaskingEnabled() {
       return this.appConfig.enableMultiTasking || false;
     },

From 004bffce180ac7deec52a58e9f331c6fb0a45665 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 9 Oct 2021 22:41:28 +0100
Subject: [PATCH 10/20] :fire: Remove no longer needed props, replaced with
 VueX state

---
 src/components/Settings/SettingsContainer.vue | 12 +++++++++---
 src/views/Home.vue                            |  3 ---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 2d148a38..6a9999af 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -51,9 +51,6 @@ export default {
     displayLayout: String,
     iconSize: String,
     externalThemes: Object,
-    appConfig: Object,
-    pageInfo: Object,
-    sections: Array,
     modalOpen: Boolean,
   },
   components: {
@@ -69,6 +66,15 @@ export default {
     IconClose,
   },
   computed: {
+    sections() {
+      return this.$store.getters.sections;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
     /**
     * Determines which button should display, based on the user type
     * 0 = Auth not configured, don't show anything
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c73c11e4..0eda20f7 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -10,9 +10,6 @@
       :displayLayout="layout"
       :iconSize="itemSizeBound"
       :externalThemes="getExternalCSSLinks()"
-      :sections="allSections"
-      :appConfig="appConfig"
-      :pageInfo="pageInfo"
       :modalOpen="modalOpen"
       class="settings-outer"
     />

From 8d111a16234483264883ed38838ee1c7aea96aa6 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 14:27:01 +0100
Subject: [PATCH 11/20] :zap: Adds VueX store state for modal open state

---
 src/store.js                | 9 +++++++--
 src/utils/StoreMutations.js | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/store.js b/src/store.js
index 2229c6ce..8e260a9f 100644
--- a/src/store.js
+++ b/src/store.js
@@ -4,14 +4,16 @@ import Vuex from 'vuex';
 import Keys from '@/utils/StoreMutations';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import { componentVisibility } from '@/utils/ConfigHelpers';
+import filterUserSections from '@/utils/CheckSectionVisibility';
 
 Vue.use(Vuex);
 
-const { UPDATE_CONFIG } = Keys;
+const { UPDATE_CONFIG, SET_MODAL_OPEN } = Keys;
 
 const store = new Vuex.Store({
   state: {
     config: {},
+    modalOpen: false, // KB shortcut functionality will be disabled when modal is open
   },
   getters: {
     config(state) {
@@ -24,7 +26,7 @@ const store = new Vuex.Store({
       return state.config.appConfig || {};
     },
     sections(state) {
-      return state.config.sections || [];
+      return filterUserSections(state.config.sections || []);
     },
     webSearch(state, getters) {
       return getters.appConfig.webSearch || {};
@@ -37,6 +39,9 @@ const store = new Vuex.Store({
     [UPDATE_CONFIG](state, config) {
       state.config = config;
     },
+    [SET_MODAL_OPEN](state, modalOpen) {
+      state.modalOpen = modalOpen;
+    },
   },
   actions: {
     initializeConfig({ commit }) {
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 1348ca81..4e220880 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -1,6 +1,7 @@
 // A list of mutation names
 const KEY_NAMES = [
   'UPDATE_CONFIG',
+  'SET_MODAL_OPEN',
 ];
 
 // Convert array of key names into an object, and export

From fddb77dec93a2147d1fe72c1d7e7a1dc9231bb20 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 14:32:54 +0100
Subject: [PATCH 12/20] :fire: Implementation of VueX, delete all emit events

---
 src/components/LinkItems/IframeModal.vue      |  6 ++--
 src/components/LinkItems/Section.vue          |  6 ----
 src/components/MinimalView/MinimalSection.vue |  4 ---
 src/components/Settings/ConfigLauncher.vue    |  8 +++--
 src/components/Settings/SearchBar.vue         |  6 ++--
 src/components/Settings/SettingsContainer.vue |  9 ++---
 src/components/Settings/ThemeSelector.vue     |  5 +--
 src/main.js                                   |  2 +-
 src/router.js                                 | 16 +++++++--
 src/utils/Auth.js                             |  4 +--
 src/utils/ConfigAccumalator.js                | 33 ++++++-------------
 src/views/Home.vue                            |  6 ++--
 12 files changed, 47 insertions(+), 58 deletions(-)

diff --git a/src/components/LinkItems/IframeModal.vue b/src/components/LinkItems/IframeModal.vue
index bc40f3d4..592b5d1a 100644
--- a/src/components/LinkItems/IframeModal.vue
+++ b/src/components/LinkItems/IframeModal.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script>
+import Keys from '@/utils/StoreMutations';
+
 export default {
   name: 'IframeModal',
   props: {
@@ -21,13 +23,13 @@ export default {
     show(url) {
       this.url = url;
       this.$modal.show(this.name);
-      this.$emit('modalChanged', true);
+      this.$store.commit(Keys.SET_MODAL_OPEN, true);
     },
     hide() {
       this.$modal.hide(this.name);
     },
     modalClosed() {
-      this.$emit('modalChanged', false);
+      this.$store.commit(Keys.SET_MODAL_OPEN, false);
     },
   },
 };
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index effabb52..9fbdb825 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -44,7 +44,6 @@
       :ref="`iframeModal-${groupId}`"
       :name="`iframeModal-${groupId}`"
       @closed="$emit('itemClicked')"
-      @modalChanged="modalChanged"
     />
   </Collapsable>
 </template>
@@ -65,7 +64,6 @@ export default {
     displayData: Object,
     items: Array,
     itemSize: String,
-    modalOpen: Boolean,
   },
   components: {
     Collapsable,
@@ -124,10 +122,6 @@ export default {
     triggerModal(url) {
       this.$refs[`iframeModal-${this.groupId}`].show(url);
     },
-    /* Emmit value upwards when iframe modal opened/ closed */
-    modalChanged(changedTo) {
-      this.$emit('change-modal-visibility', changedTo);
-    },
     /* Determines if user has enabled online status checks */
     shouldEnableStatusCheck(itemPreference) {
       const globalPreference = this.appConfig.statusCheck || false;
diff --git a/src/components/MinimalView/MinimalSection.vue b/src/components/MinimalView/MinimalSection.vue
index a42879a2..60a69326 100644
--- a/src/components/MinimalView/MinimalSection.vue
+++ b/src/components/MinimalView/MinimalSection.vue
@@ -26,7 +26,6 @@
       :ref="`iframeModal-${groupId}`"
       :name="`iframeModal-${groupId}`"
       @closed="$emit('itemClicked')"
-      @modalChanged="modalChanged"
     />
   </div>
 </template>
@@ -70,9 +69,6 @@ export default {
     triggerModal(url) {
       this.$refs[`iframeModal-${this.groupId}`].show(url);
     },
-    modalChanged(changedTo) {
-      this.$emit('change-modal-visibility', changedTo);
-    },
     shouldEnableStatusCheck(itemPreference) {
       const globalPreference = this.appConfig.statusCheck || false;
       return itemPreference !== undefined ? itemPreference : globalPreference;
diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 152119fc..18c227b2 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -11,7 +11,7 @@
 
     <!-- Modal containing all the configuration options -->
     <modal :name="modalNames.CONF_EDITOR" :resizable="true" width="60%" height="85%"
-      @closed="$emit('modalChanged', false)" classes="dashy-modal">
+      @closed="editorClosed" classes="dashy-modal">
       <ConfigContainer :config="combineConfig()" />
     </modal>
 
@@ -48,6 +48,7 @@
 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 IconSpanner from '@/assets/interface-icons/config-editor.svg';
 import IconViewMode from '@/assets/interface-icons/application-change-view.svg';
 import IconHome from '@/assets/interface-icons/application-home.svg';
@@ -85,7 +86,10 @@ export default {
   methods: {
     showEditor: function show() {
       this.$modal.show(modalNames.CONF_EDITOR);
-      this.$emit('modalChanged', true);
+      this.$store.commit(Keys.SET_MODAL_OPEN, true);
+    },
+    editorClosed: function show() {
+      this.$store.commit(Keys.SET_MODAL_OPEN, false);
     },
     combineConfig() {
       const conf = {};
diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue
index d084ce47..2ce30569 100644
--- a/src/components/Settings/SearchBar.vue
+++ b/src/components/Settings/SearchBar.vue
@@ -35,9 +35,6 @@ import {
 
 export default {
   name: 'FilterTile',
-  props: {
-    active: Boolean,
-  },
   data() {
     return {
       input: '', // Users current search term
@@ -46,6 +43,9 @@ export default {
     };
   },
   computed: {
+    active() {
+      return !this.$store.state.modalOpen;
+    },
     searchPrefs() {
       return this.$store.getters.webSearch || {};
     },
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 6a9999af..82ff9832 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -3,15 +3,14 @@
     <SearchBar ref="SearchBar"
       @user-is-searchin="userIsTypingSomething"
       v-if="searchVisible"
-      :active="!modalOpen"
     />
     <div class="options-outer">
       <div :class="`options-container ${!settingsVisible ? 'hide' : ''}`">
-        <ThemeSelector :externalThemes="externalThemes" @modalChanged="modalChanged"
+        <ThemeSelector :externalThemes="externalThemes"
           :confTheme="getInitialTheme()" :userThemes="getUserThemes()" />
         <LayoutSelector :displayLayout="displayLayout" @layoutUpdated="updateDisplayLayout"/>
         <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
-        <ConfigLauncher @modalChanged="modalChanged" />
+        <ConfigLauncher />
         <AuthButtons  v-if="userState != 'noone'" :userType="userState" />
       </div>
       <div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
@@ -51,7 +50,6 @@ export default {
     displayLayout: String,
     iconSize: String,
     externalThemes: Object,
-    modalOpen: Boolean,
   },
   components: {
     SearchBar,
@@ -110,9 +108,6 @@ export default {
     updateIconSize(iconSize) {
       this.$emit('change-icon-size', iconSize);
     },
-    modalChanged(changedTo) {
-      this.$emit('change-modal-visibility', changedTo);
-    },
     getInitialTheme() {
       return this.appConfig.theme || '';
     },
diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index 7151aba3..a3925cc5 100644
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -31,6 +31,7 @@ import {
   ApplyCustomVariables,
 } from '@/utils/ThemeHelper';
 import Defaults, { localStorageKeys } from '@/utils/defaults';
+import Keys from '@/utils/StoreMutations';
 import IconPalette from '@/assets/interface-icons/config-color-palette.svg';
 
 export default {
@@ -94,12 +95,12 @@ export default {
     },
     /* Opens the theme color configurator popup */
     openThemeConfigurator() {
-      this.$emit('modalChanged', true);
+      this.$store.commit(Keys.SET_MODAL_OPEN, true);
       this.themeConfiguratorOpen = true;
     },
     /* Closes the theme color configurator popup */
     closeThemeConfigurator() {
-      // this.$emit('modalChanged', false);
+      this.$store.commit(Keys.SET_MODAL_OPEN, false);
       this.themeConfiguratorOpen = false;
     },
     /* Updates theme. Checks if the new theme is local or external,
diff --git a/src/main.js b/src/main.js
index 280aad5c..f1a7f1a0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -51,7 +51,7 @@ const render = (awesome) => awesome(Dashy);
 
 // Mount the app, with router, store i18n and render func
 const mount = () => new Vue({
-  router, render, i18n, store,
+  store, router, render, i18n,
 }).$mount('#app');
 
 // If Keycloak not enabled, then proceed straight to the app
diff --git a/src/router.js b/src/router.js
index a41918e9..d0cf8f9e 100644
--- a/src/router.js
+++ b/src/router.js
@@ -14,10 +14,10 @@ import Home from '@/views/Home.vue';
 import Login from '@/views/Login.vue';
 import Workspace from '@/views/Workspace.vue';
 import Minimal from '@/views/Minimal.vue';
+import ConfigAccumulator from '@/utils/ConfigAccumalator';
 
 // Import helper functions, config data and defaults
 import { isAuthEnabled, isLoggedIn, isGuestAccessEnabled } from '@/utils/Auth';
-import { config } from '@/utils/ConfigHelpers';
 import { metaTagData, startingView, routePaths } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
 
@@ -32,8 +32,18 @@ const isAuthenticated = () => {
   return (!authEnabled || userLoggedIn || guestEnabled);
 };
 
+const getConfig = () => {
+  const Accumulator = new ConfigAccumulator();
+  return {
+    appConfig: Accumulator.appConfig(),
+    pageInfo: Accumulator.pageInfo(),
+  };
+};
+
+const { appConfig, pageInfo } = getConfig();
+
 /* Get the users chosen starting view from app config, or return default */
-const getStartingView = () => config.appConfig.startingView || startingView;
+const getStartingView = () => appConfig.startingView || startingView;
 
 /**
  * Returns the component that should be rendered at the base path,
@@ -51,7 +61,7 @@ const getStartingComponent = () => {
 
 /* Returns the meta tags for each route */
 const makeMetaTags = (defaultTitle) => ({
-  title: config.pageInfo.title || defaultTitle,
+  title: pageInfo.title || defaultTitle,
   metaTags: metaTagData,
 });
 
diff --git a/src/utils/Auth.js b/src/utils/Auth.js
index 49cc5ae2..a1e8fdbd 100644
--- a/src/utils/Auth.js
+++ b/src/utils/Auth.js
@@ -16,9 +16,7 @@ const getAppConfig = () => {
  * Support for old user structure will be removed in V 1.7.0
  */
 const printWarning = () => {
-  const msg = 'From V 1.6.5 onwards, the structure of the users object has changed.';
-  // eslint-disable-next-line no-console
-  console.warn(msg);
+  ErrorHandler('From V 1.6.5 onwards, the structure of the users object has changed.');
 };
 
 /* Returns true if keycloak is enabled */
diff --git a/src/utils/ConfigAccumalator.js b/src/utils/ConfigAccumalator.js
index 594cda79..ca6bc075 100644
--- a/src/utils/ConfigAccumalator.js
+++ b/src/utils/ConfigAccumalator.js
@@ -11,9 +11,8 @@ import {
   pageInfo as defaultPageInfo,
   iconSize as defaultIconSize,
   layout as defaultLayout,
-  // language as defaultLanguage,
 } from '@/utils/defaults';
-
+import ErrorHandler from '@/utils/ErrorHandler';
 import conf from '../../public/conf.yml';
 
 export default class ConfigAccumulator {
@@ -46,24 +45,14 @@ export default class ConfigAccumulator {
 
   /* Page Info */
   pageInfo() {
-    const defaults = defaultPageInfo;
-    let localPageInfo;
-    try {
-      localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]);
-    } catch (e) {
-      localPageInfo = {};
+    let localPageInfo = {};
+    if (localStorage[localStorageKeys.PAGE_INFO]) {
+      // eslint-disable-next-line brace-style
+      try { localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]); }
+      catch (e) { ErrorHandler('Malformed pageInfo data in local storage'); }
     }
-    let filePageInfo = {};
-    if (this.conf) {
-      filePageInfo = this.conf.pageInfo || {};
-    }
-    const pi = filePageInfo || defaults; // The page info object to return
-    pi.title = localPageInfo.title || filePageInfo.title || defaults.title;
-    pi.logo = localPageInfo.logo || filePageInfo.logo || defaults.logo;
-    pi.description = localPageInfo.description || filePageInfo.description || defaults.description;
-    pi.navLinks = localPageInfo.navLinks || filePageInfo.navLinks || defaults.navLinks;
-    pi.footerText = localPageInfo.footerText || filePageInfo.footerText || defaults.footerText;
-    return pi;
+    const filePageInfo = this.conf ? this.conf.pageInfo || {} : {};
+    return { ...defaultPageInfo, ...filePageInfo, ...localPageInfo };
   }
 
   /* Sections */
@@ -75,13 +64,11 @@ export default class ConfigAccumulator {
         const json = JSON.parse(localSections);
         if (json.length >= 1) return json;
       } catch (e) {
-        // The data in local storage has been malformed, will return conf.sections instead
+        ErrorHandler('Malformed section data in local storage');
       }
     }
     // If the function hasn't yet returned, then return the config file sections
-    let sectionsFile = [];
-    if (this.conf) sectionsFile = this.conf.sections || [];
-    return sectionsFile;
+    return this.conf ? this.conf.sections || [] : [];
   }
 
   /* Complete config */
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0eda20f7..ec12c72b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -60,7 +60,6 @@ export default {
     searchValue: '',
     layout: '',
     itemSizeBound: '',
-    modalOpen: false, // When true, keybindings are disabled
   }),
   computed: {
     sections() {
@@ -72,6 +71,9 @@ export default {
     pageInfo() {
       return this.$store.getters.pageInfo;
     },
+    modalOpen() {
+      return this.$store.state.modalOpen;
+    },
     /* Get class for num columns, if specified by user */
     colCount() {
       let { colCount } = this.appConfig;
@@ -144,7 +146,7 @@ export default {
     },
     /* Update data when modal is open (so that key bindings can be disabled) */
     updateModalVisibility(modalState) {
-      this.modalOpen = modalState;
+      this.$store.commit('SET_MODAL_OPEN', modalState);
     },
     /* Returns an array of links to external CSS from the Config */
     getExternalCSSLinks() {

From 877cfdaee39c4a434fa4befb819e48be419d7473 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 14:33:34 +0100
Subject: [PATCH 13/20] :bookmark: Bymps to V 1.8.6 and updates changelog

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

diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
index 971a12e2..83797626 100644
--- a/.github/CHANGELOG.md
+++ b/.github/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+## ⚡️ 1.8.6 - Implementation of VueX [PR: #271](https://github.com/Lissy93/dashy/pull/271)
+- New state management pattern, which should lead to a more organized code base long term, and will also make building out the new UI editor significantly easier to do in a clean and reliable way
+
 ## 💄 1.8.5 - Lots of Requested UI Improvements [PR #261](https://github.com/Lissy93/dashy/pull/261)
 - Adds an option for landing URL in workspace, Re: #255
 - Switches to a new API for generative icons, Re: #163
diff --git a/package.json b/package.json
index cbbf243f..538c617f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "license": "MIT",
   "main": "server",
   "scripts": {
@@ -93,4 +93,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}
\ No newline at end of file

From 048f0cb1120fde6ba9816240819847e4aa3f1e64 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 15:12:35 +0100
Subject: [PATCH 14/20] :adhesive_bandage: Fixes cannot type with modal open

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

diff --git a/src/components/Settings/ThemeSelector.vue b/src/components/Settings/ThemeSelector.vue
index a3925cc5..8009241c 100644
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -100,8 +100,10 @@ export default {
     },
     /* Closes the theme color configurator popup */
     closeThemeConfigurator() {
-      this.$store.commit(Keys.SET_MODAL_OPEN, false);
-      this.themeConfiguratorOpen = false;
+      if (this.themeConfiguratorOpen) {
+        this.$store.commit(Keys.SET_MODAL_OPEN, false);
+        this.themeConfiguratorOpen = false;
+      }
     },
     /* Updates theme. Checks if the new theme is local or external,
     and calls appropirate updating function. Updates local storage */

From 4e3b41332d16cf0ec70cf5813989c74955d49d5a Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 15:52:39 +0100
Subject: [PATCH 15/20] :zap: Language now managed in VueX store

---
 src/App.vue                                  |  2 ++
 src/components/Settings/LanguageSwitcher.vue | 24 ++++++++++++++++----
 src/store.js                                 |  7 +++++-
 src/utils/StoreMutations.js                  |  1 +
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 014a0652..d9619e04 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,6 +13,7 @@ import Footer from '@/components/PageStrcture/Footer.vue';
 import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
 import { welcomeMsg } from '@/utils/CoolConsole';
 import ErrorHandler from '@/utils/ErrorHandler';
+import Keys from '@/utils/StoreMutations';
 import {
   localStorageKeys,
   splashScreenTime,
@@ -107,6 +108,7 @@ export default {
     /* Fetch or detect users language, then apply it */
     applyLanguage() {
       const language = this.getLanguage();
+      this.$store.commit(Keys.SET_LANGUAGE, language);
       this.$i18n.locale = language;
       document.getElementsByTagName('html')[0].setAttribute('lang', language);
     },
diff --git a/src/components/Settings/LanguageSwitcher.vue b/src/components/Settings/LanguageSwitcher.vue
index 26925772..7705cef0 100644
--- a/src/components/Settings/LanguageSwitcher.vue
+++ b/src/components/Settings/LanguageSwitcher.vue
@@ -28,6 +28,7 @@
 import Button from '@/components/FormElements/Button';
 import SaveConfigIcon from '@/assets/interface-icons/save-config.svg';
 import ErrorHandler from '@/utils/ErrorHandler';
+import Keys from '@/utils/StoreMutations';
 import { languages } from '@/utils/languages';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 
@@ -39,15 +40,28 @@ export default {
   },
   data() {
     return {
-      language: this.getCurrentLanguage(), // The currently selected language
+      language: '', // The currently selected language
       modalName: modalNames.LANG_SWITCHER, // Key for modal
     };
   },
+  created() {
+    // Initiate the current language, with VueX state
+    this.language = this.savedLanguage;
+  },
   computed: {
     /* Get appConfig from store */
     appConfig() {
       return this.$store.getters.appConfig;
     },
+    /* The ISO code for the users language, synced with VueX store */
+    savedLanguage: {
+      get() {
+        return this.getIsoFromLangObj(this.$store.state.lang);
+      },
+      set(newLang) {
+        this.$store.commit(Keys.SET_LANGUAGE, newLang.code);
+      },
+    },
     /* Return the array of language objects, plus a friends name */
     languageList: () => languages.map((lang) => {
       const newLang = lang;
@@ -76,6 +90,7 @@ export default {
       if (this.checkLocale(selectedLanguage)) {
         localStorage.setItem(localStorageKeys.LANGUAGE, selectedLanguage.code);
         this.applyLanguageLocally();
+        this.savedLanguage = selectedLanguage;
         const successMsg = `${selectedLanguage.flag} `
           + `${this.$t('language-switcher.success-msg')} ${selectedLanguage.name}`;
         this.$toasted.show(successMsg, { className: 'toast-success' });
@@ -85,11 +100,10 @@ export default {
         ErrorHandler('Unable to apply language');
       }
     },
-    /* Gets the users current language from local storage */
-    getCurrentLanguage() {
+    /* Gets the ISO code for a given language object */
+    getIsoFromLangObj(langObj) {
       const getLanguageFromIso = (iso) => languages.find((lang) => lang.code === iso);
-      const current = localStorage[localStorageKeys.LANGUAGE] || this.appConfig.language;
-      return getLanguageFromIso(current);
+      return getLanguageFromIso(langObj);
     },
   },
 };
diff --git a/src/store.js b/src/store.js
index 8e260a9f..306c80ef 100644
--- a/src/store.js
+++ b/src/store.js
@@ -8,11 +8,12 @@ import filterUserSections from '@/utils/CheckSectionVisibility';
 
 Vue.use(Vuex);
 
-const { UPDATE_CONFIG, SET_MODAL_OPEN } = Keys;
+const { UPDATE_CONFIG, SET_MODAL_OPEN, SET_LANGUAGE } = Keys;
 
 const store = new Vuex.Store({
   state: {
     config: {},
+    lang: '', // The users language, auto-detected or read from local storage / config
     modalOpen: false, // KB shortcut functionality will be disabled when modal is open
   },
   getters: {
@@ -39,11 +40,15 @@ const store = new Vuex.Store({
     [UPDATE_CONFIG](state, config) {
       state.config = config;
     },
+    [SET_LANGUAGE](state, lang) {
+      state.lang = lang;
+    },
     [SET_MODAL_OPEN](state, modalOpen) {
       state.modalOpen = modalOpen;
     },
   },
   actions: {
+    /* Called when app first loaded. Reads config and sets state */
     initializeConfig({ commit }) {
       const Accumulator = new ConfigAccumulator();
       const config = Accumulator.config();
diff --git a/src/utils/StoreMutations.js b/src/utils/StoreMutations.js
index 4e220880..f5ab815f 100644
--- a/src/utils/StoreMutations.js
+++ b/src/utils/StoreMutations.js
@@ -2,6 +2,7 @@
 const KEY_NAMES = [
   'UPDATE_CONFIG',
   'SET_MODAL_OPEN',
+  'SET_LANGUAGE',
 ];
 
 // Convert array of key names into an object, and export

From b2a26ae1e02666bb52a42e0b4ced3f29d7cd2197 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 16:07:53 +0100
Subject: [PATCH 16/20] :hammer: Updates list of auto-tags for PR branch names

---
 .github/pr-branch-labeler.yml | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/.github/pr-branch-labeler.yml b/.github/pr-branch-labeler.yml
index 0a7732e3..c01da993 100644
--- a/.github/pr-branch-labeler.yml
+++ b/.github/pr-branch-labeler.yml
@@ -1,10 +1,11 @@
 # PR labels and the branch patterns they should be auto-assigned to
-
-🦋 Bug Fix: ['FIX/*', 'HOT-FIX/*', 'BUG-FIX/*']
-✨ New Feature: ['FEATURE/*']
+✨ New Feature: ['FEATURE/*', 'FEAT/*']
 🚚 Refactor: ['IMPROVMENTS/*', 'REFACTOR/*']
-💯 Showcase: ['SHOWCASE/*']
-💄 Stylistic Changes: ['STYLES/*', 'THEME/*']
-🛠️ Build Changes: ['ARCH/*', 'ARCHITECTURE/*', 'DOCKER/*', 'BUILD/*']
+🦋 Bug Fix: ['FIX/*', 'HOT-FIX/*', 'BUG-FIX/*']
+💯 Showcase: ['SHOWCASE/*', 'SHOWCASE_SUBMISSION/*']
+💄 Stylistic Changes: ['STYLES/*', 'THEME/*', 'UI/*']
+🏗️ Architectural Changes: ['ARCH/*', 'ARCHITECTURE/*']
+🛠️ Build Changes: ['DOCKER/*', 'BUILD/*', 'CI/*', 'ACTIONS/*']
+🌐 Language: ['LANG/*', 'INTERNATIONALIZATION/*', 'I18N/*', 'TEXT-UPDATE/*']
 🤖 Auto: ['AUTO/*', 'BOT/*', 'snyk-upgrade-*', 'snyk-fix-*']
 ⛔ Don't Merge: ['WEBSITE/*', 'EXPERIMENT/*', 'DEPLOY/*', 'deploy_*', 'gh-pages', 'dev-demo']
\ No newline at end of file

From af8959483fbf1a15d1039b037cb9a1c45206e414 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 16:08:33 +0100
Subject: [PATCH 17/20] :hammer: Don't add Awaiting Maintainer label for PRs

---
 .github/workflows/manage-pending-labels.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/manage-pending-labels.yml b/.github/workflows/manage-pending-labels.yml
index 1ab5fd6a..465dc9ef 100644
--- a/.github/workflows/manage-pending-labels.yml
+++ b/.github/workflows/manage-pending-labels.yml
@@ -19,7 +19,7 @@ jobs:
 
   add-awaiting-author:
    runs-on: ubuntu-latest
-   if: ${{ github.event.comment.author_association != 'COLLABORATOR' && github.event.comment.author_association != 'OWNER' }}
+   if: ${{ !github.event.issue.pull_request && github.event.comment.author_association != 'COLLABORATOR' && github.event.comment.author_association != 'OWNER' }}
    steps:
    - name: Add Awaiting Author labels when Updated
      uses: actions-cool/issues-helper@v2

From 54c8805cd4952d997cb48423de8f029bd9398d42 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 16:20:11 +0100
Subject: [PATCH 18/20] :green_heart: Fix ordering issue raised by CI

---
 src/components/Settings/SettingsContainer.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 82ff9832..14abfdbe 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -88,12 +88,12 @@ export default {
     visibleComponents() {
       return this.$store.getters.visibleComponents;
     },
-  },
-  data() {
-    return {
-      settingsVisible: this.getSettingsVisibility(),
-      searchVisible: (this.visibleComponents || defaultVisibleComponents).searchBar,
-    };
+    searchVisible() {
+      return this.$store.getters.visibleComponents.searchBar;
+    },
+    settingsVisible() {
+      return this.getSettingsVisibility();
+    },
   },
   methods: {
     userIsTypingSomething(something) {

From fed991dbdd30251dc6ab9a7ca9e74e9e2bb276bd Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 16:43:22 +0100
Subject: [PATCH 19/20] :green_heart: Fix ordering issue raised by CI

---
 src/components/Settings/SettingsContainer.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 14abfdbe..941fdeee 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -63,6 +63,11 @@ export default {
     IconOpen,
     IconClose,
   },
+  data() {
+    return {
+      settingsVisible: true,
+    };
+  },
   computed: {
     sections() {
       return this.$store.getters.sections;
@@ -91,9 +96,9 @@ export default {
     searchVisible() {
       return this.$store.getters.visibleComponents.searchBar;
     },
-    settingsVisible() {
-      return this.getSettingsVisibility();
-    },
+  },
+  mounted() {
+    this.settingsVisible = this.getSettingsVisibility();
   },
   methods: {
     userIsTypingSomething(something) {

From e1b812c8f67535fa5fef93e9e20c661dd5b068ca Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 10 Oct 2021 17:23:50 +0100
Subject: [PATCH 20/20] :hammer: Updates config file for PR badges

---
 .github/pr-badge.yml | 69 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 61 insertions(+), 8 deletions(-)

diff --git a/.github/pr-badge.yml b/.github/pr-badge.yml
index c32c37c3..ae49e97a 100644
--- a/.github/pr-badge.yml
+++ b/.github/pr-badge.yml
@@ -1,5 +1,5 @@
-# Config file for pull-request-badge. See: https://pullrequestbadge.com/
-# Enables badges to be inserted into the PR description, based on certain conditions
+# Config file for pull-request-badge. See: https://pullrequestbadge.com/ by @stefanbuck
+# Dynamically inserts status badges into PR description, based on certain conditions
 
 # Checks if the required sections are missing
 - label: "⚠️Missing"
@@ -23,21 +23,43 @@
   color: "#f25265"
   when: "$labels.length == 0"
 
-# Show note when in draft mode
+# Show note when task list has unfinished items
+- label: "⚠️Notice"
+  message: "Unchecked Tasks"
+  when: "$payload.pull_request.body.includes('- [ ] ')"
+  color: "#f25265"
+
+# Show badge indicating PR status
 - label: "Status"
-  message: "Draft"
+  message: "✏️ Draft"
   when: "$isDraft"
   color: "#ffa933"
+- label: "Status"
+  message: "🧱 Work in Progress"
+  when: "$payload.pull_request.title.includes('WIP')"
+  color: "#29e3f4"
+- label: "Status"
+  message: "✅ Ready"
+  color: "#3ef963"
+  when: "$labels.includes('🔀 Ready for Merge')"
 
 # Add size label based on very large or tiny PRs
+- label: "PR Size"
+  message: "Extra Large"
+  color: "#f9833e"
+  when: "$additions > 1000"
 - label: "PR Size"
   message: "Large"
-  color: "#f79c47"
-  when: "$additions > 600"
+  color: "#f4b546"
+  when: "$additions > 500 && $additions < 1000"
+- label: "PR Size"
+  message: "Medium"
+  color: "#f3ff59"
+  when: "$additions > 10 && $additions < 500"
 - label: "PR Size"
   message: "Quick"
   color: "#3eef8b"
-  when: "$additions < 5"
+  when: "$additions < 10"
 
 # Show PR number, to destination and from destination
 - label: "#$prNumber"
@@ -57,7 +79,7 @@
   when: "$payload.pull_request.author_association !== 'OWNER'"
   url: "https://github.com/$payload.pull_request.user.login"
 
-# Show a badge indicating the PR category
+# Show a badge indicating the PR category, based on tag
 - label: "Type"
   message: "✨ Feature"
   color: "#39b0fd"
@@ -90,3 +112,34 @@
   message: "🌟 Showcase Addition"
   color: "#39b0fd"
   when: "$labels.includes('💯 Showcase')"
+- label: "Type"
+  message: "🏗️ Architecture"
+  color: "#39b0fd"
+  when: "$labels.includes('🏗️ Architectural Changes')"
+- label: "Type"
+  message: "🤖 Auto Submission"
+  color: "#39b0fd"
+  when: "$labels.includes('🤖 Auto')"
+- label: "Type"
+  message: "🌐 Language Update"
+  color: "#39b0fd"
+  when: "$labels.includes('🌐 Language')"
+
+# Show warning, when certain tags are applied
+- label: "Warning"
+  message: "⛔ Do Not Merge"
+  color: "#f25265"
+  when: "$labels.includes('⛔ Don't Merge')"
+- label: "Warning"
+  message: "🚫 Merge Conflicts"
+  color: "#f25265"
+  when: "$labels.includes('🚫 Merge Conflicts')"
+- label: "Warning"
+  message: "🕸️ Inactive"
+  color: "#f25265"
+  when: "$labels.includes('🕸️ Inactive')"
+- label: "Warning"
+  message: "💀 Spam"
+  color: "#f25265"
+  when: "$labels.includes('💀 Spam')"
+