From b6d60586bb39eeb447ace0bf6221271fc6d1d8e9 Mon Sep 17 00:00:00 2001
From: Maximilian Mader <max@bastelstu.be>
Date: Sat, 4 Nov 2023 16:36:58 +0100
Subject: [PATCH 1/3] Allow and Require com.woltlab.wcf 6.0

---
 package.xml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.xml b/package.xml
index 98ef8ff..7946441 100644
--- a/package.xml
+++ b/package.xml
@@ -15,7 +15,7 @@
 	</authorinformation>
 
 	<requiredpackages>
-		<requiredpackage minversion="5.5.20">com.woltlab.wcf</requiredpackage>
+		<requiredpackage minversion="6.0.7">com.woltlab.wcf</requiredpackage>
 		<requiredpackage minversion="1.1.0">be.bastelstu.promiseWrap</requiredpackage>
 		<requiredpackage minversion="0.6.1">be.bastelstu.parserCombinator</requiredpackage>
 		<requiredpackage minversion="1.6.1">be.bastelstu.bottle</requiredpackage>
@@ -23,7 +23,7 @@
 	</requiredpackages>
 
 	<excludedpackages>
-		<excludedpackage version="6.0.0 Alpha 1">com.woltlab.wcf</excludedpackage>
+		<excludedpackage version="6.1.0 Alpha 1">com.woltlab.wcf</excludedpackage>
 		<excludedpackage version="1.700.0 Alpha 1">be.bastelstu.parserCombinator</excludedpackage>
 	</excludedpackages>
 

From 075ce3fa156595363291927b194e403d7113839d Mon Sep 17 00:00:00 2001
From: Maximilian Mader <max@bastelstu.be>
Date: Sat, 4 Nov 2023 17:18:57 +0100
Subject: [PATCH 2/3] Migrate to Font Awesome 6

---
 acpMenu.xml                                   |  4 +--
 acptemplates/commandTriggerAdd.tpl            |  2 +-
 acptemplates/commandTriggerList.tpl           |  8 ++---
 acptemplates/roomAdd.tpl                      |  2 +-
 acptemplates/roomList.tpl                     | 10 +++----
 acptemplates/suspensionList.tpl               |  2 +-
 files/style/be.bastelstu.chat.scss            |  6 ++--
 .../js/Bastelstu.be/Chat/MessageType/Info.js  |  4 +--
 .../js/Bastelstu.be/Chat/MessageType/Where.js |  4 +--
 .../Chat/Ui/Settings/SmiliesButton.js         |  2 +-
 templates/messageTypes.tpl                    | 30 +++++++++----------
 templates/quickSettings.tpl                   | 12 ++++----
 templates/room.tpl                            | 12 ++++----
 templates/userList.tpl                        |  4 +--
 templates/userListModerator.tpl               |  2 +-
 15 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/acpMenu.xml b/acpMenu.xml
index b3b6e54..e1ca7d9 100644
--- a/acpMenu.xml
+++ b/acpMenu.xml
@@ -16,7 +16,7 @@
 			<controller>chat\acp\form\RoomAddForm</controller>
 			<parent>chat.acp.menu.link.room.list</parent>
 			<permissions>admin.chat.canManageRoom</permissions>
-			<icon>fa-plus</icon>
+			<icon>plus</icon>
 		</acpmenuitem>
 
 		<acpmenuitem name="chat.acp.menu.link.command.trigger.list">
@@ -29,7 +29,7 @@
 			<controller>chat\acp\form\CommandTriggerAddForm</controller>
 			<parent>chat.acp.menu.link.command.trigger.list</parent>
 			<permissions>admin.chat.canManageTriggers</permissions>
-			<icon>fa-plus</icon>
+			<icon>plus</icon>
 		</acpmenuitem>
 
 		<acpmenuitem name="chat.acp.menu.link.suspension.list">
diff --git a/acptemplates/commandTriggerAdd.tpl b/acptemplates/commandTriggerAdd.tpl
index 5e41cb5..d4f9759 100644
--- a/acptemplates/commandTriggerAdd.tpl
+++ b/acptemplates/commandTriggerAdd.tpl
@@ -7,7 +7,7 @@
 
 	<nav class="contentHeaderNavigation">
 		<ul>
-			<li><a href="{link application='chat' controller='CommandTriggerList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}chat.acp.command.trigger.list{/lang}</span></a></li>
+			<li><a href="{link application='chat' controller='CommandTriggerList'}{/link}" class="button">{icon name='list'} <span>{lang}chat.acp.command.trigger.list{/lang}</span></a></li>
 
 			{event name='contentHeaderNavigation'}
 		</ul>
diff --git a/acptemplates/commandTriggerList.tpl b/acptemplates/commandTriggerList.tpl
index a36fe23..b20177c 100644
--- a/acptemplates/commandTriggerList.tpl
+++ b/acptemplates/commandTriggerList.tpl
@@ -14,7 +14,7 @@
 
 	<nav class="contentHeaderNavigation">
 		<ul>
-			<li><a href="{link controller='CommandTriggerAdd' application='chat'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}chat.acp.command.trigger.add{/lang}</span></a></li>
+			<li><a href="{link controller='CommandTriggerAdd' application='chat'}{/link}" class="button">{icon name='plus'} <span>{lang}chat.acp.command.trigger.add{/lang}</span></a></li>
 
 			{event name='contentHeaderNavigation'}
 		</ul>
@@ -45,8 +45,8 @@
 				{foreach from=$objects item=trigger}
 					<tr class="jsTriggerRow">
 						<td class="columnIcon">
-							<a href="{link controller='CommandTriggerEdit' object=$trigger application='chat'}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
-							<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{$trigger->triggerID}" data-confirm-message-html="{lang __encode=true}chat.acp.command.trigger.delete.sure{/lang}"></span>
+							<a href="{link controller='CommandTriggerEdit' object=$trigger application='chat'}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip">{icon name='pencil'}</a>
+							<span class="jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{$trigger->triggerID}" data-confirm-message-html="{lang __encode=true}chat.acp.command.trigger.delete.sure{/lang}">{icon name='xmark'}</span>
 
 							{event name='rowButtons'}
 						</td>
@@ -75,7 +75,7 @@
 
 	<nav class="contentFooterNavigation">
 		<ul>
-			<li><a href="{link controller='CommandTriggerAdd' application='chat'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}chat.acp.command.trigger.add{/lang}</span></a></li>
+			<li><a href="{link controller='CommandTriggerAdd' application='chat'}{/link}" class="button">{icon name='plus'} <span>{lang}chat.acp.command.trigger.add{/lang}</span></a></li>
 
 			{event name='contentFooterNavigation'}
 		</ul>
diff --git a/acptemplates/roomAdd.tpl b/acptemplates/roomAdd.tpl
index 4e0b9c9..0fb78f5 100644
--- a/acptemplates/roomAdd.tpl
+++ b/acptemplates/roomAdd.tpl
@@ -19,7 +19,7 @@
 
 	<nav class="contentHeaderNavigation">
 		<ul>
-			<li><a href="{link application='chat' controller='RoomList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}chat.acp.room.list{/lang}</span></a></li>
+			<li><a href="{link application='chat' controller='RoomList'}{/link}" class="button">{icon name='list'} <span>{lang}chat.acp.room.list{/lang}</span></a></li>
 
 			{event name='contentHeaderNavigation'}
 		</ul>
diff --git a/acptemplates/roomList.tpl b/acptemplates/roomList.tpl
index 518ce2d..351d7e1 100644
--- a/acptemplates/roomList.tpl
+++ b/acptemplates/roomList.tpl
@@ -19,7 +19,7 @@
 
 	<nav class="contentHeaderNavigation">
 		<ul>
-			<li><a href="{link controller='RoomAdd' application='chat'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}chat.acp.room.add{/lang}</span></a></li>
+			<li><a href="{link controller='RoomAdd' application='chat'}{/link}" class="button">{icon name='plus'} <span>{lang}chat.acp.room.add{/lang}</span></a></li>
 
 			{event name='contentHeaderNavigation'}
 		</ul>
@@ -42,9 +42,9 @@
 							<a href="{link controller='RoomEdit' application='chat' object=$room}{/link}">{$room}</a>
 
 							<span class="statusDisplay sortableButtonContainer">
-								<span class="icon icon16 fa-arrows sortableNodeHandle"></span>
-								<a href="{link controller='RoomEdit' application='chat' object=$room}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip"><span class="icon icon16 fa-pencil"></span></a>
-								<span class="icon icon16 fa-times jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{$room->roomID}" data-confirm-message-html="{lang __encode=true}chat.acp.room.delete.sure{/lang}"></span>
+								<span class="sortableNodeHandle">{icon name='up-down-left-right'}</span>
+								<a href="{link controller='RoomEdit' application='chat' object=$room}{/link}" title="{lang}wcf.global.button.edit{/lang}" class="jsTooltip">{icon name='pencil'}</a>
+								<span class="jsDeleteButton jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}" data-object-id="{$room->roomID}" data-confirm-message-html="{lang __encode=true}chat.acp.room.delete.sure{/lang}">{icon name='xmark'}</span>
 								{event name='itemButtons'}
 							</span>
 						</span>
@@ -70,7 +70,7 @@
 
 	<nav class="contentFooterNavigation">
 		<ul>
-			<li><a href="{link controller='RoomAdd' application='chat'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}chat.acp.room.add{/lang}</span></a></li>
+			<li><a href="{link controller='RoomAdd' application='chat'}{/link}" class="button">{icon name='plus'} <span>{lang}chat.acp.room.add{/lang}</span></a></li>
 
 			{event name='contentFooterNavigation'}
 		</ul>
diff --git a/acptemplates/suspensionList.tpl b/acptemplates/suspensionList.tpl
index 9fce1a4..5d821e6 100644
--- a/acptemplates/suspensionList.tpl
+++ b/acptemplates/suspensionList.tpl
@@ -141,7 +141,7 @@ require([ 'Bastelstu.be/PromiseWrap/Ajax', 'Bastelstu.be/PromiseWrap/Ui/Confirma
 				{foreach from=$objects item=suspension}
 					<tr class="jsSuspensionRow" data-object-id="{$suspension->suspensionID}">
 						<td class="columnIcon">
-							<span class="icon icon16 fa-undo{if !$suspension->isActive()} disabled{else} pointer{/if} jsRevokeButton" title="{lang}chat.acp.suspension.revoke{/lang}" data-confirm-message-html="{lang}chat.acp.suspension.revoke.sure{/lang}"></span>
+							<span class="jsRevokeButton{if !$suspension->isActive()} disabled{else} pointer{/if}" title="{lang}chat.acp.suspension.revoke{/lang}" data-confirm-message-html="{lang}chat.acp.suspension.revoke.sure{/lang}">{icon name='arrow-rotate-left'}</span>
 							{event name='rowButtons'}
 						</td>
 
diff --git a/files/style/be.bastelstu.chat.scss b/files/style/be.bastelstu.chat.scss
index e13d94b..c234d50 100644
--- a/files/style/be.bastelstu.chat.scss
+++ b/files/style/be.bastelstu.chat.scss
@@ -434,16 +434,16 @@ $chatEmbedMaxWidth: 400px;
 					}
 				}
 
-				.icon16 {
+				fa-icon[size="16"] {
 					display: none;
 				}
 
 				@include screen-lg {
-					.icon16 {
+					fa-icon[size="16"] {
 						display: inline-block;
 					}
 
-					.icon24 {
+					fa-icon[size="24"] {
 						display: none;
 					}
 				}
diff --git a/files_wcf/js/Bastelstu.be/Chat/MessageType/Info.js b/files_wcf/js/Bastelstu.be/Chat/MessageType/Info.js
index 0432124..5eecd42 100644
--- a/files_wcf/js/Bastelstu.be/Chat/MessageType/Info.js
+++ b/files_wcf/js/Bastelstu.be/Chat/MessageType/Info.js
@@ -87,8 +87,8 @@ define([
 				button.closest('.chatMessageBoundary').hidden = true
 			})
 
-			const icon = document.createElement('span')
-			icon.classList.add('icon', 'icon16', 'fa-times')
+			const icon = document.createElement('fa-icon')
+			icon.setIcon('xmark')
 
 			button.append(icon)
 
diff --git a/files_wcf/js/Bastelstu.be/Chat/MessageType/Where.js b/files_wcf/js/Bastelstu.be/Chat/MessageType/Where.js
index cc995a7..5fb531b 100644
--- a/files_wcf/js/Bastelstu.be/Chat/MessageType/Where.js
+++ b/files_wcf/js/Bastelstu.be/Chat/MessageType/Where.js
@@ -29,8 +29,8 @@ define(['WoltLabSuite/Core/Language', '../MessageType'], function (
 				button.closest('.chatMessageBoundary').hidden = true
 			})
 
-			const icon = document.createElement('span')
-			icon.classList.add('icon', 'icon16', 'fa-times')
+			const icon = document.createElement('fa-icon')
+			icon.setIcon('xmark')
 
 			button.append(icon)
 
diff --git a/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js b/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js
index 72d50fe..a0b827c 100644
--- a/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js
+++ b/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js
@@ -74,7 +74,7 @@ define(['./ToggleButton', 'WoltLabSuite/Core/Ui/Screen'], function (
 				'small'
 			)
 			this.shadowToggleButton.innerHTML =
-				'<span class="icon icon24 fa-smile-o"></span>'
+				'<fa-icon size="24" name="face-smile"></fa-icon>'
 			this.shadowToggleButton.addEventListener(
 				'mousedown',
 				this.onClick.bind(this)
diff --git a/templates/messageTypes.tpl b/templates/messageTypes.tpl
index b8bc6dc..5e9102e 100644
--- a/templates/messageTypes.tpl
+++ b/templates/messageTypes.tpl
@@ -23,7 +23,7 @@
 <script type="x-text/template" data-application="be.bastelstu.chat" data-template-name="DeleteButton">
 	{/literal}
 	<li>
-		<a class="button jsTooltip jsDeleteButton" href="#" data-tooltip="{lang}wcf.global.button.delete{/lang}" data-confirm-message-html="{lang __encode=true __literal=true}chat.stream.button.delete.sure{/lang}"><span class="icon icon16 fa-times"></span> <span class="invisible">{lang}wcf.global.button.delete{/lang}</span></a>
+		<a class="button jsTooltip jsDeleteButton" href="#" data-tooltip="{lang}wcf.global.button.delete{/lang}" data-confirm-message-html="{lang __encode=true __literal=true}chat.stream.button.delete.sure{/lang}">{icon name='xmark'} <span class="invisible">{lang}wcf.global.button.delete{/lang}</span></a>
 	</li>
 	{literal}
 </script>
@@ -32,7 +32,7 @@
 	<div class="chatMessageContainer inline">
 		<div class="chatMessageSide">
 			<div class="chatUserAvatar">
-				<span class="icon icon32 fa-info-circle"></span>
+				{icon size=32 name='circle-info'}
 			</div>
 			<time><a href="{$message.link}">{$message.formattedTime}</a></time>
 		</div>
@@ -72,7 +72,7 @@
 	<div class="chatMessageContainer inline">
 		<div class="chatMessageSide">
 			<div class="chatUserAvatar">
-				<span class="icon icon32 fa-info-circle"></span>
+				{icon size=32 name='circle-info'}
 			</div>
 			<time><a href="{$message.link}">{$message.formattedTime}</a></time>
 		</div>
@@ -165,11 +165,11 @@
 			</div>
 			<span class="chatMessageIcon">
 				{if $__window.RegExp('^shower(?:ing)?$', 'i').test($message.payload.message)}
-					<span class="icon icon16 fa-shower"></span>
+					{icon name='shower'}
 				{else if $__window.RegExp('^bath(?:ing)?$', 'i').test($message.payload.message)}
-					<span class="icon icon16 fa-bath"></span>
+					{icon name='bath'}
 				{else}
-					<span class="icon icon16 fa-user-o"></span>
+					{icon name='user'}
 				{/if}
 			</span>
 			<div class="chatMessage">{lang}chat.messageType.{$message.objectType}{/lang}</div>
@@ -197,7 +197,7 @@
 				</small>
 			</div>
 			<span class="chatMessageIcon">
-				<span class="icon icon16 fa-user"></span>
+				{icon name='user' type='solid'}
 			</span>
 			<div class="chatMessage">{lang}chat.messageType.{$message.objectType}{/lang}</div>
 		</div>
@@ -257,9 +257,9 @@
 			</div>
 			<span class="chatMessageIcon">
 				{if $message.objectType === 'be.bastelstu.chat.messageType.join'}
-					<span class="icon icon16 fa-sign-in"></span>
+					{icon name='right-to-bracket'}
 				{else}
-					<span class="icon icon16 fa-sign-out"></span>
+					{icon name='right-from-bracket'}
 				{/if}
 			</span>
 			<div class="chatMessage">{lang}chat.messageType.{$message.objectType}{/lang}</div>
@@ -289,7 +289,7 @@
 				</small>
 			</div>
 			<span class="chatMessageIcon">
-				<span class="icon icon16 fa-user-times"></span>
+				{icon name='user-xmark'}
 			</span>
 			<div class="chatMessage">{lang}chat.suspension.message.new.{$message.payload.suspension.objectType}{/lang}</div>
 		</div>
@@ -316,7 +316,7 @@
 				</small>
 			</div>
 			<span class="chatMessageIcon">
-				<span class="icon icon16 fa-user-times"></span>
+				{icon name='user-xmark'}
 			</span>
 			<div class="chatMessage">{lang}chat.suspension.message.revoke.{$message.payload.objectType}{/lang}</div>
 		</div>
@@ -338,7 +338,7 @@
 						{@$author.coloredUsername}
 					</a>
 				</span>
-				<span class="icon icon16 fa-chevron-right" data-insert-whisper="{if $message.isOwnMessage()}{$message.payload.recipientName}{else}{$author.username}{/if}"></span>
+				<span data-insert-whisper="{if $message.isOwnMessage()}{$message.payload.recipientName}{else}{$author.username}{/if}">{icon name='chevron-right'}</span>
 				<span class="recipientUsername">{$message.payload.recipientName}</span>
 				<small class="separatorLeft">
 					<time><a href="{$message.link}">{$message.formattedTime}</a></time>
@@ -359,7 +359,7 @@
 		</div>
 		<div class="chatMessageContent">
 			<div class="chatMessageHeader">
-				<span class="username"><span class="icon icon16 fa-bullhorn jsTooltip" title="{lang}chat.messageType.be.bastelstu.chat.messageType.broadcast.tooltip{/lang}"></span>
+				<span class="username"><span class="jsTooltip" title="{lang}chat.messageType.be.bastelstu.chat.messageType.broadcast.tooltip{/lang}">{icon name='bullhorn'}</span>
 					<a href="{$author.link}" class="jsUserActionDropdown" data-user-id="{$author.userID}">
 						{@$author.coloredUsername}
 					</a>
@@ -391,7 +391,7 @@
 		<div class="chatMessageContent">
 			<div class="chatMessageHeader">
 				<span class="username">
-					<span class="icon icon16 fa-star-o jsTooltip" title="{lang}chat.messageType.be.bastelstu.chat.messageType.team.tooltip{/lang}"></span>
+					<span class="jsTooltip" title="{lang}chat.messageType.be.bastelstu.chat.messageType.team.tooltip{/lang}">{icon name='star'}</span>
 					<a href="{$author.link}" class="jsUserActionDropdown" data-user-id="{$author.userID}">
 						{@$author.coloredUsername}
 					</a>
@@ -510,7 +510,7 @@
 				</small>
 			</div>
 			<span class="chatMessageIcon">
-				<span class="icon icon16 fa-trash"></span>
+				{icon name='trash-can' type='solid'}
 			</span>
 			<div class="chatMessage">
 				{lang}chat.messageType.be.bastelstu.chat.messageType.tombstone.message{/lang}
diff --git a/templates/quickSettings.tpl b/templates/quickSettings.tpl
index 033fcc7..4d02b1b 100644
--- a/templates/quickSettings.tpl
+++ b/templates/quickSettings.tpl
@@ -1,11 +1,11 @@
 <nav id="chatQuickSettingsNavigation">
 	<ul class="buttonGroup jsOnly">
-		{if MODULE_SMILEY && !$smileyCategories|empty}<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/SmiliesButton"><span class="icon icon16 fa-smile-o"></span> <span>{lang}wcf.message.smilies{/lang}</span></a></li>{/if}
-		<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>
+		{if MODULE_SMILEY && !$smileyCategories|empty}<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/SmiliesButton">{icon name='face-smile'} <span>{lang}wcf.message.smilies{/lang}</span></a></li>{/if}
+		<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/FullscreenButton">{icon name='maximize'} <span>{lang}chat.room.button.fullscreen{/lang}</span></a></li>
+		<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/NotificationsButton">{icon name='bell'} <span>{lang}chat.room.button.notifications{/lang}</span></a></li>
+		<li><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/AutoscrollButton">{icon name='arrow-down'} <span>{lang}chat.room.button.autoscroll{/lang}</span></a></li>
+		<li hidden><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/UserListButton">{icon name='users'} <span>{lang}chat.room.button.userList{/lang}</span></a></li>
+		<li hidden><a class="button" href="#" data-module="Bastelstu.be/Chat/Ui/Settings/RoomListButton">{icon name='comments' type='solid'} <span>{lang}chat.room.button.roomList{/lang}</span></a></li>
 		{event name='buttons'}
 	</ul>
 </nav>
diff --git a/templates/room.tpl b/templates/room.tpl
index c9ee920..9ca855b 100644
--- a/templates/room.tpl
+++ b/templates/room.tpl
@@ -13,12 +13,12 @@
 {capture assign='contentInteractionButtons'}
 	{if $room->canSeeLog()}
 		<a href="{link controller='Log' application='chat' object=$room}{/link}" title="{lang}chat.log.title{/lang}" class="contentInteractionButton button small">
-			<span class="icon icon16 fa-tasks"></span> <span>{lang}chat.log.title{/lang}</span>
+			{icon name='bars-progress'} <span>{lang}chat.log.title{/lang}</span>
 		</a>
 	{/if}
 
 	<a href="{link}{/link}" title="{lang}chat.room.button.leave{/lang}" class="contentInteractionButton button small chatLeaveButton">
-		<span class="icon icon16 fa-power-off"></span> <span>{lang}chat.room.button.leave{/lang}</span>
+		{icon name='power-off'} <span>{lang}chat.room.button.leave{/lang}</span>
 	</a>
 {/capture}
 
@@ -28,7 +28,7 @@
 
 {if $room->getTopic()}
 	<div class="chatRoomTopic">
-		<span class="icon icon16 fa-times pointer jsDismissRoomTopicButton"></span>
+		<span class="pointer jsDismissRoomTopicButton">{icon name='xmark'}</span>
 		{@$room->getTopic()}
 	</div>
 {/if}
@@ -54,15 +54,15 @@
 		{if $__wcf->getSession()->getPermission('user.chat.canAttach')}
 			<div class="chatAttachButton">
 				<button id="chatAttachmentUploadButton" class="button small" title="{lang}wcf.attachment.attachments{/lang}">
-					<span class="icon icon16 fa-paperclip"></span>
-					<span class="icon icon24 fa-paperclip"></span>
+					{icon name='paperclip'}
+					{icon size=24 name='paperclip'}
 				</button>
 			</div>
 		{/if}
 		<div class="chatInputWrapper">
 			<textarea maxlength="{CHAT_MAX_LENGTH}" class="long" rows="1"></textarea>
 			<span id="chatQuickSettings">
-				<span class="icon icon24 fa-ellipsis-v"></span>
+				{icon size=24 name='ellipsis-vertical'}
 			</span>
 		</div>
 	</div>
diff --git a/templates/userList.tpl b/templates/userList.tpl
index b1798e4..c33b175 100644
--- a/templates/userList.tpl
+++ b/templates/userList.tpl
@@ -11,10 +11,10 @@
 
 				<div class="iconColumn">
 				{if $user.away !== null}
-					<span class="icon icon24 fa-clock-o jsTooltip awayIcon" title="{lang}chat.room.userList.away{/lang}"></span>
+					<span class="jsTooltip awayIcon" title="{lang}chat.room.userList.away{/lang}">{icon size=24 name='clock'}</span>
 				{/if}
 				{if !$user.permissions.canWritePublicly}
-					<span class="icon icon24 fa-remove jsTooltip" title="{lang}chat.room.userList.mute{/lang}"></span>
+					<span class="jsTooltip" title="{lang}chat.room.userList.mute{/lang}">{icon size=24 name='xmark'}</span>
 				{/if}
 				{/literal}
 				{event name='icons'}
diff --git a/templates/userListModerator.tpl b/templates/userListModerator.tpl
index 953009d..6632ed0 100644
--- a/templates/userListModerator.tpl
+++ b/templates/userListModerator.tpl
@@ -1,3 +1,3 @@
 {ldelim}if $user.permissions.canMute || $user.permissions.canBan}
-	<span class="icon icon24 fa-legal jsTooltip" title="{lang}chat.room.userList.moderator{/lang}"></span>
+	<span class="jsTooltip" title="{lang}chat.room.userList.moderator{/lang}">{icon size=24 name='gavel'}</span>
 {ldelim}/if}

From 837874d9250f8cabe52952a5b56cd64153b4bd87 Mon Sep 17 00:00:00 2001
From: Maximilian Mader <max@bastelstu.be>
Date: Sat, 4 Nov 2023 18:07:34 +0100
Subject: [PATCH 3/3] Switch from SASS to CSS variables

---
 files/style/be.bastelstu.chat.scss | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/files/style/be.bastelstu.chat.scss b/files/style/be.bastelstu.chat.scss
index c234d50..a2d3984 100644
--- a/files/style/be.bastelstu.chat.scss
+++ b/files/style/be.bastelstu.chat.scss
@@ -172,7 +172,7 @@ $chatEmbedMaxWidth: 400px;
 	}
 
 	.chatRoomTopic {
-		border-left: 5px solid $wcfContentBorderInner;
+		border-left: 5px solid var(--wcfContentBorderInner);
 		padding: 5px 0px 5px 10px;
 		margin-bottom: 10px;
 
@@ -352,7 +352,7 @@ $chatEmbedMaxWidth: 400px;
 					}
 
 					&.first {
-						border-top: 1px solid $wcfContentBorderInner;
+						border-top: 1px solid var(--wcfContentBorderInner);
 
 						.chatMessageContainer {
 							.chatMessageSide {
@@ -406,14 +406,14 @@ $chatEmbedMaxWidth: 400px;
 
 	#chatInputContainer {
 		margin-top: 10px;
-		margin-bottom: 1.48 * $wcfFontSizeDefault; // 1.48 is the default line height
+		margin-bottom: calc(1.48 * var(--wcfFontSizeDefault)); // 1.48 is the default line height
 		clear: both;
 
 
 		.charCounter {
 			float: right;
-			color: $wcfContentDimmedText;
-			margin-bottom: -(1.48 * $wcfFontSizeDefault);
+			color: var(--wcfContentDimmedText);
+			margin-bottom: calc(-1.48 * var(--wcfFontSizeDefault));
 		}
 
 		textarea {
@@ -511,12 +511,12 @@ $chatEmbedMaxWidth: 400px;
 
 						&.active,
 						&.active:hover {
-							color: $wcfButtonTextActive !important;
+							color: var(--wcfButtonTextActive) !important;
 						}
 
 						&:not(.active) {
 							background-color: transparent;
-							color: $wcfDropdownLink;
+							color: var(--wcfDropdownLink);
 						}
 
 						border-radius: 0;
@@ -560,12 +560,12 @@ $chatEmbedMaxWidth: 400px;
 				flex-direction: column;
 				pointer-events: all;
 
-				background-color: $wcfContentBackground;
+				background-color: var(--wcfContentBackground);
 
 				.modalCloseButton {
-					border-top: 1px solid $wcfContentBorderInner;
-					background-color: $wcfSidebarBackground;
-					color: $wcfSidebarLink;
+					border-top: 1px solid var(--wcfContentBorderInner);
+					background-color: var(--wcfSidebarBackground);
+					color: var(--wcfSidebarLink);
 					display: block;
 					padding: 10px 20px;
 					text-align: center;
@@ -588,7 +588,7 @@ $chatEmbedMaxWidth: 400px;
 						> li {
 							margin-right: 10px;
 							margin-bottom: 5px;
-							border-right: 1px solid $wcfContentBorderInner;
+							border-right: 1px solid var(--wcfContentBorderInner);
 							padding-right: 9px;
 
 							> a {
@@ -608,8 +608,8 @@ $chatEmbedMaxWidth: 400px;
 
 	#smileyPickerContainer {
 		> .messageTabMenuContent {
-			background-color: $wcfContentContainerBackground;
-			border: 1px solid $wcfContentBorderInner;
+			background-color: var(--wcfContentContainerBackground);
+			border: 1px solid var(--wcfContentBorderInner);
 			padding: 20px;
 			margin-top: 20px;
 			margin-bottom: 20px;