Merge remote-tracking branch 'origin/pr/311' into dev

src/components/quota/QuotaCard.tsx

@@ -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>
   );
 }