feat: add community activity feed and mentions

resources/js/components/community/ActivityAvatar.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+const FALLBACK_AVATAR = 'https://files.skinbase.org/default/avatar_default.webp'
+
+const BADGE_TONES = {
+  rose: 'border-rose-400/25 bg-rose-500/10 text-rose-200',
+  amber: 'border-amber-400/25 bg-amber-500/10 text-amber-200',
+  sky: 'border-sky-400/25 bg-sky-500/10 text-sky-200',
+}
+
+export default function ActivityAvatar({ user }) {
+  if (!user) return null
+
+  const badgeClassName = BADGE_TONES[user.badge?.tone] || BADGE_TONES.sky
+
+  return (
+    <div className="flex items-start gap-3">
+      <a href={user.profile_url || '#'} className="shrink-0">
+        <img
+          src={user.avatar_url || FALLBACK_AVATAR}
+          alt={user.name || user.username || 'User'}
+          className="h-11 w-11 rounded-2xl object-cover ring-1 ring-white/10"
+          loading="lazy"
+          decoding="async"
+          onError={(event) => {
+            event.currentTarget.src = FALLBACK_AVATAR
+          }}
+        />
+      </a>
+
+      <div className="min-w-0">
+        <a href={user.profile_url || '#'} className="truncate text-sm font-semibold text-white hover:text-sky-200 transition-colors">
+          {user.name || user.username || 'User'}
+        </a>
+        {user.username && <p className="truncate text-xs text-white/35">@{user.username}</p>}
+        {user.badge && (
+          <span className={`mt-1 inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] ${badgeClassName}`}>
+            {user.badge.label}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}