diff --git a/src/admin/insights/AdminAppInsights.tsx b/src/admin/insights/AdminAppInsights.tsx index c1db6dc9..4f5ab18f 100644 --- a/src/admin/insights/AdminAppInsights.tsx +++ b/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} /> ); } diff --git a/src/admin/insights/AdminAppInsightsClient.tsx b/src/admin/insights/AdminAppInsightsClient.tsx index aae006bc..b318c1ba 100644 --- a/src/admin/insights/AdminAppInsightsClient.tsx +++ b/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> insights: AdminAppInsights photoStats: PhotoStats - debug?: boolean }) { + const { shouldDebugInsights: debug } = useAppState(); + const { noFork, forkBehind, diff --git a/src/components/cmdk/CommandKClient.tsx b/src/components/cmdk/CommandKClient.tsx index 31582152..a8c01399 100644 --- a/src/components/cmdk/CommandKClient.tsx +++ b/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>, + isEnabled?: boolean, +): CommandKItem => ({ + label: `Toggle ${label}`, + action: () => onToggle?.(prev => !prev), + annotation: isEnabled ? : 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: , - items: [{ - label: 'Toggle Zoom Controls', - action: () => setAreZoomControlsShown?.(prev => !prev), - annotation: areZoomControlsShown ? : undefined, - }, { - label: 'Toggle Photo Matting', - action: () => setArePhotosMatted?.(prev => !prev), - annotation: arePhotosMatted ? : undefined, - }, { - label: 'Toggle High Density Grid', - action: () => setIsGridHighDensity?.(prev => !prev), - annotation: isGridHighDensity ? : undefined, - }, { - label: 'Toggle Image Fallbacks', - action: () => setShouldDebugImageFallbacks?.(prev => !prev), - annotation: shouldDebugImageFallbacks - ? - : undefined, - }, { - label: 'Toggle Baseline Grid', - action: () => setShouldShowBaselineGrid?.(prev => !prev), - annotation: shouldShowBaselineGrid ? : 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, + ), + ], }); } diff --git a/src/state/AppState.ts b/src/state/AppState.ts index de340305..d1214339 100644 --- a/src/state/AppState.ts +++ b/src/state/AppState.ts @@ -44,6 +44,8 @@ export interface AppStateContext { setShouldDebugImageFallbacks?: Dispatch> shouldShowBaselineGrid?: boolean setShouldShowBaselineGrid?: Dispatch> + shouldDebugInsights?: boolean + setShouldDebugInsights?: Dispatch> } export const AppStateContext = createContext({}); diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx index 626666cb..e9191bc3 100644 --- a/src/state/AppStateProvider.tsx +++ b/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}