⚡ Less confusing handling of local config

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;