From 940e294b3a2598955b7a0189676ea8e938db3313 Mon Sep 17 00:00:00 2001
From: zv <zv@zvcloud.net>
Date: Tue, 23 Jun 2026 20:02:43 +0200
Subject: [PATCH] feat: allow custom nearby radius

---
 src/app/App.tsx | 60 +++++++++++++++++++++++++++++++++++++++----------
 src/styles.css  |  7 ++++++
 2 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index f476eda..e9c571a 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -48,9 +48,11 @@ const namedAreas = [
 const radiusOptions = [50, 100, 250, 500, 1000];
 const customChoice = 'custom';
 const noNearbyChoice = 'none';
+const customRadiusChoice = 'custom-radius';
 
 type RequestStatus = 'idle' | 'loading' | 'success' | 'error';
 type NearbyChoice = typeof noNearbyChoice | typeof customChoice | string;
+type RadiusChoice = number | typeof customRadiusChoice;
 
 export function App() {
   const [category, setCategory] = useState(searchPresetCategories[0]);
@@ -64,6 +66,7 @@ export function App() {
   const [nearbyChoice, setNearbyChoice] = useState<NearbyChoice>(noNearbyChoice);
   const [nearbyCustomKey, setNearbyCustomKey] = useState('');
   const [nearbyCustomValue, setNearbyCustomValue] = useState('');
+  const [radiusChoice, setRadiusChoice] = useState<RadiusChoice>(100);
   const [nearbyRadius, setNearbyRadius] = useState(100);
   const [areaMode, setAreaMode] = useState<SearchArea['mode']>('bbox');
   const [bbox, setBBox] = useState<BBox>(DEFAULT_BBOX);
@@ -238,6 +241,25 @@ export function App() {
     setNearbyCustomValue('');
   }
 
+  function handleRadiusChoiceChange(value: string) {
+    if (value === customRadiusChoice) {
+      setRadiusChoice(customRadiusChoice);
+      return;
+    }
+
+    const radius = Number(value);
+    setRadiusChoice(radius);
+    setNearbyRadius(radius);
+  }
+
+  function handleCustomRadiusChange(value: string) {
+    const radius = Number(value);
+
+    if (Number.isFinite(radius)) {
+      setNearbyRadius(radius);
+    }
+  }
+
   function handleClearResults() {
     setResults([]);
     setSelectedResultId(null);
@@ -462,18 +484,32 @@ export function App() {
 
           <div className="control-group">
             <label htmlFor="nearby-radius">Radius</label>
-            <select
-              id="nearby-radius"
-              value={nearbyRadius}
-              disabled={nearbyChoice === noNearbyChoice}
-              onChange={(event) => setNearbyRadius(Number(event.target.value))}
-            >
-              {radiusOptions.map((radius) => (
-                <option key={radius} value={radius}>
-                  {radius} meters
-                </option>
-              ))}
-            </select>
+            <div className="radius-controls">
+              <select
+                id="nearby-radius"
+                value={radiusChoice}
+                disabled={nearbyChoice === noNearbyChoice}
+                onChange={(event) => handleRadiusChoiceChange(event.target.value)}
+              >
+                {radiusOptions.map((radius) => (
+                  <option key={radius} value={radius}>
+                    {radius} meters
+                  </option>
+                ))}
+                <option value={customRadiusChoice}>Custom</option>
+              </select>
+              {radiusChoice === customRadiusChoice ? (
+                <input
+                  aria-label="Custom radius in meters"
+                  type="number"
+                  min="1"
+                  step="1"
+                  value={nearbyRadius}
+                  disabled={nearbyChoice === noNearbyChoice}
+                  onChange={(event) => handleCustomRadiusChange(event.target.value)}
+                />
+              ) : null}
+            </div>
           </div>
         </section>
 
diff --git a/src/styles.css b/src/styles.css
index ce3c6d5..1ef0c72 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -161,6 +161,12 @@ a {
   gap: 0.75rem;
 }
 
+.radius-controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(96px, 0.55fr);
+  gap: 0.5rem;
+}
+
 .checkbox-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -457,6 +463,7 @@ a {
   }
 
   .custom-fields,
+  .radius-controls,
   .segmented-control,
   .checkbox-grid {
     grid-template-columns: 1fr;