Add insights debugging to cmdk

src/admin/insights/AdminAppInsights.tsx

@@ -10,7 +10,6 @@ import {
   APP_CONFIGURATION,
   GRID_HOMEPAGE_ENABLED,
   HAS_STATIC_OPTIMIZATION,
-  IS_PRODUCTION,
   MATTE_PHOTOS,
 } from '@/app/config';
 import { OUTDATED_THRESHOLD } from '@/photo';
@@ -78,7 +77,6 @@ export default async function AdminAppInsights() {
         focalLengthsCount: focalLengths.length,
         dateRange,
       }}
-      debug={!IS_PRODUCTION}
     />
   );
 }

src/admin/insights/AdminAppInsightsClient.tsx

@@ -38,6 +38,7 @@ import AdminLink from '../AdminLink';
 import AdminEmptyState from '../AdminEmptyState';
 import { pluralize } from '@/utility/string';
 import Tooltip from '@/components/Tooltip';
+import { useAppState } from '@/state/AppState';
 
 const DEBUG_COMMIT_SHA = '4cd29ed';
 const DEBUG_COMMIT_MESSAGE = 'Long commit message for debugging purposes';
@@ -90,13 +91,13 @@ export default function AdminAppInsightsClient({
     focalLengthsCount,
     dateRange,
   },
-  debug,
 }: {
   codeMeta?: Awaited<ReturnType<typeof getGitHubMetaForCurrentApp>>
   insights: AdminAppInsights
   photoStats: PhotoStats
-  debug?: boolean
 }) {
+  const { shouldDebugInsights: debug } = useAppState();
+
   const {
     noFork,
     forkBehind,

src/components/cmdk/CommandKClient.tsx

@@ -3,6 +3,8 @@
 import { Command } from 'cmdk';
 import {
   ReactNode,
+  SetStateAction,
+  Dispatch,
   useEffect,
   useMemo,
   useRef,
@@ -72,6 +74,16 @@ export type CommandKSection = {
   items: CommandKItem[]
 }
 
+const renderToggle = (
+  label: string,
+  onToggle?: Dispatch<SetStateAction<boolean>>,
+  isEnabled?: boolean,
+): CommandKItem => ({
+  label: `Toggle ${label}`,
+  action: () => onToggle?.(prev => !prev),
+  annotation: isEnabled ? <FaCheck size={12} /> : undefined,
+});
+
 export default function CommandKClient({
   tags,
   serverSections = [],
@@ -92,12 +104,13 @@ export default function CommandKClient({
     hiddenPhotosCount,
     selectedPhotoIds,
     setSelectedPhotoIds,
+    insightIndicatorStatus,
     isGridHighDensity,
     areZoomControlsShown,
     arePhotosMatted,
     shouldShowBaselineGrid,
     shouldDebugImageFallbacks,
-    insightIndicatorStatus,
+    shouldDebugInsights,
     setIsCommandKOpen: setIsOpen,
     setShouldRespondToKeyboardCommands,
     setShouldShowBaselineGrid,
@@ -105,6 +118,7 @@ export default function CommandKClient({
     setAreZoomControlsShown,
     setArePhotosMatted,
     setShouldDebugImageFallbacks,
+    setShouldDebugInsights,
   } = useAppState();
 
   const isOpenRef = useRef(isOpen);
@@ -253,29 +267,38 @@ export default function CommandKClient({
     clientSections.push({
       heading: 'Debug Tools',
       accessory: <RiToolsFill size={16} className="translate-x-[-1px]" />,
-      items: [{
-        label: 'Toggle Zoom Controls',
-        action: () => setAreZoomControlsShown?.(prev => !prev),
-        annotation: areZoomControlsShown ? <FaCheck size={12} /> : undefined,
-      }, {
-        label: 'Toggle Photo Matting',
-        action: () => setArePhotosMatted?.(prev => !prev),
-        annotation: arePhotosMatted ? <FaCheck size={12} /> : undefined,
-      }, {
-        label: 'Toggle High Density Grid',
-        action: () => setIsGridHighDensity?.(prev => !prev),
-        annotation: isGridHighDensity ? <FaCheck size={12} /> : undefined,
-      }, {
-        label: 'Toggle Image Fallbacks',
-        action: () => setShouldDebugImageFallbacks?.(prev => !prev),
-        annotation: shouldDebugImageFallbacks
-          ? <FaCheck size={12} />
-          : undefined,
-      }, {
-        label: 'Toggle Baseline Grid',
-        action: () => setShouldShowBaselineGrid?.(prev => !prev),
-        annotation: shouldShowBaselineGrid ? <FaCheck size={12} /> : undefined,
-      }],
+      items: [
+        renderToggle(
+          'Zoom Controls',
+          setAreZoomControlsShown,
+          areZoomControlsShown,
+        ),
+        renderToggle(
+          'Photo Matting',
+          setArePhotosMatted,
+          arePhotosMatted,
+        ),
+        renderToggle(
+          'High Density Grid',
+          setIsGridHighDensity,
+          isGridHighDensity,
+        ),
+        renderToggle(
+          'Image Fallbacks',
+          setShouldDebugImageFallbacks,
+          shouldDebugImageFallbacks,
+        ),
+        renderToggle(
+          'Baseline Grid',
+          setShouldShowBaselineGrid,
+          shouldShowBaselineGrid,
+        ),
+        renderToggle(
+          'Insights Debugging',
+          setShouldDebugInsights,
+          shouldDebugInsights,
+        ),
+      ],
     });
   }
 

src/state/AppState.ts

@@ -44,6 +44,8 @@ export interface AppStateContext {
   setShouldDebugImageFallbacks?: Dispatch<SetStateAction<boolean>>
   shouldShowBaselineGrid?: boolean
   setShouldShowBaselineGrid?: Dispatch<SetStateAction<boolean>>
+  shouldDebugInsights?: boolean
+  setShouldDebugInsights?: Dispatch<SetStateAction<boolean>>
 }
 
 export const AppStateContext = createContext<AppStateContext>({});

src/state/AppStateProvider.tsx

@@ -8,6 +8,7 @@ import { getAuthAction } from '@/auth/actions';
 import useSWR from 'swr';
 import {
   HIGH_DENSITY_GRID,
+  IS_PRODUCTION,
   MATTE_PHOTOS,
   SHOW_ZOOM_CONTROLS,
 } from '@/app/config';
@@ -62,6 +63,8 @@ export default function AppStateProvider({
     useState(false);
   const [shouldShowBaselineGrid, setShouldShowBaselineGrid] =
     useState(false);
+  const [shouldDebugInsights, setShouldDebugInsights] =
+    useState(!IS_PRODUCTION);
 
   const invalidateSwr = useCallback(() => setSwrTimestamp(Date.now()), []);
 
@@ -138,6 +141,8 @@ export default function AppStateProvider({
         setShouldDebugImageFallbacks,
         shouldShowBaselineGrid,
         setShouldShowBaselineGrid,
+        shouldDebugInsights,
+        setShouldDebugInsights,
       }}
     >
       {children}