feat: add custom advanced query mode

src/app/App.tsx

@@ -54,6 +54,7 @@ const customRadiusChoice = 'custom-radius';
 type RequestStatus = 'idle' | 'loading' | 'success' | 'error';
 type NearbyChoice = typeof noNearbyChoice | typeof customChoice | string;
 type RadiusChoice = string;
+type QueryMode = 'generated' | 'custom';
 
 export function App() {
   const [category, setCategory] = useState(searchPresetCategories[0]);
@@ -74,6 +75,8 @@ export function App() {
   const [namedArea, setNamedArea] = useState(namedAreas[0]);
   const [results, setResults] = useState<ParsedOsmResult[]>([]);
   const [selectedResultId, setSelectedResultId] = useState<string | null>(null);
+  const [queryMode, setQueryMode] = useState<QueryMode>('generated');
+  const [customQuery, setCustomQuery] = useState('');
   const [status, setStatus] = useState<RequestStatus>('idle');
   const [message, setMessage] = useState<string | null>(null);
   const activeQueryRef = useRef<string | null>(null);
@@ -170,7 +173,7 @@ export function App() {
     nearbyRadius,
   ]);
 
-  const queryPreview = useMemo(() => {
+  const generatedQuery = useMemo(() => {
     try {
       return {
         query: buildOverpassQuery(searchState),
@@ -184,34 +187,44 @@ export function App() {
     }
   }, [searchState]);
 
+  const activeQuery =
+    queryMode === 'custom' ? customQuery.trim() : generatedQuery.query;
+  const activeQueryError =
+    queryMode === 'custom'
+      ? customQuery.trim()
+        ? null
+        : 'Enter a custom Overpass QL query.'
+      : generatedQuery.error;
+  const shouldBlockLargeBBox = queryMode === 'generated' && areaMode === 'bbox';
+
   const canSearch =
     status !== 'loading' &&
-    Boolean(queryPreview.query) &&
-    !(areaMode === 'bbox' && isBBoxTooLarge(bbox));
+    Boolean(activeQuery) &&
+    !(shouldBlockLargeBBox && isBBoxTooLarge(bbox));
 
   async function handleSearch() {
-    if (!queryPreview.query) {
+    if (!activeQuery) {
       setStatus('error');
-      setMessage(queryPreview.error);
+      setMessage(activeQueryError);
       return;
     }
 
-    if (areaMode === 'bbox' && isBBoxTooLarge(bbox)) {
+    if (shouldBlockLargeBBox && isBBoxTooLarge(bbox)) {
       setStatus('error');
       setMessage('Zoom in before searching. The current viewport is too large.');
       return;
     }
 
-    if (status === 'loading' && activeQueryRef.current === queryPreview.query) {
+    if (status === 'loading' && activeQueryRef.current === activeQuery) {
       return;
     }
 
     setStatus('loading');
     setMessage(null);
-    activeQueryRef.current = queryPreview.query;
+    activeQueryRef.current = activeQuery;
 
     try {
-      const response = await fetchOverpass(queryPreview.query);
+      const response = await fetchOverpass(activeQuery);
       const parsedResults = parseOverpassResponse(response);
       setResults(parsedResults);
       setSelectedResultId(parsedResults[0]?.id ?? null);
@@ -303,16 +316,16 @@ export function App() {
   }
 
   async function handleCopyQuery() {
-    if (queryPreview.query) {
-      await navigator.clipboard.writeText(queryPreview.query);
+    if (activeQuery) {
+      await navigator.clipboard.writeText(activeQuery);
       setMessage('Query copied to clipboard.');
     }
   }
 
   function handleOpenOverpassTurbo() {
-    if (queryPreview.query) {
+    if (activeQuery) {
       window.open(
-        `https://overpass-turbo.eu/?Q=${encodeURIComponent(queryPreview.query)}`,
+        `https://overpass-turbo.eu/?Q=${encodeURIComponent(activeQuery)}`,
         '_blank',
         'noopener,noreferrer',
       );
@@ -595,23 +608,55 @@ export function App() {
             </div>
           </div>
           <div className="query-actions">
-            <button type="button" disabled={!queryPreview.query} onClick={handleCopyQuery}>
+            <button type="button" disabled={!activeQuery} onClick={handleCopyQuery}>
               Copy query
             </button>
             <button
               type="button"
-              disabled={!queryPreview.query}
+              disabled={!activeQuery}
               onClick={handleOpenOverpassTurbo}
             >
               Open in Overpass Turbo
             </button>
           </div>
+          <div className="query-mode-control" aria-label="Query mode">
+            <label>
+              <input
+                type="radio"
+                checked={queryMode === 'generated'}
+                onChange={() => setQueryMode('generated')}
+              />
+              Generated
+            </label>
+            <label>
+              <input
+                type="radio"
+                checked={queryMode === 'custom'}
+                onChange={() => setQueryMode('custom')}
+              />
+              Custom query
+            </label>
+          </div>
+          {queryMode === 'custom' ? (
+            <textarea
+              className="custom-query-input"
+              aria-label="Custom Overpass QL query"
+              value={customQuery}
+              onChange={(event) => setCustomQuery(event.target.value)}
+              placeholder={
+                '[out:json][timeout:25];\nnode["amenity"="bench"](52.191000,20.941000,52.268000,21.079000);\nout center 100;'
+              }
+            />
+          ) : (
             <pre className="query-preview">
-            {queryPreview.query || queryPreview.error || 'Choose a preset to generate a query.'}
+              {generatedQuery.query ||
+                generatedQuery.error ||
+                'Choose a preset to generate a query.'}
             </pre>
+          )}
         </section>
 
-        {areaMode === 'bbox' && isBBoxTooLarge(bbox) ? (
+        {shouldBlockLargeBBox && isBBoxTooLarge(bbox) ? (
           <p className="message error-message">
             The current viewport is too large for a responsible Overpass request.
           </p>

src/styles.css

@@ -21,6 +21,7 @@ body {
 
 button,
 input,
+textarea,
 select {
   font: inherit;
 }
@@ -58,6 +59,7 @@ button:disabled {
 }
 
 input,
+textarea,
 select {
   width: 100%;
   border: 1px solid #acb8ad;
@@ -76,12 +78,14 @@ select {
 }
 
 input:hover:not(:disabled),
+textarea:hover:not(:disabled),
 select:hover:not(:disabled) {
   border-color: #7f9588;
   background: #fcfdfb;
 }
 
 input:focus,
+textarea:focus,
 select:focus,
 button:focus-visible {
   outline: none;
@@ -92,6 +96,7 @@ button:focus-visible {
 }
 
 input:disabled,
+textarea:disabled,
 select:disabled {
   cursor: not-allowed;
   background: #eff2ee;
@@ -127,12 +132,14 @@ a {
 }
 
 .control-panel {
+  --panel-padding: 1rem;
+
   display: flex;
   flex-direction: column;
   gap: 1rem;
   border-right: 1px solid #cdd5c9;
   background: #fafbf8;
-  padding: 1rem;
+  padding: var(--panel-padding);
   overflow-y: auto;
 }
 
@@ -636,15 +643,15 @@ a {
   border-top: 1px solid #dbe3dc;
   background:
     linear-gradient(180deg, rgb(238 246 242 / 62%) 0%, rgb(250 251 248 / 0%) 100%);
-  margin-top: 0.15rem;
-  padding-top: 1rem;
+  margin: 0.15rem calc(var(--panel-padding) * -1) 0;
+  padding: 1rem var(--panel-padding) 0;
 }
 
 .query-panel-separated::before {
   content: "Advanced";
   position: absolute;
   top: -0.62rem;
-  left: 0;
+  left: var(--panel-padding);
   background: #fafbf8;
   color: #6b7770;
   padding-right: 0.55rem;
@@ -667,6 +674,69 @@ a {
   font-size: 0.82rem;
 }
 
+.query-mode-control {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.45rem;
+}
+
+.query-mode-control label {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 34px;
+  border: 1px solid #c8d2ca;
+  border-radius: 7px;
+  background: linear-gradient(#ffffff, #f7f9f6);
+  padding: 0.42rem 0.55rem;
+  font-weight: 620;
+  cursor: pointer;
+}
+
+.query-mode-control input {
+  position: relative;
+  flex: 0 0 0.95rem;
+  width: 0.95rem !important;
+  min-width: 0.95rem;
+  max-width: 0.95rem;
+  height: 0.95rem;
+  min-height: 0.95rem;
+  margin: 0;
+  border: 1px solid #8ea098;
+  border-radius: 50%;
+  appearance: none;
+  background: #ffffff;
+  padding: 0;
+}
+
+.query-mode-control input::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.44rem;
+  height: 0.44rem;
+  border-radius: 50%;
+  background: #ffffff;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 120ms ease;
+}
+
+.query-mode-control input:checked {
+  border-color: #226a5d;
+  background: #226a5d;
+}
+
+.query-mode-control input:checked::before {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.query-mode-control label:has(input:checked) {
+  border-color: #5f9488;
+  background: #e5f2ee;
+  box-shadow: inset 0 0 0 1px rgb(34 106 93 / 16%);
+}
+
 .panel-heading {
   display: flex;
   align-items: center;
@@ -702,6 +772,22 @@ a {
   word-break: break-word;
 }
 
+.custom-query-input {
+  min-height: 190px;
+  resize: vertical;
+  background: #16201d;
+  color: #eaf4ef;
+  padding: 0.75rem;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-size: 0.78rem;
+  line-height: 1.5;
+  white-space: pre;
+}
+
+.custom-query-input::placeholder {
+  color: #91a39a;
+}
+
 .message {
   margin: 0;
   border-left: 3px solid #2e7a70;
@@ -893,13 +979,16 @@ a {
 @media (max-width: 560px) {
   .control-panel,
   .results-panel {
-    padding: 0.8rem;
+    --panel-padding: 0.8rem;
+
+    padding: var(--panel-padding);
   }
 
   .custom-fields,
   .radius-controls,
   .segmented-control,
-  .checkbox-grid {
+  .checkbox-grid,
+  .query-mode-control {
     grid-template-columns: 1fr;
   }