[System Pop Up] Add help center with release notifications and "What's New" popup (#4256)

Co-authored-by: github-actions <[email protected]>

Author: 2 people

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -4,7 +4,6 @@
     <nav class="help-menu-section" role="menubar">
       <button
         v-for="menuItem in menuItems"
-        v-show="menuItem.visible !== false"
         :key="menuItem.key"
         type="button"
         class="help-menu-item"
@@ -30,20 +29,14 @@
         @mouseenter="onSubmenuHover"
         @mouseleave="onSubmenuLeave"
       >
-        <template
-          v-for="submenuItem in moreMenuItem?.items"
-          :key="submenuItem.key"
-        >
-          <div
-            v-if="submenuItem.type === 'divider'"
-            v-show="submenuItem.visible !== false"
-            class="submenu-divider"
-          />
+        <template v-for="submenuItem in submenuItems" :key="submenuItem.key">
+          <div v-if="submenuItem.type === 'divider'" class="submenu-divider" />
           <button
             v-else
-            v-show="submenuItem.visible !== false"
             type="button"
             class="help-menu-item submenu-item"
+            :class="{ disabled: submenuItem.disabled }"
+            :disabled="submenuItem.disabled"
             role="menuitem"
             @click="submenuItem.action"
           >
@@ -72,12 +65,7 @@
           <i class="pi pi-refresh help-menu-icon" aria-hidden="true" />
           <div class="release-content">
             <span class="release-title">
-              {{
-                $t('g.releaseTitle', {
-                  package: 'Comfy',
-                  version: release.version
-                })
-              }}
+              Comfy {{ release.version }} Release
             </span>
             <time class="release-date" :datetime="release.published_at">
               <span class="normal-state">
@@ -124,28 +112,32 @@ import { type CSSProperties, computed, nextTick, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { type ReleaseNote } from '@/services/releaseService'
-import { useCommandStore } from '@/stores/commandStore'
 import { useReleaseStore } from '@/stores/releaseStore'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 
 // Types
 interface MenuItem {
   key: string
-  icon?: string
+  icon: string
+  label: string
+  action: () => void
+}
+
+interface SubmenuItem {
+  key: string
+  type?: 'item' | 'divider'
   label?: string
   action?: () => void
-  visible?: boolean
-  type?: 'item' | 'divider'
-  items?: MenuItem[]
+  disabled?: boolean
 }
 
 // Constants
 const EXTERNAL_LINKS = {
   DOCS: 'https://docs.comfy.org/',
   DISCORD: 'https://www.comfy.org/discord',
   GITHUB: 'https://github.com/comfyanonymous/ComfyUI',
-  DESKTOP_GUIDE: 'https://comfyorg.notion.site/',
+  DESKTOP_GUIDE: 'https://docs.comfy.org/installation/desktop',
   UPDATE_GUIDE: 'https://docs.comfy.org/installation/update_comfyui'
 } as const
 
@@ -167,12 +159,6 @@ const SUBMENU_CONFIG = {
 // Composables
 const { t, locale } = useI18n()
 const releaseStore = useReleaseStore()
-const commandStore = useCommandStore()
-
-// Emits
-const emit = defineEmits<{
-  close: []
-}>()
 
 // State
 const isSubmenuVisible = ref(false)
@@ -183,99 +169,66 @@ let hoverTimeout: number | null = null
 // Computed
 const hasReleases = computed(() => releaseStore.releases.length > 0)
 
-const moreMenuItem = computed(() =>
-  menuItems.value.find((item) => item.key === 'more')
-)
-
-const menuItems = computed<MenuItem[]>(() => {
-  const moreItems: MenuItem[] = [
-    {
-      key: 'desktop-guide',
-      type: 'item',
-      label: t('helpCenter.desktopUserGuide'),
-      action: () => {
-        openExternalLink(EXTERNAL_LINKS.DESKTOP_GUIDE)
-        emit('close')
-      }
-    },
-    {
-      key: 'dev-tools',
-      type: 'item',
-      label: t('helpCenter.openDevTools'),
-      visible: isElectron(),
-      action: () => {
-        openDevTools()
-        emit('close')
-      }
-    },
-    {
-      key: 'divider-1',
-      type: 'divider',
-      visible: isElectron()
-    },
-    {
-      key: 'reinstall',
-      type: 'item',
-      label: t('helpCenter.reinstall'),
-      visible: isElectron(),
-      action: () => {
-        onReinstall()
-        emit('close')
-      }
-    }
-  ]
-
-  return [
-    {
-      key: 'docs',
-      type: 'item',
-      icon: 'pi pi-book',
-      label: t('helpCenter.docs'),
-      action: () => {
-        openExternalLink(EXTERNAL_LINKS.DOCS)
-        emit('close')
-      }
-    },
-    {
-      key: 'discord',
-      type: 'item',
-      icon: 'pi pi-discord',
-      label: 'Discord',
-      action: () => {
-        openExternalLink(EXTERNAL_LINKS.DISCORD)
-        emit('close')
-      }
-    },
-    {
-      key: 'github',
-      type: 'item',
-      icon: 'pi pi-github',
-      label: t('helpCenter.github'),
-      action: () => {
-        openExternalLink(EXTERNAL_LINKS.GITHUB)
-        emit('close')
-      }
-    },
-    {
-      key: 'help',
-      type: 'item',
-      icon: 'pi pi-question-circle',
-      label: t('helpCenter.helpFeedback'),
-      action: () => {
-        void commandStore.execute('Comfy.Feedback')
-        emit('close')
-      }
-    },
-    {
-      key: 'more',
-      type: 'item',
-      icon: '',
-      label: t('helpCenter.more'),
-      action: () => {}, // No action for more item
-      items: moreItems
-    }
-  ]
-})
+const menuItems = computed<MenuItem[]>(() => [
+  {
+    key: 'docs',
+    icon: 'pi pi-book',
+    label: t('helpCenter.docs'),
+    action: () => openExternalLink(EXTERNAL_LINKS.DOCS)
+  },
+  {
+    key: 'discord',
+    icon: 'pi pi-discord',
+    label: 'Discord',
+    action: () => openExternalLink(EXTERNAL_LINKS.DISCORD)
+  },
+  {
+    key: 'github',
+    icon: 'pi pi-github',
+    label: t('helpCenter.github'),
+    action: () => openExternalLink(EXTERNAL_LINKS.GITHUB)
+  },
+  {
+    key: 'help',
+    icon: 'pi pi-question-circle',
+    label: t('helpCenter.helpFeedback'),
+    action: () => openExternalLink(EXTERNAL_LINKS.DISCORD)
+  },
+  {
+    key: 'more',
+    icon: '',
+    label: t('helpCenter.more'),
+    action: () => {} // No action for more item
+  }
+])
+
+const submenuItems = computed<SubmenuItem[]>(() => [
+  {
+    key: 'desktop-guide',
+    type: 'item',
+    label: t('helpCenter.desktopUserGuide'),
+    action: () => openExternalLink(EXTERNAL_LINKS.DESKTOP_GUIDE),
+    disabled: false
+  },
+  {
+    key: 'dev-tools',
+    type: 'item',
+    label: t('helpCenter.openDevTools'),
+    action: openDevTools,
+    disabled: !isElectron()
+  },
+  {
+    key: 'divider-1',
+    type: 'divider'
+  },
+  {
+    key: 'reinstall',
+    type: 'item',
+    label: t('helpCenter.reinstall'),
+    action: onReinstall,
+    disabled: !isElectron()
+  }
+])
 
 // Utility Functions
 const openExternalLink = (url: string): void => {
@@ -293,12 +246,8 @@ const calculateSubmenuPosition = (button: HTMLElement): CSSProperties => {
   const rect = button.getBoundingClientRect()
   const submenuWidth = 210 // Width defined in CSS
 
-  // Get actual submenu height if available, otherwise estimate based on visible item count
-  const visibleItemCount =
-    moreMenuItem.value?.items?.filter((item) => item.visible !== false)
-      .length || 0
-  const estimatedHeight = visibleItemCount * 48 + 16 // ~48px per item + padding
-  const submenuHeight = submenuRef.value?.offsetHeight || estimatedHeight
+  // Get actual submenu height if available, otherwise use estimated height
+  const submenuHeight = submenuRef.value?.offsetHeight || 120 // More realistic estimate for 2 items
 
   // Get viewport dimensions
   const viewportWidth = window.innerWidth
@@ -328,8 +277,6 @@ const calculateSubmenuPosition = (button: HTMLElement): CSSProperties => {
     top = SUBMENU_CONFIG.OFFSET_PX
   }
 
-  top -= 8
-
   return {
     position: 'fixed',
     top: `${top}px`,
@@ -376,13 +323,7 @@ const onMenuItemHover = async (
   key: string,
   event: MouseEvent
 ): Promise<void> => {
-  if (key !== 'more' || !moreMenuItem.value?.items) return
-
-  // Don't show submenu if all items are hidden
-  const hasVisibleItems = moreMenuItem.value.items.some(
-    (item) => item.visible !== false
-  )
-  if (!hasVisibleItems) return
+  if (key !== 'more') return
 
   clearHoverTimeout()
 
@@ -434,12 +375,10 @@ const onReleaseClick = (release: ReleaseNote): void => {
   const versionAnchor = formatVersionAnchor(release.version)
   const changelogUrl = `${getChangelogUrl()}#${versionAnchor}`
   openExternalLink(changelogUrl)
-  emit('close')
 }
 
 const onUpdate = (_: ReleaseNote): void => {
   openExternalLink(EXTERNAL_LINKS.UPDATE_GUIDE)
-  emit('close')
 }
 
 // Generate language-aware changelog URL
@@ -607,6 +546,13 @@ onMounted(async () => {
   box-shadow: none;
 }
 
+.submenu-item.disabled,
+.submenu-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .submenu-divider {
   height: 1px;
   background: #3e3e3e;

src/views/GraphView.vue

@@ -15,6 +15,7 @@
 
   <GlobalToast />
   <RerouteMigrationToast />
+  <!-- Release toast now managed by SidebarHelpCenterIcon component -->
   <UnloadWindowConfirmDialog v-if="!isElectron()" />
   <MenuHamburger />
 </template>
@@ -218,6 +219,9 @@ onBeforeUnmount(() => {
 useEventListener(window, 'keydown', useKeybindingService().keybindHandler)
 
 const { wrapWithErrorHandling, wrapWithErrorHandlingAsync } = useErrorHandling()
+
+// Note: WhatsNew popup functionality is now handled directly by the toast
+
 const onGraphReady = () => {
   requestIdleCallback(
     () => {