feat: ship creator journey v2 and profile updates
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user