mirror of
https://github.com/Nezumi-2711/9router.git
synced 2026-09-22 13:38:31 +00:00
fix(ui): flex quota rows and thin global scrollbars
Replace the fixed-table quota layout with flex rows that shrink cleanly, keep the hidden-quota chip row from overflowing, and use thin mac-like scrollbars app-wide. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
decolua
co-authored by
Claude Fable 5
Claude Fable 5
parent
8b0fcf4b16
commit
15dfd86416
@@ -148,103 +148,100 @@ export default function QuotaTable({
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full table-fixed text-left">
|
||||
<tbody>
|
||||
{currentPageRows.map((quota) => {
|
||||
const colors = getColorClasses(quota.remaining);
|
||||
const countdown = formatResetTime(quota.resetAt);
|
||||
const resetDisplay = formatResetTimeDisplay(quota.resetAt);
|
||||
// recurring defaults true: a missing flag means the quota
|
||||
// refreshes at resetAt. Bonus/one-shot packs set recurring:false
|
||||
// and their resetAt is a hard expiry, so word it as "expires".
|
||||
const recurring = quota.recurring !== false;
|
||||
const countdownLabel = recurring ? `in ${countdown}` : `expires in ${countdown}`;
|
||||
<div className="space-y-px">
|
||||
{currentPageRows.map((quota) => {
|
||||
const colors = getColorClasses(quota.remaining);
|
||||
const countdown = formatResetTime(quota.resetAt);
|
||||
const resetDisplay = formatResetTimeDisplay(quota.resetAt);
|
||||
// recurring defaults true: a missing flag means the quota
|
||||
// refreshes at resetAt. Bonus/one-shot packs set recurring:false
|
||||
// and their resetAt is a hard expiry, so word it as "expires".
|
||||
const recurring = quota.recurring !== false;
|
||||
const countdownLabel = recurring ? `in ${countdown}` : `expires in ${countdown}`;
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={`${quota.name}-${quota.index}`}
|
||||
className="border-b border-black/5 dark:border-white/5 hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors"
|
||||
return (
|
||||
<div
|
||||
key={`${quota.name}-${quota.index}`}
|
||||
className={`flex items-center gap-2 border-b border-black/5 dark:border-white/5 hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors ${cellPad}`}
|
||||
>
|
||||
{/* Name */}
|
||||
<div className="flex w-36 min-w-0 items-center gap-1.5">
|
||||
<span className="text-[10px] shrink-0">{colors.emoji}</span>
|
||||
<span className={`${nameText} font-medium text-text-primary truncate`}>
|
||||
{quota.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress + used/total */}
|
||||
<div className={`min-w-0 flex-1 ${compact ? "space-y-1" : "space-y-1.5"}`}>
|
||||
<div className={`${compact ? "h-1" : "h-1.5"} rounded-full overflow-hidden border ${colors.bgLight} ${
|
||||
quota.remaining === 0 ? "border-black/10 dark:border-white/10" : "border-transparent"
|
||||
}`}>
|
||||
<div
|
||||
className={`h-full transition-all duration-300 ${colors.bg}`}
|
||||
style={{ width: `${Math.min(quota.remaining, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center justify-between gap-1 min-w-0 ${compact ? "text-[10px]" : "text-xs"}`}>
|
||||
<span
|
||||
className="text-text-muted truncate"
|
||||
title={`${quota.used.toLocaleString()} / ${quota.total > 0 ? quota.total.toLocaleString() : "∞"}`}
|
||||
>
|
||||
{quota.used.toLocaleString()} / {quota.total > 0 ? quota.total.toLocaleString() : "∞"}
|
||||
</span>
|
||||
<span className={`font-medium ${colors.text} shrink-0`}>
|
||||
{quota.remaining}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reset time */}
|
||||
<div className="min-w-0 shrink">
|
||||
{countdown !== "-" || resetDisplay ? (
|
||||
compact ? (
|
||||
<div
|
||||
className={`${resetPrimary} text-text-primary font-medium truncate`}
|
||||
title={resetDisplay || ""}
|
||||
>
|
||||
{countdown !== "-" ? countdownLabel : resetDisplay}
|
||||
</div>
|
||||
) : (
|
||||
<div className="min-w-0 space-y-0.5">
|
||||
{countdown !== "-" && (
|
||||
<div className={`${resetPrimary} text-text-primary font-medium truncate`}>
|
||||
{countdownLabel}
|
||||
</div>
|
||||
)}
|
||||
{resetDisplay && (
|
||||
<div className={`${resetSecondary} text-text-muted truncate`}>
|
||||
{resetDisplay}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className={`${resetPrimary} text-text-muted italic`}>N/A</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Hide action */}
|
||||
{hasHideAction && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onHideQuota(quota)}
|
||||
className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-text-muted transition-colors hover:bg-black/5 hover:text-text-primary dark:hover:bg-white/5"
|
||||
title="Hide this quota row"
|
||||
aria-label={`Hide quota ${quota.name}`}
|
||||
>
|
||||
<td className={`${cellPad} w-[30%]`}>
|
||||
<div className="flex items-center gap-1.5 min-w-0">
|
||||
<span className="text-[10px] shrink-0">{colors.emoji}</span>
|
||||
<span className={`${nameText} font-medium text-text-primary truncate`}>
|
||||
{quota.name}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className={`${cellPad} w-[45%]`}>
|
||||
<div className={compact ? "space-y-1" : "space-y-1.5"}>
|
||||
<div className={`${compact ? "h-1" : "h-1.5"} rounded-full overflow-hidden border ${colors.bgLight} ${
|
||||
quota.remaining === 0 ? "border-black/10 dark:border-white/10" : "border-transparent"
|
||||
}`}>
|
||||
<div
|
||||
className={`h-full transition-all duration-300 ${colors.bg}`}
|
||||
style={{ width: `${Math.min(quota.remaining, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center justify-between ${compact ? "text-[10px]" : "text-xs"}`}>
|
||||
<span className="text-text-muted">
|
||||
{quota.used.toLocaleString()} / {quota.total > 0 ? quota.total.toLocaleString() : "∞"}
|
||||
</span>
|
||||
<span className={`font-medium ${colors.text}`}>
|
||||
{quota.remaining}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className={`${cellPad} ${hasHideAction ? "w-[20%]" : "w-[25%]"}`}>
|
||||
{countdown !== "-" || resetDisplay ? (
|
||||
compact ? (
|
||||
<div
|
||||
className={`${resetPrimary} text-text-primary font-medium truncate`}
|
||||
title={resetDisplay || ""}
|
||||
>
|
||||
{countdown !== "-" ? countdownLabel : resetDisplay}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-0.5">
|
||||
{countdown !== "-" && (
|
||||
<div className={`${resetPrimary} text-text-primary font-medium`}>
|
||||
{countdownLabel}
|
||||
</div>
|
||||
)}
|
||||
{resetDisplay && (
|
||||
<div className={`${resetSecondary} text-text-muted`}>
|
||||
{resetDisplay}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className={`${resetPrimary} text-text-muted italic`}>N/A</div>
|
||||
)}
|
||||
</td>
|
||||
|
||||
{hasHideAction && (
|
||||
<td className={`${cellPad} w-[5%] text-right`}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onHideQuota(quota)}
|
||||
className="inline-flex h-6 w-6 items-center justify-center rounded-md text-text-muted transition-colors hover:bg-black/5 hover:text-text-primary dark:hover:bg-white/5"
|
||||
title="Hide this quota row"
|
||||
aria-label={`Hide quota ${quota.name}`}
|
||||
>
|
||||
<span className="material-symbols-outlined text-[15px]">
|
||||
visibility_off
|
||||
</span>
|
||||
</button>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<span className="material-symbols-outlined text-[15px]">
|
||||
visibility_off
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{totalPages > 1 && (
|
||||
|
||||
@@ -1270,7 +1270,7 @@ export default function ProviderLimits() {
|
||||
visibility_off
|
||||
</span>
|
||||
<span className="shrink-0">Hidden:</span>
|
||||
<div className="flex w-full items-center gap-1">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto whitespace-nowrap pb-2">
|
||||
{hiddenQuotaRows.map((quotaRow) => (
|
||||
<button
|
||||
key={getQuotaVisibilityKey(quotaRow)}
|
||||
|
||||
@@ -256,6 +256,37 @@ input, textarea {
|
||||
background: rgba(229, 106, 74, 0.55);
|
||||
}
|
||||
|
||||
/* Global thin mac-like scrollbars (overrides clunky Windows/Linux default) */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(120, 120, 120, 0.35) transparent;
|
||||
}
|
||||
.dark * {
|
||||
scrollbar-color: rgba(180, 180, 180, 0.3) transparent;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(120, 120, 120, 0.35);
|
||||
border-radius: 9999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(120, 120, 120, 0.55);
|
||||
}
|
||||
.dark *::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(180, 180, 180, 0.3);
|
||||
}
|
||||
.dark *::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(180, 180, 180, 0.5);
|
||||
}
|
||||
|
||||
/* Reusable elevated card */
|
||||
.card-soft {
|
||||
background-color: var(--color-surface);
|
||||
|
||||
Reference in New Issue
Block a user