Wire admin studio SSR and search infrastructure

.deploy/artwork-evolution-release/resources/js/components/profile/ProfileHero.jsx

@@ -1,10 +1,12 @@
 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)
@@ -12,11 +14,13 @@ function formatCompactNumber(value) {
 }
 
 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' }}