nodebb-theme-persona 12.1.5 → 12.1.6

package/templates/partials/thread_tools.tpl

@@ -1,8 +1,8 @@
-<!-- IF privileges.view_thread_tools -->
+{{{ if privileges.view_thread_tools }}}
 <div title="[[topic:thread_tools.title]]" class="btn-group thread-tools bottom-sheet">
-	<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+	<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<i class="fa fa-fw fa-gear"></i>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-right"></ul>
+	<ul class="dropdown-menu dropdown-menu-end"></ul>
 </div>
-<!-- ENDIF privileges.view_thread_tools -->
+{{{ end }}}

package/templates/partials/toast.tpl

@@ -0,0 +1,14 @@
+<div id="{alert_id}" role="alert" class="alert alert-dismissable alert-{type}" component="toaster/toast">
+	<button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-label="close"></button>
+	<!-- IF image -->
+	<img src="{image}">
+	<!-- ENDIF image -->
+
+	<!-- IF title -->
+	<strong>{title}</strong>
+	<!-- ENDIF title -->
+
+	<!-- IF message -->
+	<p>{message}</p>
+	<!-- ENDIF message -->
+</div>

package/templates/partials/topic/deleted-message.tpl

@@ -1,6 +1,6 @@
 <div component="topic/deleted/message" class="alert alert-warning<!-- IF !deleted --> hidden<!-- ENDIF !deleted --> clearfix">
-    <span class="pull-left">[[topic:deleted_message]]</span>
-    <span class="pull-right">
+    <span class="float-start">[[topic:deleted_message]]</span>
+    <span class="float-end">
         <!-- IF deleter -->
         <a href="{config.relative_path}/user/{deleter.userslug}">
             <strong>{deleter.username}</strong>

package/templates/partials/topic/event.tpl

@@ -0,0 +1,26 @@
+<li component="topic/event" class="timeline-event text-muted" data-topic-event-id="{./id}" data-topic-event-type="{./type}">
+	<div class="timeline-badge">
+		<i class="fa {{{ if ./icon }}}{./icon}{{{ else }}}fa-circle{{{ end }}}"></i>
+	</div>
+	<span class="timeline-text">
+		{{{ if ./href}}}
+		<a href="{config.relative_path}{./href}">{./text}</a>
+		{{{ else }}}
+		{./text}
+		{{{ end }}}
+		&nbsp;
+	</span>
+	{{{ if ./user }}}
+		{{{ if ./user.system }}}
+		<span class="timeline-text">[[global:system-user]]</span>&nbsp;
+		{{{ else }}}
+		<span><a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true)} &nbsp; {./user.username}</a></span>&nbsp;
+		{{{ end }}}
+	{{{ end }}}
+	<span class="timeago timeline-text" title="{./timestampISO}"></span>
+
+	{{{ if privileges.isAdminOrMod }}}
+		&nbsp;<span component="topic/event/delete" data-topic-event-id="{./id}" data-topic-event-type="{./type}" class="timeline-text pointer" title="[[topic:delete-event]]"><i class="fa fa-trash"></i></span>
+	{{{ end }}}
+</li>
+

package/templates/partials/topic/navigation-post.tpl

@@ -1,10 +1,10 @@
 <div class="clearfix">
-	<div class="icon pull-left">
+	<div class="icon float-start">
 		<a href="<!-- IF post.user.userslug -->{config.relative_path}/user/{post.user.userslug}<!-- ELSE -->#<!-- ENDIF post.user.userslug -->">
-			{buildAvatar(post.user, "sm", true, "", "user/picture")} {post.user.username}
+			{buildAvatar(post.user, "24px", true, "", "user/picture")} {post.user.username}
 		</a>
 	</div>
-	<small class="pull-right">
+	<small class="float-end">
 		<span class="timeago" title="{post.timestampISO}"></span>
 	</small>
 </div>

package/templates/partials/topic/navigator.tpl

@@ -3,16 +3,16 @@
     <div class="wrapper dropup">
         <i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop"></i>
 
-        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+        <a href="#" class="dropdown-toggle d-inline-block" data-bs-toggle="dropdown" data-bs-reference="parent">
             <span class="pagination-text"></span>
         </a>
 
         <i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom"></i>
-        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+        <ul class="dropdown-menu dropdown-menu-end" role="menu">
             <li>
                 <div class="row">
-                    <div class="col-xs-8 post-content"></div>
-                    <div class="col-xs-4 text-right">
+                    <div class="col-8 post-content"></div>
+                    <div class="col-4 text-end">
                         <div class="scroller-content">
                             <span class="pointer pagetop">[[topic:first-post]] <i class="fa fa-angle-double-up"></i></span>
                             <div class="scroller-container">
@@ -26,10 +26,10 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-xs-6">
-                        <button id="myNextPostBtn" class="btn btn-default form-control" disabled>[[topic:go-to-my-next-post]]</button>
+                    <div class="col-6">
+                        <button id="myNextPostBtn" class="btn btn-outline-secondary form-control" disabled>[[topic:go-to-my-next-post]]</button>
                     </div>
-                    <div class="col-xs-6">
+                    <div class="col-6">
                         <input type="number" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
                     </div>
                 </div>

package/templates/partials/topic/necro-post.tpl

@@ -1,3 +1,3 @@
-<li component="topic/necro-post" class="necro-post timeline-event">
+<li component="topic/necro-post" class="necro-post text-muted timeline-event">
 	<span class="timeline-text">{text}</span>
 </li>

package/templates/partials/topic/post-menu-list.tpl

@@ -1,23 +1,22 @@
 <!-- IF posts.display_moderator_tools -->
-<li class="dropdown-header">[[topic:tools]]</li>
 <li>
-	<a component="post/edit" role="menuitem" tabindex="-1" href="#">
+	<a class="dropdown-item" component="post/edit" role="menuitem" tabindex="-1" href="#">
 		<span class="menu-icon"><i class="fa fa-fw fa-pencil"></i></span> [[topic:edit]]
 	</a>
 </li>
 <li <!-- IF posts.deleted -->hidden<!-- ENDIF posts.deleted -->>
-	<a component="post/delete" role="menuitem" tabindex="-1" href="#" class="<!-- IF posts.deleted -->hidden<!-- ENDIF posts.deleted -->">
-		<div class="inline menu-icon"><i class="fa fa-fw fa-trash-o"></i></div> <span>[[topic:delete]]</span>
+	<a class="dropdown-item" component="post/delete" role="menuitem" tabindex="-1" href="#" class="<!-- IF posts.deleted -->hidden<!-- ENDIF posts.deleted -->">
+		<span class="menu-icon"><i class="fa fa-fw fa-trash-o"></i><span> [[topic:delete]]
 	</a>
 </li>
 <li <!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->>
-	<a component="post/restore" role="menuitem" tabindex="-1" href="#" class="<!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->">
-		<div class="inline menu-icon"><i class="fa fa-fw fa-history"></i></div> <span>[[topic:restore]]</span>
+	<a class="dropdown-item" component="post/restore" role="menuitem" tabindex="-1" href="#" class="<!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->">
+		<span class="menu-icon"><i class="fa fa-fw fa-history"></i><span> [[topic:restore]]
 	</a>
 </li>
 <!-- IF posts.display_purge_tools -->
 <li <!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->>
-	<a component="post/purge" role="menuitem" tabindex="-1" href="#" class="<!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->">
+	<a class="dropdown-item" component="post/purge" role="menuitem" tabindex="-1" href="#" class="<!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->">
 		<span class="menu-icon"><i class="fa fa-fw fa-eraser"></i></span> [[topic:purge]]
 	</a>
 </li>
@@ -25,7 +24,7 @@
 
 <!-- IF posts.display_move_tools -->
 <li>
-	<a component="post/move" role="menuitem" tabindex="-1" href="#">
+	<a class="dropdown-item" component="post/move" role="menuitem" tabindex="-1" href="#">
 		<span class="menu-icon"><i class="fa fa-fw fa-arrows"></i></span> [[topic:move]]
 	</a>
 </li>
@@ -33,7 +32,7 @@
 
 <!-- IF posts.display_change_owner_tools -->
 <li>
-	<a component="post/change-owner" role="menuitem" tabindex="-1" href="#">
+	<a class="dropdown-item" component="post/change-owner" role="menuitem" tabindex="-1" href="#">
 		<span class="menu-icon"><i class="fa fa-fw fa-user"></i></span> [[topic:change-owner]]
 	</a>
 </li>
@@ -41,13 +40,13 @@
 
 <!-- IF posts.ip -->
 <li>
-	<a component="post/copy-ip" role="menuitem" tabindex="-1" href="#" data-clipboard-text="{posts.ip}">
+	<a class="dropdown-item" component="post/copy-ip" role="menuitem" tabindex="-1" href="#" data-clipboard-text="{posts.ip}">
 		<span class="menu-icon" ><i class="fa fa-fw fa-copy"></i></span> [[topic:copy-ip]] {posts.ip}
 	</a>
 </li>
 <!-- IF posts.display_ip_ban -->
 <li>
-	<a component="post/ban-ip" role="menuitem" tabindex="-1" href="#" data-ip="{posts.ip}">
+	<a class="dropdown-item" component="post/ban-ip" role="menuitem" tabindex="-1" href="#" data-ip="{posts.ip}">
 		<span class="menu-icon"><i class="fa fa-fw fa-ban"></i></span> [[topic:ban-ip]] {posts.ip}
 	</a>
 </li>
@@ -57,7 +56,7 @@
 
 {{{each posts.tools}}}
 <li {{{ if ./disabled }}}class="disabled" {{{ end }}}>
-	<a {{{ if ./action}}}component="{./action}"{{{ end }}} role="menuitem" tabindex="-1" href="{{{ if ./href }}}{./href}{{{ else }}}#{{{ end }}}">
+	<a class="dropdown-item" {{{ if ./action}}}component="{./action}"{{{ end }}} role="menuitem" tabindex="-1" href="{{{ if ./href }}}{./href}{{{ else }}}#{{{ end }}}">
 		<span class="menu-icon"><i class="fa fa-fw {posts.tools.icon}"></i></span> {{posts.tools.html}}
 	</a>
 </li>
@@ -66,7 +65,7 @@
 <!-- IF !posts.deleted -->
 	<!-- IF posts.display_history -->
 	<li>
-		<a component="post/view-history" role="menuitem" tabindex="-1" href="#">
+		<a class="dropdown-item" component="post/view-history" role="menuitem" tabindex="-1" href="#">
 			<span class="menu-icon"><i class="fa fa-fw fa-history"></i></span> [[topic:view-history]]
 		</a>
 	</li>
@@ -74,7 +73,7 @@
 
 	{{{ if config.loggedIn }}}
 	<li>
-		<a component="post/bookmark" role="menuitem" tabindex="-1" href="#" data-bookmarked="{posts.bookmarked}">
+		<a class="dropdown-item" component="post/bookmark" role="menuitem" tabindex="-1" href="#" data-bookmarked="{posts.bookmarked}">
 			<span class="menu-icon">
 				<i component="post/bookmark/on" class="fa fa-fw fa-heart <!-- IF !posts.bookmarked -->hidden<!-- ENDIF !posts.bookmarked -->"></i>
 				<i component="post/bookmark/off" class="fa fa-fw fa-heart-o <!-- IF posts.bookmarked -->hidden<!-- ENDIF posts.bookmarked -->"></i>
@@ -86,44 +85,48 @@
 	{{{ end }}}
 
 	<li>
-		<a role="menuitem" tabindex="-1" href="#" data-clipboard-text="{posts.absolute_url}">
+		<a class="dropdown-item" role="menuitem" tabindex="-1" href="#" data-clipboard-text="{posts.absolute_url}">
 			<i class="fa fa-fw fa-link"></i> [[topic:copy-permalink]]
 		</a>
 	</li>
 
 	<!-- IF postSharing.length -->
-	<!-- IF config.loggedIn --><li class="divider"></li><!-- ENDIF config.loggedIn -->
+	<!-- IF config.loggedIn --><li class="dropdown-divider"></li><!-- ENDIF config.loggedIn -->
 	<li class="dropdown-header">[[topic:share_this_post]]</li>
 	<!-- ENDIF postSharing.length -->
 	{{{each postSharing}}}
 		<li>
-			<a role="menuitem" component="share/{postSharing.id}" tabindex="-1" href="#"><span class="menu-icon"><i class="fa fa-fw {postSharing.class}"></i></span> {postSharing.name}</a>
+			<a class="dropdown-item" role="menuitem" component="share/{postSharing.id}" tabindex="-1" href="#"><span class="menu-icon"><i class="fa fa-fw {postSharing.class}"></i></span> {postSharing.name}</a>
 		</li>
 	{{{end}}}
 <!-- ENDIF !posts.deleted -->
 
 {{{ if posts.display_flag_tools }}}
-<li class="divider"></li>
+<li class="dropdown-divider"></li>
 
 <li {{{ if posts.flags.flagged }}}hidden{{{ end }}}>
-	<a component="post/flag" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw fa-flag"></i> [[topic:flag-post]]</a>
+	<a class="dropdown-item" component="post/flag" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw fa-flag"></i> [[topic:flag-post]]</a>
 </li>
 <li {{{ if !posts.flags.flagged }}}hidden{{{ end }}} class="disabled text-muted">
-	<a component="post/already-flagged" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw fa-flag"></i> [[topic:already-flagged]]</a>
+	<a class="dropdown-item" component="post/already-flagged" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw fa-flag"></i> [[topic:already-flagged]]</a>
 </li>
 
 {{{ if (!posts.selfPost && posts.uid) }}}
 <li>
-	<a component="post/flagUser" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw fa-flag"></i> [[topic:flag-user]]</a>
+	<a class="dropdown-item" component="post/flagUser" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw fa-flag"></i> [[topic:flag-user]]</a>
 </li>
 {{{ end }}}
 {{{ end }}}
 
 <!-- IF posts.display_moderator_tools -->
 {{{ if posts.flags.exists }}}
-<li><a role="menuitem" tabindex="-1" href="{config.relative_path}/flags/{posts.flags.flagId}"><i class="fa fa-fw fa-exclamation-circle"></i> [[topic:view-flag-report]]</a></li>
+<li>
+	<a class="dropdown-item" role="menuitem" tabindex="-1" href="{config.relative_path}/flags/{posts.flags.flagId}"><i class="fa fa-fw fa-exclamation-circle"></i> [[topic:view-flag-report]]</a>
+</li>
 {{{ if (posts.flags.state == "open") }}}
-<li><a component="post/flagResolve" data-flagId="{posts.flags.flagId}" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw fa-check"></i> [[topic:resolve-flag]]</a></li>
+<li>
+	<a class="dropdown-item" component="post/flagResolve" data-flagId="{posts.flags.flagId}" role="menuitem" tabindex="-1" href="#"><i class="fa fa-fw fa-check"></i> [[topic:resolve-flag]]</a>
+</li>
 {{{ end }}}
 {{{ end }}}
 <!-- ENDIF posts.display_moderator_tools -->

package/templates/partials/topic/post-menu.tpl

@@ -1,4 +1,4 @@
-<span component="post/tools" class="dropdown moderator-tools bottom-sheet <!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
-	<a href="#" data-toggle="dropdown" data-ajaxify="false"><i class="fa fa-fw fa-ellipsis-v"></i></a>
-	<ul class="dropdown-menu dropdown-menu-right hidden" role="menu"></ul>
+<span component="post/tools" class="dropdown moderator-tools bottom-sheet d-inline-block<!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
+	<a class="dropdown-toggle" href="#" data-bs-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-v"></i></a>
+	<ul class="dropdown-menu dropdown-menu-end" role="menu"></ul>
 </span>

package/templates/partials/topic/post.tpl

@@ -1,49 +1,54 @@
 <div class="clearfix post-header">
-	<div class="icon pull-left">
+	<div class="icon float-start">
 		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
-			{buildAvatar(posts.user, "sm2x", true, "", "user/picture")}
+			{buildAvatar(posts.user, "48px", true, "", "user/picture")}
 			<i component="user/status" class="fa fa-circle status {posts.user.status}" title="[[global:{posts.user.status}]]"></i>
 		</a>
 	</div>
 
-	<small class="pull-left">
-		<strong>
-			<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->" itemprop="author" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
-		</strong>
-
-		<!-- IMPORT partials/topic/badge.tpl -->
-
-		<!-- IF posts.user.banned -->
-		<span class="label label-danger">[[user:banned]]</span>
-		<!-- ENDIF posts.user.banned -->
-
-		<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
-			<!-- IF posts.toPid -->
-			<a component="post/parent" class="btn btn-xs btn-default hidden-xs" data-topid="{posts.toPid}" href="{config.relative_path}/post/{posts.toPid}"><i class="fa fa-reply"></i> @<!-- IF posts.parent.username -->{posts.parent.username}<!-- ELSE -->[[global:guest]]<!-- ENDIF posts.parent.username --></a>
-			<!-- ENDIF posts.toPid -->
-
-			<span>
-				<!-- IF posts.user.custom_profile_info.length -->
-				&#124;
-				{{{each posts.user.custom_profile_info}}}
-				{posts.user.custom_profile_info.content}
-				{{{end}}}
-				<!-- ENDIF posts.user.custom_profile_info.length -->
+	<small class="d-flex">
+		<div class="d-flex align-items-center gap-1 flex-wrap w-100">
+			<strong class="text-nowrap">
+				<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->" itemprop="author" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
+			</strong>
+
+			{{{ each posts.user.selectedGroups }}}
+			{{{ if posts.user.selectedGroups.slug }}}
+			<!-- IMPORT partials/groups/badge.tpl -->
+			{{{ end }}}
+			{{{ end }}}
+
+			<!-- IF posts.user.banned -->
+			<span class="badge bg-danger">[[user:banned]]</span>
+			<!-- ENDIF posts.user.banned -->
+
+			<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
+				<!-- IF posts.toPid -->
+				<a component="post/parent" class="btn btn-sm btn-outline-secondary hidden-xs" data-topid="{posts.toPid}" href="{config.relative_path}/post/{posts.toPid}"><i class="fa fa-reply"></i> @<!-- IF posts.parent.username -->{posts.parent.username}<!-- ELSE -->[[global:guest]]<!-- ENDIF posts.parent.username --></a>
+				<!-- ENDIF posts.toPid -->
+
+				<span>
+					<!-- IF posts.user.custom_profile_info.length -->
+					&#124;
+					{{{each posts.user.custom_profile_info}}}
+					{posts.user.custom_profile_info.content}
+					{{{end}}}
+					<!-- ENDIF posts.user.custom_profile_info.length -->
+				</span>
 			</span>
-		</span>
-
-	</small>
-	<small class="pull-right">
-		<span class="bookmarked"><i class="fa fa-bookmark-o"></i></span>
-	</small>
-	<small class="pull-right">
-		<i component="post/edit-indicator" class="fa fa-pencil-square<!-- IF privileges.posts:history --> pointer<!-- END --> edit-icon <!-- IF !posts.editor.username -->hidden<!-- ENDIF !posts.editor.username -->"></i>
-
-		<small data-editor="{posts.editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by, {posts.editor.username}]] <span class="timeago" title="{posts.editedISO}"></span></small>
-
-		<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
-			<a class="permalink" href="{config.relative_path}/post/{posts.pid}"><span class="timeago" title="{posts.timestampISO}"></span></a>
-		</span>
+			<div class="d-flex align-items-center gap-1 flex-grow-1 justify-content-end">
+				<span>
+					<i component="post/edit-indicator" class="fa fa-pencil-square<!-- IF privileges.posts:history --> pointer<!-- END --> edit-icon <!-- IF !posts.editor.username -->hidden<!-- ENDIF !posts.editor.username -->"></i>
+
+					<span data-editor="{posts.editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by, {posts.editor.username}]] <span class="timeago" title="{posts.editedISO}"></span></span>
+
+					<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
+						<a class="permalink text-muted" href="{config.relative_path}/post/{posts.pid}"><span class="timeago" title="{posts.timestampISO}"></span></a>
+					</span>
+				</span>
+				<span class="bookmarked"><i class="fa fa-bookmark-o"></i></span>
+			</div>
+		</div>
 	</small>
 </div>
 
@@ -60,10 +65,10 @@
 
 	<div class="clearfix">
 	{{{ if !hideReplies }}}
-	<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="threaded-replies no-select pull-left {{{ if !posts.replies.count }}}hidden{{{ end }}}">
+	<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="threaded-replies user-select-none float-start text-muted {{{ if !posts.replies.count }}}hidden{{{ end }}}">
 		<span component="post/reply-count/avatars" class="avatars {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
 			{{{each posts.replies.users}}}
-			{buildAvatar(posts.replies.users, "xs", true, "")}
+			{buildAvatar(posts.replies.users, "16px", true, "")}
 			{{{end}}}
 		</span>
 
@@ -76,11 +81,11 @@
 	</a>
 	{{{ end }}}
 
-	<small class="pull-right">
+	<small class="float-end">
 		<!-- IMPORT partials/topic/reactions.tpl -->
 		<span class="post-tools">
-			<a component="post/reply" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
-			<a component="post/quote" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
+			<a component="post/reply" href="#" class="user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
+			<a component="post/quote" href="#" class="user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
 		</span>
 
 		<!-- IF !reputation:disabled -->

package/templates/partials/topic/quickreply.tpl

@@ -1,8 +1,8 @@
 <!-- IF privileges.topics:reply -->
 <div component="topic/quickreply/container" class="clearfix quick-reply">
-	<div class="icon pull-left hidden-xs">
+	<div class="icon float-start hidden-xs">
 		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
-			{buildAvatar(loggedInUser, "46", true, "", "user/picture")}
+			{buildAvatar(loggedInUser, "48px", true, "", "user/picture")}
 			<!-- IF loggedInUser.status -->
 			<i component="user/status" class="fa fa-circle status {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i>
 			<!-- ENDIF loggedInUser.status -->
@@ -15,7 +15,7 @@
 			<textarea name="content" component="topic/quickreply/text" class="form-control" rows="5" placeholder="[[modules:composer.textarea.placeholder]]"></textarea>
 			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
 		</div>
-		<button type="submit" component="topic/quickreply/button" class="btn btn-primary pull-right">[[topic:post-quick-reply]]</button>
+		<button type="submit" component="topic/quickreply/button" class="btn btn-primary float-end">[[topic:post-quick-reply]]</button>
 	</form>
 	<form component="topic/quickreply/upload" method="post" enctype="multipart/form-data">
 		<input type="file" name="files[]" multiple class="hidden"/>

package/templates/partials/topic/reply-button.tpl

@@ -1,10 +1,10 @@
 <div component="topic/reply/container" class="btn-group action-bar bottom-sheet <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">
 	<a href="{config.relative_path}/compose?tid={tid}&title={title}" class="btn btn-sm btn-primary" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply visible-xs-inline"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[topic:reply]]</span></a>
-	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">
+	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown">
 		<span class="caret"></span>
 	</button>
-	<ul class="dropdown-menu pull-right" role="menu">
-		<li><a href="#" component="topic/reply-as-topic">[[topic:reply-as-topic]]</a></li>
+	<ul class="dropdown-menu dropdown-menu-end" role="menu">
+		<li><a class="dropdown-item" href="#" component="topic/reply-as-topic">[[topic:reply-as-topic]]</a></li>
 	</ul>
 </div>
 

package/templates/partials/topic/sort.tpl

@@ -1,9 +1,9 @@
 <div title="[[topic:sort_by]]" class="btn-group bottom-sheet hidden-xs" component="thread/sort">
-	<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+	<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
 	<span><i class="fa fa-fw fa-sort"></i></span></button>
-	<ul class="dropdown-menu dropdown-menu-right">
-		<li><a href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
-		<li><a href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
-		<li><a href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>
+	<ul class="dropdown-menu dropdown-menu-end">
+		<li><a class="dropdown-item" href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
+		<li><a class="dropdown-item" href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
+		<li><a class="dropdown-item" href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>
 	</ul>
 </div>

package/templates/partials/topic/tag.tpl

@@ -0,0 +1 @@
+<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="tag tag-item fw-bold tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>

package/templates/partials/topic/tags.tpl

@@ -1,5 +1,3 @@
-{{{each tags}}}
-<a href="{config.relative_path}/tags/{tags.valueEncoded}">
-    <span class="tag tag-item tag-class-{tags.class}" data-tag="{tags.value}">{tags.valueEscaped}</span>
-</a>
-{{{end}}}
+{{{ each tags }}}
+<!-- IMPORT partials/topic/tag.tpl -->
+{{{ end }}}

package/templates/partials/topic/topic-menu-list.tpl

@@ -1,30 +1,32 @@
-<!-- IF privileges.editable -->
-<li <!-- IF locked -->hidden<!-- ENDIF locked -->><a component="topic/lock" href="#" class="<!-- IF locked -->hidden<!-- ENDIF locked -->"><i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]</a></li>
-<li <!-- IF !locked -->hidden<!-- ENDIF !locked -->><a component="topic/unlock" href="#" class="<!-- IF !locked -->hidden<!-- ENDIF !locked -->"><i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]</a></li>
-<li><a component="topic/move" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]</a></li>
-<li><a component="topic/fork" href="#"><i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.fork]]</a></li>
+{{{ if privileges.editable }}}
+<li <!-- IF locked -->hidden<!-- ENDIF locked -->><a component="topic/lock" href="#" class="dropdown-item <!-- IF locked -->hidden<!-- ENDIF locked -->"><i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]</a></li>
+<li <!-- IF !locked -->hidden<!-- ENDIF !locked -->><a component="topic/unlock" href="#" class="dropdown-item <!-- IF !locked -->hidden<!-- ENDIF !locked -->"><i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]</a></li>
+<li <!-- IF pinned -->hidden<!-- ENDIF pinned -->><a component="topic/pin" href="#" class="dropdown-item <!-- IF pinned -->hidden<!-- ENDIF pinned -->"><i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]</a></li>
+<li <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->><a component="topic/unpin" href="#" class="dropdown-item <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"><i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]</a></li>
+
+<li><a component="topic/move" class="dropdown-item" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]</a></li>
+<li><a component="topic/merge" class="dropdown-item" href="#"><i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.merge]]</a></li>
+<li><a component="topic/fork" class="dropdown-item" href="#"><i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.fork]]</a></li>
 {{{ if !scheduled }}}
-<li <!-- IF pinned -->hidden<!-- ENDIF pinned -->><a component="topic/pin" href="#" class="<!-- IF pinned -->hidden<!-- ENDIF pinned -->"><i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]</a></li>
-<li <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->><a component="topic/unpin" href="#" class="<!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"><i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]</a></li>
-<li><a component="topic/move-posts" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move-posts]]</a></li>
+<li><a component="topic/move-posts" class="dropdown-item" href="#"><i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move-posts]]</a></li>
+{{{ end }}}
+<li><a component="topic/mark-unread-for-all" class="dropdown-item" href="#"><i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]</a></li>
+<li class="dropdown-divider"></li>
 {{{ end }}}
-<li><a component="topic/mark-unread-for-all" href="#"><i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]</a></li>
-<li class="divider"></li>
-<!-- ENDIF privileges.editable -->
 
 <!-- IF privileges.deletable -->
-<li <!-- IF deleted -->hidden<!-- ENDIF deleted -->><a component="topic/delete" href="#" class="<!-- IF deleted -->hidden<!-- ENDIF deleted -->"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]</a></li>
+<li <!-- IF deleted -->hidden<!-- ENDIF deleted -->><a component="topic/delete" href="#" class="dropdown-item <!-- IF deleted -->hidden<!-- ENDIF deleted -->"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]</a></li>
 {{{ if !scheduled }}}
-<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/restore" href="#" class="<!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]</a></li>
+<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/restore" href="#" class="dropdown-item <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]</a></li>
 {{{ end }}}
 <!-- IF privileges.purge -->
-<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/purge" href="#" class="<!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]</a></li>
+<li <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->><a component="topic/purge" href="#" class="dropdown-item <!-- IF !deleted -->hidden<!-- ENDIF !deleted -->"><i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]</a></li>
 <!-- END -->
 <!-- IF privileges.isAdminOrMod -->
-<li><a component="topic/delete/posts" href="#"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete-posts]]</a></li>
+<li><a component="topic/delete/posts" class="dropdown-item" href="#"><i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete-posts]]</a></li>
 <!-- ENDIF privileges.isAdminOrMod -->
 
 {{{each thread_tools}}}
-<li><a href="#" class="{thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a></li>
+<li><a href="#" class="dropdown-item {thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a></li>
 {{{end}}}
 <!-- ENDIF privileges.deletable -->

package/templates/partials/topic/watch.tpl

@@ -1,10 +1,11 @@
 <!-- IF config.loggedIn -->
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
-	<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button"
-		{{{if isFollowing}}}title="[[topic:watching]]"{{{end}}}
-		{{{if isNotFollowing}}}title="[[topic:not-watching]]"{{{end}}}
-		{{{if isIgnoring}}}title="[[topic:ignoring]]"{{{end}}}
-	>
+<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch"
+data-bs-toggle="tooltip"
+	{{{if isFollowing}}}title="[[topic:watching]]"{{{end}}}
+	{{{if isNotFollowing}}}title="[[topic:not-watching]]"{{{end}}}
+	{{{if isIgnoring}}}title="[[topic:ignoring]]"{{{end}}}
+>
+	<button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span component="topic/following/menu" <!-- IF !isFollowing -->class="hidden"<!-- ENDIF !isFollowing -->><i class="fa fa-fw fa-bell-o"></i></span>
 
 		<span component="topic/not-following/menu" <!-- IF !isNotFollowing -->class="hidden"<!-- ENDIF !isNotFollowing -->><i class="fa fa-fw fa-bell-slash-o"></i></span>
@@ -12,10 +13,10 @@
 		<span component="topic/ignoring/menu" <!-- IF !isIgnoring -->class="hidden"<!-- ENDIF !isIgnoring -->><i class="fa fa-fw fa-eye-slash"></i></span>
 
 	</button>
-	<ul class="dropdown-menu dropdown-menu-right">
-		<li><a href="#" component="topic/following"><i component="topic/following/check" class="fa fa-fw <!-- IF isFollowing -->fa-check<!-- ENDIF isFollowing -->"></i><i class="fa fa-fw fa-bell-o"></i> [[topic:watching]]<p class="help-text hidden-xs"><small>[[topic:watching.description]]</small></p></a></li>
-		<li><a href="#" component="topic/not-following"><i component="topic/not-following/check" class="fa fa-fw <!-- IF isNotFollowing -->fa-check<!-- ENDIF isNotFollowing -->"></i><i class="fa fa-fw fa-bell-slash-o"></i> [[topic:not-watching]]<p class="help-text hidden-xs"><small>[[topic:not-watching.description]]</small></p></a></li>
-		<li><a href="#" component="topic/ignoring"><i component="topic/ignoring/check" class="fa fa-fw <!-- IF isIgnoring -->fa-check<!-- ENDIF isIgnoring -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]<p class="help-text hidden-xs"><small>[[topic:ignoring.description]]</small></p></a></li>
+	<ul class="dropdown-menu dropdown-menu-end">
+		<li><a class="dropdown-item" href="#" component="topic/following"><i component="topic/following/check" class="fa fa-fw <!-- IF isFollowing -->fa-check<!-- ENDIF isFollowing -->"></i><i class="fa fa-fw fa-bell-o"></i> [[topic:watching]]<p class="help-text hidden-xs"><small>[[topic:watching.description]]</small></p></a></li>
+		<li><a class="dropdown-item" href="#" component="topic/not-following"><i component="topic/not-following/check" class="fa fa-fw <!-- IF isNotFollowing -->fa-check<!-- ENDIF isNotFollowing -->"></i><i class="fa fa-fw fa-bell-slash-o"></i> [[topic:not-watching]]<p class="help-text hidden-xs"><small>[[topic:not-watching.description]]</small></p></a></li>
+		<li><a class="dropdown-item" href="#" component="topic/ignoring"><i component="topic/ignoring/check" class="fa fa-fw <!-- IF isIgnoring -->fa-check<!-- ENDIF isIgnoring -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]<p class="help-text hidden-xs"><small>[[topic:ignoring.description]]</small></p></a></li>
 	</ul>
 </div>
 <!-- ENDIF config.loggedIn -->

package/templates/partials/topic-filters.tpl

@@ -0,0 +1,12 @@
+<div class="btn-group bottom-sheet{{{ if !filters.length }}} hidden{{{ end }}}">
+	<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
+		<span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedFilter.name}</span><span class="visible-xs-inline"><i class="fa fa-fw {selectedFilter.icon}"></i></span> <span class="caret"></span>
+	</button>
+	<ul class="dropdown-menu dropdown-menu-end" role="menu">
+		{{{each filters}}}
+		<li role="presentation" class="category {{{if filters.selected}}}selected{{{end}}}">
+			<a class="dropdown-item" role="menu-item" href="{config.relative_path}/{filters.url}"><i class="fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i>{filters.name}</a>
+		</li>
+		{{{end}}}
+	</ul>
+</div>

package/templates/partials/topic-terms.tpl

@@ -0,0 +1,12 @@
+<div class="btn-group bottom-sheet {{{ if !terms.length }}}hidden{{{ end }}}">
+	<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
+	{selectedTerm.name} <span class="caret"></span>
+	</button>
+	<ul class="dropdown-menu dropdown-menu-end" role="menu">
+		{{{each terms}}}
+		<li role="presentation" class="category">
+			<a class="dropdown-item" role="menu-item" href="{config.relative_path}/{terms.url}"><i class="fa fa-fw {{{ if terms.selected }}}fa-check{{{ end }}}"></i>{terms.name}</a>
+		</li>
+		{{{end}}}
+	</ul>
+</div>