nodebb-theme-harmony 0.0.1

package/templates/notifications.tpl

@@ -0,0 +1,68 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+
+<div class="notifications">
+
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	<div class="btn-toolbar justify-content-end" role="toolbar">
+		<div class="btn-group me-2">
+			<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
+				{{{ if selectedFilter }}}{selectedFilter.name}{{{ end}}} <span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu dropdown-menu-end" role="menu">
+				{{{ each filters }}}
+				{{{ if filters.separator }}}
+				<li role="separator" class="dropdown-divider"></li>
+				{{{ else }}}
+				<li role="presentation" class="category">
+					<a class="dropdown-item" role="menu-item" href="{config.relative_path}/notifications?filter={filters.filter}"><i class="fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i> {filters.name}</a>
+				</li>
+				{{{ end }}}
+				{{{ end }}}
+			</ul>
+		</div>
+
+		<div class="btn-group">
+			<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="true">
+				<i class="fa fa-eye"></i>
+				<span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="dropdownMenu1">
+				<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#" component="notifications/mark_all">[[notifications:mark_all_read]]</a></li>
+			</ul>
+		</div>
+	</div>
+
+	<hr />
+
+	<div class="alert alert-info {{{ if notifications.length }}}hidden{{{ end }}}">
+		[[notifications:no_notifs]]
+	</div>
+
+	<ul class="notifications-list list-unstyled" data-nextstart="{nextStart}">
+	{{{each notifications}}}
+		<li data-nid="{notifications.nid}" class="{notifications.readClass} {{{ if !./read}}}text-bg-warning{{{ end }}} d-flex pointer border p-3 mb-2" component="notifications/item">
+			<div class="me-2">
+				{{{ if notifications.from }}}
+				{buildAvatar(notifications.user, "24px", true)}
+				{{{ else }}}
+				{{{ if notifications.image }}}
+				<img width="24" height="24" src="{notifications.image}" />
+				{{{ end }}}
+				{{{ end }}}
+			</div>
+			<div>
+				<p class="mb-1">
+					<a class="text-reset" component="notifications/item/link" href="{notifications.path}">{notifications.bodyShort}</a>
+				</p>
+				<p class="timestamp">
+					<span class="timeago small text-reset" title="{notifications.datetimeISO}"></span>
+				</p>
+			</div>
+		</li>
+	{{{end}}}
+	</ul>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+

package/templates/partials/acceptTos.tpl

@@ -0,0 +1,11 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="form-group">
+	<label for="agree-terms">[[register:terms_of_use]]</label>
+	<div class="tos">{termsOfUse}</div>
+	<div class="checkbox">
+		<label>
+			<input type="checkbox" name="agree-terms" id="agree-terms"> [[register:agree_to_terms_of_use]]
+		</label>
+	</div>
+</div>

package/templates/partials/account/category-item.tpl

@@ -0,0 +1,25 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<li component="categories/category" data-cid="{../cid}" data-parent-cid="{../parentCid}" class="row clearfix">
+	<meta itemprop="name" content="{../name}">
+
+	<div class="content col-10 depth-{../depth}">
+		<div class="float-start">
+		{buildCategoryIcon(@value, "48px", "rounded-circle")}
+		</div>
+
+		<h2 class="title">
+			<!-- IMPORT partials/categories/link.tpl -->
+		</h2>
+		<div>
+			<!-- IF ../descriptionParsed -->
+			<div class="description text-muted">
+				{../descriptionParsed}
+			</div>
+			<!-- ENDIF ../descriptionParsed -->
+		</div>
+	</div>
+	<div class="col-2">
+	<!-- IMPORT partials/category/watch.tpl -->
+	</div>
+</li>

package/templates/partials/account/header.tpl

@@ -0,0 +1,48 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT partials/breadcrumbs.tpl -->
+
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+
+<div class="cover" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
+	<div class="avatar-wrapper" data-uid="{uid}">
+		<!-- IF picture -->
+		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 128px;" />
+		<!-- ELSE -->
+		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 128px;" title="{username}">{icon:text}</div>
+		<!-- ENDIF picture -->
+		<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
+
+		<!-- IF loggedIn -->
+		<!-- IF !isSelf -->
+		<button class="btn-morph persona-fab <!-- IF isFollowing -->heart<!-- ELSE -->plus<!-- ENDIF isFollowing -->" title="<!-- IF isFollowing -->[[global:unfollow]]<!-- ELSE -->[[global:follow]]<!-- ENDIF isFollowing -->">
+			<span>
+				<span class="s1"></span>
+				<span class="s2"></span>
+				<span class="s3"></span>
+			</span>
+		</button>
+		<!-- ENDIF !isSelf -->
+		<!-- ENDIF loggedIn -->
+	</div>
+
+	<div class="container">
+		<!-- IMPORT partials/account/menu.tpl -->
+
+		<!-- IF allowCoverPicture -->
+		<!-- IF canEdit -->
+		<div class="controls">
+			<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>
+			<span class="resize"><i class="fa fa-fw fa-4x fa-arrows"></i></span>
+			<span class="remove"><i class="fa fa-fw fa-4x fa-times"></i></span>
+		</div>
+		<div class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
+		<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
+		<!-- ENDIF canEdit -->
+		<!-- ENDIF allowCoverPicture -->
+	</div>
+</div>

package/templates/partials/account/menu.tpl

@@ -0,0 +1,103 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="btn-group account-fab bottom-sheet">
+	<button type="button" class="persona-fab dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<i class="fa fa-ellipsis-v"></i>
+	</button>
+	<ul class="dropdown-menu dropdown-menu-end account-sub-links">
+		<!-- IF loggedIn -->
+		<!-- IF !isSelf -->
+		<!-- IF !banned -->
+		<!-- IF !config.disableChat -->
+		<li class="<!-- IF !hasPrivateChat -->hidden<!-- ENDIF !hasPrivateChat -->">
+			<a class="dropdown-item" component="account/chat" href="#">[[user:chat_with, {username}]]</a>
+		</li>
+		<li>
+			<a class="dropdown-item" component="account/new-chat" href="#">[[user:new_chat_with, {username}]]</a>
+		</li>
+		<!-- ENDIF !config.disableChat -->
+		<li>
+			<a class="dropdown-item" component="account/flag" href="#">[[user:flag-profile]]</a>
+		</li>
+		<li>
+			<a class="dropdown-item" component="account/block" href="#"><!-- IF !../isBlocked -->[[user:block_user]]<!-- ELSE -->[[user:unblock_user]]<!-- END --></a>
+		</li>
+		<li role="separator" class="dropdown-divider"></li>
+		<!-- ENDIF !banned -->
+		<!-- ENDIF !isSelf -->
+		<!-- ENDIF loggedIn -->
+		<li>
+			<a class="dropdown-item" href="{config.relative_path}/user/{userslug}" class="d-inline-block" id="profile">[[user:profile]]</a>
+		</li>
+		<!-- IF canEdit -->
+		<li><a class="dropdown-item" href="{config.relative_path}/user/{userslug}/edit">[[user:edit]]</a></li>
+		<li><a class="dropdown-item" href="{config.relative_path}/user/{userslug}/settings">[[user:settings]]</a></li>
+		<!-- ENDIF canEdit -->
+
+		<!-- IF !isSelf -->
+		{{{ if (canBan || canMute) }}}
+		<li role="separator" class="dropdown-divider"></li>
+		<li class="dropdown-header">[[user:admin_actions_label]]</li>
+		{{{ end }}}
+		{{{ if canBan }}}
+		<li class="<!-- IF banned -->hide<!-- ENDIF banned -->">
+			<a class="dropdown-item" component="account/ban" href="#">[[user:ban_account]]</a>
+		</li>
+		<li class="<!-- IF !banned -->hide<!-- ENDIF !banned -->">
+			<a class="dropdown-item" component="account/unban" href="#">[[user:unban_account]]</a>
+		</li>
+		{{{ end }}}
+		{{{ if canMute }}}
+		<li class="<!-- IF muted -->hide<!-- ENDIF muted -->">
+			<a class="dropdown-item" component="account/mute" href="#">[[user:mute_account]]</a>
+		</li>
+		<li class="<!-- IF !muted -->hide<!-- ENDIF !muted -->">
+			<a class="dropdown-item" component="account/unmute" href="#">[[user:unmute_account]]</a>
+		</li>
+		{{{ end }}}
+		<!-- IF isAdmin -->
+		<li>
+			<a component="account/delete-account" href="#" class="dropdown-item">[[user:delete_account_as_admin]]</a>
+			<a component="account/delete-content" href="#" class="dropdown-item">[[user:delete_content]]</a>
+			<a component="account/delete-all" href="#" class="dropdown-item">[[user:delete_all]]</a>
+		</li>
+		<!-- ENDIF isAdmin -->
+		<!-- ENDIF !isSelf -->
+
+		<li role="separator" class="dropdown-divider"></li>
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/following">[[user:following]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.following}">{counts.following}</span></a></li>
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/followers">[[user:followers]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.followers}">{counts.followers}</span></a></li>
+		<!-- IF canEdit -->
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/blocks">[[user:blocks]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.blocks}">{counts.blocks}</span></a></li>
+		<!-- ENDIF canEdit -->
+		<li role="separator" class="dropdown-divider"></li>
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/topics">[[global:topics]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.topics}">{counts.topics}</span></a></li>
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/posts">[[global:posts]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.posts}">{counts.posts}</span></a></li>
+		<!-- IF !reputation:disabled -->
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/best">[[global:best]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.best}">{counts.best}</span></a></li>
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/controversial">[[global:controversial]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.controversial}">{counts.controversial}</span></a></li>
+		<!-- ENDIF !reputation:disabled -->
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/groups">[[global:header.groups]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.groups}">{counts.groups}</span></a></li>
+
+		<!-- IF canEdit -->
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/categories">[[user:watched_categories]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span></a></li>
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/bookmarks">[[user:bookmarks]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.bookmarks}">{counts.bookmarks}</span></a></li>
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/watched">[[user:watched]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.watched}">{counts.watched}</span></a></li>
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/ignored">[[user:ignored]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.ignored}">{counts.ignored}</span></a></li>
+		<!-- IF !reputation:disabled -->
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/upvoted">[[global:upvoted]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.upvoted}">{counts.upvoted}</span></a></li>
+		<!-- IF !downvote:disabled -->
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/downvoted">[[global:downvoted]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.downvoted}">{counts.downvoted}</span></a></li>
+		<!-- ENDIF !downvote:disabled -->
+		<!-- ENDIF !reputation:disabled -->
+		<li><a class="dropdown-item d-flex justify-content-between align-items-center" href="{config.relative_path}/user/{userslug}/uploads">[[global:uploads]] <span class="badge bg-secondary formatted-number rounded-pill ms-2" title="{counts.uploaded}">{counts.uploaded}</span></a></li>
+		<!-- ENDIF canEdit -->
+
+		{{{each profile_links}}}
+		<!-- IF @first -->
+		<li role="separator" class="dropdown-divider"></li>
+		<!-- ENDIF @first -->
+		<li id="{profile_links.id}" class="plugin-link <!-- IF profile_links.public -->public<!-- ELSE -->private<!-- ENDIF profile_links.public -->"><a class="dropdown-item" href="{config.relative_path}/user/{userslug}/{profile_links.route}"><!-- IF ../icon --><i class="fa fa-fw {profile_links.icon}"></i> <!-- END -->{profile_links.name}</a></li>
+		{{{end}}}
+	</ul>
+</div>

package/templates/partials/breadcrumbs.tpl

@@ -0,0 +1,20 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IF breadcrumbs.length -->
+<ol class="breadcrumb" itemscope="itemscope" itemprop="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
+	{{{each breadcrumbs}}}
+	<li<!-- IF @last --> component="breadcrumb/current"<!-- ENDIF @last --> itemscope="itemscope" itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="breadcrumb-item <!-- IF @last -->active<!-- ENDIF @last -->">
+		<meta itemprop="position" content="{@index}" />
+		{{{ if ./url }}}<a href="{breadcrumbs.url}" itemprop="item">{{{ end }}}
+			<span itemprop="name">
+				{breadcrumbs.text}
+				<!-- IF @last -->
+				<!-- IF !feeds:disableRSS -->
+				<!-- IF rssFeedUrl --><a target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss-square"></i></a><!-- ENDIF rssFeedUrl --><!-- ENDIF !feeds:disableRSS -->
+				<!-- ENDIF @last -->
+			</span>
+		{{{ if ./url }}}</a>{{{ end }}}
+	</li>
+	{{{end}}}
+</ol>
+<!-- ENDIF breadcrumbs.length -->

package/templates/partials/buttons/newTopic.tpl

@@ -0,0 +1,24 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<noscript><div class="dropdown" component="category-selector"></noscript>
+<button component="category/post" for="category-dropdown-check" class="btn btn-primary text-nowrap" id="new_topic" role="button">
+	[[category:new_topic_button]]
+</button>
+<noscript>
+	<input type="checkbox" class="hidden" id="category-dropdown-check" aria-hidden="true">
+	<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+		{{{each categories}}}
+		<li role="presentation" class="category {{{if categories.disabledClass}}}disabled{{{end}}}">
+			<a role="menu-item" href="{config.relative_path}/compose?cid={categories.cid}">{categories.level}
+				<span component="category-markup">
+					<div class="category-item d-inline-block">
+						{buildCategoryIcon(@value, "24px", "rounded-circle")}
+						{categories.name}
+					</div>
+				</span>
+			</a>
+		</li>
+		{{{end}}}
+	</ul>
+</div>
+</noscript>

package/templates/partials/categories/item.tpl

@@ -0,0 +1,62 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<li component="categories/category" data-cid="{../cid}" data-numRecentReplies="1" class="row clearfix category-{../cid}">
+	<meta itemprop="name" content="{../name}">
+
+	<div class="content col-12 <!-- IF config.hideCategoryLastPost -->col-md-10 col-sm-12<!-- ELSE -->col-md-7 col-sm-9<!-- ENDIF config.hideCategoryLastPost -->">
+		<div class="float-start">
+		{buildCategoryIcon(@value, "48px", "rounded-circle")}
+		</div>
+		<h2 class="title">
+			<!-- IMPORT partials/categories/link.tpl -->
+		</h2>
+		<div>
+			<!-- IF ../descriptionParsed -->
+			<div class="description text-muted">
+				{../descriptionParsed}
+			</div>
+			<!-- ENDIF ../descriptionParsed -->
+			<!-- IF !config.hideSubCategories -->
+			{{{ if ../children.length }}}
+			<div class="category-children">
+				{{{ each ../children }}}
+				{{{ if !../isSection }}}
+				<span class="category-children-item">
+					{buildCategoryIcon(@value, "24px", "rounded-circle")}
+					{{{ if ../link }}}
+					<a href="{../link}">{../name}</a>
+					{{{ else }}}
+					<a href="{config.relative_path}/category/{../slug}">{../name}</a>
+					{{{ end }}}
+				</span>
+				{{{ end }}}
+				{{{ end }}}
+			</div>
+			{{{ end }}}
+			<!-- ENDIF !config.hideSubCategories -->
+		</div>
+		<span class="d-block d-sm-none float-end">
+			<!-- IF ../teaser.timestampISO -->
+			<a class="permalink" href="{../teaser.url}">
+				<small class="timeago" title="{../teaser.timestampISO}"></small>
+			</a>
+			<!-- ENDIF ../teaser.timestampISO -->
+		</span>
+	</div>
+
+	<!-- IF !../link -->
+	<div class="col-md-1 d-none d-md-block stats text-muted">
+		<span class="{../unread-class} human-readable-number" title="{../totalTopicCount}">{../totalTopicCount}</span><br />
+		<small>[[global:topics]]</small>
+	</div>
+	<div class="col-md-1 d-none d-md-block stats text-muted">
+		<span class="{../unread-class} human-readable-number" title="{../totalPostCount}">{../totalPostCount}</span><br />
+		<small>[[global:posts]]</small>
+	</div>
+	<!-- IF !config.hideCategoryLastPost -->
+	<div class="col-md-3 col-sm-3 teaser d-none d-sm-block" component="topic/teaser">
+		<!-- IMPORT partials/categories/lastpost.tpl -->
+	</div>
+	<!-- ENDIF !config.hideCategoryLastPost -->
+	<!-- ENDIF !../link -->
+</li>

package/templates/partials/categories/lastpost.tpl

@@ -0,0 +1,28 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="lastpost background-link-container" style="border-color: {../bgColor}">
+	{{{each ./posts}}}
+	<!-- IF @first -->
+	<div component="category/posts">
+		<a class="background-link" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->"></a>
+		<p>
+			<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(posts.user, "24px", true)}</a>
+			<a class="permalink text-muted" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
+				<small class="timeago" title="{../timestampISO}"></small>
+			</a>
+		</p>
+		<div class="post-content">
+			{../content}
+		</div>
+	</div>
+	<!-- ENDIF @first -->
+	{{{end}}}
+
+	<!-- IF !../posts.length -->
+	<div component="category/posts">
+		<div class="post-content">
+			[[category:no_new_posts]]
+		</div>
+	</div>
+	<!-- ENDIF !../posts.length -->
+</div>

package/templates/partials/categories/link.tpl

@@ -0,0 +1,13 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IF ../isSection -->
+{../name}
+<!-- ELSE -->
+<!-- IF ../link -->
+<a href="{../link}" itemprop="url">
+<!-- ELSE -->
+<a href="{config.relative_path}/category/{../slug}" itemprop="url">
+<!-- ENDIF ../link -->
+{../name}
+</a>
+<!-- ENDIF ../isSection -->

package/templates/partials/category/sort.tpl

@@ -0,0 +1,17 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="btn-group bottom-sheet" component="thread/sort">
+	<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
+		<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span>
+		<span class="caret"></span>
+	</button>
+
+	<ul class="dropdown-menu dropdown-menu-end">
+		<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="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="most_posts" data-sort="most_posts"><i class="fa fa-fw"></i> [[topic:most_posts]]</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>
+		<li><a class="dropdown-item" href="#" class="most_views" data-sort="most_views"><i class="fa fa-fw"></i> [[topic:most_views]]</a></li>
+	</ul>
+</div>

package/templates/partials/category/subcategory.tpl

@@ -0,0 +1,20 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+{{{ if children.length }}}
+<div class="subcategory">
+	{{{ if hasMoreSubCategories }}}
+	<div class="mb-2"><!-- IMPORT partials/category-selector.tpl --></div>
+	{{{ else }}}
+	<p>[[category:subcategories]]</p>
+	{{{ end }}}
+
+	<ul component="category/subcategory/container" class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+		{{{each children}}}
+		<!-- IMPORT partials/categories/item.tpl -->
+		{{{end}}}
+	</ul>
+	{{{ if hasMoreSubCategories}}}
+	<button class="btn btn-outline-secondary mb-2" component="category/load-more-subcategories">[[category:x-more-categories, {subCategoriesLeft}]]</button>
+	{{{ end }}}
+</div>
+{{{ end }}}

package/templates/partials/category/tags.tpl

@@ -0,0 +1,5 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+{{{ each tags }}}
+<a href="{config.relative_path}/tags/{topics.tags.value}"><span class="tag-item" data-tag="{topics.tags.value}">{topics.tags.value}</span><span class="tag-topic-count human-readable-number" title="{topics.tags.score}">{topics.tags.score}</span></a>
+{{{ end }}}

package/templates/partials/category/tools.tpl

@@ -0,0 +1,83 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IF showTopicTools -->
+<div class="btn-group thread-tools bottom-sheet">
+	<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread_tools.title]]</span>
+		<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>
+		<span class="caret"></span>
+	</button>
+	<ul class="dropdown-menu dropdown-menu-end">
+		<li>
+			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item">
+				<i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/pin" href="#" class="dropdown-item">
+				<i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/unpin" href="#" class="hidden dropdown-item">
+				<i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]
+			</a>
+		</li>
+
+		<li>
+			<a component="topic/lock" href="#" class="dropdown-item">
+				<i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/unlock" href="#" class="hidden dropdown-item" >
+				<i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]
+			</a>
+		</li>
+
+		<li class="dropdown-divider"></li>
+
+		<li>
+			<a component="topic/move" href="#" class="dropdown-item">
+				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]
+			</a>
+		</li>
+		{{{if template.category}}}
+		<li>
+			<a component="topic/move-all" href="#" class="dropdown-item">
+				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move_all]]
+			</a>
+		</li>
+		{{{end}}}
+		<li>
+			<a component="topic/merge" href="#" class="dropdown-item">
+				<i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.merge]]
+			</a>
+		</li>
+
+		<li class="dropdown-divider"></li>
+
+		<li>
+			<a component="topic/delete" href="#" class="dropdown-item">
+				<i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/restore" href="#" class="hidden dropdown-item">
+				<i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/purge" href="#" class="hidden dropdown-item">
+				<i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]
+			</a>
+		</li>
+
+		{{{each thread_tools}}}
+		<li>
+			<a href="#" class="dropdown-item {thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a>
+		</li>
+		{{{end}}}
+	</ul>
+</div>
+<!-- ENDIF showTopicTools -->

package/templates/partials/category/watch.tpl

@@ -0,0 +1,23 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IF config.loggedIn -->
+<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+
+	<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
+		<span component="category/watching/menu" <!-- IF !../isWatched -->class="hidden"<!-- ENDIF !../isWatched -->><i class="fa fa-fw fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:watching]]</span></span>
+
+		<span component="category/notwatching/menu" <!-- IF !../isNotWatched -->class="hidden"<!-- ENDIF !../isNotWatched -->><i class="fa fa-fw fa-clock-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:not-watching]]</span></span>
+
+		<span component="category/ignoring/menu" <!-- IF !../isIgnored -->class="hidden"<!-- ENDIF !../isIgnored -->><i class="fa fa-fw fa-eye-slash"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:ignoring]]</span></span>
+		<span class="caret"></span>
+	</button>
+
+	<ul class="dropdown-menu dropdown-menu-end">
+		<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i component="category/watching/check" class="fa fa-fw <!-- IF ../isWatched -->fa-check<!-- ENDIF ../isWatched -->"></i><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
+
+		<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i component="category/notwatching/check" class="fa fa-fw <!-- IF ../isNotWatched -->fa-check<!-- ENDIF ../isNotWatched -->"></i><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
+
+		<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i component="category/ignoring/check" class="fa fa-fw <!-- IF ../isIgnored -->fa-check<!-- ENDIF ../isIgnored -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+	</ul>
+</div>
+<!-- ENDIF config.loggedIn -->

package/templates/partials/category-filter-content.tpl

@@ -0,0 +1,31 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
+    {{{ if selectedCategory }}}
+    <span class="category-item">
+        {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
+        <span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedCategory.name}</span>
+    </span>
+    {{{ else }}}
+    <span class="visible-sm-inline visible-md-inline visible-lg-inline">[[unread:all_categories]]</span><span class="visible-xs-inline"><i class="fa fa-fw fa-list"></i></span>{{{ end }}} <span class="caret"></span>
+</button>
+<div component="category-selector-search" class="hidden position-absolute">
+    <input type="text" class="form-control" autocomplete="off">
+</div>
+<ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
+    <li role="presentation" class="category" data-all="all">
+        <a class="dropdown-item" role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
+    </li>
+    {{{each categoryItems}}}
+    <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
+        <a class="dropdown-item" role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
+            <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
+                <div class="category-item d-inline-block">
+                    {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                    {./name}
+                </div>
+            </span>
+        </a>
+    </li>
+    {{{end}}}
+</ul>

package/templates/partials/category-filter-right.tpl

@@ -0,0 +1,5 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div component="category/dropdown" class="btn-group right category-dropdown-container bottom-sheet">
+   <!-- IMPORT partials/category-filter-content.tpl -->
+</div>

package/templates/partials/category-filter.tpl

@@ -0,0 +1,5 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div component="category/dropdown" class="btn-group category-dropdown-container bottom-sheet">
+   <!-- IMPORT partials/category-filter-content.tpl -->
+</div>