From b3faaae717a13b5f98b6959f97dc471f1d761746 Mon Sep 17 00:00:00 2001
From: Emi Griffith <me@emigriffith.dev>
Date: Wed, 15 Jul 2026 21:44:18 -0700
Subject: [PATCH] Climate hub: client-side search + alphabetical results (#110)

Add a search box to /climate that filters to a flat, alphabetical list of matching
cities (by city or country name), shown with their country; clearing it restores the
collapsible directory. The index is built from the already-crawlable links, so it's
a pure progressive enhancement (no SEO impact). Also sort cities alphabetically
within each country in the directory (were population-ordered).
---
 static/style.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/static/style.css b/static/style.css
index a37fd7d..1598ff7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1568,6 +1568,21 @@ td.rec-date { color: var(--muted); font-size: 13px; }
 
 /* Hub / directory of cities */
 /* Collapsible country sections (native <details>). */
+/* Hub search box + flat alphabetical results. */
+.hub-search { margin: 16px 0 4px; }
+.hub-search input {
+  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
+  background: var(--bg); color: var(--text); font-size: 16px;
+}
+.hub-search input:focus { outline: none; border-color: var(--accent); }
+.hub-results { list-style: none; margin: 8px 0; padding: 0; }
+.hub-results[hidden] { display: none; }
+.hub-results li { padding: 11px 4px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 12px; }
+.hub-results li a { text-decoration: none; font-weight: 600; }
+.hub-r-country { color: var(--muted); font-size: 13px; margin-left: auto; text-align: right; white-space: nowrap; }
+.hub-results .hub-empty { color: var(--muted); }
+#hub-directory[hidden] { display: none; }
+
 details.hub-country { border-bottom: 1px solid var(--border); }
 details.hub-country > summary {
   cursor: pointer; padding: 12px 4px; font-weight: 700; font-size: 16px;