feat(web): redesign usage insights

Author: maria-rcks

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

@@ -0,0 +1,25 @@
+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");
+  });
+});

apps/web/src/components/HeaderFilterMenu.tsx

@@ -0,0 +1,48 @@
+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]!;
+  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/segmented-tabs.tsx

@@ -0,0 +1,38 @@
+import type { ComponentProps, HTMLAttributes } from "react";
+
+import { cn } from "~/lib/utils";
+import { Toggle } from "~/components/ui/toggle";
+
+function SegmentedTabList({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "inline-flex w-fit items-center gap-0.5 rounded-lg bg-muted/45 p-0.5",
+        className,
+      )}
+      role="group"
+      {...props}
+    />
+  );
+}
+
+function SegmentedTab({
+  selected,
+  className,
+  ...props
+}: {
+  selected: boolean;
+} & Omit<ComponentProps<typeof Toggle>, "aria-pressed" | "pressed" | "size" | "type" | "variant">) {
+  return (
+    <Toggle
+      type="button"
+      pressed={selected}
+      size="segmented"
+      variant="segmented"
+      className={className}
+      {...props}
+    />
+  );
+}
+
+export { SegmentedTab, SegmentedTabList };

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",
       },
     },
   },