feat: add upgrade modal for model upload when private models disabled

Add separate upgrade modal that displays when users without private models
try to upload models, prompting them to upgrade their subscription.

- Add upgrade modal with body, header, and footer components
- Conditionally show upgrade or upload modal based on privateModelsEnabled flag
- Integrate with subscription system via showSubscriptionDialog()
- Add localization keys for upgrade messaging

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: luke-mino-altherr

src/composables/useFeatureFlags.ts

@@ -9,7 +9,8 @@ export enum ServerFeatureFlag {
   SUPPORTS_PREVIEW_METADATA = 'supports_preview_metadata',
   MAX_UPLOAD_SIZE = 'max_upload_size',
   MANAGER_SUPPORTS_V4 = 'extension.manager.supports_v4',
-  MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled'
+  MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled',
+  PRIVATE_MODELS_ENABLED = 'private_models_enabled'
 }
 
 /**
@@ -31,6 +32,12 @@ export function useFeatureFlags() {
         ServerFeatureFlag.MODEL_UPLOAD_BUTTON_ENABLED,
         false
       )
+    },
+    get privateModelsEnabled() {
+      return api.getServerFeature(
+        ServerFeatureFlag.PRIVATE_MODELS_ENABLED,
+        false
+      )
     }
   })
 

src/locales/en/main.json

@@ -2124,6 +2124,8 @@
     "modelUploaded": "Model imported! 🎉",
     "findInLibrary": "Find it in the {type} section of the models library.",
     "finish": "Finish",
+    "upgradeToUnlockFeature": "Upgrade to unlock this feature",
+    "upgradeFeatureDescription": "This feature is only available with Creator or Pro plans.",
     "allModels": "All Models",
     "allCategory": "All {category}",
     "unknown": "Unknown",

src/platform/assets/components/AssetBrowserModal.vue

@@ -75,6 +75,8 @@ import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
 import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
 import UploadModelDialog from '@/platform/assets/components/UploadModelDialog.vue'
 import UploadModelDialogHeader from '@/platform/assets/components/UploadModelDialogHeader.vue'
+import UploadModelUpgradeModal from '@/platform/assets/components/UploadModelUpgradeModal.vue'
+import UploadModelUpgradeModalHeader from '@/platform/assets/components/UploadModelUpgradeModalHeader.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
@@ -193,21 +195,37 @@ const { flags } = useFeatureFlags()
 const isUploadButtonEnabled = computed(() => flags.modelUploadButtonEnabled)
 
 function handleUploadClick() {
-  dialogStore.showDialog({
-    key: 'upload-model',
-    headerComponent: UploadModelDialogHeader,
-    component: UploadModelDialog,
-    props: {
-      onUploadSuccess: async () => {
-        await execute()
+  if (!flags.privateModelsEnabled) {
+    // Show upgrade modal if private models are disabled
+    dialogStore.showDialog({
+      key: 'upload-model-upgrade',
+      headerComponent: UploadModelUpgradeModalHeader,
+      component: UploadModelUpgradeModal,
+      dialogComponentProps: {
+        pt: {
+          header: 'py-0! pl-0!',
+          content: 'p-0!'
+        }
       }
-    },
-    dialogComponentProps: {
-      pt: {
-        header: 'py-0! pl-0!',
-        content: 'p-0!'
+    })
+  } else {
+    // Show regular upload modal
+    dialogStore.showDialog({
+      key: 'upload-model',
+      headerComponent: UploadModelDialogHeader,
+      component: UploadModelDialog,
+      props: {
+        onUploadSuccess: async () => {
+          await execute()
+        }
+      },
+      dialogComponentProps: {
+        pt: {
+          header: 'py-0! pl-0!',
+          content: 'p-0!'
+        }
       }
-    }
-  })
+    })
+  }
 }
 </script>

src/platform/assets/components/UploadModelUpgradeModal.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="upload-model-upgrade-modal flex flex-col justify-between gap-6 p-4 pt-6 border-t-[1px] border-border-default"
+  >
+    <!-- Upgrade Content -->
+    <UploadModelUpgradeModalBody />
+
+    <!-- Footer -->
+    <UploadModelUpgradeModalFooter
+      @close="handleClose"
+      @subscribe="handleSubscribe"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UploadModelUpgradeModalBody from '@/platform/assets/components/UploadModelUpgradeModalBody.vue'
+import UploadModelUpgradeModalFooter from '@/platform/assets/components/UploadModelUpgradeModalFooter.vue'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+import { useDialogStore } from '@/stores/dialogStore'
+
+const dialogStore = useDialogStore()
+const { showSubscriptionDialog } = useSubscription()
+
+function handleClose() {
+  dialogStore.closeDialog({ key: 'upload-model-upgrade' })
+}
+
+function handleSubscribe() {
+  showSubscriptionDialog()
+}
+</script>
+
+<style scoped>
+.upload-model-upgrade-modal {
+  width: 90vw;
+  max-width: 500px;
+  min-height: 200px;
+}
+
+@media (min-width: 640px) {
+  .upload-model-upgrade-modal {
+    width: auto;
+    min-width: 450px;
+  }
+}
+</style>

src/platform/assets/components/UploadModelUpgradeModalBody.vue

@@ -0,0 +1,11 @@
+<template>
+  <div
+    class="flex flex-1 flex-col items-center justify-center gap-6 text-base text-muted-foreground"
+  >
+    <p class="m-0 max-w-md">
+      {{ $t('assetBrowser.upgradeFeatureDescription') }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

src/platform/assets/components/UploadModelUpgradeModalFooter.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex justify-end gap-2 w-full">
+    <span
+      class="text-muted-foreground mr-auto underline flex items-center gap-2"
+    >
+      <i class="icon-[lucide--circle-question-mark]" />
+      <a
+        href="https://blog.comfy.org/p/comfy-cloud-new-features-and-pricing"
+        target="_blank"
+        class="text-muted-foreground"
+        >{{ $t('Learn more') }}</a
+      >
+    </span>
+    <TextButton
+      :label="$t('g.close')"
+      type="transparent"
+      size="md"
+      @click="emit('close')"
+    />
+    <TextButton
+      :label="$t('Subscribe')"
+      type="secondary"
+      size="md"
+      @click="emit('subscribe')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import TextButton from '@/components/button/TextButton.vue'
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'subscribe'): void
+}>()
+</script>

src/platform/assets/components/UploadModelUpgradeModalHeader.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex items-center gap-2 p-4 font-bold">
+    <span>{{ $t('assetBrowser.upgradeToUnlockFeature') }}</span>
+  </div>
+</template>