449 lines
18 KiB
JavaScript
449 lines
18 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { Link, usePage } from '@inertiajs/react'
|
|
import { studioModule, studioSurface, trackStudioEvent } from '../utils/studioEvents'
|
|
|
|
const baseNavGroups = [
|
|
{
|
|
label: 'Creator Studio',
|
|
items: [
|
|
{ label: 'Overview', href: '/studio', icon: 'fa-solid fa-chart-line' },
|
|
{ label: 'Search', href: '/studio/search', icon: 'fa-solid fa-magnifying-glass' },
|
|
{ label: 'Groups', href: '/studio/groups', icon: 'fa-solid fa-people-group' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Create',
|
|
items: [
|
|
{ label: 'New Artwork', href: '/upload', icon: 'fa-solid fa-cloud-arrow-up' },
|
|
{ label: 'New Card', href: '/studio/cards/create', icon: 'fa-solid fa-id-card' },
|
|
{ label: 'New Story', href: '/creator/stories/create', icon: 'fa-solid fa-feather-pointed' },
|
|
{ label: 'New Collection', href: '/settings/collections/create', icon: 'fa-solid fa-layer-group' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Content',
|
|
items: [
|
|
{ label: 'All Content', href: '/studio/content', icon: 'fa-solid fa-table-cells-large' },
|
|
{ label: 'Artworks', href: '/studio/artworks', icon: 'fa-solid fa-images' },
|
|
{ label: 'Cards', href: '/studio/cards', icon: 'fa-solid fa-id-card' },
|
|
{ label: 'Collections', href: '/studio/collections', icon: 'fa-solid fa-layer-group' },
|
|
{ label: 'Stories', href: '/studio/stories', icon: 'fa-solid fa-feather-pointed' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Library',
|
|
items: [
|
|
{ label: 'Drafts', href: '/studio/drafts', icon: 'fa-solid fa-file-pen' },
|
|
{ label: 'Scheduled', href: '/studio/scheduled', icon: 'fa-solid fa-calendar-days' },
|
|
{ label: 'Calendar', href: '/studio/calendar', icon: 'fa-solid fa-calendar-range' },
|
|
{ label: 'Archived', href: '/studio/archived', icon: 'fa-solid fa-box-archive' },
|
|
{ label: 'Assets', href: '/studio/assets', icon: 'fa-solid fa-photo-film' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Engagement',
|
|
items: [
|
|
{ label: 'Inbox', href: '/studio/inbox', icon: 'fa-solid fa-inbox' },
|
|
{ label: 'Activity', href: '/studio/activity', icon: 'fa-solid fa-bell' },
|
|
{ label: 'Comments', href: '/studio/comments', icon: 'fa-solid fa-comments' },
|
|
{ label: 'Followers', href: '/studio/followers', icon: 'fa-solid fa-user-group' },
|
|
{ label: 'Challenges', href: '/studio/challenges', icon: 'fa-solid fa-trophy' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Insights',
|
|
items: [
|
|
{ label: 'Analytics', href: '/studio/analytics', icon: 'fa-solid fa-chart-pie' },
|
|
{ label: 'Growth', href: '/studio/growth', icon: 'fa-solid fa-chart-line' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Creator',
|
|
items: [
|
|
{ label: 'Profile', href: '/studio/profile', icon: 'fa-solid fa-id-card' },
|
|
{ label: 'Featured Content', href: '/studio/featured', icon: 'fa-solid fa-wand-magic-sparkles' },
|
|
{ label: 'Preferences', href: '/studio/preferences', icon: 'fa-solid fa-sliders' },
|
|
{ label: 'Studio Settings', href: '/studio/settings', icon: 'fa-solid fa-gear' },
|
|
],
|
|
},
|
|
]
|
|
|
|
const baseQuickCreateItems = [
|
|
{ label: 'Artwork', href: '/upload', icon: 'fa-solid fa-cloud-arrow-up' },
|
|
{ label: 'Card', href: '/studio/cards/create', icon: 'fa-solid fa-id-card' },
|
|
{ label: 'Story', href: '/creator/stories/create', icon: 'fa-solid fa-feather-pointed' },
|
|
{ label: 'Collection', href: '/settings/collections/create', icon: 'fa-solid fa-layer-group' },
|
|
]
|
|
|
|
const STUDIO_CONTEXT_STORAGE_KEY = 'sb.studio.last-context'
|
|
const RESTORABLE_STUDIO_PATHS = ['/studio', '/studio/artworks', '/studio/collections', '/studio/settings']
|
|
|
|
function supportsStudioContextRestore(pathname) {
|
|
return RESTORABLE_STUDIO_PATHS.includes(pathname)
|
|
}
|
|
|
|
function studioRouteKeyForPath(pathname) {
|
|
if (pathname === '/studio/artworks' || pathname.endsWith('/artworks')) return 'studio_artworks_url'
|
|
if (pathname === '/studio/collections' || pathname.endsWith('/collections')) return 'studio_collections_url'
|
|
if (pathname === '/studio/settings' || pathname.endsWith('/settings')) return 'studio_settings_url'
|
|
if (pathname.endsWith('/members')) return 'studio_members_url'
|
|
if (pathname.endsWith('/invitations')) return 'studio_invitations_url'
|
|
|
|
return 'studio_url'
|
|
}
|
|
|
|
function nestedRouteKeyFor(topLevelRouteKey) {
|
|
return topLevelRouteKey.replace(/_url$/, '')
|
|
}
|
|
|
|
function groupStudioUrlForPath(group, pathname) {
|
|
if (!group) return '/studio'
|
|
|
|
const routeKey = studioRouteKeyForPath(pathname)
|
|
const nestedRouteKey = nestedRouteKeyFor(routeKey)
|
|
|
|
return group[routeKey] || group.urls?.[nestedRouteKey] || group.studio_url || group.urls?.studio || '/studio'
|
|
}
|
|
|
|
function personalStudioUrlForPath(pathname) {
|
|
if (pathname === '/studio/artworks' || pathname.endsWith('/artworks')) return '/studio/artworks'
|
|
if (pathname === '/studio/collections' || pathname.endsWith('/collections')) return '/studio/collections'
|
|
if (pathname === '/studio/settings' || pathname.endsWith('/settings')) return '/studio/settings'
|
|
|
|
return '/studio'
|
|
}
|
|
|
|
function persistStudioContext(slug) {
|
|
if (typeof window === 'undefined') return
|
|
|
|
try {
|
|
window.sessionStorage.setItem(STUDIO_CONTEXT_STORAGE_KEY, slug || '')
|
|
} catch {
|
|
// Ignore storage failures so Studio navigation keeps working.
|
|
}
|
|
}
|
|
|
|
function readPersistedStudioContext() {
|
|
if (typeof window === 'undefined') return null
|
|
|
|
try {
|
|
return window.sessionStorage.getItem(STUDIO_CONTEXT_STORAGE_KEY)
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
function navigateToStudioUrl(targetUrl) {
|
|
if (typeof window === 'undefined' || !targetUrl) return
|
|
|
|
if (typeof window.location?.assign === 'function') {
|
|
window.location.assign(targetUrl)
|
|
return
|
|
}
|
|
|
|
window.location.href = targetUrl
|
|
}
|
|
|
|
function NavLink({ item, active }) {
|
|
return (
|
|
<Link
|
|
href={item.href}
|
|
className={`flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ${
|
|
active
|
|
? 'bg-accent/20 text-accent shadow-sm shadow-accent/10'
|
|
: 'text-slate-400 hover:text-white hover:bg-white/5'
|
|
}`}
|
|
>
|
|
<i className={`${item.icon} w-5 text-center text-base`} />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default function StudioLayout({ children, title, subtitle, actions }) {
|
|
const { url, props } = usePage()
|
|
const [mobileOpen, setMobileOpen] = useState(false)
|
|
const [createOpen, setCreateOpen] = useState(false)
|
|
const pathname = url.split('?')[0]
|
|
const studioGroups = Array.isArray(props.studio_groups) ? props.studio_groups : []
|
|
const currentGroup = props.studioGroup || null
|
|
const canManageNews = Boolean(props.auth?.user?.is_admin || props.auth?.user?.is_moderator)
|
|
|
|
const navGroups = baseNavGroups.map((group) => {
|
|
if (!canManageNews || group.label !== 'Content') {
|
|
return group
|
|
}
|
|
|
|
return {
|
|
...group,
|
|
items: [
|
|
...group.items,
|
|
{ label: 'News', href: '/studio/news', icon: 'fa-solid fa-newspaper' },
|
|
],
|
|
}
|
|
})
|
|
|
|
const quickCreateItems = (canManageNews
|
|
? [...baseQuickCreateItems, { label: 'News Article', href: '/studio/news/create', icon: 'fa-solid fa-newspaper' }]
|
|
: baseQuickCreateItems
|
|
).map((item) => {
|
|
if (currentGroup?.urls && item.label === 'Artwork') {
|
|
return { ...item, href: currentGroup.urls?.studio_artworks ? `/upload?group=${currentGroup.slug}` : item.href }
|
|
}
|
|
|
|
if (currentGroup?.urls && item.label === 'Collection') {
|
|
return { ...item, href: `/settings/collections/create?group=${currentGroup.slug}` }
|
|
}
|
|
|
|
return item
|
|
})
|
|
|
|
useEffect(() => {
|
|
const moduleKey = studioModule(pathname)
|
|
const surface = studioSurface(pathname)
|
|
|
|
trackStudioEvent('studio_opened', {
|
|
surface,
|
|
module: moduleKey,
|
|
})
|
|
|
|
trackStudioEvent('studio_module_opened', {
|
|
surface,
|
|
module: moduleKey,
|
|
})
|
|
}, [pathname])
|
|
|
|
useEffect(() => {
|
|
if (!currentGroup?.slug) return
|
|
|
|
persistStudioContext(currentGroup.slug)
|
|
}, [currentGroup?.slug])
|
|
|
|
useEffect(() => {
|
|
if (currentGroup || !supportsStudioContextRestore(pathname)) return
|
|
|
|
const storedSlug = readPersistedStudioContext()
|
|
if (!storedSlug) return
|
|
|
|
const nextGroup = studioGroups.find((group) => group.slug === storedSlug)
|
|
if (!nextGroup) {
|
|
persistStudioContext('')
|
|
return
|
|
}
|
|
|
|
const targetUrl = groupStudioUrlForPath(nextGroup, pathname)
|
|
|
|
if (targetUrl && targetUrl !== pathname) {
|
|
navigateToStudioUrl(targetUrl)
|
|
}
|
|
}, [currentGroup, pathname, studioGroups])
|
|
|
|
const isActive = (href) => {
|
|
if (href === '/studio') return pathname === '/studio'
|
|
return pathname.startsWith(href)
|
|
}
|
|
|
|
const handleQuickCreateClick = (item) => {
|
|
trackStudioEvent('studio_quick_create_used', {
|
|
surface: studioSurface(pathname),
|
|
module: item.label.toLowerCase(),
|
|
meta: {
|
|
href: item.href,
|
|
label: item.label,
|
|
},
|
|
})
|
|
}
|
|
|
|
const handleContextChange = (nextSlug) => {
|
|
persistStudioContext(nextSlug)
|
|
|
|
const nextGroup = studioGroups.find((group) => group.slug === nextSlug)
|
|
const targetUrl = nextGroup
|
|
? groupStudioUrlForPath(nextGroup, pathname)
|
|
: personalStudioUrlForPath(pathname)
|
|
|
|
if (targetUrl !== pathname) {
|
|
navigateToStudioUrl(targetUrl)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.12),_transparent_30%),radial-gradient(circle_at_bottom_right,_rgba(34,197,94,0.12),_transparent_35%),linear-gradient(180deg,_#06101d_0%,_#020617_45%,_#02040a_100%)]">
|
|
<div className="sticky top-16 z-30 border-b border-white/10 bg-slate-950/80 backdrop-blur-xl lg:hidden">
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/70">Creator Studio</p>
|
|
<h1 className="text-lg font-bold text-white">{title || 'Creator Studio'}</h1>
|
|
</div>
|
|
<button
|
|
onClick={() => setMobileOpen(!mobileOpen)}
|
|
className="rounded-full border border-white/10 p-2 text-slate-400 hover:text-white"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<i className={`fa-solid ${mobileOpen ? 'fa-xmark' : 'fa-bars'} text-xl`} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{mobileOpen && (
|
|
<div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden" onClick={() => setMobileOpen(false)}>
|
|
<nav
|
|
className="absolute left-0 top-0 bottom-0 w-80 overflow-y-auto border-r border-white/10 bg-slate-950 p-4 pt-20"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<StudioSidebarContent
|
|
currentGroup={currentGroup}
|
|
studioGroups={studioGroups}
|
|
navGroups={navGroups}
|
|
quickCreateItems={quickCreateItems}
|
|
isActive={isActive}
|
|
onNavigate={() => setMobileOpen(false)}
|
|
onQuickCreate={handleQuickCreateClick}
|
|
onContextChange={handleContextChange}
|
|
/>
|
|
</nav>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex">
|
|
<aside className="sticky top-16 hidden min-h-[calc(100vh-4rem)] w-72 self-start border-r border-white/10 bg-slate-950/55 p-4 pt-6 backdrop-blur-xl lg:flex lg:flex-col">
|
|
<StudioSidebarContent
|
|
currentGroup={currentGroup}
|
|
studioGroups={studioGroups}
|
|
navGroups={navGroups}
|
|
quickCreateItems={quickCreateItems}
|
|
isActive={isActive}
|
|
onQuickCreate={handleQuickCreateClick}
|
|
onContextChange={handleContextChange}
|
|
/>
|
|
</aside>
|
|
|
|
<main className="min-w-0 flex-1 px-4 pb-10 pt-4 lg:px-8 lg:pt-6">
|
|
<section className="mb-6 rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.12),_transparent_28%),radial-gradient(circle_at_bottom_right,_rgba(56,189,248,0.12),_transparent_35%),linear-gradient(135deg,_rgba(15,23,42,0.84),_rgba(2,6,23,0.95))] p-5 shadow-[0_22px_70px_rgba(2,6,23,0.32)] lg:p-6">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
|
<div className="max-w-3xl">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/70">Creator Studio</p>
|
|
{title && <h1 className="mt-2 text-3xl font-semibold text-white lg:text-4xl">{title}</h1>}
|
|
{subtitle && <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-300">{subtitle}</p>}
|
|
{currentGroup ? <p className="mt-4 inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-sky-100">Group context: {currentGroup.name}</p> : null}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-3 lg:justify-end">
|
|
{studioGroups.length > 0 ? <ContextSwitcher currentGroup={currentGroup} studioGroups={studioGroups} onContextChange={handleContextChange} /> : null}
|
|
{actions}
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => setCreateOpen((current) => !current)}
|
|
className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15"
|
|
>
|
|
<i className="fa-solid fa-plus" />
|
|
Create New
|
|
</button>
|
|
{createOpen && (
|
|
<div className="absolute right-0 top-[calc(100%+0.75rem)] z-20 min-w-[220px] rounded-[24px] border border-white/10 bg-slate-950/95 p-2 shadow-[0_18px_40px_rgba(2,6,23,0.5)] backdrop-blur-xl">
|
|
{quickCreateItems.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={() => handleQuickCreateClick(item)}
|
|
className="flex items-center gap-3 rounded-2xl px-4 py-3 text-sm text-slate-200 transition hover:bg-white/[0.06] hover:text-white"
|
|
>
|
|
<i className={`${item.icon} w-5 text-center text-sky-200`} />
|
|
<span>New {item.label}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ContextSwitcher({ currentGroup, studioGroups, onContextChange }) {
|
|
return (
|
|
<label className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/20 px-3 py-2 text-sm text-slate-200">
|
|
<i className="fa-solid fa-people-group text-sky-200" />
|
|
<select
|
|
value={currentGroup?.slug || ''}
|
|
onChange={(event) => onContextChange?.(event.target.value)}
|
|
className="bg-transparent text-sm text-white outline-none"
|
|
>
|
|
<option value="" className="bg-slate-950 text-white">Personal studio</option>
|
|
{studioGroups.map((group) => (
|
|
<option key={group.slug} value={group.slug} className="bg-slate-950 text-white">
|
|
{group.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
)
|
|
}
|
|
|
|
function StudioSidebarContent({ currentGroup, studioGroups, navGroups, quickCreateItems, isActive, onNavigate, onQuickCreate, onContextChange }) {
|
|
return (
|
|
<>
|
|
<div className="mb-6 rounded-[26px] border border-white/10 bg-white/[0.04] p-4">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Skinbase Nova</p>
|
|
<h2 className="mt-2 text-xl font-semibold text-white">Creator Studio</h2>
|
|
<p className="mt-2 text-sm leading-6 text-slate-400">Create, manage, and grow from one modular workspace built for every creator surface.</p>
|
|
{studioGroups.length > 0 ? (
|
|
<div className="mt-4 rounded-2xl border border-white/10 bg-black/20 p-3">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Context</p>
|
|
<select
|
|
value={currentGroup?.slug || ''}
|
|
onChange={(event) => onContextChange?.(event.target.value)}
|
|
className="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/80 px-3 py-2 text-sm text-white outline-none"
|
|
>
|
|
<option value="">Personal studio</option>
|
|
{studioGroups.map((group) => (
|
|
<option key={group.slug} value={group.slug}>{group.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<nav className="flex-1 space-y-5" onClick={onNavigate}>
|
|
{navGroups.map((group) => (
|
|
<div key={group.label}>
|
|
<h3 className="mb-2 px-3 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">{group.label}</h3>
|
|
<div className="space-y-1">
|
|
{group.items.map((item) => (
|
|
<NavLink key={item.href} item={item} active={isActive(item.href)} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="mt-6 rounded-[24px] border border-white/10 bg-[linear-gradient(135deg,_rgba(15,23,42,0.95),_rgba(12,74,110,0.4))] p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-sky-100/70">Quick create</p>
|
|
<div className="mt-3 grid gap-2">
|
|
{quickCreateItems.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
className="inline-flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-100 transition hover:border-white/20 hover:bg-white/[0.06]"
|
|
onClick={() => {
|
|
onQuickCreate?.(item)
|
|
onNavigate?.()
|
|
}}
|
|
>
|
|
<i className={`${item.icon} w-5 text-center text-sky-200`} />
|
|
<span>New {item.label}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|