Add keyboard shortcut hint to search menu option

diff --git a/client/components/PrimeMenu.vue b/client/components/PrimeMenu.vue
index f879e0ebad23ddb655245e65f2814a21acada6af..f5895c3f8e7270dface7feb572917759e62c8936 100644 (file)
--- a/client/components/PrimeMenu.vue
+++ b/client/components/PrimeMenu.vue
@@ -1,11 +1,14 @@
 <template>
   <Menu ref="menu" :pt="style">
     <template #item="{ item, props }">
-      <IconLabel
-        :iconPath="item.icon"
-        :label="item.label"
-        v-bind="props.action"
-      />
+      <div class="flex items-center justify-between" v-bind="props.action">
+        <IconLabel :iconPath="item.icon" :label="item.label" />
+        <span
+          v-if="item.keyboardShortcut"
+          class="ml-4 rounded bg-theme-background-elevated px-3 py-1 text-xs"
+          >{{ item.keyboardShortcut }}</span
+        >
+      </div>
     </template>
   </Menu>
 </template>
@@ -24,8 +27,7 @@ const style = {
       "text-theme-text-muted rounded px-2 py-1",
       "hover:bg-theme-background-elevated hover:cursor-pointer",
       {
-        "bg-theme-background-elevated":
-          context.focused,
+        "bg-theme-background-elevated": context.focused,
       },
     ],
   }),

diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 1769651628db84e7d264339984887be8fc7fe2bb..1d2ccdd0ee0c3f9a9b796128989d7f3e352aea78 100644 (file)
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -50,6 +50,7 @@ const menuItems = [
     label: "Search",\r
     icon: mdilMagnify,\r
     command: () => emit("toggleSearchModal"),\r
+    keyboardShortcut: "/",\r
   },\r
   {\r
     label: "All Notes",\r