Add basic matte views to large photos

src/components/CommandKClient.tsx

@@ -70,6 +70,8 @@ export default function CommandKClient({
     isUserSignedIn,
     setUserEmail,
     isCommandKOpen: isOpen,
+    matteSetting,
+    setMatteSetting,
     shouldShowBaselineGrid,
     shouldDebugBlur,
     setIsCommandKOpen: setIsOpen,
@@ -197,6 +199,16 @@ export default function CommandKClient({
       heading: 'Debug Tools',
       accessory: <RiToolsFill size={16} className="translate-x-[-1px]" />,
       items: [{
+        label: 'Toggle Matte Setting',
+        action: () => setMatteSetting?.(prev => {
+          if (!prev) {
+            return 'light';
+          } else if (prev === 'light') {
+            return 'dark';
+          }
+        }),
+        annotation: Boolean(matteSetting) ? <FaCheck size={12} /> : undefined,
+      }, {
         label: 'Toggle Blur Debug',
         action: () => setShouldDebugBlur?.(prev => !prev),
         annotation: shouldDebugBlur ? <FaCheck size={12} /> : undefined,

src/components/ImageBlurFallback.tsx

@@ -8,13 +8,15 @@ import Image, { ImageProps } from 'next/image';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export default function ImageBlurFallback(props: ImageProps & {
-  blurCompatibilityLevel?: 'none' | 'low' | 'high';
+  blurCompatibilityLevel?: 'none' | 'low' | 'high'
+  imgClassName?: string
 }) {
   const {
     className,
     priority,
     blurDataURL,
     blurCompatibilityLevel = 'low',
+    imgClassName = 'object-cover h-full',
     ...rest
   } = props;
 
@@ -29,8 +31,6 @@ export default function ImageBlurFallback(props: ImageProps & {
 
   const [hideBlurPlaceholder, setHideBlurPlaceholder] = useState(false);
 
-  const imageClassName = 'object-cover h-full';
-
   const imgRef = useRef<HTMLImageElement>(null);
 
   useEffect(() => {
@@ -84,7 +84,7 @@ export default function ImageBlurFallback(props: ImageProps & {
               ...rest,
               src: blurDataURL,
               className: clsx(
-                imageClassName,
+                imgClassName,
                 getBlurClass(),
               ),
             }} />
@@ -97,7 +97,7 @@ export default function ImageBlurFallback(props: ImageProps & {
         ...rest,
         ref: imgRef,
         priority,
-        className: imageClassName,
+        className: imgClassName,
         onLoad,
         onError,
       }} />

src/components/ImageLarge.tsx

@@ -3,6 +3,7 @@ import ImageBlurFallback from './ImageBlurFallback';
 
 export default function ImageLarge({
   className,
+  imgClassName,
   src,
   alt,
   aspectRatio,
@@ -11,6 +12,7 @@ export default function ImageLarge({
   priority,
 }: {
   className?: string
+  imgClassName?: string
   src: string
   alt: string
   aspectRatio: number
@@ -21,6 +23,7 @@ export default function ImageLarge({
   return (
     <ImageBlurFallback {...{
       className,
+      imgClassName,
       src,
       alt,
       blurDataURL: blurData,

src/photo/PhotoLarge.tsx

@@ -26,6 +26,7 @@ import { RevalidatePhoto } from './InfinitePhotoScroll';
 import { useRef } from 'react';
 import useOnVisible from '@/utility/useOnVisible';
 import PhotoDate from './PhotoDate';
+import { useAppState } from '@/state/AppState';
 
 export default function PhotoLarge({
   photo,
@@ -68,17 +69,31 @@ export default function PhotoLarge({
 
   useOnVisible(ref, onVisible);
 
+  const { matteSetting } = useAppState();
+
   return (
     <SiteGrid
       containerRef={ref}
       contentMain={
         <Link
           href={pathForPhoto(photo)}
-          className="active:brightness-75"
+          className={clsx(
+            'active:brightness-75',
+            Boolean(matteSetting) &&
+              'flex items-center justify-center aspect-[3/2]',
+            matteSetting === 'light' && 'bg-invert',
+            matteSetting === 'dark' && 'bg-dim',
+          )}
           prefetch={prefetch}
         >
           <ImageLarge
-            className="w-full"
+            className={clsx(Boolean(matteSetting) &&
+              'flex items-center justify-center h-full')}
+            imgClassName={clsx(
+              Boolean(matteSetting) && 'object-scale-down',
+              Boolean(matteSetting) &&
+                photo.aspectRatio >= 1 ? 'max-h-[80%]' : 'max-h-[90%]'
+            )}
             alt={altTextForPhoto(photo)}
             src={photo.url}
             aspectRatio={photo.aspectRatio}

src/site/globals.css

@@ -162,6 +162,10 @@
     @apply
       bg-gray-900 dark:bg-gray-100
   }
+  .bg-dim {
+    @apply
+      bg-gray-200/40 dark:bg-gray-800/40
+  }
   /* Utilities: Baseline Grid */
   .space-y-baseline {
     @apply

src/state/AppState.ts

@@ -1,9 +1,13 @@
 import { Dispatch, SetStateAction, createContext, useContext } from 'react';
 import { AnimationConfig } from '@/components/AnimateItems';
 
+export type MatteSetting = 'light' | 'dark' | undefined;
+
 export interface AppStateContext {
   previousPathname?: string
   hasLoaded?: boolean
+  matteSetting?: MatteSetting
+  setMatteSetting?: Dispatch<SetStateAction<MatteSetting>>
   swrTimestamp?: number
   invalidateSwr?: () => void
   userEmail?: string

src/state/AppStateProvider.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, ReactNode, useCallback } from 'react';
-import { AppStateContext } from './AppState';
+import { AppStateContext, MatteSetting } from './AppState';
 import { AnimationConfig } from '@/components/AnimateItems';
 import usePathnames from '@/utility/usePathnames';
 import { getAuthAction } from '@/auth/actions';
@@ -16,6 +16,8 @@ export default function AppStateProvider({
 
   const [hasLoaded, setHasLoaded] =
     useState(false);
+  const [matteSetting, setMatteSetting] =
+    useState<MatteSetting>();
   const [swrTimestamp, setSwrTimestamp] =
     useState(Date.now());
   const [userEmail, setUserEmail] =
@@ -50,6 +52,8 @@ export default function AppStateProvider({
       value={{
         previousPathname,
         hasLoaded,
+        matteSetting,
+        setMatteSetting,
         swrTimestamp,
         invalidateSwr,
         setHasLoaded,