feat: enhance UI and functionality in various components

web/default/src/features/usage-logs/components/common-logs-stats.tsx

@@ -5,10 +5,10 @@ import { formatLogQuota } from '@/lib/format'
 import { cn } from '@/lib/utils'
 import { useIsAdmin } from '@/hooks/use-admin'
 import { Skeleton } from '@/components/ui/skeleton'
-import { dotColorMap, textColorMap } from '@/components/status-badge'
 import { getLogStats, getUserLogStats } from '../api'
 import { DEFAULT_LOG_STATS } from '../constants'
 import { buildApiParams } from '../lib/utils'
+import { useUsageLogsContext } from './usage-logs-provider'
 
 const route = getRouteApi('/_authenticated/usage-logs/$section')
 
@@ -16,6 +16,7 @@ export function CommonLogsStats() {
   const { t } = useTranslation()
   const isAdmin = useIsAdmin()
   const searchParams = route.useSearch()
+  const { sensitiveVisible } = useUsageLogsContext()
 
   const { data: stats, isLoading } = useQuery({
     queryKey: ['usage-logs-stats', isAdmin, searchParams],
@@ -41,29 +42,42 @@ export function CommonLogsStats() {
 
   if (isLoading) {
     return (
-      <div className='flex items-center gap-2'>
+      <div className='flex items-center gap-1.5'>
         <Skeleton className='h-6 w-[126px] rounded-md' />
-        <Skeleton className='h-6 w-[58px] rounded-md' />
-        <Skeleton className='h-6 w-[58px] rounded-md' />
+        <Skeleton className='h-6 w-[76px] rounded-md' />
+        <Skeleton className='h-6 w-[92px] rounded-md' />
       </div>
     )
   }
 
+  const tagClass =
+    'inline-flex h-6 items-center rounded-md border px-2.5 text-xs font-medium shadow-xs'
+
   return (
-    <div className='flex items-center gap-1.5 text-xs font-medium'>
+    <div className='flex flex-wrap items-center gap-1.5'>
       <span
-        className={cn('size-1.5 shrink-0 rounded-full', dotColorMap.blue)}
-        aria-hidden='true'
-      />
-      <span className={cn(textColorMap.blue)}>
-        {t('Usage')}: {formatLogQuota(stats?.quota || 0)}
+        className={cn(
+          tagClass,
+          'border-blue-200/70 bg-blue-50 text-blue-700 dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-300'
+        )}
+      >
+        {t('Usage')}:{' '}
+        {sensitiveVisible ? formatLogQuota(stats?.quota || 0) : '••••'}
       </span>
-      <span className='text-muted-foreground/30'>·</span>
-      <span className={cn(textColorMap.pink)}>
+      <span
+        className={cn(
+          tagClass,
+          'border-pink-200/70 bg-pink-50 text-pink-700 dark:border-pink-500/20 dark:bg-pink-500/10 dark:text-pink-300'
+        )}
+      >
         {t('RPM')}: {stats?.rpm || 0}
       </span>
-      <span className='text-muted-foreground/30'>·</span>
-      <span className='text-muted-foreground'>
+      <span
+        className={cn(
+          tagClass,
+          'border-border bg-background text-muted-foreground'
+        )}
+      >
         {t('TPM')}: {stats?.tpm || 0}
       </span>
     </div>