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' }}

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

@@ -1,4 +1,6 @@
 import React from 'react'
+import { usePage } from '@inertiajs/react'
+import { shinyFlagUrl } from '../../../utils/flagUrl'
 
 const SOCIAL_ICONS = {
   twitter:    { icon: 'fa-brands fa-x-twitter',  label: 'X / Twitter' },
@@ -170,10 +172,12 @@ function SectionCard({ icon, eyebrow, title, children, className = '' }) {
  * 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 }) {
+  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' })
@@ -250,9 +254,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' }}