Component menu improvements (#11592)

Closes #11431

<img width="283" alt="Screenshot 2024-11-19 at 5 29 22 PM" src="https://github.com/user-attachments/assets/f46fb5a2-7668-4bc7-9cb4-fbde26417b79">

# Important Notes
- I changed readable names for mouse buttons. Now they are `Click`, `Right click`, `Middle click` instead of `Mouse Left`, `MouseRight`, `Mouse Middle`. I would like to go with `LMB`, `RMB`, etc. but I understand it can be confusing. @AdRiley if you have some specific names in mind let me know.

app/gui/src/project-view/components/ComponentMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { graphBindings } from '@/bindings'
+import { graphBindings, nodeEditBindings } from '@/bindings'
 import ColorRing from '@/components/ColorRing.vue'
 import DropdownMenu from '@/components/DropdownMenu.vue'
 import MenuButton from '@/components/MenuButton.vue'
@@ -36,12 +36,13 @@ function closeDropdown() {
   isDropdownOpened.value = false
 }
 
-function openDocs(url: string) {
-  window.open(url, '_blank')
-}
-
-function readableBinding(binding: keyof (typeof graphBindings)['bindings']) {
-  return graphBindings.bindings[binding].humanReadable
+type BindingSpace<T extends string> = { bindings: Record<T, { humanReadable: string }> }
+type Binding<T extends string> = keyof BindingSpace<T>['bindings']
+function readableBinding<T extends string, BS extends BindingSpace<T>>(
+  binding: Binding<T>,
+  bindingSpace: BS,
+) {
+  return bindingSpace.bindings[binding].humanReadable
 }
 </script>
 
@@ -70,6 +71,10 @@ function readableBinding(binding: keyof (typeof graphBindings)['bindings']) {
       >
         <template #button><SvgIcon name="3_dot_menu" class="moreIcon" /></template>
         <template #entries>
+          <MenuButton @click.stop="closeDropdown(), emit('toggleDocPanel')">
+            <SvgIcon name="help" class="rowIcon" />
+            <span>Help</span>
+          </MenuButton>
           <MenuButton
             :modelValue="isVisualizationEnabled"
             @update:modelValue="emit('update:isVisualizationEnabled', $event)"
@@ -77,18 +82,18 @@ function readableBinding(binding: keyof (typeof graphBindings)['bindings']) {
           >
             <SvgIcon name="eye" class="rowIcon" />
             <span v-text="`${isVisualizationEnabled ? 'Hide' : 'Show'} Visualization`"></span>
-          </MenuButton>
-          <MenuButton
-            v-if="props.documentationUrl"
-            @click.stop="closeDropdown(), openDocs(props.documentationUrl)"
-          >
-            <SvgIcon name="help" class="rowIcon" />
-            <span>Help</span>
-            <span class="shortcutHint" v-text="`${readableBinding('openDocumentation')}`"></span>
+            <span
+              class="shortcutHint"
+              v-text="`${readableBinding('toggleVisualization', graphBindings)}`"
+            ></span>
           </MenuButton>
           <MenuButton @click.stop="closeDropdown(), emit('createNewNode')">
             <SvgIcon name="add" class="rowIcon" />
             <span>Add New Component</span>
+            <span
+              class="shortcutHint"
+              v-text="`${readableBinding('openComponentBrowser', graphBindings)}`"
+            ></span>
           </MenuButton>
           <MenuButton @click.stop="closeDropdown(), emit('startEditingComment')">
             <SvgIcon name="comment" class="rowIcon" />
@@ -117,6 +122,10 @@ function readableBinding(binding: keyof (typeof graphBindings)['bindings']) {
           <MenuButton data-testid="edit-button" @click.stop="closeDropdown(), emit('startEditing')">
             <SvgIcon name="edit" class="rowIcon" />
             <span>Code Edit</span>
+            <span
+              class="shortcutHint"
+              v-text="`${readableBinding('edit', nodeEditBindings)}`"
+            ></span>
           </MenuButton>
           <MenuButton
             data-testid="removeNode"
@@ -125,7 +134,10 @@ function readableBinding(binding: keyof (typeof graphBindings)['bindings']) {
           >
             <SvgIcon name="trash2" class="rowIcon" />
             <span>Remove Component</span>
-            <span class="shortcutHint" v-text="`${readableBinding('deleteSelected')}`"></span>
+            <span
+              class="shortcutHint"
+              v-text="`${readableBinding('deleteSelected', graphBindings)}`"
+            ></span>
           </MenuButton>
         </template>
       </DropdownMenu>

app/gui/src/project-view/components/GraphEditor/GraphNode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { nodeEditBindings } from '@/bindings'
-import CircularMenu from '@/components/CircularMenu.vue'
+import ComponentMenu from '@/components/ComponentMenu.vue'
 import GraphNodeComment from '@/components/GraphEditor/GraphNodeComment.vue'
 import GraphNodeMessage, {
   colorForMessageType,
@@ -481,7 +481,7 @@ function recomputeOnce() {
     >
       <SvgIcon name="record" />
     </button>
-    <CircularMenu
+    <ComponentMenu
       v-if="menuVisible"
       v-model:isVisualizationEnabled="isVisualizationEnabled"
       :isRecordingEnabledGlobally="projectStore.isRecordingEnabled"

app/gui/src/project-view/util/shortcuts.ts

@@ -65,9 +65,9 @@ const POINTER_BUTTON_FLAG = {
 
 /** Human-readable variants of pointer keys, for displaying to the user. Used in {@link BindingInfo} */
 const HUMAN_READABLE_POINTER = {
-  PointerMain: 'Mouse Left',
-  PointerSecondary: 'Mouse Right',
-  PointerAux: 'Mouse Middle',
+  PointerMain: 'Click',
+  PointerSecondary: 'Right click',
+  PointerAux: 'Middle click',
   PointerBack: 'Mouse Back',
   PointerForward: 'Mouse Forward',
 }
@@ -145,6 +145,7 @@ const allKeys = [
   'PageDown',
   'Insert',
   'Space',
+  ' ',
   'A',
   'B',
   'C',
@@ -269,6 +270,7 @@ const HUMAN_READABLE_KEYS: Partial<Record<Key, string>> = {
   ArrowDown: 'Arrow down',
   PageUp: 'Page up',
   PageDown: 'Page down',
+  ' ': 'Space',
 }
 
 // `never extends T ? Result : InferenceSource` is a trick to unify `T` with the actual type of the