@okjavis/nodebb-theme-javis 2.1.0 → 2.3.0

package/package.json

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

package/scss/_topic.scss

@@ -33,15 +33,15 @@ body.template-topic {
     margin-bottom: 0;
     display: flex;
     align-items: flex-start;
-    gap: $jv-space-4;
+    gap: $jv-space-3;
 
     h1,
     [component="topic/title"],
     .topic-title {
-      font-size: 32px;
-      font-weight: 800;
-      line-height: 1.2;
-      letter-spacing: -0.03em;
+      font-size: $jv-font-size-xl;
+      font-weight: 700;
+      line-height: $jv-line-height-tight;
+      letter-spacing: -0.02em;
       color: $jv-text-main;
       margin-bottom: 0;
       flex: 1;
@@ -49,10 +49,10 @@ body.template-topic {
   }
 
   h1.fs-3 {
-    font-size: 32px !important;
-    font-weight: 800 !important;
-    line-height: 1.2 !important;
-    letter-spacing: -0.03em !important;
+    font-size: $jv-font-size-xl !important;
+    font-weight: 700 !important;
+    line-height: $jv-line-height-tight !important;
+    letter-spacing: -0.02em !important;
   }
 
   // ===========================================================
@@ -111,23 +111,75 @@ body.template-topic {
       width: 100%;
     }
 
+    // Remove timeline start/end dots from posts list
+    .posts.timeline::before,
+    .posts.timeline::after {
+      display: none !important;
+    }
+
     [component="post"] {
-      background: $jv-surface;
-      border-radius: $jv-radius-md;
-      margin-bottom: $jv-space-4;
-      border: 1px solid $jv-border-subtle;
+      background: transparent;
+      margin-bottom: $jv-space-3;
+      border: none;
       box-shadow: none;
 
+      // Remove timeline vertical line from Harmony theme
+      border-left: none !important;
+
+      // Remove timeline end dot
+      &:last-child::after {
+        display: none !important;
+      }
+
+      // Remove all timeline pseudo-elements (dots at start/end)
+      &::before,
+      &::after {
+        display: none !important;
+      }
+
+      // Hide user status indicator (green/grey dot below avatar)
+      [component="user/status"] {
+        display: none !important;
+      }
+
+      // Card styling on the parent container that includes avatar
+      .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;
+          }
+        }
+      }
+
+      // Align the post header row with avatar (extends base .post-header)
+      .post-header {
+        min-height: 36px; // Match avatar height for alignment
+      }
+
       .post-container {
-        padding: $jv-space-6;
+        padding: 0;
         padding-top: 0 !important;
         border: none;
         background: transparent;
       }
 
-      &.selected .post-container {
+      &.selected .post-container-parent {
         background: $jv-selected-bg;
-        border-radius: $jv-radius-md;
       }
     }
   }
@@ -137,14 +189,14 @@ body.template-topic {
   // ===========================================================
   .post-header {
     display: flex;
-    align-items: center;
-    gap: $jv-space-3;
-    margin-bottom: $jv-space-4;
-    font-size: $jv-font-size-sm;
+    align-items: center !important;
+    gap: $jv-space-2;
+    margin-bottom: 0 !important;
+    font-size: $jv-font-size-xs;
 
     .avatar {
-      width: 40px;
-      height: 40px;
+      width: 32px;
+      height: 32px;
       border-radius: 50%;
       object-fit: cover;
       flex-shrink: 0;
@@ -153,12 +205,13 @@ body.template-topic {
     .user-info {
       display: flex;
       flex-direction: column;
-      gap: 2px;
+      gap: $jv-space-1;
     }
 
     .username,
     [component="post/header/username"] {
       font-weight: 600;
+      font-size: $jv-font-size-sm;
       color: $jv-text-main;
       text-decoration: none;
 
@@ -195,20 +248,20 @@ body.template-topic {
     color: $jv-text-main;
 
     p {
-      margin-bottom: $jv-space-4;
+      margin-bottom: $jv-space-3;
       &:last-child { margin-bottom: 0; }
     }
 
     pre, code {
       background: rgba(0, 0, 0, 0.04);
       border-radius: $jv-radius-sm;
-      font-size: $jv-font-size-sm;
+      font-size: $jv-font-size-xs;
     }
 
-    code { padding: 2px 6px; }
+    code { padding: 2px 5px; }
 
     pre {
-      padding: $jv-space-4;
+      padding: $jv-space-3;
       overflow-x: auto;
       code {
         padding: 0;
@@ -229,6 +282,95 @@ body.template-topic {
       border-radius: $jv-radius-sm;
     }
 
+    // ===========================================================
+    // POST IMAGE CAROUSEL
+    // ===========================================================
+    .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
+      .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
+      .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);
+          }
+        }
+      }
+    }
+
     a {
       color: $jv-primary;
       &:hover { text-decoration: underline; }
@@ -300,10 +442,32 @@ body.template-topic {
     }
   }
 
-  // Always visible post actions (override Harmony's hover behavior)
-  .topic .posts [component="post"] [component="post/actions"] {
+  // Post actions - show on hover (Reddit/HN style)
+  // Uses JS-managed .post-hovered class to prevent bubble to parent posts
+  .topic .posts [component="post"] {
+    [component="post/actions"] {
+      opacity: 0;
+      transition: opacity $jv-transition-fast;
+    }
+
+    // Show actions only on the directly hovered post (JS adds .post-hovered class)
+    > .post-container-parent.post-hovered [component="post/actions"] {
+      opacity: 1;
+    }
+
+    // Always show if user has interacted (voted, bookmarked)
+    [component="post/actions"] {
+      .upvoted,
+      .downvoted,
+      .bookmarked {
+        opacity: 1;
+      }
+    }
+  }
+
+  // Keep vote count always visible when there are votes
+  .topic .posts [component="post/vote-count"]:not(:empty) {
     opacity: 1 !important;
-    visibility: visible !important;
   }
 
   // ===========================================================
@@ -448,9 +612,21 @@ body.template-topic {
         .dropdown-toggle { display: none; }
       }
 
-      // Consistent ghost button styling for all sidebar action buttons
+      // Sidebar action buttons - full-width, left-aligned (extends base .btn-ghost)
       .btn-ghost,
       .bottom-sheet > .btn,
+      .thread-tools > .dropdown-toggle {
+        text-align: left;
+        width: 100%;
+        justify-content: flex-start;
+
+        i {
+          width: 16px; // Fixed width for icon alignment
+        }
+      }
+
+      // Non-ghost buttons need base ghost styling too
+      .bottom-sheet > .btn,
       .thread-tools > .dropdown-toggle {
         background: transparent !important;
         border: 1px solid transparent !important;
@@ -459,15 +635,10 @@ body.template-topic {
         border-radius: $jv-radius-sm;
         font-size: $jv-font-size-sm;
         font-weight: 500;
-        text-align: left;
-        width: 100%;
-        justify-content: flex-start;
         transition: background-color $jv-transition-fast, color $jv-transition-fast;
-
-        i {
-          width: 16px;
-          color: $jv-primary;
-        }
+        display: inline-flex;
+        align-items: center;
+        gap: $jv-space-2;
 
         &:hover {
           background: $jv-hover-bg !important;
@@ -593,42 +764,310 @@ body.template-topic {
   }
 
   // ===========================================================
-  // NESTED REPLIES
+  // PARENT POST CONTEXT (shown when viewing a reply)
+  // Compact inline style - visually distinct from main posts
   // ===========================================================
-  [component="post/replies/container"] {
-    margin-top: $jv-space-4;
-    padding-left: $jv-space-6;
-    border-left: 2px solid $jv-border-subtle;
+  [component="post/parent"] {
+    background: transparent !important;
+    border: none !important;
+    border-left: 2px solid $jv-border-strong !important;
+    border-radius: 0 !important;
+    padding: $jv-space-1 0 $jv-space-1 $jv-space-3 !important;
+    margin-bottom: $jv-space-2 !important;
+    margin-left: $jv-space-1 !important;
+    transition: border-color $jv-transition-fast;
+    cursor: pointer;
+    display: flex !important;
+    align-items: center !important;
+    gap: $jv-space-2 !important;
+    flex-direction: row !important;
 
-    [component="post"] {
-      margin-bottom: $jv-space-3;
-      padding: $jv-space-4;
-      background: rgba(0, 0, 0, 0.02);
-      border-radius: $jv-radius-sm;
+    &:hover {
+      border-left-color: $jv-primary !important;
+
+      .fw-semibold {
+        color: $jv-primary !important;
+      }
+    }
+
+    // Avatar
+    .avatar,
+    [component="user/picture"] {
+      width: 16px !important;
+      height: 16px !important;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    // Username
+    .fw-semibold {
+      font-size: $jv-font-size-xs !important;
+      font-weight: 600;
+      color: $jv-text-muted;
+      transition: color $jv-transition-fast;
+    }
+
+    // Parent content preview - inline, truncated
+    [component="post/parent/content"] {
+      font-size: $jv-font-size-xs !important;
+      color: $jv-text-soft !important;
+      line-height: 1.4;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      min-width: 0;
+
+      p {
+        margin: 0;
+        display: inline;
+      }
+
+      // Hide images in preview
+      img {
+        display: none;
+      }
+    }
 
-      .post-container { padding: 0; }
+    // Hide the nested flex container structure, flatten it
+    > .d-flex {
+      display: contents !important;
     }
   }
 
   // ===========================================================
-  // REPLY COUNT ACCORDION
+  // POST HIGHLIGHT ANIMATION (when navigating to a post)
+  // ===========================================================
+  .post-highlight-flash {
+    animation: postHighlightFlash 1.5s ease-out;
+  }
+
+  @keyframes postHighlightFlash {
+    0% {
+      background-color: rgba($jv-primary, 0.15);
+      box-shadow: 0 0 0 4px rgba($jv-primary, 0.1);
+    }
+    100% {
+      background-color: $jv-surface;
+      box-shadow: none;
+    }
+  }
+
+  // ===========================================================
+  // REPLY COUNT BUTTON (Reddit/Discord style - no border, text link)
   // ===========================================================
   [component="post/reply-count"] {
-    color: $jv-text-muted;
-    font-size: $jv-font-size-sm;
-    padding: $jv-space-2 $jv-space-3;
-    border-radius: $jv-radius-sm;
+    display: inline-flex;
+    align-items: center;
+    gap: $jv-space-2;
+    background: transparent !important;
+    border: none !important;
+    border-radius: $jv-radius-sm !important;
+    padding: $jv-space-1 $jv-space-2 !important;
+    font-size: $jv-font-size-xs !important;
+    color: $jv-text-muted !important;
     cursor: pointer;
-    transition: background-color $jv-transition-fast, color $jv-transition-fast;
+    transition: all $jv-transition-fast;
+    text-decoration: none !important;
+
+    // Respect the hidden class when there are no replies
+    &.hidden {
+      display: none !important;
+    }
 
     &:hover {
-      background: $jv-hover-bg;
-      color: $jv-text-main;
+      background: $jv-hover-bg !important;
+      color: $jv-primary !important;
+
+      [component="post/reply-count/text"],
+      .replies-count {
+        color: $jv-primary !important;
+      }
     }
 
-    .replies-count {
-      color: $jv-text-main;
+    // Hide avatars - cleaner look like Reddit
+    [component="post/reply-count/avatars"] {
+      display: none !important;
+    }
+
+    // Reply count text - simple and clean
+    .replies-count,
+    [component="post/reply-count/text"] {
       font-weight: 600;
+      font-size: $jv-font-size-xs;
+      color: $jv-text-muted;
+      transition: color $jv-transition-fast;
+    }
+
+    // Hide last reply time - too verbose
+    .replies-last {
+      display: none !important;
+    }
+
+    // Chevron icon
+    .fa-chevron-down {
+      font-size: 10px;
+      color: $jv-text-soft;
+      transition: transform $jv-transition-fast;
+    }
+
+    // Expanded state
+    &[aria-expanded="true"] {
+      color: $jv-primary !important;
+
+      .fa-chevron-down {
+        transform: rotate(180deg);
+      }
+
+      [component="post/reply-count/text"],
+      .replies-count {
+        color: $jv-primary !important;
+      }
+    }
+  }
+
+  // ===========================================================
+  // NESTED REPLIES CONTAINER (Clean threaded style)
+  // Inspired by Reddit/GitHub - compact, minimal
+  // ===========================================================
+  [component="post/replies/container"] {
+    margin-top: $jv-space-3 !important;
+    margin-bottom: 0 !important;
+    margin-left: $jv-space-4;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    position: relative;
+
+    // Simple thread line
+    &::before {
+      content: "";
+      position: absolute;
+      left: -$jv-space-2;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: $jv-border-subtle;
+      border-radius: 1px;
+      transition: background $jv-transition-fast;
+    }
+
+    // Hover effect on thread line
+    &:hover::before {
+      background: $jv-border-strong;
+    }
+
+    // Replies list - compact spacing
+    [component="post/replies"],
+    ul.list-unstyled {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: $jv-space-2;
+    }
+
+    // Individual reply posts - clean, compact
+    [component="post"] {
+      margin: 0 !important;
+      padding: 0 !important;
+      background: transparent !important;
+      position: relative;
+
+      // No connector dots
+      &::before {
+        display: none !important;
+      }
+
+      // Reply container - compact padding
+      .post-container-parent {
+        background: transparent !important;
+        border: none !important;
+        border-radius: $jv-radius-sm !important;
+        padding: $jv-space-2 $jv-space-3 !important;
+        margin-left: 0;
+        margin-right: 0;
+        gap: $jv-space-2 !important;
+        transition: background $jv-transition-fast;
+
+        &:hover {
+          background: $jv-hover-bg !important;
+        }
+
+        // Smaller avatar for replies
+        > .bg-body,
+        > div:first-child {
+          .avatar,
+          [component="user/picture"] {
+            width: 20px !important;
+            height: 20px !important;
+          }
+        }
+      }
+
+      // Post content area
+      .post-container {
+        padding: 0 !important;
+        background: transparent !important;
+        border: none !important;
+      }
+
+      // Reply header - inline, compact
+      .post-header {
+        font-size: $jv-font-size-xs !important;
+        min-height: auto !important;
+        margin-bottom: 0 !important;
+        display: flex;
+        align-items: center;
+        gap: $jv-space-2;
+
+        .fw-bold,
+        a[data-username] {
+          font-size: $jv-font-size-xs !important;
+          font-weight: 600;
+          color: $jv-text-main;
+        }
+
+        .text-muted {
+          font-size: $jv-font-size-xs !important;
+        }
+
+        // Hide post index in replies
+        .post-index {
+          display: none !important;
+        }
+      }
+
+      // Reply content - tighter
+      [component="post/content"] {
+        font-size: $jv-font-size-sm !important;
+        line-height: $jv-line-height-base;
+        color: $jv-text-main;
+        margin-top: $jv-space-1;
+      }
+
+      // Reply footer - override main post styles (no border, tighter spacing)
+      [component="post/footer"],
+      .post-footer {
+        margin-top: $jv-space-1 !important;
+        border-top: none !important;
+      }
+
+      // Smaller action buttons for compact reply layout (inherits opacity/hover behavior from main rule)
+      [component="post/actions"] {
+        gap: $jv-space-1 !important;
+
+        .btn,
+        .btn-ghost {
+          padding: $jv-space-1 $jv-space-2 !important;
+          font-size: $jv-font-size-xs !important;
+
+          i {
+            font-size: 12px !important;
+          }
+        }
+      }
     }
   }
 }
@@ -666,7 +1105,7 @@ body.template-topic {
   body.template-topic {
     .topic-header h1,
     .topic-header [component="topic/title"] {
-      font-size: 22px;
+      font-size: $jv-font-size-xl;
     }
 
     .quick-reply,
@@ -674,8 +1113,25 @@ body.template-topic {
       padding: $jv-space-4;
     }
 
+    // Mobile adjustments for threaded replies
     [component="post/replies/container"] {
-      padding-left: $jv-space-4;
+      margin-left: $jv-space-3;
+
+      &::before {
+        left: -$jv-space-2;
+      }
+
+      [component="post"] .post-container-parent {
+        padding: $jv-space-2 $jv-space-3 !important;
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+
+    // Mobile adjustments for parent context
+    [component="post/parent"] {
+      padding: $jv-space-1 0 $jv-space-1 $jv-space-2 !important;
+      margin-left: 0 !important;
     }
   }
 }

package/static/lib/theme.js

@@ -6,14 +6,194 @@
 (function() {
   'use strict';
 
+  var carouselCounter = 0;
+
   // Theme initialization
   $(document).ready(function() {
     console.log('JAVIS Community Theme initialized');
 
     // Ensure sidebar toggle works (reinitialize if Harmony's handler isn't loaded)
     initSidebarToggle();
+
+    // Initialize image carousels for posts with multiple images
+    initPostImageCarousels();
+
+    // Fix bookmark alert - only show when bookmark is meaningfully ahead
+    fixBookmarkAlert();
+
+    // Initialize parent post click navigation with smooth scroll
+    initParentPostNavigation();
+
+    // Initialize post hover actions (show actions only on directly hovered post)
+    initPostHoverActions();
+
+    // 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();
+    });
+
+    // Handle post edits - need to re-process the edited post
+    $(window).on('action:posts.edited', function(ev, data) {
+      if (data && data.post && data.post.pid) {
+        // Find the edited post and remove the processed flag so it gets re-scanned
+        var $post = $('[data-pid="' + data.post.pid + '"]');
+        var $content = $post.find('[component="post/content"]');
+        $content.removeAttr('data-carousel-processed');
+        // Remove any existing carousel in this post
+        $content.find('.post-image-carousel').remove();
+        // Re-initialize
+        initPostImageCarousels();
+      }
+    });
   });
 
+  /**
+   * Convert multiple images in post content to Bootstrap carousels
+   */
+  function initPostImageCarousels() {
+    // Find all post content areas that haven't been processed
+    $('[component="post/content"]:not([data-carousel-processed])').each(function() {
+      var $content = $(this);
+      $content.attr('data-carousel-processed', 'true');
+
+      // Find all images in post content - including those in links (lightbox) and paragraphs
+      var $images = $content.find('img').filter(function() {
+        var $img = $(this);
+
+        // Exclude images already in a carousel
+        if ($img.closest('.carousel, .post-image-carousel').length) {
+          return false;
+        }
+
+        // Exclude emojis and small icons by class
+        if ($img.hasClass('emoji') || $img.hasClass('emoji-img') || $img.hasClass('icon') || $img.hasClass('not-responsive')) {
+          return false;
+        }
+
+        // Check the image source to determine if it's a content image
+        var src = $img.attr('src') || '';
+
+        // Include images from uploads folder or with image extensions
+        var isContentImage = src.indexOf('/assets/uploads/') !== -1 ||
+                            src.indexOf('/files/') !== -1 ||
+                            src.match(/\.(jpg|jpeg|png|gif|webp)(\?|$)/i);
+
+        if (!isContentImage) {
+          return false;
+        }
+
+        // Exclude tiny images by checking width/height attributes if present
+        var width = $img.attr('width');
+        var height = $img.attr('height');
+        if ((width && parseInt(width, 10) < 50) || (height && parseInt(height, 10) < 50)) {
+          return false;
+        }
+
+        return true;
+      });
+
+      // Only create carousel if 2+ images
+      if ($images.length >= 2) {
+        createCarousel($content, $images);
+        console.log('JAVIS: Found ' + $images.length + ' images, creating carousel');
+      } else if ($images.length > 0) {
+        console.log('JAVIS: Found ' + $images.length + ' image(s), not enough for carousel');
+      }
+    });
+  }
+
+  /**
+   * Create a Bootstrap 5 carousel from a set of images
+   */
+  function createCarousel($content, $images) {
+    var carouselId = 'post-carousel-' + (++carouselCounter);
+
+    // Build carousel HTML
+    var carouselHtml = '<div id="' + carouselId + '" class="carousel slide post-image-carousel" data-bs-ride="false">';
+
+    // Indicators (dots)
+    carouselHtml += '<div class="carousel-indicators">';
+    $images.each(function(index) {
+      var activeClass = index === 0 ? 'active' : '';
+      var ariaCurrent = index === 0 ? 'aria-current="true"' : '';
+      carouselHtml += '<button type="button" data-bs-target="#' + carouselId + '" data-bs-slide-to="' + index + '" class="' + activeClass + '" ' + ariaCurrent + ' aria-label="Slide ' + (index + 1) + '"></button>';
+    });
+    carouselHtml += '</div>';
+
+    // Carousel inner (slides)
+    carouselHtml += '<div class="carousel-inner">';
+    $images.each(function(index) {
+      var $img = $(this);
+      var src = $img.attr('src');
+      var alt = $img.attr('alt') || 'Image ' + (index + 1);
+      var activeClass = index === 0 ? 'active' : '';
+      carouselHtml += '<div class="carousel-item ' + activeClass + '">';
+      carouselHtml += '<img src="' + src + '" class="d-block w-100" alt="' + alt + '" loading="lazy">';
+      carouselHtml += '</div>';
+    });
+    carouselHtml += '</div>';
+
+    // Navigation arrows
+    carouselHtml += '<button class="carousel-control-prev" type="button" data-bs-target="#' + carouselId + '" data-bs-slide="prev">';
+    carouselHtml += '<span class="carousel-control-prev-icon" aria-hidden="true"></span>';
+    carouselHtml += '<span class="visually-hidden">Previous</span>';
+    carouselHtml += '</button>';
+    carouselHtml += '<button class="carousel-control-next" type="button" data-bs-target="#' + carouselId + '" data-bs-slide="next">';
+    carouselHtml += '<span class="carousel-control-next-icon" aria-hidden="true"></span>';
+    carouselHtml += '<span class="visually-hidden">Next</span>';
+    carouselHtml += '</button>';
+
+    carouselHtml += '</div>';
+
+    // Find the topmost element to insert carousel before
+    // Images can be in: <p><img></p>, <p><a><img></a></p>, <a><img></a>, or just <img>
+    var $firstImg = $images.first();
+    var $insertBefore = $firstImg;
+
+    // Walk up to find the direct child of $content
+    while ($insertBefore.parent().length && !$insertBefore.parent().is($content)) {
+      $insertBefore = $insertBefore.parent();
+    }
+
+    // Insert carousel before the first image's container
+    $insertBefore.before(carouselHtml);
+
+    // Collect elements to remove (images and their empty containers)
+    var elementsToRemove = [];
+    $images.each(function() {
+      var $img = $(this);
+      var $element = $img;
+
+      // Walk up to find the direct child of $content
+      while ($element.parent().length && !$element.parent().is($content)) {
+        $element = $element.parent();
+      }
+
+      // Mark for removal if not already marked
+      if (elementsToRemove.indexOf($element[0]) === -1) {
+        elementsToRemove.push($element[0]);
+      }
+    });
+
+    // Remove the original image containers
+    $(elementsToRemove).remove();
+
+    // Initialize Bootstrap carousel
+    var carouselEl = document.getElementById(carouselId);
+    if (carouselEl && typeof bootstrap !== 'undefined') {
+      new bootstrap.Carousel(carouselEl, {
+        interval: false, // Don't auto-slide
+        touch: true,
+        wrap: true
+      });
+    }
+
+    console.log('JAVIS: Created carousel with ' + $images.length + ' images');
+  }
+
   function initSidebarToggle() {
     // Check if the toggle element exists
     var toggleEl = $('[component="sidebar/toggle"]');
@@ -51,4 +231,143 @@
     console.log('JAVIS: Sidebar toggle initialized');
   }
 
+  /**
+   * Fix the bookmark alert bug - NodeBB shows "Click here to return to last read post"
+   * even when the bookmark position isn't meaningfully ahead of the current position.
+   *
+   * The bug: NodeBB checks if bookmark exists and postcount > threshold, but doesn't
+   * check if the bookmark is actually ahead of where the user currently is.
+   *
+   * This fix removes the bookmark alert if:
+   * 1. The bookmark is at position 1 or 2 (meaningless to "return" to the start)
+   * 2. The bookmark is at or behind the current post index
+   */
+  function fixBookmarkAlert() {
+    $(window).on('action:topic.loaded', function() {
+      // Small delay to let NodeBB's handleBookmark run first
+      setTimeout(function() {
+        if (typeof ajaxify === 'undefined' || !ajaxify.data || !ajaxify.data.template || !ajaxify.data.template.topic) {
+          return;
+        }
+
+        require(['storage', 'alerts'], function(storage, alerts) {
+          var tid = ajaxify.data.tid;
+          var bookmark = ajaxify.data.bookmark || storage.getItem('topic:' + tid + ':bookmark');
+          var postIndex = ajaxify.data.postIndex || 1;
+          var bookmarkInt = parseInt(bookmark, 10) || 0;
+          var postIndexInt = parseInt(postIndex, 10) || 1;
+
+          // Remove bookmark alert if:
+          // 1. No meaningful bookmark (position 1 or 2 - essentially the start)
+          // 2. Bookmark is at or behind current position (nothing to "return" to)
+          // 3. Bookmark is only 1-2 posts ahead (not worth showing notification)
+          var shouldRemoveAlert = bookmarkInt <= 2 ||
+                                  bookmarkInt <= postIndexInt ||
+                                  (bookmarkInt - postIndexInt) <= 2;
+
+          if (shouldRemoveAlert) {
+            alerts.remove('bookmark');
+            console.log('JAVIS: Removed unnecessary bookmark alert (bookmark: ' + bookmarkInt + ', current: ' + postIndexInt + ')');
+          }
+        });
+      }, 100);
+    });
+  }
+
+  /**
+   * Initialize parent post click navigation with smooth scroll
+   * Clicking the "Replying to" component scrolls to the parent post
+   */
+  function initParentPostNavigation() {
+    // Use event delegation on the topic container
+    $('[component="topic"]').off('click.javis-parent').on('click.javis-parent', '[component="post/parent"]', function(e) {
+      // Don't navigate if clicking on a link (username, etc.)
+      if ($(e.target).closest('a').length) {
+        return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      var parentPid = $(this).attr('data-parent-pid');
+      if (!parentPid) {
+        return;
+      }
+
+      // Find the parent post element
+      var $parentPost = $('[component="topic"] > [component="post"][data-pid="' + parentPid + '"]');
+
+      if ($parentPost.length) {
+        // Post is on the current page - smooth scroll to it
+        smoothScrollToPost($parentPost);
+      } else {
+        // Post is on a different page - navigate via URL
+        window.location.href = config.relative_path + '/post/' + parentPid;
+      }
+    });
+  }
+
+  /**
+   * Smooth scroll to a post element with highlight effect
+   */
+  function smoothScrollToPost($postElement) {
+    if (!$postElement.length) {
+      return;
+    }
+
+    // Calculate scroll position (with offset for header)
+    var headerHeight = $('header').outerHeight() || 60;
+    var scrollTop = $postElement.offset().top - headerHeight - 20;
+
+    // Smooth scroll
+    $('html, body').animate({
+      scrollTop: scrollTop
+    }, 400, 'swing', function() {
+      // Add highlight effect after scroll completes
+      highlightPost($postElement);
+    });
+  }
+
+  /**
+   * Briefly highlight a post to draw attention
+   */
+  function highlightPost($postElement) {
+    var $container = $postElement.find('.post-container-parent');
+    if (!$container.length) {
+      $container = $postElement;
+    }
+
+    // Add highlight class
+    $container.addClass('post-highlight-flash');
+
+    // Remove after animation
+    setTimeout(function() {
+      $container.removeClass('post-highlight-flash');
+    }, 1500);
+  }
+
+  /**
+   * Initialize post hover actions
+   * Adds 'post-hovered' class only to the directly hovered post container
+   * This prevents CSS hover from bubbling up to parent posts
+   */
+  function initPostHoverActions() {
+    // Use event delegation for all post containers
+    $(document).off('mouseenter.javis-hover mouseleave.javis-hover', '.post-container-parent');
+
+    $(document).on('mouseenter.javis-hover', '.post-container-parent', function(e) {
+      // Stop propagation to prevent parent containers from getting the event
+      e.stopPropagation();
+      // Remove class from all other containers first
+      $('.post-container-parent.post-hovered').removeClass('post-hovered');
+      // Add class only to this specific container
+      $(this).addClass('post-hovered');
+    });
+
+    $(document).on('mouseleave.javis-hover', '.post-container-parent', function(e) {
+      e.stopPropagation();
+      $(this).removeClass('post-hovered');
+    });
+  }
+
 })();

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

@@ -0,0 +1,9 @@
+<div component="post/parent" data-parent-pid="{./parent.pid}" data-uid="{./parent.uid}" class="btn btn-ghost btn-sm d-flex gap-2 text-start flex-row mb-2 post-parent-clickable" style="font-size: 13px;">
+	<div class="d-flex gap-2 text-nowrap">
+		<div class="d-flex flex-nowrap gap-1 align-items-center">
+			<a href="{config.relative_path}/user/{./parent.user.userslug}" class="text-decoration-none lh-1" onclick="event.stopPropagation();">{buildAvatar(./parent.user, "16px", true, "not-responsive align-middle")}</a>
+			<a class="fw-semibold text-truncate" style="max-width: 150px;" href="{config.relative_path}/user/{./parent.user.userslug}" onclick="event.stopPropagation();">{./parent.user.displayname}</a>
+		</div>
+	</div>
+	<div component="post/parent/content" class="text-muted line-clamp-1 text-break w-100">{./parent.content}</div>
+</div>