⚡ Remove all instances of inject, replace with VueX store

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;
     },
   },
 };

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);
       }

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) {

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;