[backport core/1.41] feat: add cloud notification modal for macOS desktop users (#10169)

Backport of #10116 to core/1.41.

Cherry-picked merge commit 912283a8e2.

Resolved conflict in `src/App.vue` (import deduplication — target branch
already had `electronAPI`, `isDesktop`, `app` imports; merged with new
imports for `useSettingStore`, `useDialogService`, `onUnmounted`;
dropped unused `useI18n`, `watch`, `useToastStore`,
`parsePreloadError`).

Original PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10116

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10169-backport-core-1-41-feat-add-cloud-notification-modal-for-macOS-desktop-users-3266d73d36508187afd4d5e3e6e7b2fb)
by [Unito](https://www.unito.io)

Co-authored-by: Deep Mehta <42841935+deepme987@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>

src/App.vue

@@ -13,17 +13,18 @@
 <script setup lang="ts">
 import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 
 import LogoComfyWaveLoader from '@/components/loader/LogoComfyWaveLoader.vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
-
-import { electronAPI } from '@/utils/envUtil'
 import { isDesktop } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
+import { useDialogService } from '@/services/dialogService'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { electronAPI } from '@/utils/envUtil'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
 const workspaceStore = useWorkspaceStore()
 app.extensionManager = useWorkspaceStore()
@@ -65,5 +66,26 @@ onMounted(() => {
   // Initialize conflict detection in background
   // This runs async and doesn't block UI setup
   void conflictDetection.initializeConflictDetection()
+
+  // Show cloud notification for macOS desktop users (one-time)
+  if (isDesktop && electronAPI()?.getPlatform() === 'darwin') {
+    const settingStore = useSettingStore()
+    if (!settingStore.get('Comfy.Desktop.CloudNotificationShown')) {
+      const dialogService = useDialogService()
+      cloudNotificationTimer = setTimeout(async () => {
+        try {
+          await dialogService.showCloudNotification()
+        } catch (e) {
+          console.warn('[CloudNotification] Failed to show', e)
+        }
+        await settingStore.set('Comfy.Desktop.CloudNotificationShown', true)
+      }, 2000)
+    }
+  }
+})
+
+let cloudNotificationTimer: ReturnType<typeof setTimeout> | undefined
+onUnmounted(() => {
+  if (cloudNotificationTimer) clearTimeout(cloudNotificationTimer)
 })
 </script>

src/locales/en/main.json

@@ -3566,5 +3566,16 @@
   "builderMenu": {
     "enterAppMode": "Enter app mode",
     "exitAppBuilder": "Exit app builder"
+  },
+  "cloudNotification": {
+    "title": "Run ComfyUI in the Cloud",
+    "message": "From setup to creation in seconds. Popular models, extensions, and powerful GPUs — ready when you are.",
+    "feature1Title": "400 Free Credits Monthly",
+    "feature2Title": "Works Anywhere, Instantly",
+    "feature3Title": "Models Ready to Use",
+    "feature4Title": "Top Custom Node Packs Pre-installed",
+    "footer": "ComfyUI stays free and open source. Cloud is optional.",
+    "continueLocally": "Continue Locally",
+    "exploreCloud": "Try Cloud for Free"
   }
 }

src/platform/cloud/notification/components/CloudNotificationContent.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="relative grid h-full grid-cols-5">
+    <Button
+      size="unset"
+      variant="muted-textonly"
+      class="absolute top-2.5 right-2.5 z-10 size-8 rounded-full p-0 text-white hover:bg-white/20"
+      :aria-label="t('g.close')"
+      @click="onDismiss"
+    >
+      <i class="pi pi-times" />
+    </Button>
+
+    <div
+      class="relative col-span-2 flex items-center justify-center overflow-hidden rounded-sm"
+    >
+      <video
+        autoplay
+        loop
+        muted
+        playsinline
+        class="-ml-[20%] h-full min-w-5/4 object-cover p-0"
+      >
+        <source
+          src="/assets/images/cloud-subscription.webm"
+          type="video/webm"
+        />
+      </video>
+    </div>
+
+    <div class="col-span-3 flex flex-col justify-between p-8">
+      <div>
+        <div class="flex flex-col gap-4">
+          <div class="text-sm font-semibold text-text-primary">
+            {{ t('cloudNotification.title') }}
+          </div>
+          <p class="m-0 text-sm text-text-secondary">
+            {{ t('cloudNotification.message') }}
+          </p>
+        </div>
+
+        <div class="mt-6 flex flex-col items-start gap-0 self-stretch">
+          <div v-for="n in 4" :key="n" class="flex items-center gap-2 py-2">
+            <i class="pi pi-check text-xs text-text-primary" />
+            <span class="text-sm text-text-primary">
+              {{ t(`cloudNotification.feature${n}Title`) }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2 pt-8">
+        <Button
+          variant="primary"
+          size="lg"
+          class="w-full font-bold"
+          @click="onExplore"
+        >
+          {{ t('cloudNotification.exploreCloud') }}
+        </Button>
+        <Button variant="textonly" size="sm" class="w-full" @click="onDismiss">
+          {{ t('cloudNotification.continueLocally') }}
+        </Button>
+        <p class="m-0 text-center text-xs text-text-secondary">
+          {{ t('cloudNotification.footer') }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useTelemetry } from '@/platform/telemetry'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const { t } = useI18n()
+
+onMounted(() => {
+  // Impression event — uses trackUiButtonClicked as no dedicated impression tracker exists
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'cloud_notification_modal_impression'
+  })
+})
+
+function onDismiss() {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'cloud_notification_continue_locally_clicked'
+  })
+  useDialogStore().closeDialog()
+}
+
+function onExplore() {
+  useTelemetry()?.trackUiButtonClicked({
+    button_id: 'cloud_notification_explore_cloud_clicked'
+  })
+
+  const params = new URLSearchParams({
+    utm_source: 'desktop',
+    utm_medium: 'onload-modal',
+    utm_campaign: 'local-to-cloud-conversion',
+    utm_id: 'desktop-onload-modal',
+    utm_source_platform: 'mac-desktop'
+  })
+
+  window.open(
+    `https://www.comfy.org/cloud?${params}`,
+    '_blank',
+    'noopener,noreferrer'
+  )
+  useDialogStore().closeDialog()
+}
+</script>

src/platform/settings/constants/coreSettings.ts

@@ -299,6 +299,12 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'boolean',
     defaultValue: true
   },
+  {
+    id: 'Comfy.Desktop.CloudNotificationShown',
+    name: 'Cloud notification shown',
+    type: 'hidden',
+    defaultValue: false
+  },
   {
     id: 'Comfy.Graph.ZoomSpeed',
     category: ['LiteGraph', 'Canvas', 'ZoomSpeed'],

src/schemas/apiSchema.ts

@@ -300,6 +300,7 @@ const zSettings = z.object({
   'Comfy.Workflow.ShowMissingNodesWarning': z.boolean(),
   'Comfy.Workflow.ShowMissingModelsWarning': z.boolean(),
   'Comfy.Workflow.WarnBlueprintOverwrite': z.boolean(),
+  'Comfy.Desktop.CloudNotificationShown': z.boolean(),
   'Comfy.DisableFloatRounding': z.boolean(),
   'Comfy.DisableSliders': z.boolean(),
   'Comfy.DOMClippingEnabled': z.boolean(),

src/services/dialogService.ts

@@ -28,6 +28,8 @@ const lazyUpdatePasswordContent = () =>
   import('@/components/dialog/content/UpdatePasswordContent.vue')
 const lazyComfyOrgHeader = () =>
   import('@/components/dialog/header/ComfyOrgHeader.vue')
+const lazyCloudNotificationContent = () =>
+  import('@/platform/cloud/notification/components/CloudNotificationContent.vue')
 
 export type ConfirmationDialogType =
   | 'default'
@@ -551,6 +553,25 @@ export const useDialogService = () => {
     })
   }
 
+  /** Shows one-time cloud notification modal for macOS desktop users. */
+  async function showCloudNotification(): Promise<void> {
+    const { default: component } = await lazyCloudNotificationContent()
+    return new Promise<void>((resolve) => {
+      showLayoutDialog({
+        key: 'global-cloud-notification',
+        component,
+        props: {},
+        dialogComponentProps: {
+          closable: false,
+          pt: {
+            root: { class: 'w-170 max-h-[85vh]' }
+          },
+          onClose: () => resolve()
+        }
+      })
+    })
+  }
+
   return {
     showExecutionErrorDialog,
     showApiNodesSignInDialog,
@@ -559,6 +580,7 @@ export const useDialogService = () => {
     showTopUpCreditsDialog,
     showUpdatePasswordDialog,
     showExtensionDialog,
+    showCloudNotification,
     prompt,
     showErrorDialog,
     confirm,