From 8e3b8480152154a21e7d70bdab43d4769e2e123d Mon Sep 17 00:00:00 2001
From: Ben Mitchinson <mitchinson.dev@gmail.com>
Date: Mon, 6 Oct 2025 23:28:06 -0700
Subject: [PATCH 1/7] v1: pin doesn't adjust though

---
 .../ActionButton/LocationSelector.tsx         | 62 +++++++++++++++----
 1 file changed, 49 insertions(+), 13 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index d101bb064..935e96f04 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -19,6 +19,8 @@ interface State {
   initilized: boolean;
   placeholder: string;
   position?: LatLng;
+  latInput: string;
+  lngInput: string;
 }
 
 const LocationSelector = (props: Props) => {
@@ -27,6 +29,8 @@ const LocationSelector = (props: Props) => {
     initilized: false,
     placeholder: props.location?.placeholder || "",
     position: props.location ? new LatLng(props.location.latitude, props.location.longitude) : undefined,
+    latInput: props.location ? String(props.location.latitude) : "",
+    lngInput: props.location ? String(props.location.longitude) : "",
   });
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
 
@@ -35,6 +39,8 @@ const LocationSelector = (props: Props) => {
       ...state,
       placeholder: props.location?.placeholder || "",
       position: new LatLng(props.location?.latitude || 0, props.location?.longitude || 0),
+      latInput: String(props.location?.latitude ?? 0),
+      lngInput: String(props.location?.longitude ?? 0),
     }));
   }, [props.location]);
 
@@ -65,16 +71,23 @@ const LocationSelector = (props: Props) => {
 
   useEffect(() => {
     if (!state.position) {
-      setState({ ...state, placeholder: "" });
+      setState((prev) => ({ ...prev, placeholder: "" }));
       return;
     }
 
+    // Sync lat/lng input values from position
+    const newLat = String(state.position.lat);
+    const newLng = String(state.position.lng);
+    if (state.latInput !== newLat || state.lngInput !== newLng) {
+      setState((prev) => ({ ...prev, latInput: newLat, lngInput: newLng }));
+    }
+
     // Fetch reverse geocoding data.
     fetch(`https://nominatim.openstreetmap.org/reverse?lat=${state.position.lat}&lon=${state.position.lng}&format=json`)
       .then((response) => response.json())
       .then((data) => {
         if (data && data.display_name) {
-          setState({ ...state, placeholder: data.display_name });
+          setState((prev) => ({ ...prev, placeholder: data.display_name }));
         }
       })
       .catch((error) => {
@@ -83,6 +96,17 @@ const LocationSelector = (props: Props) => {
       });
   }, [state.position]);
 
+  // Update position when lat/lng inputs change (if valid numbers)
+  useEffect(() => {
+    const lat = parseFloat(state.latInput);
+    const lng = parseFloat(state.lngInput);
+    if (Number.isFinite(lat) && Number.isFinite(lng)) {
+      if (!state.position || state.position.lat !== lat || state.position.lng !== lng) {
+        setState((prev) => ({ ...prev, position: new LatLng(lat, lng) }));
+      }
+    }
+  }, [state.latInput, state.lngInput]);
+
   const onPositionChanged = (position: LatLng) => {
     setState({ ...state, position });
   };
@@ -126,19 +150,31 @@ const LocationSelector = (props: Props) => {
           <LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
           <div className="mt-2 w-full flex flex-row justify-between items-center gap-2">
             <div className="flex flex-row items-center justify-start gap-2 w-full">
-              <div className="relative flex-1">
-                {state.position && (
-                  <div className="absolute left-2 top-1/2 -translate-y-1/2 text-xs leading-6 opacity-60 z-10">
-                    [{state.position.lat.toFixed(2)}, {state.position.lng.toFixed(2)}]
-                  </div>
-                )}
+              <div id="lat-long-display" className="flex flex-row items-center gap-2">
+                <Input
+                  placeholder="Lat"
+                  type="number"
+                  step="any"
+                  value={state.latInput}
+                  onChange={(e) => setState((prev) => ({ ...prev, latInput: e.target.value }))}
+                  className="w-28"
+                />
                 <Input
-                  placeholder="Choose a position first."
-                  value={state.placeholder}
-                  disabled={!state.position}
-                  className={state.position ? "pl-24" : ""}
-                  onChange={(e) => setState((state) => ({ ...state, placeholder: e.target.value }))}
+                  placeholder="Lng"
+                  type="number"
+                  step="any"
+                  value={state.lngInput}
+                  onChange={(e) => setState((prev) => ({ ...prev, lngInput: e.target.value }))}
+                  className="w-28"
                 />
+                <div className="relative flex-1">
+                  <Input
+                    placeholder="Choose a position first."
+                    value={state.placeholder}
+                    disabled={!state.position}
+                    onChange={(e) => setState((prev) => ({ ...prev, placeholder: e.target.value }))}
+                  />
+                </div>
               </div>
             </div>
             <Button

From 799f7b39bd8e6ad42c1ae64effdf0dd66df1bf26 Mon Sep 17 00:00:00 2001
From: Ben Mitchinson <mitchinson.dev@gmail.com>
Date: Mon, 6 Oct 2025 23:32:54 -0700
Subject: [PATCH 2/7] v2: pin responds to input fields

---
 web/src/components/LeafletMap.tsx             | 10 ++++++++
 .../ActionButton/LocationSelector.tsx         | 24 +++++++++++++------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/web/src/components/LeafletMap.tsx b/web/src/components/LeafletMap.tsx
index e1facc54c..f71122ce4 100644
--- a/web/src/components/LeafletMap.tsx
+++ b/web/src/components/LeafletMap.tsx
@@ -37,6 +37,16 @@ const LocationMarker = (props: MarkerProps) => {
     map.locate();
   }, []);
 
+  // Keep marker and map in sync with external position updates
+  useEffect(() => {
+    if (props.position) {
+      setPosition(props.position);
+      map.setView(props.position);
+    } else {
+      setPosition(undefined);
+    }
+  }, [props.position, map]);
+
   return position === undefined ? null : <Marker position={position} icon={markerIcon}></Marker>;
 };
 
diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index 935e96f04..b5ce6cc7d 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -35,13 +35,23 @@ const LocationSelector = (props: Props) => {
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
 
   useEffect(() => {
-    setState((state) => ({
-      ...state,
-      placeholder: props.location?.placeholder || "",
-      position: new LatLng(props.location?.latitude || 0, props.location?.longitude || 0),
-      latInput: String(props.location?.latitude ?? 0),
-      lngInput: String(props.location?.longitude ?? 0),
-    }));
+    if (props.location) {
+      setState((state) => ({
+        ...state,
+        placeholder: props.location.placeholder || "",
+        position: new LatLng(props.location.latitude, props.location.longitude),
+        latInput: String(props.location.latitude),
+        lngInput: String(props.location.longitude),
+      }));
+    } else {
+      setState((state) => ({
+        ...state,
+        placeholder: "",
+        position: undefined,
+        latInput: "",
+        lngInput: "",
+      }));
+    }
   }, [props.location]);
 
   useEffect(() => {

From aa09f0609c734f0f1cf98ed536872d83cb7a026e Mon Sep 17 00:00:00 2001
From: Ben Mitchinson <mitchinson.dev@gmail.com>
Date: Tue, 7 Oct 2025 23:10:22 -0700
Subject: [PATCH 3/7] Update
 web/src/components/MemoEditor/ActionButton/LocationSelector.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Ben Mitchinson <mitchinson.dev@gmail.com>
---
 web/src/components/MemoEditor/ActionButton/LocationSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index b5ce6cc7d..f8d662485 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -118,7 +118,7 @@ const LocationSelector = (props: Props) => {
   }, [state.latInput, state.lngInput]);
 
   const onPositionChanged = (position: LatLng) => {
-    setState({ ...state, position });
+    setState((prev) => ({ ...prev, position }));
   };
 
   const removeLocation = (e: React.MouseEvent) => {

From 9853360736d58ce8f347df3cdd947ccafeafc13c Mon Sep 17 00:00:00 2001
From: Ben Mitchinson <mitchinson.dev@gmail.com>
Date: Tue, 7 Oct 2025 23:10:30 -0700
Subject: [PATCH 4/7] Update
 web/src/components/MemoEditor/ActionButton/LocationSelector.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Ben Mitchinson <mitchinson.dev@gmail.com>
---
 web/src/components/MemoEditor/ActionButton/LocationSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index f8d662485..bf59fafa0 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -157,7 +157,7 @@ const LocationSelector = (props: Props) => {
       </TooltipProvider>
       <PopoverContent align="center">
         <div className="min-w-80 sm:w-lg p-1 flex flex-col justify-start items-start">
-          <LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />
+          <LeafletMap key={JSON.stringify(state.initialized)} latlng={state.position} onChange={onPositionChanged} />
           <div className="mt-2 w-full flex flex-row justify-between items-center gap-2">
             <div className="flex flex-row items-center justify-start gap-2 w-full">
               <div id="lat-long-display" className="flex flex-row items-center gap-2">

From e4cf63dc03063e3b1b09c493eaf0faf6f963968a Mon Sep 17 00:00:00 2001
From: Ben Mitchinson <mitchinson.dev@gmail.com>
Date: Tue, 7 Oct 2025 23:11:47 -0700
Subject: [PATCH 5/7] adjust the rest of the initialized typos

---
 .../MemoEditor/ActionButton/LocationSelector.tsx          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index bf59fafa0..fcc905a4c 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -16,7 +16,7 @@ interface Props {
 }
 
 interface State {
-  initilized: boolean;
+  initialized: boolean;
   placeholder: string;
   position?: LatLng;
   latInput: string;
@@ -26,7 +26,7 @@ interface State {
 const LocationSelector = (props: Props) => {
   const t = useTranslate();
   const [state, setState] = useState<State>({
-    initilized: false,
+    initialized: false,
     placeholder: props.location?.placeholder || "",
     position: props.location ? new LatLng(props.location.latitude, props.location.longitude) : undefined,
     latInput: props.location ? String(props.location.latitude) : "",
@@ -57,7 +57,7 @@ const LocationSelector = (props: Props) => {
   useEffect(() => {
     if (popoverOpen && !props.location) {
       const handleError = (error: any, errorMessage: string) => {
-        setState({ ...state, initilized: true });
+        setState({ ...state, initialized: true });
         toast.error(errorMessage);
         console.error(error);
       };
@@ -67,7 +67,7 @@ const LocationSelector = (props: Props) => {
           (position) => {
             const lat = position.coords.latitude;
             const lng = position.coords.longitude;
-            setState({ ...state, position: new LatLng(lat, lng), initilized: true });
+            setState({ ...state, position: new LatLng(lat, lng), initialized: true });
           },
           (error) => {
             handleError(error, "Failed to get current position");

From df9dcca62e8abac44698f6c97005148109eec6ba Mon Sep 17 00:00:00 2001
From: Ben Mitchinson <mitchinson.dev@gmail.com>
Date: Thu, 9 Oct 2025 22:51:54 -0700
Subject: [PATCH 6/7] fix lint

---
 .../ActionButton/LocationSelector.tsx         | 41 +++++++++++--------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index fcc905a4c..f68c7c70f 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -35,23 +35,30 @@ const LocationSelector = (props: Props) => {
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
 
   useEffect(() => {
-    if (props.location) {
-      setState((state) => ({
-        ...state,
-        placeholder: props.location.placeholder || "",
-        position: new LatLng(props.location.latitude, props.location.longitude),
-        latInput: String(props.location.latitude),
-        lngInput: String(props.location.longitude),
-      }));
-    } else {
-      setState((state) => ({
-        ...state,
-        placeholder: "",
-        position: undefined,
-        latInput: "",
-        lngInput: "",
-      }));
-    }
+    setState((state) => ({
+      ...state,
+      placeholder: props.location?.placeholder || "",
+      position: new LatLng(props.location?.latitude || 0, props.location?.longitude || 0),
+      latInput: String(props.location?.latitude) || "",
+      lngInput: String(props.location?.longitude) || "",
+    }));
+    // if (props.location) {
+    //   setState((state) => ({
+    //     ...state,
+    //     placeholder: props.location.placeholder || "",
+    //     position: new LatLng(props.location.latitude, props.location.longitude),
+    //     latInput: String(props.location.latitude),
+    //     lngInput: String(props.location.longitude),
+    //   }));
+    // } else {
+    //   setState((state) => ({
+    //     ...state,
+    //     placeholder: "",
+    //     position: undefined,
+    //     latInput: "",
+    //     lngInput: "",
+    //   }));
+    // }
   }, [props.location]);
 
   useEffect(() => {

From 67b924fa14028b641d0ea6cfd9057c5a6b8a0f94 Mon Sep 17 00:00:00 2001
From: Ben Mitchinson <mitchinson.dev@gmail.com>
Date: Thu, 9 Oct 2025 22:52:31 -0700
Subject: [PATCH 7/7] oops left comment

---
 .../ActionButton/LocationSelector.tsx           | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
index f68c7c70f..1d1ebf873 100644
--- a/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/LocationSelector.tsx
@@ -42,23 +42,6 @@ const LocationSelector = (props: Props) => {
       latInput: String(props.location?.latitude) || "",
       lngInput: String(props.location?.longitude) || "",
     }));
-    // if (props.location) {
-    //   setState((state) => ({
-    //     ...state,
-    //     placeholder: props.location.placeholder || "",
-    //     position: new LatLng(props.location.latitude, props.location.longitude),
-    //     latInput: String(props.location.latitude),
-    //     lngInput: String(props.location.longitude),
-    //   }));
-    // } else {
-    //   setState((state) => ({
-    //     ...state,
-    //     placeholder: "",
-    //     position: undefined,
-    //     latInput: "",
-    //     lngInput: "",
-    //   }));
-    // }
   }, [props.location]);
 
   useEffect(() => {