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

Wire admin studio SSR and search infrastructure

Browse Source
This commit is contained in:
Gregor Klevže
2026-05-01 11:46:06 +02:00
parent 257b0dbef6
commit 18cea8b0f0
329 changed files with 197465 additions and 2741 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
resources/js/components/profile/ProfileCoverEditor.jsx
View File

@@ -18,10 +18,13 @@ export default function ProfileCoverEditor({
const [removing, setRemoving] = useState(false)
const [position, setPosition] = useState(coverPosition ?? 50)
const csrfToken = useMemo(
() => document.querySelector('meta[name="csrf-token"]')?.content ?? '',
[]
)
const csrfToken = useMemo(() => {
if (typeof document === 'undefined') {
return ''
}
return document.querySelector('meta[name="csrf-token"]')?.content ?? ''
}, [])
if (!isOpen) {
return null

10
resources/js/components/profile/ProfileHero.jsx
View File

@@ -1,22 +1,26 @@
import React, { useState } from 'react'
import { usePage } from '@inertiajs/react'
import ProfileCoverEditor from './ProfileCoverEditor'
import LevelBadge from '../xp/LevelBadge'
import XPProgressBar from '../xp/XPProgressBar'
import FollowButton from '../social/FollowButton'
import FollowersPreview from '../social/FollowersPreview'
import MutualFollowersBadge from '../social/MutualFollowersBadge'
import { shinyFlagUrl } from '../../utils/flagUrl'
function formatCompactNumber(value) {
const numeric = Number(value ?? 0)
return numeric.toLocaleString()
return numeric.toLocaleString('en-US')
}
export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing, followerCount, recentFollowers = [], followContext = null, heroBgUrl, countryName, leaderboardRank, extraActions = null }) {
const { props } = usePage()
const [following, setFollowing] = useState(viewerIsFollowing)
const [count, setCount] = useState(followerCount)
const [editorOpen, setEditorOpen] = useState(false)
const [coverUrl, setCoverUrl] = useState(user?.cover_url || heroBgUrl || null)
const [coverPosition, setCoverPosition] = useState(Number.isFinite(user?.cover_position) ? user.cover_position : 50)
const flagUrl = shinyFlagUrl(profile?.country_code, props?.cdn?.files_url)
const uname = user.username || user.name || 'Unknown'
const displayName = user.name || uname
@@ -118,9 +122,9 @@ export default function ProfileHero({ user, profile, isOwner, viewerIsFollowing,
{!isOwner ? <MutualFollowersBadge context={followContext} /> : null}
{countryName ? (
<span className="inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs text-slate-300">
{profile?.country_code ? (
{flagUrl ? (
<img
src={`/gfx/flags/shiny/24/${encodeURIComponent(String(profile.country_code).toUpperCase())}.png`}
src={flagUrl}
alt={countryName}
className="h-auto w-4 rounded-sm"
onError={(event) => { event.target.style.display = 'none' }}

14
resources/js/components/profile/activity/ActivityCard.jsx
View File

@@ -16,6 +16,8 @@ function typeMeta(type) {
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 'world_reward':
return { icon: 'fa-solid fa-globe', label: 'World reward', tone: 'text-sky-100 bg-sky-400/12 border-sky-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':
@@ -46,6 +48,8 @@ function headline(activity) {
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 'world_reward':
return activity?.world_reward?.badge_label ? `Earned ${activity.world_reward.badge_label}` : 'Earned a new world reward'
case 'forum_post':
return activity?.forum?.thread?.title ? `Started forum thread ${activity.forum.thread.title}` : 'Started a new forum thread'
case 'forum_reply':
@@ -59,6 +63,7 @@ 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
if (activity?.world_reward?.note) return activity.world_reward.note
return ''
}
@@ -68,6 +73,7 @@ function cta(activity) {
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' }
if (activity?.world_reward?.world?.url) return { href: activity.world_reward.world.url, label: 'Open world' }
return null
}
@@ -173,6 +179,14 @@ export default function ActivityCard({ activity }) {
</div>
) : null}
{activity?.world_reward ? (
<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">World reward</div>
<div className="mt-1 text-sm font-medium text-white">{activity.world_reward.badge_label}</div>
{activity.world_reward.artwork?.title ? <div className="mt-2 text-sm text-slate-400">Artwork: {activity.world_reward.artwork.title}</div> : null}
</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>

36
resources/js/components/profile/tabs/TabAbout.jsx
View File

@@ -1,5 +1,7 @@
import React from 'react'
import { usePage } from '@inertiajs/react'
import CreatorJourneySection from '../CreatorJourneySection'
import { shinyFlagUrl } from '../../../utils/flagUrl'
const SOCIAL_ICONS = {
twitter: { icon: 'fa-brands fa-x-twitter', label: 'X / Twitter', hoverClass: 'hover:border-slate-300/30 hover:text-slate-100 hover:bg-white/[0.08]' },
@@ -226,11 +228,13 @@ function SectionCard({ icon, eyebrow, title, children, className = '' }) {
* TabAbout
* Bio, social links, metadata - replaces old sidebar profile card.
*/
export default function TabAbout({ user, profile, stats, achievements, artworks, creatorStories, profileComments, socialLinks, countryName, followerCount, recentFollowers, leaderboardRank, groupContributionHistory, journey }) {
export default function TabAbout({ user, profile, stats, achievements, worldRewards, artworks, creatorStories, profileComments, socialLinks, countryName, followerCount, recentFollowers, leaderboardRank, groupContributionHistory, journey }) {
const { props } = usePage()
const uname = user.username || user.name
const displayName = user.name || uname
const about = profile?.about
const website = profile?.website
const flagUrl = shinyFlagUrl(profile?.country_code, props?.cdn?.files_url)
const joinDate = user.created_at
? new Date(user.created_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
@@ -261,6 +265,7 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
: []
const followers = recentFollowers ?? []
const recentAchievements = Array.isArray(achievements?.recent) ? achievements.recent : []
const recentWorldRewards = Array.isArray(worldRewards?.recent) ? worldRewards.recent : []
const stories = Array.isArray(creatorStories) ? creatorStories : []
const comments = Array.isArray(profileComments) ? profileComments : []
const contributionHistory = Array.isArray(groupContributionHistory) ? groupContributionHistory : []
@@ -315,9 +320,9 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
{countryName ? (
<InfoRow icon="fa-earth-americas" label="Country">
<span className="flex items-center gap-2">
{profile?.country_code ? (
{flagUrl ? (
<img
src={`/gfx/flags/shiny/24/${encodeURIComponent(String(profile.country_code).toUpperCase())}.png`}
src={flagUrl}
alt={countryName}
className="h-auto w-4 rounded-sm"
onError={(e) => { e.target.style.display = 'none' }}
@@ -466,6 +471,31 @@ export default function TabAbout({ user, profile, stats, achievements, artworks,
</SectionCard>
) : null}
{recentWorldRewards.length > 0 ? (
<SectionCard icon="fa-solid fa-globe" eyebrow="World recognition" title="Latest world rewards">
<div className="grid gap-3 sm:grid-cols-2">
{recentWorldRewards.slice(0, 4).map((reward) => (
<a
key={reward.id}
href={reward.world?.url || reward.artwork?.url || '#'}
className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-4 transition hover:border-white/15 hover:bg-white/[0.06]"
>
<div className="flex items-start justify-between gap-3">
<div>
<div className="text-sm font-semibold text-white">{reward.badge_label}</div>
{reward.artwork?.title ? <div className="mt-1 text-sm text-slate-400">{reward.artwork.title}</div> : null}
</div>
<span className="rounded-full border border-sky-300/20 bg-sky-400/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-sky-100">
{reward.reward_label}
</span>
</div>
{reward.granted_at ? <div className="mt-3 text-xs text-slate-500">{formatShortDate(reward.granted_at) || 'Rewarded'}</div> : null}
</a>
))}
</div>
</SectionCard>
) : null}
{stories.length > 0 || comments.length > 0 ? (
<SectionCard icon="fa-solid fa-wave-square" eyebrow="Fresh from this creator" title="Recent activity">
<div className="grid gap-3 lg:grid-cols-2">