Add quick menu button to toggle chat panel visibility

doc/sources/graphics-misc.txt

@@ -53,6 +53,7 @@ data/gui/joystick/
 
 data/gui/quickmenu/
 
+chat*      narrowhouse; CC0; https://openclipart.org/detail/171388
 joystick*  sagism; CC0; https://openclipart.org/detail/172636
 log*       Martin Owens (doctormo); CC0; https://openclipart.org/detail/3879
 main*      Jordan Irwin (AntumDeluge); CC0; Stendhal

srcjs/stendhal.html

@@ -77,6 +77,7 @@
 			<img class="qm-button" id="qm-main">
 			<img class="qm-button" id="qm-menu">
 			<img class="qm-button" id="qm-settings">
+			<img class="qm-button" id="qm-chat">
 			<img class="qm-button" id="qm-log">
 			<img class="qm-button" id="qm-sound">
 			<img class="qm-button" id="qm-joystick">

srcjs/stendhal/ui/factory/DesktopUserInterfaceFactory.ts

@@ -67,7 +67,8 @@ export class DesktopUserInterfaceFactory {
 		// hide pouch by default
 
 		// emoji button causes spacing between elements so apply theme to container panel
-		let bottomPanel = new Panel("bottomPanel", true);
+		const bottomPanel = new Panel("bottomPanel", true);
+		bottomPanel.setVisible(singletons.getConfigManager().getBoolean("client.chat.visible"));
 		ui.registerComponent(UIComponentEnum.BottomPanel, bottomPanel);
 
 		this.add(bottomPanel, UIComponentEnum.ChatInput, new ChatInputComponent());

srcjs/stendhal/ui/quickmenu/ChatButton.ts

@@ -0,0 +1,41 @@
+/***************************************************************************
+ *                       Copyright © 2024 - Stendhal                       *
+ ***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU Affero General Public License as        *
+ *   published by the Free Software Foundation; either version 3 of the    *
+ *   License, or (at your option) any later version.                       *
+ *                                                                         *
+ ***************************************************************************/
+
+import { ButtonBase } from "./ButtonBase";
+import { ui } from "../UI";
+import { UIComponentEnum } from "../UIComponentEnum";
+
+
+export class ChatButton extends ButtonBase {
+
+	constructor() {
+		super("chat");
+	}
+
+	/**
+	 * Updates button icon.
+	 */
+	public override update() {
+		const chatPanel = ui.get(UIComponentEnum.BottomPanel);
+		if (chatPanel) {
+			this.setImageBasename(chatPanel.isVisible() ? "chat" : "chat-disabled");
+		}
+	}
+
+	protected override onClick(evt: Event) {
+		// update panel visibility
+		const chatPanel = ui.get(UIComponentEnum.BottomPanel);
+		if (chatPanel) {
+			chatPanel.setVisible(!chatPanel.isVisible());
+			this.update();
+		}
+	}
+}

srcjs/stendhal/ui/quickmenu/QMButton.ts

@@ -10,6 +10,7 @@
  ***************************************************************************/
 
 import { ButtonBase } from "./ButtonBase";
+import { ChatButton } from "./ChatButton";
 import { JoystickButton } from "./JoystickButton";
 import { LogButton } from "./LogButton";
 import { MenuButton } from "./MenuButton";
@@ -53,6 +54,7 @@ export class QMButton {
 		QMButton.buttonListX.push(new MenuButton());
 		QMButton.buttonListX.push(new SettingsButton());
 		QMButton.buttonListX.push(new LogButton());
+		QMButton.buttonListX.push(new ChatButton());
 		QMButton.buttonListX.push(new SoundButton());
 		QMButton.buttonListX.push(new JoystickButton());
 		// vertical sub-buttons

srcjs/stendhal/util/ConfigManager.ts

@@ -20,6 +20,7 @@ declare var stendhal: any;
 export class ConfigManager {
 
 	private readonly defaults = {
+		"client.chat.visible": "false",
 		"client.corpse.indicator": "true",
 		"client.emojis.native": "false",
 		"client.joystick": "false",