From 751af663f38e174203c10438e5ef36277e93cd68 Mon Sep 17 00:00:00 2001
From: Martin Kagamino Lehoux <martin@lehoux.net>
Date: Thu, 27 Aug 2026 16:41:28 +0200
Subject: Use radio inputs and collapsible curation on ride detail

Replace dropdowns with vertical radio groups for bike and ride type.
Make curation block collapsible (details/summary) collapsed by default
and expanded when both categories are empty.
---
 web/templates.templ | 55 ++++++++++++++++++++---------------------------------
 1 file changed, 21 insertions(+), 34 deletions(-)

(limited to 'web/templates.templ')

diff --git a/web/templates.templ b/web/templates.templ
index 8fbed0c..10008d2 100644
--- a/web/templates.templ
+++ b/web/templates.templ
@@ -228,47 +228,34 @@ templ RideDetailContent(data RideDetailView) {
 			</dl>
 		</section>
 		<section class="panel categories-panel">
-			<div class="categories-layout">
-				<div class="categories-heading">
-					<p class="eyebrow">Curation</p>
-					<h2>Categories</h2>
-				</div>
+			<details class="categories-details" open?={ data.Ride.BikeType == "" && data.Ride.RideType == "" }>
+				<summary class="categories-summary">
+					<div class="categories-heading">
+						<p class="eyebrow">Curation</p>
+						<h2>Categories</h2>
+					</div>
+					<span class="categories-chevron" aria-hidden="true">⌄</span>
+				</summary>
 				<form method="post" action={ templ.URL(rideCategoriesUpdateURL(data.Ride.ID)) } class="category-form">
-					<label for="ride-bike-type">Bike type
-						<select id="ride-bike-type" name="bike_type" required>
-							if data.Ride.BikeType == "" {
-								<option value="" selected>—</option>
-							} else {
-								<option value="">—</option>
-							}
+					<fieldset class="category-fieldset">
+						<legend>Bike type</legend>
+						<div class="category-options">
 							for _, opt := range bikeTypeOptions {
-								if data.Ride.BikeType == opt {
-									<option value={ string(opt) } selected>{ bikeTypeLabels[opt] }</option>
-								} else {
-									<option value={ string(opt) }>{ bikeTypeLabels[opt] }</option>
-								}
-							}
-						</select>
-					</label>
-					<label for="ride-ride-type">Ride type
-						<select id="ride-ride-type" name="ride_type" required>
-							if data.Ride.RideType == "" {
-								<option value="" selected>—</option>
-							} else {
-								<option value="">—</option>
+								<label class="category-option"><input type="radio" name="bike_type" value={ string(opt) } required checked?={ data.Ride.BikeType == opt }/><span>{ bikeTypeLabels[opt] }</span></label>
 							}
+						</div>
+					</fieldset>
+					<fieldset class="category-fieldset">
+						<legend>Ride type</legend>
+						<div class="category-options">
 							for _, opt := range rideTypeOptions {
-								if data.Ride.RideType == opt {
-									<option value={ string(opt) } selected>{ rideTypeLabels[opt] }</option>
-								} else {
-									<option value={ string(opt) }>{ rideTypeLabels[opt] }</option>
-								}
+								<label class="category-option"><input type="radio" name="ride_type" value={ string(opt) } required checked?={ data.Ride.RideType == opt }/><span>{ rideTypeLabels[opt] }</span></label>
 							}
-						</select>
-					</label>
+						</div>
+					</fieldset>
 					<button class="button" type="submit">Save</button>
 				</form>
-			</div>
+			</details>
 		</section>
 		if data.HasRoute {
 			if len(data.Profile.OfficialClimbs()) > 0 {
-- 
cgit v1.3