feat: Nova homepage, profile redesign, and legacy view system overhaul

Homepage - Add HomepageService with hero, trending (award-weighted), fresh uploads, popular tags, creator spotlight (weekly uploads ranking), and news sections - Add React components: HomePage, HomeHero, HomeTrending, HomeFresh, HomeTags, HomeCreators, HomeNews (lazy-loaded below the fold) - Wire home.blade.php with JSON props, SEO meta, JSON-LD, and hero preload - Add HomePage.jsx to vite.config.js inputs Profile page - Hero banner with random user artwork as background + dark gradient overlay - Favourites section uses real Artwork models + <x-artwork-card> for CDN URLs - Newest artworks grid: gallery-grid → grid grid-cols-2 gap-4 Edit Profile page (user.blade.php) - Add hero banner (featured wallpaper/photography via artwork_features, content_type_id IN [2,3]) sourced in UserController - Remove bg-deep from outer wrapper; card backgrounds: bg-panel → bg-nova-800 - Remove stray AI-generated tag fragment from template Author profile links - Fix all /@username routes in: HomepageService, MonthlyCommentatorsController, LatestCommentsController, MyBuddiesController and corresponding blade views Legacy view namespace - Register View::addNamespace('legacy', resource_path('views/_legacy')) in AppServiceProvider::boot() - Convert all view('legacy.x') and @include('legacy.x') calls to legacy::x - Migrate legacy views to resources/views/_legacy/ with namespace support
2026-02-26 10:25:35 +01:00
parent d3fd32b004
commit d0aefc5ddc
78 changed files with 1046 additions and 221 deletions
--- a/resources/js/Pages/Home/HomeCreators.jsx
+++ b/resources/js/Pages/Home/HomeCreators.jsx
@@ -0,0 +1,72 @@
+import React from 'react'
+
+const AVATAR_FALLBACK = 'https://files.skinbase.org/avatars/default.webp'
+
+function CreatorCard({ creator }) {
+  return (
+    <article className="group relative flex flex-col items-center gap-3 overflow-hidden rounded-xl bg-panel p-5 shadow-sm text-center transition hover:ring-1 hover:ring-nova-500">
+      {/* Background artwork thumbnail */}
+      {creator.bg_thumb && (
+        <>
+          <img
+            src={creator.bg_thumb}
+            alt=""
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-50 transition duration-500 group-hover:opacity-20 group-hover:scale-105"
+            loading="lazy"
+            decoding="async"
+          />
+          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-panel via-panel/80 to-panel/60" />
+        </>
+      )}
+
+      {/* Content */}
+      <a href={creator.url} className="relative block">
+        <img
+          src={creator.avatar}
+          alt={creator.name}
+          className="mx-auto h-16 w-16 rounded-full object-cover ring-4 bg-nova-800/80 ring-nova-800"
+          loading="lazy"
+          decoding="async"
+          onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
+        />
+        <h3 className="mt-2 text-sm font-semibold text-white">{creator.name}</h3>
+      </a>
+      <div className="relative flex flex-wrap justify-center gap-3 text-xs text-soft">
+        <span title="Total uploads">📁 {creator.uploads}</span>
+        {creator.weekly_uploads > 0 && (
+          <span title="Uploads this week" className="text-accent font-semibold">↑{creator.weekly_uploads} this week</span>
+        )}
+        <span title="Views">👁 {creator.views.toLocaleString()}</span>
+        {creator.awards > 0 && <span title="Awards">🏆 {creator.awards}</span>}
+      </div>
+      <a
+        href={creator.url}
+        className="relative mt-1 rounded-lg bg-nova-700 px-4 py-1.5 text-xs font-semibold text-white transition hover:bg-nova-600"
+      >
+        View Profile
+      </a>
+    </article>
+  )
+}
+
+export default function HomeCreators({ creators }) {
+  if (!Array.isArray(creators) || creators.length === 0) return null
+
+  return (
+    <section className="mt-14 px-4 sm:px-6 lg:px-8">
+      <div className="mb-5 flex items-center justify-between">
+        <h2 className="text-xl font-bold text-white">👤 Creator Spotlight</h2>
+        <a href="/members" className="text-sm text-nova-300 hover:text-white transition">
+          All creators →
+        </a>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
+        {creators.map((c) => (
+          <CreatorCard key={c.id} creator={c} />
+        ))}
+      </div>
+    </section>
+  )
+}
--- a/resources/js/Pages/Home/HomeFresh.jsx
+++ b/resources/js/Pages/Home/HomeFresh.jsx
@@ -0,0 +1,73 @@
+import React from 'react'
+
+const FALLBACK        = 'https://files.skinbase.org/default/missing_md.webp'
+const AVATAR_FALLBACK = 'https://files.skinbase.org/avatars/default.webp'
+
+function FreshCard({ item }) {
+  const username = item.author_username ? `@${item.author_username}` : null
+
+  return (
+    <article>
+      <a
+        href={item.url}
+        className="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
+      >
+        <div className="relative aspect-video overflow-hidden bg-neutral-900">
+          {/* Gloss sheen */}
+          <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent pointer-events-none z-10" />
+
+          <img
+            src={item.thumb || FALLBACK}
+            alt={item.title}
+            className="h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04]"
+            loading="lazy"
+            decoding="async"
+            onError={(e) => { e.currentTarget.src = FALLBACK }}
+          />
+
+          {/* Top-right View badge */}
+          <div className="absolute right-3 top-3 z-30 flex items-center gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+            <span className="inline-flex items-center rounded-md bg-black/60 px-2 py-1 text-[11px] font-medium text-white ring-1 ring-white/10">View</span>
+          </div>
+
+          {/* Bottom info overlay — always visible on mobile, hover-only on md+ */}
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
+            <div className="truncate text-sm font-semibold text-white">{item.title}</div>
+            <div className="mt-1 flex items-center gap-2 text-xs text-white/80">
+              <img
+                src={item.author_avatar || AVATAR_FALLBACK}
+                alt={item.author}
+                className="w-6 h-6 rounded-full object-cover shrink-0"
+                onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
+              />
+              <span className="truncate">{item.author}</span>
+              {username && <span className="text-white/50 shrink-0">{username}</span>}
+            </div>
+          </div>
+        </div>
+        <span className="sr-only">{item.title} by {item.author}</span>
+      </a>
+    </article>
+  )
+}
+
+export default function HomeFresh({ items }) {
+  if (!Array.isArray(items) || items.length === 0) return null
+
+  return (
+    <section className="mt-14 px-4 sm:px-6 lg:px-8">
+      <div className="mb-5 flex items-center justify-between">
+        <h2 className="text-xl font-bold text-white">🆕 Fresh Uploads</h2>
+        <a href="/browse" className="text-sm text-nova-300 hover:text-white transition">
+          See all →
+        </a>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-6">
+        {items.map((item) => (
+          <FreshCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  )
+}
--- a/resources/js/Pages/Home/HomeHero.jsx
+++ b/resources/js/Pages/Home/HomeHero.jsx
@@ -0,0 +1,77 @@
+import React from 'react'
+
+const FALLBACK = 'https://files.skinbase.org/default/missing_lg.webp'
+
+export default function HomeHero({ artwork }) {
+  if (!artwork) {
+    return (
+      <section className="relative flex min-h-[27vw] max-h-[300px] w-full items-end overflow-hidden bg-nova-900">
+        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/60 to-transparent" />
+        <div className="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
+          <h1 className="text-2xl font-bold tracking-tight text-white sm:text-4xl">
+            Discover Digital Art
+          </h1>
+          <p className="mt-2 max-w-xl text-sm text-soft">
+            Wallpapers, skins &amp; digital creations from a global community.
+          </p>
+          <div className="mt-4 flex flex-wrap gap-3">
+            <a href="/browse"  className="rounded-xl bg-accent px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:brightness-110">Explore</a>
+            <a href="/upload"  className="rounded-xl bg-nova-700 px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:bg-nova-600">Upload</a>
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  const src = artwork.thumb_lg || artwork.thumb || FALLBACK
+
+  return (
+    <section className="group relative flex min-h-[27vw] max-h-[300px] w-full items-end overflow-hidden bg-nova-900">
+      {/* Background image */}
+      <img
+        src={src}
+        alt={artwork.title}
+        className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
+        fetchpriority="high"
+        decoding="async"
+        onError={(e) => { e.currentTarget.src = FALLBACK }}
+      />
+
+      {/* Gradient overlay */}
+      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/55 to-transparent" />
+
+      {/* Content */}
+      <div className="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
+        <p className="mb-1.5 text-xs font-semibold uppercase tracking-widest text-accent">
+          Featured Artwork
+        </p>
+        <h1 className="text-2xl font-bold tracking-tight text-white drop-shadow sm:text-4xl lg:text-5xl">
+          {artwork.title}
+        </h1>
+        <p className="mt-1.5 text-sm text-soft">
+          by <a href={artwork.url} className="text-nova-200 hover:text-white transition">{artwork.author}</a>
+        </p>
+        <div className="mt-4 flex flex-wrap gap-3">
+          <a
+            href="/browse"
+            className="rounded-xl bg-accent px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:brightness-110"
+          >
+            Explore
+          </a>
+          <a
+            href="/upload"
+            className="rounded-xl bg-nova-700 px-5 py-2 text-sm font-semibold text-white shadow-lg transition hover:bg-nova-600"
+          >
+            Upload
+          </a>
+          <a
+            href={artwork.url}
+            className="rounded-xl border border-nova-600 px-5 py-2 text-sm font-semibold text-nova-200 shadow transition hover:border-nova-400 hover:text-white"
+          >
+            View Artwork
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}
--- a/resources/js/Pages/Home/HomeNews.jsx
+++ b/resources/js/Pages/Home/HomeNews.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+
+function formatDate(dateStr) {
+  if (!dateStr) return ''
+  try {
+    return new Date(dateStr).toLocaleDateString('en-US', {
+      year: 'numeric', month: 'short', day: 'numeric',
+    })
+  } catch {
+    return ''
+  }
+}
+
+export default function HomeNews({ items }) {
+  if (!Array.isArray(items) || items.length === 0) return null
+
+  return (
+    <section className="mt-14 px-4 sm:px-6 lg:px-8">
+      <div className="mb-5 flex items-center justify-between">
+        <h2 className="text-xl font-bold text-white">📰 News &amp; Updates</h2>
+        <a href="/forum/news" className="text-sm text-nova-300 hover:text-white transition">
+          All news →
+        </a>
+      </div>
+
+      <div className="divide-y divide-nova-800 rounded-xl bg-panel overflow-hidden">
+        {items.map((item) => (
+          <a
+            key={item.id}
+            href={item.url}
+            className="flex items-start justify-between gap-4 px-5 py-4 transition hover:bg-nova-800"
+          >
+            <span className="text-sm font-medium text-white line-clamp-2">{item.title}</span>
+            {item.date && (
+              <span className="flex-shrink-0 text-xs text-soft">{formatDate(item.date)}</span>
+            )}
+          </a>
+        ))}
+      </div>
+    </section>
+  )
+}
--- a/resources/js/Pages/Home/HomePage.jsx
+++ b/resources/js/Pages/Home/HomePage.jsx
@@ -0,0 +1,63 @@
+import React, { lazy, Suspense } from 'react'
+import { createRoot } from 'react-dom/client'
+
+// Sub-section components — lazy-loaded so only the hero blocks the initial bundle
+import HomeHero from './HomeHero'
+
+const HomeTrending  = lazy(() => import('./HomeTrending'))
+const HomeFresh     = lazy(() => import('./HomeFresh'))
+const HomeTags      = lazy(() => import('./HomeTags'))
+const HomeCreators  = lazy(() => import('./HomeCreators'))
+const HomeNews      = lazy(() => import('./HomeNews'))
+
+function SectionFallback() {
+  return (
+    <div className="mt-14 h-48 animate-pulse rounded-xl bg-nova-800 mx-4 sm:mx-6 lg:mx-8" />
+  )
+}
+
+function HomePage({ hero, trending, fresh, tags, creators, news }) {
+  return (
+    <div className="pb-24">
+      {/* Hero — above-fold, eager */}
+      <HomeHero artwork={hero} />
+
+      {/* Below-fold sections — lazy */}
+      <Suspense fallback={<SectionFallback />}>
+        <HomeTrending items={trending} />
+      </Suspense>
+
+      <Suspense fallback={<SectionFallback />}>
+        <HomeFresh items={fresh} />
+      </Suspense>
+
+      <Suspense fallback={<SectionFallback />}>
+        <HomeTags tags={tags} />
+      </Suspense>
+
+      <Suspense fallback={<SectionFallback />}>
+        <HomeCreators creators={creators} />
+      </Suspense>
+
+      <Suspense fallback={<SectionFallback />}>
+        <HomeNews items={news} />
+      </Suspense>
+    </div>
+  )
+}
+
+// Auto-mount when the Blade view provides #homepage-root
+const mountEl = document.getElementById('homepage-root')
+if (mountEl) {
+  let props = {}
+  try {
+    const propsEl = document.getElementById('homepage-props')
+    props = propsEl ? JSON.parse(propsEl.textContent || '{}') : {}
+  } catch {
+    props = {}
+  }
+
+  createRoot(mountEl).render(<HomePage {...props} />)
+}
+
+export default HomePage
--- a/resources/js/Pages/Home/HomeTags.jsx
+++ b/resources/js/Pages/Home/HomeTags.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+
+export default function HomeTags({ tags }) {
+  if (!Array.isArray(tags) || tags.length === 0) return null
+
+  return (
+    <section className="mt-14 px-4 sm:px-6 lg:px-8">
+      <h2 className="mb-5 text-xl font-bold text-white">🏷️ Popular Tags</h2>
+
+      <div className="flex flex-wrap gap-2">
+        {tags.map((tag) => (
+          <a
+            key={tag.id}
+            href={`/tag/${tag.slug}`}
+            className="rounded-full bg-nova-800 px-4 py-1.5 text-sm font-medium text-nova-200 transition hover:bg-nova-700 hover:text-white"
+          >
+            {tag.name}
+            {tag.count > 0 && (
+              <span className="ml-1.5 text-xs text-soft">{tag.count.toLocaleString()}</span>
+            )}
+          </a>
+        ))}
+      </div>
+    </section>
+  )
+}
--- a/resources/js/Pages/Home/HomeTrending.jsx
+++ b/resources/js/Pages/Home/HomeTrending.jsx
@@ -0,0 +1,75 @@
+import React from 'react'
+
+const FALLBACK     = 'https://files.skinbase.org/default/missing_md.webp'
+const AVATAR_FALLBACK = 'https://files.skinbase.org/avatars/default.webp'
+
+function ArtCard({ item }) {
+  const username = item.author_username ? `@${item.author_username}` : null
+
+  return (
+    <article className="min-w-[72%] snap-start sm:min-w-[44%] lg:min-w-0">
+      <a
+        href={item.url}
+        className="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
+      >
+        <div className="relative aspect-video overflow-hidden bg-neutral-900">
+          {/* Gloss sheen */}
+          <div className="absolute inset-0 bg-gradient-to-br from-white/10 via-white/5 to-transparent pointer-events-none z-10" />
+
+          <img
+            src={item.thumb || FALLBACK}
+            alt={item.title}
+            className="h-full w-full object-cover transition-[transform,filter] duration-300 ease-out group-hover:scale-[1.04]"
+            loading="lazy"
+            decoding="async"
+            onError={(e) => { e.currentTarget.src = FALLBACK }}
+          />
+
+          {/* Top-right View badge */}
+          <div className="absolute right-3 top-3 z-30 flex items-center gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+            <span className="inline-flex items-center rounded-md bg-black/60 px-2 py-1 text-[11px] font-medium text-white ring-1 ring-white/10">View</span>
+          </div>
+
+          {/* Bottom info overlay — always visible on mobile, hover-only on md+ */}
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
+            <div className="truncate text-sm font-semibold text-white">{item.title}</div>
+            <div className="mt-1 flex items-center gap-2 text-xs text-white/80">
+              <img
+                src={item.author_avatar || AVATAR_FALLBACK}
+                alt={item.author}
+                className="w-6 h-6 rounded-full object-cover shrink-0"
+                onError={(e) => { e.currentTarget.src = AVATAR_FALLBACK }}
+              />
+              <span className="truncate">{item.author}</span>
+              {username && <span className="text-white/50 shrink-0">{username}</span>}
+            </div>
+          </div>
+        </div>
+        <span className="sr-only">{item.title} by {item.author}</span>
+      </a>
+    </article>
+  )
+}
+
+export default function HomeTrending({ items }) {
+  if (!Array.isArray(items) || items.length === 0) return null
+
+  return (
+    <section className="mt-14 px-4 sm:px-6 lg:px-8">
+      <div className="mb-5 flex items-center justify-between">
+        <h2 className="text-xl font-bold text-white">
+          🔥 Trending This Week
+        </h2>
+        <a href="/browse" className="text-sm text-nova-300 hover:text-white transition">
+          See all →
+        </a>
+      </div>
+
+      <div className="flex snap-x snap-mandatory gap-4 overflow-x-auto pb-3 lg:grid lg:grid-cols-4 xl:grid-cols-6 lg:overflow-visible">
+        {items.map((item) => (
+          <ArtCard key={item.id} item={item} />
+        ))}
+      </div>
+    </section>
+  )
+}