Update Healer Man server

src/ui/MainMenuScreen.tsx

@@ -1,9 +1,9 @@
 import { lazy, Suspense, useMemo, useState } from "react";
-import { classById, FACTIONS, raceById } from "../app/characterCatalog";
+import { classById } from "../app/characterCatalog";
 import { selectedCharacter, useShellStore } from "../app/shellStore";
 import { DualDisplayFrame } from "../components/DualDisplayFrame";
+import { specializationById, specializationIconUrl } from "../game/specializationCatalog";
 import { useMenuController, type MenuAction } from "../input/useMenuController";
-import { CharacterPreview } from "./CharacterPreview";
 import { LazyLocalCompanionPanel } from "./LazyLocalCompanionPanel";
 import { ControllerButton } from "./ControllerButton";
 import { ContentManagerScreen } from "./ContentManagerScreen";
@@ -170,8 +170,9 @@ function MainMenuDestinations({ onOpenDownloads, onOpenReports, onOpenCards, onO
     onBack: returnToCharacters,
   });
 
-  const race = character ? raceById(character.raceId) : null;
   const characterClass = character ? classById(character.classId) : null;
+  const specialization = specializationById(character?.specializationId);
+  const secondaryClass = character?.secondaryClassId ? classById(character.secondaryClassId) : null;
 
   return (
     <DualDisplayFrame
@@ -179,11 +180,7 @@ function MainMenuDestinations({ onOpenDownloads, onOpenReports, onOpenCards, onO
       top={
         <FrontSurface className="main-menu-screen" ariaLabel="Healer Man main menu">
           <header className="main-menu-header">
-            <BrandMark compact />
-            <div>
-              <span>Adventurer selected</span>
-              <strong>Choose your next journey</strong>
-            </div>
+            <BrandMark compact tagline={null} />
             <ControllerButton
               controlId="back-to-roster"
               selectedId={controller.selectedId}
@@ -195,30 +192,27 @@ function MainMenuDestinations({ onOpenDownloads, onOpenReports, onOpenCards, onO
             </ControllerButton>
           </header>
 
-          <aside className="main-menu-character" aria-label="Selected character">
-            <div className="main-menu-character__preview">
-              <CharacterPreview character={character} />
-            </div>
-            {character && race && characterClass && (
-              <div className="main-menu-character__summary">
-                <p className="front-kicker">Ready for adventure</p>
-                <h1>{character.name}</h1>
-                <strong style={{ color: characterClass.color }}>
-                  Level {character.level} {race.name} {characterClass.name}
-                </strong>
-                <small>{FACTIONS[race.faction].name} / {character.gender}</small>
-                {isRom && <small>RoM / {character.secondaryClassId ? `${characterClass.name} + ${classById(character.secondaryClassId).name}` : "Secondary class not chosen"}</small>}
-              </div>
+          <aside className="main-menu-sidebar" aria-label="Character and online group">
+            {character && characterClass && (
+              <section className="main-menu-character" aria-label="Selected character">
+                <span className="main-menu-character__icon" style={{ borderColor: characterClass.color }}>
+                  <img src={specializationIconUrl(character.classId, character.specializationId)} alt="" aria-hidden="true" />
+                </span>
+                <div className="main-menu-character__summary">
+                  <small>Level {character.level}</small>
+                  <h1>{character.name}</h1>
+                  <strong style={{ color: characterClass.color }}>
+                    {characterClass.name}{isRom
+                      ? secondaryClass ? ` / ${secondaryClass.name}` : " / No secondary class"
+                      : specialization ? ` / ${specialization.displayName}` : ""}
+                  </strong>
+                </div>
+              </section>
             )}
+            <OnlineGroupPanel defaultOpen />
           </aside>
 
           <main className="main-menu-modes">
-            <header>
-              <p className="front-kicker">Main menu</p>
-              <h2>Ways to play</h2>
-              <p>Select a destination. More adventures will unlock here as they are built.</p>
-            </header>
-            <OnlineGroupPanel />
             <nav className="main-menu-mode-grid" aria-label="Main menu destinations">
               <ControllerButton controlId="mode-companion-readiness" selectedId={controller.selectedId} select={controller.select}
                 className="front-button main-menu-mode main-menu-mode--available" type="button" onClick={onOpenReadiness}>