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

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>