nodebb-theme-harmony 1.0.0-beta.9 → 1.0.0-beta.90

package/templates/partials/sidebar/notifications.tpl

@@ -1,25 +1,46 @@
-<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.notifications]]">
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative">
 	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 		<span class="position-relative">
 			<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>
 			<span component="notifications/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 		</span>
-		<span class="nav-text small visible-open fw-semibold">[[global:header.notifications]]</span>
+		<span class="nav-text small visible-open fw-semibold truncate-text">[[global:header.notifications]]</span>
 	</span>
 	<span component="notifications/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
 </a>
 <ul class="notifications-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="notifications/list" class="notification-list list-unstyled">
-			<li class="mb-2 placeholder-wave">
-				<div class="text-sm placeholder col-11">&nbsp;</div>
-				<div class="text-sm placeholder col-5">&nbsp;</div><br />
-				<div class="text-xs placeholder col-3">&nbsp;</div>
+		<ul component="notifications/list" class="list-container notification-list list-unstyled overscroll-behavior-contain ff-base">
+			<li class="mb-2 p-1">
+				<div class="d-flex gap-1 justify-content-between">
+					<div class="d-flex gap-2 flex-grow-1 placeholder-wave">
+						<div class="placeholder" style="width: 32px; height: 32px;"></div>
+						<div class="flex-grow-1">
+							<div class="d-flex flex-column">
+								<div class="text-sm">
+									<span class="placeholder placeholder-sm col-4"></span>
+									<span class="placeholder placeholder-sm col-6"></span>
+									<span class="placeholder placeholder-sm col-7"></span>
+									<span class="placeholder placeholder-sm col-2"></span>
+									<span class="placeholder placeholder-sm col-5"></span>
+								</div>
+								<div class="text-xs">
+									<div class="placeholder placeholder-xs col-6"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div>
+						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+							<i class="unread fa fa-2xs fa-circle text-primary"></i>
+						</button>
+					</div>
+				</div>
 			</li>
 		</ul>
 	</li>
 	<li class="dropdown-divider"></li>
-	<li class="notif-dropdown-link">
+	<li>
 		<div class="d-flex justify-content-center gap-1 flex-wrap">
 			<a role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap text-truncate ff-secondary"><i class="fa fa-check-double"></i> [[notifications:mark_all_read]]</a>
 			<a class="btn btn-sm btn-primary flex-fill text-nowrap text-truncate ff-secondary" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see_all]]</a>

package/templates/partials/sidebar/search.tpl

@@ -1,4 +1,4 @@
-<a component="search/button" id="search-button" href="#" role="button" class="nav-link nav-btn d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" title="[[global:header.search]]">
+<a component="search/button" id="search-button" href="#" role="button" class="nav-link nav-btn d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown">
 	<span>
 		<i class="fa fa-search fa-fw"></i>
 	</span>

package/templates/partials/sidebar/user-menu.tpl

@@ -2,73 +2,82 @@
 	{buildAvatar(user, "20px", true)}
 	<span id="user-header-name" class="nav-text small visible-open fw-semibold">{user.username}</span>
 </label>
-<ul id="user-control-list" component="header/usercontrol" class="user-dropdown dropdown-menu shadow p-1 text-sm" aria-labelledby="user_dropdown">
+<ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" aria-labelledby="user_dropdown">
 	<li>
-		<a class="dropdown-item rounded-1 d-flex align-items-center gap-1" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span></div>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
+			<span component="user/status" class="badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span>
 			<span class="fw-semibold" component="header/username">{user.username}</span>
 		</a>
 	</li>
 	<li role="presentation" class="dropdown-divider"></li>
 	<li><h6 class="dropdown-header text-xs">[[global:status]]</h6></li>
 	<li>
-		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="online">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span></div>
-			<span{{{ if user.online }}} class="fw-semibold"{{{ end }}}> [[global:online]]</span>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.online }}}selected{{{ end }}}" data-status="online">
+			<span component="user/status" class="badge border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span>
+			<span class="flex-1">[[global:online]]</span>
+			<i class="fa-solid fa-check text-muted flex-grow-0"></i>
 		</a>
 	</li>
 	<li>
-		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="away">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span></div>
-			<span{{{ if user.away}}} class="fw-semibold"{{{ end }}}> [[global:away]]</span>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.away }}}selected{{{ end }}}" data-status="away">
+			<span component="user/status" class="badge border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span>
+			<span class="flex-1">[[global:away]]</span>
+			<i class="fa-solid fa-check text-muted flex-grow-0"></i>
 		</a>
 	</li>
 	<li>
-		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="dnd">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span></div>
-			<span{{{ if user.dnd}}} class="fw-semibold"{{{ end }}}> [[global:dnd]]</span>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.dnd }}}selected{{{ end }}}" data-status="dnd">
+			<span component="user/status" class="badge border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span>
+			<span class="flex-1">[[global:dnd]]</span>
+			<i class="fa-solid fa-check text-muted flex-grow-0"></i>
 		</a>
 	</li>
 	<li>
-		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="offline">
-			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span></div>
-			<span{{{ if user.offline}}} class="fw-semibold"{{{ end }}}> [[global:invisible]]</span>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.offline }}}selected{{{ end }}}" data-status="offline">
+			<span component="user/status" class="badge border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span>
+			<span class="flex-1">[[global:invisible]]</span>
+			<i class="fa-solid fa-check text-muted flex-grow-0"></i>
 		</a>
 	</li>
 	<li role="presentation" class="dropdown-divider"></li>
 	<li>
-		<a class="dropdown-item rounded-1" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit">
-			<i class="fa fa-fw fa-edit"></i> <span>[[user:edit-profile]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/user/{user.userslug}/bookmarks">
+			<i class="fa fa-fw fa-bookmark text-muted"></i> <span>[[user:bookmarks]]</span>
 		</a>
 	</li>
 	<li>
-		<a class="dropdown-item rounded-1" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings">
-			<i class="fa fa-fw fa-gear"></i> <span>[[user:settings]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit">
+			<i class="fa fa-fw fa-edit text-muted"></i> <span>[[user:edit-profile]]</span>
+		</a>
+	</li>
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings">
+			<i class="fa fa-fw fa-gear text-muted"></i> <span>[[user:settings]]</span>
 		</a>
 	</li>
 	{{{ if showModMenu }}}
 	<li role="presentation" class="dropdown-divider"></li>
 	<li><h6 class="dropdown-header text-xs">[[pages:moderator-tools]]</h6></li>
 	<li>
-		<a class="dropdown-item rounded-1" href="{relative_path}/flags">
-			<i class="fa fa-fw fa-flag"></i> <span>[[pages:flagged-content]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/flags">
+			<i class="fa fa-fw fa-flag text-muted"></i> <span>[[pages:flagged-content]]</span>
 		</a>
 	</li>
 	<li>
-		<a class="dropdown-item rounded-1" href="{relative_path}/post-queue">
-			<i class="fa fa-fw fa-list-alt"></i> <span>[[pages:post-queue]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue">
+			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:post-queue]]</span>
 		</a>
 	</li>
 	<li>
-		<a class="dropdown-item rounded-1" href="{relative_path}/ip-blacklist">
-			<i class="fa fa-fw fa-ban"></i> <span>[[pages:ip-blacklist]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/ip-blacklist">
+			<i class="fa fa-fw fa-ban text-muted"></i> <span>[[pages:ip-blacklist]]</span>
 		</a>
 	</li>
 	{{{ else }}}
 	{{{ if postQueueEnabled }}}
 	<li>
-		<a class="dropdown-item rounded-1" href="{relative_path}/post-queue">
-			<i class="fa fa-fw fa-list-alt"></i> <span>[[pages:post-queue]]</span>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="{relative_path}/post-queue">
+			<i class="fa fa-fw fa-list-alt text-muted"></i> <span>[[pages:post-queue]]</span>
 		</a>
 	</li>
 	{{{ end }}}
@@ -79,8 +88,8 @@
 		<form method="post" action="{relative_path}/logout">
 			<input type="hidden" name="_csrf" value="{config.csrf_token}">
 			<input type="hidden" name="noscript" value="true">
-			<button type="submit" class="dropdown-item rounded-1">
-				<i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span>
+			<button type="submit" class="dropdown-item rounded-1 d-flex align-items-center gap-2">
+				<i class="fa fa-fw fa-sign-out text-muted"></i><span>[[global:logout]]</span>
 			</button>
 		</form>
 	</li>

package/templates/partials/sidebar-left.tpl

@@ -1,9 +1,9 @@
-<nav class="{{{ if config.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-md-flex flex-column justify-content-between sticky-top ff-secondary">
+<nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-lg-flex flex-column justify-content-between sticky-top">
 	<ul id="main-nav" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
 		{{{ each navigation }}}
-		<!-- IF function.displayMenuItem, @index -->
+		{{{ if displayMenuItem(@root, @index) }}}
 		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-			<a class="nav-link nav-btn navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+			<a class="nav-link nav-btn navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if ./dropdown }}}dropdown-toggle{{{ end }}}"
 			{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
 				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 					<span class="position-relative">
@@ -12,20 +12,20 @@
 						<span component="navigation/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						{{{ end }}}
 					</span>
-					{{{ if navigation.text }}}
-					<span class="nav-text small visible-open fw-semibold text-truncate">{navigation.text}</span>
+					{{{ if ./text }}}
+					<span class="nav-text small visible-open fw-semibold text-truncate">{./text}</span>
 					{{{ end }}}
 				</span>
 				<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 			</a>
-			{{{ if navigation.dropdown }}}
-			<ul class="dropdown-menu shadow">
-				{navigation.dropdownContent}
+			{{{ if ./dropdown }}}
+			<ul class="dropdown-menu p-1 shadow">
+				{./dropdownContent}
 			</ul>
 			{{{ end }}}
 		</li>
-		<!-- ENDIF function.displayMenuItem -->
-		{{{end}}}
+		{{{ end }}}
+		{{{ end }}}
 	</ul>
 	<div class="w-100">
 		{{{ if !config.disableCustomUserSkins }}}
@@ -33,7 +33,7 @@
 		{{{ end }}}
 
 		<div class="sidebar-toggle m-2 d-none d-lg-block">
-			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap">
+			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap" title="[[harmony:expand]]">
 				<i class="fa fa-fw fa-angles-right"></i>
 				<i class="fa fa-fw fa-angles-left"></i>
 				<span class="nav-text visible-open fw-semibold small lh-1">[[harmony:collapse]]</span>

package/templates/partials/sidebar-right.tpl

@@ -1,4 +1,4 @@
-<nav class="{{{ if config.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-md-flex flex-column sticky-top ff-secondary">
+<nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-lg-flex flex-column sticky-top">
 	{{{ if config.loggedIn }}}
 	<ul id="logged-in-menu" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
 	<!-- IMPORT partials/sidebar/logged-in-menu.tpl -->
@@ -9,8 +9,6 @@
 	</ul>
 	{{{ end }}}
 
-	<!-- IMPORT partials/topic/navigator.tpl -->
-
 	<div class="visible-open small text-secondary mt-auto" data-widget-area="sidebar-footer">
 		{{{each widgets.sidebar-footer}}}
 		{{./html}}

package/templates/partials/skin-switcher.tpl

@@ -1,5 +1,5 @@
-<div class="dropend m-2" component="skinSwitcher">
-	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn position-relative" title="[[harmony:skins]]">
+<div class="dropend m-2" component="skinSwitcher" title="[[harmony:skins]]">
+	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn position-relative">
 		<span class="justify-content-between w-100">
 			<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
 				<span>
@@ -10,7 +10,7 @@
 		</span>
 	</a>
 
-	<ul class="dropdown-menu overflow-auto">
+	<ul class="dropdown-menu p-1 text-sm overflow-auto">
 		<div class="d-flex px-2">
 			<div>
 				<li class="dropdown-header">Light</li>

package/templates/partials/tags/filter-dropdown-content.tpl

@@ -0,0 +1,31 @@
+<button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
+    {{{ if selectedTag }}}
+    <span class="d-inline-flex align-items-center gap-1">
+        <i class="fa fa-fw fa-tags link-primary"></i>
+        <span class="visible-md-inline visible-lg-inline fw-semibold">{selectedTag.label}</span>
+    </span>
+    {{{ else }}}
+    <i class="fa fa-fw fa-tags link-primary"></i>
+    <span class="visible-md-inline visible-lg-inline fw-semibold">[[tags:all-tags]]</span>
+    {{{ end }}}
+</button>
+<div component="tag/filter/search" class="hidden position-absolute top-0">
+    <input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
+</div>
+<ul component="tag/filter/list" class="dropdown-menu p-1 text-sm overflow-auto" role="menu" style="max-height: 500px;">
+    <li role="presentation" data-tag="">
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#"><span class="flex-1">[[tags:all-tags]]</span><i component="tag/select/icon" class="fa fa-fw fa-check {{{if selectedTag }}}invisible{{{ end }}}"></i></a>
+    </li>
+    {{{ each tagItems }}}
+    <li role="presentation" data-tag="{./valueEscaped}">
+        <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
+            <span component="tag-markup" class="flex-1">
+                <div class="d-inline-flex align-items-center gap-1">
+                    {./valueEscaped}
+                </div>
+            </span>
+            <i component="tag/select/icon" class="fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
+        </a>
+    </li>
+    {{{ end }}}
+</ul>

package/templates/partials/tags_list.tpl

@@ -1,6 +1,6 @@
 {{{each tags}}}
-<h5 class="tag-container fw-bold d-flex">
-	<a class="text-truncate" href="{config.relative_path}/tags/{tags.valueEncoded}" data-tag="{tags.valueEscaped}"><span class="tag-item text-muted text-uppercase text-nowrap tag-class-{tags.class} me-2" data-tag="{tags.valueEscaped}">{tags.valueEscaped}</span></a>
-	<span class="tag-topic-count text-primary text-nowrap human-readable-number" title="{tags.score}">{tags.score}</span>
-</h5>
+<a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./valueEscaped}" class="btn-ghost flex-column gap-0 align-items-start justify-content-start text-truncate p-2 ff-base">
+	<div class="fw-semibold text-nowrap tag-item w-100 text-truncate">{./valueEscaped}</div>
+	<div class="text-xs text-muted text-nowrap tag-topic-count">[[global:x-topics, {./score}]]</div>
+</a>
 {{{end}}}

package/templates/partials/topic/browsing-users.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- This partial intentionally left blank; overwritten by nodebb-plugin-browsing-users -->

package/templates/partials/topic/event.tpl

@@ -2,7 +2,7 @@
 	<div class="timeline-badge">
 		<i class="fa {{{ if ./icon }}}{./icon}{{{ else }}}fa-circle{{{ end }}} small"></i>
 	</div>
-	<span class="timeline-text small">
+	<span class="timeline-text small d-flex align-items-center gap-1 flex-wrap">
 		{./text}
 	</span>
 	{{{ if privileges.isAdminOrMod }}}

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

@@ -1,14 +1,10 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="clearfix">
-	<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, "24px", true, "", "user/picture")} {post.user.username}
+<div class="d-flex gap-2 mb-2 justify-content-between align-items-center flex-nowrap">
+	<div class="icon text-truncate">
+		<a href="{{{ if post.user.userslug }}}{config.relative_path}/user/{post.user.userslug}{{{else }}}#{{{ end }}}">
+			{buildAvatar(post.user, "24px", true)} {post.user.username}
 		</a>
 	</div>
-	<small class="float-end">
-		<span class="timeago" title="{post.timestampISO}"></span>
-	</small>
+	<span class="timeago text-nowrap text-sm" title="{post.timestampISO}"></span>
 </div>
 
 <div>{post.content}</div>

package/templates/partials/topic/navigator-mobile.tpl

@@ -0,0 +1,62 @@
+<div class="d-flex w-100">
+	<div class="pagination-block text-bg-light m-2 rounded-1 border border-gray-300 w-100" style="height:30px;">
+		<div class="position-relative">
+			<div class="progress-bar rounded-1 bg-info d-block position-absolute" style="height:28px;"></div>
+		</div>
+		<div class="wrapper dropup-center d-flex align-items-center justify-content-between w-100 h-100" style="padding: 5px 0px;">
+			<div class="d-flex">
+				<div class="lh-1 px-2">
+					<i class="fa fa-angles-left pointer fa-fw pagetop fs-5" style="z-index: 1;"></i>
+				</div>
+				{{{ if config.usePagination }}}
+				<div class="lh-1 px-2">
+					<i class="fa fa-angle-left pointer fa-fw pageprev fs-5" style="z-index: 1;"></i>
+				</div>
+				{{{ end }}}
+			</div>
+
+			<a href="#" class="text-reset dropdown-toggle d-inline-block px-3 text-decoration-none" data-bs-toggle="dropdown">
+				<span class="d-inline-flex gap-2 align-items-center pagination-text position-relative fw-bold"></span>
+			</a>
+
+			<div class="d-flex">
+				{{{ if config.usePagination }}}
+				<div class="lh-1 px-2">
+					<i class="fa fa-angle-right pointer fa-fw pagenext fs-5" style="z-index: 1;"></i>
+				</div>
+				{{{ end }}}
+				<div class="lh-1 px-2">
+					<i class="fa fa-angles-right pointer fa-fw pagebottom fs-5" style="z-index: 1;"></i>
+				</div>
+			</div>
+
+			<ul class="dropdown-menu p-0" role="menu" style="width: 100%;">
+				<li class="p-3">
+					<div class="row">
+						<div class="col-8 post-content overflow-hidden mb-3" style="height: 350px;"></div>
+						<div class="col-4 ps-0 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 border-gray-200" style="height: 300px;">
+									<div class="scroller-thumb position-relative text-nowrap" style="height: 40px;">
+										<span class="thumb-text text-sm fw-bold user-select-none position-relative pe-2" style="top: -15px;"></span>
+										<div class="rounded-2 scroller-thumb-icon bg-primary d-inline-block position-relative" style="width: 9px; height:40px;"></div>
+									</div>
+								</div>
+								<span class="pointer pagebottom">[[topic:last-post]] <i class="fa fa-angle-double-down"></i></span>
+							</div>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-6">
+							<button id="myNextPostBtn" class="btn btn-outline-secondary form-control text-truncate" disabled>[[topic:go-to-my-next-post]]</button>
+						</div>
+						<div class="col-6">
+							<input type="number" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
+						</div>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>

package/templates/partials/topic/navigator.tpl

@@ -1,20 +1,24 @@
-<div class="d-sm-flex flex-column flex-grow-1 align-items-center mb-2 mx-2 mt-auto" component="topic/navigator">
-	<a href="#" class="nav-link border-0 p-2" data-action="toTop"><i class="fa fa-fw fa-angles-up"></i></a>
-	<a href="#" class="nav-link border-0 p-2" data-action="scrollUp"><i class="fa fa-fw fa-angle-up"></i></a>
-	<div class="track d-inline-block flex-grow-1 position-relative">
-		<div class="unread d-inline-block position-absolute">
-			<div class="visible-open meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold">
-				<a href="{url}"></a>
-			</div>
-		</div>
-		<div class="handle d-inline-block position-absolute">
-			<div class="knob d-inline-block rounded-circle translate-middle"></div>
-			<div class="visible-open meta small position-absolute text-nowrap fw-semibold">
-				<p class="index text-body mb-0"></p>
-				<p class="timestamp text-secondary timeago mb-0"></p>
+<div class="pagination-block d-none d-lg-block flex-1 mb-2">
+	<div class="ps-1 ps-md-0 d-inline-block sticky-top" style="top:6rem;z-index:1;">
+		<div class="scroller-content d-flex gap-2 flex-column align-items-start">
+			<div class="pointer pagetop btn-ghost-sm d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-up"></i></div>
+			<div class="scroller-container position-relative">
+				<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
+					<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
+					<div>
+						<p class="small thumb-text d-none d-md-inline-block ff-secondary fw-semibold user-select-none mb-0"></p>
+						<p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0 user-select-none"></p>
+					</div>
+				</div>
+
+				<div class="unread d-inline-block position-absolute bottom-0">
+					<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold ms-2">
+						<a class="text-decoration-none" href="{url}"></a>
+					</div>
+				</div>
 			</div>
+			<div class="pointer pagebottom btn-ghost-sm d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-down"></i></div>
 		</div>
 	</div>
-	<a href="#" class="nav-link border-0 p-2" data-action="scrollDown"><i class="fa fa-fw fa-angle-down"></i></a>
-	<a href="#" class="nav-link border-0 p-2" data-action="toBottom"><i class="fa fa-fw fa-angles-down"></i></a>
-</div>
+</div>
+

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

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <small data-editor="{editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by, {editor.username}]] <span class="timeago" title="{editedISO}"></span></small>