Replace arrow navigation in theme switcher with `<select>` (#8190)

Follow-up (or replacement) of https://github.com/FreshRSS/FreshRSS/pull/8167

![gif](https://github.com/user-attachments/assets/96cdeaff-36bc-4d0b-9b75-97bd7ff78ba1)

4 files changed, 31 insertions, 98 deletions

diff --git a/app/views/configure/display.phtml b/app/views/configure/display.phtml
index 57f6b0abf..251b5c585 100644
--- a/app/views/configure/display.phtml
+++ b/app/views/configure/display.phtml
@@ -43,30 +43,27 @@
 		<div class="form-group">
 			<label class="group-name" for="theme"><?= _t('conf.display.theme') ?></label>
 			<div class="group-controls">
+				<select id="theme" name="theme">
+				<?php foreach ($this->themes as $theme): ?>
+					<option value="<?= $theme['id'] ?>"<?= FreshRSS_Context::userConf()->theme === $theme['id'] ? ' selected' : '' ?>><?= $theme['name'] ?></option>
+				<?php endforeach ?>
+				</select>
+
 				<div class="theme-preview-list-wrapper">
 					<ul class="theme-preview-list">
 						<?php $slides = count($this->themes); $i = 1; $themeAvailable = false; ?>
 						<?php
 							foreach ($this->themes as $theme) { ?>
-							<?php if (FreshRSS_Context::userConf()->theme === $theme['id']) {
-								$checked = 'checked="checked"';
+							<?php
+							$isCurrent = FreshRSS_Context::userConf()->theme === $theme['id'];
+							if ($isCurrent) {
 								$themeAvailable = true;
-							} else {
-								$checked = '';
-							} ?>
-							<input type="radio" name="theme" id="img-<?= $i ?>" <?= $checked ?> value="<?= $theme['id'] ?>" />
-							<li class="preview-container">
+							}
+							?>
+							<li class="preview-container<?= $isCurrent ? ' picked' : '' ?>" data-theme-preview="<?= $theme['id'] ?>">
 								<div class="preview">
 									<img src="<?= Minz_Url::display('/themes/' . $theme['id'] . '/thumbs/original.png') ?>" loading="lazy" />
 								</div>
-								<div class="nav">
-									<?php if ($i !== 1) {?>
-										<label for="img-<?= $i - 1 ?>" class="btn prev"><?= _i('prev') ?></label>
-									<?php } ?>
-									<?php if ($i !== $slides) {?>
-										<label for="img-<?= $i + 1 ?>" class="btn next"><?= _i('next') ?></label>
-									<?php } ?>
-								</div>
 								<div class="properties">
 									<div>
 										<?php if (!empty($theme['deprecated'])) { ?>
@@ -83,20 +80,14 @@
 									<?php if (!empty($theme['theme-color']['dark'])) { ?>
 										<div class="darkMode">✔ <?= _t('conf.display.darkMode') ?></div>
 									<?php } ?>
-
 								</div>
-								<div class="page-number">( <?= sprintf('%d/%d', $i, $slides) ?> )</div>
 							</li>
 							<?php $i++ ?>
 						<?php } ?>
 						<?php if (!$themeAvailable) {?>
-							<input type="radio" name="theme" checked="checked" value="Origine" />
-							<li class="preview-container">
+							<li class="preview-container picked">
 								<div class="preview">
 								</div>
-								<div class="nav">
-									<label for="img-<?= $i - 1 ?>" class="prev"><?= _i('prev') ?></label>
-								</div>
 								<div class="properties alert-error">
 									<div><?= _t('conf.display.theme_not_available', FreshRSS_Context::userConf()->theme)?></div>
 								</div>
diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index 96874a65d..dfeff9293 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -100,6 +100,19 @@ function init_crypto_forms() {
 // </crypto form (Web login)>
 
 // <show password>
+
+function init_display(parent) {
+	const theme = parent.querySelector('select#theme');
+	if (!theme) {
+		return;
+	}
+	theme.addEventListener('change', (e) => {
+		const picked = parent.querySelector('.preview-container.picked');
+		picked.classList.remove('picked');
+		parent.querySelector(`[data-theme-preview="${e.target.value}"]`).classList.add('picked');
+	});
+}
+
 function togglePW(btn) {
 	if (btn.classList.contains('active')) {
 		hidePW(btn);
@@ -543,6 +556,7 @@ function init_extra_afterDOM() {
 			init_archiving(slider);
 			init_url_observers(slider);
 		} else {
+			init_display(document.body);
 			init_archiving(document.body);
 			init_url_observers(document.body);
 		}
diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css
index 958d2ba1d..9bdea1fea 100644
--- a/p/themes/base-theme/frss.css
+++ b/p/themes/base-theme/frss.css
@@ -2114,10 +2114,6 @@ html.slider-active {
 	min-width: 260px;
 }
 
-.theme-preview-list input {
-	display: none;
-}
-
 .theme-preview-list .preview-container {
 	display: block;
 }
@@ -2136,19 +2132,6 @@ html.slider-active {
 	height: 100%;
 }
 
-.theme-preview-list .nav label {
-	padding: 0;
-	display: none;
-	min-width: 50px;
-	min-height: 5rem;
-	position: absolute;
-	top: 34%;
-	z-index: 9;
-	text-align: center;
-	line-height: 5;
-}
-
-
 .theme-preview-list .properties {
 	padding: 5px;
 	background-color: var(--frss-background-color-transparent);
@@ -2161,32 +2144,13 @@ html.slider-active {
 	backdrop-filter: blur(3px);
 }
 
-.theme-preview-list .page-number {
-	bottom: -1.5rem;
-	position: absolute;
-	display: none;
-	left: 0;
-	right: 0;
-	text-align: center;
-}
-
-.theme-preview-list .nav label.prev {
-	left: -1rem;
-}
-
-.theme-preview-list .nav label.next {
-	right: -1rem;
-}
-
-.theme-preview-list input:checked + .preview-container .preview {
+.preview-container.picked .preview {
 	opacity: 1;
 	transform: scale(1);
 	transition: opacity .5s ease-in-out;
 }
 
-.theme-preview-list input:checked + .preview-container .nav label,
-.theme-preview-list input:checked + .preview-container .properties,
-.theme-preview-list input:checked + .preview-container .page-number {
+.preview-container.picked .properties {
 	display: block;
 }
 
diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css
index 5e0324153..b3464e6cc 100644
--- a/p/themes/base-theme/frss.rtl.css
+++ b/p/themes/base-theme/frss.rtl.css
@@ -2114,10 +2114,6 @@ html.slider-active {
 	min-width: 260px;
 }
 
-.theme-preview-list input {
-	display: none;
-}
-
 .theme-preview-list .preview-container {
 	display: block;
 }
@@ -2136,19 +2132,6 @@ html.slider-active {
 	height: 100%;
 }
 
-.theme-preview-list .nav label {
-	padding: 0;
-	display: none;
-	min-width: 50px;
-	min-height: 5rem;
-	position: absolute;
-	top: 34%;
-	z-index: 9;
-	text-align: center;
-	line-height: 5;
-}
-
-
 .theme-preview-list .properties {
 	padding: 5px;
 	background-color: var(--frss-background-color-transparent);
@@ -2161,32 +2144,13 @@ html.slider-active {
 	backdrop-filter: blur(3px);
 }
 
-.theme-preview-list .page-number {
-	bottom: -1.5rem;
-	position: absolute;
-	display: none;
-	right: 0;
-	left: 0;
-	text-align: center;
-}
-
-.theme-preview-list .nav label.prev {
-	right: -1rem;
-}
-
-.theme-preview-list .nav label.next {
-	left: -1rem;
-}
-
-.theme-preview-list input:checked + .preview-container .preview {
+.preview-container.picked .preview {
 	opacity: 1;
 	transform: scale(1);
 	transition: opacity .5s ease-in-out;
 }
 
-.theme-preview-list input:checked + .preview-container .nav label,
-.theme-preview-list input:checked + .preview-container .properties,
-.theme-preview-list input:checked + .preview-container .page-number {
+.preview-container.picked .properties {
 	display: block;
 }