updated gallery

resources/js/components/profile/ProfileHero.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import NovaConfirmDialog from '../ui/NovaConfirmDialog'
 import ProfileCoverEditor from './ProfileCoverEditor'
 
 /**
@@ -13,6 +14,8 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
   const [editorOpen, setEditorOpen] = useState(false)
   const [coverUrl, setCoverUrl] = useState(user?.cover_url || heroBgUrl || null)
   const [coverPosition, setCoverPosition] = useState(Number.isFinite(user?.cover_position) ? user.cover_position : 50)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [pendingFollowState, setPendingFollowState] = useState(null)
 
   const uname = user.username || user.name || 'Unknown'
   const displayName = user.name || uname
@@ -23,7 +26,7 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
 
   const bio = profile?.bio || profile?.about || ''
 
-  const toggleFollow = async () => {
+  const persistFollowState = async (nextState) => {
     if (loading) return
     setLoading(true)
     try {
@@ -43,6 +46,29 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
     setLoading(false)
   }
 
+  const toggleFollow = async () => {
+    const nextState = !following
+    if (!nextState) {
+      setPendingFollowState(nextState)
+      setConfirmOpen(true)
+      return
+    }
+
+    await persistFollowState(nextState)
+  }
+
+  const onConfirmUnfollow = async () => {
+    if (pendingFollowState === null) return
+    setConfirmOpen(false)
+    await persistFollowState(pendingFollowState)
+    setPendingFollowState(null)
+  }
+
+  const onCloseConfirm = () => {
+    setConfirmOpen(false)
+    setPendingFollowState(null)
+  }
+
   return (
     <>
       <div className="max-w-6xl mx-auto px-4 pt-4">
@@ -228,6 +254,18 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
           setCoverPosition(50)
         }}
       />
+
+      <NovaConfirmDialog
+        open={confirmOpen}
+        title="Unfollow creator?"
+        message={`You will stop seeing updates from @${uname} in your following feed.`}
+        confirmLabel="Unfollow"
+        cancelLabel="Keep following"
+        confirmTone="danger"
+        onConfirm={onConfirmUnfollow}
+        onClose={onCloseConfirm}
+        busy={loading}
+      />
     </>
   )
 }

resources/js/components/profile/tabs/TabFavourites.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import ArtworkCard from '../../gallery/ArtworkCard'
+import ArtworkGallery from '../../artwork/ArtworkGallery'
 
 function FavSkeleton() {
   return (
@@ -57,16 +57,16 @@ export default function TabFavourites({ favourites, isOwner, username }) {
         </div>
       ) : (
         <>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-            {items.map((art, i) => (
-              <ArtworkCard
-                key={art.id ?? i}
-                art={art}
-                loading={i < 8 ? 'eager' : 'lazy'}
-              />
-            ))}
+          <ArtworkGallery
+            items={items}
+            layout="grid"
+            className="grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4"
+            resolveCardProps={(_, index) => ({
+              loading: index < 8 ? 'eager' : 'lazy',
+            })}
+          >
             {loadingMore && Array.from({ length: 4 }).map((_, i) => <FavSkeleton key={`sk-${i}`} />)}
-          </div>
+          </ArtworkGallery>
 
           {nextCursor && (
             <div className="mt-8 text-center">