Merge branch 'rh-test' into bl-backport-something

Author: benceruleanlu

packages/design-system/src/css/style.css

@@ -129,6 +129,8 @@
   --button-surface: var(--color-white);
   --button-surface-contrast: var(--color-black);
 
+  --subscription-button-gradient: linear-gradient(315deg, rgb(105 230 255 / 0.15) 0%, rgb(99 73 233 / 0.50) 100%), radial-gradient(70.71% 70.71% at 50% 50%, rgb(62 99 222 / 0.15) 0.01%, rgb(66 0 123 / 0.50) 100%), linear-gradient(92deg, #D000FF 0.38%, #B009FE 37.07%, #3E1FFC 65.17%, #009DFF 103.86%), var(--color-button-surface, #2D2E32);
+
   --modal-card-button-surface: var(--color-smoke-300);
 
   /* Code styling colors for help menu*/
@@ -180,6 +182,8 @@
   --button-active-surface: var(--color-charcoal-600);
   --button-icon: var(--color-smoke-800);
 
+  --subscription-button-gradient: linear-gradient(315deg, rgb(105 230 255 / 0.15) 0%, rgb(99 73 233 / 0.50) 100%), radial-gradient(70.71% 70.71% at 50% 50%, rgb(62 99 222 / 0.15) 0.01%, rgb(66 0 123 / 0.50) 100%), linear-gradient(92deg, #D000FF 0.38%, #B009FE 37.07%, #3E1FFC 65.17%, #009DFF 103.86%), var(--color-button-surface, #2D2E32);
+
   --modal-card-button-surface: var(--color-charcoal-300);
 
   --dialog-surface: var(--color-neutral-700);
@@ -215,6 +219,7 @@
   --color-button-icon: var(--button-icon);
   --color-button-surface: var(--button-surface);
   --color-button-surface-contrast: var(--button-surface-contrast);
+  --color-subscription-button-gradient: var(--subscription-button-gradient);
   --color-modal-card-button-surface: var(--modal-card-button-surface);
   --color-dialog-surface: var(--dialog-surface);
   --color-node-component-border: var(--node-component-border);

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -380,7 +380,7 @@
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconButton from '@/components/button/IconButton.vue'
@@ -401,6 +401,8 @@ import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
 import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
 import { useLazyPagination } from '@/composables/useLazyPagination'
 import { useTemplateFiltering } from '@/composables/useTemplateFiltering'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
 import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
 import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
@@ -410,10 +412,34 @@ import { createGridStyle } from '@/utils/gridUtil'
 
 const { t } = useI18n()
 
-const { onClose } = defineProps<{
+const { onClose: originalOnClose } = defineProps<{
   onClose: () => void
 }>()
 
+// Track session time for telemetry
+const sessionStartTime = ref<number>(0)
+const templateWasSelected = ref(false)
+
+onMounted(() => {
+  sessionStartTime.value = Date.now()
+})
+
+// Wrap onClose to track session end
+const onClose = () => {
+  if (isCloud) {
+    const timeSpentSeconds = Math.floor(
+      (Date.now() - sessionStartTime.value) / 1000
+    )
+
+    useTelemetry()?.trackTemplateLibraryClosed({
+      template_selected: templateWasSelected.value,
+      time_spent_seconds: timeSpentSeconds
+    })
+  }
+
+  originalOnClose()
+}
+
 provide(OnCloseKey, onClose)
 
 // Workflow templates store and composable
@@ -698,6 +724,7 @@ const onLoadWorkflow = async (template: any) => {
       template.name,
       getEffectiveSourceModule(template)
     )
+    templateWasSelected.value = true
     onClose()
   } finally {
     loadingTemplate.value = null

src/components/sidebar/SidebarTemplatesButton.vue

@@ -12,19 +12,18 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCommandStore } from '@/stores/commandStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 
 const settingStore = useSettingStore()
-const commandStore = useCommandStore()
 
 const isSmall = computed(
   () => settingStore.get('Comfy.Sidebar.Size') === 'small'
 )
 
 const openTemplates = () => {
-  void commandStore.execute('Comfy.BrowseTemplates')
+  useWorkflowTemplateSelectorDialog().show('sidebar')
 }
 </script>

src/components/topbar/CommandMenubar.vue

@@ -80,6 +80,7 @@ import { useI18n } from 'vue-i18n'
 
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
+import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
 import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useColorPaletteService } from '@/services/colorPaletteService'
@@ -168,7 +169,7 @@ const extraMenuItems = computed(() => [
     key: 'browse-templates',
     label: t('menuLabels.Browse Templates'),
     icon: 'icon-[comfy--template]',
-    command: () => commandStore.execute('Comfy.BrowseTemplates')
+    command: () => useWorkflowTemplateSelectorDialog().show('menu')
   },
   {
     key: 'settings',

src/components/topbar/CurrentUserPopover.test.ts

@@ -79,9 +79,11 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
 }))
 
 // Mock the useSubscription composable
+const mockFetchStatus = vi.fn().mockResolvedValue(undefined)
 vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   useSubscription: vi.fn(() => ({
-    isActiveSubscription: vi.fn().mockReturnValue(true)
+    isActiveSubscription: { value: true },
+    fetchStatus: mockFetchStatus
   }))
 }))
 
@@ -105,6 +107,15 @@ vi.mock('@/components/common/UserCredit.vue', () => ({
   }
 }))
 
+vi.mock('@/platform/cloud/subscription/components/SubscribeButton.vue', () => ({
+  default: {
+    name: 'SubscribeButtonMock',
+    render() {
+      return h('div', 'Subscribe Button')
+    }
+  }
+}))
+
 describe('CurrentUserPopover', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -137,9 +148,9 @@ describe('CurrentUserPopover', () => {
   it('renders logout button with correct props', () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the logout button (second one)
+    // Find all buttons and get the logout button (last button)
     const buttons = wrapper.findAllComponents(Button)
-    const logoutButton = buttons[1]
+    const logoutButton = buttons[4]
 
     // Check that logout button has correct props
     expect(logoutButton.props('label')).toBe('Log Out')
@@ -149,9 +160,9 @@ describe('CurrentUserPopover', () => {
   it('opens user settings and emits close event when settings button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the settings button (first one)
+    // Find all buttons and get the settings button (third button)
     const buttons = wrapper.findAllComponents(Button)
-    const settingsButton = buttons[0]
+    const settingsButton = buttons[2]
 
     // Click the settings button
     await settingsButton.trigger('click')
@@ -167,9 +178,9 @@ describe('CurrentUserPopover', () => {
   it('calls logout function and emits close event when logout button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the logout button (second one)
+    // Find all buttons and get the logout button (last button)
     const buttons = wrapper.findAllComponents(Button)
-    const logoutButton = buttons[1]
+    const logoutButton = buttons[4]
 
     // Click the logout button
     await logoutButton.trigger('click')
@@ -185,16 +196,16 @@ describe('CurrentUserPopover', () => {
   it('opens API pricing docs and emits close event when API pricing button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the API pricing button (third one now)
+    // Find all buttons and get the Partner Nodes info button (first one)
     const buttons = wrapper.findAllComponents(Button)
-    const apiPricingButton = buttons[2]
+    const partnerNodesButton = buttons[0]
 
-    // Click the API pricing button
-    await apiPricingButton.trigger('click')
+    // Click the Partner Nodes button
+    await partnerNodesButton.trigger('click')
 
     // Verify window.open was called with the correct URL
     expect(window.open).toHaveBeenCalledWith(
-      'https://docs.comfy.org/tutorials/api-nodes/pricing',
+      'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
       '_blank'
     )
 
@@ -206,9 +217,9 @@ describe('CurrentUserPopover', () => {
   it('opens top-up dialog and emits close event when top-up button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the top-up button (last one)
+    // Find all buttons and get the top-up button (second one)
     const buttons = wrapper.findAllComponents(Button)
-    const topUpButton = buttons[buttons.length - 1]
+    const topUpButton = buttons[1]
 
     // Click the top-up button
     await topUpButton.trigger('click')

src/components/topbar/CurrentUserPopover.vue

@@ -23,6 +23,38 @@
       </div>
     </div>
 
+    <div v-if="isActiveSubscription" class="flex items-center justify-between">
+      <div class="flex flex-col gap-1">
+        <UserCredit text-class="text-2xl" />
+        <Button
+          :label="$t('subscription.partnerNodesCredits')"
+          severity="secondary"
+          text
+          size="small"
+          class="pl-6 p-0 h-auto justify-start"
+          :pt="{
+            root: {
+              class: 'hover:bg-transparent active:bg-transparent'
+            }
+          }"
+          @click="handleOpenPartnerNodesInfo"
+        />
+      </div>
+      <Button
+        :label="$t('credits.topUp.topUp')"
+        severity="secondary"
+        size="small"
+        @click="handleTopUp"
+      />
+    </div>
+    <SubscribeButton
+      v-else
+      :label="$t('subscription.subscribeToComfyCloud')"
+      size="small"
+      variant="gradient"
+      @subscribed="handleSubscribed"
+    />
+
     <Divider class="my-2" />
 
     <Button
@@ -35,45 +67,28 @@
       @click="handleOpenUserSettings"
     />
 
-    <Divider class="my-2" />
-
     <Button
+      v-if="isActiveSubscription"
       class="justify-start"
-      :label="$t('auth.signOut.signOut')"
-      icon="pi pi-sign-out"
+      :label="$t(planSettingsLabel)"
+      icon="pi pi-receipt"
       text
       fluid
       severity="secondary"
-      @click="handleLogout"
+      @click="handleOpenPlanAndCreditsSettings"
     />
 
     <Divider class="my-2" />
 
     <Button
       class="justify-start"
-      :label="$t('credits.apiPricing')"
-      icon="pi pi-external-link"
+      :label="$t('auth.signOut.signOut')"
+      icon="pi pi-sign-out"
       text
       fluid
       severity="secondary"
-      @click="handleOpenApiPricing"
+      @click="handleLogout"
     />
-
-    <Divider class="my-2" />
-
-    <div class="flex w-full flex-col gap-2 p-2">
-      <div class="text-sm text-muted">
-        {{ $t('credits.yourCreditBalance') }}
-      </div>
-      <div class="flex items-center justify-between">
-        <UserCredit text-class="text-2xl" />
-        <Button
-          v-if="isActiveSubscription"
-          :label="$t('credits.topUp.topUp')"
-          @click="handleTopUp"
-        />
-      </div>
-    </div>
   </div>
 </template>
 
@@ -86,37 +101,60 @@ import UserAvatar from '@/components/common/UserAvatar.vue'
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { isCloud } from '@/platform/distribution/types'
 import { useDialogService } from '@/services/dialogService'
 
 const emit = defineEmits<{
   close: []
 }>()
 
+const planSettingsLabel = isCloud
+  ? 'settingsCategories.PlanCredits'
+  : 'settingsCategories.Credits'
+
 const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const dialogService = useDialogService()
-const { isActiveSubscription } = useSubscription()
+const { isActiveSubscription, fetchStatus } = useSubscription()
 
 const handleOpenUserSettings = () => {
   dialogService.showSettingsDialog('user')
   emit('close')
 }
 
+const handleOpenPlanAndCreditsSettings = () => {
+  if (isCloud) {
+    dialogService.showSettingsDialog('subscription')
+  } else {
+    dialogService.showSettingsDialog('credits')
+  }
+
+  emit('close')
+}
+
 const handleTopUp = () => {
   dialogService.showTopUpCreditsDialog()
   emit('close')
 }
 
+const handleOpenPartnerNodesInfo = () => {
+  window.open(
+    'https://docs.comfy.org/tutorials/api-nodes/overview#api-nodes',
+    '_blank'
+  )
+  emit('close')
+}
+
 const handleLogout = async () => {
   await handleSignOut()
   emit('close')
 }
 
-const handleOpenApiPricing = () => {
-  window.open('https://docs.comfy.org/tutorials/api-nodes/pricing', '_blank')
-  emit('close')
+const handleSubscribed = async () => {
+  await fetchStatus()
 }
 
 onMounted(() => {

src/composables/useWorkflowTemplateSelectorDialog.ts

@@ -1,4 +1,5 @@
 import WorkflowTemplateSelectorDialog from '@/components/custom/widget/WorkflowTemplateSelectorDialog.vue'
+import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
 
@@ -12,7 +13,9 @@ export const useWorkflowTemplateSelectorDialog = () => {
     dialogStore.closeDialog({ key: DIALOG_KEY })
   }
 
-  function show() {
+  function show(source: 'sidebar' | 'menu' | 'command' = 'command') {
+    useTelemetry()?.trackTemplateLibraryOpened({ source })
+
     dialogService.showLayoutDialog({
       key: DIALOG_KEY,
       component: WorkflowTemplateSelectorDialog,