From 88ccda8fd1721bf429bb3b1e21cf366d1dcd717f Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 19 Jul 2021 22:12:56 +0530
Subject: [PATCH] feat: shortcuts indicator toggle

---
 components/app/Header.vue       |  5 +----
 components/button/Primary.vue   | 16 +++++++++++++++-
 components/button/Secondary.vue | 16 +++++++++++++++-
 lang/en-US.json                 |  3 ++-
 newstore/settings.ts            |  2 ++
 pages/settings.vue              | 16 ++++++++++++++++
 6 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/components/app/Header.vue b/components/app/Header.vue
index dd12538b3..08f9797e8 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -74,10 +74,7 @@
           <template #trigger>
             <TabPrimary
               v-tippy="{ theme: 'tooltip' }"
-              :title="
-                $t('more') +
-                `<kbd class='shortcut'>${getSpecialKey()}</kbd><kbd class='shortcut'>M</kbd>`
-              "
+              :title="$t('more')"
               icon="drag_indicator"
             />
           </template>
diff --git a/components/button/Primary.vue b/components/button/Primary.vue
index cff5dc743..b8c90b2eb 100644
--- a/components/button/Primary.vue
+++ b/components/button/Primary.vue
@@ -53,7 +53,7 @@
         class="svg-icons"
       />
       {{ label }}
-      <div v-if="shortcuts.length" class="ml-2">
+      <div v-if="shortcuts.length && SHORTCUTS_INDICATOR_ENABLED" class="ml-2">
         <kbd
           v-for="(key, index) in shortcuts"
           :key="`key-${index}`"
@@ -68,6 +68,8 @@
 </template>
 
 <script>
+import { getSettingSubject } from "~/newstore/settings"
+
 export default {
   props: {
     to: {
@@ -135,5 +137,17 @@ export default {
       default: () => [],
     },
   },
+  data() {
+    return {
+      SHORTCUTS_INDICATOR_ENABLED: null,
+    }
+  },
+  subscriptions() {
+    return {
+      SHORTCUTS_INDICATOR_ENABLED: getSettingSubject(
+        "SHORTCUTS_INDICATOR_ENABLED"
+      ),
+    }
+  },
 }
 </script>
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index 2765f5915..43a488681 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -41,7 +41,7 @@
       class="svg-icons"
     />
     {{ label }}
-    <div v-if="shortcuts.length" class="ml-2">
+    <div v-if="shortcuts.length && SHORTCUTS_INDICATOR_ENABLED" class="ml-2">
       <kbd
         v-for="(key, index) in shortcuts"
         :key="`key-${index}`"
@@ -61,6 +61,8 @@
 </template>
 
 <script>
+import { getSettingSubject } from "~/newstore/settings"
+
 export default {
   props: {
     to: {
@@ -112,5 +114,17 @@ export default {
       default: () => [],
     },
   },
+  data() {
+    return {
+      SHORTCUTS_INDICATOR_ENABLED: null,
+    }
+  },
+  subscriptions() {
+    return {
+      SHORTCUTS_INDICATOR_ENABLED: getSettingSubject(
+        "SHORTCUTS_INDICATOR_ENABLED"
+      ),
+    }
+  },
 }
 </script>
diff --git a/lang/en-US.json b/lang/en-US.json
index 580c23f38..2fee11acd 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -346,5 +346,6 @@
   "interceptor": "Interceptor",
   "profile": "Profile",
   "are_you_sure_logout": "Are you sure you want to logout?",
-  "telemetry": "Telemetry"
+  "telemetry": "Telemetry",
+  "shortcuts_indicator": "Shortcuts indicator"
 }
diff --git a/newstore/settings.ts b/newstore/settings.ts
index 7fa279aba..36add6d75 100644
--- a/newstore/settings.ts
+++ b/newstore/settings.ts
@@ -42,6 +42,7 @@ export type SettingsType = {
   THEME_COLOR: HoppAccentColor
   BG_COLOR: HoppBgColor
   TELEMETRY_ENABLED: boolean
+  SHORTCUTS_INDICATOR_ENABLED: boolean
 }
 
 export const defaultSettings: SettingsType = {
@@ -64,6 +65,7 @@ export const defaultSettings: SettingsType = {
   THEME_COLOR: "green",
   BG_COLOR: "system",
   TELEMETRY_ENABLED: true,
+  SHORTCUTS_INDICATOR_ENABLED: false,
 }
 
 const validKeys = Object.keys(defaultSettings)
diff --git a/pages/settings.vue b/pages/settings.vue
index 2004357ed..f38c6254f 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -171,6 +171,17 @@
                   {{ TELEMETRY_ENABLED ? $t("enabled") : $t("disabled") }}
                 </SmartToggle>
               </div>
+              <div class="flex items-center">
+                <SmartToggle
+                  :on="SHORTCUTS_INDICATOR_ENABLED"
+                  @change="toggleSetting('SHORTCUTS_INDICATOR_ENABLED')"
+                >
+                  {{ $t("shortcuts_indicator") }}
+                  {{
+                    SHORTCUTS_INDICATOR_ENABLED ? $t("enabled") : $t("disabled")
+                  }}
+                </SmartToggle>
+              </div>
             </div>
           </fieldset>
         </div>
@@ -332,6 +343,8 @@ export default Vue.extend({
       confirmRemove: false,
 
       TELEMETRY_ENABLED: null,
+
+      SHORTCUTS_INDICATOR_ENABLED: null,
     }
   },
   subscriptions() {
@@ -353,6 +366,9 @@ export default Vue.extend({
       SYNC_HISTORY: getSettingSubject("syncHistory"),
 
       TELEMETRY_ENABLED: getSettingSubject("TELEMETRY_ENABLED"),
+      SHORTCUTS_INDICATOR_ENABLED: getSettingSubject(
+        "SHORTCUTS_INDICATOR_ENABLED"
+      ),
 
       currentUser: currentUser$,
     }