[Backport] update subscription panel for new designs (#6397)

## Summary
Backport of PR #6378 to `rh-test` branch.

## Changes
- Extract credit calculations into useSubscriptionCredits composable
- Extract action handlers into useSubscriptionActions composable
- Add comprehensive component and unit tests
- Update subscription panel layout to match Figma design exactly
- Add proper design tokens for modal card surfaces
- Update terminology from "API Nodes" to "Partner Nodes"
- Make credit breakdown dynamic with real API data
- Add proper loading states and error handling
- Remove unused tailwindcss eslint dependencies

## Conflicts Resolved
- Resolved merge conflicts in `packages/design-system/src/css/style.css`
related to button surface CSS variables

## Test plan
- Existing tests pass
- New tests for subscription composables and components

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6397-Backport-update-subscription-panel-for-new-designs-29c6d73d3650812aaa12ff242fd5e078)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Claude <[email protected]>
Co-authored-by: GitHub Action <[email protected]>
Co-authored-by: Johnpaul Chiwetelu <[email protected]>

Author: 4 people

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

@@ -126,6 +126,11 @@
   --content-hover-bg: #adadad;
   --content-hover-fg: #000;
 
+  --button-surface: var(--color-white);
+  --button-surface-contrast: var(--color-black);
+
+  --modal-card-button-surface: var(--color-smoke-300);
+
   /* Code styling colors for help menu*/
   --code-text-color: rgb(0 122 255 / 1);
   --code-bg-color: rgb(96 165 250 / 0.2);
@@ -168,6 +173,15 @@
 .dark-theme {
   --accent-primary: var(--color-pure-white);
   --backdrop: var(--color-neutral-900);
+
+  --button-surface: var(--color-charcoal-600);
+  --button-surface-contrast: var(--color-white);
+  --button-hover-surface: var(--color-charcoal-600);
+  --button-active-surface: var(--color-charcoal-600);
+  --button-icon: var(--color-smoke-800);
+
+  --modal-card-button-surface: var(--color-charcoal-300);
+
   --dialog-surface: var(--color-neutral-700);
   --node-component-border: var(--color-stone-200);
   --node-component-border-error: var(--color-danger-100);
@@ -196,6 +210,12 @@
 
 @theme inline {
   --color-backdrop: var(--backdrop);
+  --color-button-active-surface: var(--button-active-surface);
+  --color-button-hover-surface: var(--button-hover-surface);
+  --color-button-icon: var(--button-icon);
+  --color-button-surface: var(--button-surface);
+  --color-button-surface-contrast: var(--button-surface-contrast);
+  --color-modal-card-button-surface: var(--modal-card-button-surface);
   --color-dialog-surface: var(--dialog-surface);
   --color-node-component-border: var(--node-component-border);
   --color-node-component-executing: var(--node-component-executing);

src/components/topbar/TopbarBadge.vue

@@ -37,7 +37,7 @@
         >
           {{ badge.label }}
         </div>
-        <div class="text-sm font-semibold">{{ badge.text }}</div>
+        <div class="text-sm font-inter">{{ badge.text }}</div>
         <div v-if="badge.tooltip" class="text-xs">
           {{ badge.tooltip }}
         </div>
@@ -90,7 +90,7 @@
         >
           {{ badge.label }}
         </div>
-        <div class="text-sm font-semibold">{{ badge.text }}</div>
+        <div class="text-sm font-inter">{{ badge.text }}</div>
         <div v-if="badge.tooltip" class="text-xs">
           {{ badge.tooltip }}
         </div>
@@ -117,7 +117,7 @@
     >
       {{ badge.label }}
     </div>
-    <div class="font-inter text-sm font-extrabold" :class="textClasses">
+    <div class="font-inter text-sm" :class="textClasses">
       {{ badge.text }}
     </div>
   </div>

src/locales/en/main.json

@@ -1931,18 +1931,24 @@
     "renewsDate": "Renews {date}",
     "expiresDate": "Expires {date}",
     "manageSubscription": "Manage subscription",
-    "apiNodesBalance": "\"API Nodes\" Credit Balance",
-    "apiNodesDescription": "For running commercial/proprietary models",
+    "partnerNodesBalance": "\"Partner Nodes\" Credit Balance",
+    "partnerNodesDescription": "For running commercial/proprietary models",
     "totalCredits": "Total credits",
     "viewUsageHistory": "View usage history",
     "addApiCredits": "Add API credits",
+    "addCredits": "Add credits",
+    "monthlyCreditsRollover": "These credits will rollover to the next month",
+    "monthlyBonusDescription": "Monthly credit bonus",
+    "prepaidDescription": "Pre-paid credits",
+    "prepaidCreditsInfo": "Credits purchased separately that don't expire",
+    "nextBillingCycle": "next billing cycle",
     "yourPlanIncludes": "Your plan includes:",
     "viewMoreDetails": "View more details",
     "learnMore": "Learn more",
     "messageSupport": "Message support",
     "invoiceHistory": "Invoice history",
     "benefits": {
-      "benefit1": "$10 in monthly credits for API models — top up when needed",
+      "benefit1": "Monthly credits for Partner Nodes — top up when needed",
       "benefit2": "Up to 30 min runtime per job"
     },
     "required": {

src/platform/cloud/subscription/components/SubscriptionBenefits.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col items-start gap-1 self-stretch">
     <div class="flex items-start gap-2">
-      <i class="pi pi-check mt-1 text-sm" />
-      <span class="text-sm">
+      <i class="pi pi-check mt-1 text-xs text-text-primary" />
+      <span class="text-sm text-text-primary">
         {{ $t('subscription.benefits.benefit1') }}
       </span>
     </div>
 
-    <div class="flex items-start gap-2 pb-2">
-      <i class="pi pi-check mt-1 text-sm" />
-      <span class="text-sm">
+    <div class="flex items-start gap-2">
+      <i class="pi pi-check mt-1 text-xs text-text-primary" />
+      <span class="text-sm text-text-primary">
         {{ $t('subscription.benefits.benefit2') }}
       </span>
     </div>
@@ -19,8 +19,15 @@
       text
       icon="pi pi-external-link"
       icon-pos="left"
-      size="small"
-      class="self-start !p-0 text-sm hover:!bg-transparent [&]:!text-[inherit]"
+      class="flex h-8 min-h-6 py-2 px-0 items-center gap-2 rounded text-text-secondary"
+      :pt="{
+        icon: {
+          class: 'text-xs text-text-secondary'
+        },
+        label: {
+          class: 'text-sm text-text-secondary'
+        }
+      }"
       @click="handleViewMoreDetails"
     />
   </div>