@sentry/junior-dashboard 0.273.0 → 0.275.0

package/src/client/review-desk/queries.ts

@@ -153,13 +153,20 @@ export function useReviewItemAction() {
   });
 }
 
-const NO_CONVERSATIONS: ReadonlySet<string> = new Set();
+/** Newest open Review item title and item count for one waiting Conversation. */
+export type WaitingConversation = { count: number; title: string };
+
+const NO_WAITING: ReadonlyMap<string, WaitingConversation> = new Map();
 
 /**
- * Return the Conversations that wait on the viewer. Today only the review
- * desk sets this: a linked open action item assigned to the viewer.
+ * Return the Conversations that wait on the viewer, by Conversation id. Today
+ * only the review desk sets this: a linked open action item assigned to the
+ * viewer.
  */
-export function useWaitingConversationIds(): ReadonlySet<string> {
+export function useWaitingConversations(): ReadonlyMap<
+  string,
+  WaitingConversation
+> {
   const query = useQuery({
     queryKey: [...REVIEW_ITEMS_QUERY_KEY, "waiting-conversations"],
     queryFn: ({ signal }) =>
@@ -171,6 +178,23 @@ export function useWaitingConversationIds(): ReadonlySet<string> {
     refetchInterval: COUNT_REFRESH_MS,
     retry: false,
   });
-  const ids = query.data?.conversationIds;
-  return useMemo(() => (ids ? new Set(ids) : NO_CONVERSATIONS), [ids]);
+  const conversations = query.data?.conversations;
+  return useMemo(
+    () =>
+      conversations
+        ? new Map(
+            conversations.map(({ conversationId, count, title }) => [
+              conversationId,
+              { count, title },
+            ]),
+          )
+        : NO_WAITING,
+    [conversations],
+  );
+}
+
+/** Return the ids of the Conversations that wait on the viewer. */
+export function useWaitingConversationIds(): ReadonlySet<string> {
+  const waiting = useWaitingConversations();
+  return useMemo(() => new Set(waiting.keys()), [waiting]);
 }

package/src/mock-reporting/routes.ts

@@ -331,7 +331,7 @@ export function createMockReportingApi(): Hono<{
     jsonResponse(reviewItemCountSchema, { needsViewer: 0 }),
   );
   app.get("/review-items/waiting-conversations", () =>
-    jsonResponse(reviewItemWaitingConversationsSchema, { conversationIds: [] }),
+    jsonResponse(reviewItemWaitingConversationsSchema, { conversations: [] }),
   );
   app.get("/review-items/:id", () =>
     errorResponse("Review item not found.", 404),

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,67 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import { useState } from "react";
-
-import { Drawer } from "../components/Drawer";
-import { LoadMorePagination } from "../components/Pagination";
-import { ReviewItemCard } from "./ReviewItemCard";
-import { useReviewItemsData } from "./queries";
-
-/** `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.
- */
-export function ConversationReviewBar(props: { conversationId: string }) {
-  const [open, setOpen] = useState(false);
-  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}
-    </>
-  );
-}