diff --git a/frontend/src/components/artwork/ArtworkCard.tsx b/frontend/src/components/artwork/ArtworkCard.tsx index 68da07f..409a6f9 100644 --- a/frontend/src/components/artwork/ArtworkCard.tsx +++ b/frontend/src/components/artwork/ArtworkCard.tsx @@ -9,6 +9,7 @@ import "./ArtworkCard.css"; type ArtworkCardProps = { artwork: Artwork; showGalleryAction?: boolean; + showFilters?: boolean; }; function ArtworkImage({ src, alt }: { src: string; alt: string }) { @@ -38,6 +39,7 @@ function ArtworkImage({ src, alt }: { src: string; alt: string }) { export default function ArtworkCard({ artwork, showGalleryAction = true, + showFilters = false, }: ArtworkCardProps) { const artist = artwork.artist_display?.trim() || "Unknown artist"; const location = useLocation(); @@ -65,7 +67,7 @@ export default function ArtworkCard({ {artwork.image_url ? ( diff --git a/frontend/src/components/artwork/ArtworkGrid.tsx b/frontend/src/components/artwork/ArtworkGrid.tsx index 76d937e..885c7cc 100644 --- a/frontend/src/components/artwork/ArtworkGrid.tsx +++ b/frontend/src/components/artwork/ArtworkGrid.tsx @@ -7,12 +7,14 @@ type ArtworkGridProps = { artworks: Artwork[]; renderAction?: (artwork: Artwork) => ReactNode; showGalleryActions?: boolean; + showFilters?: boolean; }; export default function ArtworkGrid({ artworks, renderAction, showGalleryActions = true, + showFilters = false, }: ArtworkGridProps) { if (artworks.length === 0) { return

No artworks to display.

; @@ -25,6 +27,7 @@ export default function ArtworkGrid({ {renderAction?.(artwork)} diff --git a/frontend/src/pages/ArtCataloguePage.tsx b/frontend/src/pages/ArtCataloguePage.tsx index 103a59e..c172a42 100644 --- a/frontend/src/pages/ArtCataloguePage.tsx +++ b/frontend/src/pages/ArtCataloguePage.tsx @@ -1,5 +1,5 @@ import { useState, useEffect, useRef } from "react"; -import { Link, useSearchParams } from "react-router-dom"; +import { Link, useLocation, useSearchParams } from "react-router-dom"; import { CircleUserRound } from "lucide-react"; // Components @@ -28,12 +28,16 @@ export default function ArtCataloguePage() { // URL and pagination state const [searchParams] = useSearchParams(); + const location = useLocation(); + const [page, setPage] = useState(() => Math.max(1, Number(searchParams.get("page")) || 1), ); - // UI state - const [showFilters, setShowFilters] = useState(false); + // Restore whether the filter panel was open when returning from an artwork. + const [showFilters, setShowFilters] = useState( + () => location.state?.showFilters === true, + ); // Refs const artworkResultsRef = useRef(null); @@ -201,7 +205,9 @@ export default function ArtCataloguePage() { className="min-w-0 scroll-mt-6 lg:scroll-mt-24 lg:col-start-2 lg:row-start-3 lg:[&_.artwork-grid]:mx-0!" aria-busy={loading} > - {!error && artworks.length > 0 && } + {!error && artworks.length > 0 && ( + + )} {!loading && !error && artworks.length === 0 && (

diff --git a/frontend/src/pages/ArtworkDetailPage.tsx b/frontend/src/pages/ArtworkDetailPage.tsx index 64543bf..05792fc 100644 --- a/frontend/src/pages/ArtworkDetailPage.tsx +++ b/frontend/src/pages/ArtworkDetailPage.tsx @@ -24,6 +24,8 @@ export default function ArtworkDetailPage() { // Navigation const from = location.state?.from; + const showFilters = location.state?.showFilters === true; + const backTo = typeof from === "string" && from.startsWith("/") && !from.startsWith("//") ? from @@ -55,6 +57,7 @@ export default function ArtworkDetailPage() {

← Back