updating buff and debuff icons. separated COA classes from WoW classes on the character creation screen

src/ui/CharacterSelectScreen.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState, type CSSProperties } from "react";
-import { CLASSES, PLAYABLE_RACES, classById, FACTIONS, raceById } from "../app/characterCatalog";
+import { CLASSES, PLAYABLE_RACES, classById, contentCategoryForClass, FACTIONS, raceById } from "../app/characterCatalog";
+import { contentCategoryById } from "../app/contentCategories";
 import { selectedCharacter, useShellStore } from "../app/shellStore";
 import { DualDisplayFrame } from "../components/DualDisplayFrame";
 import { useMenuController, type MenuAction } from "../input/useMenuController";
@@ -61,6 +62,7 @@ export function CharacterSelectScreen() {
             {characters.map((character) => {
               const raceDefinition = raceById(character.raceId);
               const classDefinition = classById(character.classId);
+              const categoryDefinition = contentCategoryById(character.categoryId ?? contentCategoryForClass(character.classId));
               return (
                 <ControllerButton
                   key={character.id}
@@ -72,7 +74,7 @@ export function CharacterSelectScreen() {
                   onClick={() => select(character.id)}
                 >
                   <span style={{ "--portrait-accent": raceDefinition.accent } as CSSProperties}>{raceDefinition.sigil}</span>
-                  <i><strong>{character.name}</strong><small>{character.categoryId === "rom" ? "RoM" : "WoW"} / Level {character.level} {classDefinition.name}{character.secondaryClassId ? ` + ${classById(character.secondaryClassId).name}` : ""}</small></i>
+                  <i><strong>{character.name}</strong><small>{categoryDefinition.label} / Level {character.level} {classDefinition.name}{character.secondaryClassId ? ` + ${classById(character.secondaryClassId).name}` : ""}</small></i>
                   <em>{formatLastPlayed(character.lastPlayedAt)}</em>
                 </ControllerButton>
               );
@@ -110,7 +112,7 @@ export function CharacterSelectScreen() {
                 <h2>{selected.location}</h2>
                 <dl>
                   <div><dt>Level</dt><dd>{selected.level}</dd></div>
-                  <div><dt>Content</dt><dd>{selected.categoryId === "rom" ? "Runes of Magic" : "World of Warcraft"}</dd></div>
+                  <div><dt>Content</dt><dd>{contentCategoryById(selected.categoryId ?? contentCategoryForClass(selected.classId)).name}</dd></div>
                   <div><dt>Faction</dt><dd>{FACTIONS[race.faction].name}</dd></div>
                   <div><dt>Class role</dt><dd>{characterClass.role}</dd></div>
                   <div><dt>Next step</dt><dd>Choose a game mode</dd></div>