[backport rh-test] subscription panel (#6140)

## 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>

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

@@ -0,0 +1,76 @@
+<template>
+  <div class="grid h-full grid-cols-5 px-10 pb-10">
+    <div
+      class="relative col-span-2 flex items-center justify-center overflow-hidden rounded-sm"
+    >
+      <video
+        autoplay
+        loop
+        muted
+        playsinline
+        class="h-full min-w-[125%] object-cover"
+        style="margin-left: -20%"
+      >
+        <source
+          src="/assets/images/cloud-subscription.webm"
+          type="video/webm"
+        />
+      </video>
+    </div>
+
+    <div class="col-span-3 flex flex-col justify-between pl-8">
+      <div>
+        <div class="flex flex-col gap-4">
+          <div class="inline-flex items-center gap-2">
+            <div class="text-sm text-muted">
+              {{ $t('subscription.required.title') }}
+            </div>
+            <TopbarBadges
+              reverse-order
+              no-padding
+              text-class="!text-sm !font-normal"
+            />
+          </div>
+
+          <div class="flex items-baseline gap-2">
+            <span class="text-4xl font-bold">{{ formattedMonthlyPrice }}</span>
+            <span class="text-xl">{{ $t('subscription.perMonth') }}</span>
+          </div>
+        </div>
+
+        <SubscriptionBenefits class="mt-6 text-muted" />
+      </div>
+
+      <div class="flex flex-col">
+        <SubscribeButton @subscribed="handleSubscribed" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
+import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
+import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
+
+const emit = defineEmits<{
+  close: [subscribed: boolean]
+}>()
+
+const { formattedMonthlyPrice } = useSubscription()
+
+const handleSubscribed = () => {
+  emit('close', true)
+}
+</script>
+
+<style scoped>
+:deep(.bg-comfy-menu-secondary) {
+  background-color: transparent;
+}
+
+:deep(.p-button) {
+  color: white;
+}
+</style>