@okjavis/nodebb-theme-javis 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "2.1.0",
+  "version": "2.2.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,77 @@ 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
+      .post-header {
+        min-height: 36px; // Match avatar height
+        align-items: center !important;
+        margin-bottom: 0 !important;
+      }
+
       .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;
       }
     }
   }
@@ -138,13 +192,13 @@ 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;
+    gap: $jv-space-2;
+    margin-bottom: $jv-space-3;
+    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 +207,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 +250,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 +284,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; }
@@ -593,42 +737,283 @@ body.template-topic {
   }
 
   // ===========================================================
-  // NESTED REPLIES
+  // PARENT POST CONTEXT (shown when viewing a reply)
   // ===========================================================
-  [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: $jv-surface !important;
+    border: 1px solid $jv-border-subtle !important;
+    border-left: 3px solid $jv-primary !important;
+    border-radius: $jv-radius-sm !important;
+    padding: $jv-space-3 !important;
+    margin-bottom: $jv-space-3 !important;
+    transition: background-color $jv-transition-fast, border-color $jv-transition-fast;
 
-    [component="post"] {
-      margin-bottom: $jv-space-3;
-      padding: $jv-space-4;
-      background: rgba(0, 0, 0, 0.02);
-      border-radius: $jv-radius-sm;
+    &:hover {
+      background: $jv-hover-bg !important;
+      border-color: $jv-border-strong !important;
+      border-left-color: $jv-primary-hover !important;
+    }
+
+    // Header row with avatar and metadata
+    > .d-flex:first-child {
+      gap: $jv-space-2 !important;
+      margin-bottom: $jv-space-2;
+
+      // Small avatar
+      .avatar,
+      [component="user/picture"] {
+        width: 20px !important;
+        height: 20px !important;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      // Username and time
+      .text-nowrap,
+      .fw-bold {
+        font-size: $jv-font-size-xs !important;
+        font-weight: 600;
+        color: $jv-text-main;
+      }
 
-      .post-container { padding: 0; }
+      .text-muted {
+        font-size: $jv-font-size-xs !important;
+        color: $jv-text-soft !important;
+      }
+    }
+
+    // Parent content preview
+    [component="post/parent/content"] {
+      font-size: $jv-font-size-sm !important;
+      color: $jv-text-muted !important;
+      line-height: $jv-line-height-base;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+
+      p {
+        margin: 0;
+      }
     }
   }
 
   // ===========================================================
-  // REPLY COUNT ACCORDION
+  // REPLY COUNT BUTTON (Accordion trigger)
   // ===========================================================
   [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 !important;
+    align-items: center;
+    gap: $jv-space-2;
+    background: $jv-surface !important;
+    border: 1px solid $jv-border-subtle !important;
+    border-radius: $jv-radius-pill !important;
+    padding: $jv-space-1 $jv-space-3 !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;
 
     &:hover {
-      background: $jv-hover-bg;
-      color: $jv-text-main;
+      background: $jv-hover-bg !important;
+      border-color: $jv-border-strong !important;
+      color: $jv-text-main !important;
     }
 
-    .replies-count {
-      color: $jv-text-main;
+    // Avatar stack
+    [component="post/reply-count/avatars"] {
+      display: flex;
+      align-items: center;
+
+      span {
+        margin-left: -4px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+
+      .avatar,
+      img {
+        width: 18px !important;
+        height: 18px !important;
+        border-radius: 50%;
+        border: 2px solid $jv-surface;
+      }
+    }
+
+    // Reply count text
+    .replies-count,
+    [component="post/reply-count/text"] {
       font-weight: 600;
+      color: $jv-text-main;
+    }
+
+    // Last reply time
+    .replies-last {
+      color: $jv-text-soft;
+      font-size: $jv-font-size-xs;
+    }
+
+    // Chevron icon
+    .fa-chevron-down {
+      font-size: 10px;
+      color: $jv-text-soft;
+      transition: transform $jv-transition-fast;
+    }
+
+    // Expanded state
+    &[aria-expanded="true"] {
+      .fa-chevron-down {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  // ===========================================================
+  // NESTED REPLIES CONTAINER (Threaded style)
+  // ===========================================================
+  [component="post/replies/container"] {
+    margin-top: $jv-space-3 !important;
+    margin-bottom: 0 !important;
+    margin-left: $jv-space-6;
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    position: relative;
+
+    // Thread line
+    &::before {
+      content: "";
+      position: absolute;
+      left: -$jv-space-4;
+      top: 0;
+      bottom: $jv-space-4;
+      width: 2px;
+      background: $jv-border-subtle;
+      border-radius: 1px;
+    }
+
+    // Replies list
+    [component="post/replies"],
+    ul.list-unstyled {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: $jv-space-3;
+    }
+
+    // Individual reply posts
+    [component="post"] {
+      margin: 0 !important;
+      padding: 0 !important;
+      background: transparent !important;
+      position: relative;
+
+      // Thread connector dot
+      &::before {
+        content: "";
+        position: absolute;
+        left: -$jv-space-4 - 3px;
+        top: $jv-space-4;
+        width: 8px;
+        height: 8px;
+        background: $jv-surface;
+        border: 2px solid $jv-border-strong;
+        border-radius: 50%;
+        z-index: 1;
+      }
+
+      // Reply card
+      .post-container-parent {
+        background: $jv-surface !important;
+        border: 1px solid $jv-border-subtle !important;
+        border-radius: $jv-radius-sm !important;
+        padding: $jv-space-3 !important;
+        gap: $jv-space-2 !important;
+        transition: border-color $jv-transition-fast, box-shadow $jv-transition-fast;
+
+        &:hover {
+          border-color: $jv-border-strong !important;
+          box-shadow: $jv-shadow-sm;
+        }
+
+        // Smaller avatar for replies
+        > .bg-body,
+        > div:first-child {
+          .avatar,
+          [component="user/picture"] {
+            width: 28px !important;
+            height: 28px !important;
+          }
+        }
+      }
+
+      // Post content area
+      .post-container {
+        padding: 0 !important;
+        background: transparent !important;
+        border: none !important;
+      }
+
+      // Reply header
+      .post-header {
+        font-size: $jv-font-size-xs !important;
+        min-height: auto !important;
+        margin-bottom: $jv-space-1 !important;
+
+        .fw-bold,
+        a[data-username] {
+          font-size: $jv-font-size-xs !important;
+          font-weight: 600;
+        }
+
+        .text-muted {
+          font-size: $jv-font-size-xs !important;
+        }
+
+        // Hide post index in replies
+        .post-index {
+          display: none !important;
+        }
+      }
+
+      // Reply content
+      [component="post/content"] {
+        font-size: $jv-font-size-sm !important;
+        line-height: $jv-line-height-base;
+      }
+
+      // Reply footer/actions
+      [component="post/footer"],
+      .post-footer {
+        margin-top: $jv-space-2 !important;
+        padding-top: $jv-space-2 !important;
+        padding-bottom: 0 !important;
+        border-top: 1px solid $jv-border-subtle !important;
+        border-bottom: none !important;
+      }
+
+      [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: 14px !important;
+          }
+        }
+      }
+
+      // Last reply - no bottom spacing on thread line
+      &:last-child::before {
+        display: block !important;
+      }
     }
   }
 }
@@ -666,7 +1051,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 +1059,35 @@ 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-4;
+
+      &::before {
+        left: -$jv-space-3;
+      }
+
+      [component="post"] {
+        &::before {
+          left: -$jv-space-3 - 3px;
+        }
+      }
+    }
+
+    // Mobile adjustments for parent context
+    [component="post/parent"] {
+      padding: $jv-space-2 !important;
+
+      [component="post/parent/content"] {
+        -webkit-line-clamp: 1;
+      }
+    }
+
+    // Mobile reply count button
+    [component="post/reply-count"] {
+      .replies-last {
+        display: none !important;
+      }
     }
   }
 }

package/static/lib/theme.js

@@ -6,14 +6,186 @@
 (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();
+
+    // 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();
+    });
+
+    // 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 +223,47 @@
     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);
+    });
+  }
+
 })();