1

src/components/rpg-entry/RpgEntryWorldDetailView.tsx

@@ -8,8 +8,10 @@ import { copyTextToClipboard } from '../../services/clipboard';
 import type { CustomWorldProfile } from '../../types';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 import {
-  buildPlatformWorldTags,
+  buildPlatformWorldDisplayTags,
   describePlatformThemeLabel,
+  formatPlatformWorkDisplayName,
+  formatPlatformWorkDisplayTag,
   formatPlatformWorldTime,
   resolvePlatformPublicWorkCode,
   resolvePlatformWorldCoverImage,
@@ -83,13 +85,8 @@ export function RpgEntryWorldDetailView({
     entry.profile,
   ).slice(0, 3);
   const previewLandmarks = entry.profile.landmarks.slice(0, 3);
-  const tags = [
-    ...new Set(
-      buildPlatformWorldTags(entry)
-        .map((tag) => tag.trim())
-        .filter(Boolean),
-    ),
-  ].slice(0, 3);
+  const displayName = formatPlatformWorkDisplayName(entry.worldName);
+  const tags = buildPlatformWorldDisplayTags(entry, 3);
   const copyPublicWorkCode = () => {
     if (!publicWorkCode) {
       return;
@@ -152,7 +149,9 @@ export function RpgEntryWorldDetailView({
             <div className="relative z-10">
               <div className="flex flex-wrap items-center gap-2">
                 <span className="platform-pill platform-pill--warm">
-                  {describePlatformThemeLabel(entry.themeMode)}
+                  {formatPlatformWorkDisplayTag(
+                    describePlatformThemeLabel(entry.themeMode),
+                  )}
                 </span>
                 <span className="platform-pill platform-pill--neutral px-3">
                   {entry.authorDisplayName}
@@ -198,7 +197,7 @@ export function RpgEntryWorldDetailView({
                 ) : null}
               </div>
               <div className="mt-4 text-3xl font-black text-white">
-                {entry.worldName}
+                {displayName}
               </div>
               {entry.subtitle ? (
                 <div className="mt-2 text-sm tracking-[0.18em] text-zinc-300/88">