Show the selected reaction icon on the reaction button

com.woltlab.wcf/templates/reactionButton.tpl

@@ -7,5 +7,9 @@
 	data-reaction-object-type="{$reactionData->objectType}"
 	data-object-id="{$reactionData->objectID}"
 >
-	{icon name='face-smile'}
+	{if $reactionData->getReactionType()}
+		{unsafe:$reactionData->getReactionType()->renderIcon()}
+	{else}
+		{icon name='face-smile'}
+	{/if}
 </button>

ts/WoltLabSuite/Core/Component/Reaction/Button.ts

@@ -267,6 +267,24 @@ function updateReactionSummary(
   component?.setData(reactions, selectedReaction);
 }
 
+function updateButton(button: HTMLButtonElement, reactionTypeId: number): void {
+  button.dataset.reactionTypeId = reactionTypeId.toString();
+  button.classList.toggle("active", reactionTypeId !== 0);
+  button.setAttribute("aria-pressed", reactionTypeId !== 0 ? "true" : "false");
+
+  // Animates the new icon, the server-rendered initial icon is not affected.
+  button.classList.add("reactionButton--animated");
+
+  const reactionType = window.REACTION_TYPES[reactionTypeId];
+  if (reactionType !== undefined) {
+    button.innerHTML = reactionType.renderedIcon;
+  } else {
+    const icon = document.createElement("fa-icon");
+    icon.setIcon("face-smile");
+    button.replaceChildren(icon);
+  }
+}
+
 function setupToggleButton(): void {
   wheneverFirstSeen("[data-reaction-object-type]", (button: HTMLButtonElement) => {
     button.addEventListener(
@@ -284,17 +302,12 @@ async function toggleButton(button: HTMLButtonElement): Promise<void> {
 
   if (button.classList.contains("active")) {
     reactions = (await revertReaction(objectType, objectId)).reactions;
-    button.dataset.reactionTypeId = "0";
-    button.classList.remove("active");
-    button.setAttribute("aria-pressed", "false");
   } else {
     reactionTypeId = availableReactions[0].reactionTypeID;
     reactions = (await setReaction(objectType, objectId, reactionTypeId)).reactions;
-    button.dataset.reactionTypeId = reactionTypeId.toString();
-    button.classList.add("active");
-    button.setAttribute("aria-pressed", "true");
   }
 
+  updateButton(button, reactionTypeId);
   updateReactionSummary(objectType, objectId, reactions, reactionTypeId);
 }
 
@@ -334,17 +347,12 @@ function setupPopoverButton(): void {
 
         if (result.reactionTypeId == oldReactionTypeId) {
           reactions = (await revertReaction(objectType, objectId)).reactions;
-          button.dataset.reactionTypeId = "0";
-          button.classList.remove("active");
-          button.setAttribute("aria-pressed", "false");
         } else {
           reactionTypeId = result.reactionTypeId;
           reactions = (await setReaction(objectType, objectId, reactionTypeId)).reactions;
-          button.dataset.reactionTypeId = reactionTypeId.toString();
-          button.classList.add("active");
-          button.setAttribute("aria-pressed", "true");
         }
 
+        updateButton(button, reactionTypeId);
         updateReactionSummary(objectType, objectId, reactions, reactionTypeId);
       });
     });

wcfsetup/install/files/lib/system/reaction/ReactionData.class.php

@@ -2,6 +2,9 @@
 
 namespace wcf\system\reaction;
 
+use wcf\data\reaction\type\ReactionType;
+use wcf\data\reaction\type\ReactionTypeCache;
+
 /**
  * Data transfer object for an object that has reactions.
  *
@@ -19,4 +22,16 @@ public function __construct(
         public readonly ?string $cachedReactions = null,
         public readonly string $reactionsJson = '[]',
     ) {}
+
+    /**
+     * Returns the reaction type the active user has reacted with or `null` if there is none.
+     */
+    public function getReactionType(): ?ReactionType
+    {
+        if ($this->reactionTypeID === 0) {
+            return null;
+        }
+
+        return ReactionTypeCache::getInstance()->getReactionTypeByID($this->reactionTypeID);
+    }
 }

wcfsetup/install/files/style/ui/reactions.scss

@@ -38,6 +38,37 @@ html[data-color-scheme="dark"] .reactionPopover {
 	height: 20px;
 }
 
+.reactionButton .reactionType {
+	width: 16px;
+	height: 16px;
+	// Necessary because the default icon has a size of 20x16.
+	margin: 0 2px;
+}
+
+@keyframes reactionButtonIcon {
+	0% {
+		opacity: 0;
+		transform: scale(0.6);
+	}
+	60% {
+		opacity: 1;
+		transform: scale(1.2);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+.reactionButton--animated > * {
+	animation: reactionButtonIcon 0.36s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.reactionButton--animated > * {
+		animation: none;
+	}
+}
+
 .reactionPopoverContent .reactionType,
 .reactionTypeListImage .reactionType {
 	width: 24px;