From 7857b4e46480f1fe5a8725c16acf81198b95f709 Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Wed, 13 May 2026 12:28:38 -0500
Subject: [PATCH 1/2] add ExploreV2 debug sheet

---
 .../Explore/ExploreV2/ExploreV2DebugSheet.tsx | 262 ++++++++++++++++++
 .../ExploreV2/screens/ExploreResults.tsx      |   3 +
 2 files changed, 265 insertions(+)
 create mode 100644 src/components/Explore/ExploreV2/ExploreV2DebugSheet.tsx

diff --git a/src/components/Explore/ExploreV2/ExploreV2DebugSheet.tsx b/src/components/Explore/ExploreV2/ExploreV2DebugSheet.tsx
new file mode 100644
index 000000000..633577442
--- /dev/null
+++ b/src/components/Explore/ExploreV2/ExploreV2DebugSheet.tsx
@@ -0,0 +1,262 @@
+/* eslint-disable i18next/no-literal-string */
+import classnames from "classnames";
+import buildExploreV2QueryParams
+  from "components/Explore/ExploreV2/buildQueryParams";
+import { INatIconButton } from "components/SharedComponents";
+import Modal from "components/SharedComponents/Modal";
+import Body3 from "components/SharedComponents/Typography/Body3";
+import Heading4 from "components/SharedComponents/Typography/Heading4";
+import {
+  Pressable, ScrollView, Text, View,
+} from "components/styledComponents";
+import {
+  defaultExploreV2Location,
+  EXPLORE_V2_ACTION,
+  EXPLORE_V2_PLACE_MODE,
+  EXPLORE_V2_SORT,
+  useExploreV2,
+} from "providers/ExploreV2Context";
+import React, { useState } from "react";
+import { getShadow } from "styles/global";
+
+const TAXA = [
+  { id: 47126, name: "Plantae" },
+  { id: 3, name: "Aves" },
+  { id: 47158, name: "Insecta" },
+];
+
+const USERS = [
+  { id: 6746956, login: "seth_msp" },
+];
+
+const PROJECTS = [
+  { id: 42778, title: "Appropriate signs project" },
+];
+
+const PLACES = [
+  { id: 1, display_name: "United States" },
+  { id: 6712, display_name: "Canada" },
+];
+
+const SCROLL_CONTENT = { paddingBottom: 32 };
+
+const DROP_SHADOW = getShadow( {
+  offsetHeight: 4,
+  elevation: 6,
+} );
+
+const SORT_LABELS: Record<EXPLORE_V2_SORT, string> = {
+  [EXPLORE_V2_SORT.DATE_UPLOADED_NEWEST]: "Uploaded ↓",
+  [EXPLORE_V2_SORT.DATE_UPLOADED_OLDEST]: "Uploaded ↑",
+  [EXPLORE_V2_SORT.DATE_OBSERVED_NEWEST]: "Observed ↓",
+  [EXPLORE_V2_SORT.DATE_OBSERVED_OLDEST]: "Observed ↑",
+  [EXPLORE_V2_SORT.MOST_FAVED]: "Most faved",
+};
+
+interface DebugButtonProps {
+  label: string;
+  onPress: () => void;
+  active?: boolean;
+}
+
+const DebugButton = ( { label, onPress, active }: DebugButtonProps ) => (
+  <Pressable
+    accessibilityRole="button"
+    onPress={onPress}
+    className={`px-3 py-2 mr-2 mb-2 rounded ${
+      active
+        ? "bg-inatGreen"
+        : "bg-darkGray"
+    }`}
+  >
+    <Text className="text-white text-xs">{label}</Text>
+  </Pressable>
+);
+
+interface SectionProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const Section = ( { title, children }: SectionProps ) => (
+  <View className="mb-3">
+    <Heading4 className="mb-2">{title}</Heading4>
+    <View className="flex-row flex-wrap">{children}</View>
+  </View>
+);
+
+const ExploreV2DebugSheet = ( ) => {
+  const { state, dispatch } = useExploreV2();
+  const [visible, setVisible] = useState( false );
+
+  const queryParams = buildExploreV2QueryParams( state );
+
+  const subjectType = state.subject?.type;
+  let subjectId: number | null = null;
+  if ( state.subject?.type === "taxon" ) subjectId = state.subject.taxon.id;
+  else if ( state.subject?.type === "user" ) subjectId = state.subject.user.id;
+  else if ( state.subject?.type === "project" ) subjectId = state.subject.project.id;
+
+  const { placeMode } = state.location;
+  const placeId = placeMode === EXPLORE_V2_PLACE_MODE.PLACE
+    ? state.location.place.id
+    : null;
+
+  const handleNearby = async () => {
+    const next = await defaultExploreV2Location();
+    if ( next.placeMode === EXPLORE_V2_PLACE_MODE.NEARBY ) {
+      dispatch( {
+        type: EXPLORE_V2_ACTION.SET_LOCATION_NEARBY,
+        lat: next.lat,
+        lng: next.lng,
+        radius: next.radius,
+      } );
+    } else {
+      dispatch( { type: EXPLORE_V2_ACTION.SET_LOCATION_WORLDWIDE } );
+    }
+  };
+
+  const onClose = () => setVisible( false );
+
+  return (
+    <>
+      <INatIconButton
+        icon="triangle-exclamation"
+        className={classnames(
+          "absolute bottom-5 right-5",
+          "rounded-full",
+        )}
+        color="white"
+        size={27}
+        style={[
+          DROP_SHADOW,
+          // eslint-disable-next-line react-native/no-inline-styles
+          { backgroundColor: "deeppink" },
+        ]}
+        accessibilityLabel="Diagnostics"
+        onPress={() => setVisible( true )}
+      />
+      <Modal
+        showModal={visible}
+        closeModal={onClose}
+        disableSwipeDirection
+        modal={(
+          <View className="bg-white rounded-t-2xl h-[85%]">
+            <View
+              className={classnames(
+                "px-4 pt-4 pb-2 flex-row items-center justify-between",
+                "border-b border-lightGray",
+              )}
+            >
+              <Heading4>ExploreV2 Debug</Heading4>
+              <Pressable accessibilityRole="button" onPress={onClose}>
+                <Text className="text-base text-inatGreen">Close</Text>
+              </Pressable>
+            </View>
+            <ScrollView
+              className="flex-1 px-4 py-3"
+              contentContainerStyle={SCROLL_CONTENT}
+            >
+              <Section title="Subject">
+                {TAXA.map( taxon => (
+                  <DebugButton
+                    key={`taxon-${taxon.id}`}
+                    label={`Taxon: ${taxon.name}`}
+                    active={subjectType === "taxon" && subjectId === taxon.id}
+                    onPress={() => dispatch( {
+                      type: EXPLORE_V2_ACTION.SET_SUBJECT,
+                      subject: { type: "taxon", taxon },
+                    } )}
+                  />
+                ) )}
+                {USERS.map( user => (
+                  <DebugButton
+                    key={`user-${user.id}`}
+                    label={`User: ${user.login}`}
+                    active={subjectType === "user" && subjectId === user.id}
+                    onPress={() => dispatch( {
+                      type: EXPLORE_V2_ACTION.SET_SUBJECT,
+                      subject: { type: "user", user },
+                    } )}
+                  />
+                ) )}
+                {PROJECTS.map( project => (
+                  <DebugButton
+                    key={`project-${project.id}`}
+                    label={`Project: ${project.title}`}
+                    active={subjectType === "project" && subjectId === project.id}
+                    onPress={() => dispatch( {
+                      type: EXPLORE_V2_ACTION.SET_SUBJECT,
+                      subject: { type: "project", project },
+                    } )}
+                  />
+                ) )}
+                <DebugButton
+                  label="Clear subject"
+                  active={!subjectType}
+                  onPress={() => dispatch( { type: EXPLORE_V2_ACTION.CLEAR_SUBJECT } )}
+                />
+              </Section>
+
+              <Section title="Location">
+                <DebugButton
+                  label="Worldwide"
+                  active={placeMode === EXPLORE_V2_PLACE_MODE.WORLDWIDE}
+                  onPress={() => dispatch( { type: EXPLORE_V2_ACTION.SET_LOCATION_WORLDWIDE } )}
+                />
+                <DebugButton
+                  label="Nearby (re-fetch)"
+                  active={placeMode === EXPLORE_V2_PLACE_MODE.NEARBY}
+                  onPress={handleNearby}
+                />
+                {PLACES.map( place => (
+                  <DebugButton
+                    key={`place-${place.id}`}
+                    label={`Place: ${place.display_name}`}
+                    active={placeMode === EXPLORE_V2_PLACE_MODE.PLACE && placeId === place.id}
+                    onPress={() => dispatch( {
+                      type: EXPLORE_V2_ACTION.SET_LOCATION_PLACE,
+                      place,
+                    } )}
+                  />
+                ) )}
+              </Section>
+
+              <Section title="Sort">
+                {Object.values( EXPLORE_V2_SORT ).map( sort => (
+                  <DebugButton
+                    key={sort}
+                    label={SORT_LABELS[sort]}
+                    active={state.sortBy === sort}
+                    onPress={() => dispatch( {
+                      type: EXPLORE_V2_ACTION.SET_SORT,
+                      sortBy: sort,
+                    } )}
+                  />
+                ) )}
+              </Section>
+
+              <Section title="Reset">
+                <DebugButton
+                  label="RESET (back to UNINITIALIZED)"
+                  onPress={() => dispatch( { type: EXPLORE_V2_ACTION.RESET } )}
+                />
+              </Section>
+
+              <Heading4 className="mb-1">State</Heading4>
+              <Body3 className="font-mono mb-3">
+                {JSON.stringify( state, null, 2 )}
+              </Body3>
+              <Heading4 className="mb-1">Query params</Heading4>
+              <Body3 className="font-mono">
+                {JSON.stringify( queryParams, null, 2 )}
+              </Body3>
+            </ScrollView>
+          </View>
+        )}
+      />
+    </>
+  );
+};
+
+export default ExploreV2DebugSheet;
diff --git a/src/components/Explore/ExploreV2/screens/ExploreResults.tsx b/src/components/Explore/ExploreV2/screens/ExploreResults.tsx
index 199a1644b..413d9aebe 100644
--- a/src/components/Explore/ExploreV2/screens/ExploreResults.tsx
+++ b/src/components/Explore/ExploreV2/screens/ExploreResults.tsx
@@ -1,6 +1,8 @@
 import { useNetInfo } from "@react-native-community/netinfo";
 import buildExploreV2QueryParams
   from "components/Explore/ExploreV2/buildQueryParams";
+import ExploreV2DebugSheet
+  from "components/Explore/ExploreV2/ExploreV2DebugSheet";
 import useInfiniteExploreScroll
   from "components/Explore/hooks/useInfiniteExploreScroll";
 import ObservationsFlashList from "components/ObservationsFlashList/ObservationsFlashList";
@@ -47,6 +49,7 @@ const ExploreResults = ( ) => {
           showNoResults={!canFetch || totalResults === 0}
           testID="ExploreV2ObservationsList"
         />
+        <ExploreV2DebugSheet />
       </View>
     </ViewWrapper>
   );

From f5233a7f3e8713f5e87a3f99b05d40832ba5d6df Mon Sep 17 00:00:00 2001
From: sepeterson <10458078+sepeterson@users.noreply.github.com>
Date: Fri, 15 May 2026 16:43:22 -0500
Subject: [PATCH 2/2] debug sheet behind isDebug

---
 src/components/Explore/ExploreV2/ExploreV2DebugSheet.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Explore/ExploreV2/ExploreV2DebugSheet.tsx b/src/components/Explore/ExploreV2/ExploreV2DebugSheet.tsx
index 633577442..b3d5f315a 100644
--- a/src/components/Explore/ExploreV2/ExploreV2DebugSheet.tsx
+++ b/src/components/Explore/ExploreV2/ExploreV2DebugSheet.tsx
@@ -17,6 +17,7 @@ import {
   useExploreV2,
 } from "providers/ExploreV2Context";
 import React, { useState } from "react";
+import useDebugMode from "sharedHooks/useDebugMode";
 import { getShadow } from "styles/global";
 
 const TAXA = [
@@ -86,9 +87,12 @@ const Section = ( { title, children }: SectionProps ) => (
 );
 
 const ExploreV2DebugSheet = ( ) => {
+  const { isDebug } = useDebugMode( );
   const { state, dispatch } = useExploreV2();
   const [visible, setVisible] = useState( false );
 
+  if ( !isDebug ) return null;
+
   const queryParams = buildExploreV2QueryParams( state );
 
   const subjectType = state.subject?.type;