feat: move topic thumb to template

use a single modal to show all thumbs and allow switching

public/src/client/topic.js

@@ -178,17 +178,31 @@ define('forum/topic', [
 			return;
 		}
 
-		listEl.addEventListener('click', (e) => {
+		listEl.addEventListener('click', async (e) => {
-			const subselector = e.target.closest('a');
+			const clickedThumb = e.target.closest('a');
-			if (subselector) {
+			if (clickedThumb) {
+				const clickedThumbIndex = Array.from(clickedThumb.parentNode.children).indexOf(clickedThumb);
 				e.preventDefault();
+				const thumbs = ajaxify.data.thumbs.map(t => ({ ...t }));
+				thumbs.forEach((t, i) => {
+					t.selected = i === clickedThumbIndex;
+				});
+				const html = await app.parseAndTranslate('modals/topic-thumbs-view', {
+					src: clickedThumb.href,
+					thumbs: thumbs,
+				});
 
-				const src = subselector.href;
+				const modal = bootbox.dialog({
-				bootbox.dialog({
 					size: 'lg',
 					onEscape: true,
 					backdrop: true,
-					message: `<div class="text-center mb-5"><img src="${src}" style="max-height: 66vh;" /></div>`,
+					message: html,
+				});
+				modal.on('click', '[component="topic/thumb/select"]', function () {
+					$('[component="topic/thumb/select"]').removeClass('border-primary');
+					$(this).addClass('border-primary');
+					$('[component="topic/thumb/current"]')
+						.attr('src', $(this).attr('src'));
 				});
 			}
 		});

src/views/modals/topic-thumbs-view.tpl

@@ -0,0 +1,13 @@
+<div class="d-flex flex-column gap-4 topic-thumbs-view-modal">
+	<div class="d-flex justify-content-center align-items-center mb-5" style="height: 33vh; max-height: 33vh;">
+		<img component="topic/thumb/current" src="{src}" style="max-height: 33vh;" />
+	</div>
+	<hr/>
+	<div class="d-flex justify-content-center mb-3 gap-3">
+	{{{ each thumbs }}}
+		<div>
+			<img component="topic/thumb/select" class="pointer rounded border border-3 {{{ if ./selected }}}border-primary{{{ end }}}" height="64px" style="width: auto;" src="{./url}"/>
+		</div>
+	{{{ end }}}
+	</div>
+</div>