feat(ui): improve mobile responsive layouts

web/default/src/features/keys/components/api-keys-table.tsx

@@ -16,7 +16,9 @@ import {
 import { useMediaQuery } from '@/hooks'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
+import { formatQuota } from '@/lib/format'
 import { cn } from '@/lib/utils'
+import { Database } from 'lucide-react'
 import { useTableUrlState } from '@/hooks/use-table-url-state'
 import {
   Table,
@@ -33,16 +35,31 @@ import {
   DataTableToolbar,
   TableSkeleton,
   TableEmpty,
-  MobileCardList,
 } from '@/components/data-table'
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@/components/ui/empty'
 import { PageFooterPortal } from '@/components/layout'
+import { Skeleton } from '@/components/ui/skeleton'
+import { StatusBadge } from '@/components/status-badge'
 import { getApiKeys, searchApiKeys } from '../api'
-import { API_KEY_STATUS, API_KEY_STATUS_OPTIONS, ERROR_MESSAGES } from '../constants'
+import {
+  API_KEY_STATUS,
+  API_KEY_STATUS_OPTIONS,
+  API_KEY_STATUSES,
+  ERROR_MESSAGES,
+} from '../constants'
 import { type ApiKey } from '../types'
+import { ApiKeyCell } from './api-keys-cells'
 import { useApiKeysColumns } from './api-keys-columns'
 import { ApiKeysPrimaryButtons } from './api-keys-primary-buttons'
 import { useApiKeys } from './api-keys-provider'
 import { DataTableBulkActions } from './data-table-bulk-actions'
+import { DataTableRowActions } from './data-table-row-actions'
 
 const route = getRouteApi('/_authenticated/keys/')
 
@@ -50,6 +67,123 @@ function isDisabledApiKeyRow(apiKey: ApiKey) {
   return apiKey.status !== API_KEY_STATUS.ENABLED
 }
 
+function ApiKeysMobileSkeleton() {
+  return (
+    <div className='divide-border overflow-hidden rounded-lg border'>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div
+          key={index}
+          className='space-y-2 border-b px-3 py-2.5 last:border-b-0'
+        >
+          <div className='flex items-center justify-between'>
+            <Skeleton className='h-4 w-32' />
+            <Skeleton className='h-5 w-16 rounded-full' />
+          </div>
+          <div className='flex items-center justify-between gap-3'>
+            <Skeleton className='h-7 w-44' />
+            <Skeleton className='h-8 w-16' />
+          </div>
+          <Skeleton className='h-3 w-28' />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ApiKeysMobileList({
+  table,
+  isLoading,
+}: {
+  table: ReturnType<typeof useReactTable<ApiKey>>
+  isLoading: boolean
+}) {
+  const { t } = useTranslation()
+  const rows = table.getRowModel().rows
+
+  if (isLoading) return <ApiKeysMobileSkeleton />
+
+  if (!rows.length) {
+    return (
+      <div className='rounded-lg border p-8'>
+        <Empty className='border-none p-0'>
+          <EmptyHeader>
+            <EmptyMedia variant='icon'>
+              <Database className='size-6' />
+            </EmptyMedia>
+            <EmptyTitle>{t('No API Keys Found')}</EmptyTitle>
+            <EmptyDescription>
+              {t(
+                'No API keys available. Create your first API key to get started.'
+              )}
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      </div>
+    )
+  }
+
+  return (
+    <div className='divide-border overflow-hidden rounded-lg border'>
+      {rows.map((row) => {
+        const apiKey = row.original
+        const statusConfig = API_KEY_STATUSES[apiKey.status]
+        const total = apiKey.used_quota + apiKey.remain_quota
+
+        return (
+          <div
+            key={row.id}
+            className={cn(
+              'bg-card space-y-2.5 border-b px-3 py-2.5 last:border-b-0',
+              isDisabledApiKeyRow(apiKey) && DISABLED_ROW_MOBILE
+            )}
+          >
+            <div className='flex items-start justify-between gap-3'>
+              <div className='min-w-0'>
+                <div className='truncate text-sm font-semibold'>
+                  {apiKey.name}
+                </div>
+                <div className='text-muted-foreground text-[11px]'>
+                  {t('API Key')}
+                </div>
+              </div>
+              {statusConfig && (
+                <StatusBadge
+                  label={t(statusConfig.label)}
+                  variant={statusConfig.variant}
+                  showDot={statusConfig.showDot}
+                  copyable={false}
+                />
+              )}
+            </div>
+
+            <div className='flex min-w-0 items-center justify-between gap-2'>
+              <div className='min-w-0 flex-1 [&_button:first-child]:max-w-full [&_button:first-child]:truncate [&_button:first-child]:px-0'>
+                <ApiKeyCell apiKey={apiKey} />
+              </div>
+              <DataTableRowActions row={row} />
+            </div>
+
+            <div className='flex items-center justify-between gap-2 text-xs'>
+              <span className='text-muted-foreground'>{t('Quota')}</span>
+              {apiKey.unlimited_quota ? (
+                <span className='font-medium'>{t('Unlimited')}</span>
+              ) : (
+                <span className='font-medium tabular-nums'>
+                  {formatQuota(apiKey.remain_quota)}
+                  <span className='text-muted-foreground font-normal'>
+                    {' / '}
+                    {formatQuota(total)}
+                  </span>
+                </span>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 export function ApiKeysTable() {
   const { t } = useTranslation()
   const { refreshTrigger } = useApiKeys()
@@ -166,7 +300,7 @@ export function ApiKeysTable() {
 
   return (
     <>
-      <div className='space-y-4'>
+      <div className='space-y-3 sm:space-y-4'>
         <div className='flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between'>
           <ApiKeysPrimaryButtons />
           <div className='min-w-0 sm:flex sm:justify-end'>
@@ -184,18 +318,9 @@ export function ApiKeysTable() {
           </div>
         </div>
         {isMobile ? (
-          <MobileCardList
+          <ApiKeysMobileList
             table={table}
             isLoading={isLoading}
-            emptyTitle={t('No API Keys Found')}
-            emptyDescription={t(
-              'No API keys available. Create your first API key to get started.'
-            )}
-            getRowClassName={(row) =>
-              isDisabledApiKeyRow(row.original)
-                ? DISABLED_ROW_MOBILE
-                : undefined
-            }
           />
         ) : (
           <div