⚡ Less confusing handling of local config

src/assets/locales/en.json

@@ -171,9 +171,9 @@
     "status-fail-msg": "Task Failed",
     "success-msg-disk": "Config file written to disk successfully",
     "success-msg-local": "Local changes saved successfully",
-    "success-note-l1": "The app should rebuild automatically.",
-    "success-note-l2": "This may take up to a minute.",
-    "success-note-l3": "You will need to refresh the page for changes to take effect.",
+    "success-note-l1": "You will need to refresh the page for changes to take effect.",
+    "success-note-l2": "",
+    "success-note-l3": "",
     "error-msg-save-mode": "Please select a Save Mode: Local or File",
     "error-msg-cannot-save": "An error occurred saving config",
     "error-msg-bad-json": "Error in JSON, possibly malformed",

src/components/Configuration/ConfigContainer.vue

@@ -47,16 +47,17 @@
           </Button>
           <!-- Display app version and language -->
           <p class="language">{{ getLanguage() }}</p>
-          <p v-if="$store.state.currentConfigInfo" class="config-location">
-            Using Config From<br>
-            {{ $store.state.currentConfigInfo.confPath }}
+          <!-- Display location of config file -->
+          <p class="config-location">
+            Using config from
+            <a :href="configPath">{{ configPath }}</a>
           </p>
           <AppVersion />
         </div>
         <!-- Display note if Config disabled, or if on mobile -->
         <p v-if="!enableConfig" class="config-disabled-note">{{ $t('config.disabled-note') }}</p>
         <p class="small-screen-note" style="display: none;">{{ $t('config.small-screen-note') }}</p>
-        <div class="config-note">
+        <div class="config-note" @click="openExportConfigModal">
           <span>{{ $t('config.backup-note') }}</span>
         </div>
       </div>
@@ -116,6 +117,11 @@ export default {
     enableConfig() {
       return this.$store.getters.permissions.allowViewConfig;
     },
+    configPath() {
+      return this.$store.state.currentConfigInfo?.confPath
+      || process.env.VUE_APP_CONFIG_PATH
+      || '/conf.yml';
+    },
   },
   components: {
     Button,
@@ -248,8 +254,12 @@ a.hyperlink-wrapper {
 p.app-version, p.language, p.config-location {
   margin: 0.5rem auto;
   font-size: 1rem;
-  color: var(--transparent-white-50);
+  color: var(--config-settings-color);
   cursor: default;
+  opacity: var(--dimming-factor);
+  a {
+    color: var(--config-settings-color);
+  }
 }
 
 div.code-container {

src/components/InteractiveEditor/ExportConfigMenu.vue

@@ -22,6 +22,14 @@
         <DownloadConfigIcon />
       </Button>
     </div>
+    <!-- Show path to which config file is being used -->
+    <div class="config-path-info">
+      <h3>Config Location</h3>
+      <p>
+        The base config file you are currently using is
+        <a :href="configPath">{{ configPath }}</a>
+      </p>
+    </div>
     <!-- View Config in Tree Mode Section -->
     <h3>{{ $t('interactive-editor.export.view-title') }}</h3>
     <tree-view :data="config" class="config-tree-view" />
@@ -61,6 +69,11 @@ export default {
     allowViewConfig() {
       return this.$store.getters.permissions.allowViewConfig;
     },
+    configPath() {
+      return this.$store.state.currentConfigInfo?.confPath
+      || process.env.VUE_APP_CONFIG_PATH
+      || '/conf.yml';
+    },
   },
   methods: {
     convertJsonToYaml() {
@@ -121,6 +134,13 @@ export default {
     border-bottom: 1px dashed var(--interactive-editor-color);
     button { margin: 0 1rem; }
   }
+  .config-path-info {
+    p, a {
+      color: var(--interactive-editor-color);
+      font-size: 1.2rem;
+    }
+    border-bottom: 1px dashed var(--interactive-editor-color);
+  }
   .config-tree-view {
     padding: 0.5rem;
     font-family: var(--font-monospace);

src/components/Settings/LocalConfigWarning.vue

@@ -1,36 +1,70 @@
 <template>
   <transition name="slide-fade">
     <div class="kb-sc-info" v-if="!shouldHide">
-      <h5>There are keyboard shortcuts! ⌨️🙌</h5>
+      <h5>{{ popupContent.title }}</h5>
       <div class="close" title="Hide forever [Esc]" @click="hideWelcomeHelper()">x</div>
-      <p title="Press [Esc] to hide this tip forever. See there's even a shortcut for that! 🚀">
-        Just start typing to filter. Then use the tab key to cycle through results,
-        and press enter to launch the selected item, or alt + enter to open in a modal.
-        You can hit Esc at anytime to clear the search. Easy 🥳
-      </p>
+      <p :title="popupContent.hoverText">{{ popupContent.message }}</p>
+      <p :title="popupContent.hoverText">{{ popupContent.messageContinued }}</p>
+      <div class="action-buttons">
+        <button @click="exportConfig">Export Local Config</button>
+        <button @click="saveConfig">Save Changes to Disk</button>
+        <button @click="resetLocalConfig">Reset Local Changes</button>
+        <button @click="hideWelcomeHelper">Dismiss this Notification</button>
+      </div>
     </div>
   </transition>
 </template>
 
 <script>
 
-import { localStorageKeys } from '@/utils/defaults';
+import { localStorageKeys, modalNames } from '@/utils/defaults';
+import StoreKeys from '@/utils/StoreMutations';
+import configSavingMixin from '@/mixins/ConfigSaving';
 
 export default {
   name: 'KeyboardShortcutInfo',
+  mixins: [configSavingMixin],
   data() {
     return {
       shouldHide: true, // False = show/ true = hide. Intuitive, eh?
-      timeDelay: 3000, // Short delay in ms before popup appears
+      timeDelay: 2000, // Short delay in ms before popup appears
+      popupContent: {
+        title: '⚠️ You\'re using a local config',
+        message: `This means that your settings are saved in this browser only,
+        and won't persist across devices.`,
+        messageContinued: `To ensure you don't loose your changes,
+        it's recommended to download a copy of your config, so you can restore it later.`,
+        hoverText: 'Press [Esc] to hide this warning',
+      },
     };
   },
   methods: {
+    exportConfig() {
+      this.$modal.show(modalNames.EXPORT_CONFIG_MENU);
+      this.shouldHide = true;
+    },
+    saveConfig() {
+      const localConfig = this.$store.state.config;
+      this.writeConfigToDisk(localConfig);
+      this.shouldHide = true;
+    },
+    resetLocalConfig() {
+      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'));
+        this.$store.dispatch(StoreKeys.INITIALIZE_CONFIG);
+        this.shouldHide = true;
+      }
+    },
     /**
      * Returns true if the key exists in session storage, otherwise false
      * And the !! just converts 'false' to false, as strings resolve to true
      */
     shouldHideWelcomeMessage() {
-      return !!localStorage[localStorageKeys.HIDE_WELCOME_BANNER];
+      return !!localStorage[localStorageKeys.HIDE_INFO_NOTIFICATION];
     },
     /**
      * Update session storage, so that it won't be shown again
@@ -38,7 +72,7 @@ export default {
      */
     hideWelcomeHelper() {
       this.shouldHide = true;
-      localStorage.setItem(localStorageKeys.HIDE_WELCOME_BANNER, true);
+      localStorage.setItem(localStorageKeys.HIDE_INFO_NOTIFICATION, true);
       window.removeEventListener('keyup', this.keyPressEvent);
     },
     /* Passed to window function, to add/ remove event listener */
@@ -114,6 +148,23 @@ export default {
     }
   }
 }
+.action-buttons {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 1em;
+  button {
+    padding: 0.2rem;
+    background: var(--welcome-popup-background);
+    color: var(--welcome-popup-text-color);
+    border: 1px solid var(--welcome-popup-text-color);
+    border-radius: var(--curve-factor);
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      background: var(--welcome-popup-text-color);
+      color: var(--welcome-popup-background);
+    }
+  }
+}
 /* Animations, animations everywhere */
 .slide-fade-enter-active {
   transition: all 1s ease;

src/store.js

@@ -19,6 +19,7 @@ const {
   SET_CONFIG,
   SET_ROOT_CONFIG,
   SET_CURRENT_CONFIG_INFO,
+  SET_IS_USING_LOCAL_CONFIG,
   SET_MODAL_OPEN,
   SET_LANGUAGE,
   SET_ITEM_LAYOUT,
@@ -49,6 +50,7 @@ const store = new Vuex.Store({
     editMode: false, // While true, the user can drag and edit items + sections
     modalOpen: false, // KB shortcut functionality will be disabled when modal is open
     currentConfigInfo: {}, // For multi-page support, will store info about config file
+    isUsingLocalConfig: false, // If true, will use local config instead of fetched
     navigateConfToTab: undefined, // Used to switch active tab in config modal
   },
   getters: {
@@ -155,6 +157,9 @@ const store = new Vuex.Store({
     [SET_CURRENT_CONFIG_INFO](state, subConfigInfo) {
       state.currentConfigInfo = subConfigInfo;
     },
+    [SET_IS_USING_LOCAL_CONFIG](state, isUsingLocalConfig) {
+      state.isUsingLocalConfig = isUsingLocalConfig;
+    },
     [SET_LANGUAGE](state, lang) {
       const newConfig = state.config;
       newConfig.appConfig.language = lang;
@@ -334,6 +339,7 @@ const store = new Vuex.Store({
      */
     async [INITIALIZE_CONFIG]({ commit, state }, subConfigId) {
       const rootConfig = state.rootConfig || await this.dispatch(Keys.INITIALIZE_ROOT_CONFIG);
+      commit(SET_IS_USING_LOCAL_CONFIG, false);
       if (!subConfigId) { // Use root config as config
         commit(SET_CONFIG, rootConfig);
         commit(SET_CURRENT_CONFIG_INFO, {});
@@ -350,6 +356,7 @@ const store = new Vuex.Store({
         }
         if (localSections.length > 0) {
           rootConfig.sections = localSections;
+          commit(SET_IS_USING_LOCAL_CONFIG, true);
         }
         return rootConfig;
       } else {
@@ -377,7 +384,10 @@ const store = new Vuex.Store({
           if (localSectionsRaw) {
             try {
               const json = JSON.parse(localSectionsRaw);
-              if (json.length >= 1) configContent.sections = json;
+              if (json.length >= 1) {
+                configContent.sections = json;
+                commit(SET_IS_USING_LOCAL_CONFIG, true);
+              }
             } catch (e) {
               ErrorHandler('Malformed section data in local storage for sub-config');
             }

src/utils/StoreMutations.js

@@ -6,6 +6,7 @@ const KEY_NAMES = [
   'SET_CONFIG',
   'SET_ROOT_CONFIG',
   'SET_CURRENT_CONFIG_INFO',
+  'SET_IS_USING_LOCAL_CONFIG',
   'SET_CURRENT_SUB_PAGE',
   'SET_MODAL_OPEN',
   'SET_LANGUAGE',

src/utils/defaults.js

@@ -116,7 +116,7 @@ module.exports = {
   /* Key names for local storage identifiers */
   localStorageKeys: {
     LANGUAGE: 'language',
-    HIDE_WELCOME_BANNER: 'hideWelcomeHelpers',
+    HIDE_INFO_NOTIFICATION: 'hideWelcomeHelpers',
     LAYOUT_ORIENTATION: 'layoutOrientation',
     COLLAPSE_STATE: 'collapseState',
     ICON_SIZE: 'iconSize',

src/views/Home.vue

@@ -56,6 +56,8 @@
     <EditModeSaveMenu v-if="isEditMode" />
     <!-- Modal for viewing and exporting configuration file -->
     <ExportConfigMenu />
+    <!-- Shows pertinent info -->
+    <NotificationThing v-if="$store.state.isUsingLocalConfig"/>
   </div>
 </template>
 
@@ -66,6 +68,7 @@ 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 NotificationThing from '@/components/Settings/LocalConfigWarning.vue';
 import StoreKeys from '@/utils/StoreMutations';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 import ErrorHandler from '@/utils/ErrorHandler';
@@ -79,6 +82,7 @@ export default {
     EditModeSaveMenu,
     ExportConfigMenu,
     AddNewSection,
+    NotificationThing,
     Section,
     BackIcon,
   },