@okjavis/nodebb-theme-javis 2.4.0 → 2.5.0

package/package.json

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

package/plugin.json

@@ -6,9 +6,11 @@
   "library": "./theme.js",
   "baseTheme": "nodebb-theme-harmony",
   "hooks": [
+    { "hook": "static:app.load", "method": "init" },
     { "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" },
     { "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
-    { "hook": "filter:config.get", "method": "getThemeConfig" }
+    { "hook": "filter:config.get", "method": "getThemeConfig" },
+    { "hook": "filter:settings.get", "method": "getAdminSettings" }
   ],
   "staticDirs": {
     "static": "./static"
@@ -16,6 +18,9 @@
   "scripts": [
     "static/lib/theme.js"
   ],
+  "modules": {
+    "../admin/plugins/javis.js": "public/admin.js"
+  },
   "templates": "templates",
   "screenshot": "screenshot.png",
   "version": "1.5.0",

package/scss/_base.scss

@@ -28,6 +28,13 @@ nav[component="sidebar/left"] {
   }
 }
 
+// Sidebar toggle link padding
+.sidebar-toggle {
+  [component="sidebar/toggle"] {
+    padding: $jv-space-4 $jv-space-5 !important; // 16px vertical, 20px horizontal
+  }
+}
+
 // Reddit-style layout: Equal spacing and wider feed
 .feed > .row {
   max-width: 1400px; // Reddit's approximate max-width

package/scss/_composer.scss

@@ -74,6 +74,14 @@ html.composing .composer .mobile-navbar {
   display: none !important;
 }
 
+// ===========================================================
+// HIDE PREVIEW AND HELP BUTTONS
+// ===========================================================
+html.composing .composer [data-action="preview"],
+html.composing .composer [data-action="help"] {
+  display: none !important;
+}
+
 // ===========================================================
 // HEADER
 // ===========================================================

package/scss/_feed.scss

@@ -24,6 +24,18 @@
       display: none !important;
     }
   }
+
+  // Hide the original "New Topic" button via CSS to prevent flicker
+  // The composer prompt card will replace it via JS
+  #new_topic {
+    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;
+  }
 }
 
 // ===========================================================
@@ -33,7 +45,8 @@
   background: $jv-surface;
   border: 1px solid $jv-border-subtle;
   border-radius: $jv-radius-lg;
-  padding: $jv-space-4;
+  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;
   box-shadow: $jv-shadow-sm;
   transition: box-shadow $jv-transition-fast, border-color $jv-transition-fast;
@@ -358,7 +371,7 @@
     font-weight: 700 !important; // Bolder for better hierarchy
     line-height: 1.4 !important; // Better readability
     color: $jv-text-main !important;
-    margin-bottom: $jv-space-3; // 6px - more breathing room
+    margin-bottom: 0;
     letter-spacing: -0.02em; // Tighter for modern feel
 
     &:hover {

package/static/lib/theme.js

@@ -375,27 +375,65 @@
   }
 
   /**
-   * Initialize click handler for composer prompt card on feed page
-   * The card HTML is rendered server-side in feed.tpl for instant display (no flicker)
-   * This function only sets up the click handlers
+   * Initialize LinkedIn-style composer prompt card on feed page
+   * Injects the card HTML and sets up click handlers
+   * The original "New Topic" button is hidden via CSS to prevent flicker
    */
   function initFeedComposerPromptHandler() {
-    // Only run on feed page with composer card present
-    var $card = $('.composer-prompt-card');
-    if (!$card.length) {
+    // Only run on feed page
+    if (!$('.feed').length) {
       return;
     }
 
-    // Skip if already initialized
-    if ($card.data('handler-initialized')) {
+    // Don't re-inject if already present
+    if ($('.composer-prompt-card').length) {
       return;
     }
-    $card.data('handler-initialized', true);
 
-    var isLoggedIn = typeof app !== 'undefined' && app.user && app.user.uid;
+    // Find the existing controls row (contains New Topic button)
+    var $controlsRow = $('.feed .d-flex.justify-content-between.py-2.mb-2').first();
+    if (!$controlsRow.length) {
+      return;
+    }
+
+    // Get user info for avatar - clone from header avatar which is already correctly rendered
+    var isLoggedIn = false;
+    var avatarHtml = '';
+
+    if (typeof app !== 'undefined' && app.user && app.user.uid) {
+      isLoggedIn = true;
+      // Clone the avatar from the header - it's already correctly rendered by NodeBB
+      var $headerAvatar = $('[component="header/avatar"] img, [component="header/avatar"] [component="avatar/picture"]').first();
+      if ($headerAvatar.length) {
+        avatarHtml = '<img src="' + $headerAvatar.attr('src') + '" alt="Avatar" class="avatar avatar-rounded" />';
+      } else {
+        // Fallback to icon-based avatar from header
+        var $headerIcon = $('[component="header/avatar"] [component="avatar/icon"]').first();
+        if ($headerIcon.length) {
+          avatarHtml = $headerIcon.clone().addClass('avatar avatar-rounded').get(0).outerHTML;
+        } else {
+          // Last resort: use placeholder
+          avatarHtml = '<div class="avatar avatar-rounded avatar-placeholder"><i class="fa fa-user"></i></div>';
+        }
+      }
+    } else {
+      avatarHtml = '<div class="avatar avatar-rounded avatar-placeholder"><i class="fa fa-user"></i></div>';
+    }
+
+    var cardHtml = '<div class="composer-prompt-card' + (isLoggedIn ? '' : ' composer-prompt-guest') + '">' +
+      '<div class="composer-prompt-inner">' +
+        '<div class="composer-prompt-avatar">' + avatarHtml + '</div>' +
+        '<button class="composer-prompt-input" type="button" id="composer-prompt-btn">' +
+          '<span class="composer-prompt-placeholder">' + (isLoggedIn ? 'Start a discussion...' : 'Sign in to start a discussion...') + '</span>' +
+        '</button>' +
+      '</div>' +
+    '</div>';
+
+    // Insert the card before the controls row
+    $controlsRow.before(cardHtml);
 
     // Bind click handler to open composer
-    $card.on('click', '.composer-prompt-input, .composer-prompt-action', function(e) {
+    $('.composer-prompt-card').on('click', '.composer-prompt-input, .composer-prompt-action', function(e) {
       e.preventDefault();
 
       if (!isLoggedIn) {

package/templates/admin/plugins/javis.tpl

@@ -0,0 +1,76 @@
+<div class="acp-page-container">
+	<!-- IMPORT admin/partials/settings/header.tpl -->
+
+	<div class="row m-0">
+		<div id="spy-container" class="col-12 col-md-8 px-0 mb-4" tabindex="0">
+			<form role="form" class="javis-settings">
+				<div class="mb-4">
+					<h5 class="fw-bold">JAVIS Theme Settings</h5>
+					<p class="text-muted">Configure the default settings for the JAVIS Community theme.</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input type="checkbox" class="form-check-input" id="enableQuickReply" name="enableQuickReply" />
+					<label for="enableQuickReply" class="form-check-label">Enable Quick Reply</label>
+					<p class="form-text">Allow users to quickly reply to topics without opening the full composer.</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input type="checkbox" class="form-check-input" id="enableBreadcrumbs" name="enableBreadcrumbs" />
+					<label for="enableBreadcrumbs" class="form-check-label">Enable Breadcrumbs</label>
+					<p class="form-text">Show navigation breadcrumbs at the top of pages.</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input type="checkbox" class="form-check-input" id="centerHeaderElements" name="centerHeaderElements" />
+					<label for="centerHeaderElements" class="form-check-label">Center Header Elements</label>
+					<p class="form-text">Center-align the header navigation elements.</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input type="checkbox" class="form-check-input" id="mobileTopicTeasers" name="mobileTopicTeasers" />
+					<label for="mobileTopicTeasers" class="form-check-label">Mobile Topic Teasers</label>
+					<p class="form-text">Show topic teasers on mobile devices.</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input type="checkbox" class="form-check-input" id="stickyToolbar" name="stickyToolbar" />
+					<label for="stickyToolbar" class="form-check-label">Sticky Toolbar</label>
+					<p class="form-text">Keep the topic toolbar visible when scrolling.</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input type="checkbox" class="form-check-input" id="topicSidebarTools" name="topicSidebarTools" />
+					<label for="topicSidebarTools" class="form-check-label">Topic Sidebar Tools</label>
+					<p class="form-text">Show topic tools in the sidebar instead of inline.</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input type="checkbox" class="form-check-input" id="autohideBottombar" name="autohideBottombar" />
+					<label for="autohideBottombar" class="form-check-label">Auto-hide Bottom Bar</label>
+					<p class="form-text">Automatically hide the bottom navigation bar when scrolling down.</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input type="checkbox" class="form-check-input" id="topMobilebar" name="topMobilebar" />
+					<label for="topMobilebar" class="form-check-label">Top Mobile Bar</label>
+					<p class="form-text">Show mobile navigation at the top instead of bottom.</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input type="checkbox" class="form-check-input" id="openSidebars" name="openSidebars" />
+					<label for="openSidebars" class="form-check-label">Open Sidebars by Default</label>
+					<p class="form-text">Keep sidebars expanded by default (JAVIS default: enabled).</p>
+				</div>
+
+				<div class="form-check form-switch mb-3">
+					<input type="checkbox" class="form-check-input" id="chatModals" name="chatModals" />
+					<label for="chatModals" class="form-check-label">Chat Modals</label>
+					<p class="form-text">Open chats in modal windows instead of navigating to the chat page.</p>
+				</div>
+			</form>
+		</div>
+
+		<!-- IMPORT admin/partials/settings/toc.tpl -->
+	</div>
+</div>

package/theme.js

@@ -9,9 +9,11 @@ const meta = require.main.require('./src/meta');
 const user = require.main.require('./src/user');
 const _ = require.main.require('lodash');
 
+const controllers = require('./lib/controllers');
+
 const theme = {};
 
-// Harmony's defaults - we override openSidebars to 'on'
+// JAVIS defaults - openSidebars is 'on' by default
 const defaults = {
   enableQuickReply: 'on',
   enableBreadcrumbs: 'on',
@@ -26,12 +28,24 @@ const defaults = {
 };
 
 /**
- * Load theme config - replaces Harmony's loadThemeConfig
+ * Hook: static:app.load
+ * Initialize routes for admin panel
+ */
+theme.init = async function (params) {
+  const { router } = params;
+  const routeHelpers = require.main.require('./src/routes/helpers');
+
+  // Admin panel route
+  routeHelpers.setupAdminPageRoute(router, '/admin/plugins/javis', [], controllers.renderAdminPage);
+};
+
+/**
+ * Load theme config
  * Uses JAVIS defaults (with openSidebars: 'on')
  */
 async function loadThemeConfig(uid) {
   const [themeConfig, userConfig] = await Promise.all([
-    meta.settings.get('harmony'),
+    meta.settings.get('javis'),
     user.getSettings(uid),
   ]);
 
@@ -53,6 +67,9 @@ async function loadThemeConfig(uid) {
   return config;
 }
 
+// Export loadThemeConfig for potential use by other modules
+theme.loadThemeConfig = loadThemeConfig;
+
 /**
  * Hook: filter:config.get
  * Sets config.theme with JAVIS-specific defaults
@@ -63,6 +80,20 @@ theme.getThemeConfig = async function (config) {
   return config;
 };
 
+/**
+ * Hook: filter:settings.get
+ * Provide default values for admin settings
+ */
+theme.getAdminSettings = async function (hookData) {
+  if (hookData.plugin === 'javis') {
+    hookData.values = {
+      ...defaults,
+      ...hookData.values,
+    };
+  }
+  return hookData;
+};
+
 theme.defineWidgetAreas = async (areas) => {
   // Define widget areas like Harmony does
   const locations = ['header', 'sidebar', 'footer'];
@@ -125,7 +156,7 @@ theme.defineWidgetAreas = async (areas) => {
 
 theme.addAdminNavigation = (header) => {
   header.plugins.push({
-    route: '/plugins/javis-community-theme',
+    route: '/plugins/javis',
     icon: 'fa-paint-brush',
     name: 'JAVIS Theme',
   });

package/templates/feed.tpl

@@ -1,163 +0,0 @@
-<div data-widget-area="header">
-	{{{each widgets.header}}}
-	{{widgets.header.html}}
-	{{{end}}}
-</div>
-<style>.feed .post-body .content > p:last-child { margin-bottom: 0px; }</style>
-<div class="feed">
-	<div class="row">
-		<div data-widget-area="left" class="col-lg-3 col-sm-12 {{{ if !widgets.left.length }}}hidden{{{ end }}}">
-			{{{each widgets.left}}}
-			{{widgets.left.html}}
-			{{{end}}}
-		</div>
-		{{{ if ((widgets.left.length && widgets.right.length) || (!widgets.left.length && !widgets.right.length))}}}
-		<div class="col-lg-6 col-sm-12 mx-auto">
-		{{{ end }}}
-		{{{ if (widgets.left.length && !widgets.right.length) }}}
-		<div class="col-lg-6 col-sm-12 me-auto">
-		{{{ end }}}
-		{{{ if (!widgets.left.length && widgets.right.length) }}}
-		<div class="col-lg-6 col-sm-12 ms-auto">
-		{{{ end }}}
-
-			<!-- JAVIS: LinkedIn-style Composer Prompt Card -->
-			<div class="composer-prompt-card{{{ if !loggedIn }}} composer-prompt-guest{{{ end }}}">
-				<div class="composer-prompt-inner">
-					<div class="composer-prompt-avatar">
-						{{{ if loggedIn }}}
-						{buildAvatar(loggedInUser, "48px", true, "avatar avatar-rounded")}
-						{{{ else }}}
-						<div class="avatar avatar-rounded avatar-placeholder"><i class="fa fa-user"></i></div>
-						{{{ end }}}
-					</div>
-					<button class="composer-prompt-input" type="button" id="composer-prompt-btn">
-						<span class="composer-prompt-placeholder">{{{ if loggedIn }}}Start a discussion...{{{ else }}}Sign in to start a discussion...{{{ end }}}</span>
-					</button>
-					{{{ if loggedIn }}}
-					<div class="composer-prompt-actions">
-						<button class="composer-prompt-action" type="button" title="Add image"><i class="fa fa-image"></i></button>
-						<button class="composer-prompt-action" type="button" title="Add link"><i class="fa fa-link"></i></button>
-					</div>
-					{{{ end }}}
-				</div>
-			</div>
-
-			<!-- Hidden controls row - New Topic button kept for JS functionality -->
-			<div class="d-flex justify-content-between py-2 mb-2 gap-1 feed-controls-row">
-				{{{ if canPost }}}
-				<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 d-none">[[category:guest-login-post]]</a>
-				{{{ end }}}
-
-				<div class="d-flex justify-content-end gap-1 ms-auto">
-					<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
-
-					<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>
-			</div>
-
-			{{{ if !posts.length  }}}
-			<div class="alert alert-warning text-center">[[feed:no-posts-found]] {{{ if !following.length }}}[[feed:are-you-following-anyone]] {{{ end }}}</div>
-			{{{ end }}}
-
-			<ul component="posts" class="list-unstyled" data-nextstart="{nextStart}">
-				{{{ each posts }}}
-				<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}">
-
-					{{{ if (showThumbs && ./topic.thumbs.length)}}}
-					<div class="p-1 position-relative">
-						<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}">
-							</a>
-						</div>
-
-						<div class="position-absolute end-0 bottom-0 p-3 d-flex gap-2 align-items-center pe-none">
-							{{{ each ./topic.thumbs }}}
-							{{{ if (@index != 0) }}}
-							<img class="rounded-1" style="max-height: 64px; object-fit: contain;" src="{./url}">
-							{{{ end }}}
-							{{{ end }}}
-						</div>
-					</div>
-					{{{ end }}}
-
-					<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;">
-							{{{ 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>
-								{{{ if !./isMainPost}}}{./repliedString}{{{ else }}}<span class="timeago text-muted lh-normal" title="{./timestampISO}"></span>{{{ end}}}
-							</div>
-
-							<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}
-							</div>
-							<div class="position-relative hover-visible">
-								<button component="show/more" class="btn btn-light btn-sm rounded-pill position-absolute start-50 translate-middle-x bottom-0 z-1 hidden ff-secondary">[[feed:see-more]]</button>
-							</div>
-							<hr class="my-2"/>
-							<div class="d-flex justify-content-between">
-								<a href="{config.relative_path}/post/{{{ if ./topic.teaserPid }}}{./topic.teaserPid}{{{ else }}}{./pid}{{{ end }}}" class="btn btn-link btn-sm text-body {{{ if !./isMainPost }}}invisible{{{ end }}}"><i class="fa-fw fa-regular fa-message text-muted"></i> {humanReadableNumber(./topic.postcount)}</a>
-
-								<a href="#" data-pid="{./pid}" data-action="bookmark" data-bookmarked="{./bookmarked}" data-bookmarks="{./bookmarks}" class="btn btn-link btn-sm text-body"><i class="fa-fw fa-bookmark {{{ if ./bookmarked }}}fa text-primary{{{ else }}}fa-regular text-muted{{{ end }}}"></i> <span component="bookmark-count">{humanReadableNumber(./bookmarks)}</span></a>
-
-								<a href="#" data-pid="{./pid}" data-action="upvote" data-upvoted="{./upvoted}" data-upvotes="{./upvotes}" class="btn btn-link btn-sm text-body"><i class="fa-fw fa-heart {{{ if ./upvoted }}}fa text-danger{{{ else }}}fa-regular text-muted{{{ end }}}"></i> <span component="upvote-count">{humanReadableNumber(./upvotes)}</span></a>
-
-								<a href="#" data-pid="{./pid}" data-is-main="{./isMainPost}" data-tid="{./tid}" data-action="reply" class="btn btn-link btn-sm text-body"><i class="fa-fw fa fa-reply text-muted"></i> [[topic:reply]]</a>
-							</div>
-						</div>
-					</div>
-				</li>
-				{{{ end }}}
-			</ul>
-		</div>
-
-		<div data-widget-area="right" class="col-lg-3 col-sm-12 {{{ if !widgets.right.length }}}hidden{{{ end }}}">
-			{{{each widgets.right}}}
-			{{widgets.right.html}}
-			{{{end}}}
-		</div>
-	</div>
-</div>
-
-<div data-widget-area="footer">
-	{{{each widgets.footer}}}
-	{{widgets.footer.html}}
-	{{{end}}}
-</div>