Add a user and room list overlay for the smartphone UI

files/style/be.bastelstu.chat.scss

@@ -495,30 +495,21 @@ #tpl_chat_log {
 		margin-left: 5px;
 	}
 
-	#smileyPickerContainer {
-		#smilies-text {
-			@if variable_exists(wcfContentContainerBackground) {
-				background-color: $wcfContentContainerBackground;
-			} @else {
-				// Compatibility with API_VERSION 3.0
-				background-color: rgba(255, 255, 255, 1);
+	#chatUserList,
+	[data-box-identifier='be.bastelstu.chat.roomListSidebar'] {
+		.modalCloseButton {
+			margin: 0 -10px -20px -10px;
 		}
-
-			border: 1px solid $wcfContentBorderInner;
-			padding: 20px;
-			margin-top: 20px;
-			margin-bottom: 20px;
-
-			> .smileyList {
-				overflow: auto;
-			}
-		}
-
-		#smileyPickerCloseButton {
-			display: none;
 	}
 
 	@include screen-md-down {
+		#smileyPickerContainer[data-show='true'] > div {
+			margin: 0;
+		}
+
+		#smileyPickerContainer,
+		#chatUserList,
+		[data-box-identifier='be.bastelstu.chat.roomListSidebar'] {
 			&[data-show='true'] {
 				position: fixed;
 				top: 0;
@@ -530,7 +521,9 @@ #tpl_chat_log {
 				flex-direction: column;
 				pointer-events: all;
 
-				#smileyPickerCloseButton {
+				background-color: $wcfContentBackground;
+
+				.modalCloseButton {
 					background-color: $wcfSidebarBackground;
 					color: $wcfSidebarLink;
 					display: block;
@@ -540,12 +533,11 @@ #tpl_chat_log {
 					cursor: pointer;
 				}
 
-				#smilies-text {
+				> div {
 					border-top: none;
 					border-right: none;
 					border-left: none;
 
-					margin: 0;
 					height: 0;
 					flex: 1 1 auto;
 					position: relative;
@@ -576,6 +568,24 @@ #tpl_chat_log {
 		}
 	}
 
+	#smileyPickerContainer {
+		> .messageTabMenuContent {
+			background-color: $wcfContentContainerBackground;
+			border: 1px solid $wcfContentBorderInner;
+			padding: 20px;
+			margin-top: 20px;
+			margin-bottom: 20px;
+
+			> .smileyList {
+				overflow: auto;
+			}
+		}
+
+		.modalCloseButton {
+			display: none;
+		}
+	}
+
 	#chatAttachmentUploadDialog {
 		.attachmentPreview {
 			text-align: center;

files_wcf/js/Bastelstu.be/Chat/Helper.js

@@ -1,10 +1,10 @@
 /*
- * Copyright (c) 2010-2021 Tim Düsterhus.
+ * Copyright (c) 2010-2022 Tim Düsterhus.
  *
  * Use of this software is governed by the Business Source License
  * included in the LICENSE file.
  *
- * Change Date: 2026-03-10
+ * Change Date: 2026-08-10
  *
  * On the date above, in accordance with the Business Source
  * License, use of this software will be governed by version 2
@@ -377,6 +377,20 @@ define(['WoltLabSuite/Core/Date/Util', 'WoltLabSuite/Core/Language'], function (
 
 			return out
 		}
+
+		static getElementSiblings(element) {
+			if (!element || !element.parentNode) {
+				return
+			}
+
+			const children = [ ...element.parentNode.children ]
+			const index = children.indexOf(element);
+
+			return [
+				...children.slice(0, index),
+				...children.slice(index + 1)
+			]
+		}
 	}
 
 	return Helper

files_wcf/js/Bastelstu.be/Chat/Ui/Settings/RoomListButton.js

@@ -0,0 +1,101 @@
+/*
+ * Copyright (c) 2010-2022 Tim Düsterhus.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the LICENSE file.
+ *
+ * Change Date: 2026-08-10
+ *
+ * On the date above, in accordance with the Business Source
+ * License, use of this software will be governed by version 2
+ * or later of the General Public License.
+ */
+
+define([
+	'../../Helper',
+	'./Button',
+	'WoltLabSuite/Core/Dom/Util',
+	'WoltLabSuite/Core/Language',
+	'WoltLabSuite/Core/Ui/Screen'
+], function (
+	Helper,
+	Button,
+	DomUtil,
+	Language,
+	UiScreen
+) {
+	'use strict'
+
+	const DEPENDENCIES = [].concat(Button.DEPENDENCIES || [])
+	class RoomListButton extends Button {
+		constructor(element, ...superDeps) {
+			super(element, ...superDeps)
+
+			this.roomList = document.querySelector(`[data-box-identifier='be.bastelstu.chat.roomListSidebar']`)
+			if (!this.roomList) {
+				element.remove()
+				return
+			}
+
+			this.open = false
+			this.sidebar = document.querySelector('.sidebar')
+
+			UiScreen.on('screen-xs', {
+				match: () => this.enableMobile(),
+				unmatch: () => this.disableMobile(),
+				setup: () => this.enableMobile(),
+			})
+		}
+
+		enableMobile() {
+			this.element.parentElement.hidden = false
+		}
+
+		disableMobile() {
+			if (this.open) {
+				this.show(false)
+			}
+
+			this.element.parentElement.hidden = true
+		}
+
+		show(doShow = true) {
+			if (doShow) {
+				this.open = true
+				this.sidebar.style.setProperty('display', 'contents', '');
+
+				for (let sibling of Helper.getElementSiblings(this.roomList)) {
+					DomUtil.hide(sibling)
+				}
+
+				this.closeButton = document.createElement('span')
+				this.closeButton.classList.add('modalCloseButton')
+				this.closeButton.innerText = Language.get('wcf.global.button.close')
+				this.closeButton.addEventListener('click', () => this.show(false))
+				this.roomList.appendChild(this.closeButton)
+
+				this.roomList.dataset.show = 'true'
+			}
+			else {
+				delete this.roomList.dataset.show
+				this.closeButton.remove()
+
+				for (let sibling of Helper.getElementSiblings(this.roomList)) {
+					DomUtil.show(sibling)
+				}
+
+				this.sidebar.style.removeProperty('display')
+				this.open = false
+			}
+		}
+
+		async onClick(event) {
+			super.onClick(event)
+
+			this.show(!this.open)
+		}
+	}
+	RoomListButton.DEPENDENCIES = DEPENDENCIES
+
+	return RoomListButton
+})

files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js

@@ -1,10 +1,10 @@
 /*
- * Copyright (c) 2010-2021 Tim Düsterhus.
+ * Copyright (c) 2010-2022 Tim Düsterhus.
  *
  * Use of this software is governed by the Business Source License
  * included in the LICENSE file.
  *
- * Change Date: 2026-03-10
+ * Change Date: 2026-08-10
  *
  * On the date above, in accordance with the Business Source
  * License, use of this software will be governed by version 2
@@ -97,7 +97,7 @@ define(['./ToggleButton', 'WoltLabSuite/Core/Ui/Screen'], function (
 		enableMobile() {
 			this.mobile = true
 
-			elHide(this.element)
+			elHide(this.element.parentElement)
 			elShow(this.shadowToggleButton)
 
 			// Do not show the overlay when the viewport changes
@@ -114,7 +114,7 @@ define(['./ToggleButton', 'WoltLabSuite/Core/Ui/Screen'], function (
 		disableMobile() {
 			this.mobile = false
 
-			elShow(this.element)
+			elShow(this.element.parentElement)
 			elHide(this.shadowToggleButton)
 
 			UiScreen.scrollEnable()

files_wcf/js/Bastelstu.be/Chat/Ui/Settings/UserListButton.js

@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2010-2022 Tim Düsterhus.
+ *
+ * Use of this software is governed by the Business Source License
+ * included in the LICENSE file.
+ *
+ * Change Date: 2026-08-10
+ *
+ * On the date above, in accordance with the Business Source
+ * License, use of this software will be governed by version 2
+ * or later of the General Public License.
+ */
+
+define([
+	'../../Helper',
+	'./Button',
+	'WoltLabSuite/Core/Dom/Util',
+	'WoltLabSuite/Core/Language',
+	'WoltLabSuite/Core/Ui/Screen'
+], function (
+	Helper,
+	Button,
+	DomUtil,
+	Language,
+	UiScreen
+) {
+	'use strict'
+
+	const DEPENDENCIES = [].concat(Button.DEPENDENCIES || [])
+	class UserListButton extends Button {
+		constructor(element, ...superDeps) {
+			super(element, ...superDeps)
+
+			this.open = false
+			this.userList = document.getElementById('chatUserList')
+			this.sidebar = document.querySelector('.sidebar')
+
+			UiScreen.on('screen-xs', {
+				match: () => this.enableMobile(),
+				unmatch: () => this.disableMobile(),
+				setup: () => this.enableMobile(),
+			})
+		}
+
+		enableMobile() {
+			this.element.parentElement.hidden = false
+		}
+
+		disableMobile() {
+			if (this.open) {
+				this.show(false)
+			}
+
+			this.element.parentElement.hidden = true
+		}
+
+		show(doShow = true) {
+			if (doShow) {
+				this.open = true
+				this.sidebar.style.setProperty('display', 'contents', '');
+
+				for (let sibling of Helper.getElementSiblings(this.userList)) {
+					DomUtil.hide(sibling)
+				}
+
+				this.closeButton = document.createElement('span')
+				this.closeButton.classList.add('modalCloseButton')
+				this.closeButton.innerText = Language.get('wcf.global.button.close')
+				this.closeButton.addEventListener('click', () => this.show(false))
+				this.userList.appendChild(this.closeButton)
+
+				this.userList.dataset.show = 'true'
+			}
+			else {
+				delete this.userList.dataset.show
+				this.closeButton.remove()
+
+				for (let sibling of Helper.getElementSiblings(this.userList)) {
+					DomUtil.show(sibling)
+				}
+
+				this.sidebar.style.removeProperty('display')
+				this.open = false
+			}
+		}
+
+		async onClick(event) {
+			super.onClick(event)
+
+			this.show(!this.open)
+		}
+	}
+	UserListButton.DEPENDENCIES = DEPENDENCIES
+
+	return UserListButton
+})

language/de.xml

@@ -124,6 +124,8 @@
 		<item name="chat.room.button.fullscreen"><![CDATA[Vollbild umschalten]]></item>
 		<item name="chat.room.button.leave"><![CDATA[Chat verlassen]]></item>
 		<item name="chat.room.button.notifications"><![CDATA[Benachrichtigungen umschalten]]></item>
+		<item name="chat.room.button.userList"><![CDATA[Nutzerliste anzeigen]]></item>
+		<item name="chat.room.button.roomList"><![CDATA[Raumliste anzeigen]]></item>
 		<item name="chat.room.userList"><![CDATA[Benutzer]]></item>
 		<item name="chat.room.userList.away"><![CDATA[Abwesend{if $user.away}: {$user.away}{/if}]]></item>
 		<item name="chat.room.userList.moderator"><![CDATA[Moderator]]></item>

language/en.xml

@@ -124,6 +124,8 @@
 		<item name="chat.room.button.fullscreen"><![CDATA[Toggle Fullscreen]]></item>
 		<item name="chat.room.button.leave"><![CDATA[Leave Chat]]></item>
 		<item name="chat.room.button.notifications"><![CDATA[Toggle Notifications]]></item>
+		<item name="chat.room.button.userList"><![CDATA[Show User List]]></item>
+		<item name="chat.room.button.roomList"><![CDATA[Show Room List]]></item>
 		<item name="chat.room.userList"><![CDATA[Users]]></item>
 		<item name="chat.room.userList.away"><![CDATA[Away{if $user.away}: {$user.away}{/if}]]></item>
 		<item name="chat.room.userList.moderator"><![CDATA[Moderator]]></item>

templates/quickSettings.tpl

@@ -4,6 +4,8 @@
 		<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/FullscreenButton"><span class="icon icon16 fa-arrows-alt"></span> <span>{lang}chat.room.button.fullscreen{/lang}</span></a></li>
 		<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/NotificationsButton"><span class="icon icon16 fa-bell-o"></span> <span>{lang}chat.room.button.notifications{/lang}</span></a></li>
 		<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/AutoscrollButton"><span class="icon icon16 fa-arrow-down"></span> <span>{lang}chat.room.button.autoscroll{/lang}</span></a></li>
+		<li hidden><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/UserListButton"><span class="icon icon16 fa-users"></span> <span>{lang}chat.room.button.userList{/lang}</span></a></li>
+		<li hidden><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/RoomListButton"><span class="icon icon16 fa-comments"></span> <span>{lang}chat.room.button.roomList{/lang}</span></a></li>
 		{event name='buttons'}
 	</ul>
 </nav>

templates/smileyPicker.tpl

@@ -1,6 +1,6 @@
 {if MODULE_SMILEY && !$smileyCategories|empty}
 	<div id="smileyPickerContainer" style="display: none;">
 		{include file='messageFormSmilies'}
-		<span id="smileyPickerCloseButton">{lang}wcf.global.button.close{/lang}</span>
+		<span id="smileyPickerCloseButton" class="modalCloseButton">{lang}wcf.global.button.close{/lang}</span>
 	</div>
 {/if}