refactor: improve quota usage logic and streamline rate limit input handling

apps/remix/app/components/general/organisation-usage-panel.tsx

@@ -84,12 +84,9 @@ const getUsageCardState = ({ used, limit, footnote }: UsageCardStateOptions): Us
     };
   }
 
-  if (isQuotaExceeded(limit, used)) {
+  if (used > limit) {
     return {
-      status: {
-        label: used > limit ? <Trans>Exceeded</Trans> : <Trans>Limit reached</Trans>,
-        variant: 'destructive',
-      },
+      status: { label: <Trans>Exceeded</Trans>, variant: 'destructive' },
       percent,
       hasFiniteLimit,
       progressClassName: '[&>div]:bg-destructive',
@@ -97,6 +94,16 @@ const getUsageCardState = ({ used, limit, footnote }: UsageCardStateOptions): Us
     };
   }
 
+  if (isQuotaExceeded(limit, used)) {
+    return {
+      status: { label: <Trans>Limit reached</Trans>, variant: 'orange' },
+      percent,
+      hasFiniteLimit,
+      progressClassName: '[&>div]:bg-orange-500 dark:[&>div]:bg-orange-400',
+      subtext: footnote ?? null,
+    };
+  }
+
   if (isQuotaNearing(limit, used)) {
     return {
       status: { label: <Trans>Near limit</Trans>, variant: 'warning' },

apps/remix/app/components/general/rate-limit-array-input.tsx

@@ -15,11 +15,12 @@ type RateLimitArrayInputProps = {
 
 const EMPTY_ENTRY: RateLimitEntryValue = { window: '', max: 0 };
 
+/** A row counts as "started" once either field has input; fully-empty rows are dropped on commit. */
+const hasEntryInput = (entry: RateLimitEntryValue) => entry.window.trim() !== '' || entry.max > 0;
+
 /** Keep in-progress rows; drop rows that are completely empty. */
 const persistEntries = (entries: RateLimitEntryValue[]) => {
-  return entries
-    .map((entry) => ({ ...entry, window: entry.window.trim() }))
-    .filter((entry) => entry.window !== '' || entry.max > 0);
+  return entries.map((entry) => ({ ...entry, window: entry.window.trim() })).filter(hasEntryInput);
 };
 
 export const RateLimitArrayInput = ({ value, onChange, disabled }: RateLimitArrayInputProps) => {
@@ -31,7 +32,7 @@ export const RateLimitArrayInput = ({ value, onChange, disabled }: RateLimitArra
   const getWindowError = (entry: RateLimitEntryValue, index: number) => {
     const window = entry.window.trim();
 
-    if (window === '' && entry.max <= 0) {
+    if (!hasEntryInput(entry)) {
       return null;
     }
 
@@ -51,7 +52,7 @@ export const RateLimitArrayInput = ({ value, onChange, disabled }: RateLimitArra
   };
 
   const getMaxError = (entry: RateLimitEntryValue) => {
-    if (entry.window.trim() === '' && entry.max <= 0) {
+    if (!hasEntryInput(entry)) {
       return null;
     }
 
@@ -61,9 +62,8 @@ export const RateLimitArrayInput = ({ value, onChange, disabled }: RateLimitArra
   const updateEntry = (index: number, patch: Partial<RateLimitEntryValue>) => {
     if (index >= value.length) {
       const nextDraftEntry = { ...(draftEntry ?? EMPTY_ENTRY), ...patch };
-      const shouldPersistDraft = nextDraftEntry.window.trim() !== '' || nextDraftEntry.max > 0;
 
-      if (shouldPersistDraft) {
+      if (hasEntryInput(nextDraftEntry)) {
         onChange(persistEntries([...value, nextDraftEntry]));
         setDraftEntry(null);
         return;

packages/lib/server-only/rate-limit/compute-quota-flags.ts

@@ -1,6 +1,4 @@
-import { isQuotaExceeded, isQuotaNearing, QUOTA_WARNING_THRESHOLD } from '../../universal/quota-usage';
-
-export { QUOTA_WARNING_THRESHOLD };
+import { isQuotaExceeded, isQuotaNearing } from '../../universal/quota-usage';
 
 export type QuotaFlags = {
   isDocumentQuotaExceeded: boolean;

packages/lib/server-only/rate-limit/get-quota-alert-kind.ts

@@ -1,6 +1,4 @@
-import { getQuotaWarningCount, QUOTA_WARNING_THRESHOLD } from '../../universal/quota-usage';
-
-export { QUOTA_WARNING_THRESHOLD };
+import { getQuotaWarningCount } from '../../universal/quota-usage';
 
 export type QuotaAlertKind = 'quota' | 'quotaNearing';