feat: ship creator journey v2 and profile updates

resources/js/dashboard/DashboardPage.jsx

@@ -1240,10 +1240,8 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
 
               <ActivityFeed />
 
-              <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
-                <TrendingArtworks />
-                <RecommendedCreators />
-              </div>
+              <TrendingArtworks />
+              <RecommendedCreators />
             </section>
 
             <aside className="space-y-6 xl:col-span-4">

resources/js/dashboard/components/ActivityFeed.jsx

@@ -106,7 +106,7 @@ export default function ActivityFeed() {
       ) : null}
 
       {!loading && !error && items.length > 0 ? (
-        <div className="max-h-[520px] space-y-3 overflow-y-auto pr-1">
+        <div className="nova-scrollbar max-h-[520px] space-y-3 overflow-y-auto pr-2">
           {items.map((item) => (
             <article
               key={item.id}

resources/js/dashboard/components/RecommendedCreators.jsx

@@ -57,84 +57,98 @@ export default function RecommendedCreators() {
   }
 
   return (
-    <section className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.82))] p-5 shadow-[0_24px_90px_rgba(2,8,23,0.32)]">
-      <div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <section className="rounded-[28px] border border-white/10 bg-[#08111c]/90 shadow-2xl shadow-black/20">
+      <div className="flex items-start justify-between gap-4 px-5 pt-5 pb-4 sm:px-6 sm:pt-6">
         <div>
           <p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Community</p>
-          <h2 className="mt-2 text-xl font-semibold text-white">Recommended Creators</h2>
-          <p className="mt-2 max-w-md text-sm leading-6 text-slate-300">
-            Strong accounts you are not following yet, selected to help you improve your feed and discover new audiences.
+          <h2 className="mt-1 text-xl font-semibold text-white">Recommended Creators</h2>
+          <p className="mt-1.5 text-sm leading-6 text-slate-400">
+            Strong accounts you are not following yet.
           </p>
         </div>
-        <a className="inline-flex items-center justify-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15 sm:justify-start" href="/creators/top">
+        <a
+          className="mt-1 inline-flex shrink-0 items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15"
+          href="/creators/top"
+        >
           See all
           <i className="fa-solid fa-arrow-right text-[10px]" />
         </a>
       </div>
 
-      {loading ? <p className="text-sm text-slate-400">Loading creators...</p> : null}
-      {error ? <p className="mb-4 text-sm text-rose-300">{error}</p> : null}
-
-      {!loading && items.length === 0 ? (
-        <div className="rounded-2xl border border-white/8 bg-white/5 px-5 py-6 text-sm text-slate-300">
-          <p className="font-medium text-white">No creator recommendations right now.</p>
-          <p className="mt-2 text-slate-400">Browse the full creator directory to keep expanding your network.</p>
-        </div>
-      ) : null}
-
-      {!loading && items.length > 0 ? (
-        <div className="space-y-3">
-          {items.map((creator) => (
-            <article
-              key={creator.id}
-              className="flex flex-col gap-4 rounded-2xl border border-white/8 bg-white/[0.04] p-4 transition hover:-translate-y-0.5 hover:border-white/15 hover:bg-white/[0.06] sm:flex-row sm:items-center sm:justify-between"
-            >
-              <a href={creator.url || '#'} className="flex min-w-0 items-center gap-4">
-                <img
-                  src={creator.avatar || '/images/default-avatar.png'}
-                  alt={creator.username || creator.name || 'Creator'}
-                  className="h-12 w-12 rounded-2xl border border-white/10 object-cover"
-                />
-                <div className="min-w-0">
-                  <div className="flex flex-wrap items-center gap-2">
-                    <p className="truncate text-sm font-semibold text-white">
-                      {creator.username ? `@${creator.username}` : creator.name}
-                    </p>
-                    <span className="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-400/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-wide text-sky-100">
-                      Suggested
-                    </span>
-                  </div>
-                  <div className="mt-1">
-                    <LevelBadge level={creator.level} rank={creator.rank} compact />
-                  </div>
-                  <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-400">
-                    <span>{Number(creator.followers_count || 0).toLocaleString()} followers</span>
-                    <span>{Number(creator.uploads_count || 0).toLocaleString()} uploads</span>
-                  </div>
+      <div className="px-5 pb-5 sm:px-6 sm:pb-6">
+        {loading ? (
+          <div className="space-y-3">
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className="flex items-center gap-3 rounded-2xl border border-white/6 bg-white/[0.03] p-3">
+                <div className="h-11 w-11 shrink-0 animate-pulse rounded-2xl bg-white/8" />
+                <div className="flex-1 space-y-2">
+                  <div className="h-3 w-28 animate-pulse rounded-full bg-white/8" />
+                  <div className="h-2.5 w-20 animate-pulse rounded-full bg-white/5" />
                 </div>
-              </a>
-
-              <div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center sm:self-auto">
-                <a
-                  href={creator.url || '#'}
-                  className="inline-flex items-center justify-center rounded-full border border-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-200 transition hover:border-white/20 hover:bg-white/5"
-                >
-                  View profile
-                </a>
-                <button
-                  type="button"
-                  onClick={() => handleFollow(creator)}
-                  disabled={busyId === creator.id || !creator.username}
-                  className="inline-flex items-center justify-center gap-2 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-3.5 py-2 text-xs font-semibold uppercase tracking-wide text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-400/15 disabled:cursor-not-allowed disabled:opacity-60"
-                >
-                  <i className={`fa-solid ${busyId === creator.id ? 'fa-circle-notch fa-spin' : 'fa-user-plus'} text-[10px]`} />
-                  Follow
-                </button>
+                <div className="h-8 w-16 animate-pulse rounded-full bg-white/5" />
               </div>
-            </article>
-          ))}
-        </div>
-      ) : null}
+            ))}
+          </div>
+        ) : null}
+
+        {error ? <p className="mb-3 text-sm text-rose-300">{error}</p> : null}
+
+        {!loading && items.length === 0 ? (
+          <div className="rounded-2xl border border-white/8 bg-white/5 px-5 py-6 text-sm text-slate-300">
+            <p className="font-medium text-white">No creator recommendations right now.</p>
+            <p className="mt-2 text-slate-400">Browse the full creator directory to keep expanding your network.</p>
+          </div>
+        ) : null}
+
+        {!loading && items.length > 0 ? (
+          <ul className="space-y-2.5">
+            {items.map((creator) => (
+              <li key={creator.id}>
+                <div className="flex items-center gap-3 rounded-2xl border border-white/8 bg-white/[0.03] p-3 transition hover:border-white/14 hover:bg-white/[0.05]">
+                  {/* Avatar */}
+                  <a href={creator.url || '#'} className="shrink-0" tabIndex={-1} aria-hidden="true">
+                    <img
+                      src={creator.avatar || '/images/default-avatar.png'}
+                      alt={creator.username || creator.name || 'Creator'}
+                      className="h-11 w-11 rounded-2xl border border-white/10 object-cover"
+                    />
+                  </a>
+
+                  {/* Info */}
+                  <a href={creator.url || '#'} className="min-w-0 flex-1">
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      <span className="truncate text-sm font-semibold text-white">
+                        {creator.username ? `@${creator.username}` : creator.name}
+                      </span>
+                      <span className="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-400/10 px-2 py-0.5 text-[9px] font-medium uppercase tracking-wide text-sky-200">
+                        Suggested
+                      </span>
+                    </div>
+                    <div className="mt-1 flex flex-wrap items-center gap-2">
+                      <LevelBadge level={creator.level} rank={creator.rank} compact />
+                      <span className="text-[11px] text-slate-500">
+                        {Number(creator.followers_count || 0).toLocaleString()} followers
+                        {creator.uploads_count ? ` · ${Number(creator.uploads_count).toLocaleString()} uploads` : ''}
+                      </span>
+                    </div>
+                  </a>
+
+                  {/* Follow button */}
+                  <button
+                    type="button"
+                    onClick={() => handleFollow(creator)}
+                    disabled={busyId === creator.id || !creator.username}
+                    className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-400/18 disabled:cursor-not-allowed disabled:opacity-60"
+                  >
+                    <i className={`fa-solid ${busyId === creator.id ? 'fa-circle-notch fa-spin' : 'fa-user-plus'} text-[10px]`} />
+                    Follow
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
     </section>
   )
 }

resources/js/dashboard/components/TrendingArtworks.jsx

@@ -1,9 +1,37 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import LevelBadge from '../../components/xp/LevelBadge'
 
+function ScrollBtn({ direction, onClick }) {
+  const isLeft = direction === 'left'
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={`Scroll ${direction}`}
+      className={[
+        'absolute top-1/2 z-30 -translate-y-1/2 hidden lg:flex h-9 w-9 items-center justify-center',
+        'rounded-full bg-black/60 text-white ring-1 ring-white/12 backdrop-blur-md',
+        'transition hover:bg-black/80 hover:ring-white/20',
+        isLeft ? 'left-1' : 'right-1',
+      ].join(' ')}
+    >
+      <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.2}>
+        {isLeft
+          ? <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+          : <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />}
+      </svg>
+    </button>
+  )
+}
+
 export default function TrendingArtworks() {
   const [items, setItems] = useState([])
   const [loading, setLoading] = useState(true)
+  const scrollRef = useRef(null)
+  const touchStartRef = useRef({ x: 0, y: 0 })
+  const draggedRef = useRef(false)
+  const suppressClickRef = useRef(false)
+  const suppressTimerRef = useRef(null)
 
   useEffect(() => {
     let cancelled = false
@@ -28,51 +56,111 @@ export default function TrendingArtworks() {
     }
   }, [])
 
+  const scroll = useCallback((dir) => {
+    const el = scrollRef.current
+    if (!el) return
+    el.scrollBy({ left: dir === 'left' ? -320 : 320, behavior: 'smooth' })
+  }, [])
+
+  const onTouchStart = useCallback((e) => {
+    if (!e.touches?.length) return
+    touchStartRef.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+    draggedRef.current = false
+  }, [])
+
+  const onTouchMove = useCallback((e) => {
+    if (!e.touches?.length) return
+    const dx = Math.abs(e.touches[0].clientX - touchStartRef.current.x)
+    const dy = Math.abs(e.touches[0].clientY - touchStartRef.current.y)
+    if (dx > 10 && dx > dy) draggedRef.current = true
+  }, [])
+
+  const onTouchEnd = useCallback(() => {
+    if (!draggedRef.current) return
+    suppressClickRef.current = true
+    clearTimeout(suppressTimerRef.current)
+    suppressTimerRef.current = setTimeout(() => { suppressClickRef.current = false }, 260)
+  }, [])
+
+  const onClickCapture = useCallback((e) => {
+    if (!suppressClickRef.current) return
+    const link = e.target?.closest?.('a')
+    if (link) { e.preventDefault(); e.stopPropagation() }
+  }, [])
+
   return (
-    <section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
-      <div className="mb-4 flex items-center justify-between">
-        <h2 className="text-xl font-semibold">Trending Artworks</h2>
-        <a className="text-xs text-cyan-300 hover:text-cyan-200" href="/discover/trending">
+    <section className="rounded-[28px] border border-white/10 bg-[#08111c]/90 shadow-2xl shadow-black/20">
+      <div className="flex items-center justify-between px-5 pt-5 pb-4 sm:px-6 sm:pt-6">
+        <div>
+          <p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Discover</p>
+          <h2 className="mt-1 text-xl font-semibold text-white">Trending Artworks</h2>
+        </div>
+        <a
+          className="inline-flex items-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15"
+          href="/discover/trending"
+        >
           Explore more
+          <i className="fa-solid fa-arrow-right text-[10px]" />
         </a>
       </div>
 
-      {loading ? <p className="text-sm text-gray-400">Loading trending artworks...</p> : null}
+      {loading ? (
+        <div className="flex gap-3 overflow-hidden px-5 pb-5 sm:px-6 sm:pb-6">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="h-52 w-36 shrink-0 animate-pulse rounded-2xl bg-white/5" />
+          ))}
+        </div>
+      ) : null}
 
       {!loading && items.length === 0 ? (
-        <p className="text-sm text-gray-400">No trending artworks available.</p>
+        <p className="px-5 pb-5 text-sm text-slate-400 sm:px-6 sm:pb-6">No trending artworks available.</p>
       ) : null}
 
       {!loading && items.length > 0 ? (
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-          {items.map((item) => (
-            <a
-              key={item.id}
-              href={item.url}
-              className="group overflow-hidden rounded-xl border border-gray-700 bg-gray-900/70 transition hover:scale-[1.02] hover:border-cyan-500/40"
-            >
-              <img
-                src={item.thumbnail || '/images/placeholder.jpg'}
-                alt={item.title}
-                loading="lazy"
-                className="h-28 w-full object-cover sm:h-32"
-              />
-              <div className="p-2">
-                <p className="line-clamp-1 text-sm font-semibold text-white">{item.title}</p>
-                {item.creator ? (
-                  <div className="mt-1 flex items-center justify-between gap-2">
-                    <span className="truncate text-xs text-gray-400">
-                      {item.creator.username ? `@${item.creator.username}` : item.creator.name}
-                    </span>
-                    <LevelBadge level={item.creator.level} rank={item.creator.rank} compact />
+        <div className="relative pb-5 sm:pb-6" data-nav-swipe-ignore="1">
+          <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-10 bg-gradient-to-r from-[#08111c] to-transparent" />
+          <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-10 bg-gradient-to-l from-[#08111c] to-transparent" />
+          <ScrollBtn direction="left" onClick={() => scroll('left')} />
+          <ScrollBtn direction="right" onClick={() => scroll('right')} />
+          <div
+            ref={scrollRef}
+            onTouchStart={onTouchStart}
+            onTouchMove={onTouchMove}
+            onTouchEnd={onTouchEnd}
+            onClickCapture={onClickCapture}
+            className="flex gap-3 overflow-x-auto px-5 snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [&::-webkit-scrollbar]:hidden sm:px-6"
+          >
+            {items.map((item) => (
+              <a
+                key={item.id}
+                href={item.url}
+                className="group relative w-36 shrink-0 snap-start overflow-hidden rounded-2xl ring-1 ring-white/8 transition hover:-translate-y-0.5 hover:ring-sky-400/25 sm:w-40"
+              >
+                <div className="relative aspect-[3/4] bg-neutral-900">
+                  <div className="pointer-events-none absolute inset-0 z-10 bg-gradient-to-br from-white/8 via-transparent to-transparent" />
+                  <img
+                    src={item.thumbnail || '/images/placeholder.jpg'}
+                    alt={item.title}
+                    loading="lazy"
+                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
+                  />
+                  <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/85 via-black/55 to-transparent p-3">
+                    <p className="line-clamp-2 text-xs font-semibold leading-snug text-white">{item.title}</p>
+                    {item.creator ? (
+                      <>
+                        <p className="mt-1 truncate text-[11px] text-white/65">
+                          {item.creator.username ? `@${item.creator.username}` : item.creator.name}
+                        </p>
+                        <div className="mt-1.5">
+                          <LevelBadge level={item.creator.level} rank={item.creator.rank} compact />
+                        </div>
+                      </>
+                    ) : null}
                   </div>
-                ) : null}
-                <p className="mt-1 text-xs text-gray-400">
-                  {item.likes} likes • {item.views} views
-                </p>
-              </div>
-            </a>
-          ))}
+                </div>
+              </a>
+            ))}
+          </div>
         </div>
       ) : null}
     </section>