feat(web): redesign usage insights

Author: maria-rcks

apps/web/src/components/HeaderFilterMenu.test.tsx

@@ -0,0 +1,33 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vite-plus/test";
+
+import { HeaderFilterMenu } from "./HeaderFilterMenu";
+
+describe("HeaderFilterMenu", () => {
+  it("uses the shared button contract for its trigger", () => {
+    const markup = renderToStaticMarkup(
+      <HeaderFilterMenu
+        label="Usage metric"
+        value="cost"
+        options={[
+          { value: "cost", label: "Cost" },
+          { value: "tokens", label: "Tokens" },
+        ]}
+        onChange={() => {}}
+      />,
+    );
+
+    expect(markup).toContain('data-slot="menu-trigger"');
+    expect(markup).toContain("focus-visible:ring-2");
+    expect(markup).toContain('aria-label="Usage metric"');
+    expect(markup).toContain("Cost");
+  });
+
+  it("renders nothing when there are no options", () => {
+    const markup = renderToStaticMarkup(
+      <HeaderFilterMenu label="Empty filter" value="none" options={[]} onChange={() => {}} />,
+    );
+
+    expect(markup).toBe("");
+  });
+});

apps/web/src/components/HeaderFilterMenu.tsx

@@ -0,0 +1,49 @@
+import { ChevronDownIcon } from "lucide-react";
+
+import { Button } from "./ui/button";
+import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "./ui/menu";
+
+export interface HeaderFilterMenuOption<Value extends string> {
+  value: Value;
+  label: string;
+}
+
+export function HeaderFilterMenu<Value extends string>({
+  label,
+  value,
+  options,
+  onChange,
+  align = "start",
+  popupClassName,
+}: {
+  label: string;
+  value: Value;
+  options: ReadonlyArray<HeaderFilterMenuOption<Value>>;
+  onChange: (value: Value) => void;
+  align?: "start" | "center" | "end";
+  popupClassName?: string;
+}) {
+  const current = options.find((option) => option.value === value) ?? options[0];
+  if (!current) return null;
+  return (
+    <Menu>
+      <MenuTrigger
+        render={
+          <Button size="compact" variant="ghost-muted" aria-label={label} className="text-sm" />
+        }
+      >
+        {current.label}
+        <ChevronDownIcon aria-hidden className="size-3 text-muted-foreground/70" />
+      </MenuTrigger>
+      <MenuPopup align={align} side="bottom" className={popupClassName ?? "min-w-40"}>
+        <MenuRadioGroup value={current.value} onValueChange={(next) => onChange(next as Value)}>
+          {options.map((option) => (
+            <MenuRadioItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuRadioItem>
+          ))}
+        </MenuRadioGroup>
+      </MenuPopup>
+    </Menu>
+  );
+}

apps/web/src/components/WorkspaceBreadcrumb.tsx

@@ -45,9 +45,9 @@ export function WorkspaceBreadcrumbItem({
   );
 }
 
-export function WorkspaceBreadcrumbSeparator() {
+export function WorkspaceBreadcrumbSeparator({ className }: { readonly className?: string }) {
   return (
-    <li aria-hidden="true" className="flex shrink-0 items-center text-icon-muted">
+    <li aria-hidden="true" className={cn("flex shrink-0 items-center text-icon-muted", className)}>
       /
     </li>
   );

apps/web/src/components/WorkspacePageContainer.tsx

@@ -52,3 +52,11 @@ export function WorkspacePageHeader({
     />
   );
 }
+
+/** Keeps an icon glyph on the content edge while its larger hit target extends outward. */
+export function WorkspacePageHeaderEdgeControl({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<"div">) {
+  return <div className={cn("-me-[7px] flex shrink-0", className)} {...props} />;
+}

apps/web/src/components/ui/toggle-group.tsx

@@ -30,11 +30,13 @@ function ToggleGroup({
         orientation === "horizontal"
           ? "*:pointer-coarse:after:min-w-auto"
           : "*:pointer-coarse:after:min-h-auto",
-        variant === "default"
-          ? "gap-0.5"
-          : orientation === "horizontal"
-            ? "*:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none"
-            : "*:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block",
+        variant === "segmented"
+          ? "gap-0.5 rounded-lg bg-muted/45 p-0.5"
+          : variant === "default"
+            ? "gap-0.5"
+            : orientation === "horizontal"
+              ? "*:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none"
+              : "*:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block",
         className,
       )}
       data-size={size}

apps/web/src/components/ui/toggle.tsx

@@ -18,6 +18,8 @@ const toggleVariants = cva(
           "h-7 min-w-7 rounded-md px-[calc(--spacing(1)-1px)] text-xs before:rounded-[calc(var(--radius-md)-1px)] [&_svg:not([class*='size-'])]:size-3.5",
         default: "h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8",
         lg: "h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9",
+        segmented:
+          "h-6 min-w-0 rounded-md px-2.5 text-xs before:rounded-[calc(var(--radius-md)-1px)]",
         sm: "h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7",
         xs: "h-7 min-w-7 px-[calc(--spacing(1)-1px)] sm:h-6 sm:min-w-6 rounded-md",
       },
@@ -27,6 +29,8 @@ const toggleVariants = cva(
           "border-transparent text-foreground shadow-none [:disabled,:active,[data-pressed]]:shadow-none before:shadow-none data-pressed:bg-accent data-pressed:text-accent-foreground disabled:opacity-100 disabled:text-muted-foreground disabled:[&_svg]:opacity-100",
         outline:
           "border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none",
+        segmented:
+          "border-transparent text-muted-foreground shadow-none transition-colors before:shadow-none hover:bg-accent/45 hover:text-foreground data-pressed:bg-accent data-pressed:text-foreground data-pressed:shadow-xs/5",
       },
     },
   },