✨ Adds an App Info section, to help users raise bug for current version

src/components/Settings/AppButtons.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div class="display-options">
+      <IconLogout @click="logout()" v-tooltip="tooltip('Sign Out')"
+        class="layout-icon" tabindex="-2" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { logout as registerLogout } from '@/utils/Auth';
+import IconLogout from '@/assets/interface-icons/user-logout.svg';
+
+export default {
+  name: 'AppButtons',
+  components: {
+    IconLogout,
+  },
+  methods: {
+    logout() {
+      registerLogout();
+      this.$toasted.show('Logged Out');
+      setTimeout(() => {
+        location.reload(true); // eslint-disable-line no-restricted-globals
+      }, 500);
+    },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+span.options-label {
+  color: var(--settings-text-color);
+}
+
+.display-options {
+  color: var(--settings-text-color);
+  svg {
+    path {
+      fill: var(--settings-text-color);
+    }
+    width: 1rem;
+    height: 1rem;
+    margin: 0.2rem;
+    padding: 0.2rem;
+    text-align: center;
+    background: var(--background);
+    border: 1px solid currentColor;
+    border-radius: var(--curve-factor);
+    cursor: pointer;
+    &:hover, &.selected {
+      background: var(--settings-text-color);
+      path { fill: var(--background); }
+    }
+  }
+}
+
+</style>

src/components/Settings/SettingsContainer.vue

@@ -13,12 +13,7 @@
         <ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
         <ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
           @modalChanged="modalChanged" />
-        <IconLogout
-          v-if="isUserLoggedIn()"
-          @click="logout()"
-          v-tooltip="'Logout'"
-          class="logout-icon"
-        />
+        <AppButtons  v-if="isUserLoggedIn()" />
       </div>
       <div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
         <button @click="toggleSettingsVisibility()"
@@ -29,6 +24,7 @@
       </div>
     </div>
     <KeyboardShortcutInfo />
+    <AppInfoModal />
   </section>
 </template>
 
@@ -39,9 +35,10 @@ import ConfigLauncher from '@/components/Settings/ConfigLauncher';
 import ThemeSelector from '@/components/Settings/ThemeSelector';
 import LayoutSelector from '@/components/Settings/LayoutSelector';
 import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
+import AppButtons from '@/components/Settings/AppButtons';
 import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
+import AppInfoModal from '@/components/Configuration/AppInfoModal';
 import { logout as registerLogout } from '@/utils/Auth';
-import IconLogout from '@/assets/interface-icons/user-logout.svg';
 import IconOpen from '@/assets/interface-icons/config-open-settings.svg';
 import IconClose from '@/assets/interface-icons/config-close.svg';
 
@@ -62,8 +59,9 @@ export default {
     ThemeSelector,
     LayoutSelector,
     ItemSizeSelector,
+    AppButtons,
     KeyboardShortcutInfo,
-    IconLogout,
+    AppInfoModal,
     IconOpen,
     IconClose,
   },