chore: better key label display for cmd and alt in macos (#428)

src/components/ModalVault.svelte

@@ -14,6 +14,7 @@
   import { createNote, openNote } from '../tools/notes'
   import {
     getCtrlKeyLabel,
+    getAltKeyLabel,
     getExtension,
     isFilePDF,
     loopIndex,
@@ -44,20 +45,20 @@
   let openInCurrentPaneKey: string
   let createInNewPaneKey: string
   let createInCurrentPaneKey: string
-  let openInNewLeafKey: string = getCtrlKeyLabel() + ' alt ↵'
+  let openInNewLeafKey: string = getCtrlKeyLabel() + getAltKeyLabel() + ' ↵'
 
   $: selectedNote = resultNotes[selectedIndex]
   $: searchQuery = searchQuery ?? previousQuery
   $: if (plugin.settings.openInNewPane) {
     openInNewPaneKey = '↵'
     openInCurrentPaneKey = getCtrlKeyLabel() + ' ↵'
-    createInNewPaneKey = 'shift ↵'
+    createInNewPaneKey = 'Shift ↵'
-    createInCurrentPaneKey = getCtrlKeyLabel() + ' shift ↵'
+    createInCurrentPaneKey = getCtrlKeyLabel() + ' Shift ↵'
   } else {
     openInNewPaneKey = getCtrlKeyLabel() + ' ↵'
     openInCurrentPaneKey = '↵'
-    createInNewPaneKey = getCtrlKeyLabel() + ' shift ↵'
+    createInNewPaneKey = getCtrlKeyLabel() + ' Shift ↵'
-    createInCurrentPaneKey = 'shift ↵'
+    createInCurrentPaneKey = 'Shift ↵'
   }
   $: if (searchQuery) {
     updateResultsDebounced()
@@ -354,7 +355,7 @@
     <span class="prompt-instruction-command">↑↓</span><span>to navigate</span>
   </div>
   <div class="prompt-instruction">
-    <span class="prompt-instruction-command">alt ↑↓</span>
+    <span class="prompt-instruction-command">{getAltKeyLabel()} ↑↓</span>
     <span>to cycle history</span>
   </div>
   <div class="prompt-instruction">
@@ -362,7 +363,7 @@
     <span>to open</span>
   </div>
   <div class="prompt-instruction">
-    <span class="prompt-instruction-command">tab</span>
+    <span class="prompt-instruction-command">Tab</span>
     <span>to switch to In-File Search</span>
   </div>
 
@@ -391,14 +392,14 @@
   </div>
 
   <div class="prompt-instruction">
-    <span class="prompt-instruction-command">alt ↵</span>
+    <span class="prompt-instruction-command">{getAltKeyLabel()} ↵</span>
     <span>to insert a link</span>
   </div>
   <div class="prompt-instruction">
-    <span class="prompt-instruction-command">ctrl g</span>
+    <span class="prompt-instruction-command">Ctrl g</span>
     <span>to toggle excerpts</span>
   </div>
   <div class="prompt-instruction">
-    <span class="prompt-instruction-command">esc</span><span>to close</span>
+    <span class="prompt-instruction-command">Esc</span><span>to close</span>
   </div>
 </div>

src/settings.ts

@@ -11,7 +11,7 @@ import {
 import { writable } from 'svelte/store'
 import { K_DISABLE_OMNISEARCH } from './globals'
 import type OmnisearchPlugin from './main'
-import { enableVerboseLogging } from './tools/utils'
+import { enableVerboseLogging, getCtrlKeyLabel } from './tools/utils'
 import { debounce } from 'lodash-es'
 
 interface WeightingSettings {
@@ -398,9 +398,7 @@ export class SettingsTab extends PluginSettingTab {
     // Set Vim like navigation keys
     new Setting(containerEl)
       .setName('Set Vim like navigation keys')
-      .setDesc(
+      .setDesc(`Navigate down the results with ${getCtrlKeyLabel()} + J/N, or navigate up with ${getCtrlKeyLabel()} + K/P.`)
-        'Navigate down the results with Ctrl/⌘ + J/N, or navigate up with Ctrl/⌘ + K/P'
-      )
       .addToggle(toggle =>
         toggle
           .setValue(settings.vimLikeNavigationShortcut)

src/tools/utils.ts

@@ -145,8 +145,12 @@ export function removeDiacritics(str: string, arabic = false): string {
   return str
 }
 
-export function getCtrlKeyLabel(): 'ctrl' | '⌘' {
+export function getCtrlKeyLabel(): 'Ctrl' | '⌘' {
-  return Platform.isMacOS ? '⌘' : 'ctrl'
+  return Platform.isMacOS ? '⌘' : 'Ctrl'
+}
+
+export function getAltKeyLabel(): 'Alt' | '⌥' {
+  return Platform.isMacOS ? '⌥' : 'Alt'
 }
 
 export function isFileImage(path: string): boolean {