@okjavis/nodebb-theme-javis 3.0.0 → 3.0.2

package/scss/_sidebar.scss

@@ -6,13 +6,13 @@
 // ===========================================================
 // JAVIS SIDEBAR LOGO
 // ===========================================================
-// Height should match the sticky header (64px) for visual alignment
+// Height should match the sticky header (56px) for visual alignment
 .javis-sidebar-logo {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 65px; // Match header height (12px + 40px + 12px)
-  min-height: 65px;
+  height: 56px; // Match header height (8px + 36px + 8px + border)
+  min-height: 56px;
   padding: 0 $jv-space-4; // Only horizontal padding
   margin-bottom: $jv-space-3; // 12px space below border before nav items
   border-bottom: 1px solid $jv-border-subtle;
@@ -26,17 +26,17 @@
     text-decoration: none;
   }
 
-  // Icon logo (collapsed state) - 28px to match header logo
+  // Icon logo (collapsed state) - 36px for better visibility
   .javis-logo-icon {
-    width: 28px;
-    height: 28px;
+    width: 36px;
+    height: 36px;
     object-fit: contain;
   }
 
-  // Full logo (expanded state) - max 140px width, 28px height
+  // Full logo (expanded state) - max 140px width, 36px height
   .javis-logo-full {
     max-width: 140px;
-    height: 28px;
+    height: 36px;
     object-fit: contain;
   }
 }
@@ -50,6 +50,7 @@
 // ===========================================================
 // LEFT SIDEBAR (Main Navigation)
 // ===========================================================
+// Reddit-style wider sidebar (200px) with expanded state as default
 
 // Override Bootstrap's bg-light class on sidebar
 .sidebar.bg-light,
@@ -59,9 +60,18 @@ nav.sidebar.bg-light {
 
 .sidebar {
   background: $jv-surface !important; // Pure white - cohesive with header
-  border-right: 1px solid $jv-border-subtle;
+  border-right: none !important; // Clean look - no vertical divider
   padding-top: 0 !important; // Remove top padding so logo sits at top edge
 
+  // Desktop: Use 270px width when expanded (Reddit-style)
+  @media (min-width: 992px) {
+    &.open {
+      min-width: 270px !important;
+      max-width: 270px !important;
+      width: 270px !important;
+    }
+  }
+
   // Nav items - proper spacing between items
   .nav-item {
     margin-bottom: $jv-space-2; // 4px between nav items - compact like Slack/Discord
@@ -498,7 +508,8 @@ div[data-widget-area] {
 // RIGHT SIDEBAR WIDGET AREA (Reddit-style)
 // ===========================================================
 div[data-widget-area="right"],
-.col-lg-3.col-sm-12 {
+div[data-widget-area="right"].col-lg-3.col-sm-12,
+.col-lg-3.col-sm-12[data-widget-area="right"] {
   display: flex;
   flex-direction: column;
 
@@ -506,33 +517,49 @@ div[data-widget-area="right"],
   position: sticky;
   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
-
-  // Smooth scrollbar styling (webkit browsers)
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
 
-  &::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 3px;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.25);
-    }
-  }
+  // CRITICAL: Remove all overflow/scroll from sidebar and ALL descendants
+  overflow: visible !important;
+  max-height: none !important;
 
   // Widget card container
   > div {
     background: $jv-surface;
     border: 1px solid $jv-border-subtle;
     border-radius: $jv-radius-lg;
-    overflow: hidden;
+    overflow: hidden; // Hide overflow on card itself
+  }
+
+  // Trending Now widget - needs scrollable content
+  > div:has(#recent_posts),
+  > div:has(ul[id*="recent"]),
+  > div:has(.widget-posts) {
+    overflow: hidden !important; // Card clips content
+
+    // Inner scrollable container
+    > div {
+      max-height: 500px !important;
+      overflow-y: auto !important;
+      overflow-x: hidden !important;
+
+      // Scrollbar styling
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      &::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.03);
+        border-radius: 3px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.15);
+        border-radius: 3px;
+        &:hover {
+          background: rgba(0, 0, 0, 0.25);
+        }
+      }
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.03);
+    }
   }
 
   // Widget header/title - clean and simple
@@ -542,14 +569,19 @@ div[data-widget-area="right"],
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: $jv-text-soft;
-    padding: $jv-space-4 $jv-space-4 $jv-space-4 $jv-space-4;
+    padding: $jv-space-4 0 $jv-space-3 0 !important; // top right bottom left - no horizontal padding (body handles it)
     margin: 0 !important;
     border-bottom: none !important; // Removed border
   }
 
+  // Remove hr dividers after widget headers
+  hr {
+    display: none !important;
+  }
+
   // Add spacing between widgets
   > div + div {
-    margin-top: $jv-space-4;
+    margin-top: $jv-space-3; // Reduced from 16px to 12px
   }
 }
 
@@ -563,30 +595,35 @@ div[data-widget-area="right"] {
     border: none !important;
     border-radius: 0 !important;
     overflow: visible !important;
-
-    // Keep the header styled
-    h5 {
-      padding: $jv-space-3 0 !important;
-      border-bottom: none !important;
-    }
+    padding: 0 $jv-space-4 !important; // Horizontal padding for alignment
+    margin-bottom: 0 !important; // Remove extra margin
   }
 
   .popular-tags {
     padding: 0 !important;
-    margin: 0;
+    margin: 0 !important; // Reset all margins
+
+    // Override Bootstrap mb-3 class
+    &.mb-3 {
+      margin-bottom: $jv-space-2 !important; // Space between widgets (reduced to 8px)
+    }
   }
 
   // Override Bootstrap's grid - make it a flowing wrap layout
-  .tag-list {
+  .tag-list,
+  .tag-list.row {
     display: flex !important;
     flex-wrap: wrap !important;
     gap: $jv-space-2 !important; // 8px gap between pills
     padding: 0 !important;
     margin: 0 !important;
+    margin-left: -$jv-space-3 !important; // Offset to align first pill's text with header (compensate for pill padding)
+    margin-bottom: $jv-space-2 !important; // Space between widgets (8px)
 
     // Reset Bootstrap row/column styles
     &.row {
-      margin: 0 !important;
+      margin-left: -$jv-space-3 !important;
+      margin-bottom: $jv-space-2 !important;
       display: flex !important;
       flex-wrap: wrap !important;
     }
@@ -672,43 +709,13 @@ div[data-widget-area="right"] {
   }
 
   // ===========================================================
-  // TRENDING POSTS WIDGET - Widget Essentials Specific
+  // TRENDING POSTS WIDGET - Widget Essentials / Recent Posts
   // ===========================================================
 
-  // Override Bootstrap's overflow-hidden on wrapper divs
-  .overflow-hidden {
-    overflow: visible !important;
-  }
-
-  // The wrapper div after h5 (Trending Posts header) - make it scrollable
-  h5 + div {
-    max-height: 420px;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
-
-    // Scrollbar styling
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.15);
-      border-radius: 3px;
-      &:hover {
-        background: rgba(0, 0, 0, 0.25);
-      }
-    }
-  }
-
-  // Recent posts container - no scroll here, parent wrapper handles it
+  // Recent posts container styling
   #recent_posts,
   ul[id*="recent"] {
-    max-height: none !important;
-    overflow: visible !important;
-    padding: $jv-space-3 !important;
-    padding-bottom: $jv-space-5 !important;
+    padding: $jv-space-3 $jv-space-4 $jv-space-4 $jv-space-4 !important;
     margin: 0;
     list-style: none;
     display: flex !important;
@@ -829,4 +836,51 @@ div[data-widget-area="right"] {
       }
     }
   }
+}
+
+// ===========================================================
+// CRITICAL: Override ALL overflow rules on right sidebar
+// This MUST be at the end to have highest specificity
+// The selector [data-widget-area=right] gets overflow-y:auto from somewhere
+// ===========================================================
+
+// Override the base selector that has overflow-y: auto
+[data-widget-area="right"] {
+  overflow: visible !important;
+  overflow-y: visible !important;
+  overflow-x: visible !important;
+  max-height: none !important;
+}
+
+// More specific selectors to ensure override
+div[data-widget-area="right"],
+.col-lg-3[data-widget-area="right"],
+.col-sm-12[data-widget-area="right"] {
+  overflow: visible !important;
+  overflow-y: visible !important;
+  overflow-x: visible !important;
+  max-height: none !important;
+}
+
+// Override Bootstrap's overflow-hidden utility
+div[data-widget-area="right"] .overflow-hidden,
+[data-widget-area="right"] .overflow-hidden {
+  overflow: visible !important;
+  overflow-x: visible !important;
+  overflow-y: visible !important;
+  max-height: none !important;
+}
+
+// Hide any scrollbar that might appear (as backup)
+[data-widget-area="right"]::-webkit-scrollbar,
+div[data-widget-area="right"]::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+[data-widget-area="right"],
+div[data-widget-area="right"] {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
 }

package/static/lib/theme.js

@@ -12,9 +12,12 @@
   $(document).ready(function() {
     console.log('JAVIS Community Theme initialized');
 
-    // Ensure sidebar toggle works (reinitialize if Harmony's handler isn't loaded)
+    // Initialize sidebar toggle handler
     initSidebarToggle();
 
+    // Auto-expand sidebar on desktop (Reddit-style default)
+    initSidebarAutoExpand();
+
     // Initialize image carousels for posts with multiple images
     initPostImageCarousels();
 
@@ -198,30 +201,33 @@
     console.log('JAVIS: Created carousel with ' + $images.length + ' images');
   }
 
+  /**
+   * Initialize sidebar toggle click handler
+   * Ensures the sidebar can be toggled and saves user preference
+   */
   function initSidebarToggle() {
-    // Check if the toggle element exists
-    var toggleEl = $('[component="sidebar/toggle"]');
-    if (!toggleEl.length) {
+    var $toggle = $('[component="sidebar/toggle"]');
+    if (!$toggle.length) {
       console.log('JAVIS: Sidebar toggle element not found');
       return;
     }
 
     // Remove any existing handlers to avoid duplicates, then add our handler
-    toggleEl.off('click.javis').on('click.javis', function(e) {
+    $toggle.off('click.javis').on('click.javis', function(e) {
       e.preventDefault();
       e.stopPropagation();
 
-      var sidebarEl = $('.sidebar');
-      sidebarEl.toggleClass('open');
+      var $sidebar = $('.sidebar-left');
+      $sidebar.toggleClass('open');
 
-      console.log('JAVIS: Sidebar toggled, open:', sidebarEl.hasClass('open'));
+      console.log('JAVIS: Sidebar toggled, open:', $sidebar.hasClass('open'));
 
       // Save preference if user is logged in
       if (typeof app !== 'undefined' && app.user && app.user.uid) {
         require(['api'], function(api) {
           api.put('/users/' + app.user.uid + '/settings', {
             settings: {
-              openSidebars: sidebarEl.hasClass('open') ? 'on' : 'off',
+              openSidebars: $sidebar.hasClass('open') ? 'on' : 'off',
             },
           }).catch(function(err) {
             console.warn('JAVIS: Could not save sidebar preference', err);
@@ -235,6 +241,40 @@
     console.log('JAVIS: Sidebar toggle initialized');
   }
 
+  /**
+   * Auto-expand sidebar on desktop (Reddit-style default)
+   * The sidebar will be expanded by default on desktop, but users can still toggle it.
+   * Their preference is saved and respected on subsequent visits.
+   */
+  function initSidebarAutoExpand() {
+    // Only run on desktop (min-width: 992px)
+    if ($(window).width() < 992) {
+      return;
+    }
+
+    var $sidebar = $('.sidebar-left');
+    if (!$sidebar.length) {
+      return;
+    }
+
+    // Check if user has a saved preference (via config.theme.openSidebars)
+    // If they've explicitly closed the sidebar before, respect that
+    var hasUserPreference = typeof config !== 'undefined' &&
+                           config.theme &&
+                           typeof config.theme.openSidebars !== 'undefined';
+
+    // If sidebar is not already open and user hasn't explicitly closed it, expand it
+    if (!$sidebar.hasClass('open')) {
+      // If no user preference set, auto-expand (first-time visitors)
+      // If user preference is 'on', also expand
+      if (!hasUserPreference || config.theme.openSidebars === 'on' || config.theme.openSidebars === true) {
+        $sidebar.addClass('open');
+        $(window).trigger('action:sidebar.toggle');
+        console.log('JAVIS: Auto-expanded sidebar (Reddit-style default)');
+      }
+    }
+  }
+
   /**
    * 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.

package/templates/feed.tpl

@@ -0,0 +1,148 @@
+<!--
+    JAVIS Community Theme - Feed Page
+    Overrides nodebb-plugin-feed/public/templates/feed.tpl
+    Structure: Content first, Image second, Action bar third (separated)
+-->
+<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 }}}
+
+			<div class="d-flex justify-content-between py-2 mb-2 gap-1">
+				{{{ if canPost }}}
+				<button id="new_topic" class="btn btn-primary btn-sm">[[category:new-topic-button]]</button>
+				{{{ end }}}
+				{{{ if (!loggedIn && !canPost) }}}
+				<a href="{config.relative_path}/login" class="btn btn-primary btn-sm">[[category:guest-login-post]]</a>
+				{{{ end }}}
+
+				<div class="d-flex justify-content-end gap-1">
+					<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
+
+					<div 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}">
+
+					<!-- 1. CONTENT (first) -->
+					<div class="d-flex gap-2 p-3">
+						<div class="d-none d-lg-block">
+							<a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "40px", true, "not-responsive")}</a>
+						</div>
+						<div class="post-body d-flex flex-column gap-2 flex-grow-1 hover-parent" style="min-width: 0px;">
+							{{{ 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>
+						</div>
+					</div>
+
+					<!-- 2. IMAGE (second) -->
+					{{{ 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 }}}
+
+					<!-- 3. ACTION BAR (third - separated from content) -->
+					<div class="feed-action-bar d-flex justify-content-between px-3 py-2 border-top">
+						<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>
+				</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>

package/templates/partials/header/brand.tpl

@@ -1,11 +1,64 @@
 {{{ if widgets.brand-header.length }}}
 <div class="container-lg px-md-4 brand-container">
 	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		<!-- Search widget area (left/center) -->
 		<div data-widget-area="brand-header" class="flex-fill gap-3 p-2 align-self-center">
 			{{{each widgets.brand-header}}}
 			{{./html}}
 			{{{end}}}
 		</div>
+
+		<!-- Right side: Notifications -->
+		<div class="header-right-actions d-flex align-items-center gap-2 ms-auto">
+			{{{ if config.loggedIn }}}
+			<!-- Notifications dropdown (logged-in users) -->
+			<div class="dropdown" component="notifications">
+				<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link d-flex align-items-center position-relative p-2 rounded-circle" aria-haspopup="true" aria-expanded="false" aria-label="[[global:header.notifications]]" style="width: 40px; height: 40px; justify-content: center;">
+					<span class="position-relative">
+						<i component="notifications/icon" class="fa fa-fw fa-lg {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}}" style="color: #6b7280;"></i>
+						<span component="notifications/count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger {{{ if !unreadCount.notification }}}hidden{{{ end }}}" style="font-size: 10px; min-width: 18px;">{unreadCount.notification}</span>
+					</span>
+				</a>
+				<ul class="notifications-dropdown dropdown-menu dropdown-menu-end p-1 shadow" role="menu" style="min-width: 320px;">
+					<li>
+						<div component="notifications/list" class="list-container notification-list overscroll-behavior-contain pe-1 ff-base ghost-scrollbar" style="max-height: 400px; overflow-y: auto;">
+							<div class="mb-2 p-1">
+								<div class="d-flex gap-1 justify-content-between">
+									<div class="d-flex gap-2 flex-grow-1 placeholder-wave">
+										<div class="placeholder rounded-circle" style="width: 32px; height: 32px;"></div>
+										<div class="flex-grow-1">
+											<div class="d-flex flex-column">
+												<div class="text-sm">
+													<span class="placeholder placeholder-sm col-4"></span>
+													<span class="placeholder placeholder-sm col-6"></span>
+													<span class="placeholder placeholder-sm col-7"></span>
+												</div>
+												<div class="text-xs">
+													<div class="placeholder placeholder-xs col-6"></div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</li>
+					<li class="dropdown-divider"></li>
+					<li>
+						<div class="d-flex justify-content-center gap-1 flex-wrap p-1">
+							<a role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap text-truncate"><i class="fa fa-check-double"></i> [[notifications:mark-all-read]]</a>
+							<a class="btn btn-sm btn-primary flex-fill text-nowrap text-truncate" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see-all]]</a>
+						</div>
+					</li>
+				</ul>
+			</div>
+			{{{ else }}}
+			<!-- Notification icon for guests (redirects to login) -->
+			<a href="{relative_path}/login" class="nav-link d-flex align-items-center position-relative p-2 rounded-circle guest-notification-btn" aria-label="[[global:header.notifications]]" title="Sign in to view notifications" style="width: 40px; height: 40px; justify-content: center;">
+				<i class="fa fa-fw fa-lg fa-bell-o" style="color: #6b7280;"></i>
+			</a>
+			{{{ end }}}
+		</div>
 	</div>
 </div>
 {{{ end }}}

package/templates/partials/topics_list.tpl

@@ -69,37 +69,28 @@
 			</div>
 			{{{ end }}}
 
-			<!-- Content with optional thumbnail (side by side when image exists) -->
+			<!-- Thumbnail Preview (if exists) -->
 			{{{ if ./thumbs.length }}}
-			<div class="topic-media-row">
-				<div class="topic-media-text">
-					{{{ if ./teaser.content }}}
-					<div class="topic-teaser">
-						{./teaser.content}
-					</div>
-					{{{ end }}}
-				</div>
-				<a class="topic-thumbnail" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">
-					<img src="{./thumbs.0.url}" alt="" loading="lazy" />
-					{{{ if ./thumbs.1 }}}
-					<span class="thumb-count">+{subtract(./thumbs.length, 1)}</span>
-					{{{ end }}}
-				</a>
-			</div>
-			{{{ else }}}
-			<!-- Teaser/Preview Content (no image) -->
+			<a class="topic-thumbnail" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">
+				<img src="{./thumbs.0.url}" alt="" loading="lazy" />
+				{{{ if ./thumbs.1 }}}
+				<span class="thumb-count">+{subtract(./thumbs.length, 1)}</span>
+				{{{ end }}}
+			</a>
+			{{{ end }}}
+
+			<!-- Teaser/Preview Content -->
 			{{{ if ./teaser.content }}}
 			<div class="topic-teaser">
 				{./teaser.content}
 			</div>
 			{{{ end }}}
-			{{{ end }}}
 
 			<!-- Action Bar -->
 			<div class="topic-actions">
 				<a href="{config.relative_path}/topic/{./slug}" class="action-btn">
 					<i class="fa-regular fa-comment"></i>
-					<span>{humanReadableNumber(./postcount, 0)} {{{ if (./postcount == 1) }}}Comment{{{ else }}}Comments{{{ end }}}</span>
+					<span>{humanReadableNumber(./postcount, 0)} Comments</span>
 				</a>
 				<button class="action-btn share-btn" data-url="{config.relative_path}/topic/{./slug}">
 					<i class="fa fa-share"></i>