refactor(ui): adopt Badge component consistently (#163)

* refactor(ui): adopt Badge component consistently Replaces hand-rolled `<span class="rounded ...">` pill markup with the shared `<Badge>` component in billing, team, source detail, and tools pages. Also documents the preference in AGENTS.md so new code reaches for `<Badge>` and `<CardStack>` instead of reinventing them. No behaviour change — the visual output is equivalent to the previous inline styles, just routed through the shared component so the styling stays consistent across the app. * Update AGENTS.md ---------

Moritz Meyer committed 7 months ago

Commit 060e9ff1 parent 2a6312c5 files · +22 −25Browse files

Unified · Split

5 files

apps/cloud/src/routes/billing.tsx +5 −4
apps/cloud/src/routes/billing_.plans.tsx +7 −6
apps/cloud/src/routes/team.tsx +4 −5
packages/react/src/pages/source-detail.tsx +4 −7
packages/react/src/pages/tools.tsx +2 −3

apps/cloud/src/routes/billing.tsx+5−4

 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];
                 {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">

apps/cloud/src/routes/billing_.plans.tsx+7−6

 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];
                       {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>

apps/cloud/src/routes/team.tsx+4−5

   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 {
                           {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">
+                          <Badge className="bg-muted text-muted-foreground">You</Badge>
-                            You
-                          </span>
                         )}
                         {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 && (

packages/react/src/pages/source-detail.tsx+4−7

 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;
             {sourceData?.name ?? namespace}
           </h2>
           {sourceData?.runtime && (
-            <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+            <Badge className="bg-muted text-muted-foreground">built-in</Badge>
-              built-in
-            </span>
           )}
-          <span className="rounded bg-secondary px-1.5 py-0.5 text-[10px] font-medium text-secondary-foreground">
+          <Badge variant="secondary">{sourceData?.kind ?? "source"}</Badge>
-            {sourceData?.kind ?? "source"}
-          </span>
           {Result.isSuccess(tools) && !editing && (
             <span className="hidden text-[11px] tabular-nums text-muted-foreground/50 sm:block">
               {sourceTools.length} {sourceTools.length === 1 ? "tool" : "tools"}
           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}

packages/react/src/pages/tools.tsx+2−3

 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();
                         </p>
                       )}
                     </div>
-                    <span className="shrink-0 rounded bg-secondary px-1.5 py-0.5 text-[10px] font-medium text-secondary-foreground">
+                    <Badge variant="secondary">{t.sourceId}</Badge>
-                      {t.sourceId}
-                    </span>
                   </div>
                 ))}
               </div>

refactor(ui): adopt Badge component consistently (#163)

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code