Improve Notification Panel (#3913)

Resolves #3910

## Description:

- Split the events HUD into two components: a new
**`<actionable-events>`** that owns alliance prompts (request / renew)
and a slimmed-down **`<events-display>`** for everything else.
- Reworked `<events-display>` into two visual tiers: dim/scrolling tier
2 on top (trade results, unit losses, donations, alliance status),
prominent tier 1 anchored at the bottom (inbound nukes, naval invasion,
attack requests, alliance broken, conquered player, chat). Tier 2 caps
at the 4 newest entries; events expire after 8s.
- Added a transient **+gold pip** above the gold pill in
`<control-panel>`, animated with a small fade-in. Fires for trade ships,
trains, donations, and conquest. Trade-ship and train arrivals are
removed from the events scroll since they're surfaced here instead.
- New `MessageType.NUKE_DETONATED` and a server-side emission in
`NukeExecution.detonate` — once an inbound nuke lands or gets
intercepted, the inbound warning vanishes and a "detonated" entry takes
its place.
- `displayMessage` gained optional `unitID` and `focusPlayerID` params
so events can link to a unit or a player. Unit captures and destructions
now navigate to the unit's last tile when clicked; donations navigate to
the other player.
- ActionableEvents card width matches `<events-display>`; cards persist
until the user clicks Accept/Reject/Renew/Ignore or the server-side
request timeout expires.
- Removed the in-events category filter UI and the gold-amount banner —
`<events-display>` is now a lightweight log that hides entirely when
empty.

<img width="570" height="444" alt="Screenshot 2026-05-21 at 1 42 30 PM"
src="https://github.com/user-attachments/assets/f103efb3-0e11-4b72-a11b-91ff6896177c"
/>

<img width="430" height="296" alt="Screenshot 2026-05-21 at 1 41 34 PM"
src="https://github.com/user-attachments/assets/ae58475a-b252-4aa6-9ce5-99dea7575ce3"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

src/core/execution/NukeExecution.ts

@@ -386,6 +386,27 @@ export class NukeExecution implements Execution {
     this.nuke.setReachedTarget();
     this.nuke.delete(false);
 
+    if (
+      this.nukeType === UnitType.AtomBomb ||
+      this.nukeType === UnitType.HydrogenBomb
+    ) {
+      const messageKey =
+        this.nukeType === UnitType.AtomBomb
+          ? "events_display.atom_bomb_detonated"
+          : "events_display.hydrogen_bomb_detonated";
+      for (const [impactedPlayer] of tilesPerPlayers) {
+        mg.displayMessage(
+          messageKey,
+          MessageType.NUKE_DETONATED,
+          impactedPlayer.id(),
+          undefined,
+          { name: this.player.displayName() },
+          undefined,
+          this.player.id(),
+        );
+      }
+    }
+
     // Record stats
     this.mg
       .stats()

src/core/execution/TradeShipExecution.ts

@@ -189,28 +189,8 @@ export class TradeShipExecution implements Execution {
         .stats()
         .boatCapturedTrade(this.tradeShip!.owner(), this.origOwner, gold);
     } else {
-      this.srcPort.owner().addGold(gold);
+      this.srcPort.owner().addGold(gold, this.srcPort.tile());
       this._dstPort.owner().addGold(gold, this._dstPort.tile());
-      this.mg.displayMessage(
-        "events_display.received_gold_from_trade",
-        MessageType.RECEIVED_GOLD_FROM_TRADE,
-        this._dstPort.owner().id(),
-        gold,
-        {
-          gold: renderNumber(gold),
-          name: this.srcPort.owner().displayName(),
-        },
-      );
-      this.mg.displayMessage(
-        "events_display.received_gold_from_trade",
-        MessageType.RECEIVED_GOLD_FROM_TRADE,
-        this.srcPort.owner().id(),
-        gold,
-        {
-          gold: renderNumber(gold),
-          name: this._dstPort.owner().displayName(),
-        },
-      );
       // Record stats
       this.mg
         .stats()

src/core/game/Game.ts

@@ -926,6 +926,8 @@ export interface Game extends GameMap {
     playerID: PlayerID | null,
     goldAmount?: bigint,
     params?: Record<string, string | number>,
+    unitID?: number,
+    focusPlayerID?: PlayerID,
   ): void;
   displayIncomingUnit(
     unitID: number,
@@ -1030,6 +1032,7 @@ export enum MessageType {
   CONQUERED_PLAYER,
   MIRV_INBOUND,
   NUKE_INBOUND,
+  NUKE_DETONATED,
   HYDROGEN_BOMB_INBOUND,
   NAVAL_INVASION_INBOUND,
   SAM_MISS,
@@ -1042,11 +1045,8 @@ export enum MessageType {
   ALLIANCE_REQUEST,
   ALLIANCE_BROKEN,
   ALLIANCE_EXPIRED,
-  SENT_GOLD_TO_PLAYER,
-  RECEIVED_GOLD_FROM_PLAYER,
-  RECEIVED_GOLD_FROM_TRADE,
-  SENT_TROOPS_TO_PLAYER,
-  RECEIVED_TROOPS_FROM_PLAYER,
+  DONATION_SENT,
+  DONATION_RECEIVED,
   CHAT,
   RENEW_ALLIANCE,
 }
@@ -1068,6 +1068,7 @@ export const MESSAGE_TYPE_CATEGORIES: Record<MessageType, MessageCategory> = {
   [MessageType.CONQUERED_PLAYER]: MessageCategory.ATTACK,
   [MessageType.MIRV_INBOUND]: MessageCategory.NUKE,
   [MessageType.NUKE_INBOUND]: MessageCategory.NUKE,
+  [MessageType.NUKE_DETONATED]: MessageCategory.NUKE,
   [MessageType.HYDROGEN_BOMB_INBOUND]: MessageCategory.NUKE,
   [MessageType.NAVAL_INVASION_INBOUND]: MessageCategory.ATTACK,
   [MessageType.SAM_MISS]: MessageCategory.ATTACK,
@@ -1081,11 +1082,8 @@ export const MESSAGE_TYPE_CATEGORIES: Record<MessageType, MessageCategory> = {
   [MessageType.ALLIANCE_BROKEN]: MessageCategory.ALLIANCE,
   [MessageType.ALLIANCE_EXPIRED]: MessageCategory.ALLIANCE,
   [MessageType.RENEW_ALLIANCE]: MessageCategory.ALLIANCE,
-  [MessageType.SENT_GOLD_TO_PLAYER]: MessageCategory.TRADE,
-  [MessageType.RECEIVED_GOLD_FROM_PLAYER]: MessageCategory.TRADE,
-  [MessageType.RECEIVED_GOLD_FROM_TRADE]: MessageCategory.TRADE,
-  [MessageType.SENT_TROOPS_TO_PLAYER]: MessageCategory.TRADE,
-  [MessageType.RECEIVED_TROOPS_FROM_PLAYER]: MessageCategory.TRADE,
+  [MessageType.DONATION_SENT]: MessageCategory.TRADE,
+  [MessageType.DONATION_RECEIVED]: MessageCategory.TRADE,
   [MessageType.CHAT]: MessageCategory.CHAT,
 } as const;
 

src/core/game/GameImpl.ts

@@ -926,11 +926,17 @@ export class GameImpl implements Game {
     playerID: PlayerID | null,
     goldAmount?: bigint,
     params?: Record<string, string | number>,
+    unitID?: number,
+    focusPlayerID?: PlayerID,
   ): void {
     let id: number | null = null;
     if (playerID !== null) {
       id = this.player(playerID).smallID();
     }
+    const focusID =
+      focusPlayerID !== undefined
+        ? this.player(focusPlayerID).smallID()
+        : undefined;
     this.addUpdate({
       type: GameUpdateType.DisplayEvent,
       messageType: type,
@@ -938,6 +944,8 @@ export class GameImpl implements Game {
       playerID: id,
       goldAmount: goldAmount,
       params: params,
+      unitID: unitID,
+      focusPlayerID: focusID,
     });
   }
 

src/core/game/GameUpdates.ts

@@ -68,6 +68,7 @@ export enum GameUpdateType {
   EmbargoEvent,
   SpawnPhaseEnd,
   GamePaused,
+  DonateEvent,
 }
 
 export type GameUpdate =
@@ -92,7 +93,8 @@ export type GameUpdate =
   | ConquestUpdate
   | EmbargoUpdate
   | SpawnPhaseEndUpdate
-  | GamePausedUpdate;
+  | GamePausedUpdate
+  | DonateEventUpdate;
 
 export interface BonusEventUpdate {
   type: GameUpdateType.BonusEvent;
@@ -129,6 +131,14 @@ export interface ConquestUpdate {
   gold: Gold;
 }
 
+export interface DonateEventUpdate {
+  type: GameUpdateType.DonateEvent;
+  donationType: "troops" | "gold";
+  senderId: PlayerID;
+  recipientId: PlayerID;
+  amount: bigint;
+}
+
 export interface UnitUpdate {
   type: GameUpdateType.Unit;
   unitType: UnitType;
@@ -262,6 +272,8 @@ export interface DisplayMessageUpdate {
   goldAmount?: bigint;
   playerID: number | null;
   params?: Record<string, string | number>;
+  unitID?: number;
+  focusPlayerID?: number;
 }
 
 export type DisplayChatMessageUpdate = {

src/core/game/PlayerImpl.ts

@@ -1,4 +1,3 @@
-import { renderNumber, renderTroops } from "../../client/Utils";
 import { PseudoRandom } from "../PseudoRandom";
 import { ClientID } from "../Schemas";
 import {
@@ -23,7 +22,6 @@ import {
   EmojiMessage,
   GameMode,
   Gold,
-  MessageType,
   MutableAlliance,
   Player,
   PlayerBuildable,
@@ -822,20 +820,13 @@ export class PlayerImpl implements Player {
     recipient.addTroops(removed);
 
     this.sentDonations.push(new Donation(recipient, this.mg.ticks()));
-    this.mg.displayMessage(
-      "events_display.sent_troops_to_player",
-      MessageType.SENT_TROOPS_TO_PLAYER,
-      this.id(),
-      undefined,
-      { troops: renderTroops(troops), name: recipient.displayName() },
-    );
-    this.mg.displayMessage(
-      "events_display.received_troops_from_player",
-      MessageType.RECEIVED_TROOPS_FROM_PLAYER,
-      recipient.id(),
-      undefined,
-      { troops: renderTroops(troops), name: this.displayName() },
-    );
+    this.mg.addUpdate({
+      type: GameUpdateType.DonateEvent,
+      donationType: "troops",
+      senderId: this.id(),
+      recipientId: recipient.id(),
+      amount: BigInt(removed),
+    });
     return true;
   }
 
@@ -846,20 +837,13 @@ export class PlayerImpl implements Player {
     recipient.addGold(removed);
 
     this.sentDonations.push(new Donation(recipient, this.mg.ticks()));
-    this.mg.displayMessage(
-      "events_display.sent_gold_to_player",
-      MessageType.SENT_GOLD_TO_PLAYER,
-      this.id(),
-      undefined,
-      { gold: renderNumber(gold), name: recipient.displayName() },
-    );
-    this.mg.displayMessage(
-      "events_display.received_gold_from_player",
-      MessageType.RECEIVED_GOLD_FROM_PLAYER,
-      recipient.id(),
-      gold,
-      { gold: renderNumber(gold), name: this.displayName() },
-    );
+    this.mg.addUpdate({
+      type: GameUpdateType.DonateEvent,
+      donationType: "gold",
+      senderId: this.id(),
+      recipientId: recipient.id(),
+      amount: removed,
+    });
     return true;
   }
 

src/core/game/UnitImpl.ts

@@ -219,6 +219,7 @@ export class UnitImpl implements Unit {
       this._lastOwner.id(),
       undefined,
       { unit: this.type(), name: newOwner.displayName() },
+      this.id(),
     );
     this.mg.displayMessage(
       "events_display.captured_enemy_unit",
@@ -226,6 +227,7 @@ export class UnitImpl implements Unit {
       newOwner.id(),
       undefined,
       { unit: this.type(), name: this._lastOwner.displayName() },
+      this.id(),
     );
   }
 
@@ -336,6 +338,7 @@ export class UnitImpl implements Unit {
       this.owner().id(),
       undefined,
       { unit: this._type },
+      this.id(),
     );
   }