@okjavis/nodebb-theme-javis 3.0.3 → 3.0.6

package/package.json

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

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/_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;
@@ -777,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,13 +203,42 @@
 
   /**
    * Initialize sidebar toggle click handler
-   * We don't need our own handler - Harmony's handler works fine.
-   * This function is now a no-op to avoid conflicts.
+   * Custom handler needed because Harmony's handler targets .sidebar but JAVIS uses .sidebar-left
    */
   function initSidebarToggle() {
-    // Let Harmony's built-in handler manage the sidebar toggle
-    // We just ensure the sidebar auto-expands on desktop (handled by initSidebarAutoExpand)
-    console.log('JAVIS: Sidebar toggle - using Harmony default handler');
+    var $toggle = $('[component="sidebar/toggle"]');
+    if (!$toggle.length) {
+      console.log('JAVIS: Sidebar toggle element not found');
+      return;
+    }
+
+    // Remove any existing handlers to avoid duplicates, then add our handler
+    $toggle.off('click.javis').on('click.javis', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var $sidebar = $('.sidebar-left');
+      $sidebar.toggleClass('open');
+
+      console.log('JAVIS: Sidebar toggled, open:', $sidebar.hasClass('open'));
+
+      // Save preference if user is logged in
+      if (typeof app !== 'undefined' && app.user && app.user.uid) {
+        require(['api'], function(api) {
+          api.put('/users/' + app.user.uid + '/settings', {
+            settings: {
+              openSidebars: $sidebar.hasClass('open') ? 'on' : 'off',
+            },
+          }).catch(function(err) {
+            console.warn('JAVIS: Could not save sidebar preference', err);
+          });
+        });
+      }
+
+      $(window).trigger('action:sidebar.toggle');
+    });
+
+    console.log('JAVIS: Sidebar toggle initialized');
   }
 
   /**
@@ -402,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/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/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"
 }