fixed browse and tailwindcss style

app/Http/Controllers/Api/BrowseController.php

@@ -24,8 +24,9 @@ class BrowseController extends Controller
     public function index(Request $request)
     {
         $perPage = min(max((int) $request->get('per_page', 24), 1), 100);
+        $sort = (string) $request->get('sort', 'latest');
 
-        $paginator = $this->service->browsePublicArtworks($perPage);
+        $paginator = $this->service->browsePublicArtworks($perPage, $sort);
 
         return ArtworkListResource::collection($paginator);
     }
@@ -37,9 +38,10 @@ class BrowseController extends Controller
     public function byContentType(Request $request, string $contentTypeSlug)
     {
         $perPage = min(max((int) $request->get('per_page', 24), 1), 100);
+        $sort = (string) $request->get('sort', 'latest');
 
         try {
-            $paginator = $this->service->getArtworksByContentType($contentTypeSlug, $perPage);
+            $paginator = $this->service->getArtworksByContentType($contentTypeSlug, $perPage, $sort);
         } catch (ModelNotFoundException $e) {
             abort(404);
         }
@@ -58,13 +60,14 @@ class BrowseController extends Controller
     public function byCategoryPath(Request $request, string $contentTypeSlug, string $categoryPath)
     {
         $perPage = min(max((int) $request->get('per_page', 24), 1), 100);
+        $sort = (string) $request->get('sort', 'latest');
 
         $slugs = array_merge([
             strtolower($contentTypeSlug),
         ], array_values(array_filter(explode('/', trim($categoryPath, '/')))));
 
         try {
-            $paginator = $this->service->getArtworksByCategoryPath($slugs, $perPage);
+            $paginator = $this->service->getArtworksByCategoryPath($slugs, $perPage, $sort);
         } catch (ModelNotFoundException $e) {
             abort(404);
         }

app/Http/Controllers/CategoryPageController.php

@@ -4,13 +4,15 @@ namespace App\Http\Controllers;
 
 use App\Models\Category;
 use App\Models\ContentType;
-use App\Models\Artwork;
 use App\Services\ArtworkService;
 use Illuminate\Http\Request;
-use Illuminate\Pagination\LengthAwarePaginator;
 
 class CategoryPageController extends Controller
 {
+    public function __construct(private ArtworkService $artworkService)
+    {
+    }
+
     public function show(Request $request, string $contentTypeSlug, ?string $categoryPath = null)
     {
         $contentType = ContentType::where('slug', strtolower($contentTypeSlug))->first();
@@ -18,6 +20,8 @@ class CategoryPageController extends Controller
             abort(404);
         }
 
+        $sort = (string) $request->get('sort', 'latest');
+
 
         if ($categoryPath === null || $categoryPath === '') {
             // No category path: show content-type landing page (e.g., /wallpapers)
@@ -27,20 +31,7 @@ class CategoryPageController extends Controller
 
             // Load artworks for this content type (show gallery on the root page)
             $perPage = 40;
-            $artworks = Artwork::whereHas('categories', function ($q) use ($contentType) {
-                    $q->where('categories.content_type_id', $contentType->id);
-                })
-                ->published()->public()
-                ->with([
-                    'user:id,name',
-                    'categories' => function ($q) {
-                        $q->select('categories.id', 'categories.content_type_id', 'categories.parent_id', 'categories.name', 'categories.slug', 'categories.sort_order')
-                            ->with(['parent:id,parent_id,content_type_id,name,slug', 'contentType:id,slug,name']);
-                    },
-                ])
-                ->orderBy('published_at', 'desc')
-                ->paginate($perPage)
-                ->withQueryString();
+            $artworks = $this->artworkService->getArtworksByContentType($contentType->slug, $perPage, $sort);
 
             return view('legacy.content-type', compact(
                 'contentType',
@@ -88,10 +79,9 @@ class CategoryPageController extends Controller
         // Load artworks via ArtworkService to support arbitrary-depth category paths
         $perPage = 40;
         try {
-            $service = app(ArtworkService::class);
             // service expects an array with contentType slug first, then category slugs
             $pathSlugs = array_merge([strtolower($contentTypeSlug)], $slugs);
-            $artworks = $service->getArtworksByCategoryPath($pathSlugs, $perPage);
+            $artworks = $this->artworkService->getArtworksByCategoryPath($pathSlugs, $perPage, $sort);
         } catch (\Throwable $e) {
             abort(404);
         }

app/Http/Controllers/Legacy/BrowseController.php

@@ -4,12 +4,12 @@ namespace App\Http\Controllers\Legacy;
 
 use App\Http\Controllers\Controller;
 use App\Models\Artwork;
+use App\Models\ContentType;
 use App\Services\ArtworkService;
 use Illuminate\Http\Request;
 use Illuminate\Pagination\CursorPaginator;
 use Illuminate\Database\Eloquent\ModelNotFoundException;
 use Illuminate\Support\Facades\Log;
-use Illuminate\Support\Facades\Storage;
 
 class BrowseController extends Controller
 {
@@ -27,18 +27,22 @@ class BrowseController extends Controller
         $page_meta_keywords = 'photography, wallpapers, skins, stock, browse, social, community, artist, picture, photo';
 
         $perPage = (int) $request->get('per_page', 24);
+        $sort = (string) $request->get('sort', 'latest');
 
-        $categoryPath = trim((string) $request->query('category', ''), '/');
+        // Canonical browse routes are slug-based (/photography, /wallpapers, /skins, /other, /{type}/{path}).
+        // Prevent duplicate query-driven browse URLs.
+        $legacyCategory = trim((string) $request->query('category', ''), '/');
+        if ($legacyCategory !== '') {
+            return redirect('/' . strtolower($legacyCategory), 301);
+        }
+        $legacyContentType = trim((string) $request->query('content_type', ''), '/');
+        if ($legacyContentType !== '') {
+            return redirect('/' . strtolower($legacyContentType), 301);
+        }
 
         try {
-            if ($categoryPath !== '') {
-                $slugs = array_values(array_filter(explode('/', $categoryPath)));
             /** @var CursorPaginator $artworks */
-                $artworks = $this->artworks->getArtworksByCategoryPath($slugs, $perPage);
-            } else {
-                /** @var CursorPaginator $artworks */
-                $artworks = $this->artworks->browsePublicArtworks($perPage);
-            }
+            $artworks = $this->artworks->browsePublicArtworks($perPage, $sort);
         } catch (ModelNotFoundException $e) {
             abort(404);
         }
@@ -46,7 +50,6 @@ class BrowseController extends Controller
         if (count($artworks) === 0) {
             Log::warning('browse.missing_artworks', [
                 'url' => $request->fullUrl(),
-                'category_path' => $categoryPath ?: null,
             ]);
             abort(410);
         }
@@ -54,7 +57,16 @@ class BrowseController extends Controller
         // Shape data for the legacy Blade while using authoritative tables only.
         $artworks->getCollection()->transform(fn (Artwork $artwork) => $this->mapArtwork($artwork));
 
-        return view('legacy.browse', compact('page_title', 'page_meta_description', 'page_meta_keywords', 'artworks'));
+        $rootCategories = ContentType::orderBy('id')
+            ->get(['name', 'slug'])
+            ->map(fn (ContentType $type) => (object) [
+                'name' => $type->name,
+                'url' => '/' . strtolower($type->slug),
+            ]);
+
+        $page_canonical = url('/browse');
+
+        return view('legacy.browse', compact('page_title', 'page_meta_description', 'page_meta_keywords', 'page_canonical', 'artworks', 'rootCategories'));
     }
 
     private function mapArtwork(Artwork $artwork): object

app/Http/Controllers/Legacy/CategoryController.php

@@ -49,9 +49,10 @@ class CategoryController extends Controller
         $slugs = array_merge([$contentTypeSlug], $parts);
 
         $perPage = (int) $request->get('per_page', 40);
+        $sort = (string) $request->get('sort', 'latest');
 
         try {
-            $artworks = $this->artworkService->getArtworksByCategoryPath($slugs, $perPage);
+            $artworks = $this->artworkService->getArtworksByCategoryPath($slugs, $perPage, $sort);
         } catch (ModelNotFoundException $e) {
             abort(404);
         }

app/Http/Controllers/Legacy/PhotographyController.php

@@ -53,24 +53,11 @@ class PhotographyController extends Controller
             $tidy = $category->description ?? ($ct->description ?? null);
 
             $perPage = 40;
+            $sort = (string) $request->get('sort', 'latest');
 
             // Load artworks for the requested content type using standard pagination
             try {
-                $artQuery = \App\Models\Artwork::public()
-                    ->published()
-                    ->whereHas('categories', function ($q) use ($ct) {
-                        $q->where('categories.content_type_id', $ct->id);
-                    })
-                    ->with([
-                        'user:id,name',
-                        'categories' => function ($q) {
-                            $q->select('categories.id', 'categories.content_type_id', 'categories.parent_id', 'categories.name', 'categories.slug', 'categories.sort_order')
-                                ->with(['parent:id,parent_id,content_type_id,name,slug', 'contentType:id,slug,name']);
-                        },
-                    ])
-                    ->orderByDesc('published_at');
-
-                $artworks = $artQuery->paginate($perPage)->withQueryString();
+                $artworks = $this->artworks->getArtworksByContentType($contentSlug, $perPage, $sort);
             } catch (\Throwable $e) {
                 // Return an empty paginator so views using ->links() / ->firstItem() work
                 $artworks = new \Illuminate\Pagination\LengthAwarePaginator([], 0, $perPage, 1, [

app/Services/ArtworkService.php

@@ -8,6 +8,7 @@ use App\Models\ArtworkFeature;
 use Illuminate\Contracts\Pagination\LengthAwarePaginator;
 use Illuminate\Contracts\Pagination\CursorPaginator;
 use Illuminate\Database\Eloquent\Collection as EloquentCollection;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Support\Collection;
 use Illuminate\Database\Eloquent\ModelNotFoundException;
 use Illuminate\Support\Facades\Cache;
@@ -23,6 +24,29 @@ class ArtworkService
 {
     protected int $cacheTtl = 3600; // seconds
 
+    /**
+     * Shared browse query used by /browse, content-type pages, and category pages.
+     */
+    private function browseQuery(string $sort = 'latest'): Builder
+    {
+        $query = Artwork::public()
+            ->published()
+            ->with([
+                'user:id,name',
+                'categories' => function ($q) {
+                    $q->select('categories.id', 'categories.content_type_id', 'categories.parent_id', 'categories.name', 'categories.slug', 'categories.sort_order')
+                        ->with(['parent:id,parent_id,content_type_id,name,slug', 'contentType:id,slug,name']);
+                },
+            ]);
+
+        $normalizedSort = strtolower(trim($sort));
+        if ($normalizedSort === 'oldest') {
+            return $query->orderBy('published_at', 'asc');
+        }
+
+        return $query->orderByDesc('published_at');
+    }
+
     /**
      * Fetch a single public artwork by slug.
      * Applies visibility rules (public + approved + not-deleted).
@@ -115,18 +139,9 @@ class ArtworkService
      * Uses new authoritative tables only (no legacy joins) and eager-loads
      * lightweight relations needed for presentation.
      */
-    public function browsePublicArtworks(int $perPage = 24): CursorPaginator
+    public function browsePublicArtworks(int $perPage = 24, string $sort = 'latest'): CursorPaginator
     {
-        $query = Artwork::public()
-            ->published()
-            ->with([
-                'user:id,name',
-                'categories' => function ($q) {
-                    $q->select('categories.id', 'categories.content_type_id', 'categories.parent_id', 'categories.name', 'categories.slug', 'categories.sort_order')
-                        ->with(['parent:id,parent_id,content_type_id,name,slug', 'contentType:id,slug,name']);
-                },
-            ])
-            ->orderByDesc('published_at');
+        $query = $this->browseQuery($sort);
 
         // Use cursor pagination for high-load browse feeds (SEO handled via canonical URLs).
         return $query->cursorPaginate($perPage);
@@ -136,7 +151,7 @@ class ArtworkService
      * Browse artworks scoped to a content type slug using keyset pagination.
      * Applies public + approved + published filters.
      */
-    public function getArtworksByContentType(string $slug, int $perPage): CursorPaginator
+    public function getArtworksByContentType(string $slug, int $perPage, string $sort = 'latest'): CursorPaginator
     {
         $contentType = ContentType::where('slug', strtolower($slug))->first();
 
@@ -146,19 +161,10 @@ class ArtworkService
             throw $e;
         }
 
-        $query = Artwork::public()
-            ->published()
+        $query = $this->browseQuery($sort)
             ->whereHas('categories', function ($q) use ($contentType) {
                 $q->where('categories.content_type_id', $contentType->id);
-            })
-            ->with([
-                'user:id,name',
-                'categories' => function ($q) {
-                    $q->select('categories.id', 'categories.content_type_id', 'categories.parent_id', 'categories.name', 'categories.slug', 'categories.sort_order')
-                        ->with(['parent:id,parent_id,content_type_id,name,slug', 'contentType:id,slug,name']);
-                },
-            ])
-            ->orderByDesc('published_at');
+            });
 
         return $query->cursorPaginate($perPage);
     }
@@ -169,7 +175,7 @@ class ArtworkService
      *
      * @param array<int, string> $slugs
      */
-    public function getArtworksByCategoryPath(array $slugs, int $perPage): CursorPaginator
+    public function getArtworksByCategoryPath(array $slugs, int $perPage, string $sort = 'latest'): CursorPaginator
     {
         if (empty($slugs)) {
             $e = new ModelNotFoundException();
@@ -214,19 +220,10 @@ class ArtworkService
             }
         }
 
-        $query = Artwork::public()
-            ->published()
+        $query = $this->browseQuery($sort)
             ->whereHas('categories', function ($q) use ($current) {
                 $q->where('categories.id', $current->id);
-            })
-            ->with([
-                'user:id,name',
-                'categories' => function ($q) {
-                    $q->select('categories.id', 'categories.content_type_id', 'categories.parent_id', 'categories.name', 'categories.slug', 'categories.sort_order')
-                        ->with(['parent:id,parent_id,content_type_id,name,slug', 'contentType:id,slug,name']);
-                },
-            ])
-            ->orderByDesc('published_at');
+            });
 
         return $query->cursorPaginate($perPage);
     }

public/css/toolbar.css

@@ -565,8 +565,6 @@ subLoginMenu ul {
     padding:0;
     height:50px;
     background:rgba(30,30,30,0.2);
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
 }
 
 .nav>li.menu_notice>a  {
@@ -585,9 +583,7 @@ subLoginMenu ul {
 }
 
 .navbar-skinbase {
-  background: rgba(16, 25, 33, 0.6);
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
+    background:rgba(16, 25, 33, 0.9);
     border-bottom:solid 1px #000;
     box-shadow:0 0 14px #333;
     z-index:1000;
@@ -675,9 +671,7 @@ subLoginMenu ul {
 }
 
 .navbar-skinbase .dropdown-menu {
-  background: rgba(16, 25, 33, 0.6);
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
+    background:rgba(16, 25, 33, 0.9);
     border-bottom:solid 1px #000;
     box-shadow:0 0 14px #333;
     color:#fff;

resources/js/Pages/Upload/Index.jsx

@@ -580,7 +580,7 @@ export default function UploadPage({ draftId, filesCdnUrl, chunkSize }) {
 
   if (uploadsV2Enabled) {
     return (
-      <section className="min-h-[calc(100vh-4rem)] bg-gradient-to-b from-[#0d0f1b] via-[#111827] to-[#0b0c10] py-10 px-4">
+      <section className="px-4 py-1">
         <div className="max-w-6xl mx-auto">
           <UploadWizard
             initialDraftId={draftId ?? null}

resources/js/components/upload/ScreenshotUploader.jsx

@@ -77,7 +77,7 @@ export default function ScreenshotUploader({
           <p className="text-sm text-white/85">Drop screenshots here or click to browse</p>
           <button
             type="button"
-            className="mt-2 rounded-md border border-white/20 bg-white/10 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/70"
+            className="btn-secondary mt-2 text-xs"
             onClick={() => inputRef.current?.click()}
           >
             Browse screenshots
@@ -118,8 +118,16 @@ export default function ScreenshotUploader({
                   transition={quickTransition}
                   className="rounded-lg border border-white/50 bg-white/5 p-2 text-xs"
                 >
-                  <div className="overflow-hidden rounded-md border border-white/50 bg-black/25">
-                    <img src={item.url} alt={`Screenshot ${index + 1}`} className="h-24 w-full object-cover" />
+                  <div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-md border border-white/50 bg-black/25">
+                    <img
+                      src={item.url}
+                      alt={`Screenshot ${index + 1}`}
+                      className="max-h-full max-w-full object-contain"
+                      loading="lazy"
+                      decoding="async"
+                      width="160"
+                      height="160"
+                    />
                   </div>
                   <div className="mt-2 truncate text-white/90">{item.file.name}</div>
                   <div className="mt-1 text-white/55">{Math.round(item.file.size / 1024)} KB</div>

resources/js/components/upload/UploadActions.jsx

@@ -54,7 +54,7 @@ export default function UploadActions({
           disabled={disabled}
           title={disabled ? disableReason : 'Start upload'}
           onClick={() => onStart?.()}
-          className={`rounded-lg px-5 py-2.5 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300/75 ${disabled ? 'cursor-not-allowed bg-emerald-700/55 text-white/75' : 'bg-emerald-500 text-white hover:bg-emerald-400 shadow-[0_10px_28px_rgba(16,185,129,0.32)] ring-1 ring-emerald-200/40'}`}
+          className={`btn-primary text-sm ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}
         >
           {label}
         </button>
@@ -69,7 +69,7 @@ export default function UploadActions({
           disabled={disabled}
           title={disabled ? disableReason : 'Continue to Publish'}
           onClick={() => onContinue?.()}
-          className={`rounded-lg px-4 py-2 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75 ${disabled ? 'cursor-not-allowed bg-sky-700/45 text-sky-100/75' : 'bg-sky-400 text-slate-950 hover:bg-sky-300 shadow-[0_10px_28px_rgba(56,189,248,0.28)] ring-1 ring-sky-100/45'}`}
+          className={`btn-primary text-sm ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}
         >
           Continue to Publish
         </button>
@@ -83,7 +83,7 @@ export default function UploadActions({
         disabled={disabled}
         title={disabled ? disableReason : 'Publish artwork'}
         onClick={() => onPublish?.()}
-        className={`rounded-lg px-4 py-2 text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-300/75 ${disabled ? 'cursor-not-allowed bg-emerald-700/45 text-emerald-100/75' : 'bg-emerald-400 text-slate-950 shadow-[0_0_0_1px_rgba(167,243,208,0.85),0_0_24px_rgba(52,211,153,0.45)] hover:bg-emerald-300'}`}
+        className={`btn-primary text-sm ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}
       >
         {isPublishing ? 'Publishing…' : 'Publish'}
       </button>
@@ -91,13 +91,14 @@ export default function UploadActions({
   }
 
   return (
-    <footer data-testid="wizard-action-bar" className={`${mobileSticky ? 'sticky bottom-0 z-20' : ''} rounded-xl border border-white/10 bg-slate-950/80 p-3 shadow-[0_-12px_32px_rgba(2,8,23,0.65)] backdrop-blur sm:p-4 lg:static lg:shadow-none`}>
+    <footer data-testid="wizard-action-bar" className={`${mobileSticky ? 'sticky fixed inset-x-0 bottom-0 z-20 px-4 pb-3 lg:static lg:px-0 lg:pb-0' : ''}`}>
+      <div className="mx-auto w-full max-w-4xl rounded-xl border border-white/10 bg-nova-800/80 p-3 shadow-[0_-12px_32px_rgba(2,8,23,0.65)] backdrop-blur-sm sm:p-4 lg:shadow-none">
       <div className="flex flex-wrap items-center justify-end gap-2.5">
         {canGoBack && (
           <button
             type="button"
             onClick={() => onBack?.()}
-            className="rounded-lg border border-white/30 bg-white/10 px-3.5 py-2 text-sm font-medium text-white transition hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+            className="btn-secondary text-sm"
           >
             Back
           </button>
@@ -107,7 +108,7 @@ export default function UploadActions({
           <button
             type="button"
             onClick={() => onSaveDraft?.()}
-            className="rounded-lg border border-purple-300/45 bg-purple-500/20 px-3.5 py-2 text-sm font-medium text-purple-50 transition hover:bg-purple-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-purple-300/70"
+            className="btn-secondary text-sm"
           >
             Save draft
           </button>
@@ -119,7 +120,7 @@ export default function UploadActions({
             onClick={handleCancel}
             disabled={isCancelling}
             title={confirmCancel ? 'Click again to confirm cancel' : 'Cancel current upload'}
-            className="rounded-lg border border-amber-300/45 bg-amber-500/20 px-3.5 py-2 text-sm font-medium text-amber-50 transition hover:bg-amber-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/75 disabled:cursor-not-allowed disabled:opacity-60"
+            className="btn-secondary text-sm disabled:cursor-not-allowed disabled:opacity-60"
           >
             {isCancelling ? 'Cancelling…' : confirmCancel ? 'Cancel upload?' : 'Cancel'}
           </button>
@@ -129,7 +130,7 @@ export default function UploadActions({
           <button
             type="button"
             onClick={() => onRetry?.()}
-            className="rounded-lg border border-amber-300/45 bg-amber-500/20 px-3.5 py-2 text-sm font-medium text-amber-50 transition hover:bg-amber-500/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-300/75"
+            className="btn-secondary text-sm"
           >
             Retry
           </button>
@@ -139,7 +140,7 @@ export default function UploadActions({
           <button
             type="button"
             onClick={() => onReset?.()}
-            className="rounded-lg border border-white/30 bg-white/10 px-3.5 py-2 text-sm font-medium text-white transition hover:bg-white/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+            className="btn-secondary text-sm"
           >
             {resetLabel}
           </button>
@@ -147,6 +148,7 @@ export default function UploadActions({
 
         {renderPrimary()}
       </div>
+      </div>
     </footer>
   )
 }

resources/js/components/upload/UploadDropzone.jsx

@@ -98,20 +98,27 @@ export default function UploadDropzone({
           const droppedFile = event.dataTransfer?.files?.[0]
           if (droppedFile) emitFile(droppedFile)
         }}
-        animate={prefersReducedMotion ? undefined : {
-          scale: dragging ? 1.01 : 1,
-          borderColor: invalid ? 'rgba(252,165,165,0.7)' : dragging ? 'rgba(103,232,249,0.9)' : 'rgba(56,189,248,0.35)',
-          backgroundColor: invalid ? 'rgba(23,68,68,0.10)' : dragging ? 'rgba(6,182,212,0.20)' : 'rgba(14,165,233,0.05)',
-        }}
+        animate={prefersReducedMotion ? undefined : { scale: dragging ? 1.01 : 1 }}
         transition={dragTransition}
         className={`group rounded-xl border-2 border-dashed border-white/50 py-6 px-4 text-center transition hover:border-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70 ${locked ? 'cursor-default bg-white/5 opacity-75' : 'cursor-pointer'} ${invalid ? 'border-red-300/70 bg-red-500/10 shadow-[0_0_0_1px_rgba(248,113,113,0.2)]' : dragging ? 'border-cyan-300 bg-cyan-500/20 shadow-[0_0_0_1px_rgba(103,232,249,0.35)]' : locked ? 'bg-white/5' : 'bg-sky-500/5 hover:bg-sky-500/12'}`}
       >
+        <h3 className="mt-3 text-sm font-semibold text-white">{title}</h3>
+        <p className="mt-1 text-xs text-soft">{description}</p>
+
         {previewUrl ? (
-          <div className="mt-2 grid place-items-center">
-            <div className="relative w-full max-w-[520px]">
-              <img src={previewUrl} alt="Selected preview" className="mx-auto max-h-64 w-auto rounded-lg object-contain" />
-              <div className="pointer-events-none absolute bottom-2 right-2 rounded-full bg-black/40 px-2 py-1 text-xs text-white/90">Click to replace</div>
+          <div className="mt-2 w-full flex flex-col items-center gap-2">
+            <div className="flex h-52 w-64 items-center justify-center overflow-hidden rounded-lg bg-black/40 ring-1 ring-white/10">
+              <img
+                src={previewUrl}
+                alt="Selected preview"
+                className="h-full w-full object-contain object-center"
+                loading="lazy"
+                decoding="async"
+                width="250"
+                height="208"
+              />
             </div>
+            <div className="text-xs text-white/70">Click to replace</div>
           </div>
         ) : (
           <>
@@ -123,8 +130,6 @@ export default function UploadDropzone({
               </svg>
             </div>
 
-            <h3 className="mt-3 text-sm font-semibold text-white">{title}</h3>
-            <p className="mt-1 text-xs text-soft">{description}</p>
             <p className="mt-1 text-xs text-soft">Accepted: JPG, JPEG, PNG, WEBP, ZIP, RAR, 7Z, TAR, GZ</p>
             <p className="text-xs text-soft">Max size: images 50MB · archives 200MB</p>
 

resources/js/components/upload/UploadProgress.jsx

@@ -51,20 +51,13 @@ export default function UploadProgress({
     Error: 'border-red-400/35 bg-red-400/15 text-red-100',
   }
 
-  const statusColors = {
-    Idle: { borderColor: 'rgba(148,163,184,0.35)', backgroundColor: 'rgba(148,163,184,0.15)', color: 'rgb(226,232,240)' },
-    Uploading: { borderColor: 'rgba(56,189,248,0.35)', backgroundColor: 'rgba(56,189,248,0.15)', color: 'rgb(224,242,254)' },
-    Processing: { borderColor: 'rgba(251,191,36,0.35)', backgroundColor: 'rgba(251,191,36,0.15)', color: 'rgb(254,243,199)' },
-    Ready: { borderColor: 'rgba(52,211,153,0.35)', backgroundColor: 'rgba(52,211,153,0.15)', color: 'rgb(209,250,229)' },
-    Error: { borderColor: 'rgba(248,113,113,0.35)', backgroundColor: 'rgba(248,113,113,0.15)', color: 'rgb(254,226,226)' },
-  }
-
   const quickTransition = prefersReducedMotion
     ? { duration: 0 }
     : { duration: 0.2, ease: 'easeOut' }
 
   const stepLabels = ['Preload', 'Details', 'Publish']
   const stepIndex = progress >= 100 ? 2 : progress >= 34 ? 1 : 0
+  const progressValue = Math.max(0, Math.min(100, Number(progress) || 0))
 
   return (
     <header className="rounded-xl border border-white/50 bg-gradient-to-br from-slate-900/80 to-slate-900/50 p-5 shadow-[0_12px_40px_rgba(0,0,0,0.35)] sm:p-6">
@@ -75,13 +68,11 @@ export default function UploadProgress({
           <p className="mt-1 text-sm text-white/65">{description}</p>
         </div>
 
-        <motion.span
+        <span
           className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusTheme[resolvedStatus] || statusTheme.Idle}`}
-          animate={statusColors[resolvedStatus] || statusColors.Idle}
-          transition={quickTransition}
         >
           {resolvedStatus}
-        </motion.span>
+        </span>
       </div>
 
       <div className="mt-4 flex items-center gap-2 overflow-x-auto">
@@ -100,16 +91,14 @@ export default function UploadProgress({
 
       <div className="mt-4">
         <div className="h-2 overflow-hidden rounded-full bg-white/10">
-          <div
-            className="h-full rounded-full"
-            style={{
-              width: `${Math.max(0, Math.min(100, progress))}%`,
-              background: 'linear-gradient(90deg,#38bdf8,#06b6d4,#34d399)',
-              transition: prefersReducedMotion ? 'none' : 'width 200ms ease-out',
-            }}
+          <motion.div
+            className="h-full origin-left rounded-full bg-gradient-to-r from-sky-400/90 via-cyan-300/90 to-emerald-300/90"
+            initial={false}
+            animate={{ scaleX: progressValue / 100 }}
+            transition={quickTransition}
           />
         </div>
-        <p className="mt-2 text-right text-xs text-white/55">{Math.round(progress)}%</p>
+        <p className="mt-2 text-right text-xs text-white/55">{Math.round(progressValue)}%</p>
       </div>
 
       <AnimatePresence initial={false}>

resources/js/components/upload/UploadWizard.jsx

@@ -406,9 +406,26 @@ export default function UploadWizard({
     if (!selected) return []
     return categoryTreeByType[selected] || []
   }, [categoryTreeByType, metadata.contentType])
+  const allRootCategoryOptions = useMemo(() => {
+    const items = []
+    Object.entries(categoryTreeByType).forEach(([contentTypeValue, roots]) => {
+      roots.forEach((root) => {
+        items.push({
+          ...root,
+          contentTypeValue,
+        })
+      })
+    })
+    return items
+  }, [categoryTreeByType])
+  const selectedRootFromAnyType = useMemo(() => {
+    const selectedId = String(metadata.rootCategoryId || '')
+    if (!selectedId) return null
+    return allRootCategoryOptions.find((root) => String(root.id) === selectedId) || null
+  }, [allRootCategoryOptions, metadata.rootCategoryId])
   const selectedRootCategory = useMemo(() => {
-    return filteredCategoryTree.find((root) => String(root.id) === String(metadata.rootCategoryId || '')) || null
-  }, [filteredCategoryTree, metadata.rootCategoryId])
+    return filteredCategoryTree.find((root) => String(root.id) === String(metadata.rootCategoryId || '')) || selectedRootFromAnyType || null
+  }, [filteredCategoryTree, metadata.rootCategoryId, selectedRootFromAnyType])
   const requiresSubCategory = Boolean(selectedRootCategory && Array.isArray(selectedRootCategory.children) && selectedRootCategory.children.length > 0)
   const stepProgressPercent = useMemo(() => {
     if (activeStep === 1) return 33
@@ -851,6 +868,12 @@ export default function UploadWizard({
         description: String(metadata.description || '').trim() || null,
       }
 
+      if (resolvedArtworkId && resolvedArtworkId > 0) {
+        dispatchMachine({ type: 'PUBLISH_SUCCESS' })
+        emitUploadEvent('upload_publish', { id: publishTargetId })
+        return
+      }
+
       if (!machine.sessionId) {
         if (!publishTargetId) throw new Error('Missing publish id.')
         const publishController = registerController()
@@ -1023,17 +1046,27 @@ export default function UploadWizard({
         <div className="max-w-4xl mx-auto px-4 py-6">
           <div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
             <div className="rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10">
-              <h2 ref={stepHeadingRef} tabIndex={-1} className="text-lg font-semibold text-white focus:outline-none">Add details</h2>
+              <h2 ref={stepHeadingRef} tabIndex={-1} className="text-lg font-semibold text-white focus:outline-none">Artwork details</h2>
               <p className="mt-1 text-sm text-white/65">Complete required metadata and rights confirmation before publishing.</p>
             </div>
 
             <div className="mb-6 rounded-xl border border-white/8 bg-white/4 p-4">
               <p className="text-xs uppercase tracking-wide text-white/55">Uploaded asset</p>
-              <div className="mt-2 flex items-center gap-3">
+              <div className="mt-2 flex flex-col gap-3 md:flex-row md:items-center">
                 {primaryPreviewUrl && !isArchive ? (
-                  <img src={primaryPreviewUrl} alt="Uploaded artwork thumbnail" className="h-20 w-20 rounded-lg border border-white/50 object-cover" />
+                  <div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-lg border border-white/50 bg-black/25">
+                    <img
+                      src={primaryPreviewUrl}
+                      alt="Uploaded artwork thumbnail"
+                      className="max-h-full max-w-full object-contain"
+                      loading="lazy"
+                      decoding="async"
+                      width="160"
+                      height="160"
+                    />
+                  </div>
                 ) : (
-                  <div className="grid h-20 w-20 place-items-center rounded-lg border border-white/15 bg-white/5 text-white/60">📦</div>
+                  <div className="grid h-40 w-40 place-items-center rounded-lg border border-white/15 bg-white/5 text-white/60">📦</div>
                 )}
                 <div className="min-w-0">
                   <p className="truncate text-sm font-medium text-white">{primaryFile?.name || 'Primary file selected'}</p>
@@ -1081,6 +1114,10 @@ export default function UploadWizard({
                               src={iconPath}
                               alt={`${ct.name || 'Content type'} mascot`}
                               className={`h-full w-full object-contain transition-all duration-150 ${active ? 'grayscale-0 opacity-100' : 'grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-90'}`}
+                              loading="lazy"
+                              decoding="async"
+                              width="80"
+                              height="80"
                               onError={(event) => {
                                 if (event.currentTarget.src.includes('mascot_other.webp')) return
                                 event.currentTarget.src = '/gfx/mascot_other.webp'
@@ -1132,6 +1169,29 @@ export default function UploadWizard({
                     })}
                   </div>
                 )}
+
+                <div className="sr-only">
+                  <label htmlFor="upload-root-category">Root category</label>
+                  <select
+                    id="upload-root-category"
+                    value={String(metadata.rootCategoryId || '')}
+                    onChange={(event) => {
+                      const nextRootId = String(event.target.value || '')
+                      const matchedRoot = allRootCategoryOptions.find((root) => String(root.id) === nextRootId)
+                      setMetadata((current) => ({
+                        ...current,
+                        contentType: matchedRoot ? String(matchedRoot.contentTypeValue) : current.contentType,
+                        rootCategoryId: nextRootId,
+                        subCategoryId: '',
+                      }))
+                    }}
+                  >
+                    <option value="">Select root category</option>
+                    {allRootCategoryOptions.map((root) => (
+                      <option key={root.id} value={String(root.id)}>{root.name}</option>
+                    ))}
+                  </select>
+                </div>
               </div>
 
               {requiresSubCategory && (
@@ -1160,6 +1220,26 @@ export default function UploadWizard({
                       )
                     })}
                   </div>
+
+                  <div className="sr-only">
+                    <label htmlFor="upload-subcategory">Subcategory</label>
+                    <select
+                      id="upload-subcategory"
+                      value={String(metadata.subCategoryId || '')}
+                      onChange={(event) => {
+                        const nextSubId = String(event.target.value || '')
+                        setMetadata((current) => ({
+                          ...current,
+                          subCategoryId: nextSubId,
+                        }))
+                      }}
+                    >
+                      <option value="">Select subcategory</option>
+                      {selectedRootCategory.children.map((sub) => (
+                        <option key={sub.id} value={String(sub.id)}>{sub.name}</option>
+                      ))}
+                    </select>
+                  </div>
                 </div>
               )}
 
@@ -1195,19 +1275,30 @@ export default function UploadWizard({
     }
 
     return (
-      <div className="rounded-2xl border border-white/8 bg-slate-900/70 p-6 sm:p-7">
-        <div className="mb-6 rounded-xl border border-white/50 bg-white/5 px-4 py-3">
+      <div className="max-w-4xl mx-auto px-4 py-6">
+        <div className="bg-panel/80 backdrop-blur rounded-2xl shadow-xl shadow-black/40 ring-1 ring-white/10 p-6 space-y-5">
+          <div className="rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10">
             <h2 ref={stepHeadingRef} tabIndex={-1} className="text-lg font-semibold text-white focus:outline-none">Review & publish</h2>
             <p className="mt-1 text-sm text-white/65">Review your submission and publish when all checks are ready.</p>
           </div>
 
           <div className="rounded-xl border border-white/8 bg-white/4 p-5">
-          <div className="flex flex-col gap-4 sm:flex-row">
-            <div className="w-full sm:w-40">
+            <div className="flex flex-col gap-4 md:flex-row">
+              <div className="w-40">
                 {primaryPreviewUrl && !isArchive ? (
-                <img src={primaryPreviewUrl} alt="Review preview" className="h-32 w-full rounded-lg border border-white/50 object-cover" />
+                  <div className="flex h-40 w-40 items-center justify-center overflow-hidden rounded-lg border border-white/50 bg-black/25">
+                    <img
+                      src={primaryPreviewUrl}
+                      alt="Review preview"
+                      className="max-h-full max-w-full object-contain"
+                      loading="lazy"
+                      decoding="async"
+                      width="160"
+                      height="160"
+                    />
+                  </div>
                 ) : (
-                <div className="grid h-32 w-full place-items-center rounded-lg border border-white/50 bg-black/25 text-white/60">Archive</div>
+                  <div className="grid h-40 w-40 place-items-center rounded-lg border border-white/50 bg-black/25 text-white/60">Archive</div>
                 )}
               </div>
             <div className="min-w-0 flex-1 space-y-2">
@@ -1237,11 +1328,12 @@ export default function UploadWizard({
           </div>
         </div>
       </div>
+      </div>
     )
   }
 
   return (
-    <section ref={stepContentRef} className="space-y-8 text-white" data-is-archive={isArchive ? 'true' : 'false'}>
+    <section ref={stepContentRef} className="space-y-8 pb-24 text-white lg:pb-0" data-is-archive={isArchive ? 'true' : 'false'}>
       {showRestoredBanner && (
         <div className="rounded-xl border border-sky-300/30 bg-sky-500/10 px-4 py-2 text-sm text-sky-100">
           <div className="flex items-center justify-between gap-3">

resources/views/layouts/nova.blade.php

@@ -7,6 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="{{ $page_meta_description ?? '' }}">
     <meta name="keywords" content="{{ $page_meta_keywords ?? '' }}">
+    @isset($page_canonical)
+        <link rel="canonical" href="{{ $page_canonical }}" />
+    @endisset
 
     <!-- Icons (kept for now to preserve current visual output) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
@@ -15,7 +18,7 @@
     @vite(['resources/css/app.css','resources/scss/nova.scss','resources/js/nova.js'])
     @stack('head')
 </head>
-<body class="bg-nova-800 text-white min-h-screen flex flex-col">
+<body class="bg-nova-900 text-white min-h-screen flex flex-col">
 
 <!-- React Topbar mount point -->
 <div id="topbar-root"></div>

resources/views/legacy/browse.blade.php

@@ -1,45 +1,101 @@
 @extends('layouts.nova')
 
 @php
-    use Illuminate\Support\Str;
+    use App\Banner;
 @endphp
 
 @section('content')
 <div class="container-fluid legacy-page">
-    @php
-        // legacy responsive ad block
-        \App\Banner::ShowResponsiveAd();
-    @endphp
+    @php Banner::ShowResponsiveAd(); @endphp
 
-    <div class="effect2 page-header-wrap">
-        <header class="page-heading">
-            <h1 class="page-header">Browse Artworks</h1>
-            <p>List of all uploaded Artworks - <strong>Skins</strong>, <strong>Photography</strong> and <strong>Wallpapers</strong>.</p>
-        </header>
-    </div>
+    <div class="pt-0">
+        <div class="mx-auto w-full">
+            <div class="flex min-h-[calc(100vh-64px)]">
 
-    @if ($artworks->count())
-        <div class="container_photo gallery_box">
-            @foreach ($artworks as $art)
-                @include('legacy._artwork_card', ['art' => $art])
+                <aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nova-900/60 backdrop-blur-sm">
+                    <div class="p-4">
+                        <button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
+                            <span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">
+                                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
+                            </span>
+                            <span class="text-sm text-white/90">Menu</span>
+                        </button>
+
+                        <div class="mt-6 text-sm text-neutral-400">
+                            <div class="font-semibold text-white/80 mb-2">Main Categories:</div>
+                            <ul class="space-y-2">
+                                @foreach($rootCategories as $root)
+                                    <li>
+                                        <a class="flex items-center gap-2 hover:text-white" href="{{ $root->url }}"><span class="opacity-70">📁</span> {{ $root->name }}</a>
+                                    </li>
                                 @endforeach
+                            </ul>
+
+                            <div class="mt-6 font-semibold text-white/80 mb-2">Browse Subcategories:</div>
+                            <ul class="space-y-2 sb-scrollbar max-h-56 overflow-auto pr-2">
+                                @foreach($rootCategories as $root)
+                                    <li>
+                                        <a class="hover:text-white text-neutral-400" href="{{ $root->url }}">{{ $root->name }}</a>
+                                    </li>
+                                @endforeach
+                            </ul>
+                        </div>
+                    </div>
+                </aside>
+
+                <main class="flex-1">
+                    <div class="relative overflow-hidden nb-hero-radial">
+                        <div class="absolute inset-0 opacity-35"></div>
+
+                        <div class="relative px-6 py-8 md:px-10 md:py-10">
+                            <div class="text-sm text-neutral-400">Browse</div>
+
+                            <h1 class="mt-2 text-3xl md:text-4xl font-semibold tracking-tight text-white/95">Browse Artworks</h1>
+
+                            <section class="mt-5 bg-white/5 border border-white/10 rounded-2xl shadow-lg">
+                                <div class="p-5 md:p-6">
+                                    <div class="text-lg font-semibold text-white/90">All categories</div>
+                                    <p class="mt-2 text-sm leading-6 text-neutral-400">List of all uploaded artworks across Skins, Wallpapers, Photography, and Other.</p>
+                                </div>
+                            </section>
+                            <div class="absolute left-0 right-0 bottom-0 h-36 nb-hero-fade pointer-events-none" aria-hidden="true"></div>
+                        </div>
                     </div>
 
-    @else
+                    <section class="px-6 pb-10 md:px-10">
+                        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                            @forelse ($artworks as $art)
+                                <a href="{{ $art->url }}" class="group relative rounded-2xl overflow-hidden bg-black/20 border border-white/10 shadow-lg">
+                                    <div class="aspect-[16/10] bg-neutral-900">
+                                        <img src="{{ $art->thumb ?? '/images/placeholder.jpg' }}" srcset="{{ $art->thumb_srcset ?? ($art->thumb ?? '/images/placeholder.jpg') }}" alt="{{ $art->name ?? 'Artwork' }}" loading="lazy" class="w-full h-full object-cover" />
+                                    </div>
+                                    <div class="p-3 text-xs text-neutral-400 group-hover:text-white/80">{{ $art->name ?? 'Artwork' }}</div>
+                                </a>
+                            @empty
                                 <div class="panel panel-default effect2">
                                     <div class="panel-heading"><strong>No Artworks Yet</strong></div>
                                     <div class="panel-body">
                                         <p>Once uploads arrive they will appear here. Check back soon.</p>
                                     </div>
                                 </div>
-    @endif
+                            @endforelse
+                        </div>
 
-    <div class="paginationMenu text-center">
-        {{-- Use paginator's default view (cursor vs length-aware) to avoid missing $elements in bootstrap view --}}
+                        <div class="flex justify-center mt-10">
                             {{ $artworks->withQueryString()->links() }}
                         </div>
+                    </section>
+                </main>
+            </div>
+        </div>
+    </div>
 </div>
 @endsection
-@push('scripts')
-<script src="/js/legacy-gallery-init.js"></script>
+
+@push('styles')
+<style>
+    .nb-hero-fade {
+        background: linear-gradient(180deg, rgba(17,24,39,0) 0%, rgba(7,10,15,0.9) 60%, rgba(7,10,15,1) 100%);
+    }
+</style>
 @endpush

tailwind.config.js

@@ -7,6 +7,8 @@ export default {
         './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
         './storage/framework/views/*.php',
         './resources/views/**/*.blade.php',
+        // Include frontend JS/TS files so Tailwind picks up dynamic/JSX classes
+        './resources/js/**/*.{js,jsx,ts,tsx,vue}',
     ],
 
     theme: {