feat(artwork): sidebar layout, icon actions, original download URL fix

- ArtworkDownloadController: fix resolveDownloadUrl() to use correct CDN
  path: original/{h1}/{h2}/{hash}.{file_ext} (was wrong originals/h1/h2/h3/orig.webp)
  Wrap incrementDownloads() in try/catch so Redis failure can't break the response

- ArtworkPage: move ArtworkAuthor from left column to right sidebar
  Sidebar now stacks: Author → Actions → Awards (sticky top-24)
  Mobile block follows same order above main content

- ArtworkActions: replace four stacked text buttons with a compact 4-col icon grid
  Like (heart, rose when active), Save (star, amber when active),
  Share (network icon), Report (flag icon, red on hover)
  Download remains full-width orange CTA

- ArtworkAuthor: add icons to Profile (person) and Follow buttons
  Follow shows circle-check icon; Following state shows user-plus icon

app/Http/Controllers/Api/ArtworkDownloadController.php

@@ -11,6 +11,7 @@ use App\Services\ThumbnailPresenter;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
 
 /**
  * POST /api/art/{id}/download
@@ -48,12 +49,26 @@ final class ArtworkDownloadController extends Controller
         $this->recordDownload($request, $artwork);
 
         // Increment counters — deferred via Redis when available.
+        try {
             $this->stats->incrementDownloads((int) $artwork->id, 1, defer: true);
+        } catch (\Throwable) {
+            // Stats failure must never interrupt the download.
+        }
 
         // Resolve the highest-resolution download URL available.
         $url = $this->resolveDownloadUrl($artwork);
 
-        return response()->json(['ok' => true, 'url' => $url]);
+        // Build a user-friendly download filename: "title-slug.file_ext"
+        $ext      = $artwork->file_ext ?: $artwork->thumb_ext ?: 'webp';
+        $slug     = Str::slug((string) ($artwork->slug ?: $artwork->title)) ?: (string) $artwork->id;
+        $filename = $slug . '.' . $ext;
+
+        return response()->json([
+            'ok'       => true,
+            'url'      => $url,
+            'filename' => $filename,
+            'size'     => (int) ($artwork->file_size ?? 0),
+        ]);
     }
 
     /**
@@ -80,17 +95,34 @@ final class ArtworkDownloadController extends Controller
     }
 
     /**
-     * Resolve the best available download URL: XL → LG → MD.
+     * Resolve the original full-resolution CDN URL.
-     * Returns an empty string if no thumbnail can be resolved.
+     *
+     * Originals are stored at: {cdn}/original/{h1}/{h2}/{hash}.{file_ext}
+     * h1 = first 2 chars of hash, h2 = next 2 chars, filename = full hash + file_ext.
+     * Falls back to XL → LG → MD thumbnail when hash is unavailable.
      */
     private function resolveDownloadUrl(Artwork $artwork): string
     {
+        $hash = $artwork->hash ?? null;
+        $ext  = ltrim((string) ($artwork->file_ext ?: $artwork->thumb_ext ?: 'webp'), '.');
+
+        if (!empty($hash)) {
+            $h   = strtolower(preg_replace('/[^a-f0-9]/', '', $hash));
+            $h1  = substr($h, 0, 2);
+            $h2  = substr($h, 2, 2);
+            $cdn = rtrim((string) config('cdn.files_url', 'https://files.skinbase.org'), '/');
+
+            return sprintf('%s/original/%s/%s/%s.%s', $cdn, $h1, $h2, $h, $ext);
+        }
+
+        // Fallback: best available thumbnail size
         foreach (['xl', 'lg', 'md'] as $size) {
             $thumb = ThumbnailPresenter::present($artwork, $size);
-            if (! empty($thumb['url'])) {
+            if (!empty($thumb['url'])) {
                 return (string) $thumb['url'];
             }
         }
+
         return '';
     }
 }

resources/js/Pages/ArtworkPage.jsx

@@ -67,17 +67,15 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
           onNext={navState.navigateNext}
         />
 
-        <div className="mt-6 lg:hidden">
+        <div className="mt-6 space-y-4 lg:hidden">
+          <ArtworkAuthor artwork={artwork} presentSq={presentSq} />
           <ArtworkActions artwork={artwork} canonicalUrl={canonicalUrl} mobilePriority />
-          <div className="mt-4">
           <ArtworkAwards artwork={artwork} initialAwards={initialAwards} isAuthenticated={isAuthenticated} />
         </div>
-        </div>
 
         <div className="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-3">
           <div className="space-y-6 lg:col-span-2">
             <ArtworkMeta artwork={artwork} />
-            <ArtworkAuthor artwork={artwork} presentSq={presentSq} />
             <ArtworkStats artwork={artwork} />
             <ArtworkTags artwork={artwork} />
             <ArtworkDescription artwork={artwork} />
@@ -91,12 +89,11 @@ function ArtworkPage({ artwork: initialArtwork, related: initialRelated, present
           </div>
 
           <aside className="hidden space-y-6 lg:block">
-            <div className="sticky top-24">
+            <div className="sticky top-24 space-y-4">
+              <ArtworkAuthor artwork={artwork} presentSq={presentSq} />
               <ArtworkActions artwork={artwork} canonicalUrl={canonicalUrl} />
-              <div className="mt-4">
               <ArtworkAwards artwork={artwork} initialAwards={initialAwards} isAuthenticated={isAuthenticated} />
             </div>
-            </div>
           </aside>
         </div>
 

resources/js/Pages/Home/HomePage.jsx

@@ -86,14 +86,14 @@ function AuthHomePage(props) {
 
   return (
     <>
-      {/* P0. Welcome/status row */}
+      {/* 1. Hero — flush to top */}
+      <HomeHero artwork={hero} isLoggedIn />
+
+      {/* P0. Welcome/status row — below hero so featured image sits at 0px */}
       <Suspense fallback={null}>
         <HomeWelcomeRow user_data={user_data} />
       </Suspense>
 
-      {/* 1. Hero */}
-      <HomeHero artwork={hero} isLoggedIn />
-
       {/* P2. From Creators You Follow */}
       <Suspense fallback={<SectionFallback />}>
         <HomeFromFollowing items={from_following} />

resources/js/components/artwork/ArtworkActions.jsx

@@ -4,7 +4,9 @@ export default function ArtworkActions({ artwork, canonicalUrl, mobilePriority =
   const [liked, setLiked] = useState(Boolean(artwork?.viewer?.is_liked))
   const [favorited, setFavorited] = useState(Boolean(artwork?.viewer?.is_favorited))
   const [reporting, setReporting] = useState(false)
-  const downloadUrl = artwork?.thumbs?.xl?.url || artwork?.thumbs?.lg?.url || artwork?.file?.url || '#'
+  const [downloading, setDownloading] = useState(false)
+  // Fallback URL used only if the API call fails entirely
+  const fallbackUrl = artwork?.thumbs?.xl?.url || artwork?.thumbs?.lg?.url || artwork?.file?.url || '#'
   const shareUrl = canonicalUrl || artwork?.canonical_url || (typeof window !== 'undefined' ? window.location.href : '#')
   const csrfToken = typeof document !== 'undefined'
     ? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
@@ -23,14 +25,40 @@ export default function ArtworkActions({ artwork, canonicalUrl, mobilePriority =
     }).catch(() => {})
   }, [artwork?.id]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Fire-and-forget download tracking — does not interrupt the native download.
+  /**
-  const trackDownload = () => {
+   * Async download handler:
-    if (!artwork?.id) return
+   * 1. POST /api/art/{id}/download  → records the event, returns { url, filename }
-    fetch(`/api/art/${artwork.id}/download`, {
+   * 2. Programmatically clicks a hidden <a download="filename"> to trigger the save dialog
+   * 3. Falls back to the pre-resolved fallbackUrl if the API is unreachable
+   */
+  const handleDownload = async (e) => {
+    e.preventDefault()
+    if (downloading || !artwork?.id) return
+    setDownloading(true)
+    try {
+      const res = await fetch(`/api/art/${artwork.id}/download`, {
         method: 'POST',
         headers: { 'X-CSRF-TOKEN': csrfToken || '', 'Content-Type': 'application/json' },
         credentials: 'same-origin',
-    }).catch(() => {})
+      })
+      const data = res.ok ? await res.json() : null
+      const url      = data?.url      || fallbackUrl
+      const filename = data?.filename || ''
+
+      // Trigger browser save-dialog with the correct filename
+      const a = document.createElement('a')
+      a.href = url
+      a.download = filename
+      a.rel = 'noopener noreferrer'
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+    } catch {
+      // API unreachable — open the best available URL directly
+      window.open(fallbackUrl, '_blank', 'noopener,noreferrer')
+    } finally {
+      setDownloading(false)
+    }
   }
 
   const postInteraction = async (url, body) => {
@@ -102,58 +130,104 @@ export default function ArtworkActions({ artwork, canonicalUrl, mobilePriority =
     <div className="rounded-xl border border-nova-700 bg-panel p-5 shadow-lg shadow-deep/30">
       <h2 className="text-xs font-semibold uppercase tracking-wide text-soft">Actions</h2>
       <div className="mt-4 flex flex-col gap-3">
-        <a
+        {/* Download — full-width primary CTA */}
-          href={downloadUrl}
+        <button
-          className="inline-flex min-h-11 w-full items-center justify-center rounded-lg bg-accent px-4 py-3 text-sm font-semibold text-deep hover:brightness-110"
+          type="button"
-          onClick={trackDownload}
+          className="inline-flex min-h-11 w-full items-center justify-center gap-2 rounded-lg bg-accent px-4 py-3 text-sm font-semibold text-deep transition hover:brightness-110 disabled:opacity-60 disabled:cursor-wait"
-          download
+          onClick={handleDownload}
+          disabled={downloading}
         >
+          {downloading ? (
+            <>
+              <svg className="h-4 w-4 animate-spin shrink-0" viewBox="0 0 24 24" fill="none">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 100 16v-4l-3 3 3 3v-4a8 8 0 01-8-8z" />
+              </svg>
+              Downloading…
+            </>
+          ) : (
+            <>
+              <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M12 4v12m0 0l-4-4m4 4l4-4" />
+              </svg>
               Download
-        </a>
+            </>
+          )}
+        </button>
 
+        {/* Secondary actions — icon row */}
+        <div className="grid grid-cols-4 gap-2">
+          {/* Like */}
           <button
             type="button"
-          className="inline-flex min-h-11 w-full items-center justify-center rounded-lg border border-nova-600 px-4 py-3 text-sm text-white hover:bg-nova-800"
+            title={liked ? 'Unlike' : 'Like'}
             onClick={onToggleLike}
+            className={`flex flex-col items-center justify-center gap-1 rounded-lg border px-2 py-3 text-xs font-medium transition
+              ${liked
+                ? 'border-rose-500/60 bg-rose-500/10 text-rose-400 hover:bg-rose-500/20'
+                : 'border-nova-600 text-soft hover:bg-nova-800 hover:text-white'}`}
           >
-          {liked ? 'Liked' : 'Like'}
+            <svg className="h-5 w-5 shrink-0" fill={liked ? 'currentColor' : 'none'} viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4.318 6.318a4.5 4.5 0 016.364 0L12 7.636l1.318-1.318a4.5 4.5 0 116.364 6.364L12 20.364l-7.682-7.682a4.5 4.5 0 010-6.364z" />
+            </svg>
+            <span>{liked ? 'Liked' : 'Like'}</span>
           </button>
 
+          {/* Favorite */}
           <button
             type="button"
-          className="inline-flex min-h-11 w-full items-center justify-center rounded-lg border border-nova-600 px-4 py-3 text-sm text-white hover:bg-nova-800"
+            title={favorited ? 'Remove from favorites' : 'Favorite'}
             onClick={onToggleFavorite}
+            className={`flex flex-col items-center justify-center gap-1 rounded-lg border px-2 py-3 text-xs font-medium transition
+              ${favorited
+                ? 'border-amber-500/60 bg-amber-500/10 text-amber-400 hover:bg-amber-500/20'
+                : 'border-nova-600 text-soft hover:bg-nova-800 hover:text-white'}`}
           >
-          {favorited ? 'Saved' : 'Favorite'}
+            <svg className="h-5 w-5 shrink-0" fill={favorited ? 'currentColor' : 'none'} viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+            </svg>
+            <span>{favorited ? 'Saved' : 'Save'}</span>
           </button>
 
+          {/* Share */}
           <button
             type="button"
-          className="inline-flex min-h-11 w-full items-center justify-center rounded-lg border border-nova-600 px-4 py-3 text-sm text-white hover:bg-nova-800"
+            title="Share"
             onClick={onShare}
+            className="flex flex-col items-center justify-center gap-1 rounded-lg border border-nova-600 px-2 py-3 text-xs font-medium text-soft transition hover:bg-nova-800 hover:text-white"
           >
-          Share
+            <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+            </svg>
+            <span>Share</span>
           </button>
 
+          {/* Report */}
           <button
             type="button"
-          className="inline-flex min-h-11 w-full items-center justify-center rounded-lg border border-nova-600 px-4 py-3 text-sm text-white hover:bg-nova-800"
+            title="Report"
             onClick={onReport}
+            disabled={reporting}
+            className="flex flex-col items-center justify-center gap-1 rounded-lg border border-nova-600 px-2 py-3 text-xs font-medium text-soft transition hover:border-red-500/50 hover:bg-red-500/10 hover:text-red-400 disabled:opacity-50 disabled:cursor-wait"
           >
-          {reporting ? 'Reporting…' : 'Report'}
+            <svg className="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5" />
+            </svg>
+            <span>{reporting ? '…' : 'Report'}</span>
           </button>
         </div>
+      </div>
 
       {mobilePriority && (
         <div className="pointer-events-none fixed inset-x-0 bottom-0 z-50 border-t border-nova-700 bg-panel/95 p-3 backdrop-blur lg:hidden">
-          <a
+          <button
-            href={downloadUrl}
+            type="button"
-            download
+            onClick={handleDownload}
-            onClick={trackDownload}
+            disabled={downloading}
-            className="pointer-events-auto inline-flex min-h-12 w-full items-center justify-center rounded-lg bg-accent px-4 py-3 text-sm font-semibold text-deep hover:brightness-110"
+            className="pointer-events-auto inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-lg bg-accent px-4 py-3 text-sm font-semibold text-deep transition hover:brightness-110 disabled:opacity-60 disabled:cursor-wait"
           >
-            Download
+            {downloading ? 'Downloading…' : 'Download'}
-          </a>
+          </button>
         </div>
       )}
     </div>

resources/js/components/artwork/ArtworkAuthor.jsx

@@ -66,16 +66,33 @@ export default function ArtworkAuthor({ artwork, presentSq }) {
       <div className="mt-4 grid grid-cols-2 gap-3">
         <a
           href={profileUrl}
-          className="inline-flex min-h-11 items-center justify-center rounded-lg border border-nova-600 px-3 py-2 text-sm text-white hover:bg-nova-800"
+          className="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-nova-600 px-3 py-2 text-sm text-white hover:bg-nova-800 transition"
         >
+          <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+          </svg>
           Profile
         </a>
         <button
           type="button"
-          className={`inline-flex min-h-11 items-center justify-center rounded-lg px-3 py-2 text-sm font-semibold transition ${following ? 'border border-nova-600 text-white hover:bg-nova-800' : 'bg-accent text-deep hover:brightness-110'}`}
+          className={`inline-flex min-h-11 items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold transition ${following ? 'border border-nova-600 text-white hover:bg-nova-800' : 'bg-accent text-deep hover:brightness-110'}`}
           onClick={onToggleFollow}
         >
-          {following ? 'Following' : 'Follow'}
+          {following ? (
+            <>
+              <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
+              </svg>
+              Following
+            </>
+          ) : (
+            <>
+              <svg className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+              </svg>
+              Follow
+            </>
+          )}
         </button>
       </div>
     </section>