Manager Conflict Nofitication (#4443)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: bymyself <cbyrne@comfy.org>
Co-authored-by: Claude <noreply@anthropic.com>

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -42,6 +42,7 @@
           'sidebar-right': sidebarLocation === 'right',
           'small-sidebar': sidebarSize === 'small'
         }"
+        @whats-new-dismissed="handleWhatsNewDismissed"
       />
     </Teleport>
 
@@ -57,12 +58,14 @@
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref } from 'vue'
 
 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
 import ReleaseNotificationToast from '@/components/helpcenter/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/components/helpcenter/WhatsNewPopup.vue'
+import { useConflictBannerState } from '@/composables/useConflictBannerState'
+import { useConflictDetection } from '@/composables/useConflictDetection'
+import { useDialogService } from '@/services/dialogService'
 import { useReleaseStore } from '@/stores/releaseStore'
 import { useSettingStore } from '@/stores/settingStore'
 
@@ -70,9 +73,20 @@ import SidebarIcon from './SidebarIcon.vue'
 
 const settingStore = useSettingStore()
 const releaseStore = useReleaseStore()
-const { shouldShowRedDot } = storeToRefs(releaseStore)
+const conflictDetection = useConflictDetection()
+const conflictBannerState = useConflictBannerState()
+const dialogService = useDialogService()
 const isHelpCenterVisible = ref(false)
 
+// Use conflict banner state from composable
+const { shouldShowConflictRedDot } = conflictBannerState
+
+// Use either release red dot or conflict red dot
+const shouldShowRedDot = computed(() => {
+  const releaseRedDot = releaseStore.shouldShowRedDot
+  return releaseRedDot || shouldShowConflictRedDot.value
+})
+
 const sidebarLocation = computed(() =>
   settingStore.get('Comfy.Sidebar.Location')
 )
@@ -87,6 +101,44 @@ const closeHelpCenter = () => {
   isHelpCenterVisible.value = false
 }
 
+/**
+ * Handle What's New popup dismissal
+ * Check if conflict modal should be shown after ComfyUI update
+ */
+const handleWhatsNewDismissed = async () => {
+  try {
+    // Check if conflict modal should be shown after update
+    const shouldShow =
+      await conflictDetection.shouldShowConflictModalAfterUpdate()
+
+    if (shouldShow) {
+      showConflictModal()
+    }
+  } catch (error) {
+    console.error('[HelpCenter] Error checking conflict modal:', error)
+  }
+}
+
+/**
+ * Show the node conflict dialog with current conflict data
+ */
+const showConflictModal = () => {
+  // Pass conflict data to the dialog, including onClose callback
+  const conflictData = {
+    conflictedPackages: conflictDetection.conflictedPackages.value
+  }
+
+  // Show dialog with onClose callback in dialogComponentProps
+  dialogService.showNodeConflictDialog({
+    ...conflictData,
+    dialogComponentProps: {
+      onClose: () => {
+        conflictDetection.dismissConflictModal()
+      }
+    }
+  })
+}
+
 // Initialize release store on mount
 onMounted(async () => {
   // Initialize release store to fetch releases for toast and popup