diff --git a/app/features/art/components/ArtGrid.tsx b/app/features/art/components/ArtGrid.tsx index b1480acc9..401e2b6bf 100644 --- a/app/features/art/components/ArtGrid.tsx +++ b/app/features/art/components/ArtGrid.tsx @@ -35,6 +35,7 @@ export function ArtGrid({ enablePreview?: boolean; showUploadDate?: boolean; }) { + const [bigArtId, setBigArtId] = useSearchParam(artGridSearchParams, "big"); const { itemsToDisplay, everythingVisible, @@ -46,13 +47,13 @@ export function ArtGrid({ } = usePagination({ items: arts, pageSize: ART_PER_PAGE, + initialPage: pageOfArt(arts, bigArtId), }); - const [bigArtId, setBigArtId] = useSearchParam(artGridSearchParams, "big"); const isHydrated = useHydrated(); if (!isHydrated) return null; - const bigArt = itemsToDisplay.find((art) => art.id === bigArtId); + const bigArt = arts.find((art) => art.id === bigArtId); return ( <> @@ -411,6 +412,16 @@ function useImageAspectRatio() { return [aspectRatio, imageRef] as const; } +/** Page the art is on, so that a shared `?big=` link renders the page containing it. */ +function pageOfArt(arts: ListedArt[], artId: number | null) { + if (typeof artId !== "number") return 1; + + const index = arts.findIndex((art) => art.id === artId); + if (index === -1) return 1; + + return Math.floor(index / ART_PER_PAGE) + 1; +} + /** Touch devices have no hover to reveal the lightbox info with, so a tap on the image toggles it instead. */ function deviceCanHover() { return window.matchMedia("(hover: hover)").matches; diff --git a/app/hooks/usePagination.ts b/app/hooks/usePagination.ts index a4ce7fa1a..71574d0db 100644 --- a/app/hooks/usePagination.ts +++ b/app/hooks/usePagination.ts @@ -3,13 +3,15 @@ import * as React from "react"; export function usePagination({ items, pageSize, + initialPage = 1, scrollToTop = true, }: { items: T[]; pageSize: number; + initialPage?: number; scrollToTop?: boolean; }) { - const [currentPage, setCurrentPage] = React.useState(1); + const [currentPage, setCurrentPage] = React.useState(initialPage); const pagesCount = Math.ceil(items.length / pageSize); const itemsToDisplay = React.useMemo( diff --git a/changelog/2026-09-20-art-share-link-later-pages.md b/changelog/2026-09-20-art-share-link-later-pages.md new file mode 100644 index 000000000..bb0bbb4e5 --- /dev/null +++ b/changelog/2026-09-20-art-share-link-later-pages.md @@ -0,0 +1,5 @@ +--- +navItem: art +type: bug +--- +Fixed link to a specific art not opening it if the art was not on the first page