strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename/refine <SiteGrid />

Browse Source
This commit is contained in:
Sam Becker 2025-03-20 17:56:04 -05:00
parent 6f0dc49b9e
commit a16f992d1a
23 changed files with 52 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/admin/baseline/page.tsx
View File

@ -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">

4
app/admin/components/page.tsx
View File

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

4
app/admin/recipes/page.tsx
View File

@ -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">

4
app/admin/tags/page.tsx
View File

@ -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">

4
app/admin/uploads/page.tsx
View File

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

4
app/film-demo/animate/page.tsx
View File

@ -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]',
)}>

4
app/tag/hidden/page.tsx
View File

@ -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"

4
src/admin/AdminBatchEditPanelClient.tsx
View File

@ -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

4
src/admin/AdminInfoPage.tsx
View File

@ -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}

4
src/admin/AdminNavClient.tsx
View File

@ -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(

4
src/admin/AdminPhotosClient.tsx
View File

@ -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">

4
src/admin/upload/AdminUploadPanel.tsx
View File

@ -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

4
src/app/Footer.tsx
View File

@ -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

4
src/app/Nav.tsx
View File

@ -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

4
src/components/AdminChildPage.tsx
View File

@ -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) &&

8
src/components/SiteGrid.tsx → src/components/AppGrid.tsx
View File

@ -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>}

4
src/components/HttpStatusPage.tsx
View File

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

4
src/components/PageSpinner.tsx
View File

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

4
src/photo/InfinitePhotoScroll.tsx
View File

@ -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>
);

6
src/photo/PhotoDetailPage.tsx
View File

@ -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}

4
src/photo/PhotoGridContainer.tsx
View File

@ -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',
)}>

4
src/photo/PhotoLarge.tsx
View File

@ -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

4
src/photo/PhotosEmptyState.tsx
View File

@ -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={[