@sentry/junior-dashboard 0.260.0 → 0.261.0

package/src/client/components/Select.tsx

@@ -1,18 +1,52 @@
 import type { SelectHTMLAttributes } from "react";
+import { ChevronDown } from "lucide-react";
 import { cn } from "../styles";
 
-/** Match native form choices to the dashboard text controls. */
+const selectClassName = {
+  form: "min-h-11 rounded-md border border-dashboard-border-emphasis bg-dashboard-ink pl-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 sm:min-h-10 sm:text-sm",
+  filter:
+    "h-9 rounded-lg border border-dashboard-border-emphasis bg-dashboard-control pl-2 text-sm text-dashboard-text transition-colors hover:border-dashboard-border-interactive focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25",
+  sort: "h-full bg-dashboard-control pl-2 font-sans text-xs text-dashboard-text-muted outline-none",
+};
+
+/** Keep native choices and position their arrow consistently across the dashboard. */
 export function Select({
   className,
+  variant = "form",
   ...props
-}: SelectHTMLAttributes<HTMLSelectElement>) {
+}: SelectHTMLAttributes<HTMLSelectElement> & {
+  variant?: keyof typeof selectClassName;
+}) {
+  const showArrow = !props.multiple && (props.size ?? 1) <= 1;
+
   return (
-    <select
-      {...props}
+    <span
       className={cn(
-        "block min-h-11 w-full min-w-0 rounded-md border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-60 sm:min-h-10 sm:text-sm",
-        className,
+        "relative block w-full min-w-0",
+        variant === "sort" && "h-full",
       )}
-    />
+    >
+      <select
+        {...props}
+        className={cn(
+          "block w-full min-w-0 disabled:cursor-not-allowed disabled:opacity-60 [color-scheme:var(--dashboard-color-scheme,dark)]",
+          selectClassName[variant],
+          showArrow
+            ? "appearance-none pr-9 forced-colors:appearance-auto"
+            : "pr-3",
+          className,
+        )}
+      />
+      {showArrow ? (
+        <ChevronDown
+          aria-hidden="true"
+          className={cn(
+            "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-dashboard-text-muted forced-colors:hidden",
+            props.disabled && "opacity-60",
+          )}
+          size={16}
+        />
+      ) : null}
+    </span>
   );
 }

package/src/client/components/controls/DirectorySortSelect.tsx

@@ -1,9 +1,11 @@
+import { Select } from "../Select";
+
 export type DirectorySortOption = {
   label: string;
   value: string;
 };
 
-/** Render a native directory sort control with an explicit dark color scheme. */
+/** Keep directory sorting consistent with the dashboard's shared select. */
 export function DirectorySortSelect(props: {
   ariaLabel: string;
   onChange(value: string): void;
@@ -15,9 +17,9 @@ export function DirectorySortSelect(props: {
       <span className="flex h-full items-center border-r border-dashboard-border-subtle px-2 font-sans font-medium text-xs text-dashboard-text-muted">
         Sort
       </span>
-      <select
+      <Select
         aria-label={props.ariaLabel}
-        className="h-full min-w-0 bg-dashboard-control px-2 font-sans text-xs text-dashboard-text-muted outline-none [color-scheme:var(--dashboard-color-scheme,dark)]"
+        variant="sort"
         value={props.value}
         onChange={(event) => props.onChange(event.currentTarget.value)}
       >
@@ -30,7 +32,7 @@ export function DirectorySortSelect(props: {
             {option.label}
           </option>
         ))}
-      </select>
+      </Select>
     </label>
   );
 }

package/src/client/conversations/ConversationWorkspace.tsx

@@ -1,5 +1,5 @@
 import type { InputImage } from "@sentry/junior/api/schema";
-import { useDeferredValue, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Globe2, LockKeyhole } from "lucide-react";
 import { useNavigate, useParams } from "react-router";
 
@@ -17,8 +17,8 @@ import {
 } from "./queries";
 import { conversationPath, NEW_CONVERSATION_PATH } from "./conversationRoutes";
 import { buildConversations, getDashboardTimeZone } from "../format";
+import { useDebouncedValue } from "../debouncedValue";
 import type { Conversation } from "../types";
-import { cn, dashboardContainerClass } from "../styles";
 import { ConversationPage } from "./ConversationPage";
 import { useConversationFinishedIndicators } from "./useConversationFinishedIndicators";
 
@@ -28,7 +28,7 @@ const CONVERSATION_PAGE_SIZE = 20;
 export function ConversationWorkspace() {
   const [page, setPage] = useState(1);
   const [query, setQuery] = useState("");
-  const search = useDeferredValue(query.trim());
+  const search = useDebouncedValue(query.trim());
   const params = useParams();
   const navigate = useNavigate();
   const selectedId = params.conversationId;
@@ -90,12 +90,7 @@ export function ConversationWorkspace() {
 
   if (home) {
     return (
-      <main
-        className={cn(
-          dashboardContainerClass,
-          "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
-        )}
-      >
+      <main className="h-full min-h-0 w-full overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6">
         <div className="mx-auto grid w-full max-w-6xl gap-8">
           {createView}
           <section aria-label="Conversations" className="grid gap-3">
@@ -192,25 +187,27 @@ function NewConversationView(props: {
         footerStart={
           <div
             aria-label="Conversation visibility"
-            className="inline-flex items-center gap-1"
+            className="inline-flex shrink-0 items-center gap-0.5 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-0.5"
             role="group"
           >
             <ToggleButton
+              className="min-w-20 gap-1.5"
               onClick={() => setVisibility("public")}
               pressed={isPublic}
               type="button"
               variant="segment"
             >
-              <Globe2 aria-hidden="true" className="mr-1 inline size-3" />
+              <Globe2 aria-hidden="true" className="size-3" />
               Public
             </ToggleButton>
             <ToggleButton
+              className="min-w-20 gap-1.5"
               onClick={() => setVisibility("private")}
               pressed={!isPublic}
               type="button"
               variant="segment"
             >
-              <LockKeyhole aria-hidden="true" className="mr-1 inline size-3" />
+              <LockKeyhole aria-hidden="true" className="size-3" />
               Private
             </ToggleButton>
           </div>

package/src/client/conversations/ConversationWorkspaceLoading.tsx

@@ -58,10 +58,7 @@ function ConversationHomeLoading() {
     <main
       aria-busy="true"
       aria-live="polite"
-      className={cn(
-        dashboardContainerClass,
-        "h-full min-h-0 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6",
-      )}
+      className="h-full min-h-0 w-full overflow-y-auto overscroll-contain px-4 py-4 sm:px-6 sm:py-6"
       role="status"
     >
       <span className="sr-only">Loading conversations</span>

package/src/client/debouncedValue.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Return `value` once it stops changing for `delayMs`. Use it for search text
+ * that is local state, so each keystroke does not send a request.
+ */
+export function useDebouncedValue<T>(value: T, delayMs = 250): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timeout = window.setTimeout(() => setDebounced(value), delayMs);
+    return () => window.clearTimeout(timeout);
+  }, [delayMs, value]);
+  return debounced;
+}

package/src/client/pages/automations/AutomationFilters.tsx

@@ -9,6 +9,7 @@ import { Button, ToggleButton } from "../../components/Button";
 import { DirectorySortSelect } from "../../components/controls/DirectorySortSelect";
 import { FilterGroup } from "../../components/FilterBar";
 import { SearchInput } from "../../components/SearchInput";
+import { Select } from "../../components/Select";
 
 /** Keep collection controls visible while a filtered page loads. */
 export function AutomationFilters(props: {
@@ -157,9 +158,9 @@ function AutomationFilterSelect(props: {
 }) {
   return (
     <FilterGroup label={props.label}>
-      <select
+      <Select
         aria-label={props.ariaLabel ?? `Filter by ${props.label.toLowerCase()}`}
-        className="h-9 w-full min-w-0 rounded-lg border border-dashboard-border-emphasis bg-dashboard-control px-2 text-sm text-dashboard-text transition-colors hover:border-dashboard-border-interactive focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25 [color-scheme:var(--dashboard-color-scheme,dark)]"
+        variant="filter"
         value={props.value}
         onChange={(event) => props.onChange(event.currentTarget.value)}
       >
@@ -173,7 +174,7 @@ function AutomationFilterSelect(props: {
             {option.label}
           </option>
         ))}
-      </select>
+      </Select>
     </FilterGroup>
   );
 }

package/src/client/pages/code/RepositoryTabs.tsx

@@ -1,4 +1,4 @@
-import { useDeferredValue, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import type { CodeRepositoryReport } from "@sentry/junior/api/schema";
 
 import { useCodeRepositoryConversationsData } from "../../api";
@@ -17,6 +17,7 @@ import {
 import { Card } from "../../components/layout/Card";
 import { ConversationHomeList } from "../../conversations/ConversationHomeList";
 import { buildConversations, getDashboardTimeZone } from "../../format";
+import { useDebouncedValue } from "../../debouncedValue";
 import { CodeActivityChart } from "./CodeActivityChart";
 import { CodeChangeRow } from "./CodeChangeRow";
 import { repositoryActivity } from "./RepositorySections";
@@ -28,7 +29,7 @@ const noFinishedConversations = new Set<string>();
 export function RepositoryConversationsTab(props: { repositoryId: string }) {
   const [query, setQuery] = useState("");
   const [page, setPage] = useState(1);
-  const search = useDeferredValue(query.trim());
+  const search = useDebouncedValue(query.trim());
   const feed = useCodeRepositoryConversationsData(props.repositoryId, search);
   const conversations = buildConversations(feed.data?.conversations ?? []);
   useEffect(() => {

package/src/client/pages/dev/ComponentsPage.tsx

@@ -1,6 +1,7 @@
 import { FormNotice } from "../../components/FormNotice";
 import { SearchInput } from "../../components/SearchInput";
 import { Select } from "../../components/Select";
+import { SelectFixtures } from "./SelectFixtures";
 import { ObjectFixtures } from "./ObjectFixtures";
 import { ChartFixtures } from "./ChartFixtures";
 import { SegmentedNavFixture, SegmentedTabsFixture } from "./SegmentedFixtures";
@@ -229,6 +230,9 @@ function FoundationsGalleryPage() {
           Your edits are still here. Review the latest version before saving.
         </FormNotice>
       </Fixture>
+      <Fixture title="Select controls">
+        <SelectFixtures />
+      </Fixture>
       <Fixture title="Conversation navigation">
         <DashboardChromeProvider>
           <DashboardHeader

package/src/client/pages/dev/SelectFixtures.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import { DirectorySortSelect } from "../../components/controls/DirectorySortSelect";
+import { Field } from "../../components/Field";
+import { FilterGroup } from "../../components/FilterBar";
+import { Select } from "../../components/Select";
+
+/** Show shared select arrows at form, filter, and directory sizes. */
+export function SelectFixtures() {
+  const [sort, setSort] = useState("recent");
+
+  return (
+    <div className="grid min-w-0 gap-4">
+      <Field label="Schedule" htmlFor="gallery-select-form">
+        <Select id="gallery-select-form" defaultValue="weekly">
+          <option value="daily">Every day</option>
+          <option value="weekly">Every week</option>
+        </Select>
+      </Field>
+      <FilterGroup label="State">
+        <Select aria-label="State" variant="filter">
+          <option>All states</option>
+          <option>Active</option>
+          <option>Paused</option>
+        </Select>
+      </FilterGroup>
+      <DirectorySortSelect
+        ariaLabel="Gallery sort"
+        onChange={setSort}
+        options={[
+          { label: "Recently created", value: "recent" },
+          { label: "Oldest created", value: "oldest" },
+        ]}
+        value={sort}
+      />
+      <FilterGroup className="w-36" label="Opened">
+        <Select aria-label="Opened">
+          <option>Last 90 days</option>
+          <option>Any time</option>
+        </Select>
+      </FilterGroup>
+      <Field label="Disabled" htmlFor="gallery-select-disabled">
+        <Select id="gallery-select-disabled" disabled>
+          <option>Every week</option>
+        </Select>
+      </Field>
+      <Field
+        label="Destination"
+        htmlFor="gallery-select-invalid"
+        error="Choose a destination."
+      >
+        <Select
+          id="gallery-select-invalid"
+          aria-invalid
+          aria-describedby="gallery-select-invalid-error"
+        >
+          <option value="">Choose a destination</option>
+          <option value="conversation">This Conversation</option>
+        </Select>
+      </Field>
+    </div>
+  );
+}