From 6e8fa900e476b84a7eacee673d1e6e39677a80fb Mon Sep 17 00:00:00 2001
From: Jake Kasper <jake.kasper@hpe.com>
Date: Thu, 4 Sep 2025 07:49:50 -0500
Subject: [PATCH] polygons

---
 .../src/pages/Properties/PropertyDetail.js    | 73 +++++++++++--------
 1 file changed, 43 insertions(+), 30 deletions(-)

diff --git a/frontend/src/pages/Properties/PropertyDetail.js b/frontend/src/pages/Properties/PropertyDetail.js
index b177aab..c54099d 100644
--- a/frontend/src/pages/Properties/PropertyDetail.js
+++ b/frontend/src/pages/Properties/PropertyDetail.js
@@ -353,6 +353,7 @@ const PropertyDetail = () => {
   const [gpsDistance, setGpsDistance] = useState(0);
   const [gpsAccuracy, setGpsAccuracy] = useState(null);
   const [isSnapPreview, setIsSnapPreview] = useState(false);
+  const [showAddMenu, setShowAddMenu] = useState(false);
   const [currentColor, setCurrentColor] = useState(SECTION_COLORS[0]);
   const [showNameModal, setShowNameModal] = useState(false);
   const [pendingSection, setPendingSection] = useState(null);
@@ -810,40 +811,52 @@ const PropertyDetail = () => {
             )}
           </div>
         </div>
-        <div className="flex gap-2">
+        <div className="relative">
           <button
-            onClick={() => setIsDrawing(!isDrawing)}
-            className={`btn-primary flex items-center gap-2 ${isDrawing ? 'bg-red-600 hover:bg-red-700' : ''}`}
+            onClick={() => setShowAddMenu(v=>!v)}
+            className="btn-primary flex items-center gap-2"
+            title="Add a lawn section"
           >
             <PlusIcon className="h-5 w-5" />
-            {isDrawing ? 'Cancel Drawing' : 'Tap-to-Draw'}
+            Add Lawn Section
           </button>
-          <button
-            onClick={() => {
-              // Toggle GPS points mode; ensure trace mode off
-              setIsGPSTraceMode(false);
-              setIsTracing(false);
-              if (gpsWatchId) { navigator.geolocation.clearWatch(gpsWatchId); setGpsWatchId(null); }
-              setIsGPSPointsMode(v=>!v);
-              if (!isGPSPointsMode) clearGpsPoints();
-            }}
-            className={`btn-secondary flex items-center gap-2 ${isGPSPointsMode ? 'ring-2 ring-blue-300' : ''}`}
-          >
-            {isGPSPointsMode ? 'Exit GPS Points' : 'GPS Points'}
-          </button>
-          <button
-            onClick={() => {
-              // Toggle trace mode; ensure points mode off
-              setIsGPSPointsMode(false);
-              if (!isGPSTraceMode) clearGpsPoints();
-              if (isGPSTraceMode && gpsWatchId) { navigator.geolocation.clearWatch(gpsWatchId); setGpsWatchId(null); setIsTracing(false); }
-              setIsGPSTraceMode(v=>!v);
-            }}
-            className={`btn-secondary flex items-center gap-2 ${isGPSTraceMode ? 'ring-2 ring-blue-300' : ''}`}
-          >
-            {isGPSTraceMode ? 'Exit Trace' : 'Trace Boundary'}
-          </button>
-      </div>
+          {showAddMenu && (
+            <div className="absolute right-0 mt-2 w-56 bg-white border rounded shadow-lg z-10">
+              <button
+                className="w-full text-left px-3 py-2 hover:bg-gray-50"
+                onClick={() => { setShowAddMenu(false); setIsDrawing(true); setIsGPSPointsMode(false); setIsGPSTraceMode(false); }}
+              >
+                Tap to Draw (manual)
+              </button>
+              <button
+                className="w-full text-left px-3 py-2 hover:bg-gray-50"
+                onClick={() => {
+                  setShowAddMenu(false);
+                  // Enable GPS points mode, disable trace
+                  setIsGPSTraceMode(false);
+                  setIsTracing(false);
+                  if (gpsWatchId) { navigator.geolocation.clearWatch(gpsWatchId); setGpsWatchId(null); }
+                  clearGpsPoints();
+                  setIsGPSPointsMode(true);
+                }}
+              >
+                GPS Points (walk and mark)
+              </button>
+              <button
+                className="w-full text-left px-3 py-2 hover:bg-gray-50"
+                onClick={() => {
+                  setShowAddMenu(false);
+                  // Enable trace mode, disable points mode
+                  setIsGPSPointsMode(false);
+                  clearGpsPoints();
+                  setIsGPSTraceMode(true);
+                }}
+              >
+                Trace Boundary (continuous)
+              </button>
+            </div>
+          )}
+        </div>
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">