@okjavis/nodebb-theme-javis 6.0.2 → 6.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "6.0.2",
+  "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

@@ -44,7 +44,13 @@
 
 			{{{ if !posts.length }}}
 			{{{ if showFollowed }}}
-			<div class="alert alert-info text-center">Follow some members to see their posts here.</div>
+			<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>
 			{{{ else }}}
 			<div class="alert alert-warning text-center">[[feed:no-posts-found]]</div>
 			{{{ end }}}
@@ -134,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() {