nodebb-plugin-recent-cards-2 1.0.0 → 1.0.5

package/library.js

@@ -7,6 +7,7 @@ const _ = require.main.require('lodash');
 const validator = require.main.require('validator');
 const db = require.main.require('./src/database');
 const topics = require.main.require('./src/topics');
+const categories = require.main.require('./src/categories');
 const settings = require.main.require('./src/settings');
 const groups = require.main.require('./src/groups');
 const user = require.main.require('./src/user');
@@ -84,19 +85,7 @@ plugin.renderWidget = async function (widget) {
 	}
 	const topics = await getTopics(widget);
 
-	const categoryMap = {};
-	topics.forEach((t) => {
-		if (t && t.category && !categoryMap[t.category.cid]) {
-			categoryMap[t.category.cid] = {
-				cid: t.category.cid,
-				name: t.category.name,
-				icon: t.category.icon,
-				bgColor: t.category.bgColor,
-				color: t.category.color,
-			};
-		}
-	});
-	const categories = Object.values(categoryMap);
+	const allCats = await getAllCategories();
 
 	const widgetConfig = {
 		sort: widget.data.sort || 'recent',
@@ -110,7 +99,7 @@ plugin.renderWidget = async function (widget) {
 		config: widget.templateData.config,
 		title: widget.data.title || '',
 		carouselMode: plugin.settings.get('enableCarousel'),
-		categories: JSON.stringify(categories).replace(/</g, '\\u003c'),
+		categories: JSON.stringify(allCats).replace(/</g, '\\u003c'),
 		widgetConfig: JSON.stringify(widgetConfig).replace(/</g, '\\u003c'),
 	});
 	return widget;
@@ -121,6 +110,24 @@ function getIdsArray(data, field) {
 	return ids.split(',').map(c => c.trim()).filter(Boolean);
 }
 
+const FILTER_CIDS = [1, 2, 64, 5, 10, 3, 49, 58, 9];
+
+async function getAllCategories() {
+	let allCats = await categories.getCategoriesData(FILTER_CIDS);
+	allCats = allCats.filter(c => c && !c.disabled);
+	// Preserve the defined order
+	const orderMap = {};
+	FILTER_CIDS.forEach((cid, i) => { orderMap[cid] = i; });
+	allCats.sort((a, b) => orderMap[a.cid] - orderMap[b.cid]);
+	return allCats.map(c => ({
+		cid: c.cid,
+		name: c.name,
+		icon: c.icon,
+		bgColor: c.bgColor,
+		color: c.color,
+	}));
+}
+
 function isVisibleInCategory(widget) {
 	const cids = getIdsArray(widget.data, 'cid');
 	return !(
@@ -256,25 +263,14 @@ async function renderExternal(req, res, next) {
 			templateData: {},
 		});
 
-		const categoryMap = {};
-		topicsData.forEach((t) => {
-			if (t && t.category && !categoryMap[t.category.cid]) {
-				categoryMap[t.category.cid] = {
-					cid: t.category.cid,
-					name: t.category.name,
-					icon: t.category.icon,
-					bgColor: t.category.bgColor,
-					color: t.category.color,
-				};
-			}
-		});
+		const allCats = await getAllCategories();
 
 		res.render('partials/nodebb-plugin-recent-cards/header', {
 			topics: topicsData,
 			config: {
 				relative_path: nconf.get('url'),
 			},
-			categories: JSON.stringify(Object.values(categoryMap)).replace(/</g, '\\u003c'),
+			categories: JSON.stringify(allCats).replace(/</g, '\\u003c'),
 			widgetConfig: '{}',
 		});
 	} catch (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-recent-cards-2",
-  "version": "1.0.0",
+  "version": "1.0.5",
   "description": "Add lavender-style cards of recent topics to Persona's category homepage",
   "main": "library.js",
   "repository": {

package/static/lib/main.js

@@ -99,12 +99,15 @@ $(document).ready(function () {
 		const inner = pluginContainer.find('.rc-filter-dropdown-inner');
 		inner.empty();
 
-		// Header with reset link
+		// Sticky header with reset link
 		const header = $('<div class="rc-filter-header d-flex align-items-center justify-content-between px-3 py-2"></div>');
 		header.append($('<span class="text-muted text-xs fw-semibold text-uppercase"></span>').text('Kategoriler'));
 		header.append($('<button type="button" class="btn btn-link btn-sm rc-clear-all text-decoration-none p-0 text-xs"></button>').text('Temizle'));
 		inner.append(header);
 
+		// Scrollable category list
+		const list = $('<div class="rc-filter-dropdown-list"></div>');
+
 		categories.forEach(function (cat) {
 			const isChecked = selectedCids ? selectedCids.includes(cat.cid) : false;
 			const item = $('<label class="rc-filter-option d-flex align-items-center gap-2 px-3 py-2"></label>');
@@ -121,8 +124,10 @@ $(document).ready(function () {
 				item.append($('<i></i>').addClass('fa').addClass(cat.icon).css('color', cat.bgColor || '#6c757d'));
 			}
 			item.append(nameSpan);
-			inner.append(item);
+			list.append(item);
 		});
+
+		inner.append(list);
 	}
 
 	function updateFilterButton(pluginContainer, selectedCids, categories) {

package/static/style.scss

@@ -62,17 +62,24 @@
 		right: 0;
 		left: auto;
 		min-width: min(16rem, 90vw);
-		max-height: clamp(10rem, 40vh, 20rem);
-		overflow-y: auto;
 		z-index: 1050;
 		background: var(--bs-body-bg);
 		border-color: var(--bs-border-color) !important;
 		margin-top: 0.25rem;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
 
 		[data-dir="rtl"] & {
 			right: auto;
 			left: 0;
 		}
+
+		.rc-filter-dropdown-list {
+			max-height: 16.5rem; // ~6 items (6 x 2.75rem)
+			overflow-y: auto;
+			-webkit-overflow-scrolling: touch;
+		}
 	}
 
 	.rc-filter-option {
@@ -118,13 +125,15 @@
 			right: 0 !important;
 			bottom: 0 !important;
 			top: auto !important;
-			max-height: 50vh;
-			max-height: 50dvh; // dynamic viewport height for PWA standalone
 			border-radius: var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0 0;
 			margin-top: 0;
 			min-width: 100%;
-			padding-bottom: env(safe-area-inset-bottom, 0); // iOS home indicator
-			-webkit-overflow-scrolling: touch;
+			padding-bottom: env(safe-area-inset-bottom, 0);
+
+			.rc-filter-dropdown-list {
+				max-height: 50vh;
+				max-height: 50dvh;
+			}
 		}
 	}
 }