optimizations

resources/js/components/profile/activity/ActivityCard.jsx

@@ -0,0 +1,197 @@
+import React from 'react'
+
+function typeMeta(type) {
+  switch (type) {
+    case 'upload':
+      return { icon: 'fa-solid fa-image', label: 'Upload', tone: 'text-sky-200 bg-sky-400/12 border-sky-300/20' }
+    case 'comment':
+      return { icon: 'fa-solid fa-comment-dots', label: 'Comment', tone: 'text-amber-100 bg-amber-400/12 border-amber-300/20' }
+    case 'reply':
+      return { icon: 'fa-solid fa-reply', label: 'Reply', tone: 'text-orange-100 bg-orange-400/12 border-orange-300/20' }
+    case 'like':
+      return { icon: 'fa-solid fa-heart', label: 'Like', tone: 'text-rose-100 bg-rose-400/12 border-rose-300/20' }
+    case 'favourite':
+      return { icon: 'fa-solid fa-bookmark', label: 'Favourite', tone: 'text-pink-100 bg-pink-400/12 border-pink-300/20' }
+    case 'follow':
+      return { icon: 'fa-solid fa-user-plus', label: 'Follow', tone: 'text-emerald-100 bg-emerald-400/12 border-emerald-300/20' }
+    case 'achievement':
+      return { icon: 'fa-solid fa-trophy', label: 'Achievement', tone: 'text-yellow-100 bg-yellow-400/12 border-yellow-300/20' }
+    case 'forum_post':
+      return { icon: 'fa-solid fa-signs-post', label: 'Forum thread', tone: 'text-violet-100 bg-violet-400/12 border-violet-300/20' }
+    case 'forum_reply':
+      return { icon: 'fa-solid fa-comments', label: 'Forum reply', tone: 'text-indigo-100 bg-indigo-400/12 border-indigo-300/20' }
+    default:
+      return { icon: 'fa-solid fa-bolt', label: 'Activity', tone: 'text-slate-100 bg-white/6 border-white/10' }
+  }
+}
+
+function profileName(actor) {
+  if (!actor) return 'Creator'
+  return actor.username ? `@${actor.username}` : actor.name || 'Creator'
+}
+
+function headline(activity) {
+  switch (activity?.type) {
+    case 'upload':
+      return activity?.artwork?.title ? `Uploaded ${activity.artwork.title}` : 'Uploaded new artwork'
+    case 'comment':
+      return activity?.artwork?.title ? `Commented on ${activity.artwork.title}` : 'Posted a new comment'
+    case 'reply':
+      return activity?.artwork?.title ? `Replied on ${activity.artwork.title}` : 'Posted a reply'
+    case 'like':
+      return activity?.artwork?.title ? `Liked ${activity.artwork.title}` : 'Liked an artwork'
+    case 'favourite':
+      return activity?.artwork?.title ? `Favourited ${activity.artwork.title}` : 'Saved an artwork'
+    case 'follow':
+      return activity?.target_user ? `Started following @${activity.target_user.username || activity.target_user.name}` : 'Started following a creator'
+    case 'achievement':
+      return activity?.achievement?.name ? `Unlocked ${activity.achievement.name}` : 'Unlocked a new achievement'
+    case 'forum_post':
+      return activity?.forum?.thread?.title ? `Started forum thread ${activity.forum.thread.title}` : 'Started a new forum thread'
+    case 'forum_reply':
+      return activity?.forum?.thread?.title ? `Replied in ${activity.forum.thread.title}` : 'Posted a forum reply'
+    default:
+      return 'Shared new activity'
+  }
+}
+
+function body(activity) {
+  if (activity?.comment?.body) return activity.comment.body
+  if (activity?.forum?.post?.excerpt) return activity.forum.post.excerpt
+  if (activity?.achievement?.description) return activity.achievement.description
+  return ''
+}
+
+function cta(activity) {
+  if (activity?.comment?.url) return { href: activity.comment.url, label: 'Open comment' }
+  if (activity?.artwork?.url) return { href: activity.artwork.url, label: 'View artwork' }
+  if (activity?.forum?.post?.url) return { href: activity.forum.post.url, label: 'Open reply' }
+  if (activity?.forum?.thread?.url) return { href: activity.forum.thread.url, label: 'Open thread' }
+  if (activity?.target_user?.profile_url) return { href: activity.target_user.profile_url, label: 'View profile' }
+  return null
+}
+
+function AchievementIcon({ achievement }) {
+  const raw = String(achievement?.icon || '').trim()
+  const className = raw.startsWith('fa-') ? raw : `fa-solid ${raw || 'fa-trophy'}`
+
+  return (
+    <div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-yellow-300/20 bg-yellow-400/12 text-yellow-100">
+      <i className={className} />
+    </div>
+  )
+}
+
+export default function ActivityCard({ activity }) {
+  const meta = typeMeta(activity?.type)
+  const nextAction = cta(activity)
+  const copy = body(activity)
+
+  return (
+    <article className="rounded-[28px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.96),rgba(7,11,19,0.92))] p-5 shadow-[0_18px_45px_rgba(0,0,0,0.28)] backdrop-blur-xl">
+      <div className="flex flex-col gap-4 md:flex-row md:items-start">
+        <div className="flex items-start gap-4 md:w-[17rem] md:shrink-0">
+          <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-[20px] border border-white/10 bg-slate-950/70">
+            {activity?.actor?.avatar_url ? (
+              <img src={activity.actor.avatar_url} alt={profileName(activity.actor)} className="h-full w-full object-cover" loading="lazy" />
+            ) : (
+              <div className="flex h-full w-full items-center justify-center text-slate-500">
+                <i className="fa-solid fa-user" />
+              </div>
+            )}
+          </div>
+
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-semibold text-white">{profileName(activity.actor)}</div>
+            {activity?.actor?.badge?.label ? (
+              <div className="mt-1 inline-flex items-center rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-300">
+                {activity.actor.badge.label}
+              </div>
+            ) : null}
+            <div className="mt-2 text-xs uppercase tracking-[0.18em] text-slate-500">{activity?.time_ago || ''}</div>
+          </div>
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
+            <div className="min-w-0">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] ${meta.tone}`}>
+                  <i className={meta.icon} />
+                  {meta.label}
+                </span>
+              </div>
+              <h3 className="mt-3 text-lg font-semibold tracking-[-0.02em] text-white">{headline(activity)}</h3>
+              {copy ? <p className="mt-2 max-w-3xl text-sm leading-7 text-slate-400">{copy}</p> : null}
+            </div>
+
+            <div className="text-xs text-slate-500 md:text-right">{activity?.created_at ? new Date(activity.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : ''}</div>
+          </div>
+
+          {activity?.artwork ? (
+            <div className="mt-4 flex items-center gap-3 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
+              {activity.artwork.thumb ? (
+                <img src={activity.artwork.thumb} alt={activity.artwork.title} className="h-16 w-16 rounded-2xl object-cover ring-1 ring-white/10" loading="lazy" />
+              ) : (
+                <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-slate-500">
+                  <i className="fa-solid fa-image" />
+                </div>
+              )}
+              <div className="min-w-0 flex-1">
+                <div className="truncate text-sm font-medium text-white">{activity.artwork.title}</div>
+                <div className="mt-2 flex flex-wrap gap-3 text-xs text-slate-400">
+                  <span>{Number(activity.artwork.stats?.likes || 0).toLocaleString()} likes</span>
+                  <span>{Number(activity.artwork.stats?.views || 0).toLocaleString()} views</span>
+                  <span>{Number(activity.artwork.stats?.comments || 0).toLocaleString()} comments</span>
+                </div>
+              </div>
+            </div>
+          ) : null}
+
+          {activity?.target_user ? (
+            <div className="mt-4 flex items-center gap-3 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
+              <div className="h-12 w-12 overflow-hidden rounded-2xl border border-white/10 bg-slate-950/70">
+                {activity.target_user.avatar_url ? (
+                  <img src={activity.target_user.avatar_url} alt={activity.target_user.username || activity.target_user.name} className="h-full w-full object-cover" loading="lazy" />
+                ) : null}
+              </div>
+              <div className="min-w-0 flex-1">
+                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Target creator</div>
+                <div className="mt-1 text-sm font-medium text-white">@{activity.target_user.username || activity.target_user.name}</div>
+              </div>
+            </div>
+          ) : null}
+
+          {activity?.achievement ? (
+            <div className="mt-4 flex items-center gap-3 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
+              <AchievementIcon achievement={activity.achievement} />
+              <div className="min-w-0 flex-1">
+                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Achievement unlocked</div>
+                <div className="mt-1 text-sm font-medium text-white">{activity.achievement.name}</div>
+                {activity.achievement.description ? <div className="mt-1 text-sm text-slate-400">{activity.achievement.description}</div> : null}
+              </div>
+            </div>
+          ) : null}
+
+          {activity?.forum?.thread ? (
+            <div className="mt-4 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
+              <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Forum activity</div>
+              <div className="mt-1 text-sm font-medium text-white">{activity.forum.thread.title}</div>
+              <div className="mt-2 text-xs text-slate-400">{activity.forum.thread.category_name}</div>
+            </div>
+          ) : null}
+
+          {nextAction ? (
+            <a
+              href={nextAction.href}
+              className="mt-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-3.5 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/[0.1] hover:text-white"
+            >
+              {nextAction.label}
+              <i className="fa-solid fa-arrow-right text-[10px]" />
+            </a>
+          ) : null}
+        </div>
+      </div>
+    </article>
+  )
+}