Add debugging tools for grid density

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 ? <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),

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',

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',
         )}>
         <span className={clsx(
           'inline-flex uppercase',
-          HIGH_DENSITY_GRID
+          isGridHighDensity
             ? 'col-span-2 sm:col-span-1 lg:col-span-2'
             : 'col-span-2 md:col-span-1',
         )}>
@@ -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')
+              }
             </PhotoLink>)}
         </span>
         <span className={clsx(
@@ -101,10 +108,10 @@ export default function PhotoHeader({
           'gap-2 self-start',
           'uppercase text-dim',
           isPhotoSet
-            ? HIGH_DENSITY_GRID
+            ? isGridHighDensity
               ? 'col-span-2 sm:col-span-1 md:col-span-2 lg:col-span-3'
               : 'col-span-2 sm:col-span-1 lg:col-span-2'
-            : HIGH_DENSITY_GRID
+            : isGridHighDensity
               ? 'sm:col-span-2 lg:col-span-3'
               : 'lg:col-span-2',
         )}>

src/state/AppState.ts

@@ -27,6 +27,8 @@ export interface AppStateContext {
   isPerformingSelectEdit?: boolean
   setIsPerformingSelectEdit?: Dispatch<SetStateAction<boolean>>
   // DEBUG
+  isGridHighDensity?: boolean
+  setIsGridHighDensity?: Dispatch<SetStateAction<boolean>>
   arePhotosMatted?: boolean
   setArePhotosMatted?: Dispatch<SetStateAction<boolean>>
   shouldDebugImageFallbacks?: boolean

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,