From da4618a99a4e7fcb5ca663b93457a774fba4385a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Fri, 8 Aug 2025 13:20:53 -0400
Subject: [PATCH] feat: use topic thumbnails in recent/top/popular topics

---
 library.js                                   |  5 ++-
 public/templates/widgets/partials/topics.tpl | 36 ++++++++++++--------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/library.js b/library.js
index 24281ba..4a06e8b 100644
--- a/library.js
+++ b/library.js
@@ -294,6 +294,7 @@ Widget.renderRecentTopicsWidget = async function (widget) {
 		topics: data.topics,
 		numTopics: numTopics,
 		relative_path: nconf.get('relative_path'),
+		sidebar: sidebarLocations.includes(widget.location),
 	});
 	return widget;
 };
@@ -352,6 +353,7 @@ Widget.renderPopularTopics = async function (widget) {
 		topics: data.topics,
 		numTopics: numTopics,
 		relative_path: nconf.get('relative_path'),
+		sidebar: sidebarLocations.includes(widget.location),
 	});
 	return widget;
 };
@@ -369,6 +371,7 @@ Widget.renderTopTopics = async function (widget) {
 		topics: data.topics,
 		numTopics: numTopics,
 		relative_path: nconf.get('relative_path'),
+		sidebar: sidebarLocations.includes(widget.location),
 	});
 	return widget;
 };
@@ -434,7 +437,7 @@ Widget.renderSuggestedTopics = async function (widget) {
 		topicData = topicData.filter(topic => topic && !topic.deleted);
 	}
 
-	const sidebarLocations = ['left', 'right', 'sidebar'];
+
 	widget.html = await app.renderAsync('widgets/suggestedtopics', {
 		topics: topicData,
 		config: widget.templateData.config,
diff --git a/public/templates/widgets/partials/topics.tpl b/public/templates/widgets/partials/topics.tpl
index 6acd986..3d75fc6 100644
--- a/public/templates/widgets/partials/topics.tpl
+++ b/public/templates/widgets/partials/topics.tpl
@@ -1,25 +1,33 @@
 {{{ each topics }}}
 <li class="widget-topics">
-	<div class="d-flex flex-column gap-2">
-		<a class="topic-title fw-semibold fs-6 text-reset text-break d-block" href="{relative_path}/topic/{./slug}">{./title}</a>
+	<div class="d-flex gap-3 flex-row">
+		{{{ if ./thumbs.length }}}
+		<a class="topic-thumbs position-relative text-decoration-none flex-shrink-0 d-block" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}" aria-label="[[topic:thumb-image]]">
+			<img class="topic-thumb rounded-1 bg-light" style="width: 5.33rem; max-width: 5.33rem; height: auto; max-height: 5rem; object-fit: contain;" src="{./thumbs.0.url}" alt=""/>
+		</a>
+		{{{ end }}}
 
-		<div class="d-flex gap-2 align-items-center text-sm">
-			<a class="text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{{{ if ./teaser.user.userslug }}}{relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}">
-				{buildAvatar(./teaser.user, "24px", true)}
-			</a>
+		<div class="d-flex flex-column gap-2">
+			<a class="topic-title fw-semibold fs-6 text-reset text-break d-block" href="{relative_path}/topic/{./slug}">{./title}</a>
 
-			<div class="post-author d-flex align-items-center gap-1">
-				<a class="lh-1 fw-semibold text-nowrap" href="{config.relative_path}/user/{./teaser.user.userslug}">{./teaser.user.displayname}</a>
+			<div class="d-flex gap-2 align-items-center text-sm">
+				<a class="text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{{{ if ./teaser.user.userslug }}}{relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}">
+					{buildAvatar(./teaser.user, "24px", true)}
+				</a>
+
+				<div class="post-author d-flex align-items-center gap-1">
+					<a class="lh-1 fw-semibold text-nowrap" href="{config.relative_path}/user/{./teaser.user.userslug}">{./teaser.user.displayname}</a>
+				</div>
+				<span class="timeago text-muted lh-1 text-nowrap" title="{./teaser.timestampISO}"></span>
 			</div>
-			<span class="timeago text-muted lh-1 text-nowrap" title="{./teaser.timestampISO}"></span>
-		</div>
 
-		<div class="d-flex justify-content-between">
-			<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-heart text-xs fa-regular text-muted"></i> {humanReadableNumber(./votes)}</div>
+			<div class="d-flex justify-content-between">
+				<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-heart text-xs fa-regular text-muted"></i> {humanReadableNumber(./votes)}</div>
 
-			<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-regular fa-message text-xs text-muted"></i> {humanReadableNumber(./postcount)}</div>
+				<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-regular fa-message text-xs text-muted"></i> {humanReadableNumber(./postcount)}</div>
 
-			<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-regular fa-eye text-xs text-muted"></i> {humanReadableNumber(./viewcount)}</div>
+				<div class="btn btn-link btn-sm text-body pe-none"><i class="fa-fw fa-regular fa-eye text-xs text-muted"></i> {humanReadableNumber(./viewcount)}</div>
+			</div>
 		</div>
 	</div>
 	{{{ if !@last}}}