fix: improve nearby search controls

src/app/App.tsx

@@ -232,6 +232,12 @@ export function App() {
     setExtraFilters((current) => current.filter((_, itemIndex) => itemIndex !== index));
   }
 
+  function handleClearNearby() {
+    setNearbyChoice(noNearbyChoice);
+    setNearbyCustomKey('');
+    setNearbyCustomValue('');
+  }
+
   function handleClearResults() {
     setResults([]);
     setSelectedResultId(null);
@@ -390,27 +396,13 @@ export function App() {
         <section className="search-section" aria-labelledby="near-heading">
           <div className="section-heading">
             <h2 id="near-heading">Near</h2>
+            {nearbyChoice !== noNearbyChoice ? (
+              <button type="button" className="text-button" onClick={handleClearNearby}>
+                Clear nearby
+              </button>
+            ) : null}
           </div>
 
-          {selectedPreset?.usefulNearbyPresetIds?.length ? (
-            <div className="suggestion-row" aria-label="Suggested nearby presets">
-              {selectedPreset.usefulNearbyPresetIds.slice(0, 5).map((presetId) => {
-                const preset = getPresetById(presetId);
-
-                return (
-                  <button
-                    key={preset.id}
-                    type="button"
-                    className={nearbyChoice === preset.id ? 'suggestion-active' : ''}
-                    onClick={() => setNearbyChoice(preset.id)}
-                  >
-                    {preset.label}
-                  </button>
-                );
-              })}
-            </div>
-          ) : null}
-
           <div className="control-group">
             <label htmlFor="nearby-preset">Nearby object</label>
             <select
@@ -419,6 +411,19 @@ export function App() {
               onChange={(event) => setNearbyChoice(event.target.value)}
             >
               <option value={noNearbyChoice}>No nearby condition</option>
+              {selectedPreset?.usefulNearbyPresetIds?.length ? (
+                <optgroup label="Suggested for this search">
+                  {selectedPreset.usefulNearbyPresetIds.map((presetId) => {
+                    const preset = getPresetById(presetId);
+
+                    return (
+                      <option key={preset.id} value={preset.id}>
+                        {preset.label}
+                      </option>
+                    );
+                  })}
+                </optgroup>
+              ) : null}
               {searchPresetCategories.map((item) => (
                 <optgroup key={item} label={item}>
                   {getPresetsByCategory(item).map((preset) => (

src/styles.css

@@ -134,6 +134,23 @@ a {
   line-height: 1.35;
 }
 
+.text-button {
+  min-height: auto;
+  border: 0;
+  background: transparent;
+  color: #0b6977;
+  padding: 0.15rem 0;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+
+.text-button:hover:not(:disabled) {
+  border-color: transparent;
+  background: transparent;
+  color: #174d44;
+  text-decoration: underline;
+}
+
 .field-note {
   margin: 0;
 }
@@ -200,24 +217,6 @@ a {
   font-size: 0.8rem;
 }
 
-.suggestion-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.45rem;
-}
-
-.suggestion-row button {
-  min-height: 32px;
-  padding: 0.35rem 0.55rem;
-  font-size: 0.82rem;
-}
-
-.suggestion-active {
-  border-color: #226a5d;
-  background: #e8f3ef;
-  color: #174d44;
-}
-
 .segmented-control {
   display: grid;
   grid-template-columns: 1fr 1fr;