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

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>