Migrate StyleAction functions to Command/API-Endpoints (#6429)

* Migrate the function to change the style to a command

* API endpoint to get style chooser and change style

* Minor improvements

---------

Co-authored-by: Alexander Ebert <ebert@woltlab.com>

Author: Cyperghost

ts/WoltLabSuite/Core/Api/Styles/ChangeStyle.ts

@@ -0,0 +1,17 @@
+/**
+ * Change the style of the current user.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { fromInfallibleApiRequest } from "../Result";
+
+export function changeStyle(styleId: number): Promise<[]> {
+  return fromInfallibleApiRequest(() => {
+    return prepareRequest(`${window.WSC_RPC_API_URL}core/styles/${styleId}/change`).post().fetchAsJson();
+  });
+}

ts/WoltLabSuite/Core/Api/Styles/GetStyleChooser.ts

@@ -0,0 +1,21 @@
+/**
+ * Change the style of the current user.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+
+import { prepareRequest } from "WoltLabSuite/Core/Ajax/Backend";
+import { fromInfallibleApiRequest } from "../Result";
+
+type Response = {
+  template: string;
+};
+
+export function getStyleChooser(): Promise<Response> {
+  return fromInfallibleApiRequest(() => {
+    return prepareRequest(`${window.WSC_RPC_API_URL}core/styles/chooser`).get().fetchAsJson();
+  });
+}

ts/WoltLabSuite/Core/Controller/Style/Changer.ts

@@ -7,70 +7,55 @@
  * @woltlabExcludeBundle all
  */
 
-import * as Ajax from "../../Ajax";
-import * as Language from "../../Language";
-import UiDialog from "../../Ui/Dialog";
-import { DialogCallbackSetup } from "../../Ui/Dialog/Data";
+import { getPhrase } from "../../Language";
+import { changeStyle } from "WoltLabSuite/Core/Api/Styles/ChangeStyle";
+import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+import { getStyleChooser } from "WoltLabSuite/Core/Api/Styles/GetStyleChooser";
 
 class ControllerStyleChanger {
   /**
    * Adds the style changer to the bottom navigation.
    */
   constructor() {
     document.querySelectorAll(".jsButtonStyleChanger").forEach((link: HTMLAnchorElement) => {
-      link.addEventListener("click", (ev) => this.showDialog(ev));
+      link.addEventListener(
+        "click",
+        promiseMutex((ev) => this.showDialog(ev)),
+      );
     });
   }
 
   /**
    * Loads and displays the style change dialog.
    */
-  showDialog(event: MouseEvent): void {
+  async showDialog(event: MouseEvent): Promise<void> {
     event.preventDefault();
 
-    UiDialog.open(this);
-  }
+    const { template } = await getStyleChooser();
+    const dialog = dialogFactory().fromHtml(template).withoutControls();
+
+    dialog.content.querySelectorAll(".styleList > li").forEach((style: HTMLLIElement) => {
+      style.classList.add("pointer");
+      style.addEventListener("click", (event) => {
+        event.preventDefault();
+
+        promiseMutex(() => this.#changeStyle(style));
+      });
+    });
 
-  _dialogSetup(): ReturnType<DialogCallbackSetup> {
-    return {
-      id: "styleChanger",
-      options: {
-        disableContentPadding: true,
-        title: Language.get("wcf.style.changeStyle"),
-      },
-      source: {
-        data: {
-          actionName: "getStyleChooser",
-          className: "wcf\\data\\style\\StyleAction",
-        },
-        after: (content) => {
-          content.querySelectorAll(".styleList > li").forEach((style: HTMLLIElement) => {
-            style.classList.add("pointer");
-            style.addEventListener("click", (ev) => this.click(ev));
-          });
-        },
-      },
-    };
+    dialog.show(getPhrase("wcf.style.changeStyle"));
   }
 
   /**
    * Changes the style and reloads current page.
    */
-  private click(event: MouseEvent): void {
-    event.preventDefault();
+  async #changeStyle(style: HTMLLIElement): Promise<void> {
+    const styleId = parseInt(style.dataset.styleId!, 10);
 
-    const listElement = event.currentTarget as HTMLLIElement;
+    await changeStyle(styleId);
 
-    Ajax.apiOnce({
-      data: {
-        actionName: "changeStyle",
-        className: "wcf\\data\\style\\StyleAction",
-        objectIDs: [listElement.dataset.styleId],
-      },
-      success: function () {
-        window.location.reload();
-      },
-    });
+    window.location.reload();
   }
 }
 
@@ -89,5 +74,5 @@ export function setup(): void {
  * Loads and displays the style change dialog.
  */
 export function showDialog(event: MouseEvent): void {
-  controllerStyleChanger.showDialog(event);
+  void controllerStyleChanger.showDialog(event);
 }

wcfsetup/install/files/js/WoltLabSuite/Core/Api/Styles/ChangeStyle.js

@@ -169,6 +169,8 @@ static function (\wcf\event\endpoint\ControllerCollecting $event) {
             $event->register(new \wcf\system\endpoint\controller\core\styles\DisableStyle());
             $event->register(new \wcf\system\endpoint\controller\core\styles\EnableStyle());
             $event->register(new \wcf\system\endpoint\controller\core\styles\SetStyleAsDefault());
+            $event->register(new \wcf\system\endpoint\controller\core\styles\ChangeStyle());
+            $event->register(new \wcf\system\endpoint\controller\core\styles\GetStyleChooser());
             $event->register(new \wcf\system\endpoint\controller\core\users\options\DeleteOption());
             $event->register(new \wcf\system\endpoint\controller\core\users\options\DisableOption());
             $event->register(new \wcf\system\endpoint\controller\core\users\options\EnableOption());

wcfsetup/install/files/js/WoltLabSuite/Core/Api/Styles/GetStyleChooser.js

@@ -0,0 +1,61 @@
+<?php
+
+namespace wcf\command\style;
+
+use wcf\data\style\Style;
+use wcf\data\user\UserAction;
+use wcf\event\style\StyleChanged;
+use wcf\system\event\EventHandler;
+use wcf\system\style\StyleHandler;
+use wcf\system\WCF;
+
+/**
+ * Change the style for the current user.
+ *
+ * @author Olaf Braun
+ * @copyright 2001-2025 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+final class ChangeStyle
+{
+    public function __construct(
+        private readonly Style $style
+    ) {}
+
+    public function __invoke(): void
+    {
+        StyleHandler::getInstance()->changeStyle($this->style->styleID);
+        if (StyleHandler::getInstance()->getStyle()->styleID !== $this->style->styleID) {
+            // style could not be changed
+            return;
+        }
+
+        if (WCF::getUser()->userID) {
+            $this->saveUserStyle($this->style->styleID, (bool)$this->style->isDefault);
+        } else {
+            $this->saveGuestStyle($this->style->styleID, (bool)$this->style->isDefault);
+        }
+
+        $event = new StyleChanged($this->style);
+        EventHandler::getInstance()->fire($event);
+    }
+
+    private function saveUserStyle(int $styleID, bool $isDefaultStyle): void
+    {
+        (new UserAction([WCF::getUser()], 'update', [
+            'data' => [
+                'styleID' => $isDefaultStyle ? 0 : $styleID,
+            ],
+        ]))->executeAction();
+    }
+
+    private function saveGuestStyle(int $styleID, bool $isDefaultStyle): void
+    {
+        if ($isDefaultStyle) {
+            WCF::getSession()->unregister('styleID');
+        } else {
+            WCF::getSession()->register('styleID', $styleID);
+        }
+    }
+}