From a16f992d1a852a07a6f8cdd2f81e50782fe170d2 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 20 Mar 2025 17:56:04 -0500
Subject: [PATCH] Rename/refine <SiteGrid />

---
 app/admin/baseline/page.tsx                  | 4 ++--
 app/admin/components/page.tsx                | 4 ++--
 app/admin/recipes/page.tsx                   | 4 ++--
 app/admin/tags/page.tsx                      | 4 ++--
 app/admin/uploads/page.tsx                   | 4 ++--
 app/film-demo/animate/page.tsx               | 4 ++--
 app/tag/hidden/page.tsx                      | 4 ++--
 src/admin/AdminBatchEditPanelClient.tsx      | 4 ++--
 src/admin/AdminInfoPage.tsx                  | 4 ++--
 src/admin/AdminNavClient.tsx                 | 4 ++--
 src/admin/AdminPhotosClient.tsx              | 4 ++--
 src/admin/upload/AdminUploadPanel.tsx        | 4 ++--
 src/app/Footer.tsx                           | 4 ++--
 src/app/Nav.tsx                              | 4 ++--
 src/components/AdminChildPage.tsx            | 4 ++--
 src/components/{SiteGrid.tsx => AppGrid.tsx} | 8 +++++++-
 src/components/HttpStatusPage.tsx            | 4 ++--
 src/components/PageSpinner.tsx               | 4 ++--
 src/photo/InfinitePhotoScroll.tsx            | 4 ++--
 src/photo/PhotoDetailPage.tsx                | 6 +++---
 src/photo/PhotoGridContainer.tsx             | 4 ++--
 src/photo/PhotoLarge.tsx                     | 4 ++--
 src/photo/PhotosEmptyState.tsx               | 4 ++--
 23 files changed, 52 insertions(+), 46 deletions(-)
 rename src/components/{SiteGrid.tsx => AppGrid.tsx} (89%)

diff --git a/app/admin/baseline/page.tsx b/app/admin/baseline/page.tsx
index 8fc3b13f..53a95c01 100644
--- a/app/admin/baseline/page.tsx
+++ b/app/admin/baseline/page.tsx
@@ -4,7 +4,7 @@ import PhotoCamera from '@/camera/PhotoCamera';
 import Badge from '@/components/Badge';
 import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
 import FieldSetWithStatus from '@/components/FieldSetWithStatus';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import EntityLink from '@/components/primitives/EntityLink';
 import LabeledIcon from '@/components/primitives/LabeledIcon';
 import PhotoFilmSimulationIcon from '@/simulation/PhotoFilmSimulationIcon';
@@ -31,7 +31,7 @@ export default function ComponentsPage() {
   }, [setShouldShowBaselineGrid]);
 
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={<>
         <h1 className="flex mb-6">
           <div className="grow">
diff --git a/app/admin/components/page.tsx b/app/admin/components/page.tsx
index b1513dba..709f1978 100644
--- a/app/admin/components/page.tsx
+++ b/app/admin/components/page.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import StatusIcon from '@/components/StatusIcon';
 import clsx from 'clsx/lite';
 
 export default function ComponentsPage() {
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={<div className={clsx(
         'flex gap-0.5',
         '*:inline-flex *:bg-medium',
diff --git a/app/admin/recipes/page.tsx b/app/admin/recipes/page.tsx
index 85653f3a..47e254eb 100644
--- a/app/admin/recipes/page.tsx
+++ b/app/admin/recipes/page.tsx
@@ -1,12 +1,12 @@
 import AdminRecipeTable from '@/admin/AdminRecipeTable';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import { getUniqueRecipes } from '@/photo/db/query';
 
 export default async function AdminRecipesPage() {
   const recipes = await getUniqueRecipes().catch(() => []);
 
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={
         <div className="space-y-6">
           <div className="space-y-4">
diff --git a/app/admin/tags/page.tsx b/app/admin/tags/page.tsx
index 8b99e1fd..ebe2dbe0 100644
--- a/app/admin/tags/page.tsx
+++ b/app/admin/tags/page.tsx
@@ -1,12 +1,12 @@
 import AdminTagTable from '@/admin/AdminTagTable';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import { getUniqueTags } from '@/photo/db/query';
 
 export default async function AdminTagsPage() {
   const tags = await getUniqueTags().catch(() => []);
 
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={
         <div className="space-y-6">
           <div className="space-y-4">
diff --git a/app/admin/uploads/page.tsx b/app/admin/uploads/page.tsx
index 68727e31..d5c05d0e 100644
--- a/app/admin/uploads/page.tsx
+++ b/app/admin/uploads/page.tsx
@@ -1,5 +1,5 @@
 import { getStorageUploadUrlsNoStore } from '@/platforms/storage/cache';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import { getUniqueTagsCached } from '@/photo/cache';
 import AdminUploadsClient from '@/admin/AdminUploadsClient';
 import { redirect } from 'next/navigation';
@@ -15,7 +15,7 @@ export default async function AdminUploadsPage() {
     redirect(PATH_ADMIN_PHOTOS);
   } else {
     return (
-      <SiteGrid
+      <AppGrid
         contentMain={
           <AdminUploadsClient {...{
             urls,
diff --git a/app/film-demo/animate/page.tsx b/app/film-demo/animate/page.tsx
index ba877ed0..841140d9 100644
--- a/app/film-demo/animate/page.tsx
+++ b/app/film-demo/animate/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import { clsx } from 'clsx/lite';
 import {
   FILM_SIMULATION_FORM_INPUT_OPTIONS,
@@ -19,7 +19,7 @@ export default function FilmPage() {
   });
 
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={<div className={clsx(
         'flex items-center justify-center min-h-[30rem]',
       )}>
diff --git a/app/tag/hidden/page.tsx b/app/tag/hidden/page.tsx
index 3e4c87b1..19b1e148 100644
--- a/app/tag/hidden/page.tsx
+++ b/app/tag/hidden/page.tsx
@@ -1,6 +1,6 @@
 import AnimateItems from '@/components/AnimateItems';
 import Note from '@/components/Note';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import PhotoGrid from '@/photo/PhotoGrid';
 import { getPhotosNoStore } from '@/photo/cache';
 import { getPhotosMeta } from '@/photo/db/query';
@@ -52,7 +52,7 @@ export default async function HiddenTagPage() {
   ]);
 
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={<div className="space-y-4 mt-4">
         <AnimateItems
           type="bottom"
diff --git a/src/admin/AdminBatchEditPanelClient.tsx b/src/admin/AdminBatchEditPanelClient.tsx
index 8a4dc8ae..fddc4392 100644
--- a/src/admin/AdminBatchEditPanelClient.tsx
+++ b/src/admin/AdminBatchEditPanelClient.tsx
@@ -2,7 +2,7 @@
 
 import Note from '@/components/Note';
 import LoaderButton from '@/components/primitives/LoaderButton';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import { useAppState } from '@/state/AppState';
 import { clsx } from 'clsx/lite';
 import { IoCloseSharp } from 'react-icons/io5';
@@ -153,7 +153,7 @@ export default function AdminBatchEditPanelClient({
     pathname === PATH_GRID_INFERRED &&
     selectedPhotoIds !== undefined
   )
-    ? <SiteGrid
+    ? <AppGrid
       className="sticky top-0 z-10 -mt-2 pt-2"
       contentMain={<div className="flex flex-col gap-2">
         <Note
diff --git a/src/admin/AdminInfoPage.tsx b/src/admin/AdminInfoPage.tsx
index dc6d9091..0371ed28 100644
--- a/src/admin/AdminInfoPage.tsx
+++ b/src/admin/AdminInfoPage.tsx
@@ -1,5 +1,5 @@
 import Container from '@/components/Container';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import { ReactNode } from 'react';
 
 export default function AdminInfoPage({
@@ -8,7 +8,7 @@ export default function AdminInfoPage({
   children: ReactNode
 }) {
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={
         <Container spaceChildren={false}>
           {children}
diff --git a/src/admin/AdminNavClient.tsx b/src/admin/AdminNavClient.tsx
index fd45964d..12539068 100644
--- a/src/admin/AdminNavClient.tsx
+++ b/src/admin/AdminNavClient.tsx
@@ -3,7 +3,7 @@
 import LinkWithLoader from '@/components/LinkWithLoader';
 import LinkWithStatus from '@/components/LinkWithStatus';
 import Note from '@/components/Note';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import Spinner from '@/components/Spinner';
 import {
   PATH_ADMIN_CONFIGURATION,
@@ -62,7 +62,7 @@ export default function AdminNavClient({
   const shouldShowBanner = hasRecentUpdates && isPathTopLevelAdmin(pathname);
 
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={
         <div className="space-y-4">
           <div className={clsx(
diff --git a/src/admin/AdminPhotosClient.tsx b/src/admin/AdminPhotosClient.tsx
index c7df2fe0..100567a8 100644
--- a/src/admin/AdminPhotosClient.tsx
+++ b/src/admin/AdminPhotosClient.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { clsx } from 'clsx/lite';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import AdminPhotosTable from '@/admin/AdminPhotosTable';
 import AdminPhotosTableInfinite from '@/admin/AdminPhotosTableInfinite';
 import PathLoaderButton from '@/components/primitives/PathLoaderButton';
@@ -40,7 +40,7 @@ export default function AdminPhotosClient({
   const { uploadState: { isUploading } } = useAppState();
 
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={
         <div className="space-y-4">
           <div className="flex gap-4">
diff --git a/src/admin/upload/AdminUploadPanel.tsx b/src/admin/upload/AdminUploadPanel.tsx
index 89190cad..2a3fa272 100644
--- a/src/admin/upload/AdminUploadPanel.tsx
+++ b/src/admin/upload/AdminUploadPanel.tsx
@@ -2,7 +2,7 @@
 
 import Container from '@/components/Container';
 import LoaderButton from '@/components/primitives/LoaderButton';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import PhotoUploadWithStatus from '@/photo/PhotoUploadWithStatus';
 import { useAppState } from '@/state/AppState';
 import clsx from 'clsx/lite';
@@ -25,7 +25,7 @@ export default function AdminUploadPanel({
   } = useAppState();
 
   return (
-    <SiteGrid
+    <AppGrid
       className={clsx((!isUploading || hideUploadPanel) && 'hidden')}
       contentMain={
         <Container
diff --git a/src/app/Footer.tsx b/src/app/Footer.tsx
index d639b014..eb982578 100644
--- a/src/app/Footer.tsx
+++ b/src/app/Footer.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { clsx } from 'clsx/lite';
-import SiteGrid from '../components/SiteGrid';
+import AppGrid from '../components/AppGrid';
 import ThemeSwitcher from '@/app/ThemeSwitcher';
 import Link from 'next/link';
 import { SHOW_REPO_LINK } from '@/app/config';
@@ -24,7 +24,7 @@ export default function Footer() {
   const shouldAnimate = !isPathAdmin(pathname);
 
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={
         <AnimateItems
           animateOnFirstLoadOnly
diff --git a/src/app/Nav.tsx b/src/app/Nav.tsx
index a50c469d..5e71384e 100644
--- a/src/app/Nav.tsx
+++ b/src/app/Nav.tsx
@@ -3,7 +3,7 @@
 import { clsx } from 'clsx/lite';
 import { usePathname } from 'next/navigation';
 import Link from 'next/link';
-import SiteGrid from '../components/SiteGrid';
+import AppGrid from '../components/AppGrid';
 import ViewSwitcher, { SwitcherSelection } from '@/app/ViewSwitcher';
 import {
   PATH_ROOT,
@@ -54,7 +54,7 @@ export default function Nav({
   };
 
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={
         <AnimateItems
           animateOnFirstLoadOnly
diff --git a/src/components/AdminChildPage.tsx b/src/components/AdminChildPage.tsx
index 43ff53cf..48838669 100644
--- a/src/components/AdminChildPage.tsx
+++ b/src/components/AdminChildPage.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import Link from 'next/link';
 import { FiArrowLeft } from 'react-icons/fi';
-import SiteGrid from './SiteGrid';
+import AppGrid from './AppGrid';
 import { clsx } from 'clsx/lite';
 import Badge from './Badge';
 import Spinner from './Spinner';
@@ -24,7 +24,7 @@ function AdminChildPage({
   children: ReactNode,
 }) {
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={
         <div className="space-y-6">
           {(backPath || breadcrumb || accessory) &&
diff --git a/src/components/SiteGrid.tsx b/src/components/AppGrid.tsx
similarity index 89%
rename from src/components/SiteGrid.tsx
rename to src/components/AppGrid.tsx
index 9aeb8404..d6057ce4 100644
--- a/src/components/SiteGrid.tsx
+++ b/src/components/AppGrid.tsx
@@ -11,9 +11,11 @@ import { HTMLAttributes, ReactNode, RefObject } from 'react';
   Column offset: (302px + 24px) / 2 = 163px
 */
 
-export default function SiteGrid({
+export default function AppGrid({
   containerRef,
   className,
+  classNameMain,
+  classNameSide,
   contentMain,
   contentSide,
   sideFirstOnMobile,
@@ -22,6 +24,8 @@ export default function SiteGrid({
 }: {
   containerRef?: RefObject<HTMLDivElement | null>
   className?: string
+  classNameMain?: string
+  classNameSide?: string
   contentMain: ReactNode
   contentSide?: ReactNode
   sideFirstOnMobile?: boolean
@@ -45,6 +49,7 @@ export default function SiteGrid({
       <div className={clsx(
         'col-span-1 md:col-span-9',
         sideFirstOnMobile && 'order-2 md:order-none',
+        classNameMain,
       )}>
         {contentMain}
       </div>
@@ -54,6 +59,7 @@ export default function SiteGrid({
           '3xl:max-w-[260px]',
           sideFirstOnMobile && 'order-1 md:order-none',
           sideHiddenOnMobile && 'hidden md:block',
+          classNameSide,
         )}>
           {contentSide}
         </div>}
diff --git a/src/components/HttpStatusPage.tsx b/src/components/HttpStatusPage.tsx
index 13dd3d0d..f905683c 100644
--- a/src/components/HttpStatusPage.tsx
+++ b/src/components/HttpStatusPage.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import SiteGrid from './SiteGrid';
+import AppGrid from './AppGrid';
 import { clsx } from 'clsx/lite';
 import { PATH_ROOT } from '@/app/paths';
 import Link from 'next/link';
@@ -12,7 +12,7 @@ export default function HttpStatusPage({
   children?: ReactNode
 }) {
   return (
-    <SiteGrid contentMain={
+    <AppGrid contentMain={
       <div className={clsx(
         'min-h-72 sm:min-h-96',
         'flex flex-col items-center justify-center gap-3',
diff --git a/src/components/PageSpinner.tsx b/src/components/PageSpinner.tsx
index 630f5821..f0ce3815 100644
--- a/src/components/PageSpinner.tsx
+++ b/src/components/PageSpinner.tsx
@@ -1,10 +1,10 @@
 import { clsx } from 'clsx/lite';
 import Spinner from './Spinner';
-import SiteGrid from './SiteGrid';
+import AppGrid from './AppGrid';
 
 export default function PageSpinner() {
   return (
-    <SiteGrid contentMain={
+    <AppGrid contentMain={
       <div className={clsx(
         'flex justify-center items-center',
         'w-full min-h-[20rem] sm:min-h-[30rem]',
diff --git a/src/photo/InfinitePhotoScroll.tsx b/src/photo/InfinitePhotoScroll.tsx
index e0de4f00..b1a2a48e 100644
--- a/src/photo/InfinitePhotoScroll.tsx
+++ b/src/photo/InfinitePhotoScroll.tsx
@@ -8,7 +8,7 @@ import {
   useMemo,
   useRef,
 } from 'react';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import Spinner from '@/components/Spinner';
 import { getPhotosCachedAction, getPhotosAction } from '@/photo/actions';
 import { Photo } from '.';
@@ -164,7 +164,7 @@ export default function InfinitePhotoScroll({
         revalidatePhoto,
       })}
       {!isFinished && (wrapMoreButtonInGrid
-        ? <SiteGrid contentMain={renderMoreButton()} />
+        ? <AppGrid contentMain={renderMoreButton()} />
         : renderMoreButton())}
     </div>
   );
diff --git a/src/photo/PhotoDetailPage.tsx b/src/photo/PhotoDetailPage.tsx
index 6f32765e..8ca24fce 100644
--- a/src/photo/PhotoDetailPage.tsx
+++ b/src/photo/PhotoDetailPage.tsx
@@ -2,7 +2,7 @@ import AnimateItems from '@/components/AnimateItems';
 import { Photo, PhotoDateRange } from '.';
 import { PhotoSetCategory } from '../category';
 import PhotoLarge from './PhotoLarge';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import PhotoGrid from './PhotoGrid';
 import TagHeader from '@/tag/TagHeader';
 import CameraHeader from '@/camera/CameraHeader';
@@ -107,7 +107,7 @@ export default function PhotoDetailPage({
 
   return (
     <div>
-      <SiteGrid
+      <AppGrid
         className="mt-1.5 mb-6"
         contentMain={customHeader ?? <PhotoHeader
           selectedPhoto={photo}
@@ -142,7 +142,7 @@ export default function PhotoDetailPage({
           />,
         ]}
       />
-      <SiteGrid
+      <AppGrid
         sideFirstOnMobile
         contentMain={<PhotoGrid
           photos={photosGrid ?? photos}
diff --git a/src/photo/PhotoGridContainer.tsx b/src/photo/PhotoGridContainer.tsx
index 105072d6..1c602fdd 100644
--- a/src/photo/PhotoGridContainer.tsx
+++ b/src/photo/PhotoGridContainer.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import PhotoGrid from './PhotoGrid';
 import PhotoGridInfinite from './PhotoGridInfinite';
 import { clsx } from 'clsx/lite';
@@ -32,7 +32,7 @@ export default function PhotoGridContainer({
     setShouldAnimateDynamicItems(true), []);
 
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={<div className={clsx(
         header && 'space-y-8 mt-1.5',
       )}>
diff --git a/src/photo/PhotoLarge.tsx b/src/photo/PhotoLarge.tsx
index 9cffd626..ba891136 100644
--- a/src/photo/PhotoLarge.tsx
+++ b/src/photo/PhotoLarge.tsx
@@ -10,7 +10,7 @@ import {
   shouldShowRecipeDataForPhoto,
   titleForPhoto,
 } from '.';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import ImageLarge from '@/components/image/ImageLarge';
 import { clsx } from 'clsx/lite';
 import Link from 'next/link';
@@ -229,7 +229,7 @@ export default function PhotoLarge({
   );
 
   return (
-    <SiteGrid
+    <AppGrid
       containerRef={ref}
       className={className}
       contentMain={showZoomControls
diff --git a/src/photo/PhotosEmptyState.tsx b/src/photo/PhotosEmptyState.tsx
index 97c10bce..69a931df 100644
--- a/src/photo/PhotosEmptyState.tsx
+++ b/src/photo/PhotosEmptyState.tsx
@@ -1,5 +1,5 @@
 import Container from '@/components/Container';
-import SiteGrid from '@/components/SiteGrid';
+import AppGrid from '@/components/AppGrid';
 import { IS_SITE_READY, PRESERVE_ORIGINAL_UPLOADS } from '@/app/config';
 import AdminAppConfiguration from '@/admin/AdminAppConfiguration';
 import { clsx } from 'clsx/lite';
@@ -12,7 +12,7 @@ import AnimateItems from '@/components/AnimateItems';
 
 export default function PhotosEmptyState() {
   return (
-    <SiteGrid
+    <AppGrid
       contentMain={
         <AnimateItems
           items={[