From 2d9048efd08d155e6fe0796c54fc99c8c59d7c1e Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Wed, 4 Sep 2024 11:05:24 -0500 Subject: [PATCH] Add debugging tools for grid density --- src/components/cmdk/CommandKClient.tsx | 6 ++++++ src/photo/PhotoGrid.tsx | 5 +++-- src/photo/PhotoHeader.tsx | 19 +++++++++++++------ src/state/AppState.ts | 2 ++ src/state/AppStateProvider.tsx | 6 +++++- 5 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/components/cmdk/CommandKClient.tsx b/src/components/cmdk/CommandKClient.tsx index cb9d9ef2..4e1e21c2 100644 --- a/src/components/cmdk/CommandKClient.tsx +++ b/src/components/cmdk/CommandKClient.tsx @@ -86,12 +86,14 @@ export default function CommandKClient({ hiddenPhotosCount, selectedPhotoIds, setSelectedPhotoIds, + isGridHighDensity, arePhotosMatted, shouldShowBaselineGrid, shouldDebugImageFallbacks, setIsCommandKOpen: setIsOpen, setShouldRespondToKeyboardCommands, setShouldShowBaselineGrid, + setIsGridHighDensity, setArePhotosMatted, setShouldDebugImageFallbacks, } = useAppState(); @@ -240,6 +242,10 @@ export default function CommandKClient({ 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), diff --git a/src/photo/PhotoGrid.tsx b/src/photo/PhotoGrid.tsx index d5678a49..8bc03f9d 100644 --- a/src/photo/PhotoGrid.tsx +++ b/src/photo/PhotoGrid.tsx @@ -4,7 +4,7 @@ import { Photo, PhotoSetAttributes } from '.'; import PhotoMedium from './PhotoMedium'; import { clsx } from 'clsx/lite'; import AnimateItems from '@/components/AnimateItems'; -import { GRID_ASPECT_RATIO, HIGH_DENSITY_GRID } from '@/site/config'; +import { GRID_ASPECT_RATIO } from '@/site/config'; import { useAppState } from '@/state/AppState'; import SelectTileOverlay from '@/components/SelectTileOverlay'; @@ -45,6 +45,7 @@ export default function PhotoGrid({ isUserSignedIn, selectedPhotoIds, setSelectedPhotoIds, + isGridHighDensity, } = useAppState(); return ( @@ -53,7 +54,7 @@ export default function PhotoGrid({ 'grid gap-0.5 sm:gap-1', small ? 'grid-cols-3 xs:grid-cols-6' - : HIGH_DENSITY_GRID + : isGridHighDensity ? 'grid-cols-2 xs:grid-cols-4 lg:grid-cols-6' : 'grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4', 'items-center', diff --git a/src/photo/PhotoHeader.tsx b/src/photo/PhotoHeader.tsx index 88bdb5d0..863ce75c 100644 --- a/src/photo/PhotoHeader.tsx +++ b/src/photo/PhotoHeader.tsx @@ -1,3 +1,5 @@ +'use client'; + import { clsx } from 'clsx/lite'; import { Photo, @@ -8,12 +10,12 @@ import { import ShareButton from '@/components/ShareButton'; import AnimateItems from '@/components/AnimateItems'; import { ReactNode } from 'react'; -import { HIGH_DENSITY_GRID } from '@/site/config'; import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid'; import PhotoPrevNext from './PhotoPrevNext'; import PhotoLink from './PhotoLink'; import { formatDate } from '@/utility/date'; import ResponsiveText from '@/components/primitives/ResponsiveText'; +import { useAppState } from '@/state/AppState'; export default function PhotoHeader({ tag, @@ -40,6 +42,8 @@ export default function PhotoHeader({ count?: number dateRange?: PhotoDateRange } & PhotoSetAttributes) { + const { isGridHighDensity } = useAppState(); + const { start, end } = dateRangeForPhotos(photos, dateRange); const selectedPhotoIndex = selectedPhoto @@ -78,13 +82,13 @@ export default function PhotoHeader({ key="PhotosHeader" className={clsx( 'grid gap-0.5 sm:gap-1 items-start grid-cols-4', - HIGH_DENSITY_GRID + isGridHighDensity ? 'lg:grid-cols-6' : 'md:grid-cols-3 lg:grid-cols-4', )}> @@ -93,7 +97,10 @@ export default function PhotoHeader({ photo={selectedPhoto} className="uppercase font-bold" > - {selectedPhoto.title || formatDate(selectedPhoto.takenAt, 'tiny')} + { + selectedPhoto.title || + formatDate(selectedPhoto.takenAt, 'tiny') + } )} diff --git a/src/state/AppState.ts b/src/state/AppState.ts index 49814201..0d309611 100644 --- a/src/state/AppState.ts +++ b/src/state/AppState.ts @@ -27,6 +27,8 @@ export interface AppStateContext { isPerformingSelectEdit?: boolean setIsPerformingSelectEdit?: Dispatch> // DEBUG + isGridHighDensity?: boolean + setIsGridHighDensity?: Dispatch> arePhotosMatted?: boolean setArePhotosMatted?: Dispatch> shouldDebugImageFallbacks?: boolean diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx index af176de1..89d89059 100644 --- a/src/state/AppStateProvider.tsx +++ b/src/state/AppStateProvider.tsx @@ -6,7 +6,7 @@ import { AnimationConfig } from '@/components/AnimateItems'; import usePathnames from '@/utility/usePathnames'; import { getAuthAction } from '@/auth/actions'; import useSWR from 'swr'; -import { MATTE_PHOTOS } from '@/site/config'; +import { HIGH_DENSITY_GRID, MATTE_PHOTOS } from '@/site/config'; import { getPhotosHiddenMetaCachedAction } from '@/photo/actions'; export default function AppStateProvider({ @@ -39,6 +39,8 @@ export default function AppStateProvider({ const [isPerformingSelectEdit, setIsPerformingSelectEdit] = useState(false); // DEBUG + const [isGridHighDensity, setIsGridHighDensity] = + useState(HIGH_DENSITY_GRID); const [arePhotosMatted, setArePhotosMatted] = useState(MATTE_PHOTOS); const [shouldDebugImageFallbacks, setShouldDebugImageFallbacks] = @@ -101,6 +103,8 @@ export default function AppStateProvider({ isPerformingSelectEdit, setIsPerformingSelectEdit, // DEBUG + isGridHighDensity, + setIsGridHighDensity, arePhotosMatted, setArePhotosMatted, shouldDebugImageFallbacks,