@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/components/FilterBar.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { cn } from "../styles";
 import { Card } from "./layout/Card";
 import { SearchInput } from "./SearchInput";
+import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
 
 /** Lay out labeled filter groups and an optional search field. */
 export function FilterBar(props: {
@@ -69,43 +70,27 @@ export function FilterTabList(props: {
   value: string;
 }) {
   return (
-    <div
-      aria-label={props.ariaLabel}
-      className="grid min-w-0 grid-cols-3 gap-1 border-b border-dashboard-border-subtle sm:flex sm:overflow-x-auto"
-      role="tablist"
-    >
-      {props.items.map((item) => {
-        const selected = props.value === item.value;
-        return (
-          <button
-            aria-selected={selected}
-            className={cn(
-              "relative flex min-w-0 cursor-pointer items-center justify-between gap-2 border-0 bg-transparent px-3 py-2.5 font-sans font-medium text-xs transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-px sm:shrink-0 sm:justify-start",
-              selected
-                ? "text-dashboard-accent-text after:bg-dashboard-accent"
-                : "text-dashboard-text-muted after:bg-transparent hover:text-dashboard-text",
-            )}
+    <Tabs onValueChange={props.onChange} value={props.value}>
+      <TabsList
+        aria-label={props.ariaLabel}
+        className="grid grid-cols-3 sm:flex sm:overflow-x-auto"
+        variant="line"
+      >
+        {props.items.map((item) => (
+          <TabsTrigger
+            className="group/tab justify-between sm:shrink-0 sm:justify-start"
             key={item.value || "all"}
-            onClick={() => props.onChange(item.value)}
-            role="tab"
-            type="button"
+            value={item.value}
           >
             {item.label}
             {item.count !== undefined ? (
-              <span
-                className={cn(
-                  "rounded-sm border px-1.5 py-0.5 text-xs",
-                  selected
-                    ? "border-dashboard-accent/20 bg-dashboard-accent/10 text-dashboard-accent-text"
-                    : "border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted",
-                )}
-              >
+              <span className="rounded-sm border border-dashboard-border bg-dashboard-fill-soft px-1.5 py-0.5 text-xs text-dashboard-text-muted group-data-active/tab:border-dashboard-accent/20 group-data-active/tab:bg-dashboard-accent/10 group-data-active/tab:text-dashboard-accent-text">
                 {item.count.toLocaleString("en-US")}
               </span>
             ) : null}
-          </button>
-        );
-      })}
-    </div>
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </Tabs>
   );
 }

package/src/client/components/ImageAttachment.tsx

@@ -1,17 +1,13 @@
 import { ExternalLink, X } from "lucide-react";
 import {
   type MouseEvent,
-  useEffect,
-  useId,
-  useRef,
   useState,
   type ComponentPropsWithoutRef,
 } from "react";
 
-import {
-  acquireBodyScrollLock,
-  releaseBodyScrollLock,
-} from "../bodyScrollLock";
+import { Button } from "./ui/button";
+import { Dialog, DialogClose, DialogContent, DialogTitle } from "./ui/dialog";
+import { useSheet } from "./ui/useSheet";
 
 /** Return true when an image link click should open the inline preview. */
 export function shouldPreviewImageAttachment(
@@ -45,9 +41,6 @@ export function ImageAttachment(
     triggerClassName?: string;
   } & Omit<ComponentPropsWithoutRef<"img">, "alt" | "className" | "src">,
 ) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-  const bodyScrollLockedRef = useRef(false);
-  const titleId = useId();
   const [open, setOpen] = useState(false);
   const {
     context,
@@ -58,20 +51,6 @@ export function ImageAttachment(
     ...imageProps
   } = props;
 
-  const unlockBodyScroll = () => {
-    if (!bodyScrollLockedRef.current) return;
-    releaseBodyScrollLock();
-    bodyScrollLockedRef.current = false;
-  };
-
-  const close = () => {
-    dialogRef.current?.close();
-    setOpen(false);
-    unlockBodyScroll();
-  };
-
-  useEffect(() => () => unlockBodyScroll(), []);
-
   return (
     <>
       <a
@@ -80,12 +59,7 @@ export function ImageAttachment(
         onClick={(event) => {
           if (!shouldPreviewImageAttachment(event)) return;
           event.preventDefault();
-          const dialog = dialogRef.current;
-          if (!dialog || dialog.open) return;
-          acquireBodyScrollLock();
-          bodyScrollLockedRef.current = true;
           setOpen(true);
-          dialog.showModal();
         }}
         rel="noreferrer"
         target="_blank"
@@ -97,62 +71,74 @@ export function ImageAttachment(
           src={src}
         />
       </a>
-      <dialog
-        aria-labelledby={titleId}
-        className="m-0 h-dvh max-h-none w-screen max-w-none overflow-hidden border-0 bg-dashboard-ink p-0 text-dashboard-text backdrop:bg-dashboard-overlay md:m-auto md:h-[min(90dvh,960px)] md:w-[min(92vw,1440px)] md:rounded-lg md:border md:border-dashboard-border-emphasis"
-        onClick={(event) => {
-          if (event.target === event.currentTarget) close();
-        }}
-        onClose={() => {
-          setOpen(false);
-          unlockBodyScroll();
-        }}
-        ref={dialogRef}
+      {open ? (
+        <ImagePreview
+          context={context}
+          filename={filename}
+          onClose={() => setOpen(false)}
+          src={src}
+        />
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * Show one image above the page. `useSheet` shares the document scroll lock
+ * with sheets and keeps Escape and backdrop dismissal on the front modal.
+ */
+function ImagePreview(props: {
+  context?: string;
+  filename: string;
+  onClose(): void;
+  src: string;
+}) {
+  const sheet = useSheet(props.onClose);
+  return (
+    <Dialog {...sheet.rootProps}>
+      <DialogContent
+        {...sheet.contentProps}
+        className="top-0 left-0 h-dvh w-screen max-w-none translate-x-0 translate-y-0 gap-0 overflow-hidden rounded-none border-0 bg-dashboard-ink p-0 shadow-none sm:max-w-none md:top-1/2 md:left-1/2 md:h-[min(90dvh,960px)] md:w-[min(92vw,1440px)] md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-lg md:border"
       >
         <div className="grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] bg-dashboard-bg-elevated">
           <header className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-1.5 border-b border-dashboard-border-strong bg-dashboard-surface-raised px-3 py-2 pt-[max(0.5rem,env(safe-area-inset-top))] md:px-4">
             <div className="min-w-0">
-              <div
-                className="truncate font-mono text-xs text-dashboard-text"
-                id={titleId}
-              >
-                {filename}
-              </div>
-              {context ? (
+              <DialogTitle className="truncate font-mono text-xs leading-normal font-normal">
+                {props.filename}
+              </DialogTitle>
+              {props.context ? (
                 <div className="truncate font-mono text-2xs text-dashboard-text-muted">
-                  {context}
+                  {props.context}
                 </div>
               ) : null}
             </div>
             <a
               className="inline-flex min-h-10 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium text-dashboard-text-muted no-underline transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text"
-              href={src}
+              href={props.src}
               rel="noreferrer"
               target="_blank"
             >
               <ExternalLink aria-hidden="true" size={14} />
               <span className="max-sm:sr-only">Open raw file</span>
             </a>
-            <button
-              className="inline-flex min-h-10 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium text-dashboard-text-muted transition-colors hover:bg-dashboard-fill-hover hover:text-dashboard-text"
-              onClick={close}
-              type="button"
+            <DialogClose
+              render={
+                <Button className="h-10 gap-1.5 border-0 bg-transparent px-2.5 text-xs text-dashboard-text-muted hover:bg-dashboard-fill-hover hover:text-dashboard-text" />
+              }
             >
               <X aria-hidden="true" size={16} />
               <span>Close</span>
-            </button>
+            </DialogClose>
           </header>
           <div className="grid min-h-0 place-items-center overflow-auto p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] md:p-6">
-            {open ? (
-              <img
-                alt={filename}
-                className="max-h-full max-w-full object-contain"
-                src={src}
-              />
-            ) : null}
+            <img
+              alt={props.filename}
+              className="max-h-full max-w-full object-contain"
+              src={props.src}
+            />
           </div>
         </div>
-      </dialog>
-    </>
+      </DialogContent>
+    </Dialog>
   );
 }

package/src/client/components/InlineError.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 
 import { cn } from "../styles";
+import { Alert } from "./ui/alert";
 
 /** Render a compact error message with consistent alert semantics. */
 export function InlineError(props: {
@@ -8,11 +9,14 @@ export function InlineError(props: {
   className?: string;
 }) {
   return (
-    <p
-      className={cn("m-0 text-sm text-rose-300", props.className)}
-      role="alert"
+    <Alert
+      className={cn(
+        "block rounded-none border-0 bg-transparent p-0 text-rose-300",
+        props.className,
+      )}
+      variant="destructive"
     >
       {props.children}
-    </p>
+    </Alert>
   );
 }

package/src/client/components/Metric.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 
 import { cn } from "../styles";
 import { ShimmerText } from "./ShimmerText";
-import { Tooltip } from "./Tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 export type MetricTooltipLine = {
   label?: string;
@@ -85,34 +85,44 @@ export function MetricValue(props: {
   }
 
   return (
-    <Tooltip
-      align={props.align}
-      className={cn(
-        "w-[calc(100vw-2rem)] max-w-80 rounded-lg border border-dashboard-border-emphasis bg-dashboard-bg text-left text-xs font-normal text-dashboard-text-muted shadow-xl shadow-black/35",
-        props.tooltipCard ? "p-3 leading-snug" : "px-3 py-2 leading-relaxed",
-      )}
-      content={
-        props.tooltipCard ? (
-          <span className="block max-h-[min(30rem,var(--radix-hover-card-content-available-height,30rem))] overflow-y-auto">
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            className={cn(
+              "inline-flex border-b border-dotted border-dashboard-border-interactive outline-none transition-colors hover:border-dashboard-border-heavy focus-visible:border-dashboard-border-heavy",
+              props.className,
+            )}
+            tabIndex={0}
+          >
+            {props.children}
+          </span>
+        }
+      />
+      <TooltipContent
+        align={
+          props.align === "left"
+            ? "start"
+            : props.align === "right"
+              ? "end"
+              : "center"
+        }
+        className={cn(
+          "w-[calc(100vw-2rem)] max-w-80 rounded-lg bg-dashboard-bg text-left font-normal shadow-xl shadow-black/35",
+          props.tooltipCard ? "p-3 leading-snug" : "px-3 py-2 leading-relaxed",
+        )}
+        side={props.tooltipPlacement === "above" ? "top" : "bottom"}
+      >
+        {props.tooltipCard ? (
+          <span className="block max-h-[min(30rem,var(--available-height,30rem))] overflow-y-auto">
             {props.tooltipCard}
           </span>
         ) : tooltip ? (
           <span className="block max-h-72 overflow-y-auto">
             <TooltipLines lines={tooltip} />
           </span>
-        ) : null
-      }
-      placement={props.tooltipPlacement ?? "below"}
-    >
-      <span
-        className={cn(
-          "inline-flex border-b border-dotted border-dashboard-border-interactive outline-none transition-colors hover:border-dashboard-border-heavy focus-visible:border-dashboard-border-heavy",
-          props.className,
-        )}
-        tabIndex={0}
-      >
-        {props.children}
-      </span>
+        ) : null}
+      </TooltipContent>
     </Tooltip>
   );
 }

package/src/client/components/Notice.tsx

@@ -1,7 +1,9 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import type { LucideIcon } from "lucide-react";
 
 import { cn } from "../styles";
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
+import { Button } from "./ui/button";
 
 type NoticeTone = "default" | "error";
 
@@ -14,7 +16,7 @@ type NoticeProps = {
   tone?: NoticeTone;
 };
 
-type NoticeActionProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+type NoticeActionProps = ComponentProps<typeof Button> & {
   tone?: NoticeTone;
 };
 
@@ -29,11 +31,10 @@ export function Notice({
 }: NoticeProps) {
   const isError = tone === "error";
   return (
-    <div
-      className={cn(
-        "overflow-hidden rounded-xl border bg-dashboard-surface-raised shadow-[0_16px_40px_rgba(0,0,0,0.5)]",
-        isError ? "border-rose-300/25" : "border-dashboard-border-strong",
-      )}
+    <Alert
+      className="block gap-0 overflow-hidden rounded-xl p-0 shadow-[0_16px_40px_rgba(0,0,0,0.5)]"
+      role={isError ? "alert" : "status"}
+      variant={isError ? "destructive" : "default"}
     >
       <div className="flex min-w-0 items-center gap-3 px-3 py-3">
         {Icon ? (
@@ -48,31 +49,26 @@ export function Notice({
             <Icon aria-hidden="true" size={16} />
           </div>
         ) : null}
-        <div className="min-w-0 flex-1" role={isError ? "alert" : "status"}>
-          <div
-            className={cn(
-              "font-display text-sm font-medium leading-snug",
-              isError ? "text-rose-50" : "text-dashboard-text",
-            )}
-          >
+        <div className="min-w-0 flex-1">
+          <AlertTitle className="font-display text-sm leading-snug">
             {title}
             {detail ? " " : null}
-          </div>
+          </AlertTitle>
           {detail ? (
-            <div
+            <AlertDescription
               className={cn(
                 "mt-0.5 truncate font-sans text-xs",
-                isError ? "text-rose-100/70" : "text-dashboard-text-muted",
+                isError && "text-rose-100/70",
               )}
             >
               {detail}
-            </div>
+            </AlertDescription>
           ) : null}
         </div>
         {action}
       </div>
       {children}
-    </div>
+    </Alert>
   );
 }
 
@@ -80,22 +76,19 @@ export function Notice({
 export function NoticeAction({
   className,
   tone = "default",
-  type = "button",
   ...props
 }: NoticeActionProps) {
   const isError = tone === "error";
   return (
-    <button
+    <Button
       {...props}
       className={cn(
-        "shrink-0 cursor-pointer px-3 py-1.5 text-xs transition focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-40",
-        isError ? "focus:ring-rose-300/40" : "focus:ring-dashboard-focus/35",
+        "h-auto shrink-0 rounded-lg border-0 px-3 py-1.5 text-xs leading-normal",
         isError
-          ? "rounded-lg bg-rose-200/15 font-sans font-medium text-rose-50 hover:bg-rose-200/25"
-          : "rounded-lg bg-dashboard-accent/10 font-sans font-medium text-dashboard-accent-text hover:bg-dashboard-accent/20",
+          ? "bg-rose-200/15 text-rose-50 hover:bg-rose-200/25 hover:text-rose-50 focus-visible:outline-rose-300/55 data-disabled:hover:bg-rose-200/15 data-disabled:hover:text-rose-50"
+          : "bg-dashboard-accent/10 text-dashboard-accent-text hover:bg-dashboard-accent/20 hover:text-dashboard-accent-text data-disabled:hover:bg-dashboard-accent/10 data-disabled:hover:text-dashboard-accent-text",
         className,
       )}
-      type={type}
     />
   );
 }

package/src/client/components/PageContentSkeleton.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 
 import { Card } from "./layout/Card";
-import { Skeleton } from "./Skeleton";
+import { Skeleton } from "./ui/skeleton";
 import { cn } from "../styles";
 
 export type PageContentSkeletonVariant =

package/src/client/components/Pagination.tsx

@@ -1,7 +1,12 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
-
 import { cn } from "../styles";
-import { Button } from "./Button";
+import { Button } from "./ui/button";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+} from "./ui/pagination";
 
 /** Render a centered load-more control for cursor or progressive lists. */
 export function LoadMorePagination(props: {
@@ -54,10 +59,9 @@ export function PagePagination(props: {
   const end = Math.min(props.total, current * props.pageSize);
 
   return (
-    <div
-      aria-label="Pagination"
+    <Pagination
       className={cn(
-        "flex flex-wrap items-center justify-between gap-3",
+        "flex-wrap items-center justify-between gap-3",
         props.className,
       )}
     >
@@ -65,27 +69,23 @@ export function PagePagination(props: {
         Showing {start.toLocaleString("en-US")}-{end.toLocaleString("en-US")} of{" "}
         {props.total.toLocaleString("en-US")}
       </p>
-      <div className="flex items-center gap-2">
-        <Button
-          aria-label="Previous page"
-          disabled={current <= 1}
-          onClick={() => props.onPageChange(current - 1)}
-          size="icon"
-        >
-          <ChevronLeft aria-hidden="true" size={16} />
-        </Button>
-        <span className="min-w-16 text-center font-sans tabular-nums text-xs text-dashboard-text-muted">
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            disabled={current <= 1}
+            onClick={() => props.onPageChange(current - 1)}
+          />
+        </PaginationItem>
+        <PaginationItem className="min-w-16 text-center font-sans tabular-nums text-xs text-dashboard-text-muted">
           {current} / {props.pageCount}
-        </span>
-        <Button
-          aria-label="Next page"
-          disabled={current >= props.pageCount}
-          onClick={() => props.onPageChange(current + 1)}
-          size="icon"
-        >
-          <ChevronRight aria-hidden="true" size={16} />
-        </Button>
-      </div>
-    </div>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext
+            disabled={current >= props.pageCount}
+            onClick={() => props.onPageChange(current + 1)}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
   );
 }

package/src/client/components/ParticipantAvatarStack.tsx

@@ -1,10 +1,10 @@
 import type { ActorIdentity } from "@sentry/junior/api/schema";
 
 import { actorLabel } from "../format";
-import { cn } from "../styles";
 import type { Conversation } from "../types";
 import { ActorAvatar } from "./ActorAvatar";
-import { Tooltip } from "./Tooltip";
+import { Avatar, AvatarFallback } from "./ui/avatar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 const MAX_VISIBLE_PARTICIPANTS = 3;
 
@@ -51,28 +51,31 @@ function ParticipantTooltipContent(props: { participant: ActorIdentity }) {
   );
 }
 
-function Avatar(props: {
+function ParticipantAvatar(props: {
   participant: ActorIdentity;
   size: ParticipantAvatarStackProps["size"];
 }) {
   const label = participantDescription(props.participant);
   return (
-    <Tooltip
-      content={<ParticipantTooltipContent participant={props.participant} />}
-      focusable
-      triggerClassName="-ml-1 first:ml-0 pointer-events-none [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto"
-    >
-      <span
-        aria-label={label}
-        className="relative inline-flex rounded-full focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus"
-        onKeyDown={(event) => event.stopPropagation()}
-        tabIndex={0}
-      >
-        <ActorAvatar
-          name={participantName(props.participant)}
-          size={props.size}
-        />
-      </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            aria-label={label}
+            className="relative -ml-1 inline-flex rounded-full first:ml-0 pointer-events-none focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto"
+            onKeyDown={(event) => event.stopPropagation()}
+            tabIndex={0}
+          >
+            <ActorAvatar
+              name={participantName(props.participant)}
+              size={props.size}
+            />
+          </span>
+        }
+      />
+      <TooltipContent>
+        <ParticipantTooltipContent participant={props.participant} />
+      </TooltipContent>
     </Tooltip>
   );
 }
@@ -98,15 +101,32 @@ export function ParticipantAvatarStack(props: ParticipantAvatarStackProps) {
       role="group"
     >
       {visible.map((participant, index) => (
-        <Avatar
+        <ParticipantAvatar
           key={participantKey(participant, index)}
           participant={participant}
           size={props.size}
         />
       ))}
       {hidden.length > 0 ? (
-        <Tooltip
-          content={
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Avatar
+                aria-label={`${hidden.length} more participants: ${hidden
+                  .map(participantDescription)
+                  .join("; ")}`}
+                className="-ml-1 pointer-events-none bg-dashboard-surface-active shadow-none focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto"
+                onKeyDown={(event) => event.stopPropagation()}
+                size={props.size === "list" ? "sm" : "default"}
+                tabIndex={0}
+              >
+                <AvatarFallback className="tabular-nums tracking-normal text-dashboard-text-muted">
+                  +{hidden.length}
+                </AvatarFallback>
+              </Avatar>
+            }
+          />
+          <TooltipContent>
             <span className="grid gap-1 font-sans">
               {hidden.map((participant, index) => (
                 <span key={participantKey(participant, index)}>
@@ -114,23 +134,7 @@ export function ParticipantAvatarStack(props: ParticipantAvatarStackProps) {
                 </span>
               ))}
             </span>
-          }
-          focusable
-          triggerClassName="-ml-1 pointer-events-none [@media(hover:hover)_and_(pointer:fine)]:pointer-events-auto"
-        >
-          <span
-            aria-label={`${hidden.length} more participants: ${hidden
-              .map(participantDescription)
-              .join("; ")}`}
-            className={cn(
-              "relative inline-grid shrink-0 place-items-center rounded-full border-2 border-dashboard-bg bg-dashboard-surface-active font-sans font-semibold tabular-nums leading-none text-dashboard-text-muted focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-dashboard-focus",
-              props.size === "list" ? "size-6 text-2xs" : "size-7 text-xs",
-            )}
-            onKeyDown={(event) => event.stopPropagation()}
-            tabIndex={0}
-          >
-            +{hidden.length}
-          </span>
+          </TooltipContent>
         </Tooltip>
       ) : null}
     </span>