klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor dashboard and upload flows

Browse Source 
Remove dead admin UI code, redesign dashboard followers/following and upload experiences, and add schema audit tooling with repair migrations for forum and upload drift.
This commit is contained in:
Gregor Klevže
2026-03-21 11:02:22 +01:00
parent 29c3ff8572
commit 979e011257
55 changed files with 2576 additions and 1923 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
resources/js/dashboard/DashboardPage.jsx
View File

@@ -359,26 +359,60 @@ function SuggestionChip({ href, label, icon, highlight = false, onNavigate }) {
)
}
function OverviewMetric({ label, value, href, icon, accent = 'sky', onNavigate }) {
function OverviewMetric({ label, value, href, icon, accent = 'sky', caption = null, onNavigate }) {
const accents = {
sky: 'text-sky-200 border-sky-300/20 bg-sky-400/10',
amber: 'text-amber-200 border-amber-300/20 bg-amber-400/10',
emerald: 'text-emerald-200 border-emerald-300/20 bg-emerald-400/10',
rose: 'text-rose-200 border-rose-300/20 bg-rose-400/10',
slate: 'text-slate-200 border-white/10 bg-white/5',
sky: {
icon: 'text-sky-100 border-sky-300/20 bg-sky-400/12',
card: 'hover:border-sky-300/35 hover:bg-[#102033]',
glow: 'from-sky-400/18 via-sky-400/8 to-transparent',
caption: 'text-sky-100/75',
},
amber: {
icon: 'text-amber-100 border-amber-300/20 bg-amber-400/12',
card: 'hover:border-amber-300/35 hover:bg-[#1a2130]',
glow: 'from-amber-400/18 via-amber-400/8 to-transparent',
caption: 'text-amber-100/75',
},
emerald: {
icon: 'text-emerald-100 border-emerald-300/20 bg-emerald-400/12',
card: 'hover:border-emerald-300/35 hover:bg-[#0f2130]',
glow: 'from-emerald-400/18 via-emerald-400/8 to-transparent',
caption: 'text-emerald-100/75',
},
rose: {
icon: 'text-rose-100 border-rose-300/20 bg-rose-400/12',
card: 'hover:border-rose-300/35 hover:bg-[#1d1d31]',
glow: 'from-rose-400/18 via-rose-400/8 to-transparent',
caption: 'text-rose-100/75',
},
slate: {
icon: 'text-slate-100 border-white/10 bg-white/5',
card: 'hover:border-white/20 hover:bg-[#102033]',
glow: 'from-white/10 via-white/5 to-transparent',
caption: 'text-slate-300/80',
},
}
const tone = accents[accent] || accents.slate
return (
<a
href={href}
onClick={() => onNavigate?.(href, label)}
className="group rounded-2xl border border-white/10 bg-[#0b1826]/85 p-4 shadow-lg shadow-black/20 transition hover:-translate-y-0.5 hover:border-sky-300/35 hover:bg-[#102033]"
className={[
'group relative overflow-hidden rounded-2xl border border-white/10 bg-[#0b1826]/85 p-4 shadow-lg shadow-black/20 transition hover:-translate-y-0.5',
tone.card,
].join(' ')}
>
<div className={`pointer-events-none absolute inset-x-0 top-0 h-20 bg-gradient-to-b ${tone.glow}`} />
<div className="flex items-center justify-between gap-3">
<span className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl border ${accents[accent] || accents.slate}`}>
<span className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl border ${tone.icon}`}>
<i className={icon} aria-hidden="true" />
</span>
<span className="text-2xl font-semibold text-white">{value}</span>
<div className="text-right">
<span className="block text-2xl font-semibold text-white">{value}</span>
{caption ? <span className={`mt-1 block text-[11px] uppercase tracking-[0.16em] ${tone.caption}`}>{caption}</span> : null}
</div>
</div>
<p className="mt-4 text-xs uppercase tracking-[0.18em] text-slate-400">{label}</p>
</a>
@@ -386,15 +420,64 @@ function OverviewMetric({ label, value, href, icon, accent = 'sky', onNavigate }
}
function SectionLinkCard({ item, onNavigate, onTogglePin, isPinned = false }) {
const accents = {
sky: {
icon: 'border-sky-300/20 bg-sky-400/12 text-sky-100',
badge: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
preview: 'text-sky-200/80',
open: 'text-sky-100',
hover: 'hover:border-sky-300/35 hover:bg-[#102033]',
glow: 'from-sky-400/16 via-sky-400/8 to-transparent',
},
emerald: {
icon: 'border-emerald-300/20 bg-emerald-400/12 text-emerald-100',
badge: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
preview: 'text-emerald-200/80',
open: 'text-emerald-100',
hover: 'hover:border-emerald-300/35 hover:bg-[#102033]',
glow: 'from-emerald-400/16 via-emerald-400/8 to-transparent',
},
amber: {
icon: 'border-amber-300/20 bg-amber-400/12 text-amber-100',
badge: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
preview: 'text-amber-200/80',
open: 'text-amber-100',
hover: 'hover:border-amber-300/35 hover:bg-[#1a2130]',
glow: 'from-amber-400/16 via-amber-400/8 to-transparent',
},
rose: {
icon: 'border-rose-300/20 bg-rose-400/12 text-rose-100',
badge: 'border-rose-300/20 bg-rose-400/10 text-rose-100',
preview: 'text-rose-200/80',
open: 'text-rose-100',
hover: 'hover:border-rose-300/35 hover:bg-[#1d1d31]',
glow: 'from-rose-400/16 via-rose-400/8 to-transparent',
},
slate: {
icon: 'border-white/10 bg-white/5 text-sky-200',
badge: 'border-white/10 bg-white/5 text-slate-200',
preview: 'text-sky-200/80',
open: 'text-sky-100',
hover: 'hover:border-white/20 hover:bg-[#102033]',
glow: 'from-white/10 via-white/5 to-transparent',
},
}
const tone = accents[item.accent] || accents.slate
return (
<article className="group rounded-2xl border border-white/10 bg-[#0b1826]/80 p-4 shadow-lg shadow-black/20 transition hover:-translate-y-0.5 hover:border-sky-300/35 hover:bg-[#102033]">
<article className={[
'group relative overflow-hidden rounded-2xl border border-white/10 bg-[#0b1826]/80 p-4 shadow-lg shadow-black/20 transition hover:-translate-y-0.5',
tone.hover,
].join(' ')}>
<div className={`pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b ${tone.glow}`} />
<div className="flex items-start justify-between gap-3">
<span className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-lg text-sky-200">
<span className={`inline-flex h-11 w-11 items-center justify-center rounded-2xl border text-lg ${tone.icon}`}>
<i className={item.icon} aria-hidden="true" />
</span>
<div className="flex items-center gap-2">
{item.badge ? (
<span className="rounded-full border border-sky-300/20 bg-sky-400/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-sky-100">
<span className={`rounded-full border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] ${tone.badge}`}>
{item.badge}
</span>
) : null}
@@ -418,12 +501,12 @@ function SectionLinkCard({ item, onNavigate, onTogglePin, isPinned = false }) {
<div className="mt-4">
<h3 className="text-base font-semibold text-white transition group-hover:text-sky-100">{item.label}</h3>
<p className="mt-2 text-sm leading-6 text-slate-300">{item.description}</p>
{item.preview ? <p className="mt-3 text-xs font-semibold uppercase tracking-[0.14em] text-sky-200/80">{item.preview}</p> : null}
{item.preview ? <p className={`mt-3 text-xs font-semibold uppercase tracking-[0.14em] ${tone.preview}`}>{item.preview}</p> : null}
</div>
<div className="mt-4 flex items-center justify-between gap-3 text-xs uppercase tracking-[0.18em] text-slate-400">
<span>{item.meta}</span>
<a href={item.href} onClick={() => onNavigate?.(item.href, item.label)} className="text-sky-200 transition group-hover:translate-x-0.5">
<a href={item.href} onClick={() => onNavigate?.(item.href, item.label)} className={`${tone.open} transition group-hover:translate-x-0.5`}>
Open
</a>
</div>
@@ -849,8 +932,8 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
},
{
eyebrow: 'Community',
title: 'Followers, following, and saved work',
description: 'Move between your people-focused spaces without digging through the navigation.',
title: 'Audience, network, and saved work',
description: 'Stay close to the people around your account, from new followers to the creators shaping your feed.',
items: [
{
label: 'Followers',
@@ -860,6 +943,7 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
meta: 'Dashboard Followers',
badge: overviewStats.followers > 0 ? String(overviewStats.followers) : null,
preview: previewLabelForRoute('/dashboard/followers', overviewStats),
accent: 'sky',
},
{
label: 'Following',
@@ -869,6 +953,7 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
meta: 'Dashboard Following',
badge: overviewStats.following > 0 ? String(overviewStats.following) : null,
preview: previewLabelForRoute('/dashboard/following', overviewStats),
accent: 'emerald',
},
{
label: 'Favorites',
@@ -878,6 +963,7 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
meta: 'Dashboard Favorites',
badge: overviewStats.favorites > 0 ? String(overviewStats.favorites) : null,
preview: previewLabelForRoute('/dashboard/favorites', overviewStats),
accent: 'rose',
},
],
},
@@ -933,6 +1019,7 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
href: '/dashboard/notifications',
icon: 'fa-solid fa-bell',
accent: overviewStats.notifications > 0 ? 'amber' : 'slate',
caption: overviewStats.notifications > 0 ? 'Needs review' : 'All clear',
},
{
label: 'Followers',
@@ -940,13 +1027,15 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
href: '/dashboard/followers',
icon: 'fa-solid fa-user-group',
accent: 'sky',
caption: overviewStats.followers > 0 ? 'Audience' : 'Build audience',
},
{
label: 'Following',
value: overviewStats.following,
href: '/dashboard/following',
icon: 'fa-solid fa-users',
accent: 'slate',
accent: 'emerald',
caption: overviewStats.following > 0 ? 'Network' : 'Find creators',
},
{
label: 'Saved favorites',
@@ -954,6 +1043,7 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
href: '/dashboard/favorites',
icon: 'fa-solid fa-bookmark',
accent: 'rose',
caption: overviewStats.favorites > 0 ? 'Inspiration' : 'Nothing saved',
},
{
label: 'Artworks',
@@ -961,6 +1051,7 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
href: '/dashboard/artworks',
icon: 'fa-solid fa-layer-group',
accent: 'emerald',
caption: overviewStats.artworks > 0 ? 'Portfolio' : 'Start uploading',
},
{
label: 'Stories',
@@ -968,6 +1059,7 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
href: isCreator ? '/creator/stories' : '/creator/stories/create',
icon: 'fa-solid fa-pen-nib',
accent: 'amber',
caption: overviewStats.stories > 0 ? 'Creator voice' : 'Tell your story',
},
]
const suggestions = [
@@ -1069,7 +1161,7 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
<h1 className="mt-3 max-w-3xl text-3xl font-semibold tracking-tight text-white sm:text-4xl">
Welcome back, {username}
</h1>
<div className="mt-4 flex items-center gap-2">
<div className="mt-4 flex flex-wrap items-center gap-2">
<LevelBadge level={level} rank={rank} />
</div>
<p className="mt-4 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">
@@ -1090,7 +1182,7 @@ export default function DashboardPage({ username, isCreator, level, rank, receiv
/>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
<HeroStat label="Level" value={`Lv. ${level}`} tone="sky" />
<HeroStat label="Rank" value={rank} tone="amber" />
<HeroStat

102
resources/js/dashboard/components/ActivityFeed.jsx
View File

@@ -1,29 +1,36 @@
import React, { useEffect, useState } from 'react'
function actorLabel(item) {
if (!item?.user) {
return 'Someone'
if (!item?.actor) {
return item?.type === 'notification' ? 'System' : 'Someone'
}
return item.user.username ? `@${item.user.username}` : item.user.name || 'User'
return item.actor.username ? `@${item.actor.username}` : item.actor.name || 'User'
}
function describeActivity(item) {
const artworkTitle = item?.artwork?.title || 'an artwork'
const mentionTarget = item?.mentioned_user?.username || item?.mentioned_user?.name || 'someone'
const reactionLabel = item?.reaction?.label || 'reacted'
switch (item?.type) {
case 'comment':
return `commented on ${artworkTitle}`
case 'reply':
return `replied on ${artworkTitle}`
case 'reaction':
return `${reactionLabel.toLowerCase()} on ${artworkTitle}`
case 'mention':
return `mentioned @${mentionTarget} on ${artworkTitle}`
return item?.context?.artwork_title ? `commented on ${item.context.artwork_title}` : 'commented on your artwork'
case 'new_follower':
return 'started following you'
case 'notification':
return item?.message || 'sent a notification'
default:
return 'shared new activity'
return item?.message || 'shared new activity'
}
}
function activityIcon(type) {
switch (type) {
case 'comment':
return 'fa-solid fa-comment-dots'
case 'new_follower':
return 'fa-solid fa-user-plus'
case 'notification':
return 'fa-solid fa-bell'
default:
return 'fa-solid fa-bolt'
}
}
@@ -76,17 +83,26 @@ export default function ActivityFeed() {
}, [])
return (
<section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
<div className="mb-4 flex items-center justify-between">
<h2 className="text-xl font-semibold">Activity Feed</h2>
<span className="text-xs text-gray-400">Recent actions</span>
<section className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.82))] p-5 shadow-[0_24px_90px_rgba(2,8,23,0.32)]">
<div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div>
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Live activity</p>
<h2 className="mt-2 text-xl font-semibold text-white">Activity Feed</h2>
<p className="mt-2 max-w-xl text-sm leading-6 text-slate-300">
Recent followers, artwork comments, and notifications that deserve your attention.
</p>
</div>
<span className="inline-flex items-center justify-center rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-300 sm:justify-start">Recent actions</span>
</div>
{loading ? <p className="text-sm text-gray-400">Loading activity...</p> : null}
{loading ? <p className="text-sm text-slate-400">Loading activity...</p> : null}
{error ? <p className="text-sm text-rose-300">{error}</p> : null}
{!loading && !error && items.length === 0 ? (
<p className="text-sm text-gray-400">No recent activity yet.</p>
<div className="rounded-2xl border border-white/8 bg-white/5 px-5 py-6 text-sm text-slate-300">
<p className="font-medium text-white">No recent activity yet.</p>
<p className="mt-2 text-slate-400">New followers, comments, and notifications will appear here as they happen.</p>
</div>
) : null}
{!loading && !error && items.length > 0 ? (
@@ -96,19 +112,43 @@ export default function ActivityFeed() {
key={item.id}
className={`rounded-xl border p-3 transition ${
item.is_unread
? 'border-cyan-500/40 bg-cyan-500/10'
: 'border-gray-700 bg-gray-900/60'
? 'border-sky-400/30 bg-sky-400/10'
: 'border-white/8 bg-white/[0.04]'
}`}
>
<div className="flex items-start justify-between gap-2">
<p className="text-sm text-gray-100">
<span className="font-semibold text-white">{actorLabel(item)}</span> {describeActivity(item)}
</p>
<div className="flex items-start gap-3">
<div className="flex h-11 w-11 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-slate-950/60">
{item.actor?.avatar ? (
<img src={item.actor.avatar} alt={actorLabel(item)} className="h-full w-full object-cover" />
) : (
<i className={`${activityIcon(item.type)} text-sm text-sky-100/80`} />
)}
</div>
<div className="min-w-0 flex-1">
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
<div>
<p className="text-sm text-slate-100">
<span className="font-semibold text-white">{actorLabel(item)}</span>{' '}
<span>{describeActivity(item)}</span>
</p>
{item.message && item.type !== 'notification' ? (
<p className="mt-1 text-xs text-slate-400">{item.message}</p>
) : null}
</div>
<span className="text-[11px] uppercase tracking-wide text-slate-400 sm:shrink-0">{timeLabel(item.created_at)}</span>
</div>
{item.context?.artwork_url ? (
<a
href={item.context.artwork_url}
className="mt-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-slate-200 transition hover:border-white/20 hover:bg-white/10"
>
View artwork
<i className="fa-solid fa-arrow-right text-[10px]" />
</a>
) : null}
</div>
</div>
{item.comment?.body ? (
<p className="mt-2 line-clamp-2 text-xs text-gray-300">{item.comment.body}</p>
) : null}
<p className="mt-2 text-xs text-gray-400">{timeLabel(item.created_at)}</p>
</article>
))}
</div>

21
resources/js/dashboard/components/CreatorAnalytics.jsx
View File

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react'
function Widget({ label, value }) {
return (
<div className="rounded-xl border border-gray-700 bg-gray-900/70 p-4 shadow-lg transition hover:scale-[1.02]">
<p className="text-xs uppercase tracking-wide text-gray-400">{label}</p>
<div className="rounded-2xl border border-white/8 bg-white/[0.04] p-4 shadow-lg transition hover:-translate-y-0.5 hover:border-white/15 hover:bg-white/[0.06]">
<p className="text-[11px] uppercase tracking-[0.16em] text-slate-400">{label}</p>
<p className="mt-2 text-2xl font-semibold text-white">{value}</p>
</div>
)
@@ -37,18 +37,23 @@ export default function CreatorAnalytics({ isCreator }) {
}, [])
return (
<section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
<div className="mb-4 flex items-center justify-between">
<h2 className="text-xl font-semibold">Creator Analytics</h2>
<a href="/creator/analytics" className="text-xs text-cyan-300 hover:text-cyan-200">
<section className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.82))] p-5 shadow-[0_24px_90px_rgba(2,8,23,0.32)]">
<div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div>
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Creator space</p>
<h2 className="mt-2 text-xl font-semibold text-white">Creator Analytics</h2>
<p className="mt-2 max-w-md text-sm leading-6 text-slate-300">Snapshot metrics for the work you publish and the audience building around it.</p>
</div>
<a href="/creator/analytics" className="inline-flex items-center justify-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15 sm:justify-start">
Open analytics
<i className="fa-solid fa-arrow-right text-[10px]" />
</a>
</div>
{loading ? <p className="text-sm text-gray-400">Loading analytics...</p> : null}
{loading ? <p className="text-sm text-slate-400">Loading analytics...</p> : null}
{!loading && !isCreator && !data?.is_creator ? (
<div className="rounded-xl border border-gray-700 bg-gray-900/60 p-4 text-sm text-gray-300">
<div className="rounded-2xl border border-white/8 bg-white/[0.04] p-4 text-sm text-slate-300">
Upload your first artwork to unlock creator-only insights.
</div>
) : null}

20
resources/js/dashboard/components/RecentAchievements.jsx
View File

@@ -29,31 +29,35 @@ export default function RecentAchievements() {
}, [])
return (
<section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
<div className="flex items-center justify-between gap-3">
<section className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.82))] p-5 shadow-[0_24px_90px_rgba(2,8,23,0.32)]">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<p className="text-xs uppercase tracking-[0.2em] text-gray-400">Achievements</p>
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Achievements</p>
<h2 className="mt-2 text-xl font-semibold text-white">Recent Unlocks</h2>
<p className="mt-2 max-w-xs text-sm leading-6 text-slate-300">Recent badges and milestones that reflect how your account is developing.</p>
</div>
<span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-gray-300">
<span className="inline-flex items-center justify-center rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-slate-300 sm:justify-start">
{data?.counts?.unlocked || 0} / {data?.counts?.total || 0}
</span>
</div>
{loading ? <p className="mt-4 text-sm text-gray-400">Loading achievements...</p> : null}
{loading ? <p className="mt-4 text-sm text-slate-400">Loading achievements...</p> : null}
{!loading && (!Array.isArray(data?.recent) || data.recent.length === 0) ? (
<p className="mt-4 text-sm text-gray-400">No achievements unlocked yet.</p>
<div className="mt-4 rounded-2xl border border-white/8 bg-white/[0.04] px-4 py-5 text-sm text-slate-300">
<p className="font-medium text-white">No achievements unlocked yet.</p>
<p className="mt-2 text-slate-400">Keep posting, engaging, and growing your profile to start earning them.</p>
</div>
) : null}
{!loading && Array.isArray(data?.recent) && data.recent.length > 0 ? (
<div className="mt-4 space-y-3">
{data.recent.map((achievement) => (
<article key={achievement.id} className="rounded-xl border border-gray-700 bg-gray-900/60 p-3">
<article key={achievement.id} className="rounded-2xl border border-white/8 bg-white/[0.04] p-4 transition hover:border-white/15 hover:bg-white/[0.06]">
<div className="flex items-start justify-between gap-3">
<div className="min-w-0">
<p className="text-sm font-semibold text-white">{achievement.name}</p>
<p className="mt-1 text-xs text-gray-400">{achievement.description}</p>
<p className="mt-1 text-xs text-slate-400">{achievement.description}</p>
</div>
<AchievementBadge achievement={achievement} compact />
</div>

96
resources/js/dashboard/components/RecommendedCreators.jsx
View File

@@ -4,6 +4,8 @@ import LevelBadge from '../../components/xp/LevelBadge'
export default function RecommendedCreators() {
const [items, setItems] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState('')
const [busyId, setBusyId] = useState(null)
useEffect(() => {
let cancelled = false
@@ -13,6 +15,11 @@ export default function RecommendedCreators() {
const response = await window.axios.get('/api/dashboard/recommended-creators')
if (!cancelled) {
setItems(Array.isArray(response.data?.data) ? response.data.data : [])
setError('')
}
} catch {
if (!cancelled) {
setError('Could not load creator recommendations right now.')
}
} finally {
if (!cancelled) {
@@ -28,19 +35,51 @@ export default function RecommendedCreators() {
}
}, [])
async function handleFollow(creator) {
if (!creator?.username || busyId === creator.id) {
return
}
setBusyId(creator.id)
try {
const response = await window.axios.post(`/@${creator.username}/follow`)
const isFollowing = Boolean(response.data?.following)
if (isFollowing) {
setItems((current) => current.filter((item) => item.id !== creator.id))
}
} catch {
setError('Could not update follow state right now.')
} finally {
setBusyId(null)
}
}
return (
<section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
<div className="mb-4 flex items-center justify-between">
<h2 className="text-xl font-semibold">Recommended Creators</h2>
<a className="text-xs text-cyan-300 hover:text-cyan-200" href="/creators/top">
<section className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.82))] p-5 shadow-[0_24px_90px_rgba(2,8,23,0.32)]">
<div className="mb-5 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div>
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Community</p>
<h2 className="mt-2 text-xl font-semibold text-white">Recommended Creators</h2>
<p className="mt-2 max-w-md text-sm leading-6 text-slate-300">
Strong accounts you are not following yet, selected to help you improve your feed and discover new audiences.
</p>
</div>
<a className="inline-flex items-center justify-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15 sm:justify-start" href="/creators/top">
See all
<i className="fa-solid fa-arrow-right text-[10px]" />
</a>
</div>
{loading ? <p className="text-sm text-gray-400">Loading creators...</p> : null}
{loading ? <p className="text-sm text-slate-400">Loading creators...</p> : null}
{error ? <p className="mb-4 text-sm text-rose-300">{error}</p> : null}
{!loading && items.length === 0 ? (
<p className="text-sm text-gray-400">No creator recommendations right now.</p>
<div className="rounded-2xl border border-white/8 bg-white/5 px-5 py-6 text-sm text-slate-300">
<p className="font-medium text-white">No creator recommendations right now.</p>
<p className="mt-2 text-slate-400">Browse the full creator directory to keep expanding your network.</p>
</div>
) : null}
{!loading && items.length > 0 ? (
@@ -48,31 +87,50 @@ export default function RecommendedCreators() {
{items.map((creator) => (
<article
key={creator.id}
className="flex items-center justify-between rounded-xl border border-gray-700 bg-gray-900/70 p-3 transition hover:scale-[1.02]"
className="flex flex-col gap-4 rounded-2xl border border-white/8 bg-white/[0.04] p-4 transition hover:-translate-y-0.5 hover:border-white/15 hover:bg-white/[0.06] sm:flex-row sm:items-center sm:justify-between"
>
<a href={creator.url || '#'} className="flex min-w-0 items-center gap-3">
<a href={creator.url || '#'} className="flex min-w-0 items-center gap-4">
<img
src={creator.avatar || '/images/default-avatar.png'}
alt={creator.username || creator.name || 'Creator'}
className="h-10 w-10 rounded-full border border-gray-600 object-cover"
className="h-12 w-12 rounded-2xl border border-white/10 object-cover"
/>
<div className="min-w-0">
<p className="truncate text-sm font-semibold text-white">
{creator.username ? `@${creator.username}` : creator.name}
</p>
<div className="flex flex-wrap items-center gap-2">
<p className="truncate text-sm font-semibold text-white">
{creator.username ? `@${creator.username}` : creator.name}
</p>
<span className="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-400/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-wide text-sky-100">
Suggested
</span>
</div>
<div className="mt-1">
<LevelBadge level={creator.level} rank={creator.rank} compact />
</div>
<p className="text-xs text-gray-400">{creator.followers_count} followers</p>
<div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-slate-400">
<span>{Number(creator.followers_count || 0).toLocaleString()} followers</span>
<span>{Number(creator.uploads_count || 0).toLocaleString()} uploads</span>
</div>
</div>
</a>
<a
href={creator.url || '#'}
className="rounded-lg border border-cyan-400/60 px-3 py-1 text-xs font-semibold text-cyan-200 transition hover:bg-cyan-500/20"
>
Follow
</a>
<div className="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center sm:self-auto">
<a
href={creator.url || '#'}
className="inline-flex items-center justify-center rounded-full border border-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-200 transition hover:border-white/20 hover:bg-white/5"
>
View profile
</a>
<button
type="button"
onClick={() => handleFollow(creator)}
disabled={busyId === creator.id || !creator.username}
className="inline-flex items-center justify-center gap-2 rounded-full border border-emerald-400/25 bg-emerald-400/10 px-3.5 py-2 text-xs font-semibold uppercase tracking-wide text-emerald-100 transition hover:border-emerald-300/40 hover:bg-emerald-400/15 disabled:cursor-not-allowed disabled:opacity-60"
>
<i className={`fa-solid ${busyId === creator.id ? 'fa-circle-notch fa-spin' : 'fa-user-plus'} text-[10px]`} />
Follow
</button>
</div>
</article>
))}
</div>

28
resources/js/dashboard/components/TopCreatorsWidget.jsx
View File

@@ -31,21 +31,26 @@ export default function TopCreatorsWidget() {
const items = Array.isArray(data?.items) ? data.items.slice(0, 5) : []
return (
<section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
<div className="flex items-center justify-between gap-3">
<section className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.82))] p-5 shadow-[0_24px_90px_rgba(2,8,23,0.32)]">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<p className="text-xs uppercase tracking-[0.2em] text-gray-400">Leaderboard</p>
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Leaderboard</p>
<h2 className="mt-2 text-xl font-semibold text-white">Top Creators</h2>
<p className="mt-2 max-w-xs text-sm leading-6 text-slate-300">A quick weekly pulse on who is gaining the most traction across the platform.</p>
</div>
<a href="/leaderboard?type=creators&period=weekly" className="text-xs font-semibold uppercase tracking-[0.14em] text-sky-300 hover:text-sky-200">
<a href="/leaderboard?type=creators&period=weekly" className="inline-flex items-center justify-center gap-2 rounded-full border border-sky-400/25 bg-sky-400/10 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-400/15 sm:justify-start">
View all
<i className="fa-solid fa-arrow-right text-[10px]" />
</a>
</div>
{loading ? <p className="mt-4 text-sm text-gray-400">Loading leaderboard...</p> : null}
{loading ? <p className="mt-4 text-sm text-slate-400">Loading leaderboard...</p> : null}
{!loading && items.length === 0 ? (
<p className="mt-4 text-sm text-gray-400">No creators ranked yet.</p>
<div className="mt-4 rounded-2xl border border-white/8 bg-white/[0.04] px-4 py-5 text-sm text-slate-300">
<p className="font-medium text-white">No creators ranked yet.</p>
<p className="mt-2 text-slate-400">Rankings will appear here once weekly creator scoring is available.</p>
</div>
) : null}
{!loading && items.length > 0 ? (
@@ -54,18 +59,21 @@ export default function TopCreatorsWidget() {
const entity = item.entity || {}
return (
<a key={item.rank} href={entity.url || '#'} className="flex items-center gap-3 rounded-xl border border-gray-700 bg-gray-900/60 p-3 transition hover:border-sky-400/40">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-sm font-black text-white">
<a key={item.rank} href={entity.url || '#'} className="flex items-center gap-3 rounded-2xl border border-white/8 bg-white/[0.04] p-4 transition hover:-translate-y-0.5 hover:border-white/15 hover:bg-white/[0.06]">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-sky-300/20 bg-sky-400/12 text-sm font-black text-white">
#{item.rank}
</div>
{entity.avatar ? <img src={entity.avatar} alt={entity.name || 'Creator'} className="h-11 w-11 rounded-xl object-cover" loading="lazy" /> : null}
{entity.avatar ? <img src={entity.avatar} alt={entity.name || 'Creator'} className="h-11 w-11 rounded-xl border border-white/10 object-cover" loading="lazy" /> : null}
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-semibold text-white">{entity.name}</p>
<div className="mt-1 flex items-center gap-2">
<LevelBadge level={entity.level} rank={entity.rank} compact />
</div>
</div>
<span className="text-sm font-semibold text-sky-300">{Math.round(item.score)}</span>
<div className="shrink-0 text-right">
<span className="block text-sm font-semibold text-sky-300">{Math.round(item.score)}</span>
<span className="mt-1 block text-[11px] uppercase tracking-[0.16em] text-slate-400">Weekly score</span>
</div>
</a>
)
})}

20
resources/js/dashboard/components/XPProgressWidget.jsx
View File

@@ -38,16 +38,19 @@ export default function XPProgressWidget({ initialLevel = 1, initialRank = 'Newb
}, [])
return (
<section className="rounded-xl border border-gray-700 bg-gray-800 p-5 shadow-lg">
<div className="flex items-start justify-between gap-3">
<section className="rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(15,23,42,0.92),rgba(15,23,42,0.82))] p-5 shadow-[0_24px_90px_rgba(2,8,23,0.32)]">
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div>
<p className="text-xs uppercase tracking-[0.2em] text-gray-400">Progression</p>
<p className="text-[11px] uppercase tracking-[0.24em] text-sky-200/70">Progression</p>
<h2 className="mt-2 text-xl font-semibold text-white">XP Progress</h2>
<p className="mt-2 max-w-xs text-sm leading-6 text-slate-300">Track how close you are to the next level and keep your creator momentum visible.</p>
</div>
<div className="sm:self-start">
<LevelBadge level={data.level} rank={data.rank} compact />
</div>
<LevelBadge level={data.level} rank={data.rank} compact />
</div>
<div className="mt-4">
<div className="mt-5 rounded-2xl border border-white/8 bg-white/[0.04] p-4">
<XPProgressBar
xp={data.xp}
currentLevelXp={data.current_level_xp}
@@ -55,9 +58,14 @@ export default function XPProgressWidget({ initialLevel = 1, initialRank = 'Newb
progressPercent={data.progress_percent}
maxLevel={data.max_level}
/>
<div className="mt-4 flex items-center justify-between gap-3 text-xs uppercase tracking-[0.16em] text-slate-400">
<span>Total XP</span>
<span className="font-semibold text-sky-100">{Number(data.xp || 0).toLocaleString()}</span>
</div>
</div>
{loading ? <p className="mt-3 text-xs text-gray-400">Syncing your latest XP...</p> : null}
{loading ? <p className="mt-4 text-xs text-slate-400">Syncing your latest XP...</p> : null}
</section>
)
}