updated gallery

resources/js/components/gallery/MasonryGallery.jsx

@@ -1,7 +1,7 @@
 import React, {
   useState, useEffect, useRef, useCallback, memo,
 } from 'react';
-import ArtworkCard from './ArtworkCard';
+import ArtworkGallery from '../artwork/ArtworkGallery';
 import './MasonryGallery.css';
 
 // ── Masonry helpers ────────────────────────────────────────────────────────
@@ -132,6 +132,8 @@ function mapRankApiArtwork(item) {
     uname:         item.author?.name  ?? '',
     username:      item.author?.username ?? item.author?.name ?? '',
     avatar_url:    item.author?.avatar_url ?? null,
+    content_type_name: item.category?.content_type_name ?? item.category?.content_type_slug ?? item.category?.content_type ?? '',
+    content_type_slug: item.category?.content_type_slug ?? item.category?.content_type ?? '',
     category_name: item.category?.name    ?? '',
     category_slug: item.category?.slug    ?? '',
     slug:          item.slug              ?? '',
@@ -164,6 +166,36 @@ async function fetchRankApiArtworks(endpoint, rankType) {
 
 const SKELETON_COUNT = 10;
 
+function getMasonryCardProps(art, idx) {
+  const title = (art.name || art.title || 'Untitled artwork').trim();
+  const hasDimensions = Number(art.width) > 0 && Number(art.height) > 0;
+  const aspectRatio = hasDimensions ? Number(art.width) / Number(art.height) : null;
+  const categorySlug = (art.category_slug || '').toLowerCase();
+  const categoryName = (art.category_name || art.category || '').toLowerCase();
+  const wideCategories = ['photography', 'wallpapers', 'photography-digital', 'wallpaper'];
+  const wideCategoryNames = ['photography', 'wallpapers'];
+  const isWideEligible =
+    aspectRatio !== null &&
+    aspectRatio > 2.0 &&
+    (wideCategories.includes(categorySlug) || wideCategoryNames.includes(categoryName));
+
+  return {
+    articleClassName: `nova-card gallery-item artwork relative${isWideEligible ? ' nova-card--wide' : ''}`,
+    articleStyle: isWideEligible ? { gridColumn: 'span 2' } : undefined,
+    frameClassName: 'rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 hover:ring-white/15 hover:shadow-[0_8px_30px_rgba(0,0,0,0.6),0_0_0_1px_rgba(255,255,255,0.08)]',
+    mediaClassName: 'nova-card-media relative w-full overflow-hidden bg-neutral-900',
+    mediaStyle: hasDimensions ? { aspectRatio: `${art.width} / ${art.height}` } : undefined,
+    imageSrcSet: art.thumb_srcset || undefined,
+    imageSizes: '(max-width: 768px) 50vw, (max-width: 1280px) 33vw, 20vw',
+    imageWidth: hasDimensions ? art.width : undefined,
+    imageHeight: hasDimensions ? art.height : undefined,
+    loading: idx < 8 ? 'eager' : 'lazy',
+    decoding: idx < 8 ? 'sync' : 'async',
+    fetchPriority: idx === 0 ? 'high' : undefined,
+    imageClassName: 'nova-card-main-image absolute inset-0 h-full w-full object-cover group-hover:scale-[1.03]',
+  };
+}
+
 // ── Main component ────────────────────────────────────────────────────────
 /**
  * MasonryGallery
@@ -309,7 +341,7 @@ function MasonryGallery({
   // ── Render ─────────────────────────────────────────────────────────────
   return (
     <section
-      className="px-6 pb-10 pt-2 md:px-10 is-enhanced"
+      className="pb-10 pt-2 is-enhanced"
       data-nova-gallery
       data-gallery-type={galleryType}
       data-react-masonry-gallery
@@ -321,17 +353,14 @@ function MasonryGallery({
         <>
           <div
             ref={gridRef}
-            className={gridClass}
-            data-gallery-grid
           >
-            {artworks.map((art, idx) => (
-              <ArtworkCard
-                key={`${art.id}-${idx}`}
-                art={art}
-                loading={idx < 8 ? 'eager' : 'lazy'}
-                fetchPriority={idx === 0 ? 'high' : undefined}
-              />
-            ))}
+            <ArtworkGallery
+              items={artworks}
+              layout="masonry"
+              className={gridClass}
+              containerProps={{ 'data-gallery-grid': true }}
+              resolveCardProps={getMasonryCardProps}
+            />
           </div>
 
           {/* Infinite scroll sentinel – placed after the grid */}