Refactoring of subscription panel to improve maintainability and match
Figma design exactly. Extracted business logic into
`useSubscriptionCredits` and `useSubscriptionActions` composables, added
comprehensive testing, and enhanced the design system with proper
semantic tokens.
- Extract credit calculations and action handlers into reusable
composables
- Add component and unit tests with proper mocking patterns
- Update terminology from "API Nodes" to "Partner Nodes"
- Make credit breakdown dynamic using real API data instead of hardcoded
values
- Add semantic design tokens for modal card surfaces with light/dark
theme support
- Reduce component complexity from ~100 lines to ~25 lines of logic
- Improve layout spacing, typography, and responsive behavior to match
Figma specs
<img width="1948" height="1494" alt="Selection_2220"
src="https://github.com/user-attachments/assets/b922582d-7edf-4884-b787-ad783c896b80"
/>
<img width="1948" height="1494" alt="Selection_2219"
src="https://github.com/user-attachments/assets/50a9f263-9adb-439d-8a89-94a498d394e3"
/>
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6378-update-subscription-panel-for-new-designs-29b6d73d3650815c9ce2c5977ac7f893)
by [Unito](https://www.unito.io)
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
Backport of #6064 (subscription page) to the `rh-test` branch.
This PR manually cherry-picks commit
7e1e8e3b65 to the rh-test branch and
resolves merge conflicts that prevented automatic backporting.
## Conflicts Resolved
### 1. `src/components/actionbar/ComfyActionbar.vue`
- **Conflict**: HEAD (rh-test) used `<ComfyQueueButton />` while the
subscription PR introduced `<ComfyRunButton />`
- **Resolution**: Updated to use `<ComfyRunButton />` to include the
subscription functionality wrapper while maintaining the existing
rh-test template structure
### 2. `src/composables/auth/useFirebaseAuthActions.ts`
- **Conflict**: Simple ordering difference in the return statement
- **Resolution**: Used the subscription PR's ordering: `deleteAccount,
accessError, reportError`
## Testing
The cherry-pick completed successfully and passed all pre-commit hooks:
- ✅ ESLint
- ✅ Prettier formatting
- ⚠️ Note: 2 unused i18n keys detected (informational only, same as
original PR)
## Related
- Original PR: #6064
- Cherry-picked commit: 7e1e8e3b65
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6140-backport-subscription-page-to-rh-test-2916d73d365081f38f00df422004f61a)
by [Unito](https://www.unito.io)
Co-authored-by: Terry Jia <terryjia88@gmail.com>
Co-authored-by: GitHub Action <action@github.com>
