feat: shortcuts indicator toggle

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>

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>

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>

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"
 }

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)

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