sig: add frontend support for filtering by suggested reviewer (#1543)

Builds on https://app.graphite.com/github/pr/PostHog/posthog/53644

Also a moved around these buttons a little:
<img width="763" height="240" alt="image" src="https://github.com/user-attachments/assets/54aa4b48-ab3d-4b60-ab87-a78d706585a7" />

Author: oliverb123

apps/code/src/renderer/api/posthogClient.ts

@@ -1,4 +1,6 @@
 import type {
+  AvailableSuggestedReviewer,
+  AvailableSuggestedReviewersResponse,
   SandboxEnvironment,
   SandboxEnvironmentInput,
   SignalReport,
@@ -161,6 +163,50 @@ function parseSignalReportArtefactsPayload(
   };
 }
 
+function normalizeAvailableSuggestedReviewer(
+  uuid: string,
+  value: unknown,
+): AvailableSuggestedReviewer | null {
+  if (!isObjectRecord(value)) {
+    return null;
+  }
+
+  const normalizedUuid = optionalString(uuid);
+  if (!normalizedUuid) {
+    return null;
+  }
+
+  return {
+    uuid: normalizedUuid,
+    name: optionalString(value.name) ?? "",
+    email: optionalString(value.email) ?? "",
+  };
+}
+
+function parseAvailableSuggestedReviewersPayload(
+  value: unknown,
+): AvailableSuggestedReviewersResponse {
+  if (!isObjectRecord(value)) {
+    return {
+      results: [],
+      count: 0,
+    };
+  }
+
+  const results = Object.entries(value)
+    .map(([uuid, reviewer]) =>
+      normalizeAvailableSuggestedReviewer(uuid, reviewer),
+    )
+    .filter(
+      (reviewer): reviewer is AvailableSuggestedReviewer => reviewer !== null,
+    );
+
+  return {
+    results,
+    count: results.length,
+  };
+}
+
 export class PostHogAPIClient {
   private api: ReturnType<typeof createApiClient>;
   private _teamId: number | null = null;
@@ -958,6 +1004,9 @@ export class PostHogAPIClient {
     if (params?.source_product) {
       url.searchParams.set("source_product", params.source_product);
     }
+    if (params?.suggested_reviewers) {
+      url.searchParams.set("suggested_reviewers", params.suggested_reviewers);
+    }
 
     const response = await this.api.fetcher.fetch({
       method: "get",
@@ -976,6 +1025,34 @@ export class PostHogAPIClient {
     };
   }
 
+  async getAvailableSuggestedReviewers(
+    query?: string,
+  ): Promise<AvailableSuggestedReviewersResponse> {
+    const teamId = await this.getTeamId();
+    const url = new URL(
+      `${this.api.baseUrl}/api/projects/${teamId}/signal_reports/available_reviewers/`,
+    );
+    const path = `/api/projects/${teamId}/signal_reports/available_reviewers/`;
+
+    if (query?.trim()) {
+      url.searchParams.set("query", query.trim());
+    }
+
+    const response = await this.api.fetcher.fetch({
+      method: "get",
+      url,
+      path,
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch available suggested reviewers: ${response.statusText}`,
+      );
+    }
+
+    return parseAvailableSuggestedReviewersPayload(await response.json());
+  }
+
   async getSignalReportSignals(
     reportId: string,
   ): Promise<SignalReportSignalsResponse> {

apps/code/src/renderer/features/inbox/components/InboxSignalsTab.tsx

@@ -6,7 +6,10 @@ import {
 } from "@features/inbox/components/InboxEmptyStates";
 import { InboxLiveRail } from "@features/inbox/components/InboxLiveRail";
 import { InboxSourcesDialog } from "@features/inbox/components/InboxSourcesDialog";
-import { useInboxReportsInfinite } from "@features/inbox/hooks/useInboxReports";
+import {
+  useInboxAvailableSuggestedReviewers,
+  useInboxReportsInfinite,
+} from "@features/inbox/hooks/useInboxReports";
 import { useSignalSourceConfigs } from "@features/inbox/hooks/useSignalSourceConfigs";
 import { useInboxReportSelectionStore } from "@features/inbox/stores/inboxReportSelectionStore";
 import { useInboxSignalsFilterStore } from "@features/inbox/stores/inboxSignalsFilterStore";
@@ -15,6 +18,7 @@ import { useInboxSourcesDialogStore } from "@features/inbox/stores/inboxSourcesD
 import {
   buildSignalReportListOrdering,
   buildStatusFilterParam,
+  buildSuggestedReviewerFilterParam,
   filterReportsBySearch,
 } from "@features/inbox/utils/filterReports";
 import { INBOX_REFETCH_INTERVAL_MS } from "@features/inbox/utils/inboxConstants";
@@ -38,6 +42,9 @@ export function InboxSignalsTab() {
   const sourceProductFilter = useInboxSignalsFilterStore(
     (s) => s.sourceProductFilter,
   );
+  const suggestedReviewerFilter = useInboxSignalsFilterStore(
+    (s) => s.suggestedReviewerFilter,
+  );
 
   // ── Signal source configs ───────────────────────────────────────────────
   const { data: signalSourceConfigs } = useSignalSourceConfigs();
@@ -64,6 +71,10 @@ export function InboxSignalsTab() {
   const inboxPollingActive = windowFocused && isInboxView;
 
   // ── Data fetching ───────────────────────────────────────────────────────
+  useInboxAvailableSuggestedReviewers({
+    enabled: isInboxView,
+  });
+
   const inboxQueryParams = useMemo(
     (): SignalReportsQueryParams => ({
       status: buildStatusFilterParam(statusFilter),
@@ -72,8 +83,18 @@ export function InboxSignalsTab() {
         sourceProductFilter.length > 0
           ? sourceProductFilter.join(",")
           : undefined,
+      suggested_reviewers:
+        suggestedReviewerFilter.length > 0
+          ? buildSuggestedReviewerFilterParam(suggestedReviewerFilter)
+          : undefined,
     }),
-    [statusFilter, sortField, sortDirection, sourceProductFilter],
+    [
+      statusFilter,
+      sortField,
+      sortDirection,
+      sourceProductFilter,
+      suggestedReviewerFilter,
+    ],
   );
 
   const {
@@ -194,7 +215,9 @@ export function InboxSignalsTab() {
   // ── Layout mode (computed early — needed by focus effect below) ────────
   const hasReports = allReports.length > 0;
   const hasActiveFilters =
-    sourceProductFilter.length > 0 || statusFilter.length < 5;
+    sourceProductFilter.length > 0 ||
+    suggestedReviewerFilter.length > 0 ||
+    statusFilter.length < 5;
   const shouldShowTwoPane =
     hasReports || !!searchQuery.trim() || hasActiveFilters;
 
@@ -324,21 +347,15 @@ export function InboxSignalsTab() {
                 className="outline-none"
                 onMouseDownCapture={(e) => {
                   const target = e.target as HTMLElement;
-                  if (
-                    target.closest(
-                      "[data-report-id], button, input, select, textarea, [role='checkbox']",
-                    )
-                  ) {
+                  if (target.closest("[data-report-id]")) {
                     focusListPane();
                   }
                 }}
                 onFocusCapture={(e) => {
                   const target = e.target as HTMLElement;
                   if (
                     target !== leftPaneRef.current &&
-                    target.closest(
-                      "[data-report-id], button, input, select, textarea, [role='checkbox']",
-                    )
+                    target.closest("[data-report-id]")
                   ) {
                     focusListPane();
                   }