feat(quota): add card refresh actions

This commit is contained in:
MarvekG
2026-06-05 14:35:01 +00:00
Unverified
parent 657e5a82cb
commit d0bb21000b
5 changed files with 46 additions and 1 deletions
+22 -1
View File
@@ -5,6 +5,8 @@
import { useTranslation } from 'react-i18next';
import type { ReactElement, ReactNode } from 'react';
import type { TFunction } from 'i18next';
import { Button } from '@/components/ui/Button';
import { IconRefreshCw } from '@/components/ui/icons';
import type { AuthFileItem, ResolvedTheme, ThemeColors } from '@/types';
import { TYPE_COLORS } from '@/utils/quota';
import styles from '@/pages/QuotaPage.module.scss';
@@ -89,6 +91,7 @@ export function QuotaCard<TState extends QuotaStatusState>({
resolvedTheme === 'dark' && typeColorSet.dark ? typeColorSet.dark : typeColorSet.light;
const quotaStatus = quota?.status ?? 'idle';
const quotaLoading = quotaStatus === 'loading';
const quotaErrorMessage = resolveQuotaErrorMessage(
t,
quota?.errorStatus,
@@ -121,7 +124,7 @@ export function QuotaCard<TState extends QuotaStatusState>({
</div>
<div className={styles.quotaSection}>
{quotaStatus === 'loading' ? (
{quotaLoading ? (
<div className={styles.quotaMessage}>{t(`${i18nPrefix}.loading`)}</div>
) : quotaStatus === 'idle' ? (
onRefresh ? (
@@ -148,6 +151,24 @@ export function QuotaCard<TState extends QuotaStatusState>({
<div className={styles.quotaMessage}>{t(idleMessageKey)}</div>
)}
</div>
{onRefresh && (
<div className={styles.quotaCardActions}>
<Button
type="button"
variant="secondary"
size="sm"
className={styles.quotaRefreshButton}
onClick={onRefresh}
disabled={!canRefresh || quotaLoading}
loading={quotaLoading}
title={t('auth_files.quota_refresh_hint')}
>
{!quotaLoading && <IconRefreshCw size={14} />}
{t('auth_files.quota_refresh_single')}
</Button>
</div>
)}
</div>
);
}
+2
View File
@@ -368,6 +368,8 @@
"prefix_proxy_invalid_json": "This auth file is not a JSON object, so fields cannot be edited.",
"prefix_proxy_html_challenge": "Downloaded content is an HTML challenge page, not an auth JSON object. Re-authenticate or replace this auth file before editing fields.",
"prefix_proxy_saved_success": "Updated auth file \"{{name}}\" successfully",
"quota_refresh_single": "Refresh quota",
"quota_refresh_hint": "Refresh quota only for this credential",
"quota_refresh_success": "Quota refreshed for \"{{name}}\"",
"quota_refresh_failed": "Failed to refresh quota for \"{{name}}\": {{message}}"
},
+2
View File
@@ -368,6 +368,8 @@
"prefix_proxy_invalid_json": "该认证文件不是 JSON 对象,无法编辑字段。",
"prefix_proxy_html_challenge": "下载到的是 HTML 验证页面,不是认证 JSON 对象。请重新认证或替换该认证文件后再编辑字段。",
"prefix_proxy_saved_success": "已更新认证文件 \"{{name}}\"",
"quota_refresh_single": "刷新额度",
"quota_refresh_hint": "仅刷新该认证文件的额度",
"quota_refresh_success": "已刷新 \"{{name}}\" 的额度",
"quota_refresh_failed": "刷新 \"{{name}}\" 的额度失败:{{message}}"
},
+2
View File
@@ -368,6 +368,8 @@
"prefix_proxy_invalid_json": "該驗證檔案不是 JSON 物件,無法編輯欄位。",
"prefix_proxy_html_challenge": "下載到的是 HTML 驗證頁面,不是驗證 JSON 物件。請重新驗證或替換該驗證檔案後再編輯欄位。",
"prefix_proxy_saved_success": "已更新驗證檔案「{{name}}」",
"quota_refresh_single": "重新整理配額",
"quota_refresh_hint": "僅重新整理該驗證檔案的配額",
"quota_refresh_success": "已重新整理「{{name}}」的配額",
"quota_refresh_failed": "重新整理「{{name}}」的配額失敗:{{message}}"
},
+18
View File
@@ -392,6 +392,24 @@
}
}
.quotaCardActions {
display: flex;
justify-content: flex-end;
padding-top: $spacing-xs;
}
.quotaRefreshButton:global(.btn.btn-sm) {
border-radius: 999px;
padding-inline: 12px;
> span {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
}
.quotaError {
font-size: 12px;
color: var(--danger-color);