@sentry/junior-dashboard 0.274.0 → 0.275.0

package/src/client/review-desk/ConversationReviewItems.tsx

@@ -0,0 +1,99 @@
+import { ChevronRight, Inbox } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import type { ReviewItemPayload } from "@sentry/junior/api/schema";
+
+import { LoadMorePagination } from "../components/Pagination";
+import {
+  DetailsCard,
+  DetailsList,
+  DetailsRow,
+} from "../conversations/DetailsList";
+import { cn, dashboardDisclosureChevronClass } from "../styles";
+import { ReviewItemCard } from "./ReviewItemCard";
+import { useReviewItemsData } from "./queries";
+
+/**
+ * Show the open Review items linked to a Conversation in its details. Each
+ * item is one line, like its sidebar chip, and expands to the full card in
+ * place. `highlight` marks the card when a sidebar link opened it.
+ */
+export function ConversationReviewItems(props: {
+  conversationId: string;
+  highlight: boolean;
+}) {
+  const { items, query } = useReviewItemsData({
+    conversationId: props.conversationId,
+  });
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const shown = items.length > 0;
+  useEffect(() => {
+    if (props.highlight && shown) {
+      sectionRef.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [props.highlight, shown]);
+  if (!shown) return null;
+  return (
+    <div
+      className={cn(
+        "rounded-lg",
+        props.highlight && "ring-2 ring-violet-300/50",
+      )}
+      ref={sectionRef}
+    >
+      {/* A count of loaded pages only would understate, so hide it. */}
+      <DetailsCard
+        count={query.hasNextPage ? undefined : items.length}
+        label="Needs you"
+        title="Needs you"
+      >
+        <DetailsList
+          itemKey={(item) => item.id}
+          items={items}
+          renderItem={(item) => (
+            <ReviewItemRow defaultExpanded={props.highlight} item={item} />
+          )}
+        />
+        <LoadMorePagination
+          className="mt-2"
+          hasMore={Boolean(query.hasNextPage)}
+          loading={query.isFetchingNextPage}
+          onLoadMore={() => void query.fetchNextPage()}
+        />
+      </DetailsCard>
+    </div>
+  );
+}
+
+function ReviewItemRow(props: {
+  defaultExpanded: boolean;
+  item: ReviewItemPayload;
+}) {
+  const [expanded, setExpanded] = useState(props.defaultExpanded);
+  // Details can already be open when a sidebar review chip highlights it.
+  useEffect(() => {
+    if (props.defaultExpanded) setExpanded(true);
+  }, [props.defaultExpanded]);
+  return (
+    <>
+      <DetailsRow
+        expanded={expanded}
+        icon={<Inbox aria-hidden="true" className="size-3.5" />}
+        meta={
+          <span className="grid size-5 place-items-center">
+            <ChevronRight
+              aria-hidden="true"
+              className={dashboardDisclosureChevronClass}
+            />
+          </span>
+        }
+        onToggle={() => setExpanded((value) => !value)}
+        title={props.item.title}
+      />
+      {expanded ? (
+        <div className="px-1.5 pb-1">
+          <ReviewItemCard item={props.item} />
+        </div>
+      ) : null}
+    </>
+  );
+}

package/src/tailwind.css

@@ -294,6 +294,10 @@
 /* Style one-off values that the token and palette mirror cannot cover. */
 @custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
 
+/* Desktop windows tall enough to afford the top bar. Shorter windows, such as
+   most laptops, keep the nav rail so conversations get the height. */
+@custom-variant tall (@media (min-height: 62.5rem));
+
 @layer base {
   :root {
     color-scheme: var(--dashboard-color-scheme, dark);

package/src/client/conversations/ConversationHeaderMeta.tsx

@@ -1,20 +0,0 @@
-import type { ReactNode } from "react";
-
-/** Render the compact owner and runtime line below a conversation title. */
-export function ConversationHeaderMeta(props: {
-  identity: ReactNode;
-  stats: ReactNode;
-}) {
-  if (!props.identity && !props.stats) return null;
-  return (
-    <div className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1">
-      {props.identity ? (
-        <span className="min-w-0 max-w-full truncate">{props.identity}</span>
-      ) : null}
-      {props.identity && props.stats ? (
-        <span className="text-dashboard-text-muted">·</span>
-      ) : null}
-      {props.stats ? <span className="min-w-0">{props.stats}</span> : null}
-    </div>
-  );
-}

package/src/client/review-desk/ConversationReviewBar.tsx

@@ -1,85 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import { useSearchParams } from "react-router";
-
-import { Drawer } from "../components/Drawer";
-import { LoadMorePagination } from "../components/Pagination";
-import { ReviewItemCard } from "./ReviewItemCard";
-import { useReviewItemsData } from "./queries";
-import {
-  CONVERSATION_REVIEW_OPEN,
-  CONVERSATION_REVIEW_PARAM,
-} from "../conversations/conversationRoutes";
-
-/** `more` marks a count of the loaded pages only, such as "50+". */
-function itemCountLabel(count: number, more: boolean): string {
-  if (more) return `${count}+ open review items`;
-  return count === 1 ? "1 open review item" : `${count} open review items`;
-}
-
-/**
- * Show how many open Review items are linked to a Conversation, above its
- * message box. The bar opens a side panel where the viewer can act on each.
- * The URL owns the panel, so a sidebar link can open it.
- */
-export function ConversationReviewBar(props: { conversationId: string }) {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const open =
-    searchParams.get(CONVERSATION_REVIEW_PARAM) === CONVERSATION_REVIEW_OPEN;
-  const setOpen = (value: boolean) =>
-    setSearchParams(
-      (current) => {
-        const next = new URLSearchParams(current);
-        if (value)
-          next.set(CONVERSATION_REVIEW_PARAM, CONVERSATION_REVIEW_OPEN);
-        else next.delete(CONVERSATION_REVIEW_PARAM);
-        return next;
-      },
-      { replace: true },
-    );
-  const { items, query } = useReviewItemsData({
-    conversationId: props.conversationId,
-  });
-  if (items.length === 0) return null;
-  const more = Boolean(query.hasNextPage);
-  const label = itemCountLabel(items.length, more);
-  return (
-    <>
-      <button
-        className="mb-2 flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border border-violet-300/25 bg-violet-300/[0.06] px-3 py-2 text-left font-sans text-sm text-dashboard-text transition-colors hover:bg-violet-300/[0.1]"
-        onClick={() => setOpen(true)}
-        type="button"
-      >
-        <span className="flex items-center gap-2">
-          <span
-            aria-hidden="true"
-            className="size-2 shrink-0 rounded-full bg-violet-300"
-          />
-          {label}
-        </span>
-        <ChevronRight aria-hidden="true" size={16} />
-      </button>
-      {open ? (
-        <Drawer
-          closeLabel="Close review items"
-          header={
-            <h2 className="m-0 font-sans text-base font-semibold">{label}</h2>
-          }
-          label="Review items"
-          onClose={() => setOpen(false)}
-          openKey={props.conversationId}
-        >
-          <div className="grid gap-3">
-            {items.map((item) => (
-              <ReviewItemCard item={item} key={item.id} />
-            ))}
-            <LoadMorePagination
-              hasMore={more}
-              loading={query.isFetchingNextPage}
-              onLoadMore={() => void query.fetchNextPage()}
-            />
-          </div>
-        </Drawer>
-      ) : null}
-    </>
-  );
-}