Merge main

.husky/pre-commit

@@ -1 +1,2 @@
-npx lint-staged
+# use path directly instead of npx or npm run because it's way faster
+node_modules/.bin/oxlint --deny-warnings

.licenserc.yaml

@@ -18,7 +18,6 @@ header:
     - '**/*.md'
     - 'LICENSE'
     - 'OMICRON_VERSION'
-    - '.ladle'
     - '.husky'
     - 'mockServiceWorker.js'
 

.oxlintrc.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "react-hooks", "unicorn", "typescript", "oxc"],
+  "rules": {
+    "react-hooks/exhaustive-deps": "error",
+    // turning this off because it's more sensitive than eslint currently
+    // "react-hooks/rules-of-hooks": "error",
+    "no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ]
+  }
+}

OMICRON_VERSION

@@ -1 +1 @@
-a5b2a55ece0b69896a97817862c6c69c5202c864
+c6d4c55ffece9faf167e2da5aee044341ffdc24e

README.md

@@ -43,7 +43,6 @@ The web console has no special privileges as an API consumer. Logging in sets a
   - [Mock Service Worker](https://mswjs.io/) for mock API server
   - [Vitest](https://vitest.dev/) for unit tests
   - [Playwright](https://playwright.dev/) for E2E browser tests
-- [Ladle](https://ladle.dev/), a lightweight Storybook clone based on Vite
 
 ## Directory structure
 
@@ -109,14 +108,6 @@ document.cookie = 'session=d9b1a96e151092eb0ea08b1a0d8c4788441f1894;domain=local
 
 Go to https://localhost:4000 again and you should be logged in.
 
-### Run [Ladle](https://ladle.dev/)
-
-```
-npm run ladle
-```
-
-This will start a preview environment for UI components at `http://localhost:61000`.
-
 ### E2E tests with [Playwright](https://playwright.dev/)
 
 Playwright tests live in [`test/e2e`](test/e2e/). `npm run e2e` runs the tests in Chrome, Firefox, and Safari, but this is rarely necessary in local dev. `npm run e2ec` is a shortcut for `playwright test --project=chrome`, which runs the tests in Chrome only (the fastest one, useful for local dev). Playwright has an excellent [UI mode](https://playwright.dev/docs/test-ui-mode) for running and debugging tests that you can get to by running `npm run e2e -- --ui`.
@@ -133,7 +124,6 @@ To debug end-to-end failures on CI, check out the branch with the failure and ru
 | `npm run lint`           | ESLint                                                                             |
 | `npx tsc`                | Check types                                                                        |
 | `npm run ci`             | Lint, tests (unit and e2e), and types                                              |
-| `npm run ladle`          | Run Ladle (Storybook)                                                              |
 | `npm run fmt`            | Format everything. Rarely necessary thanks to editor integration                   |
 | `npm run gen-api`        | Generate API client (see [`docs/update-pinned-api.md`](docs/update-pinned-api.md)) |
 | `npm run start:mock-api` | Serve mock API on port 12220                                                       |

app/components/AccordionItem.tsx

@@ -30,8 +30,8 @@ export const AccordionItem = ({ children, isOpen, label, value }: AccordionItemP
     <Accordion.Item value={value}>
       <Accordion.Header className="max-w-lg">
         <Accordion.Trigger className="group flex w-full items-center justify-between border-t py-2 text-sans-xl border-secondary [&>svg]:data-[state=open]:rotate-90">
-          <div className="text-secondary">{label}</div>
-          <DirectionRightIcon className="transition-all text-secondary" />
+          <div className="text-raise">{label}</div>
+          <DirectionRightIcon className="transition-all text-default" />
         </Accordion.Trigger>
       </Accordion.Header>
       <Accordion.Content

app/components/AttachFloatingIpModal.tsx

@@ -18,7 +18,7 @@ import { Slash } from '~/ui/lib/Slash'
 
 function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
   return (
-    <div className="text-tertiary selected:text-accent-secondary">
+    <div className="text-secondary selected:text-accent-secondary">
       <div>{fip.name}</div>
       <div className="flex gap-0.5">
         <div>{fip.ip}</div>

app/components/CapacityBar.tsx

@@ -54,8 +54,8 @@ function TitleCell({ icon, title, unit }: TitleCellProps) {
     <div>
       <div className="flex grow items-center">
         <span className="mr-2 flex h-4 w-4 items-center text-accent">{icon}</span>
-        <span className="!normal-case text-mono-sm text-secondary">{title}</span>
-        <span className="ml-1 !normal-case text-mono-sm text-quaternary">({unit})</span>
+        <span className="!normal-case text-mono-sm text-default">{title}</span>
+        <span className="ml-1 !normal-case text-mono-sm text-tertiary">({unit})</span>
       </div>
     </div>
   )
@@ -65,8 +65,8 @@ function PctCell({ pct }: { pct: number }) {
   // NaN happens when both top and bottom are 0
   if (Number.isNaN(pct)) {
     return (
-      <div className="flex -translate-y-0.5 items-baseline text-quaternary">
-        <div className="font-light text-sans-2xl">—</div>
+      <div className="flex -translate-y-0.5 items-baseline text-tertiary">
+        <div className="font-light text-sans-2xl text-raise">—</div>
         <div className="text-sans-xl">%</div>
       </div>
     )
@@ -75,8 +75,8 @@ function PctCell({ pct }: { pct: number }) {
   const [wholeNumber, decimal] = splitDecimal(pct)
   return (
     <div className="flex -translate-y-0.5 items-baseline">
-      <div className="font-light text-sans-2xl">{wholeNumber}</div>
-      <div className="text-sans-xl text-quaternary">{decimal}%</div>
+      <div className="font-light text-sans-2xl text-raise">{wholeNumber}</div>
+      <div className="text-sans-xl text-tertiary">{decimal}%</div>
     </div>
   )
 }
@@ -102,8 +102,8 @@ type ValueCellProps = {
 function ValueCell({ label, value, unit }: ValueCellProps) {
   return (
     <div className="p-3 text-mono-sm">
-      <div className="mb-px text-quaternary">{label}</div>
-      <div className="!normal-case text-secondary">
+      <div className="mb-px text-tertiary">{label}</div>
+      <div className="!normal-case text-default">
         <BigNum num={value} />
         {unit}
       </div>

app/components/DocsPopover.tsx

@@ -26,9 +26,9 @@ export const DocsPopoverLink = ({ href, linkText }: DocsPopoverLinkProps) => (
     rel="noreferrer"
   >
     <div className="mx-2 border-b py-1.5 border-secondary">
-      <div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md !text-default group-hover:bg-tertiary">
+      <div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md text-raise group-hover:bg-tertiary">
         <span className="inline-block max-w-[300px] truncate align-middle">{linkText}</span>
-        <OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-tertiary" />
+        <OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-secondary" />
       </div>
     </div>
   </a>
@@ -49,18 +49,18 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
       </PopoverButton>
       <PopoverPanel
         // DocsPopoverPanel needed for enter animation
-        className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-1"
+        className="DocsPopoverPanel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
         anchor={{ to: 'bottom end', gap: 12 }}
       >
         <div className="px-4">
           <h2 className="mt-4 flex items-center gap-1 text-sans-md">
             <div className="mr-1 flex items-center text-accent-secondary">{icon}</div>
             Learn about {heading}
           </h2>
-          <p className="mb-3 mt-2 text-sans-md text-secondary">{summary}</p>
+          <p className="mb-3 mt-2 text-sans-md text-default">{summary}</p>
         </div>
         <div className="border-t pb-1 border-secondary">
-          <h3 className="mb-1 mt-3 px-4 text-mono-sm text-quaternary">Guides</h3>
+          <h3 className="mb-1 mt-3 px-4 text-mono-sm text-tertiary">Guides</h3>
           {links.map((link) => (
             <DocsPopoverLink key={link.href} {...link} />
           ))}

app/components/EquivalentCliCommand.tsx

@@ -37,7 +37,7 @@ export function EquivalentCliCommand({ command }: { command: string }) {
       <Modal isOpen={isOpen} onDismiss={handleDismiss} title="CLI command">
         <Modal.Section>
           <pre className="flex w-full rounded border px-4 py-3 !normal-case !tracking-normal text-mono-md bg-default border-secondary">
-            <div className="mr-2 select-none text-quaternary">$</div>
+            <div className="mr-2 select-none text-tertiary">$</div>
             {command}
           </pre>
         </Modal.Section>

app/components/ErrorBoundary.tsx

@@ -24,7 +24,7 @@ function ErrorFallback({ error }: Props) {
   return (
     <ErrorPage>
       <h1 className="text-sans-2xl">Something went wrong</h1>
-      <p className="text-tertiary">
+      <p className="text-secondary">
         Please try again. If the problem persists, contact your administrator.
       </p>
     </ErrorPage>

app/components/ErrorPage.tsx

@@ -34,9 +34,9 @@ export function ErrorPage({ children }: Props) {
       <div className="relative flex w-full justify-between">
         <Link
           to="/"
-          className="flex items-center p-6 text-mono-sm text-secondary hover:text-default"
+          className="flex items-center p-6 text-mono-sm text-default hover:text-raise"
         >
-          <PrevArrow12Icon title="Select" className="mr-2 text-tertiary" />
+          <PrevArrow12Icon title="Select" className="mr-2 text-secondary" />
           Back to console
         </Link>
         <SignOutButton className="mr-6 mt-4" />
@@ -57,7 +57,7 @@ export function NotFound() {
   return (
     <ErrorPage>
       <h1 className="text-sans-2xl">Page not found</h1>
-      <p className="text-tertiary">
+      <p className="text-secondary">
         The page you are looking for doesn&apos;t exist or you may not have access to it.
       </p>
     </ErrorPage>

app/components/ExternalIps.tsx

@@ -27,7 +27,7 @@ export function ExternalIps({ project, instance }: InstanceSelector) {
     <div className="flex items-center gap-1">
       {intersperse(
         ips.map((eip) => <CopyableIp ip={eip.ip} key={eip.ip} />),
-        <span className="text-quinary"> / </span>
+        <span className="text-quaternary"> / </span>
       )}
     </div>
   )

app/components/HL.tsx

@@ -10,7 +10,7 @@ import { classed } from '~/util/classed'
 // note parent with secondary text color must have 'group' on it for
 // this to work. see Toast for an example
 export const HL = classed.span`
-  text-sans-md text-default 
+  text-sans-md text-raise
   group-[.text-accent-secondary]:text-accent
   group-[.text-error-secondary]:text-error
   group-[.text-info-secondary]:text-info

app/components/IpPoolUtilization.tsx

@@ -12,8 +12,8 @@ import { BigNum } from '~/ui/lib/BigNum'
 
 const IpUtilFrac = (props: { allocated: number | bigint; capacity: number | bigint }) => (
   <>
-    <BigNum className="text-default" num={props.allocated} /> /{' '}
-    <BigNum className="text-tertiary" num={props.capacity} />
+    <BigNum className="text-raise" num={props.allocated} /> /{' '}
+    <BigNum className="text-secondary" num={props.capacity} />
   </>
 )
 

app/components/ListPlusCell.tsx

@@ -37,7 +37,7 @@ export const ListPlusCell = ({
   const rest = array.slice(numInCell)
   const content = (
     <div>
-      <div className="mb-2 text-sans-semi-md text-default">{tooltipTitle}</div>
+      <div className="mb-2 text-sans-semi-md text-raise">{tooltipTitle}</div>
       <div className="flex flex-col items-start gap-2">{...rest}</div>
     </div>
   )

app/components/MoreActionsMenu.tsx

@@ -24,7 +24,7 @@ export const MoreActionsMenu = ({ actions, label }: MoreActionsMenuProps) => {
         aria-label={label}
         className="flex h-8 w-8 items-center justify-center rounded border border-default hover:bg-tertiary"
       >
-        <More12Icon className="text-tertiary" />
+        <More12Icon />
       </DropdownMenu.Trigger>
       <DropdownMenu.Content className="mt-2">
         {actions.map((a) => (

app/components/RefetchIntervalPicker.tsx

@@ -54,8 +54,8 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
     intervalMs: (enabled && intervalPresets[intervalPreset]) || undefined,
     intervalPicker: (
       <div className="mb-12 flex items-center justify-between">
-        <div className="hidden items-center gap-2 text-right text-mono-sm text-quaternary lg+:flex">
-          <Time16Icon className="text-quinary" /> Refreshed{' '}
+        <div className="hidden items-center gap-2 text-right text-mono-sm text-tertiary lg+:flex">
+          <Time16Icon className="text-quaternary" /> Refreshed{' '}
           {toLocaleTimeString(lastFetched)}
         </div>
         <div className="flex">
@@ -70,7 +70,7 @@ export function useIntervalPicker({ enabled, isLoading, fn }: Props) {
             disabled={isLoading || !enabled}
           >
             <SpinnerLoader isLoading={isLoading}>
-              <Refresh16Icon className="text-tertiary" />
+              <Refresh16Icon className="text-secondary" />
             </SpinnerLoader>
           </button>
           <Listbox