Skip to content

refactor(ui): adopt Badge component consistently #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RhysSullivan merged 2 commits into from
Apr 10, 2026
Merged

refactor(ui): adopt Badge component consistently #163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
157e76a
refactor(ui): adopt Badge component consistently
mrzmyr Apr 10, 2026
e750f17
Update AGENTS.md
RhysSullivan Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions apps/cloud/src/routes/billing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { createFileRoute, Link } from "@tanstack/react-router";
import { useCustomer, useListPlans } from "autumn-js/react";
import { Button } from "@executor/react/components/button";
import { Badge } from "@executor/react/components/badge";

type Plan = NonNullable<ReturnType<typeof useListPlans>["data"]>[number];

Expand Down Expand Up @@ -68,14 +69,14 @@ function BillingPage() {
{planName}
</p>
{isSwitching && (
<span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-amber-600 dark:text-amber-400 leading-none">
<Badge className="bg-amber-500/10 text-amber-600 dark:text-amber-400">
Switching
</span>
</Badge>
)}
{isCanceling && !isSwitching && (
<span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-amber-600 dark:text-amber-400 leading-none">
<Badge className="bg-amber-500/10 text-amber-600 dark:text-amber-400">
Canceling
</span>
</Badge>
)}
</div>
<p className="mt-1 text-[0.75rem] text-muted-foreground/70 leading-none">
Expand Down
13 changes: 7 additions & 6 deletions apps/cloud/src/routes/billing_.plans.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useState } from "react";
import { createFileRoute, Link } from "@tanstack/react-router";
import { useCustomer, useListPlans } from "autumn-js/react";
import { Button } from "@executor/react/components/button";
import { Badge } from "@executor/react/components/badge";

type Plan = NonNullable<ReturnType<typeof useListPlans>["data"]>[number];

Expand Down Expand Up @@ -120,19 +121,19 @@ function PlansPage() {
{plan.name}
</p>
{isCurrent && (
<span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-amber-600 dark:text-amber-400 leading-none">
<Badge className="bg-amber-500/10 text-amber-600 dark:text-amber-400">
Your plan
</span>
</Badge>
)}
{isCanceling && (
<span className="rounded-full bg-amber-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-amber-600 dark:text-amber-400 leading-none">
<Badge className="bg-amber-500/10 text-amber-600 dark:text-amber-400">
Canceling
</span>
</Badge>
)}
{isScheduled && (
<span className="rounded-full bg-emerald-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-emerald-600 dark:text-emerald-400 leading-none">
<Badge className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
Scheduled
</span>
</Badge>
)}
</div>
<p className="mt-1 text-[0.75rem] text-muted-foreground/70">{meta.tagline}</p>
Expand Down
9 changes: 4 additions & 5 deletions apps/cloud/src/routes/team.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
DialogClose,
} from "@executor/react/components/dialog";
import { Button } from "@executor/react/components/button";
import { Badge } from "@executor/react/components/badge";
import { Input } from "@executor/react/components/input";
import { Label } from "@executor/react/components/label";
import {
Expand Down Expand Up @@ -214,14 +215,12 @@ function TeamPage() {
{member.name ?? member.email}
</p>
{member.isCurrentUser && (
<span className="rounded bg-muted px-1.5 py-0.5 text-[0.625rem] font-medium text-muted-foreground leading-none">
You
</span>
<Badge className="bg-muted text-muted-foreground">You</Badge>
)}
{member.status === "pending" && (
<span className="rounded bg-amber-500/10 px-1.5 py-0.5 text-[0.625rem] font-medium text-amber-600 dark:text-amber-400 leading-none">
<Badge className="bg-amber-500/10 text-amber-600 dark:text-amber-400">
Invited
</span>
</Badge>
)}
</div>
{member.name && (
Expand Down
11 changes: 4 additions & 7 deletions packages/react/src/pages/source-detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import type { ToolSummary } from "../components/tool-tree";
import { useScope } from "../hooks/use-scope";
import type { SourcePlugin } from "../plugins/source-plugin";
import { Button } from "../components/button";
import { Badge } from "../components/badge";

export function SourceDetailPage(props: {
namespace: string;
Expand Down Expand Up @@ -116,13 +117,9 @@ export function SourceDetailPage(props: {
{sourceData?.name ?? namespace}
</h2>
{sourceData?.runtime && (
<span className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
built-in
</span>
<Badge className="bg-muted text-muted-foreground">built-in</Badge>
)}
<span className="rounded bg-secondary px-1.5 py-0.5 text-[10px] font-medium text-secondary-foreground">
{sourceData?.kind ?? "source"}
</span>
<Badge variant="secondary">{sourceData?.kind ?? "source"}</Badge>
{Result.isSuccess(tools) && !editing && (
<span className="hidden text-[11px] tabular-nums text-muted-foreground/50 sm:block">
{sourceTools.length} {sourceTools.length === 1 ? "tool" : "tools"}
Expand Down Expand Up @@ -208,7 +205,7 @@ export function SourceDetailPage(props: {
onSuccess: () => (
<div className="flex min-h-0 flex-1 overflow-hidden">
{/* Left: tool tree */}
<div className="flex w-72 shrink-0 flex-col border-r border-border bg-card/30 lg:w-80 xl:w-[22rem]">
<div className="flex w-72 shrink-0 flex-col border-r border-border/60 lg:w-80 xl:w-[22rem]">
<ToolTree
tools={sourceTools}
selectedToolId={selectedToolId}
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/pages/tools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useAtomValue, Result } from "@effect-atom/atom-react";
import { toolsAtom } from "../api/atoms";
import { useScope } from "../hooks/use-scope";
import { Badge } from "../components/badge";

export function ToolsPage() {
const scopeId = useScope();
Expand Down Expand Up @@ -61,9 +62,7 @@ export function ToolsPage() {
</p>
)}
</div>
<span className="shrink-0 rounded bg-secondary px-1.5 py-0.5 text-[10px] font-medium text-secondary-foreground">
{t.sourceId}
</span>
<Badge variant="secondary">{t.sourceId}</Badge>
</div>
))}
</div>
Expand Down