@okjavis/nodebb-theme-javis 2.3.0 → 2.5.0

package/scss/_feed.scss

@@ -4,22 +4,206 @@
 // ===========================================================
 
 // ===========================================================
-// HIDE NEW TOPIC BUTTON AND ALL CATEGORIES ROW
+// HIDE CATEGORIES WIDGET ON FEED PAGE
+// The categories list widget is not relevant on the feed page
 // ===========================================================
-// Hide New Topic button
-// #new_topic,
-// .btn[href*="/compose"],
-// button[data-action="newTopic"],
-// a[href*="/compose"] {
-//   display: none !important;
-// }
+.feed {
+  // Hide categories list directly - simple and reliable
+  ul.categories-list {
+    display: none !important;
+  }
+
+  // Also hide any widget title that precedes a categories list
+  // This targets the "All Categories" header
+  [data-widget-area="left"],
+  [data-widget-area="right"] {
+    // Hide the entire widget container that has categories
+    // Using adjacent sibling and general sibling selectors
+    .categories-list,
+    [component="categories/category"] {
+      display: none !important;
+    }
+  }
 
-// // Hide All categories row
-// .category-selector-container,
-// [component="category/dropdown"],
-// .d-flex.justify-content-between.py-2.mb-2 {
-//   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;
+  }
+}
+
+// ===========================================================
+// LINKEDIN-STYLE COMPOSER PROMPT CARD
+// ===========================================================
+.composer-prompt-card {
+  background: $jv-surface;
+  border: 1px solid $jv-border-subtle;
+  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;
+  box-shadow: $jv-shadow-sm;
+  transition: box-shadow $jv-transition-fast, border-color $jv-transition-fast;
+
+  &:hover {
+    box-shadow: $jv-shadow-md;
+    border-color: $jv-border-strong;
+  }
+
+  // Guest variant
+  &.composer-prompt-guest {
+    .composer-prompt-input {
+      cursor: pointer;
+    }
+  }
+}
+
+.composer-prompt-inner {
+  display: flex;
+  align-items: center;
+  gap: $jv-space-3;
+}
+
+.composer-prompt-avatar {
+  flex-shrink: 0;
+
+  .avatar {
+    width: 48px !important;
+    height: 48px !important;
+    border-radius: 50% !important;
+    object-fit: cover;
+    border: 2px solid rgba(0, 0, 0, 0.05);
+  }
+
+  .avatar-placeholder {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, $jv-primary-soft 0%, rgba(0, 81, 255, 0.2) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $jv-primary;
+    font-size: 18px;
+  }
+}
+
+.composer-prompt-input {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: $jv-space-3 $jv-space-4;
+  background: $jv-bg;
+  border: 1px solid $jv-border-subtle;
+  border-radius: $jv-radius-pill;
+  cursor: pointer;
+  transition: all $jv-transition-fast;
+  text-decoration: none;
+  min-height: 48px;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+    border-color: $jv-border-strong;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: $jv-primary;
+    box-shadow: $jv-focus-ring;
+  }
+
+  // Reset button styles
+  &.composer-prompt-input {
+    text-align: left;
+    font-family: inherit;
+    font-size: inherit;
+  }
+}
+
+.composer-prompt-placeholder {
+  color: $jv-text-muted;
+  font-size: $jv-font-size-base;
+  font-weight: 500;
+}
+
+.composer-prompt-actions {
+  display: flex;
+  gap: $jv-space-1;
+  flex-shrink: 0;
+}
+
+.composer-prompt-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  color: $jv-text-muted;
+  cursor: pointer;
+  transition: all $jv-transition-fast;
+
+  &:hover {
+    background: $jv-hover-bg;
+    color: $jv-primary;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: $jv-focus-ring;
+  }
+
+  i {
+    font-size: 18px;
+  }
+}
+
+// Feed options row (settings dropdown only)
+.feed-options-row {
+  margin-bottom: $jv-space-2 !important;
+  padding: $jv-space-2 0 !important;
+}
+
+// Mobile responsive
+@media (max-width: 576px) {
+  .composer-prompt-card {
+    padding: $jv-space-3;
+    border-radius: $jv-radius-md;
+  }
+
+  .composer-prompt-avatar {
+    .avatar,
+    .avatar-placeholder {
+      width: 40px !important;
+      height: 40px !important;
+    }
+
+    .avatar-placeholder {
+      font-size: 16px;
+    }
+  }
+
+  .composer-prompt-input {
+    padding: $jv-space-2 $jv-space-3;
+    min-height: 40px;
+  }
+
+  .composer-prompt-placeholder {
+    font-size: $jv-font-size-sm;
+  }
+
+  .composer-prompt-actions {
+    display: none; // Hide action buttons on mobile for cleaner UI
+  }
+}
 
 // ===========================================================
 // FEED CONTAINER
@@ -131,22 +315,18 @@
     .overflow-hidden {
       border-radius: $jv-radius-md $jv-radius-md 0 0 !important; // Match card radius
       max-height: 280px !important; // Reduced from 350px - more balanced ratio
+      background: rgba(0, 0, 0, 0.02); // Subtle background for letterboxing
 
       img {
         width: 100%;
         height: 280px; // Fixed height for consistency
-        object-fit: cover;
+        object-fit: contain; // Prevent stretching, maintain aspect ratio
       }
     }
 
-    // Additional thumbnails
+    // Hide additional thumbnails - only show main image in feed
     .position-absolute {
-      padding: $jv-space-4 !important;
-
-      img {
-        border: 2px solid $jv-surface;
-        box-shadow: $jv-shadow-soft;
-      }
+      display: none !important;
     }
   }
 }
@@ -191,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 {
@@ -314,6 +494,95 @@
       border-color: $jv-primary !important;
     }
   }
+
+  // ===========================================================
+  // FEED IMAGE CAROUSEL (matching topic page design)
+  // ===========================================================
+  .post-image-carousel {
+    border-radius: $jv-radius-md;
+    overflow: hidden;
+    margin: $jv-space-4 0;
+    background: rgba(0, 0, 0, 0.03);
+
+    .carousel-inner {
+      border-radius: $jv-radius-md;
+    }
+
+    .carousel-item {
+      // Fixed height container to prevent jumping
+      height: 400px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        background: rgba(0, 0, 0, 0.02);
+      }
+    }
+
+    // Navigation arrows - matching topic page
+    .carousel-control-prev,
+    .carousel-control-next {
+      width: 48px;
+      height: 48px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      opacity: 0;
+      transition: opacity $jv-transition-fast;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.7);
+      }
+
+      .carousel-control-prev-icon,
+      .carousel-control-next-icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .carousel-control-prev {
+      left: $jv-space-3;
+    }
+
+    .carousel-control-next {
+      right: $jv-space-3;
+    }
+
+    &:hover {
+      .carousel-control-prev,
+      .carousel-control-next {
+        opacity: 1;
+      }
+    }
+
+    // Indicator dots - matching topic page
+    .carousel-indicators {
+      margin-bottom: $jv-space-3;
+      gap: $jv-space-2;
+
+      button {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.5);
+        border: none;
+        opacity: 1;
+        transition: background-color $jv-transition-fast, transform $jv-transition-fast;
+
+        &.active {
+          background: #fff;
+          transform: scale(1.2);
+        }
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+  }
 }
 
 // ===========================================================

package/scss/_sidebar.scss

@@ -504,7 +504,7 @@ div[data-widget-area="right"],
 
   // Sticky positioning - stays visible when scrolling
   position: sticky;
-  top: 48px; // Adjust based on your header height
+  top: 72px; // Adjust based on your header height
   align-self: flex-start;
   max-height: calc(100vh - 100px); // Account for header + padding
   overflow-y: auto; // Allow scrolling if content is too tall

package/scss/_topic.scss

@@ -598,9 +598,7 @@ body.template-topic {
       }
 
       [component="topic/reply/container"] {
-        display: flex;
-        flex-direction: column;
-        gap: $jv-space-2;
+        width: 100%;
 
         .btn-primary {
           flex: 1;
@@ -609,7 +607,11 @@ body.template-topic {
           padding: $jv-space-3 $jv-space-4;
         }
 
-        .dropdown-toggle { display: none; }
+        // Hide the "Reply as topic" dropdown toggle and menu
+        .dropdown-toggle,
+        .dropdown-menu {
+          display: none !important;
+        }
       }
 
       // Sidebar action buttons - full-width, left-aligned (extends base .btn-ghost)

package/static/lib/theme.js

@@ -27,12 +27,16 @@
     // Initialize post hover actions (show actions only on directly hovered post)
     initPostHoverActions();
 
+    // Initialize click handler for composer prompt card (rendered server-side in feed.tpl)
+    initFeedComposerPromptHandler();
+
     // Re-initialize carousels when new posts are loaded (infinite scroll, etc.)
     // Also handle post edits by clearing the processed flag
     $(window).on('action:posts.loaded action:topic.loaded action:ajaxify.end', function() {
       initPostImageCarousels();
       initParentPostNavigation();
       initPostHoverActions();
+      initFeedComposerPromptHandler();
     });
 
     // Handle post edits - need to re-process the edited post
@@ -370,4 +374,80 @@
     });
   }
 
+  /**
+   * 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
+    if (!$('.feed').length) {
+      return;
+    }
+
+    // Don't re-inject if already present
+    if ($('.composer-prompt-card').length) {
+      return;
+    }
+
+    // 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
+    $('.composer-prompt-card').on('click', '.composer-prompt-input, .composer-prompt-action', function(e) {
+      e.preventDefault();
+
+      if (!isLoggedIn) {
+        // Redirect to login
+        window.location.href = config.relative_path + '/login';
+        return;
+      }
+
+      // Trigger the original New Topic button click
+      var $newTopicBtn = $('#new_topic');
+      if ($newTopicBtn.length) {
+        $newTopicBtn.trigger('click');
+      }
+    });
+  }
+
 })();

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/theme.scss

@@ -21,3 +21,4 @@
 @import "./scss/categories";
 @import "./scss/feed";
 @import "./scss/topic";
+@import "./scss/composer";