categories v1 finished

resources/views/layouts/nova/toolbar.blade.php

@@ -94,6 +94,9 @@
                     <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/other">
                         <i class="fa-solid fa-folder-open w-4 text-center text-sb-muted"></i>Other
                     </a>
+                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ route('categories.index') }}">
+                        <i class="fa-solid fa-folder-open w-4 text-center text-sb-muted"></i>Categories
+                    </a>
                     <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/tags">
                         <i class="fa-solid fa-tags w-4 text-center text-sb-muted"></i>Tags
                     </a>

resources/views/web/categories.blade.php

@@ -1,62 +1,36 @@
 @extends('layouts.nova')
 
+@push('head')
+    <link rel="canonical" href="{{ $page_canonical ?? url('/categories') }}">
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="Skinbase">
+    <meta property="og:title" content="{{ $page_title ?? 'Categories' }}">
+    <meta property="og:description" content="{{ $page_meta_description ?? '' }}">
+    <meta property="og:url" content="{{ $page_canonical ?? url('/categories') }}">
+    @if(!empty($structured_data ?? null))
+        <script type="application/ld+json">{!! json_encode($structured_data, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG) !!}</script>
+    @endif
+@endpush
+
+@section('main-class', '')
+
 @section('content')
-@php
-    $contentTypes = $contentTypes ?? collect([
-        (object) [
-            'name' => 'Categories',
-            'description' => null,
-            'roots' => $categories ?? collect(),
-        ],
-    ]);
-    $subgroups = $subgroups ?? collect();
-@endphp
-<div class="container-fluid legacy-page">
-    <div class="effect2 page-header-wrap">
-        <header class="page-heading">
-            <h1 class="page-header">Browse Categories</h1>
-            <p>Select a category to view its artworks.</p>
-        </header>
+    <script id="categories-page-props" type="application/json">
+        {!! json_encode([
+            'apiUrl' => route('api.categories.index'),
+            'pageTitle' => $page_title ?? 'Categories',
+            'pageDescription' => $page_meta_description ?? null,
+        ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) !!}
+    </script>
+
+    <div id="categories-page-root" class="min-h-screen bg-[radial-gradient(circle_at_top,rgba(34,211,238,0.14),transparent_28%),radial-gradient(circle_at_80%_20%,rgba(249,115,22,0.16),transparent_30%),linear-gradient(180deg,#050b13_0%,#09111c_42%,#050913_100%)]">
+        <div class="mx-auto flex min-h-[60vh] max-w-7xl items-center justify-center px-6 py-20">
+            <div class="flex items-center gap-3 rounded-full border border-white/10 bg-white/[0.04] px-5 py-3 text-sm text-white/70 shadow-[0_18px_60px_rgba(0,0,0,0.28)] backdrop-blur">
+                <span class="h-2.5 w-2.5 animate-pulse rounded-full bg-cyan-300"></span>
+                Loading categories
+            </div>
+        </div>
     </div>
 
-    <div class="row">
-        @forelse ($contentTypes as $ct)
-            <div class="col-sm-12">
-                <div class="panel panel-default effect2">
-                    <div class="panel-heading"><strong>{{ $ct->name }}</strong></div>
-                    <div class="panel-body">
-                        <p>{!! $ct->description ?? 'Browse artworks by content type.' !!}</p>
-
-                        @forelse ($ct->roots as $cat)
-                            @php
-                                $name = $cat->category_name ?? '';
-                                $subs = $subgroups[$cat->category_id] ?? collect();
-                            @endphp
-                            <div class="legacy-root-category">
-                                <h4>{{ $name }}</h4>
-                                <ul class="browseList">
-                                    @forelse ($subs as $sub)
-                                        @php $picture = $sub->picture ?? 'cfolder15.gif'; @endphp
-                                        <li style="width:19%">
-                                            <img src="/gfx/icons/{{ $picture }}" width="15" height="15" border="0" alt="{{ $sub->category_name }}" />
-                                            <a href="/{{ $name }}/{{ Str::slug($sub->category_name) }}/{{ $sub->category_id }}" title="{{ $sub->category_name }}">{{ $sub->category_name }}</a>
-                                        </li>
-                                    @empty
-                                        <li class="text-muted">No subcategories</li>
-                                    @endforelse
-                                </ul>
-                            </div>
-                        @empty
-                            <div class="alert alert-info">No categories for this content type.</div>
-                        @endforelse
-                    </div>
-                </div>
-            </div>
-        @empty
-            <div class="col-xs-12">
-                <div class="alert alert-info">No content types available.</div>
-            </div>
-        @endforelse
-    </div>
-</div>
+    @vite(['resources/js/Pages/CategoriesPage.jsx'])
 @endsection