Support for searching pluscodes (extended when required relative to the map center)

patches/@suid+material+0.11.1.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/@suid/material/InputBase/InputBase.jsx b/node_modules/@suid/material/InputBase/InputBase.jsx
-index ac57a30..00cbc4a 100644
+index 8aab6fd..480544a 100644
 --- a/node_modules/@suid/material/InputBase/InputBase.jsx
 +++ b/node_modules/@suid/material/InputBase/InputBase.jsx
-@@ -238,7 +238,7 @@ const inputGlobalStyles = () => (<>
+@@ -239,7 +239,7 @@ const inputGlobalStyles = () => (<>
              "@keyframes mui-auto-fill-cancel": { from: { display: "block" } },
          }}/>}
    </>);

src/components/finder/Finder.tsx

@@ -15,6 +15,8 @@ import { getMap, getState } from '../map';
 import { Overlay } from 'ol';
 import { fromLonLat } from 'ol/proj';
 import WptEditDialog from '../wpt/WptEditDialog';
+import maybePlusCode from '../../lib/check-pluscodes';
+import { decode, expand } from 'pluscodes';
 
 const [popup, setPopup] = createSignal<Overlay>();
 const [open, setOpen] = createSignal(false);
@@ -68,6 +70,7 @@ const Finder: Component<Props> = (props) => {
   };
 
   const submitHandler = () => {
+    setCoordinate(undefined);
     const latLonRegExp = /(-?[0-9]+.[0-9]+)\s*,\s*(-?[0-9]+.[0-9]+)/;
     const latLonMatch = searchString().match(latLonRegExp);
 
@@ -89,15 +92,46 @@ const Finder: Component<Props> = (props) => {
         setPopupContent(
           <>{`${coordinate()[0]}, ${coordinate()[1]} (UTM ${utmMatch[0]})`}</>
         );
+        console.log({
+          caller: 'Finder / submitHandler',
+          searchString: searchString(),
+          utmMatch,
+          coordinate: coordinate(),
+        });
+      } else {
+        const potentialPlusCode = maybePlusCode(searchString());
+        if (!!potentialPlusCode) {
+          let plusCode = potentialPlusCode.code;
+          if (potentialPlusCode.isShort) {
+            plusCode = expand(potentialPlusCode.code, {
+              longitude: getState().lon,
+              latitude: getState().lat,
+            });
+          }
+          const plusCodeCoordinates = decode(plusCode);
+          if (plusCodeCoordinates) {
+            setCoordinate([
+              plusCodeCoordinates.longitude,
+              plusCodeCoordinates.latitude,
+            ]);
+          }
+          console.log({
+            caller: 'Finder / submitHandler',
+            searchString: searchString(),
+            potentialPlusCode,
+            plusCode,
+            plusCodeCoordinates,
+            state: getState(),
+            coordinate: coordinate(),
+          });
+        } else {
+          console.log({
+            caller: 'Finder / submitHandler / no match found',
+            searchString: searchString(),
+          });
+        }
       }
-      console.log({
-        caller: 'Finder / submitHandler',
-        searchString: searchString(),
-        utmMatch,
-        coordinate: coordinate(),
-      });
     }
-
     if (!!coordinate()) {
       findLocation(navigate, coordinate());
     }
@@ -147,6 +181,9 @@ const Finder: Component<Props> = (props) => {
           method='dialog'
         >
           <TextField onChange={searchStringChangeHandler} />
+          <Button variant='contained' onClick={submitHandler}>
+            Search
+          </Button>
         </Box>
       </Dialog>
       <div class={style.ol_popup + ' ol_popup'} ref={popupElement}>