Add Help Menu in NodeLibrarySidebarTab (#3922)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Claude <noreply@anthropic.com>

src/components/graph/SelectionToolbox.vue

@@ -18,6 +18,7 @@
       :key="command.id"
       :command="command"
     />
+    <HelpButton />
   </Panel>
 </template>
 
@@ -30,6 +31,7 @@ import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerBu
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
+import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
 import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshButton from '@/components/graph/selectionToolbox/RefreshButton.vue'

src/components/graph/selectionToolbox/HelpButton.vue

@@ -0,0 +1,49 @@
+<template>
+  <Button
+    v-show="nodeDef"
+    v-tooltip.top="{
+      value: $t('g.help'),
+      showDelay: 1000
+    }"
+    class="help-button"
+    text
+    icon="pi pi-question-circle"
+    severity="secondary"
+    @click="showHelp"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
+import { useCanvasStore } from '@/stores/graphStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
+
+const canvasStore = useCanvasStore()
+const nodeDefStore = useNodeDefStore()
+const sidebarTabStore = useSidebarTabStore()
+const nodeHelpStore = useNodeHelpStore()
+const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
+
+const nodeDef = computed<ComfyNodeDefImpl | null>(() => {
+  if (canvasStore.selectedItems.length !== 1) return null
+  const item = canvasStore.selectedItems[0]
+  if (!isLGraphNode(item)) return null
+  return nodeDefStore.fromLGraphNode(item)
+})
+
+const showHelp = () => {
+  const def = nodeDef.value
+  if (!def) return
+  if (sidebarTabStore.activeSidebarTabId !== nodeLibraryTabId) {
+    sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
+  }
+  nodeHelpStore.openHelp(def)
+}
+</script>