feat: ship creator journey v2 and profile updates

resources/views/layouts/nova.blade.php

@@ -1,6 +1,8 @@
 @php
     $gridVersion = request()->query('grid') === 'v2' ? 'v2' : 'v1';
     $deferToolbarSearch = request()->routeIs('index');
+    $deferFontAwesome = request()->routeIs('index');
+    $deferWebManifest = request()->routeIs('index');
     $isInertiaPage = isset($page) && is_array($page);
     $shouldRenderBladeSeo = ($useUnifiedSeo ?? false) && (($renderBladeSeo ?? false) || ! $isInertiaPage);
     $novaViteEntries = [
@@ -27,60 +29,148 @@
     {{-- Global RSS feed discovery --}}
     <link rel="alternate" type="application/rss+xml" title="Skinbase Latest Artworks" href="{{ url('/rss') }}">
 
-    <!-- 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" />
+    <!-- Icons: keep CDN delivery, but keep homepage webfonts out of the initial critical path -->
+    @if(!$deferFontAwesome)
+        <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
+        <link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
+        <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" as="style" crossorigin>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" media="print" onload="this.media='all'" crossorigin>
+        <noscript>
+            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin>
+        </noscript>
+    @endif
 
     <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
     <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
     <link rel="shortcut icon" href="/favicon/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
-    <link rel="manifest" href="/favicon/site.webmanifest" />
+    @if(!$deferWebManifest)
+        <link rel="manifest" href="/favicon/site.webmanifest" />
+    @endif
     @vite($novaViteEntries)
+    <script>
+        window.SKINBASE_LIMITS = Object.assign({}, window.SKINBASE_LIMITS || {}, {
+            tags: Object.assign({}, (window.SKINBASE_LIMITS && window.SKINBASE_LIMITS.tags) || {}, {
+                max_user_tags: @json((int) config('tags.max_user_tags', 30)),
+            }),
+        });
+    </script>
     @stack('head')
 
     @if($deferToolbarSearch)
         <script type="module">
         (() => {
             const searchEntryUrl = @js(Vite::asset('resources/js/entry-search.jsx'));
-            const triggerEvents = ['pointerdown', 'touchstart', 'focusin'];
             let searchLoaded = false;
 
-            const loadSearch = () => {
+            const loadSearch = (intent = null) => {
                 if (searchLoaded) {
                     return;
                 }
 
+                if (intent) {
+                    window.__sbSearchIntent = intent;
+                }
+
                 searchLoaded = true;
                 cleanup();
                 import(searchEntryUrl);
             };
 
+            const resolveIntent = (eventTarget) => {
+                return eventTarget?.closest?.('[data-search-intent]')?.getAttribute('data-search-intent') || null;
+            };
+
+            const handlePointerEnter = () => {
+                loadSearch();
+            };
+
+            const handleActivate = (event) => {
+                const intent = resolveIntent(event.target);
+                loadSearch(intent);
+            };
+
+            const handleShortcut = (event) => {
+                if (!((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k')) {
+                    return;
+                }
+
+                event.preventDefault();
+                loadSearch(window.matchMedia('(max-width: 767px)').matches ? 'mobile' : 'desktop');
+            };
+
             const onReady = () => {
                 const searchRoot = document.getElementById('topbar-search-root');
                 if (!searchRoot) {
                     return;
                 }
 
-                triggerEvents.forEach((eventName) => {
-                    searchRoot.addEventListener(eventName, loadSearch, { once: true, passive: true });
-                });
-
-                if ('requestIdleCallback' in window) {
-                    window.requestIdleCallback(loadSearch, { timeout: 2000 });
-                } else {
-                    window.setTimeout(loadSearch, 1500);
-                }
+                searchRoot.addEventListener('pointerenter', handlePointerEnter, { once: true, passive: true });
+                searchRoot.addEventListener('click', handleActivate, { passive: true });
+                searchRoot.addEventListener('touchstart', handleActivate, { passive: true });
+                document.addEventListener('keydown', handleShortcut);
             };
 
             const cleanup = () => {
                 const searchRoot = document.getElementById('topbar-search-root');
-                if (!searchRoot) {
+                if (searchRoot) {
+                    searchRoot.removeEventListener('pointerenter', handlePointerEnter);
+                    searchRoot.removeEventListener('click', handleActivate);
+                    searchRoot.removeEventListener('touchstart', handleActivate);
+                }
+                document.removeEventListener('keydown', handleShortcut);
+            };
+
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', onReady, { once: true });
+            } else {
+                onReady();
+            }
+        })();
+        </script>
+    @endif
+
+    @if($deferFontAwesome)
+        <script>
+        (() => {
+            const href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
+            const linkId = 'deferred-font-awesome';
+            let loaded = false;
+
+            const loadFontAwesome = () => {
+                if (loaded || document.getElementById(linkId)) {
                     return;
                 }
 
-                triggerEvents.forEach((eventName) => {
-                    searchRoot.removeEventListener(eventName, loadSearch);
-                });
+                loaded = true;
+                cleanup();
+
+                const link = document.createElement('link');
+                link.id = linkId;
+                link.rel = 'stylesheet';
+                link.href = href;
+                link.crossOrigin = 'anonymous';
+                document.head.appendChild(link);
+            };
+
+            const onReady = () => {
+                const toolbar = document.getElementById('nova-toolbar');
+
+                if (toolbar) {
+                    toolbar.addEventListener('pointerenter', loadFontAwesome, { once: true, passive: true });
+                    toolbar.addEventListener('focusin', loadFontAwesome, { once: true, passive: true });
+                    toolbar.addEventListener('pointerdown', loadFontAwesome, { once: true, passive: true });
+                }
+            };
+
+            const cleanup = () => {
+                const toolbar = document.getElementById('nova-toolbar');
+
+                if (toolbar) {
+                    toolbar.removeEventListener('pointerenter', loadFontAwesome);
+                    toolbar.removeEventListener('focusin', loadFontAwesome);
+                    toolbar.removeEventListener('pointerdown', loadFontAwesome);
+                }
             };
 
             if (document.readyState === 'loading') {

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

@@ -2,7 +2,7 @@
 <footer class="border-t border-neutral-800 bg-nova">
     <div class="px-6 md:px-10 py-8 flex flex-col md:flex-row md:items-center md:justify-between gap-2">
         <div class="text-xl font-semibold tracking-wide flex items-center gap-1">
-            <img src="https://cdn.skinbase.org/images/skinbase_logo_64.webp" alt="Skinbase" width="320" height="64" class="h-16 w-auto object-contain">
+            <img src="https://cdn.skinbase.org/images/skinbase_logo_64.webp" alt="" width="320" height="64" class="h-16 w-80 object-contain">
             <span class="sr-only">Skinbase</span>
         </div>
 

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

@@ -1,4 +1,4 @@
-<header class="fixed inset-x-0 top-0 z-50 h-16 bg-black/40 backdrop-blur border-b border-white/10">
+<header id="nova-toolbar" class="fixed inset-x-0 top-0 z-50 h-16 bg-black/40 backdrop-blur border-b border-white/10">
     <div class="mx-auto w-full h-full px-3 sm:px-4 flex items-center gap-2 sm:gap-3">
 
         <!-- Mobile hamburger -->
@@ -19,15 +19,29 @@
 
         <!-- Logo -->
         <a href="/" class="flex items-center gap-2 pr-2 shrink-0">
-            <img src="/gfx/sb_logo.webp" alt="Skinbase.org" width="289" height="100" class="h-9 w-auto rounded-sm shadow-sm object-contain">
+            <img src="/gfx/sb_logo.webp" alt="" width="289" height="100" class="h-9 w-auto rounded-sm shadow-sm object-contain">
             <span class="sr-only">Skinbase.org</span>
         </a>
 
         <!-- Desktop left nav: Discover · Browse · Groups · Creators · Community -->
         @php
+            $toolbarContentTypes = collect($toolbarContentTypes ?? []);
+            $toolbarContentTypeSlugs = $toolbarContentTypes
+                ->pluck('slug')
+                ->filter()
+                ->map(fn ($slug) => strtolower((string) $slug))
+                ->values()
+                ->all();
+            $toolbarContentTypeIcons = [
+                'photography' => 'fa-camera',
+                'wallpapers' => 'fa-desktop',
+                'skins' => 'fa-layer-group',
+                'digital-art' => 'fa-palette',
+                'other' => 'fa-folder-open',
+            ];
             $navSection = match(true) {
                 request()->is('discover', 'discover/*')                                                    => 'discover',
-                request()->is('browse', 'photography', 'wallpapers', 'skins', 'other', 'tags', 'tags/*') => 'browse',
+                request()->is(...array_merge(['browse', 'tags', 'tags/*'], $toolbarContentTypeSlugs))      => 'browse',
                 request()->is('groups', 'groups/*')                                                        => 'groups',
                 request()->is('creators', 'creators/*', 'stories', 'stories/*', 'following', 'leaderboard') => 'creators',
                 request()->is('forum', 'forum/*', 'news', 'news/*')                                       => 'community',
@@ -86,18 +100,15 @@
                     <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/explore">
                         <i class="fa-solid fa-border-all w-4 text-center text-sb-muted"></i>All Artworks
                     </a>
-                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/photography">
-                        <i class="fa-solid fa-camera w-4 text-center text-sb-muted"></i>Photography
-                    </a>
-                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/wallpapers">
-                        <i class="fa-solid fa-desktop w-4 text-center text-sb-muted"></i>Wallpapers
-                    </a>
-                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/skins">
-                        <i class="fa-solid fa-layer-group w-4 text-center text-sb-muted"></i>Skins
-                    </a>
-                    <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
+                    @foreach($toolbarContentTypes as $contentType)
+                    @php
+                        $contentTypeSlug = strtolower((string) $contentType->slug);
+                        $contentTypeIcon = $toolbarContentTypeIcons[$contentTypeSlug] ?? 'fa-folder-open';
+                    @endphp
+                    <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="/{{ $contentTypeSlug }}">
+                        <i class="fa-solid {{ $contentTypeIcon }} w-4 text-center text-sb-muted"></i>{{ $contentType->name }}
                     </a>
+                    @endforeach
                     <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>
@@ -197,7 +208,37 @@
 
         <!-- Search: collapsed pill → expands on click -->
         <div class="flex-1 flex items-center justify-center px-1 sm:px-2 min-w-0">
-            <div id="topbar-search-root" class="w-full flex justify-center"></div>
+            <div id="topbar-search-root" class="w-full flex justify-center">
+                @if(request()->routeIs('index'))
+                    <button
+                        type="button"
+                        data-search-intent="mobile"
+                        aria-label="Open search"
+                        class="md:hidden inline-flex items-center justify-center w-10 h-10 rounded-lg text-soft hover:text-white hover:bg-white/5 transition-colors"
+                    >
+                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" aria-hidden="true">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
+                        </svg>
+                    </button>
+
+                    <div class="hidden md:block w-full" style="max-width: clamp(8.75rem, 8vw + 4rem, 10.5rem);">
+                        <button
+                            type="button"
+                            data-search-intent="desktop"
+                            aria-label="Search"
+                            class="w-full h-10 flex items-center gap-2.5 px-3.5 rounded-lg bg-white/[0.05] border border-white/[0.09] text-soft hover:bg-white/[0.1] hover:border-white/20 hover:text-white transition-colors"
+                        >
+                            <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
+                            </svg>
+                            <span class="text-sm flex-1 text-left truncate">Search</span>
+                            <kbd class="hidden lg:inline-flex shrink-0 items-center gap-0.5 text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-white/[0.06] border border-white/[0.10] text-white/30">
+                                CtrlK
+                            </kbd>
+                        </button>
+                    </div>
+                @endif
+            </div>
         </div>
 
         @auth
@@ -230,13 +271,28 @@
             <div class="relative">
                 <button class="flex items-center gap-2 pl-1.5 sm:pl-2 pr-2 sm:pr-3 h-10 rounded-lg hover:bg-white/5 transition-colors shrink-0" data-dd="user">
                     @php
+                        $toolbarUser = Auth::user();
                         $toolbarUserId = (int) ($userId ?? Auth::id() ?? 0);
-                        $toolbarAvatarHash = $avatarHash ?? optional(Auth::user())->profile->avatar_hash ?? null;
+                        $toolbarAvatarHash = $avatarHash ?? optional($toolbarUser)->profile->avatar_hash ?? null;
+                        $toolbarEmailVerified = method_exists($toolbarUser, 'hasVerifiedEmail')
+                            ? $toolbarUser->hasVerifiedEmail()
+                            : !empty($toolbarUser?->email_verified_at);
+                        $toolbarVerificationNoticeRoute = Route::has('verification.notice') ? route('verification.notice') : null;
+                        $toolbarVerificationSendRoute = Route::has('verification.send') ? route('verification.send') : null;
+                        $toolbarVerificationLinkSent = session('status') === 'verification-link-sent';
                     @endphp
-                    <img class="w-7 h-7 rounded-full object-cover ring-1 ring-white/10"
-                        src="{{ \App\Support\AvatarUrl::forUser($toolbarUserId, $toolbarAvatarHash, 64) }}"
-                        alt="{{ $displayName ?? 'User' }}" />
+                    <span class="relative shrink-0">
+                        <img class="w-7 h-7 rounded-full object-cover ring-1 {{ $toolbarEmailVerified ? 'ring-white/10' : 'ring-amber-400/30' }}"
+                            src="{{ \App\Support\AvatarUrl::forUser($toolbarUserId, $toolbarAvatarHash, 64) }}"
+                            alt="" />
+                        @unless($toolbarEmailVerified)
+                        <span class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-amber-400 ring-2 ring-[#0b1220]" aria-hidden="true"></span>
+                        @endunless
+                    </span>
                     <span class="hidden min-[900px]:inline-block max-w-[8rem] truncate text-sm text-white/90">{{ $displayName ?? 'User' }}</span>
+                    @unless($toolbarEmailVerified)
+                    <span class="hidden xl:inline-flex items-center rounded-full border border-amber-400/25 bg-amber-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-amber-100">Verify email</span>
+                    @endunless
                     <svg class="w-4 h-4 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                         <path d="M6 9l6 6 6-6" />
                     </svg>
@@ -262,6 +318,50 @@
                             : route('setup.username.create');
                     @endphp
 
+                    @unless($toolbarEmailVerified)
+                    <div class="px-3 pt-3 pb-2">
+                        <div class="rounded-xl border border-amber-400/20 bg-amber-500/10 px-3 py-3 text-sm text-amber-50">
+                            <div class="flex items-start gap-3">
+                                <span class="mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-400/15 text-amber-200">
+                                    <i class="fa-solid fa-envelope-circle-check text-sm"></i>
+                                </span>
+                                <div class="min-w-0 flex-1">
+                                    <div class="font-semibold text-amber-100">Verify your email</div>
+                                    <p class="mt-1 text-xs leading-5 text-amber-100/85">
+                                        Confirm <span class="font-medium text-amber-50">{{ $toolbarUser?->email }}</span> to unlock medals and other mature-account actions.
+                                    </p>
+
+                                    @if($toolbarVerificationLinkSent)
+                                    <div class="mt-2 rounded-lg border border-emerald-400/20 bg-emerald-500/10 px-2.5 py-2 text-[11px] font-medium text-emerald-100">
+                                        A fresh verification link was sent to your email.
+                                    </div>
+                                    @endif
+
+                                    <div class="mt-3 flex flex-wrap gap-2">
+                                        @if($toolbarVerificationNoticeRoute)
+                                        <a class="inline-flex items-center rounded-lg border border-amber-300/25 bg-white/5 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-50 transition-colors hover:bg-white/10"
+                                            href="{{ $toolbarVerificationNoticeRoute }}">
+                                            Open verification page
+                                        </a>
+                                        @endif
+
+                                        @if($toolbarVerificationSendRoute)
+                                        <form method="POST" action="{{ $toolbarVerificationSendRoute }}">
+                                            @csrf
+                                            <button type="submit" class="inline-flex items-center rounded-lg border border-amber-300/25 bg-amber-300/10 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-amber-50 transition-colors hover:bg-amber-300/20">
+                                                Resend verification email
+                                            </button>
+                                        </form>
+                                        @endif
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="border-t border-panel my-1"></div>
+                    @endunless
+
                     <a class="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-white/5" href="{{ $routeUpload }}">
                         <span class="w-6 h-6 rounded-md bg-white/5 inline-flex items-center justify-center shrink-0"><i class="fa-solid fa-upload text-xs text-sb-muted"></i></span>
                         Upload
@@ -393,10 +493,13 @@
             </button>
             <div id="mobileSectionBrowse" data-mobile-section-panel class="hidden mt-0.5 space-y-0.5">
                 <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/browse"><i class="fa-solid fa-border-all w-4 text-center text-sb-muted"></i>All Artworks</a>
-                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/photography"><i class="fa-solid fa-camera w-4 text-center text-sb-muted"></i>Photography</a>
-                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/wallpapers"><i class="fa-solid fa-desktop w-4 text-center text-sb-muted"></i>Wallpapers</a>
-                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/skins"><i class="fa-solid fa-layer-group w-4 text-center text-sb-muted"></i>Skins</a>
-                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/other"><i class="fa-solid fa-folder-open w-4 text-center text-sb-muted"></i>Other</a>
+                @foreach($toolbarContentTypes as $contentType)
+                @php
+                    $contentTypeSlug = strtolower((string) $contentType->slug);
+                    $contentTypeIcon = $toolbarContentTypeIcons[$contentTypeSlug] ?? 'fa-folder-open';
+                @endphp
+                <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/{{ $contentTypeSlug }}"><i class="fa-solid {{ $contentTypeIcon }} w-4 text-center text-sb-muted"></i>{{ $contentType->name }}</a>
+                @endforeach
                 <a class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-white/5" href="/tags"><i class="fa-solid fa-tags w-4 text-center text-sb-muted"></i>Tags</a>
             </div>
         </div>