Release Healer Man 0.1.42

src/ui/AbilityBindingsPanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type CSSProperties } from "react";
+import { useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import { classById } from "../app/characterCatalog";
 import {
   ACTION_CONTROLS,
@@ -10,7 +10,10 @@ import {
   type ActionBindingLayer,
 } from "../game/actionBindings";
 import { useCombatStore } from "../game/combatStore";
+import { defaultActionBarForCharacter } from "../game/abilityCatalog";
 import { useGameStore } from "../game/store";
+import { actionKeyLabel, assignDesktopAbility, resetDesktopAbilities, type UiLayout } from "../game/uiLayout";
+import { currentUiDevice, useUiLayoutStore } from "../game/uiLayoutStore";
 import { getControllerHeldTokens, subscribeControllerToken } from "../input/controller";
 import { INPUT_ACTIONS, controllerBindingMatches, inputKeyForEvent } from "../input/keybinds";
 import { getInputPreferences, isCapturingInput } from "../input/keybindRuntime";
@@ -29,27 +32,38 @@ function AbilityBindingIcon({ icon, sigil, color }: { icon?: string; sigil: stri
 }
 
 type RestoreScope = "layer" | "all";
+type BindingLayout = "controller" | "wow";
+type BindingControl = ActionBindingControl | number;
 
 interface RestoreRequest {
   scope: RestoreScope;
+  layout: BindingLayout;
   layer: ActionBindingLayer;
+  bar: number;
   cancelFocusId: string;
   completeFocusId: string;
 }
 
 const layerControlId = (layer: ActionBindingLayer) => `binding-layer-${layer}`;
-const slotControlId = (control: ActionBindingControl) => `binding-slot-${control}`;
+const barControlId = (bar: number) => `binding-bar-${bar}`;
+const slotControlId = (control: BindingControl) => typeof control === "number" ? `binding-wow-slot-${control}` : `binding-slot-${control}`;
 const choiceControlId = (abilityId: string) => `binding-choice-${abilityId}`;
 
 const MAIN_ACTION_NEIGHBORS: Readonly<Record<string, NonNullable<MenuAction["neighbors"]>>> = {
+  "binding-layout-controller": {
+    up: "binding-restore-layer", down: "binding-layer-primary", left: "binding-layout-wow", right: "binding-layout-wow",
+  },
+  "binding-layout-wow": {
+    up: "binding-restore-all", down: "binding-layer-tertiary", left: "binding-layout-controller", right: "binding-layout-controller",
+  },
   "binding-layer-primary": {
-    up: "binding-restore-layer", down: "binding-slot-dpad-left", left: "binding-layer-tertiary", right: "binding-layer-secondary",
+    up: "binding-layout-controller", down: "binding-slot-dpad-left", left: "binding-layer-tertiary", right: "binding-layer-secondary",
   },
   "binding-layer-secondary": {
-    up: "binding-restore-layer", down: "binding-slot-r1", left: "binding-layer-primary", right: "binding-layer-tertiary",
+    up: "binding-layout-controller", down: "binding-slot-r1", left: "binding-layer-primary", right: "binding-layer-tertiary",
   },
   "binding-layer-tertiary": {
-    up: "binding-restore-all", down: "binding-slot-r2", left: "binding-layer-secondary", right: "binding-layer-primary",
+    up: "binding-layout-wow", down: "binding-slot-r2", left: "binding-layer-secondary", right: "binding-layer-primary",
   },
   "binding-slot-r1": {
     up: "binding-layer-secondary", down: "binding-slot-face-top", left: "binding-slot-dpad-right", right: "binding-slot-r2",
@@ -84,19 +98,30 @@ const MAIN_ACTION_NEIGHBORS: Readonly<Record<string, NonNullable<MenuAction["nei
 };
 
 function AbilityBindingsDialog() {
+  const panel = useRef<HTMLElement>(null);
   const keyLabel = useInputBindingLabels();
   const bindingChord = (layer: ActionBindingLayer, control: ActionBindingControl) => `${keyLabel("controller", `ability:${layer}:${control}`)} / ${keyLabel("pc", `ability:${layer}:${control}`)}`;
   const openOverlay = useGameStore((state) => state.openOverlay);
   const classId = useCombatStore((state) => state.classId);
+  const secondaryClassId = useCombatStore((state) => state.secondaryClassId);
   const level = useCombatStore((state) => state.level);
   const abilities = useCombatStore((state) => state.abilities);
   const bindings = useCombatStore((state) => state.actionBindings);
+  const pcLayout = useUiLayoutStore((state) => state.preferences.current.pc);
+  const [layout, setLayout] = useState<BindingLayout>(() => currentUiDevice() === "pc" && pcLayout.wowBars ? "wow" : "controller");
+  const [bar, setBar] = useState(0);
   const [layer, setLayer] = useState<ActionBindingLayer>("primary");
-  const [editingControl, setEditingControl] = useState<ActionBindingControl | null>(null);
+  const [editingControl, setEditingControl] = useState<BindingControl | null>(null);
   const [restoreRequest, setRestoreRequest] = useState<RestoreRequest | null>(null);
   const [notice, setNotice] = useState("Choose a button, then choose the ability it should use.");
   const classColor = classById(classId).color;
-  const editingAbilityId = editingControl ? bindings[actionBindingId(layer, editingControl)] : null;
+  const isWow = layout === "wow";
+  const assignment = (control: BindingControl) => typeof control === "number"
+    ? pcLayout.bars[bar].slots[control].abilityId : bindings[actionBindingId(layer, control)];
+  const controlLabel = (control: BindingControl) => typeof control === "number"
+    ? `Bar ${bar + 1} · Button ${control + 1}${pcLayout.bars[bar].slots[control].key ? ` · ${actionKeyLabel(pcLayout.bars[bar].slots[control].key)}` : ""}`
+    : bindingChord(layer, control);
+  const editingAbilityId = editingControl !== null ? assignment(editingControl) : null;
   const pickerAbilities = useMemo(() => {
     const ordered = abilities
       .filter((ability) => !ability.passive)
@@ -109,6 +134,31 @@ function AbilityBindingsDialog() {
       : ordered;
   }, [abilities, editingAbilityId]);
   const close = () => openOverlay("pause");
+  const saveWowLayout = (update: (current: UiLayout) => UiLayout) => {
+    try {
+      const ui = useUiLayoutStore.getState();
+      ui.persist({ ...ui.preferences, current: { ...ui.preferences.current, pc: update(ui.preferences.current.pc) } });
+      return true;
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "Could not save WoW ability bindings.");
+      return false;
+    }
+  };
+  const setBinding = (control: BindingControl, abilityId: string | null) => {
+    if (typeof control === "number") return saveWowLayout((current) => assignDesktopAbility(current, bar, control, abilityId));
+    useCombatStore.getState().setActionBinding(layer, control, abilityId);
+    return true;
+  };
+  const chooseLayout = (next: BindingLayout) => {
+    setLayout(next); setEditingControl(null); setRestoreRequest(null);
+    setNotice(`Choose a ${next === "wow" ? "WoW bar" : "controller"} button, then choose its ability.`);
+    controller.select(`binding-layout-${next}`);
+  };
+  const chooseBar = (next: number) => {
+    setBar(next); setEditingControl(null); setRestoreRequest(null);
+    setNotice(`Bar ${next + 1} selected.`);
+    controller.select(barControlId(next));
+  };
 
   const chooseLayer = (next: ActionBindingLayer) => {
     setLayer(next);
@@ -117,40 +167,42 @@ function AbilityBindingsDialog() {
     setNotice(`${ACTION_LAYER_LABELS[next]} layer selected.`);
     controller.select(layerControlId(next));
   };
-  const beginEditing = (control: ActionBindingControl) => {
-    const abilityId = bindings[actionBindingId(layer, control)];
+  const beginEditing = (control: BindingControl) => {
+    const abilityId = assignment(control);
     setEditingControl(control);
     setRestoreRequest(null);
     controller.select(abilityId ? choiceControlId(abilityId) : "binding-choice-empty");
   };
   const cancelEditing = () => {
-    if (!editingControl) return;
+    if (editingControl === null) return;
     const control = editingControl;
     setEditingControl(null);
     controller.select(slotControlId(control));
   };
   const assign = (abilityId: string | null) => {
-    if (!editingControl) return;
+    if (editingControl === null) return;
     const control = editingControl;
     const ability = abilityId ? abilities.find((candidate) => candidate.id === abilityId) ?? null : null;
-    useCombatStore.getState().setActionBinding(layer, control, abilityId);
-    setNotice(`${bindingChord(layer, control)}: ${ability?.name ?? "Empty"}.`);
+    if (!setBinding(control, abilityId)) return;
+    setNotice(`${controlLabel(control)}: ${ability?.name ?? "Empty"}. Saved.`);
     setEditingControl(null);
     controller.select(slotControlId(control));
   };
-  const clearSelected = (control: ActionBindingControl | null = editingControl) => {
-    if (!control) return;
-    useCombatStore.getState().setActionBinding(layer, control, null);
-    setNotice(`${bindingChord(layer, control)} cleared.`);
+  const clearSelected = (control: BindingControl | null = editingControl) => {
+    if (control === null) return;
+    if (!setBinding(control, null)) return;
+    setNotice(`${controlLabel(control)} cleared. Saved.`);
     setEditingControl(null);
     controller.select(slotControlId(control));
   };
   const requestRestore = (scope: RestoreScope, focusId: string) => {
     setRestoreRequest({
       scope,
+      layout,
       layer,
+      bar,
       cancelFocusId: focusId,
-      completeFocusId: editingControl ? slotControlId(editingControl) : focusId,
+      completeFocusId: editingControl !== null ? slotControlId(editingControl) : focusId,
     });
     controller.select("binding-confirm-cancel");
   };
@@ -163,7 +215,11 @@ function AbilityBindingsDialog() {
   const confirmRestore = () => {
     if (!restoreRequest) return;
     const request = restoreRequest;
-    if (request.scope === "layer") {
+    if (request.layout === "wow") {
+      const defaults = defaultActionBarForCharacter(classId, secondaryClassId, level);
+      if (!saveWowLayout((current) => resetDesktopAbilities(current, defaults, request.scope === "layer" ? request.bar : undefined))) return;
+      setNotice(request.scope === "layer" ? `Bar ${request.bar + 1} abilities restored. Saved.` : "All WoW bar abilities restored. Saved.");
+    } else if (request.scope === "layer") {
       useCombatStore.getState().resetActionBindingLayer(request.layer);
       setNotice(`${ACTION_LAYER_LABELS[request.layer]} layer restored.`);
     } else {
@@ -190,53 +246,72 @@ function AbilityBindingsDialog() {
         },
       ];
     }
-    if (editingControl) {
+    if (editingControl !== null) {
       return [
         ...pickerAbilities.map((ability) => ({ id: choiceControlId(ability.id), run: () => assign(ability.id) })),
         { id: "binding-choice-empty", run: () => assign(null) },
       ];
     }
     return [
-      ...ACTION_LAYERS.map((nextLayer) => {
-        const id = layerControlId(nextLayer);
-        return { id, run: () => chooseLayer(nextLayer), neighbors: MAIN_ACTION_NEIGHBORS[id] };
-      }),
-      ...ACTION_CONTROLS.map((control) => {
-        const id = slotControlId(control);
-        return { id, run: () => beginEditing(control), neighbors: MAIN_ACTION_NEIGHBORS[id] };
-      }),
+      ...(["controller", "wow"] as const).map((next) => ({
+        id: `binding-layout-${next}`, run: () => chooseLayout(next),
+        neighbors: isWow ? { up: "binding-restore-all", down: barControlId(bar), left: `binding-layout-${next === "wow" ? "controller" : "wow"}`, right: `binding-layout-${next === "wow" ? "controller" : "wow"}` } : MAIN_ACTION_NEIGHBORS[`binding-layout-${next}`],
+      })),
+      ...(isWow ? [
+        ...pcLayout.bars.map((_, index) => ({ id: barControlId(index), run: () => chooseBar(index), neighbors: {
+          up: "binding-layout-wow", down: slotControlId(index), left: barControlId((index + 4) % 5), right: barControlId((index + 1) % 5),
+        } })),
+        ...pcLayout.bars[bar].slots.map((_, slot) => ({ id: slotControlId(slot), run: () => beginEditing(slot), neighbors: {
+          up: slot < 4 ? barControlId(bar) : slotControlId(slot - 4),
+          down: slot >= 8 ? "binding-restore-layer" : slotControlId(slot + 4),
+          left: slotControlId((slot + 11) % 12), right: slotControlId((slot + 1) % 12),
+        } })),
+      ] : [
+        ...ACTION_LAYERS.map((nextLayer) => {
+          const id = layerControlId(nextLayer);
+          return { id, run: () => chooseLayer(nextLayer), neighbors: MAIN_ACTION_NEIGHBORS[id] };
+        }),
+        ...ACTION_CONTROLS.map((control) => {
+          const id = slotControlId(control);
+          return { id, run: () => beginEditing(control), neighbors: MAIN_ACTION_NEIGHBORS[id] };
+        }),
+      ]),
       {
         id: "binding-restore-layer",
         run: () => requestRestore("layer", "binding-restore-layer"),
-        neighbors: MAIN_ACTION_NEIGHBORS["binding-restore-layer"],
+        neighbors: isWow ? { up: slotControlId(8), down: "binding-layout-controller", left: "binding-restore-all", right: "binding-restore-all" } : MAIN_ACTION_NEIGHBORS["binding-restore-layer"],
       },
       {
         id: "binding-restore-all",
         run: () => requestRestore("all", "binding-restore-all"),
-        neighbors: MAIN_ACTION_NEIGHBORS["binding-restore-all"],
+        neighbors: isWow ? { up: slotControlId(11), down: "binding-layout-wow", left: "binding-restore-layer", right: "binding-restore-layer" } : MAIN_ACTION_NEIGHBORS["binding-restore-all"],
       },
     ];
-  }, [abilities, bindings, editingControl, layer, pickerAbilities, restoreRequest]);
+  }, [abilities, bindings, classId, secondaryClassId, level, editingControl, layer, layout, bar, pcLayout, pickerAbilities, restoreRequest]);
   const controller = useMenuController(actions, {
-    columns: restoreRequest ? 2 : editingControl ? 1 : 3,
+    columns: restoreRequest ? 2 : editingControl !== null ? 1 : isWow ? 4 : 3,
     initialId: restoreRequest
       ? "binding-confirm-cancel"
-      : editingControl
+      : editingControl !== null
         ? editingAbilityId ? choiceControlId(editingAbilityId) : "binding-choice-empty"
-        : layerControlId(layer),
-    onBack: restoreRequest ? cancelRestore : editingControl ? cancelEditing : close,
+        : isWow ? barControlId(bar) : layerControlId(layer),
+    onBack: restoreRequest ? cancelRestore : editingControl !== null ? cancelEditing : close,
   });
 
+  useEffect(() => {
+    panel.current?.querySelector(".is-controller-selected")?.scrollIntoView({ block: "nearest" });
+  }, [controller.selectedId]);
+
   useEffect(() => {
     const run = (id: string | undefined) => {
       if (restoreRequest) return;
-      if (id === "editor-layer-2") chooseLayer("secondary");
-      else if (id === "editor-layer-3") chooseLayer("tertiary");
+      if (id === "editor-layer-2") { if (isWow) chooseBar(1); else chooseLayer("secondary"); }
+      else if (id === "editor-layer-3") { if (isWow) chooseBar(2); else chooseLayer("tertiary"); }
       else if (id === "editor-clear") {
-        if (editingControl) clearSelected(editingControl);
+        if (editingControl !== null) clearSelected(editingControl);
         else {
-          const prefix = "binding-slot-";
-          if (controller.selectedId.startsWith(prefix)) clearSelected(controller.selectedId.slice(prefix.length) as ActionBindingControl);
+          const prefix = isWow ? "binding-wow-slot-" : "binding-slot-";
+          if (controller.selectedId.startsWith(prefix)) clearSelected(isWow ? Number(controller.selectedId.slice(prefix.length)) : controller.selectedId.slice(prefix.length) as ActionBindingControl);
         }
       } else if (id === "editor-reset") requestRestore("layer", controller.selectedId);
     };
@@ -252,7 +327,7 @@ function AbilityBindingsDialog() {
     };
     window.addEventListener("keydown", onKey);
     return () => { unsubscribe(); window.removeEventListener("keydown", onKey); };
-  }, [controller.selectedId, editingControl, layer, restoreRequest]);
+  }, [controller.selectedId, editingControl, layer, layout, bar, pcLayout, restoreRequest]);
 
   const bindingSlot = (control: ActionBindingControl) => {
     const definition = ACTION_CONTROL_DEFINITIONS[control];
@@ -282,16 +357,32 @@ function AbilityBindingsDialog() {
 
   return (
     <div className="modal-backdrop game-panel-backdrop" role="presentation">
-      <section className="game-panel ability-bindings-panel" role="dialog" aria-modal="true" aria-labelledby="ability-bindings-title">
+      <section ref={panel} className="game-panel ability-bindings-panel" role="dialog" aria-modal="true" aria-labelledby="ability-bindings-title">
         <header className="game-panel__header">
           <div>
-            <p className="eyebrow">Controller loadout · 24 customizable slots</p>
+            <p className="eyebrow">{isWow ? "WoW loadout · 5 bars · 60 customizable slots" : "Controller loadout · 24 customizable slots"}</p>
             <h2 id="ability-bindings-title">Ability controls</h2>
           </div>
           <button type="button" className="icon-button" onClick={close} aria-label="Return to pause menu">×</button>
         </header>
 
-        <nav className="ability-bindings__layers" aria-label="Ability binding layers">
+        <nav className="ability-bindings__layouts" aria-label="Action bar style">
+          {(["controller", "wow"] as const).map((next) => (
+            <ControllerButton key={next} controlId={`binding-layout-${next}`} selectedId={controller.selectedId} select={controller.select}
+              type="button" aria-pressed={layout === next} className={layout === next ? "is-active" : ""} onClick={() => chooseLayout(next)}>
+              {next === "wow" ? "WoW bars" : "Controller bars"}
+            </ControllerButton>
+          ))}
+        </nav>
+
+        {isWow ? <nav className="ability-bindings__layers ability-bindings__bars" aria-label="WoW action bars">
+          {pcLayout.bars.map((_, index) => (
+            <ControllerButton key={index} controlId={barControlId(index)} selectedId={controller.selectedId} select={controller.select}
+              type="button" aria-pressed={bar === index} className={bar === index ? "is-active" : ""} onClick={() => chooseBar(index)}>
+              <kbd>{index + 1}</kbd><span><strong>Bar {index + 1}</strong><small>{pcLayout.wowBars && index < pcLayout.barCount ? "Enabled" : "Inactive"}</small></span>
+            </ControllerButton>
+          ))}
+        </nav> : <nav className="ability-bindings__layers" aria-label="Ability binding layers">
           {ACTION_LAYERS.map((nextLayer) => (
             <ControllerButton
               key={nextLayer}
@@ -307,10 +398,31 @@ function AbilityBindingsDialog() {
               <span><strong>{ACTION_LAYER_LABELS[nextLayer]}</strong><small>{nextLayer === "primary" ? "No modifier" : `Hold ${ACTION_LAYER_LABELS[nextLayer]}`}</small></span>
             </ControllerButton>
           ))}
-        </nav>
+        </nav>}
 
         <div className="ability-bindings__layout">
-          <section className="ability-bindings__diagram" aria-label={`${ACTION_LAYER_LABELS[layer]} controller layout`}>
+          {isWow ? <section className="ability-bindings__wow" aria-label={`Bar ${bar + 1} ability assignments`}>
+            <div className="ability-bindings__wow-slots">
+              {pcLayout.bars[bar].slots.map((slot, index) => {
+                const ability = abilities.find((candidate) => candidate.id === slot.abilityId);
+                const locked = Boolean(ability && ability.unlockLevel > level);
+                const name = ability?.name ?? (slot.abilityId ? "Unavailable for this character" : "Empty");
+                return <ControllerButton key={index} controlId={slotControlId(index)} selectedId={controller.selectedId} select={controller.select}
+                  type="button" className={`ability-binding-slot ${locked ? "is-locked" : ""} ${editingControl === index ? "is-editing" : ""}`}
+                  aria-label={`${controlLabel(index)}: ${name}${locked ? `, unlocks at level ${ability!.unlockLevel}` : ""}`}
+                  aria-pressed={editingControl === index} title={`${controlLabel(index)}: ${name}`} onClick={() => beginEditing(index)}>
+                  <kbd>{actionKeyLabel(slot.key) || "—"}</kbd>
+                  {ability ? <AbilityBindingIcon icon={ability.icon} sigil={ability.sigil} color={classColor} /> : <span className="ability-bindings__empty" aria-hidden="true">+</span>}
+                  <span><strong>Button {index + 1}</strong><small>{locked ? `${name} · Level ${ability!.unlockLevel}` : name}</small></span>
+                </ControllerButton>;
+              })}
+            </div>
+            <p className="ability-bindings__wow-note">{!pcLayout.wowBars ? "Enable WoW action bars in UI layout to use these assignments on PC." : bar >= pcLayout.barCount ? "This bar is inactive. Increase the visible bar count in UI layout to use it." : "Choose a button to change its ability. Changes save immediately."}</p>
+            <div className="ability-bindings__restore">
+              <ControllerButton controlId="binding-restore-layer" selectedId={controller.selectedId} select={controller.select} type="button" onClick={() => requestRestore("layer", "binding-restore-layer")}>Restore Bar {bar + 1}</ControllerButton>
+              <ControllerButton controlId="binding-restore-all" selectedId={controller.selectedId} select={controller.select} type="button" onClick={() => requestRestore("all", "binding-restore-all")}>Restore all WoW bars</ControllerButton>
+            </div>
+          </section> : <section className="ability-bindings__diagram" aria-label={`${ACTION_LAYER_LABELS[layer]} controller layout`}>
             <div className="ability-bindings__shoulders">
               {bindingSlot("r1")}
               {bindingSlot("r2")}
@@ -330,16 +442,20 @@ function AbilityBindingsDialog() {
               <ControllerButton controlId="binding-restore-layer" selectedId={controller.selectedId} select={controller.select} type="button" onClick={() => requestRestore("layer", "binding-restore-layer")}>Restore {ACTION_LAYER_LABELS[layer]}</ControllerButton>
               <ControllerButton controlId="binding-restore-all" selectedId={controller.selectedId} select={controller.select} type="button" onClick={() => requestRestore("all", "binding-restore-all")}>Restore all</ControllerButton>
             </div>
-          </section>
+          </section>}
 
           <aside className="ability-bindings__picker" aria-live="polite">
             {restoreRequest ? (
               <>
-                <p className="eyebrow">Confirm controller reset</p>
-                <h3>{restoreRequest.scope === "all"
+                <p className="eyebrow">Confirm {restoreRequest.layout === "wow" ? "WoW bar" : "controller"} reset</p>
+                <h3>{restoreRequest.layout === "wow"
+                  ? restoreRequest.scope === "all" ? "Restore all WoW bar abilities?" : `Restore Bar ${restoreRequest.bar + 1} abilities?`
+                  : restoreRequest.scope === "all"
                   ? "Restore all ability controls?"
                   : `Restore the ${ACTION_LAYER_LABELS[restoreRequest.layer]} layer?`}</h3>
-                <p className="ability-bindings__confirm-warning">{restoreRequest.scope === "all"
+                <p className="ability-bindings__confirm-warning">{restoreRequest.layout === "wow"
+                  ? `This replaces ${restoreRequest.scope === "all" ? "all 60 WoW slots" : "this bar's 12 slots"} with the class defaults. Keyboard shortcuts and bar layout are kept.`
+                  : restoreRequest.scope === "all"
                   ? "This replaces every customized controller slot with the class defaults."
                   : `This replaces all eight ${ACTION_LAYER_LABELS[restoreRequest.layer]} slots with their class defaults.`}</p>
                 <div className="ability-bindings__choices ability-bindings__choices--confirm">
@@ -353,9 +469,9 @@ function AbilityBindingsDialog() {
                   </ControllerButton>
                 </div>
               </>
-            ) : editingControl ? (
+            ) : editingControl !== null ? (
               <>
-                <p className="eyebrow">Assign {bindingChord(layer, editingControl)}</p>
+                <p className="eyebrow">Assign {controlLabel(editingControl)}</p>
                 <h3>Choose an ability</h3>
                 <div className="ability-bindings__choices">
                   {pickerAbilities.map((ability) => (
@@ -372,19 +488,19 @@ function AbilityBindingsDialog() {
               </>
             ) : (
               <>
-                <p className="eyebrow">{ACTION_LAYER_LABELS[layer]} layer</p>
-                <h3>Select a controller button</h3>
-                <p>Each layer has the four face buttons, R1, R2, and both horizontal D-pad directions. Abilities may be reused on more than one button.</p>
-                <p className="ability-bindings__notice" role="status">{notice}</p>
+                <p className="eyebrow">{isWow ? `Bar ${bar + 1}` : `${ACTION_LAYER_LABELS[layer]} layer`}</p>
+                <h3>Select a {isWow ? "WoW bar" : "controller"} button</h3>
+                <p>{isWow ? "Each WoW bar has 12 buttons. Assign abilities on any of the five bars, including inactive bars. Change keyboard shortcuts in Options → Keybinds." : "Each layer has the four face buttons, R1, R2, and both horizontal D-pad directions. Abilities may be reused on more than one button."}</p>
               </>
             )}
           </aside>
         </div>
 
+        <p className="ability-bindings__notice" role="status">{notice}</p>
         <footer className="game-panel__footer">
           {restoreRequest
             ? <><span><kbd>{keyLabel("controller", "menu-confirm")}</kbd> Choose</span><span><kbd>{keyLabel("controller", "menu-back")}</kbd> Cancel</span></>
-            : <><span><kbd>{keyLabel("controller", "menu-confirm")}</kbd> Assign</span><span><kbd>{keyLabel("controller", "editor-clear")}</kbd> Clear</span><span><kbd>{keyLabel("controller", "menu-back")}</kbd> Back</span><span><kbd>{keyLabel("controller", "editor-reset")}</kbd> Restore layer</span></>}
+            : <><span><kbd>{keyLabel("controller", "menu-confirm")}</kbd> Assign</span><span><kbd>{keyLabel("controller", "editor-clear")}</kbd> Clear</span><span><kbd>{keyLabel("controller", "menu-back")}</kbd> Back</span><span><kbd>{keyLabel("controller", "editor-reset")}</kbd> Restore {isWow ? "bar" : "layer"}</span></>}
         </footer>
       </section>
     </div>