Preserve filter panel state

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({
       <Link
         to={`/artworks/${artwork.id}`}
         className="group block"
-        state={{ from: `${location.pathname}${location.search}` }}
+        state={{ from: `${location.pathname}${location.search}`, showFilters }}
         onClick={rememberCataloguePosition}
       >
         {artwork.image_url ? (

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 <p>No artworks to display.</p>;
@@ -25,6 +27,7 @@ export default function ArtworkGrid({
           <ArtworkCard
             artwork={artwork}
             showGalleryAction={showGalleryActions}
+            showFilters={showFilters}
           />
           {renderAction?.(artwork)}
         </li>

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<HTMLDivElement>(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 && <ArtworkGrid artworks={artworks} />}
+          {!error && artworks.length > 0 && (
+            <ArtworkGrid artworks={artworks} showFilters={showFilters} />
+          )}
 
           {!loading && !error && artworks.length === 0 && (
             <p className="my-8 text-gray-600 dark:text-gray-400">

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() {
     <section className="mx-auto w-full max-w-7xl px-6 py-14 sm:px-10 lg:px-16 lg:py-20">
       <Link
         to={backTo}
+        state={{ showFilters }}
         className="absolute left-4 top-4 z-10 inline-flex items-center rounded-md border border-[#dedbd8] bg-white/90 px-4 py-2 text-sm text-[#514943] shadow-sm backdrop-blur transition-colors hover:bg-[#f4f1ee] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321]/90 dark:text-[#e6dfd6] dark:hover:bg-[#302e2a] dark:focus-visible:outline-[#b6aaa0]"
       >
         ← Back