From c3a5cc685edfc9fa90bfaf037d1aaa9b2fae15e2 Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Mon, 6 Apr 2026 22:09:17 +0800
Subject: [PATCH] fix(payment): merge supported types badges into provider card
 top row

---
 frontend/src/views/admin/SettingsView.vue | 40 ++++++++++-------------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index 074aecf11d..9253203f02 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -1728,20 +1728,31 @@
             <div v-if="providersLoading && !providers.length" class="flex items-center justify-center py-6"><div class="h-5 w-5 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"></div></div>
             <div v-else-if="providers.length" class="space-y-3">
               <div v-for="provider in providers" :key="provider.id" :class="['rounded-lg border transition-all', isProviderEnabled(provider.provider_key) ? 'border-gray-200 dark:border-dark-600' : 'border-gray-200 bg-gray-50 dark:border-dark-700 dark:bg-dark-800/50']">
-                <div :class="['flex items-center justify-between px-4 py-3', !isProviderEnabled(provider.provider_key) && 'opacity-50 pointer-events-none']">
-                  <!-- Left: icon + name + provider key badge -->
+                <div :class="['flex items-center justify-between px-4 py-2.5', !isProviderEnabled(provider.provider_key) && 'opacity-50 pointer-events-none']">
+                  <!-- Left: icon + name + key badge + supported types badges -->
                   <div class="flex items-center gap-3">
                     <div :class="['rounded-md p-1.5', provider.enabled && isProviderEnabled(provider.provider_key) ? 'bg-green-100 dark:bg-green-900/30' : 'bg-gray-100 dark:bg-dark-700']">
                       <Icon name="server" size="sm" :class="provider.enabled && isProviderEnabled(provider.provider_key) ? 'text-green-600 dark:text-green-400' : 'text-gray-400'" />
                     </div>
-                    <div>
-                      <span class="text-sm font-medium text-gray-900 dark:text-white">{{ provider.name }}</span>
-                      <span class="ml-1.5 rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500 dark:bg-dark-700 dark:text-gray-400">{{ providerKeyLabel(provider.provider_key) }}</span>
+                    <span class="text-sm font-medium text-gray-900 dark:text-white">{{ provider.name }}</span>
+                    <span class="rounded bg-gray-100 px-1.5 py-0.5 text-xs text-gray-500 dark:bg-dark-700 dark:text-gray-400">{{ providerKeyLabel(provider.provider_key) }}</span>
+                    <div v-if="isProviderEnabled(provider.provider_key)" class="flex items-center gap-1">
+                      <button
+                        v-for="pt in getProviderAvailableTypes(provider.provider_key)"
+                        :key="pt.value"
+                        type="button"
+                        @click="toggleCardSupportedType(provider, pt.value)"
+                        :class="[
+                          'rounded px-2 py-0.5 text-xs font-medium transition-all',
+                          isCardTypeSelected(provider, pt.value)
+                            ? 'bg-primary-500 text-white'
+                            : 'bg-gray-100 text-gray-400 dark:bg-dark-700 dark:text-gray-500',
+                        ]"
+                      >{{ pt.label }}</button>
                     </div>
                   </div>
                   <!-- Right: toggles + actions -->
                   <div class="flex items-center gap-4">
-                    <!-- Enabled toggle -->
                     <label class="flex items-center gap-1.5 cursor-pointer">
                       <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('common.enabled') }}</span>
                       <button type="button" role="switch" :aria-checked="provider.enabled" @click="toggleProviderField(provider, 'enabled')"
@@ -1749,7 +1760,6 @@
                         <span :class="['pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200', provider.enabled ? 'translate-x-4' : 'translate-x-0']" />
                       </button>
                     </label>
-                    <!-- Refund toggle -->
                     <label class="flex items-center gap-1.5 cursor-pointer">
                       <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.payment.refundEnabled') }}</span>
                       <button type="button" role="switch" :aria-checked="provider.refund_enabled" @click="toggleProviderField(provider, 'refundEnabled')"
@@ -1767,22 +1777,6 @@
                 <div v-if="!isProviderEnabled(provider.provider_key)" class="border-t border-gray-100 px-4 py-2 dark:border-dark-700">
                   <span class="text-xs text-amber-500">{{ t('admin.settings.payment.typeDisabled') }} — {{ t('admin.settings.payment.enableTypesFirst') }}</span>
                 </div>
-                <!-- Supported types badge row -->
-                <div v-else class="flex items-center gap-2 border-t border-gray-100 px-4 py-2 dark:border-dark-700">
-                  <span class="text-xs text-gray-500 dark:text-gray-400">{{ t('admin.settings.payment.supportedTypes') }}:</span>
-                  <button
-                    v-for="pt in getProviderAvailableTypes(provider.provider_key)"
-                    :key="pt.value"
-                    type="button"
-                    @click="toggleCardSupportedType(provider, pt.value)"
-                    :class="[
-                      'rounded px-2 py-0.5 text-xs font-medium transition-all',
-                      isCardTypeSelected(provider, pt.value)
-                        ? 'bg-primary-500 text-white'
-                        : 'bg-gray-100 text-gray-400 dark:bg-dark-700 dark:text-gray-500',
-                    ]"
-                  >{{ pt.label }}</button>
-                </div>
               </div>
             </div>
             <div v-else class="py-6 text-center">