Repair: copy legacy joinDate into new user's created_at when creating users from legacy wallz

resources/js/components/profile/ProfileGalleryPanel.jsx

@@ -9,46 +9,31 @@ const SORT_OPTIONS = [
   { value: 'favs', label: 'Most Favourited' },
 ]
 
-function slugify(str) {
-  return (str || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
-}
-
-function FeaturedStrip({ featuredArtworks }) {
-  if (!featuredArtworks?.length) return null
-
+function GalleryToolbar({ sort, onSort }) {
   return (
-    <div className="mb-7 rounded-2xl border border-white/10 bg-white/[0.02] p-4 md:p-5">
-      <h2 className="mb-3 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-slate-400">
-        <i className="fa-solid fa-star fa-fw text-amber-400" />
-        Featured
-      </h2>
-      <div className="scrollbar-hide flex snap-x snap-mandatory gap-4 overflow-x-auto pb-2">
-        {featuredArtworks.slice(0, 5).map((art) => (
-          <a
-            key={art.id}
-            href={`/art/${art.id}/${slugify(art.name)}`}
-            className="group w-56 shrink-0 snap-start md:w-64"
+    <div className="mb-5 flex flex-wrap items-center gap-3">
+      <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">Sort</span>
+      <div className="flex flex-wrap gap-1 rounded-2xl border border-white/10 bg-white/[0.03] p-1">
+        {SORT_OPTIONS.map((opt) => (
+          <button
+            key={opt.value}
+            type="button"
+            onClick={() => onSort(opt.value)}
+            className={`rounded-xl px-3.5 py-2 text-xs font-medium transition-all ${
+              sort === opt.value
+                ? 'bg-sky-500/20 text-sky-300 ring-1 ring-sky-400/40'
+                : 'text-slate-400 hover:bg-white/5 hover:text-white'
+            }`}
           >
-            <div className="aspect-[5/3] overflow-hidden rounded-xl bg-black/30 ring-1 ring-white/10 transition-all hover:ring-sky-400/40">
-              <img
-                src={art.thumb}
-                alt={art.name}
-                className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
-                loading="lazy"
-              />
-            </div>
-            <p className="mt-2 truncate text-sm text-slate-300 transition-colors group-hover:text-white">
-              {art.name}
-            </p>
-            {art.label ? <p className="truncate text-[11px] text-slate-600">{art.label}</p> : null}
-          </a>
+            {opt.label}
+          </button>
         ))}
       </div>
     </div>
   )
 }
 
-export default function ProfileGalleryPanel({ artworks, featuredArtworks, username }) {
+export default function ProfileGalleryPanel({ artworks, username }) {
   const [sort, setSort] = useState('latest')
   const [items, setItems] = useState(artworks?.data ?? artworks ?? [])
   const [nextCursor, setNextCursor] = useState(artworks?.next_cursor ?? null)
@@ -74,36 +59,20 @@ export default function ProfileGalleryPanel({ artworks, featuredArtworks, userna
 
   return (
     <>
-      <FeaturedStrip featuredArtworks={featuredArtworks} />
-
-      <div className="mb-5 flex flex-wrap items-center gap-3">
-        <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">Sort</span>
-        <div className="flex flex-wrap gap-1">
-          {SORT_OPTIONS.map((opt) => (
-            <button
-              key={opt.value}
-              type="button"
-              onClick={() => handleSort(opt.value)}
-              className={`rounded-lg px-3 py-1.5 text-xs font-medium transition-all ${
-                sort === opt.value
-                  ? 'bg-sky-500/20 text-sky-300 ring-1 ring-sky-400/40'
-                  : 'text-slate-400 hover:bg-white/5 hover:text-white'
-              }`}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
+      <div className="mx-auto w-full max-w-6xl px-4 md:px-6">
+        <GalleryToolbar sort={sort} onSort={handleSort} />
       </div>
 
-      <MasonryGallery
-        key={`profile-${username}-${sort}`}
-        artworks={items}
-        galleryType="profile"
-        cursorEndpoint={`/api/profile/${encodeURIComponent(username)}/artworks?sort=${encodeURIComponent(sort)}`}
-        initialNextCursor={nextCursor}
-        limit={24}
-      />
+      <div className="w-full px-4 md:px-6 xl:px-8">
+        <MasonryGallery
+          key={`profile-${username}-${sort}`}
+          artworks={items}
+          galleryType="profile"
+          cursorEndpoint={`/api/profile/${encodeURIComponent(username)}/artworks?sort=${encodeURIComponent(sort)}`}
+          initialNextCursor={nextCursor}
+          limit={24}
+        />
+      </div>
     </>
   )
 }