fix: Display appropriate title for unsubscribed state (#6396)

## Summary

Fixes misleading title display in unsubscribed state of the
SubscriptionPanel.

### Changes Made

- **Conditional Title Logic**: Added state-aware title display in
`SubscriptionPanel.vue`
- **New Translation Key**: Added `subscription.titleUnsubscribed` →
"Subscribe to Comfy Cloud"
- **Prevents Confusion**: Eliminates "account created" or other
inappropriate messages showing as titles

### Behavior

- **Subscribed Users**: See "Subscription" (existing behavior)
- **Unsubscribed Users**: See "Subscribe to Comfy Cloud" (new, clearer
messaging)

### Testing

-  All existing SubscriptionPanel tests pass
-  TypeScript compilation successful
-  Linting passes
-  Follows translation patterns

### Context

This addresses the UX issue discovered on testcloud.comfy.org where
unsubscribed users were seeing misleading title text instead of clear
subscription prompts.

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

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6396-fix-Display-appropriate-title-for-unsubscribed-state-29c6d73d3650818a8136f6a99e312651)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Christian Byrne
2025-11-01 02:40:17 -07:00
committed by GitHub
parent c8e24190cd
commit f2aea9c823
2 changed files with 6 additions and 1 deletions

View File

@@ -1655,6 +1655,7 @@
},
"subscription": {
"title": "Subscription",
"titleUnsubscribed": "Subscribe to Comfy Cloud",
"comfyCloud": "Comfy Cloud",
"beta": "BETA",
"perMonth": "USD / month",

View File

@@ -3,7 +3,11 @@
<div class="flex h-full flex-col gap-6">
<div class="flex items-baseline gap-2">
<span class="text-2xl font-inter font-semibold leading-tight">
{{ $t('subscription.title') }}
{{
isActiveSubscription
? $t('subscription.title')
: $t('subscription.titleUnsubscribed')
}}
</span>
<CloudBadge
reverse-order