Release Healer Man 0.1.40

src/ui/MainMenuScreen.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { lazy, Suspense, useMemo, useState } from "react";
 import { classById, FACTIONS, raceById } from "../app/characterCatalog";
 import { selectedCharacter, useShellStore } from "../app/shellStore";
 import { DualDisplayFrame } from "../components/DualDisplayFrame";
@@ -11,6 +11,7 @@ import { BrandMark, ControllerLegend, FrontSurface } from "./FrontSurface";
 import { OnlineGroupPanel } from "./OnlineGroupPanel";
 import { sessionCanUseShelvedGmTools, SHELVED_MODES_ENABLED } from "../app/releaseFeatures";
 import { DungeonReportsScreen } from "./DungeonReportsScreen";
+const BossCardCollectionScreen = lazy(() => import("./BossCardCollection"));
 
 const GAME_MODES = [
   {
@@ -66,14 +67,17 @@ const GAME_MODES = [
 export function MainMenuScreen() {
   const [contentManagerOpen, setContentManagerOpen] = useState(false);
   const [reportsOpen, setReportsOpen] = useState(false);
+  const [cardsOpen, setCardsOpen] = useState(false);
+  if (cardsOpen) return <Suspense fallback={<p role="status">Opening collection log…</p>}><BossCardCollectionScreen onClose={() => setCardsOpen(false)} /></Suspense>;
   if (contentManagerOpen) return <ContentManagerScreen onClose={() => setContentManagerOpen(false)} />;
   if (reportsOpen) return <DungeonReportsScreen onClose={() => setReportsOpen(false)} />;
-  return <MainMenuDestinations onOpenDownloads={() => setContentManagerOpen(true)} onOpenReports={() => setReportsOpen(true)} />;
+  return <MainMenuDestinations onOpenDownloads={() => setContentManagerOpen(true)} onOpenReports={() => setReportsOpen(true)} onOpenCards={() => setCardsOpen(true)} />;
 }
 
-function MainMenuDestinations({ onOpenDownloads, onOpenReports }: {
+function MainMenuDestinations({ onOpenDownloads, onOpenReports, onOpenCards }: {
   readonly onOpenDownloads: () => void;
   readonly onOpenReports: () => void;
+  readonly onOpenCards: () => void;
 }) {
   const activeCharacter = useShellStore((state) => state.activeCharacter);
   const rosterCharacter = useShellStore(selectedCharacter);
@@ -117,7 +121,8 @@ function MainMenuDestinations({ onOpenDownloads, onOpenReports }: {
     ...(character ? [{ id: "mode-class-hall", run: openClassHall }] : []),
     ...(isGm ? [{ id: "mode-gm-tools", run: openGmAdmin }] : []),
     { id: "mode-reports", run: onOpenReports },
-  ], [character, isGm, onOpenDownloads, onOpenReports, openArenas, openClassHall, openDungeons, openGmAdmin, openManastorms, returnToCharacters]);
+    { id: "mode-cards", run: onOpenCards },
+  ], [character, isGm, onOpenCards, onOpenDownloads, onOpenReports, openArenas, openClassHall, openDungeons, openGmAdmin, openManastorms, returnToCharacters]);
   const controller = useMenuController(actions, {
     initialId: "mode-dungeons",
     onBack: returnToCharacters,
@@ -173,6 +178,10 @@ function MainMenuDestinations({ onOpenDownloads, onOpenReports }: {
             </header>
             <OnlineGroupPanel />
             <nav className="main-menu-mode-grid" aria-label="Game modes">
+              <ControllerButton controlId="mode-cards" selectedId={controller.selectedId} select={controller.select}
+                className="front-button main-menu-mode main-menu-mode--available" type="button" onClick={onOpenCards}>
+                <b aria-hidden="true">◆</b><span><strong>Boss Cards</strong><small>Track your collection, rarities, and copies from every dungeon.</small></span><em>Open</em>
+              </ControllerButton>
               <ControllerButton controlId="mode-reports" selectedId={controller.selectedId} select={controller.select}
                 className="front-button main-menu-mode main-menu-mode--available" type="button" onClick={onOpenReports}>
                 <b aria-hidden="true">!</b>