@okjavis/nodebb-theme-javis 3.0.2 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "3.0.2",
+  "version": "3.0.5",
   "description": "Modern, premium NodeBB theme for JAVIS Community - Extends Harmony with custom styling",
   "main": "theme.js",
   "scripts": {

package/plugin.json

@@ -22,7 +22,7 @@
   },
   "templates": "templates",
   "screenshot": "screenshot.png",
-  "version": "1.5.0",
+  "version": "3.0.3",
   "nbbpm": {
     "compatibility": "^4.0.0"
   }

package/scss/_base.scss

@@ -30,8 +30,13 @@ nav[component="sidebar/left"] {
 
 // Sidebar toggle link padding
 .sidebar-toggle {
+  position: relative;
+  z-index: 10;
+
   [component="sidebar/toggle"] {
     padding: $jv-space-4 $jv-space-5 !important; // 16px vertical, 20px horizontal
+    pointer-events: auto !important;
+    cursor: pointer !important;
   }
 }
 

package/scss/_feed.scss

@@ -58,11 +58,8 @@
     display: none !important;
   }
 
-  // Hide the controls row (category dropdown, options)
-  // The composer prompt card replaces this functionality
-  > .row > div > .d-flex.justify-content-between.py-2.mb-2 {
-    display: none !important;
-  }
+  // The controls row is now visible but the new_topic button is hidden
+  // JS injects the composer prompt card before this row
 }
 
 // ===========================================================
@@ -74,7 +71,7 @@
   border-radius: $jv-radius-lg;
   padding: $jv-space-4 $jv-space-6; // 16px top/bottom, 24px left/right
   margin-top: $jv-space-4; // Align with trending tags padding-top
-  margin-bottom: $jv-space-4;
+  margin-bottom: $jv-space-2; // Reduced bottom margin for tighter spacing
   box-shadow: $jv-shadow-sm;
   transition: box-shadow $jv-transition-fast, border-color $jv-transition-fast;
 
@@ -486,7 +483,7 @@
   .content[component="post/content"] {
     font-size: 15px !important; // Slightly larger for better readability
     line-height: 1.6 !important;
-    color: $jv-text-muted;
+    color: #000000 !important; // Black text for feed body copy
     margin-top: $jv-space-3; // Better spacing from meta
 
     // Truncation styles (from plugin)
@@ -1001,3 +998,140 @@ ul.categories-list {
     }
   }
 }
+
+// ===========================================================
+// FEED CATEGORY FILTER - LinkedIn Style
+// Minimal text-based dropdown like "Sort by: Top"
+// ===========================================================
+
+// Ultra-specific override to remove pill button styling
+.feed .feed-category-filter .btn-group .btn.btn-ghost.btn-sm.dropdown-toggle,
+.feed .feed-category-filter .category-dropdown-container .btn.btn-ghost.btn-sm,
+.feed .feed-category-filter button.btn.btn-ghost.btn-sm {
+  border: none !important;
+  border-width: 0 !important;
+  border-color: transparent !important;
+  border-radius: 4px !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.feed-category-filter {
+  .category-dropdown-container,
+  [component="category/dropdown"] {
+    // Override the btn-group styling
+    &.btn-group {
+      border: none !important;
+      box-shadow: none !important;
+    }
+
+    // Target the specific button with all its classes
+    .dropdown-toggle,
+    .btn.btn-ghost.btn-sm.dropdown-toggle,
+    button.dropdown-toggle {
+      // LinkedIn style - minimal, text-based, NO border
+      padding: 4px 8px !important;
+      font-size: 12px !important;
+      font-weight: 400 !important;
+      color: $jv-text-muted !important;
+      background: transparent !important;
+      background-color: transparent !important;
+      border: none !important;
+      border-width: 0 !important;
+      border-color: transparent !important;
+      box-shadow: none !important;
+      border-radius: 4px !important;
+      min-width: auto !important;
+      gap: 4px !important;
+
+      // Hide the category icon, show only name
+      .category-item {
+        gap: 4px !important;
+
+        // Hide category icon on compact view
+        .rounded-circle,
+        [component="category/icon"],
+        span[style*="background"] {
+          display: none !important;
+        }
+
+        // Show category name - smaller text
+        span.d-none.d-md-inline,
+        .fw-semibold {
+          display: inline !important;
+          font-size: 12px !important;
+          font-weight: 600 !important;
+          color: $jv-text-main !important;
+        }
+      }
+
+      // "All Categories" state
+      > i.fa-list {
+        font-size: 12px !important;
+        color: $jv-text-muted !important;
+      }
+
+      // Show "All Categories" text
+      > span.d-none.d-md-inline,
+      > .fw-semibold {
+        display: inline !important;
+        font-size: 12px !important;
+        font-weight: 600 !important;
+        color: $jv-text-main !important;
+      }
+
+      // Dropdown arrow - smaller
+      &::after {
+        font-size: 8px !important;
+        margin-left: 4px !important;
+        color: $jv-text-muted !important;
+        border-top-width: 4px !important;
+        border-right-width: 4px !important;
+        border-left-width: 4px !important;
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.04) !important;
+        background-color: rgba(0, 0, 0, 0.04) !important;
+        color: $jv-text-main !important;
+        border: none !important;
+        box-shadow: none !important;
+      }
+
+      &:focus,
+      &:active {
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        outline: none !important;
+      }
+    }
+
+    // Dropdown menu styling
+    .dropdown-menu {
+      min-width: 180px;
+      max-width: 240px;
+      border-radius: $jv-radius-md !important;
+      border: 1px solid $jv-border-subtle !important;
+      box-shadow: $jv-shadow-card !important;
+      padding: $jv-space-1 !important;
+      margin-top: 4px !important;
+
+      .category-dropdown-menu {
+        max-height: 280px;
+        overflow-y: auto;
+      }
+
+      .dropdown-item {
+        font-size: 13px !important;
+        padding: 6px 12px !important;
+        border-radius: $jv-radius-xs !important;
+        color: $jv-text-main !important;
+
+        &:hover {
+          background: $jv-hover-bg !important;
+        }
+      }
+    }
+  }
+}

package/scss/_sidebar-user.scss

@@ -137,6 +137,11 @@
   margin-top: auto;
 }
 
+// Ensure the dropup container has proper positioning context
+.sidebar-user-section .dropup {
+  position: relative;
+}
+
 // User dropdown menu styling
 .sidebar-user-section .dropdown-menu {
   min-width: 220px;
@@ -145,6 +150,18 @@
   border: 1px solid $jv-border-subtle;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
 
+  // Fix the shifting issue - disable Popper transforms and use fixed position
+  // Position dropdown to open upward from the bottom of the trigger
+  transform: none !important;
+  inset: auto auto 100% 0 !important;  // bottom: 100%, left: 0
+  margin-bottom: $jv-space-2;
+  top: auto !important;
+  bottom: 100% !important;
+  left: 0 !important;
+
+  // Remove animation that could cause visual shifting
+  animation: none;
+
   .dropdown-item {
     padding: $jv-space-2 $jv-space-4;
     font-size: $jv-font-size-sm;

package/scss/_topic.scss

@@ -32,9 +32,32 @@ body.template-topic {
   [component="post/header"].fs-3 {
     margin-bottom: 0;
     display: flex;
-    align-items: flex-start;
+    align-items: center; // Center align items vertically
     gap: $jv-space-3;
 
+    // Back button styling
+    .topic-back-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border-radius: $jv-radius-sm;
+      color: $jv-text-muted;
+      text-decoration: none;
+      transition: background-color $jv-transition-fast, color $jv-transition-fast;
+      flex-shrink: 0;
+
+      &:hover {
+        background: $jv-hover-bg;
+        color: $jv-text-main;
+      }
+
+      i {
+        font-size: 18px;
+      }
+    }
+
     h1,
     [component="topic/title"],
     .topic-title {
@@ -142,33 +165,71 @@ body.template-topic {
         display: none !important;
       }
 
-      // Card styling on the parent container that includes avatar
+      // Card styling - vertical stack layout (like feed page)
       .post-container-parent {
         background: $jv-surface;
         border-radius: $jv-radius-md;
         border: 1px solid $jv-border-subtle;
-        padding: $jv-space-3;
-        gap: $jv-space-2 !important; // Tighter gap
-
-        // Reduce avatar size from 48px to 36px
-        > .bg-body {
-          // Align avatar container with the post header (username/timestamp line)
-          align-self: flex-start;
-          margin-top: 2px; // Fine-tune to vertically center with text
-
-          [component="user/picture"],
-          .avatar {
-            width: 36px !important;
-            height: 36px !important;
-            font-size: $jv-font-size-sm !important;
-            line-height: 36px !important;
+        padding: $jv-space-4;
+        gap: $jv-space-3 !important;
+      }
+
+      // Author row - avatar + username + timestamp inline
+      .post-author-row {
+        display: flex;
+        align-items: center;
+        gap: $jv-space-2;
+
+        // Avatar size 32px
+        [component="user/picture"],
+        .avatar {
+          width: 32px !important;
+          height: 32px !important;
+          min-width: 32px !important;
+          min-height: 32px !important;
+          font-size: $jv-font-size-sm !important;
+          line-height: 32px !important;
+          border-radius: 50% !important;
+        }
+
+        // Author name
+        .post-author-name {
+          font-weight: 600;
+          font-size: $jv-font-size-sm;
+          color: $jv-text-main;
+          text-decoration: none;
+
+          &:hover {
+            color: $jv-primary;
           }
         }
-      }
 
-      // Align the post header row with avatar (extends base .post-header)
-      .post-header {
-        min-height: 36px; // Match avatar height for alignment
+        // Timestamp
+        .post-timestamp {
+          font-size: $jv-font-size-xs;
+          color: $jv-text-soft;
+
+          &::before {
+            content: "• ";
+            margin-right: 2px;
+          }
+        }
+
+        // Edit indicator
+        .edit-icon {
+          font-size: $jv-font-size-xs;
+        }
+
+        // Post index
+        .post-index {
+          font-size: $jv-font-size-xs;
+          color: $jv-text-soft;
+          opacity: 0.6;
+        }
+
+        .bookmarked {
+          color: $jv-warning;
+        }
       }
 
       .post-container {
@@ -185,7 +246,7 @@ body.template-topic {
   }
 
   // ===========================================================
-  // POST HEADER – Avatar, Username, Time
+  // POST HEADER (legacy support for any remaining old structure)
   // ===========================================================
   .post-header {
     display: flex;
@@ -382,10 +443,11 @@ body.template-topic {
   // ===========================================================
   [component="post/footer"],
   .post-footer {
-    padding-top: 0 !important;
+    padding-top: $jv-space-3 !important;
     padding-bottom: 0 !important;
-    margin-top: $jv-space-4;
+    margin-top: $jv-space-3;
     border-top: 1px solid $jv-border-subtle;
+    border-bottom: none !important; // Remove duplicate line from HTML class
   }
 
   [component="post/actions"] {
@@ -569,6 +631,9 @@ body.template-topic {
     align-self: flex-start;
     z-index: 100;
     pointer-events: auto;
+    // Match the top padding of posts list (py-3 = 1rem) + first post pt-4 (1.5rem)
+    // to align sidebar with post card
+    margin-top: calc(1rem + 1.5rem);
   }
 
   .topic-sidebar {
@@ -648,17 +713,60 @@ body.template-topic {
         }
       }
 
-      .bottom-sheet {
+      // Each dropdown container gets stacking context
+      .bottom-sheet,
+      .thread-tools {
         width: 100%;
-        .dropdown-menu { width: 100%; }
+        position: relative;
+        z-index: 1;
+
+        // When dropdown is open, raise z-index
+        &.show,
+        &:focus-within {
+          z-index: 100;
+        }
+
+        .dropdown-menu {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          width: 100%;
+          min-width: 200px;
+          max-width: 280px;
+          z-index: 1050;
+          margin-top: $jv-space-1;
+          padding: $jv-space-2;
+          background: $jv-surface;
+          border: 1px solid $jv-border-subtle;
+          border-radius: $jv-radius-md;
+          box-shadow: $jv-shadow-lg;
+
+          // Dropdown items
+          .dropdown-item {
+            padding: $jv-space-2 $jv-space-3;
+            border-radius: $jv-radius-sm;
+            font-size: $jv-font-size-sm;
+            white-space: normal;
+
+            .help-text {
+              font-size: $jv-font-size-xs;
+              line-height: 1.3;
+              margin-top: 2px;
+            }
+          }
+        }
       }
 
-      .thread-tools {
-        .dropdown-menu { min-width: 100%; }
+      // Ensure pagination block stays below dropdowns
+      & + .pagination-block {
+        position: relative;
+        z-index: 0;
       }
     }
 
     .pagination-block {
+      position: relative;
+      z-index: 0;
       margin-top: $jv-space-4;
       padding-top: $jv-space-4;
       border-top: 1px solid $jv-border-subtle;
@@ -730,6 +838,22 @@ body.template-topic {
     margin-top: $jv-space-6;
     border: 1px solid $jv-border-subtle;
 
+    // Reduce avatar size to 32px (matching post author avatars)
+    [component="user/picture"],
+    .avatar {
+      width: 32px !important;
+      height: 32px !important;
+      min-width: 32px !important;
+      min-height: 32px !important;
+      font-size: $jv-font-size-sm !important;
+      line-height: 32px !important;
+    }
+
+    // Hide user status indicator (green dot)
+    [component="user/status"] {
+      display: none !important;
+    }
+
     .quick-reply-header {
       margin-bottom: $jv-space-4;
       font-weight: 600;

package/static/lib/theme.js

@@ -203,7 +203,7 @@
 
   /**
    * Initialize sidebar toggle click handler
-   * Ensures the sidebar can be toggled and saves user preference
+   * Custom handler needed because Harmony's handler targets .sidebar but JAVIS uses .sidebar-left
    */
   function initSidebarToggle() {
     var $toggle = $('[component="sidebar/toggle"]');
@@ -431,7 +431,14 @@
     }
 
     // Find the existing controls row (contains New Topic button)
-    var $controlsRow = $('.feed .d-flex.justify-content-between.py-2.mb-2').first();
+    // Try mb-0, mb-1 and mb-2 for compatibility
+    var $controlsRow = $('.feed .d-flex.justify-content-between.py-2.mb-0').first();
+    if (!$controlsRow.length) {
+      $controlsRow = $('.feed .d-flex.justify-content-between.py-2.mb-1').first();
+    }
+    if (!$controlsRow.length) {
+      $controlsRow = $('.feed .d-flex.justify-content-between.py-2.mb-2').first();
+    }
     if (!$controlsRow.length) {
       return;
     }

package/templates/feed.tpl

@@ -26,39 +26,16 @@
 		<div class="col-lg-6 col-sm-12 ms-auto">
 		{{{ end }}}
 
-			<div class="d-flex justify-content-between py-2 mb-2 gap-1">
+			<!-- Controls row for composer prompt injection -->
+			<div class="d-flex justify-content-between py-2 mb-0 gap-1">
 				{{{ if canPost }}}
-				<button id="new_topic" class="btn btn-primary btn-sm">[[category:new-topic-button]]</button>
+				<button id="new_topic" class="btn btn-primary btn-sm d-none">[[category:new-topic-button]]</button>
 				{{{ end }}}
-				{{{ if (!loggedIn && !canPost) }}}
-				<a href="{config.relative_path}/login" class="btn btn-primary btn-sm">[[category:guest-login-post]]</a>
-				{{{ end }}}
-
-				<div class="d-flex justify-content-end gap-1">
-					<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
+			</div>
 
-					<div id="options-dropdown" class="btn-group dropdown dropdown-right bottom-sheet">
-						<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center gap-2 ff-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-							<i class="fa fa-fw fa-gear text-primary"></i>
-						</button>
-						<ul class="dropdown-menu p-1 text-sm" role="menu">
-							<li class="py-1 px-3">
-								<div class="form-check form-switch d-flex px-0 align-items-center justify-content-between gap-3">
-									<label class="form-check-label text-nowrap" for="showAllPosts">[[feed:show-all-posts]]</label>
-									<input class="form-check-input float-none m-0 pointer" type="checkbox" role="switch" id="showAllPosts" {{{ if showAllPosts }}}checked{{{ end }}}>
-								</div>
-							</li>
-							{{{ if loggedIn }}}
-							<li class="py-1 px-3">
-								<div class="form-check form-switch d-flex px-0 align-items-center justify-content-between gap-3">
-									<label class="form-check-label text-nowrap" for="showFollowedUsers">[[feed:followed-users-only]]</label>
-									<input class="form-check-input float-none m-0 pointer" type="checkbox" role="switch" id="showFollowedUsers" {{{ if showFollowed }}}checked{{{ end }}}>
-								</div>
-							</li>
-							{{{ end }}}
-						</ul>
-					</div>
-				</div>
+			<!-- Category filter - LinkedIn style, right aligned, tight spacing -->
+			<div class="d-flex justify-content-end py-1 feed-category-filter">
+				<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
 			</div>
 
 			{{{ if !posts.length  }}}
@@ -70,25 +47,23 @@
 				<li component="post" class="shadow-sm mb-3 rounded-2 border posts-list-item  {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
 
 					<!-- 1. CONTENT (first) -->
-					<div class="d-flex gap-2 p-3">
-						<div class="d-none d-lg-block">
-							<a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "40px", true, "not-responsive")}</a>
-						</div>
-						<div class="post-body d-flex flex-column gap-2 flex-grow-1 hover-parent" style="min-width: 0px;">
+					<div class="p-3 feed-content-section">
+						<div class="post-body d-flex flex-column gap-2 flex-grow-1" style="min-width: 0px;">
+							<!-- Topic title (first) -->
 							{{{ if ./isMainPost }}}
 							<a class="lh-1 topic-title fw-semibold fs-5 text-reset text-break d-block" href="{config.relative_path}/topic/{./topic.slug}">
 							{./topic.title}
 							</a>
 							{{{ end }}}
 
-							<div class="d-flex gap-1 post-info text-sm align-items-center">
-								<div class="post-author d-flex align-items-center gap-1">
-									<a class="d-inline d-lg-none lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
-									<a class="lh-normal fw-semibold text-nowrap" href="{config.relative_path}/user/{./user.userslug}">{./user.displayname}</a>
-								</div>
+							<!-- Author info row (second) -->
+							<div class="d-flex gap-2 post-info text-sm align-items-center">
+								<a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true, "not-responsive")}</a>
+								<a class="lh-normal fw-semibold text-nowrap" href="{config.relative_path}/user/{./user.userslug}">{./user.displayname}</a>
 								{{{ if !./isMainPost}}}{./repliedString}{{{ else }}}<span class="timeago text-muted lh-normal" title="{./timestampISO}"></span>{{{ end}}}
 							</div>
 
+							<!-- Post content text (third) -->
 							<div component="post/content" class="content text-sm text-break position-relative truncate-post-content">
 								<a href="{config.relative_path}/post/{./pid}" class="stretched-link"></a>
 								{./content}
@@ -101,7 +76,7 @@
 
 					<!-- 2. IMAGE (second) -->
 					{{{ if (showThumbs && ./topic.thumbs.length)}}}
-					<div class="p-1 position-relative">
+					<div class="p-1 position-relative feed-image-section">
 						<div class="overflow-hidden rounded-1" style="max-height: 300px;">
 							<a href="{config.relative_path}/topic/{./topic.slug}">
 								<img class="w-100" src="{./topic.thumbs.0.url}">

package/templates/partials/sidebar-left.tpl

@@ -3,9 +3,9 @@
 	<div class="javis-sidebar-logo">
 		<a href="{relative_path}/" class="javis-logo-link" title="JAVIS Community">
 			<!-- Icon logo (shown when collapsed) -->
-			<img src="{relative_path}/plugins/@okjavis/nodebb-theme-javis/static/images/logo-icon.png" alt="JAVIS" class="javis-logo-icon visible-closed" />
+			<img src="{relative_path}/plugins/nodebb-theme-javis/static/images/logo-icon.png" alt="JAVIS" class="javis-logo-icon visible-closed" />
 			<!-- Full logo (shown when expanded) -->
-			<img src="{relative_path}/plugins/@okjavis/nodebb-theme-javis/static/images/logo-full.png" alt="JAVIS Community" class="javis-logo-full visible-open" />
+			<img src="{relative_path}/plugins/nodebb-theme-javis/static/images/logo-full.png" alt="JAVIS Community" class="javis-logo-full visible-open" />
 		</a>
 	</div>
 
@@ -38,7 +38,7 @@
 		<!-- User Profile Section (only for logged-in users) -->
 		{{{ if config.loggedIn }}}
 		<div class="sidebar-user-section mx-2 mb-2">
-			<div class="nav-item dropend usermenu">
+			<div class="nav-item dropup usermenu">
 				<a component="header/avatar" id="sidebar_user_dropdown" href="#" role="button"
 				   class="nav-link d-flex gap-2 align-items-center text-truncate sidebar-user-trigger"
 				   data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"

package/templates/partials/topic/post.tpl

@@ -0,0 +1,102 @@
+{{{ if (!./index && widgets.mainpost-header.length) }}}
+<div data-widget-area="mainpost-header">
+	{{{ each widgets.mainpost-header }}}
+	{widgets.mainpost-header.html}
+	{{{ end }}}
+</div>
+{{{ end }}}
+{{{ if (./parent && !hideParent) }}}
+<!-- IMPORT partials/topic/post-parent.tpl -->
+{{{ end }}}
+<div class="d-flex flex-column gap-2 post-container-parent">
+	<!-- Author row: Avatar + Username + Timestamp -->
+	<div class="d-flex align-items-center gap-2 post-author-row">
+		<a class="d-inline-block position-relative text-decoration-none flex-shrink-0" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" aria-label="[[aria:profile-page-for, {./user.displayname}]]">
+			{buildAvatar(posts.user, "32px", true, "", "user/picture")}
+		</a>
+		<div class="d-flex flex-wrap align-items-center gap-1" itemprop="author" itemscope itemtype="https://schema.org/Person">
+			<meta itemprop="name" content="{./user.displayname}">
+			{{{ if ./user.userslug }}}<meta itemprop="url" content="{config.relative_path}/user/{./user.userslug}">{{{ end }}}
+			<a class="fw-semibold text-nowrap post-author-name" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
+			<span class="text-muted post-timestamp">{generateWrote(@value, config.timeagoCutoff)}</span>
+			<i component="post/edit-indicator" class="fa fa-edit text-muted{{{ if privileges.posts:history }}} pointer{{{ end }}} edit-icon {{{ if !posts.editor.username }}}hidden{{{ end }}}" title="[[global:edited-timestamp, {isoTimeToLocaleString(./editedISO, config.userLang)}]]"></i>
+			<span data-editor="{posts.editor.userslug}" component="post/editor" class="visually-hidden">[[global:last-edited-by, {posts.editor.username}]] <span class="timeago" title="{isoTimeToLocaleString(posts.editedISO, config.userLang)}"></span></span>
+		</div>
+		<div class="d-flex align-items-center gap-1 ms-auto">
+			<span class="bookmarked opacity-0 text-primary"><i class="fa fa-bookmark-o"></i></span>
+			<a href="{config.relative_path}/post/{encodeURIComponent(./pid)}" class="post-index text-muted d-none d-md-inline">#{increment(./index, "1")}</a>
+		</div>
+	</div>
+
+	<!-- Post content - full width below author row -->
+	<div class="post-container d-flex flex-column w-100" style="min-width:0;">
+		<div class="content text-break" component="post/content" itemprop="text">
+			{posts.content}
+		</div>
+
+		<div component="post/footer" class="post-footer border-bottom pb-2">
+			{{{ if posts.user.signature }}}
+			<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{posts.user.signature}</div>
+			{{{ end }}}
+
+			<div class="d-flex flex-wrap-reverse gap-2 {{{ if (hideReplies || !posts.replies.count) }}}justify-content-end{{{ else }}}justify-content-between{{{ end }}}">
+				{{{ if !hideReplies }}}
+				<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center btn btn-ghost ff-secondary border rounded-1 p-1 text-muted text-decoration-none text-xs {{{ if (!./replies || shouldHideReplyContainer(@value)) }}}hidden{{{ end }}}">
+					<span component="post/reply-count/avatars" class="d-flex gap-1 {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
+						{{{each posts.replies.users}}}
+						<span>{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}</span>
+						{{{end}}}
+						{{{ if posts.replies.hasMore}}}
+						<span style="height: 20px; line-height: 20px;"><i class="fa fa-ellipsis"></i></span>
+						{{{ end }}}
+					</span>
+
+					<span class="ms-2 replies-count fw-semibold text-nowrap" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
+					<span class="ms-2 replies-last hidden-xs fw-semibold">[[topic:last-reply-time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
+
+					<i class="fa fa-fw fa-chevron-down" component="post/replies/open"></i>
+				</a>
+				{{{ end }}}
+				<div component="post/actions" class="d-flex flex-grow-1 align-items-center justify-content-end gap-1 post-tools">
+					<!-- IMPORT partials/topic/reactions.tpl -->
+					<a component="post/reply" href="#" class="btn btn-ghost btn-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:reply]]"><i class="fa fa-fw fa-reply text-primary"></i></a>
+					<a component="post/quote" href="#" class="btn btn-ghost btn-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:quote]]"><i class="fa fa-fw fa-quote-right text-primary"></i></a>
+
+					{{{ if ./announces }}}
+					<a component="post/announce-count" href="#" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center" title="[[topic:announcers]]"><i class="fa fa-share-alt text-primary"></i> {./announces}</a>
+					{{{ end }}}
+
+					{{{ if !reputation:disabled }}}
+					<div class="d-flex votes align-items-center">
+						<a component="post/upvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.upvoted }}} upvoted{{{ end }}}" title="[[topic:upvote-post]]">
+							<i class="fa fa-fw fa-chevron-up text-primary"></i>
+						</a>
+
+						<meta itemprop="upvoteCount" content="{posts.upvotes}">
+						<meta itemprop="downvoteCount" content="{posts.downvotes}">
+						<a href="#" class="px-2 mx-1 btn btn-ghost btn-sm" component="post/vote-count" data-votes="{posts.votes}" title="[[global:voters]]">{posts.votes}</a>
+
+						{{{ if !downvote:disabled }}}
+						<a component="post/downvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.downvoted }}} downvoted{{{ end }}}" title="[[topic:downvote-post]]">
+							<i class="fa fa-fw fa-chevron-down text-primary"></i>
+						</a>
+						{{{ end }}}
+					</div>
+					{{{ end }}}
+
+					<!-- IMPORT partials/topic/post-menu.tpl -->
+				</div>
+			</div>
+
+			<div component="post/replies/container" class="my-2 col-11 border rounded-1 p-3 hidden-empty"></div>
+		</div>
+	</div>
+</div>
+
+{{{ if (!./index && widgets.mainpost-footer.length) }}}
+<div data-widget-area="mainpost-footer">
+	{{{ each widgets.mainpost-footer }}}
+	{widgets.mainpost-footer.html}
+	{{{ end }}}
+</div>
+{{{ end }}}

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

@@ -0,0 +1,20 @@
+<div component="topic/reply/container" class="btn-group {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
+	<a href="{config.relative_path}/compose?tid={tid}" class="d-flex gap-2 align-items-center btn btn-sm btn-primary fw-semibold w-100 justify-content-center" component="topic/reply" data-ajaxify="false" role="button">
+		<i class="fa fa-fw fa-reply"></i>
+		<span>[[topic:reply]]</span>
+	</a>
+	<button type="button" class="btn btn-sm btn-primary dropdown-toggle flex-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:reply-options]]">
+		<span class="caret"></span>
+	</button>
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
+		<li><a class="dropdown-item rounded-1" href="#" component="topic/reply-as-topic" role="menuitem">[[topic:reply-as-topic]]</a></li>
+	</ul>
+</div>
+
+{{{ if loggedIn }}}
+	<a href="#" component="topic/reply/locked" class="d-flex gap-2 align-items-center fw-semibold btn btn-sm btn-primary disabled hidden w-100 justify-content-center {{{ if (privileges.topics:reply || !locked) }}}hidden{{{ end }}}" disabled><i class="fa fa-fw fa-lock"></i> [[topic:locked]]</a>
+{{{ else }}}
+	{{{ if !privileges.topics:reply }}}
+	<a component="topic/reply/guest" href="{config.relative_path}/login" class="d-flex gap-2 align-items-center fw-semibold btn btn-sm btn-primary w-100 justify-content-center"><i class="fa fa-fw fa-sign-in"></i><span>[[topic:guest-login-reply]]</span></a>
+	{{{ end }}}
+{{{ end }}}

package/templates/partials/topic/sidebar.tpl

@@ -5,7 +5,7 @@
 			<!-- IMPORT partials/topic/reply-button.tpl -->
 
 			<!-- Mark Unread Button -->
-			{{{ if loggedIn }}}
+			{{{ if config.loggedIn }}}
 			<button component="topic/mark-unread" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center w-100 justify-content-start">
 				<i class="fa fa-fw fa-inbox"></i>
 				<span class="fw-semibold text-nowrap">[[topic:mark-unread]]</span>

package/templates/partials/topic/sort.tpl

@@ -0,0 +1,27 @@
+<div class="btn-group bottom-sheet w-100" component="thread/sort">
+	<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center dropdown-toggle w-100 justify-content-start" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:post-sort-option, {sortOptionLabel}]]">
+		<i class="fa fa-fw fa-arrow-down-wide-short"></i>
+		<span class="fw-semibold text-nowrap">{sortOptionLabel}</span>
+	</button>
+
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest" role="menuitem">
+				<span class="flex-grow-1">[[topic:oldest-to-newest]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest" role="menuitem">
+				<span class="flex-grow-1">[[topic:newest-to-oldest]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_votes" data-sort="most_votes" role="menuitem">
+				<span class="flex-grow-1">[[topic:most-votes]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
+			</a>
+		</li>
+	</ul>
+</div>

package/templates/partials/topic/tools.tpl

@@ -0,0 +1,9 @@
+{{{ if privileges.view_thread_tools }}}
+<div class="btn-group thread-tools bottom-sheet w-100">
+	<button class="btn btn-ghost btn-sm d-flex align-items-center gap-2 dropdown-toggle w-100 justify-content-start" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+		<i class="fa fa-fw fa-gear"></i>
+		<span class="fw-semibold text-nowrap">[[topic:thread-tools.title]]</span>
+	</button>
+	<ul class="dropdown-menu p-1 text-sm" role="menu"></ul>
+</div>
+{{{ end }}}

package/templates/partials/topic/watch.tpl

@@ -0,0 +1,60 @@
+{{{ if config.loggedIn }}}
+<div class="btn-group bottom-sheet w-100" component="topic/watch">
+	<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center dropdown-toggle w-100 justify-content-start" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+		<span component="topic/following/menu" class="d-flex gap-2 align-items-center{{{ if !isFollowing }}} hidden{{{ end }}}">
+			<i class="fa fa-fw fa-bell-o"></i>
+			<span class="fw-semibold text-nowrap">[[topic:watching]]</span>
+		</span>
+
+		<span component="topic/not-following/menu" class="d-flex gap-2 align-items-center{{{ if !isNotFollowing}}} hidden{{{ end }}}">
+			<i class="fa fa-fw fa-bell-slash-o"></i>
+			<span class="fw-semibold text-nowrap">[[topic:not-watching]]</span>
+		</span>
+
+		<span component="topic/ignoring/menu" class="d-flex gap-2 align-items-center{{{ if !isIgnoring }}} hidden{{{ end }}}">
+			<i class="fa fa-fw fa-eye-slash"></i>
+			<span class="fw-semibold text-nowrap">[[topic:ignoring]]</span>
+		</span>
+	</button>
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/following" role="menuitem">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="fa fa-fw fa-bell-o text-secondary"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:watching]]</span>
+					</span>
+					<div class="help-text text-secondary text-xs">[[topic:watching.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
+
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/not-following" role="menuitem">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="fa fa-fw fa-bell-slash-o text-secondary"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:not-watching]]</span>
+					</span>
+					<div class="help-text text-secondary text-xs">[[topic:not-watching.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
+
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/ignoring" role="menuitem">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="fa fa-fw fa-eye-slash text-secondary"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:ignoring]]</span>
+					</span>
+					<div class="help-text text-secondary text-xs">[[topic:ignoring.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
+	</ul>
+</div>
+{{{ end }}}

package/templates/topic.tpl

@@ -57,9 +57,9 @@
 			<div class="d-flex gap-2 align-items-center mt-2 hidden-empty" component="topic/thumb/list"><!-- IMPORT partials/topic/thumbs.tpl --></div>
 		</div>
 
-		<div class="topic-layout d-flex gap-4 mb-4 mb-lg-0">
+		<div class="topic topic-layout d-flex gap-4 mb-4 mb-lg-0">
 			<!-- Main Content Area -->
-			<div class="topic flex-grow-1" style="min-width: 0;">
+			<div class="topic-main flex-grow-1" style="min-width: 0;">
 				{{{ if merger }}}
 				<!-- IMPORT partials/topic/merged-message.tpl -->
 				{{{ end }}}

package/theme.json

@@ -4,5 +4,6 @@
   "description": "Modern, premium NodeBB theme for JAVIS Community",
   "url": "https://github.com/javis-admin/nodebb-community-theme",
   "screenshot": "screenshot.png",
-  "baseTheme": "nodebb-theme-harmony"
+  "baseTheme": "nodebb-theme-harmony",
+  "templates": "templates"
 }