Refactor Limits page

.gitignore

@@ -39,6 +39,7 @@ next-env.d.ts
 
 # AI agents and related files
 CLAUDE.md
+.cursor
 .agent
 
 

src/__test__/unit/currency.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+import {
+  CurrencyInputSchema,
+  sanitizeCurrencyInput,
+} from '@/features/dashboard/limits/currency-input'
+
+describe('sanitizeCurrencyInput', () => {
+  it.each([
+    ['$1,250', '1250'],
+    ['1250', '1250'],
+    ['abc', ''],
+    ['', ''],
+  ])('returns %p -> %p', (value: string, expected: string) => {
+    expect(sanitizeCurrencyInput(value)).toBe(expected)
+  })
+})
+
+describe('CurrencyInputSchema', () => {
+  it.each(['100', '1', ' 100 ', '999999'])('accepts %p', (value: string) => {
+    expect(CurrencyInputSchema.safeParse(value).success).toBe(true)
+  })
+
+  it.each([
+    '',
+    '   ',
+    '12.50',
+    '1,250',
+    'abc',
+    '0',
+  ])('rejects %p', (value: string) => {
+    expect(CurrencyInputSchema.safeParse(value).success).toBe(false)
+  })
+})

src/app/dashboard/[teamSlug]/limits/page.tsx

@@ -1,6 +1,6 @@
-import UsageLimits from '@/features/dashboard/limits/usage-limits'
+import { Page } from '@/features/dashboard/layouts/page'
+import { UsageLimits } from '@/features/dashboard/limits/usage-limits'
 import { HydrateClient, prefetch, trpc } from '@/trpc/server'
-import Frame from '@/ui/frame'
 
 interface LimitsPageProps {
   params: Promise<{ teamSlug: string }>
@@ -13,14 +13,9 @@ export default async function LimitsPage({ params }: LimitsPageProps) {
 
   return (
     <HydrateClient>
-      <Frame
-        classNames={{
-          frame: 'flex flex-col gap-4 max-md:border-none',
-          wrapper: 'w-full max-md:p-0',
-        }}
-      >
+      <Page>
         <UsageLimits />
-      </Frame>
+      </Page>
     </HydrateClient>
   )
 }

src/features/dashboard/layouts/page.tsx

@@ -7,7 +7,7 @@ interface PageProps {
 }
 
 export const Page = ({ children, className }: PageProps) => (
-  <div className={cn('mx-auto w-full max-w-[900px]', className)}>
+  <div className={cn('mx-auto w-full max-w-[900px] p-3 md:p-0', className)}>
     {children}
   </div>
 )

src/features/dashboard/layouts/wrapper.tsx

@@ -11,7 +11,7 @@ export function DefaultDashboardLayout({
 }) {
   return (
     <div className="flex-1 overflow-y-auto">
-      <div className="container mx-auto p-0 md:p-8 2xl:p-24 h-min w-full">
+      <div className="container mx-auto h-min w-full p-0 md:p-10 2xl:p-24">
         <CatchErrorBoundary
           classNames={{
             wrapper: 'h-full w-full',

src/features/dashboard/limits/alert-ascii-icon.tsx

@@ -0,0 +1,72 @@
+import { AsciiIcon } from './ascii-icon'
+
+const INACTIVE_LINES = [
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '           -********-           ',
+  '          -*--     -*-          ',
+  '         -*-        -*-         ',
+  '         **-        -**         ',
+  '        -*-          -*-        ',
+  '        -**----------**-        ',
+  '        ----**----**----        ',
+  '            -******-            ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+]
+
+const ACTIVE_LINES = [
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '           -********-           ',
+  [
+    { text: '          -*--     ' },
+    { className: 'text-accent-main-highlight', text: '-' },
+    { text: '*-          ' },
+  ],
+  '         -*-        -*-         ',
+  [
+    { text: '         *' },
+    { className: 'text-accent-main-highlight', text: '*' },
+    { text: '-        -' },
+    { className: 'text-accent-main-highlight', text: '*' },
+    { text: '*         ' },
+  ],
+  '        -*-          -*-        ',
+  [
+    { text: '        -*' },
+    { className: 'text-accent-main-highlight', text: '*' },
+    { text: '----------**-        ' },
+  ],
+  [
+    { text: '        ----**' },
+    { className: 'text-accent-main-highlight', text: '-' },
+    { text: '---**----        ' },
+  ],
+  '            -******-            ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+]
+
+interface AlertAsciiIconProps {
+  active?: boolean
+  className?: string
+}
+
+export const AlertAsciiIcon = ({
+  active = false,
+  className,
+}: AlertAsciiIconProps) => (
+  <AsciiIcon
+    className={className}
+    lines={active ? ACTIVE_LINES : INACTIVE_LINES}
+  />
+)

src/features/dashboard/limits/ascii-icon.tsx

@@ -0,0 +1,52 @@
+import { type CSSProperties, Fragment } from 'react'
+import { cn } from '@/lib/utils'
+
+type AsciiLineSegment = {
+  className?: string
+  text: string
+}
+
+type AsciiLine = string | readonly AsciiLineSegment[]
+
+const TEXT_STYLE = {
+  fontFamily: 'var(--font-mono)',
+  fontFeatureSettings: "'ss03' 1",
+  fontSize: '3.802px',
+  fontWeight: 600,
+  letterSpacing: '-0.038px',
+  lineHeight: '4px',
+} satisfies CSSProperties
+
+interface AsciiIconProps {
+  className?: string
+  lines: readonly AsciiLine[]
+}
+
+const renderAsciiLine = (line: AsciiLine) => {
+  if (typeof line === 'string') return line
+
+  return line.map((segment, index) => (
+    <Fragment key={`${segment.text}-${index}`}>
+      {segment.className ? (
+        <span className={segment.className}>{segment.text}</span>
+      ) : (
+        segment.text
+      )}
+    </Fragment>
+  ))
+}
+
+export const AsciiIcon = ({ className, lines }: AsciiIconProps) => (
+  <div className={cn('relative size-[72px]', className)}>
+    <div
+      className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap text-fg uppercase"
+      style={TEXT_STYLE}
+    >
+      {lines.map((line, index) => (
+        <p key={index} className="m-0 whitespace-pre">
+          {renderAsciiLine(line)}
+        </p>
+      ))}
+    </div>
+  </div>
+)

src/features/dashboard/limits/currency-input.ts

@@ -0,0 +1,14 @@
+import { z } from 'zod'
+
+// Validates a string as a positive whole USD amount. Example: "1250" -> valid, "abc" -> invalid.
+const CurrencyInputSchema = z
+  .string()
+  .trim()
+  .min(1, 'Enter a value.')
+  .regex(/^\d+$/, 'Enter a whole USD amount.')
+  .refine((value) => Number(value) >= 1, 'Value must be at least 1.')
+
+// Removes non-digits from a USD draft value. Example: "$1,250" -> "1250".
+const sanitizeCurrencyInput = (value: string) => value.replace(/\D+/g, '')
+
+export { CurrencyInputSchema, sanitizeCurrencyInput }

src/features/dashboard/limits/focus-block-input.ts

@@ -0,0 +1,22 @@
+import type { MouseEvent } from 'react'
+
+const INTERACTIVE_ELEMENT_SELECTOR =
+  'button, input, textarea, select, a, [role="button"], [data-no-input-focus]'
+
+// Focuses the first editable input in a block, e.g. block click -> input focused, button click -> unchanged.
+const focusBlockInputOnMouseDown = (event: MouseEvent<HTMLElement>) => {
+  if (!(event.target instanceof Element)) return
+  if (event.target.closest(INTERACTIVE_ELEMENT_SELECTOR)) return
+
+  const input = event.currentTarget.querySelector('input')
+  if (!(input instanceof HTMLInputElement)) return
+  if (input.disabled || input.readOnly) return
+
+  event.preventDefault()
+  input.focus()
+
+  const cursorPosition = input.value.length
+  input.setSelectionRange(cursorPosition, cursorPosition)
+}
+
+export { focusBlockInputOnMouseDown }

src/features/dashboard/limits/limit-ascii-icon.tsx

@@ -0,0 +1,70 @@
+import { AsciiIcon } from './ascii-icon'
+
+const INACTIVE_LINES = [
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '            ---**---            ',
+  '          -**------**-          ',
+  '        -**- -      -**-        ',
+  '        **  -**-      **        ',
+  '        *-    ---     -*        ',
+  '        **            **        ',
+  '        -**-        -**-        ',
+  '          --        --          ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+]
+
+const ACTIVE_LINES = [
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+  '            ---**---            ',
+  [
+    { text: '          -**-----' },
+    { className: 'text-accent-secondary-error-highlight', text: '-' },
+    { text: '**-          ' },
+  ],
+  '        -**- -      -**-        ',
+  [
+    { text: '        ' },
+    { className: 'text-accent-main-highlight', text: '**' },
+    { text: '  -**-      **        ' },
+  ],
+  [
+    { text: '        *-    -' },
+    { className: 'text-accent-main-highlight', text: '-' },
+    { text: '-     -*        ' },
+  ],
+  '        **            **        ',
+  '        -**-        -**-        ',
+  [
+    { text: '          --        ' },
+    { className: 'text-accent-main-highlight', text: '-' },
+    { text: '-          ' },
+  ],
+  '                                ',
+  '                                ',
+  '                                ',
+  '                                ',
+]
+
+interface LimitAsciiIconProps {
+  active?: boolean
+  className?: string
+}
+
+export const LimitAsciiIcon = ({
+  active = false,
+  className,
+}: LimitAsciiIconProps) => (
+  <AsciiIcon
+    className={className}
+    lines={active ? ACTIVE_LINES : INACTIVE_LINES}
+  />
+)