nodebb-theme-harmony 2.0.0 → 2.0.1

package/templates/partials/topics_list.tpl

@@ -1,131 +1,131 @@
-<ul component="category" class="topics-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
-
-	{{{ each topics }}}
-	<li component="category/topic" class="category-item hover-parent border-bottom py-3 py-lg-4 d-flex flex-column flex-lg-row align-items-start {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
-		<link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
-		<meta itemprop="name" content="{function.stripTags, ./title}" />
-		<meta itemprop="itemListOrder" content="descending" />
-		<meta itemprop="position" content="{increment(./index, "1")}" />
-		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
-
-		<div class="d-flex p-0 col-12 col-lg-7 gap-2 gap-lg-3 pe-1 align-items-start {{{ if config.theme.mobileTopicTeasers }}}mb-2 mb-lg-0{{{ end }}}">
-			<div class="flex-shrink-0 position-relative">
-				<a class="d-inline-block text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
-					{buildAvatar(./user, "40px", true)}
-				</a>
-				{{{ if showSelect }}}
-				<div class="checkbox position-absolute top-100 start-50 translate-middle-x pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
-					<i component="topic/select" class="fa text-muted pointer fa-square-o p-1 hover-visible"></i>
-				</div>
-				{{{ end }}}
-			</div>
-			<div class="flex-grow-1 d-flex flex-wrap gap-1 position-relative">
-				<h3 component="topic/header" class="title text-break fs-5 fw-semibold m-0 tracking-tight w-100 {{{ if showSelect }}}me-4 me-lg-0{{{ end }}}">
-					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{./title}</a>
-				</h3>
-				<span component="topic/labels" class="d-flex flex-wrap gap-1 w-100">
-					<span component="topic/watched" class="badge border border-gray-300 text-body {{{ if !./followed }}}hidden{{{ end }}}">
-						<i class="fa fa-bell-o"></i>
-						<span>[[topic:watching]]</span>
-					</span>
-					<span component="topic/ignored" class="badge border border-gray-300 text-body {{{ if !./ignored }}}hidden{{{ end }}}">
-						<i class="fa fa-eye-slash"></i>
-						<span>[[topic:ignoring]]</span>
-					</span>
-					<span component="topic/scheduled" class="badge border border-gray-300 text-body {{{ if !./scheduled }}}hidden{{{ end }}}">
-						<i class="fa fa-clock-o"></i>
-						<span>[[topic:scheduled]]</span>
-					</span>
-					<span component="topic/pinned" class="badge border border-gray-300 text-body {{{ if (./scheduled || !./pinned) }}}hidden{{{ end }}}">
-						<i class="fa fa-thumb-tack"></i>
-						<span>{{{ if !./pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {isoTimeToLocaleString(./pinExpiryISO, config.userLang)}]]{{{ end }}}</span>
-					</span>
-					<span component="topic/locked" class="badge border border-gray-300 text-body {{{ if !./locked }}}hidden{{{ end }}}">
-						<i class="fa fa-lock"></i>
-						<span>[[topic:locked]]</span>
-					</span>
-					<span component="topic/moved" class="badge border border-gray-300 text-body {{{ if (!./oldCid || (./oldCid == "-1")) }}}hidden{{{ end }}}">
-						<i class="fa fa-arrow-circle-right"></i>
-						<span>[[topic:moved]]</span>
-					</span>
-					{{{each ./icons}}}<span class="lh-1">{@value}</span>{{{end}}}
-
-					{{{ if (!template.category && !template.world) }}}
-					{function.buildCategoryLabel, ./category, "a", "border"}
-					{{{ end }}}
-
-					<span data-tid="{./tid}" component="topic/tags" class="lh-1 tag-list hidden-xs d-flex flex-wrap gap-1 {{{ if !./tags.length }}}hidden{{{ end }}}">
-						{{{ each ./tags }}}
-						<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
-						{{{ end }}}
-					</span>
-
-					<div class="d-flex gap-1 d-block d-lg-none w-100">
-						<span class="badge text-body border stats text-xs text-muted">
-							<i class="fa-regular fa-fw fa-message"></i>
-							<span component="topic/post-count" class="fw-normal">{humanReadableNumber(./postcount, 0)}</span>
-						</span>
-
-						<a href="{config.relative_path}/topic/{./slug}{{{ if (./teaser.timestampISO && !config.theme.mobileTopicTeasers) }}}/{./teaser.index}{{{ end }}}" class="border badge bg-transparent text-muted fw-normal timeago" title="{{{ if (./teaser.timestampISO && !config.theme.mobileTopicTeasers) }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></a>
-					</div>
-
-					<a href="{config.relative_path}/topic/{./slug}" class="d-none d-lg-block badge bg-transparent text-muted fw-normal timeago" title="{./timestampISO}"></a>
-				</span>
-				{{{ if showSelect }}}
-				<div class="checkbox position-absolute top-0 end-0 m-0 d-flex d-lg-none" style="max-width:max-content">
-					<i component="topic/select" class="fa fa-square-o text-muted pointer p-1"></i>
-				</div>
-				{{{ end }}}
-			</div>
-			{{{ if ./thumbs.length }}}
-			<a class="topic-thumbs position-relative text-decoration-none flex-shrink-0 d-none d-xl-block" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}" aria-label="[[topic:thumb-image]]">
-				<img class="topic-thumb rounded-1 bg-light" style="width:auto;max-width: 5.33rem;height: 3.33rem;object-fit: contain;" src="{./thumbs.0.url}" alt=""/>
-				<span data-numthumbs="{./thumbs.length}" class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info" style="z-index: 1;">+{increment(./thumbs.length, "-1")}</span>
-			</a>
-			{{{ end }}}
-		</div>
-
-		<div class="d-flex p-0 col-lg-5 col-12 align-content-stretch">
-			<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr 1fr;">
-				{{{ if !reputation:disabled }}}
-				<div class="stats-votes card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
-					<span class="fs-5 ff-secondary lh-1" title="{./votes}">{humanReadableNumber(./votes, 0)}</span>
-					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:votes]]</span>
-					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-chevron-up"></i>
-				</div>
-				{{{ end }}}
-				<div class="stats-postcount card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
-					<span class="fs-5 ff-secondary lh-1" title="{./postcount}">{humanReadableNumber(./postcount, 0)}</span>
-					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:posts]]</span>
-					<i class="d-xl-none fa-regular fa-fw text-xs text-muted opacity-75 fa-message"></i>
-				</div>
-				<div class="stats-viewcount card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
-					<span class="fs-5 ff-secondary lh-1" title="{./viewcount}">{humanReadableNumber(./viewcount, 0)}</span>
-					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:views]]</span>
-					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-eye"></i>
-				</div>
-			</div>
-			<div component="topic/teaser" class="meta teaser col-lg-6 col-12 {{{ if !config.theme.mobileTopicTeasers }}}d-none d-lg-block{{{ end }}}">
-				<div class="lastpost border-start border-2 lh-sm h-100 d-flex flex-column gap-1" style="border-color: {./category.bgColor}!important;">
-					{{{ if ./unreplied }}}
-					<div class="ps-2 text-xs">
-						[[category:no-replies]]
-					</div>
-					{{{ else }}}
-					{{{ if ./teaser.pid }}}
-					<div class="ps-2">
-						<a href="{{{ if ./teaser.user.userslug }}}{config.relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}" class="text-decoration-none avatar-tooltip" title="{./teaser.user.displayname}">{buildAvatar(./teaser.user, "18px", true)}</a>
-						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}" aria-label="[[global:lastpost]]"></a>
-					</div>
-					<div class="post-content text-xs ps-2 line-clamp-sm-2 lh-sm text-break position-relative flex-fill">
-						<a class="stretched-link" tabindex="-1" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" aria-label="[[global:lastpost]]"></a>
-						{./teaser.content}
-					</div>
-					{{{ end }}}
-					{{{ end }}}
-				</div>
-			</div>
-		</div>
-	</li>
-	{{{end}}}
-</ul>
+<ul component="category" class="topics-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
+
+	{{{ each topics }}}
+	<li component="category/topic" class="category-item hover-parent border-bottom py-3 py-lg-4 d-flex flex-column flex-lg-row align-items-start {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
+		<link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
+		<meta itemprop="name" content="{function.stripTags, ./title}" />
+		<meta itemprop="itemListOrder" content="descending" />
+		<meta itemprop="position" content="{increment(./index, "1")}" />
+		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
+
+		<div class="d-flex p-0 col-12 col-lg-7 gap-2 gap-lg-3 pe-1 align-items-start {{{ if config.theme.mobileTopicTeasers }}}mb-2 mb-lg-0{{{ end }}}">
+			<div class="flex-shrink-0 position-relative">
+				<a class="d-inline-block text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+					{buildAvatar(./user, "40px", true)}
+				</a>
+				{{{ if showSelect }}}
+				<div class="checkbox position-absolute top-100 start-50 translate-middle-x pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
+					<i component="topic/select" class="fa text-muted pointer fa-square-o p-1 hover-visible"></i>
+				</div>
+				{{{ end }}}
+			</div>
+			<div class="flex-grow-1 d-flex flex-wrap gap-1 position-relative">
+				<h3 component="topic/header" class="title text-break fs-5 fw-semibold m-0 tracking-tight w-100 {{{ if showSelect }}}me-4 me-lg-0{{{ end }}}">
+					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{./title}</a>
+				</h3>
+				<span component="topic/labels" class="d-flex flex-wrap gap-1 w-100">
+					<span component="topic/watched" class="badge border border-gray-300 text-body {{{ if !./followed }}}hidden{{{ end }}}">
+						<i class="fa fa-bell-o"></i>
+						<span>[[topic:watching]]</span>
+					</span>
+					<span component="topic/ignored" class="badge border border-gray-300 text-body {{{ if !./ignored }}}hidden{{{ end }}}">
+						<i class="fa fa-eye-slash"></i>
+						<span>[[topic:ignoring]]</span>
+					</span>
+					<span component="topic/scheduled" class="badge border border-gray-300 text-body {{{ if !./scheduled }}}hidden{{{ end }}}">
+						<i class="fa fa-clock-o"></i>
+						<span>[[topic:scheduled]]</span>
+					</span>
+					<span component="topic/pinned" class="badge border border-gray-300 text-body {{{ if (./scheduled || !./pinned) }}}hidden{{{ end }}}">
+						<i class="fa fa-thumb-tack"></i>
+						<span>{{{ if !./pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {isoTimeToLocaleString(./pinExpiryISO, config.userLang)}]]{{{ end }}}</span>
+					</span>
+					<span component="topic/locked" class="badge border border-gray-300 text-body {{{ if !./locked }}}hidden{{{ end }}}">
+						<i class="fa fa-lock"></i>
+						<span>[[topic:locked]]</span>
+					</span>
+					<span component="topic/moved" class="badge border border-gray-300 text-body {{{ if (!./oldCid || (./oldCid == "-1")) }}}hidden{{{ end }}}">
+						<i class="fa fa-arrow-circle-right"></i>
+						<span>[[topic:moved]]</span>
+					</span>
+					{{{each ./icons}}}<span class="lh-1">{@value}</span>{{{end}}}
+
+					{{{ if (!template.category && !template.world) }}}
+					{function.buildCategoryLabel, ./category, "a", "border"}
+					{{{ end }}}
+
+					<span data-tid="{./tid}" component="topic/tags" class="lh-1 tag-list hidden-xs d-flex flex-wrap gap-1 {{{ if !./tags.length }}}hidden{{{ end }}}">
+						{{{ each ./tags }}}
+						<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+						{{{ end }}}
+					</span>
+
+					<div class="d-flex gap-1 d-block d-lg-none w-100">
+						<span class="badge text-body border stats text-xs text-muted">
+							<i class="fa-regular fa-fw fa-message"></i>
+							<span component="topic/post-count" class="fw-normal">{humanReadableNumber(./postcount, 0)}</span>
+						</span>
+
+						<a href="{config.relative_path}/topic/{./slug}{{{ if (./teaser.timestampISO && !config.theme.mobileTopicTeasers) }}}/{./teaser.index}{{{ end }}}" class="border badge bg-transparent text-muted fw-normal timeago" title="{{{ if (./teaser.timestampISO && !config.theme.mobileTopicTeasers) }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></a>
+					</div>
+
+					<a href="{config.relative_path}/topic/{./slug}" class="d-none d-lg-block badge bg-transparent text-muted fw-normal timeago" title="{./timestampISO}"></a>
+				</span>
+				{{{ if showSelect }}}
+				<div class="checkbox position-absolute top-0 end-0 m-0 d-flex d-lg-none" style="max-width:max-content">
+					<i component="topic/select" class="fa fa-square-o text-muted pointer p-1"></i>
+				</div>
+				{{{ end }}}
+			</div>
+			{{{ if ./thumbs.length }}}
+			<a class="topic-thumbs position-relative text-decoration-none flex-shrink-0 d-none d-xl-block" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}" aria-label="[[topic:thumb-image]]">
+				<img class="topic-thumb rounded-1 bg-light" style="width:auto;max-width: 5.33rem;height: 3.33rem;object-fit: contain;" src="{./thumbs.0.url}" alt=""/>
+				<span data-numthumbs="{./thumbs.length}" class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info" style="z-index: 1;">+{increment(./thumbs.length, "-1")}</span>
+			</a>
+			{{{ end }}}
+		</div>
+
+		<div class="d-flex p-0 col-lg-5 col-12 align-content-stretch">
+			<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr 1fr;">
+				{{{ if !reputation:disabled }}}
+				<div class="stats-votes card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="fs-5 ff-secondary lh-1" title="{./votes}">{humanReadableNumber(./votes, 0)}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:votes]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-chevron-up"></i>
+				</div>
+				{{{ end }}}
+				<div class="stats-postcount card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="fs-5 ff-secondary lh-1" title="{./postcount}">{humanReadableNumber(./postcount, 0)}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:posts]]</span>
+					<i class="d-xl-none fa-regular fa-fw text-xs text-muted opacity-75 fa-message"></i>
+				</div>
+				<div class="stats-viewcount card card-header border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="fs-5 ff-secondary lh-1" title="{./viewcount}">{humanReadableNumber(./viewcount, 0)}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:views]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-eye"></i>
+				</div>
+			</div>
+			<div component="topic/teaser" class="meta teaser col-lg-6 col-12 {{{ if !config.theme.mobileTopicTeasers }}}d-none d-lg-block{{{ end }}}">
+				<div class="lastpost border-start border-2 lh-sm h-100 d-flex flex-column gap-1" style="border-color: {./category.bgColor}!important;">
+					{{{ if ./unreplied }}}
+					<div class="ps-2 text-xs">
+						[[category:no-replies]]
+					</div>
+					{{{ else }}}
+					{{{ if ./teaser.pid }}}
+					<div class="ps-2">
+						<a href="{{{ if ./teaser.user.userslug }}}{config.relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}" class="text-decoration-none avatar-tooltip" title="{./teaser.user.displayname}">{buildAvatar(./teaser.user, "18px", true)}</a>
+						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}" aria-label="[[global:lastpost]]"></a>
+					</div>
+					<div class="post-content text-xs ps-2 line-clamp-sm-2 lh-sm text-break position-relative flex-fill">
+						<a class="stretched-link" tabindex="-1" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" aria-label="[[global:lastpost]]"></a>
+						{./teaser.content}
+					</div>
+					{{{ end }}}
+					{{{ end }}}
+				</div>
+			</div>
+		</div>
+	</li>
+	{{{end}}}
+</ul>

package/templates/partials/users/item.tpl

@@ -1,39 +1,39 @@
-<div>
-	<a href="{config.relative_path}/user/{./userslug}" class="btn btn-ghost gap-2 ff-base d-flex align-items-start justify-content-start p-2 text-start">
-		{buildAvatar(@value, "48px", true, "flex-shrink-0")}
-		<div class="d-flex flex-column gap-1 text-truncate">
-			<div class="fw-semibold text-truncate" title="{./displayname}">{./displayname}</div>
-			<div class="text-xs text-muted text-truncate">@{./username}</div>
-
-			{{{ if section_online }}}
-			<div class="text-xs text-muted text-truncate">
-				<span class="timeago" title="{./lastonlineISO}"></span>
-			</div>
-			{{{ end }}}
-
-			{{{ if section_joindate }}}
-			<div class="text-xs text-muted text-truncate">
-				<span class="timeago" title="{./joindateISO}"></span>
-			</div>
-			{{{ end }}}
-
-			{{{ if section_sort-reputation }}}
-			<div class="text-xs text-muted text-truncate">
-				<span>{formattedNumber(./reputation)}</span>
-			</div>
-			{{{ end }}}
-
-			{{{ if section_sort-posts }}}
-			<div class="text-xs text-muted text-truncate">
-				<span>{formattedNumber(./postcount)}</span>
-			</div>
-			{{{ end }}}
-
-			{{{ if section_flagged }}}
-			<div class="text-xs text-muted text-truncate">
-				<span>{formattedNumber(./flags)}</span>
-			</div>
-			{{{ end }}}
-		</div>
-	</a>
-</div>
+<div>
+	<a href="{config.relative_path}/user/{./userslug}" class="btn btn-ghost gap-2 ff-base d-flex align-items-start justify-content-start p-2 text-start">
+		{buildAvatar(@value, "48px", true, "flex-shrink-0")}
+		<div class="d-flex flex-column gap-1 text-truncate">
+			<div class="fw-semibold text-truncate" title="{./displayname}">{./displayname}</div>
+			<div class="text-xs text-muted text-truncate">@{./username}</div>
+
+			{{{ if section_online }}}
+			<div class="text-xs text-muted text-truncate">
+				<span class="timeago" title="{./lastonlineISO}"></span>
+			</div>
+			{{{ end }}}
+
+			{{{ if section_joindate }}}
+			<div class="text-xs text-muted text-truncate">
+				<span class="timeago" title="{./joindateISO}"></span>
+			</div>
+			{{{ end }}}
+
+			{{{ if section_sort-reputation }}}
+			<div class="text-xs text-muted text-truncate">
+				<span>{formattedNumber(./reputation)}</span>
+			</div>
+			{{{ end }}}
+
+			{{{ if section_sort-posts }}}
+			<div class="text-xs text-muted text-truncate">
+				<span>{formattedNumber(./postcount)}</span>
+			</div>
+			{{{ end }}}
+
+			{{{ if section_flagged }}}
+			<div class="text-xs text-muted text-truncate">
+				<span>{formattedNumber(./flags)}</span>
+			</div>
+			{{{ end }}}
+		</div>
+	</a>
+</div>

package/templates/partials/users_list.tpl

@@ -1,5 +1,5 @@
-<div id="users-container" class="users-container row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-4">
-{{{ each users }}}
-	<!-- IMPORT partials/users/item.tpl -->
-{{{ end }}}
+<div id="users-container" class="users-container row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-4">
+{{{ each users }}}
+	<!-- IMPORT partials/users/item.tpl -->
+{{{ end }}}
 </div>

package/templates/partials/users_list_menu.tpl

@@ -1,15 +1,15 @@
-<div component="user/list/menu" class="text-sm d-flex flex-wrap align-items-center gap-2">
-	<a class="btn btn-ghost btn-sm ff-secondary fw-semibold" href="{config.relative_path}/users?section=online">[[global:online]]</a>
-
-	<a class="btn btn-ghost btn-sm ff-secondary fw-semibold" href="{config.relative_path}/users?section=sort-posts">[[users:top-posters]]</a>
-
-	{{{ if !reputation:disabled }}}
-	<a class="btn btn-ghost btn-sm ff-secondary fw-semibold" href="{config.relative_path}/users?section=sort-reputation">[[users:most-reputation]]</a>
-	{{{ end }}}
-
-	{{{ if isAdminOrGlobalMod }}}
-	<a class="btn btn-ghost btn-sm ff-secondary fw-semibold" href="{config.relative_path}/users?section=flagged">[[users:most-flags]]</a>
-
-	<a class="btn btn-ghost btn-sm ff-secondary fw-semibold" href="{config.relative_path}/users?section=banned">[[user:banned]]</a>
-	{{{ end }}}
+<div component="user/list/menu" class="text-sm d-flex flex-wrap align-items-center gap-2">
+	<a class="btn btn-ghost btn-sm ff-secondary fw-semibold" href="{config.relative_path}/users?section=online">[[global:online]]</a>
+
+	<a class="btn btn-ghost btn-sm ff-secondary fw-semibold" href="{config.relative_path}/users?section=sort-posts">[[users:top-posters]]</a>
+
+	{{{ if !reputation:disabled }}}
+	<a class="btn btn-ghost btn-sm ff-secondary fw-semibold" href="{config.relative_path}/users?section=sort-reputation">[[users:most-reputation]]</a>
+	{{{ end }}}
+
+	{{{ if isAdminOrGlobalMod }}}
+	<a class="btn btn-ghost btn-sm ff-secondary fw-semibold" href="{config.relative_path}/users?section=flagged">[[users:most-flags]]</a>
+
+	<a class="btn btn-ghost btn-sm ff-secondary fw-semibold" href="{config.relative_path}/users?section=banned">[[user:banned]]</a>
+	{{{ end }}}
 </div>

package/templates/popular.tpl

@@ -1,35 +1,35 @@
-{{{ if widgets.header.length }}}
-<div data-widget-area="header">
-	{{{each widgets.header}}}
-	{{widgets.header.html}}
-	{{{end}}}
-</div>
-{{{ end }}}
-
-<div class="row">
-	<div class="popular {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
-		<!-- IMPORT partials/topic-list-bar.tpl -->
-		<div class="category">
-			{{{ if !topics.length }}}
-			<div class="alert alert-info" id="category-no-topics">[[recent:no-popular-topics]]</div>
-			{{{ end }}}
-
-			<!-- IMPORT partials/topics_list.tpl -->
-
-			{{{ if config.usePagination }}}
-			<!-- IMPORT partials/paginator.tpl -->
-			{{{ end }}}
-		</div>
-	</div>
-	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
-		{{{ each widgets.sidebar }}}
-		{{widgets.sidebar.html}}
-		{{{ end }}}
-	</div>
-</div>
-
-<div data-widget-area="footer">
-	{{{each widgets.footer}}}
-	{{widgets.footer.html}}
-	{{{end}}}
+{{{ if widgets.header.length }}}
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+{{{ end }}}
+
+<div class="row">
+	<div class="popular {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		<!-- IMPORT partials/topic-list-bar.tpl -->
+		<div class="category">
+			{{{ if !topics.length }}}
+			<div class="alert alert-info" id="category-no-topics">[[recent:no-popular-topics]]</div>
+			{{{ end }}}
+
+			<!-- IMPORT partials/topics_list.tpl -->
+
+			{{{ if config.usePagination }}}
+			<!-- IMPORT partials/paginator.tpl -->
+			{{{ end }}}
+		</div>
+	</div>
+	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
+		{{{ each widgets.sidebar }}}
+		{{widgets.sidebar.html}}
+		{{{ end }}}
+	</div>
+</div>
+
+<div data-widget-area="footer">
+	{{{each widgets.footer}}}
+	{{widgets.footer.html}}
+	{{{end}}}
 </div>