Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(web): align table badge spacing

Browse Source 
- remove built-in horizontal padding from status badges so table columns align with headers.
- drop legacy negative-margin compensation from badge cells and affected table renderers.
- clean touched table components to satisfy lint rules around type imports, keys, and JSX flow.
This commit is contained in:
QuentinHsu
2026-07-11 00:28:21 +08:00
parent 43783286e5
commit 6869cd94b2
18 changed files with 53 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/components/data-table/core/badge-cell.tsx
Vendored
+1 -1
View File
@@ -27,7 +27,7 @@ export function BadgeCell({ className, ...props }: BadgeCellProps) {
<div
data-slot='badge-cell'
className={cn(
'-ml-1.5 flex max-w-full min-w-0 items-center gap-1 overflow-hidden [&_[data-slot=status-badge]]:max-w-full [&_[data-slot=status-badge]]:min-w-0',
'flex max-w-full min-w-0 items-center gap-1 overflow-hidden [&_[data-slot=status-badge]]:max-w-full [&_[data-slot=status-badge]]:min-w-0',
className
)}
{...props}
web/default/src/components/data-table/core/badge-list-cell.tsx
Vendored
+1 -2
View File
@@ -35,7 +35,6 @@ interface BadgeListCellProps {
/**
* Table cell renderer for a list of badges with overflow tooltip.
* Displays up to `max` badges inline; remaining items appear in a tooltip.
* Applies -ml-1.5 to compensate for badge px-1.5 and align with column header.
*/
export function BadgeListCell({
items,
@@ -51,7 +50,7 @@ export function BadgeListCell({
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div className='-ml-1.5 max-w-full' />}>
<TooltipTrigger render={<div className='max-w-full' />}>
<StatusBadgeList
items={items}
max={max}
web/default/src/components/data-table/layout/card-row-content.tsx
Vendored
+3 -6
View File
@@ -114,7 +114,7 @@ function CompactContent<TData>({ row }: { row: Row<TData> }) {
{label}
</div>
)}
<div className='min-w-0 overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
<div className='min-w-0 overflow-hidden text-xs'>
<StatusBadgeTypeContext.Provider value='text'>
{renderCellContent(cell) ?? '-'}
</StatusBadgeTypeContext.Provider>
@@ -164,10 +164,7 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
if (!label) {
return (
<div
key={cell.id}
className='flex justify-end overflow-hidden [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'
>
<div key={cell.id} className='flex justify-end overflow-hidden'>
<StatusBadgeTypeContext.Provider value='text'>
{renderCellContent(cell)}
</StatusBadgeTypeContext.Provider>
@@ -183,7 +180,7 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
<span className='text-muted-foreground shrink-0 text-[10px] font-medium select-none'>
{label}
</span>
<div className='flex min-w-0 flex-1 items-center justify-end overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
<div className='flex min-w-0 flex-1 items-center justify-end overflow-hidden text-xs'>
<StatusBadgeTypeContext.Provider value='text'>
{renderCellContent(cell) ?? '-'}
</StatusBadgeTypeContext.Provider>
web/default/src/components/provider-badge.tsx
Vendored
+1 -1
View File
@@ -50,7 +50,7 @@ export function ProviderBadge({
autoColor={colorText ? label : undefined}
variant={colorText ? undefined : 'neutral'}
size='sm'
className={cn('min-w-0 shrink overflow-hidden', !icon && 'pl-0')}
className='min-w-0 shrink overflow-hidden'
{...badgeProps}
/>
</div>
web/default/src/components/status-badge.tsx
Vendored
+3 -3
View File
@@ -87,9 +87,9 @@ export const StatusBadgeTypeContext =
React.createContext<StatusBadgeType>('badge')
const sizeMap = {
sm: 'h-5 gap-1 px-1.5 text-sm leading-none',
md: 'h-5 gap-1 px-1.5 text-sm leading-none',
lg: 'h-6 gap-1.5 px-2 text-sm leading-none',
sm: 'h-5 gap-1 text-sm leading-none',
md: 'h-5 gap-1 text-sm leading-none',
lg: 'h-6 gap-1.5 text-sm leading-none',
} as const
const textSizeMap = {
web/default/src/features/channels/components/channel-card.tsx
Vendored
+1 -1
View File
@@ -159,7 +159,7 @@ function ChannelCardComponent({
{/* Last row: groups span the full width, showing every group (no label) */}
<div className='min-w-0'>
{groups.length > 0 ? (
<div className='-ml-1.5 flex flex-wrap gap-1'>
<div className='flex flex-wrap gap-1'>
{groups.map((g) => (
<GroupBadge
key={g}
web/default/src/features/channels/components/channels-columns.tsx
Vendored
+5 -16
View File
@@ -46,12 +46,12 @@ import {
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { toIntlLocale } from '@/i18n/languages'
import {
formatCurrencyFromUSD,
formatQuotaWithCurrency,
getCurrencyLabel,
} from '@/lib/currency'
import { toIntlLocale } from '@/i18n/languages'
import { formatTimestampToDate } from '@/lib/format'
import { truncateText } from '@/lib/utils'
@@ -372,7 +372,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
size='sm'
copyable={false}
showDot={false}
className='-ml-1.5 cursor-help'
className='cursor-help'
/>
}
/>
@@ -435,7 +435,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
return (
<TooltipProvider>
<div className='-ml-1.5 flex items-center gap-1'>
<div className='flex items-center gap-1'>
<Tooltip>
<TooltipTrigger
render={
@@ -703,7 +703,6 @@ export function useChannelsColumns(
variant='blue'
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -846,7 +845,6 @@ export function useChannelsColumns(
variant='success'
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
} else {
@@ -856,7 +854,6 @@ export function useChannelsColumns(
variant='neutral'
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -1025,14 +1022,7 @@ export function useChannelsColumns(
return <span className='text-muted-foreground text-xs'>-</span>
}
return (
<StatusBadge
label={tag}
autoColor={tag}
size='sm'
className='-ml-1.5'
/>
)
return <StatusBadge label={tag} autoColor={tag} size='sm' />
},
size: 120,
enableSorting: false,
@@ -1080,7 +1070,6 @@ export function useChannelsColumns(
variant={config.variant}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -1114,7 +1103,7 @@ export function useChannelsColumns(
variant='neutral'
size='sm'
copyable={false}
className='-ml-1.5 cursor-pointer'
className='cursor-pointer'
/>
}
/>
web/default/src/features/keys/components/api-keys-cells.tsx
Vendored
+17 -22
View File
@@ -36,7 +36,7 @@ import {
} from '@/components/ui/tooltip'
import { copyToClipboard } from '@/lib/copy-to-clipboard'
import { type ApiKey } from '../types'
import type { ApiKey } from '../types'
import { useApiKeys } from './api-keys-provider'
export function ApiKeyCell({ apiKey }: { apiKey: ApiKey }) {
@@ -54,6 +54,19 @@ export function ApiKeyCell({ apiKey }: { apiKey: ApiKey }) {
const resolvedFullKey = resolvedKeys[apiKey.id]
const isCopied = copiedKeyId === apiKey.id
const maskedKey = `sk-${apiKey.key}`
let copyIcon = <Copy className='size-3.5' />
if (isLoading) {
copyIcon = <Loader2 className='size-3.5 animate-spin' />
} else if (isCopied) {
copyIcon = <Check className='size-3.5 text-green-600' />
}
let copyTooltip = t('Copy API key')
if (isLoading) {
copyTooltip = t('Loading...')
} else if (isCopied) {
copyTooltip = t('Copied!')
}
const handlePopoverOpen = useCallback(
(open: boolean) => {
@@ -135,21 +148,9 @@ export function ApiKeyCell({ apiKey }: { apiKey: ApiKey }) {
/>
}
>
{isLoading ? (
<Loader2 className='size-3.5 animate-spin' />
) : isCopied ? (
<Check className='size-3.5 text-green-600' />
) : (
<Copy className='size-3.5' />
)}
{copyIcon}
</TooltipTrigger>
<TooltipContent>
{isLoading
? t('Loading...')
: isCopied
? t('Copied!')
: t('Copy API key')}
</TooltipContent>
<TooltipContent>{copyTooltip}</TooltipContent>
</Tooltip>
</div>
)
@@ -160,12 +161,7 @@ export function ModelLimitsCell({ apiKey }: { apiKey: ApiKey }) {
if (!apiKey.model_limits_enabled || !apiKey.model_limits) {
return (
<StatusBadge
label={t('Unlimited')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
<StatusBadge label={t('Unlimited')} variant='neutral' copyable={false} />
)
}
@@ -203,7 +199,6 @@ export function IpRestrictionsCell({ apiKey }: { apiKey: ApiKey }) {
label={t('No restriction')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
}
web/default/src/features/keys/components/api-keys-columns.tsx
Vendored
+2 -6
View File
@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { useQuery } from '@tanstack/react-query'
import { type ColumnDef } from '@tanstack/react-table'
import type { ColumnDef } from '@tanstack/react-table'
import { useTranslation } from 'react-i18next'
import { BadgeCell, TruncatedCell } from '@/components/data-table'
@@ -35,7 +35,7 @@ import { formatQuota, formatTimestampToDate } from '@/lib/format'
import { cn } from '@/lib/utils'
import { API_KEY_STATUSES } from '../constants'
import { type ApiKey } from '../types'
import type { ApiKey } from '../types'
import {
ApiKeyCell,
ModelLimitsCell,
@@ -116,7 +116,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
label={t(statusConfig.label)}
variant={statusConfig.variant}
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -144,7 +143,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
label={t('Unlimited')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -224,7 +222,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
}
return (
<TruncatedCell
className='-ml-1.5'
tooltipContent={group || '-'}
tooltipClassName='break-all'
>
@@ -292,7 +289,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
label={t('Never')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
}
web/default/src/features/models/components/deployments-columns.tsx
Vendored
+1 -3
View File
@@ -74,7 +74,7 @@ export function useDeploymentsColumns(opts: {
variant='neutral'
copyText={name}
size='sm'
className='-ml-1.5 font-mono'
className='font-mono'
/>
)
},
@@ -98,7 +98,6 @@ export function useDeploymentsColumns(opts: {
variant={config.variant}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -130,7 +129,6 @@ export function useDeploymentsColumns(opts: {
autoColor={String(provider)}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
web/default/src/features/models/components/models-columns.tsx
Vendored
+13 -18
View File
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { type ColumnDef } from '@tanstack/react-table'
import type { ColumnDef } from '@tanstack/react-table'
import { useTranslation } from 'react-i18next'
import { BadgeCell, BadgeListCell } from '@/components/data-table'
@@ -139,7 +139,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
variant='neutral'
copyText={name}
size='sm'
className='-ml-1.5 font-mono'
className='font-mono'
/>
)
},
@@ -172,7 +172,6 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
| 'info'
}
size='sm'
className='-ml-1.5'
/>
)
@@ -182,16 +181,14 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
model.matched_models &&
model.matched_models.length > 0
) {
const matchedBadges = model.matched_models.map((m, idx) => (
<StatusBadge key={idx} label={m} autoColor={m} size='sm' />
const matchedBadges = model.matched_models.map((m) => (
<StatusBadge key={m} label={m} autoColor={m} size='sm' />
))
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div className='-ml-1.5' />}>
{badge}
</TooltipTrigger>
<TooltipTrigger render={<div />}>{badge}</TooltipTrigger>
<TooltipContent
side='top'
className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
@@ -225,7 +222,6 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
variant={config.variant}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -293,8 +289,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
const tagArray = parseModelTags(tags)
return (
<BadgeListCell
items={tagArray.map((tag, idx) => (
<StatusBadge key={idx} label={tag} autoColor={tag} size='sm' />
items={tagArray.map((tag) => (
<StatusBadge key={tag} label={tag} autoColor={tag} size='sm' />
))}
/>
)
@@ -313,8 +309,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
const endpointArray = formatEndpointsDisplay(endpoints)
return (
<BadgeListCell
items={endpointArray.map((ep, idx) => (
<StatusBadge key={idx} label={ep} autoColor={ep} size='sm' />
items={endpointArray.map((ep) => (
<StatusBadge key={ep} label={ep} autoColor={ep} size='sm' />
))}
/>
)
@@ -337,9 +333,9 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
}>
return (
<BadgeListCell
items={(channels ?? []).map((c, idx) => (
items={(channels ?? []).map((c) => (
<StatusBadge
key={idx}
key={`${c.id}-${c.name}-${c.type ?? ''}`}
label={`${c.name} (${c.type})`}
autoColor={c.name}
size='sm'
@@ -380,11 +376,11 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
const quotaTypes = row.getValue('quota_types') as number[]
return (
<BadgeListCell
items={(quotaTypes ?? []).map((qt, idx) => {
items={(quotaTypes ?? []).map((qt) => {
const config = QUOTA_TYPE_CONFIG[qt]
return (
<StatusBadge
key={idx}
key={qt}
label={config?.label || String(qt)}
variant={
(config?.color === 'error' ? 'danger' : config?.color) as
@@ -418,7 +414,6 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
variant={syncOfficial === 1 ? 'success' : 'warning'}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
web/default/src/features/pricing/components/pricing-columns.tsx
Vendored
-1
View File
@@ -104,7 +104,6 @@ export function usePricingColumns(
label={isTokenBased ? t('Token') : t('Request')}
variant={isTokenBased ? 'info' : 'neutral'}
copyable={false}
className='-ml-1.5'
/>
)
},
web/default/src/features/redemption-codes/components/redemptions-columns.tsx
Vendored
+3 -7
View File
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { type ColumnDef } from '@tanstack/react-table'
import type { ColumnDef } from '@tanstack/react-table'
import { useTranslation } from 'react-i18next'
import { MaskedValueDisplay } from '@/components/masked-value-display'
@@ -32,7 +32,7 @@ import { formatQuota, formatTimestampToDate } from '@/lib/format'
import { REDEMPTION_FILTER_EXPIRED, REDEMPTION_STATUSES } from '../constants'
import { isRedemptionExpired, isTimestampExpired } from '../lib'
import { type Redemption } from '../types'
import type { Redemption } from '../types'
import { DataTableRowActions } from './data-table-row-actions'
export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
@@ -96,7 +96,6 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
label={t('Expired')}
variant='warning'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -112,7 +111,6 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
label={t(statusConfig.labelKey)}
variant={statusConfig.variant}
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -164,7 +162,6 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
label={formatQuota(quota)}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -195,7 +192,6 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
label={t('Never')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -233,7 +229,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
className='cursor-help'
/>
}
></TooltipTrigger>
/>
<TooltipContent>
<div className='space-y-1 text-xs'>
<div>
web/default/src/features/subscriptions/components/subscriptions-columns.tsx
Vendored
+1 -3
View File
@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { type ColumnDef } from '@tanstack/react-table'
import type { ColumnDef } from '@tanstack/react-table'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
@@ -118,14 +118,12 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
label={t('Enable')}
variant='success'
copyable={false}
className='-ml-1.5'
/>
) : (
<StatusBadge
label={t('Disable')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
),
size: 80,
web/default/src/features/system-settings/models/model-ratio-table-columns.tsx
Vendored
-1
View File
@@ -113,7 +113,6 @@ export function buildModelRatioColumns({
variant={getModeVariant(row.original.billingMode)}
copyable={false}
showDot={false}
className='-ml-1.5 px-0'
/>
),
filterFn: (row, id, value) =>
web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
Vendored
-2
View File
@@ -129,7 +129,6 @@ export function useDrawingLogsColumns(
icon={getDrawingTypeIcon(action)}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -181,7 +180,6 @@ export function useDrawingLogsColumns(
variant={mjSubmitResultMapper.getVariant(String(code))}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
Vendored
-1
View File
@@ -207,7 +207,6 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
variant={taskStatusMapper.getVariant(status)}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
web/default/src/features/users/components/users-columns.tsx
Vendored
+1 -2
View File
@@ -145,7 +145,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
return (
<Tooltip>
<TooltipTrigger render={<div className='-ml-1.5 cursor-help' />}>
<TooltipTrigger render={<div className='cursor-help' />}>
<StatusBadge
label={t(statusConfig.labelKey)}
variant={statusConfig.variant}
@@ -184,7 +184,6 @@ export function useUsersColumns(): ColumnDef<User>[] {
label={t('No Quota')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
}