Release Healer Man 0.1.44

src/ui/SpellbookPanel.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useMemo, useState, type CSSProperties } from "react";
 import { useGameStore } from "../game/store";
+import { useCombatStore } from "../game/combatStore";
+import { assignedActionBarAbilityIds } from "../game/uiLayout";
+import { currentUiDevice, useUiLayoutStore } from "../game/uiLayoutStore";
 import { useMenuController, type MenuAction } from "../input/useMenuController";
 import { ControllerButton } from "./ControllerButton";
 import { AbilityTooltipTarget } from "./AbilityTooltip";
@@ -80,6 +83,11 @@ function SpellbookDialog({
   unlockedOnly,
   onUnlockedOnlyChange,
 }: SpellbookDialogProps) {
+  const bindings = useCombatStore((state) => state.actionBindings);
+  const ui = useUiLayoutStore();
+  const device = currentUiDevice();
+  const layout = ui.draft ?? ui.preferences.current[device];
+  const assignedIds = assignedActionBarAbilityIds(layout, bindings, device === "pc" && layout.wowBars);
   const orderedAbilities = useMemo(
     () => spellbookAbilitiesForDisplay(abilities, playerLevel, false),
     [abilities, playerLevel],
@@ -131,6 +139,7 @@ function SpellbookDialog({
         </header>
 
         <div className="spellbook-panel__toolbar">
+          <span className="action-bar-missing-legend">Light blue: missing from action bars</span>
           <button
             type="button"
             className={`spellbook-panel__filter ${unlockedOnly ? "is-active" : ""}`}
@@ -146,6 +155,7 @@ function SpellbookDialog({
           <div className="spellbook-panel__list" aria-label={unlockedOnly ? "Unlocked abilities" : "Known and locked abilities"}>
             {visibleAbilities.map((ability) => {
               const locked = !ability.known || ability.level > playerLevel;
+              const missing = !locked && !ability.passive && !assignedIds.has(ability.id);
               const lockLabel = ability.talentLocked && !ability.known
                 ? "Learn in talents"
                 : `Unlocks at level ${ability.level}`;
@@ -163,9 +173,9 @@ function SpellbookDialog({
                     setInspectedId(ability.id);
                   }}
                   type="button"
-                  className={`spellbook-ability ${locked ? "spellbook-ability--locked" : ""}`}
+                  className={`spellbook-ability ${locked ? "spellbook-ability--locked" : ""} ${missing ? "is-missing-from-bars" : ""}`}
                   aria-disabled={locked}
-                  aria-label={locked ? `${ability.name}, ${lockLabel.toLowerCase()}` : `${ability.name}, unlocked`}
+                  aria-label={locked ? `${ability.name}, ${lockLabel.toLowerCase()}` : `${ability.name}, unlocked${missing ? ", missing from action bars" : ""}`}
                   onFocus={() => setInspectedId(ability.id)}
                   onClick={() => {
                     setInspectedId(ability.id);
@@ -214,6 +224,7 @@ function SpellbookDialog({
                       ? "Learn in talents"
                       : `Unlocks at level ${inspected.level}`
                     : inspected.passive ? "Passive" : "Unlocked"}</dd></div>
+                  {!inspectedLocked && !inspected.passive && <div><dt>Action bars</dt><dd>{assignedIds.has(inspected.id) ? "Assigned" : "Missing from action bars"}</dd></div>}
                   {inspected.rank !== undefined && <div><dt>Current rank</dt><dd>{inspected.rank} / {inspected.rankCount ?? inspected.rank}</dd></div>}
                   {inspected.resourceCost !== undefined && <div><dt>Cost</dt><dd>{inspected.resourceCost} {inspected.resourceLabel}</dd></div>}
                   {inspected.cooldownSeconds !== undefined && <div><dt>Cooldown</dt><dd>{inspected.cooldownSeconds || "None"}{inspected.cooldownSeconds ? " sec" : ""}</dd></div>}