@okjavis/nodebb-theme-javis 6.0.0 → 6.0.3

package/package.json

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

package/scss/_feed.scss

@@ -1138,6 +1138,104 @@ ul.categories-list {
   }
 }
 
+// ===========================================================
+// SUGGESTED USERS – Following Empty State
+// ===========================================================
+.javis-suggested-users {
+  background: $jv-surface;
+  border: 1px solid $jv-border-subtle;
+  border-radius: $jv-radius-lg;
+  padding: $jv-space-4 $jv-space-6;
+  margin-bottom: $jv-space-4;
+  box-shadow: $jv-shadow-sm;
+}
+
+.javis-suggested-users-title {
+  font-size: $jv-font-size-xs;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: $jv-text-muted;
+  padding: $jv-space-3 0 $jv-space-2;
+  margin: 0;
+}
+
+.javis-sug-card {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: $jv-space-3;
+  padding: $jv-space-3 0;
+  border-bottom: 1px solid $jv-border-subtle;
+
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: $jv-space-2;
+  }
+
+  &:first-child {
+    padding-top: $jv-space-2;
+  }
+
+  // Anchor wrapping the avatar — must be inline-flex
+  > a:first-child {
+    display: inline-flex !important;
+    flex-shrink: 0;
+    line-height: 0;
+  }
+}
+
+.javis-sug-avatar {
+  width: 40px !important;
+  height: 40px !important;
+  min-width: 40px;
+  min-height: 40px;
+  border-radius: 50% !important;
+  flex-shrink: 0;
+  display: block;
+  object-fit: cover;
+}
+
+.javis-sug-avatar-icon {
+  color: #fff;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: 16px;
+  font-weight: 700;
+  font-family: $jv-font-sans;
+  line-height: 1;
+}
+
+.javis-sug-info {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.javis-sug-name {
+  font-size: $jv-font-size-sm;
+  font-weight: 600;
+  color: $jv-text-main;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+
+  &:hover {
+    color: $jv-primary;
+  }
+}
+
+.javis-sug-meta {
+  font-size: $jv-font-size-xs;
+  color: $jv-text-soft;
+}
+
 // ===========================================================
 // MOBILE FIX - Category dropdown positioning
 // Fix dropdown opening from bottom left corner on mobile

package/templates/feed.tpl

@@ -26,20 +26,34 @@
 		<div class="col-lg-6 col-sm-12 ms-auto">
 		{{{ end }}}
 
-			<!-- Controls row for composer prompt injection -->
-			<div class="d-flex justify-content-between py-2 mb-0 gap-1">
-				{{{ if canPost }}}
-				<button id="new_topic" class="btn btn-primary btn-sm d-none">[[category:new-topic-button]]</button>
+			<!-- For You / Following tabs + filter -->
+			<div class="d-flex justify-content-between align-items-center py-2 mb-0 gap-1">
+				{{{ if loggedIn }}}
+				<div class="d-flex gap-1">
+					<a href="{config.relative_path}/feed" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if !showFollowed }}}active{{{ end }}}">For You</a>
+					<a href="{config.relative_path}/feed?users=followed" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if showFollowed }}}active{{{ end }}}">Following</a>
+				</div>
 				{{{ end }}}
+				<div class="d-flex align-items-center gap-1 ms-auto">
+					<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
+					{{{ if canPost }}}
+					<button id="new_topic" class="btn btn-primary btn-sm d-none">[[category:new-topic-button]]</button>
+					{{{ end }}}
+				</div>
 			</div>
 
-			<!-- Category filter - LinkedIn style, right aligned, tight spacing -->
-			<div class="d-flex justify-content-end py-1 feed-category-filter">
-				<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
+			{{{ if !posts.length }}}
+			{{{ if showFollowed }}}
+			<div class="alert alert-info text-center mb-3">Follow new members to see their posts here.</div>
+			<div class="javis-suggested-users">
+				<p style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:#6b7280;margin:0 0 4px;">People you should follow</p>
+				<div id="javis-suggested-users-list">
+					<div class="text-center text-muted py-4"><i class="fa fa-spinner fa-spin me-2"></i></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>
+			{{{ else }}}
+			<div class="alert alert-warning text-center">[[feed:no-posts-found]]</div>
+			{{{ end }}}
 			{{{ end }}}
 
 			<ul component="posts" class="list-unstyled" data-nextstart="{nextStart}">
@@ -126,9 +140,92 @@ $(document).ready(function() {
 	require(['share'], function(share) {
 		share.addShareHandlers('{title}');
 	});
+
 });
 </script>
 
+<script>
+// Suggested users – standalone, same pattern as video embed
+(function() {
+	function loadSuggestedUsers() {
+		var $list = $('#javis-suggested-users-list');
+		if (!$list.length) return;
+
+		fetch((config.relative_path || '') + '/api/users?section=top', {
+			credentials: 'same-origin',
+			headers: { 'Accept': 'application/json' }
+		})
+		.then(function(r) { return r.json(); })
+		.then(function(data) {
+			var users = (data.users || []).filter(function(u) {
+				return u.uid && String(u.uid) !== String(config.uid);
+			}).slice(0, 6);
+
+			if (!users.length) {
+				$list.html('<p class="text-muted text-center py-2 mb-0">No members to suggest yet.</p>');
+				return;
+			}
+
+			$list.html(users.map(function(u, i) {
+				var bg = u['icon:bgColor'] || '#0051ff';
+				var icon = u['icon:text'] || (u.displayname || 'U')[0].toUpperCase();
+				var isLast = i === users.length - 1;
+				var avatarHtml = u.picture
+					? '<img src="' + u.picture + '" style="width:40px;height:40px;min-width:40px;border-radius:50%;object-fit:cover;display:block;" data-bg="' + bg + '" data-icon="' + icon + '" class="javis-sug-avatar-img">'
+					: '<span style="width:40px;height:40px;min-width:40px;border-radius:50%;background:' + bg + ';color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;font-family:system-ui,sans-serif;flex-shrink:0;">' + icon + '</span>';
+				return '<div style="display:flex;align-items:center;gap:12px;padding:10px 0;' + (isLast ? '' : 'border-bottom:1px solid rgba(0,0,0,0.07);') + '">' +
+					'<a href="' + (config.relative_path || '') + '/user/' + u.userslug + '" style="flex-shrink:0;display:inline-flex;line-height:0;">' + avatarHtml + '</a>' +
+					'<div style="flex:1;min-width:0;">' +
+						'<a href="' + (config.relative_path || '') + '/user/' + u.userslug + '" style="font-size:13px;font-weight:600;color:#111;text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + (u.displayname || u.username) + '</a>' +
+						'<span style="font-size:12px;color:#9ca3af;">' + (u.postcount || 0) + ' posts</span>' +
+					'</div>' +
+					'<button class="btn btn-sm rounded-pill javis-follow-btn" style="flex-shrink:0;font-size:12px;font-weight:600;padding:4px 14px;border:1.5px solid #0051ff;color:#0051ff;background:transparent;white-space:nowrap;" data-userslug="' + u.userslug + '">Follow</button>' +
+				'</div>';
+			}).join(''));
+
+			$list.find('img.javis-sug-avatar-img').on('error', function() {
+				var $img = $(this);
+				$img.replaceWith('<span class="javis-sug-avatar javis-sug-avatar-icon" style="background:' + ($img.data('bg') || '#0051ff') + '">' + ($img.data('icon') || 'U') + '</span>');
+			});
+		})
+		.catch(function() {
+			$list.closest('.javis-suggested-users').remove();
+		});
+	}
+
+	// Initial load
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', function() { setTimeout(loadSuggestedUsers, 100); });
+	} else {
+		setTimeout(loadSuggestedUsers, 100);
+	}
+
+	// SPA navigation
+	$(window).on('action:ajaxify.end', function() {
+		setTimeout(loadSuggestedUsers, 100);
+	});
+
+	// Follow button
+	$(document).on('click', '.javis-follow-btn', function() {
+		var $btn = $(this);
+		var userslug = $btn.data('userslug');
+		$btn.prop('disabled', true).text('...');
+		fetch((config.relative_path || '') + '/api/v3/users/' + userslug + '/follow', {
+			method: 'PUT',
+			credentials: 'same-origin',
+			headers: { 'Content-Type': 'application/json', 'x-csrf-token': config.csrf_token },
+			body: JSON.stringify({})
+		}).then(function(r) {
+			if (r.ok) {
+				$btn.text('Following').css({'background':'#0051ff','color':'#fff','border-color':'#0051ff'}).prop('disabled',true);
+			} else { throw new Error(); }
+		}).catch(function() {
+			$btn.prop('disabled', false).text('Follow');
+		});
+	});
+})();
+</script>
+
 <script>
 // Embed videos on feed page - runs independently
 (function() {

package/templates/partials/notifications_list.tpl

@@ -0,0 +1,45 @@
+{{{ if !notifications.length }}}
+<div class="no-notifs text-center p-4 d-flex flex-column">
+	<div class="p-4"><i class="fa-solid fa-wind fs-2 text-muted"></i></div>
+	<div class="text-xs fw-semibold text-muted">[[notifications:no-notifs]]</div>
+</div>
+{{{ end }}}
+
+{{{ each notifications }}}
+<div class="{./readClass}" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
+	<div class="d-flex gap-1 justify-content-between">
+		<div class="btn btn-ghost btn-sm d-flex gap-2 flex-grow-1 text-start align-items-start">
+			<a class="flex-grow-0 flex-shrink-0" href="{{{ if ./user.userslug}}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+				{{{ if (./image && ./from) }}}
+				<img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" onerror="this.onerror=null;this.style.display='none';this.nextElementSibling.classList.remove('hidden');" />
+				<div class="avatar avatar-rounded hidden" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div>
+				{{{ else }}}
+				{{{ if ./icon }}}
+				<div class="avatar avatar-rounded" style="--avatar-size: 32px;"><i class="text-secondary fa {./icon}"></i></div>
+				{{{ else }}}
+				<div class="avatar avatar-rounded" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div>
+				{{{ end }}}
+				{{{ end }}}
+			</a>
+
+			<div class="d-flex flex-grow-1 flex-column align-items-start position-relative">
+				<a href="{./path}" class="text-decoration-none d-inline-block text-reset text-break text-sm ff-sans stretched-link" component="notifications/item/link">
+					{./bodyShort}
+				</a>
+				<div class="text-xs text-muted">{{{ if ./timeagoLong }}}{./timeagoLong}{{{ else }}}<span class="timeago" title="{./datetimeISO}"></span>{{{ end }}}</div>
+			</div>
+		</div>
+		<div>
+			{{{ if ./nid }}}
+			<button class="mark-read btn btn-ghost btn-sm d-flex align-items-center justify-content-center flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
+				<i class="unread fa fa-2xs fa-circle text-primary {{{ if ./read }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-read]]"></i>
+				<i class="read fa fa-2xs fa-circle-o text-secondary {{{ if !./read }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-unread]]"></i>
+			</button>
+			{{{ end }}}
+		</div>
+	</div>
+</div>
+{{{ if !@last }}}
+<hr class="my-1" />
+{{{ end }}}
+{{{ end }}}