more fixes

resources/js/components/gallery/MasonryGallery.jsx

@@ -56,10 +56,39 @@ async function fetchPageData(url) {
   // JSON fast-path (if controller ever returns JSON)
   if (ct.includes('application/json')) {
     const json = await res.json();
+
+    // Support multiple API payload shapes across endpoints.
+    const artworks = Array.isArray(json.artworks)
+      ? json.artworks
+      : Array.isArray(json.data)
+        ? json.data
+        : Array.isArray(json.items)
+          ? json.items
+          : Array.isArray(json.results)
+            ? json.results
+            : [];
+
+    const nextCursor = json.next_cursor
+      ?? json.nextCursor
+      ?? json.meta?.next_cursor
+      ?? null;
+
+    const nextPageUrl = json.next_page_url
+      ?? json.nextPageUrl
+      ?? json.meta?.next_page_url
+      ?? null;
+
+    const hasMore = typeof json.has_more === 'boolean'
+      ? json.has_more
+      : typeof json.hasMore === 'boolean'
+        ? json.hasMore
+        : null;
+
     return {
-      artworks:    json.artworks    ?? [],
-      nextCursor:  json.next_cursor ?? null,
-      nextPageUrl: json.next_page_url ?? null,
+      artworks,
+      nextCursor,
+      nextPageUrl,
+      hasMore,
     };
   }
 
@@ -76,6 +105,7 @@ async function fetchPageData(url) {
     artworks,
     nextCursor:  el.dataset.nextCursor  || null,
     nextPageUrl: el.dataset.nextPageUrl || null,
+    hasMore: null,
   };
 }
 
@@ -148,6 +178,7 @@ const SKELETON_COUNT = 10;
  *   rankApiEndpoint    string|null  /api/rank/* endpoint; used as fallback data
  *                                   source when no SSR artworks are available
  *   rankType           string|null  Ranking API ?type= param (trending|new_hot|best)
+ *   gridClassName      string|null  Optional CSS class override for grid columns/gaps
  */
 function MasonryGallery({
   artworks: initialArtworks  = [],
@@ -158,6 +189,7 @@ function MasonryGallery({
   limit                      = 40,
   rankApiEndpoint            = null,
   rankType                   = null,
+  gridClassName              = null,
 }) {
   const [artworks,    setArtworks]    = useState(initialArtworks);
   const [nextCursor,  setNextCursor]  = useState(initialNextCursor);
@@ -234,7 +266,7 @@ function MasonryGallery({
 
     setLoading(true);
     try {
-      const { artworks: newItems, nextCursor: nc, nextPageUrl: np } =
+      const { artworks: newItems, nextCursor: nc, nextPageUrl: np, hasMore } =
         await fetchPageData(fetchUrl);
 
       if (!newItems.length) {
@@ -243,7 +275,7 @@ function MasonryGallery({
         setArtworks((prev) => [...prev, ...newItems]);
         if (cursorEndpoint) {
           setNextCursor(nc);
-          if (!nc) setDone(true);
+          if (hasMore === false || !nc) setDone(true);
         } else {
           setNextPageUrl(np);
           if (!np) setDone(true);
@@ -272,7 +304,7 @@ function MasonryGallery({
 
   // Gallery V2 spec §7: 5 col desktop / 3 tablet / 2 mobile for all gallery pages.
   // Discover feeds (home/discover page) retain the same 5-col layout.
-  const gridClass = 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6';
+  const gridClass = gridClassName || 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6';
 
   // ── Render ─────────────────────────────────────────────────────────────
   return (