From 8130a0c5fe61eb85d76b3ba8a314e1acb09fb9eb Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Tue, 10 Oct 2023 15:09:44 -0700
Subject: [PATCH 1/9] refactor io

---
 app/models/farmware_installation.rb           |  4 ++-
 spec/controllers/api/ai/ai_controller_spec.rb | 10 ++++---
 spec/models/farmware_installation_spec.rb     | 26 ++++++++-----------
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/models/farmware_installation.rb b/app/models/farmware_installation.rb
index 8f59d7e183..27cb899e1e 100644
--- a/app/models/farmware_installation.rb
+++ b/app/models/farmware_installation.rb
@@ -1,3 +1,5 @@
+require "open-uri"
+
 # A record of installation of a Farmware.
 # Useful for restoring a device after a re-flash.
 class FarmwareInstallation < ApplicationRecord
@@ -41,7 +43,7 @@ def maybe_recover_from_fetch_error(error)
   # SLOW I/O BOUND STUFF! Don't run this on the
   # main thread!
   def infer_package_name_from_url
-    string_io = open(url)
+    string_io = URI.parse(url).open
     string = string_io.read(MAX_JSON_SIZE)
     json = JSON.parse(string)
     pkg_name = json.fetch("package")
diff --git a/spec/controllers/api/ai/ai_controller_spec.rb b/spec/controllers/api/ai/ai_controller_spec.rb
index c8c324c023..1a95ec6c62 100644
--- a/spec/controllers/api/ai/ai_controller_spec.rb
+++ b/spec/controllers/api/ai/ai_controller_spec.rb
@@ -11,6 +11,8 @@ def chunk(content, done=nil)
     "\"content\":\"#{content}\"},\"index\":0,\"finish_reason\":#{done.to_json}}]}"
   end
 
+  URL_PATTERN = /raw\.githubusercontent\.com/
+
   it "makes a successful request for code" do
     sign_in user
     FactoryBot.create(:peripheral, device: user.device)
@@ -22,7 +24,7 @@ def chunk(content, done=nil)
       sequence_id: nil,
     }
 
-    stub_request(:get, /raw.githubusercontent.com/).to_return(
+    stub_request(:get, URL_PATTERN).to_return(
       body: "---\n---# section\ncontent```lua\n```")
 
     stub_request(:post, "https://api.openai.com/v1/chat/completions").to_return(
@@ -58,7 +60,7 @@ def chunk(content, done=nil)
       context_key: "lua",
       sequence_id: nil,
     }
-    stub_request(:get, /raw.githubusercontent.com/).to_return(
+    stub_request(:get, URL_PATTERN).to_return(
       body: "---\n---# section\ncontent```lua\n```")
 
     stub_request(:post, "https://api.openai.com/v1/chat/completions").to_timeout
@@ -75,7 +77,7 @@ def chunk(content, done=nil)
       sequence_id: nil,
     }
 
-    stub_request(:get, /raw.githubusercontent.com/).to_raise(SocketError)
+    stub_request(:get, URL_PATTERN).to_raise(SocketError)
 
     stub_request(:post, "https://api.openai.com/v1/chat/completions").to_timeout
 
@@ -91,7 +93,7 @@ def chunk(content, done=nil)
       sequence_id: nil,
     }
 
-    stub_request(:get, /raw.githubusercontent.com/).to_return(
+    stub_request(:get, URL_PATTERN).to_return(
       body: "---\n---# nothing for now\n")
 
     stub_request(:post, "https://api.openai.com/v1/chat/completions").to_return(
diff --git a/spec/models/farmware_installation_spec.rb b/spec/models/farmware_installation_spec.rb
index 8e394417ea..7091661db2 100644
--- a/spec/models/farmware_installation_spec.rb
+++ b/spec/models/farmware_installation_spec.rb
@@ -9,9 +9,9 @@
   class Mystery < StandardError; end
 
   it "handles unknown errors while parsing farmware manifest" do
-    error    = Mystery.new("wow!")
-    fi       = FarmwareInstallation.create(device: device, url: FAKE_URL)
-    expect(fi).to receive(:open).and_raise(error)
+    error = Mystery.new("wow!")
+    fi = FarmwareInstallation.create(device: device, url: FAKE_URL)
+    stub_request(:get, FAKE_URL).to_raise(error)
     expect { fi.infer_package_name_from_url }.to raise_error(error)
     expect(fi.package_error)
       .to eq(FarmwareInstallation::OTHER_PROBLEM % Mystery.to_s)
@@ -19,9 +19,8 @@ class Mystery < StandardError; end
   end
 
   it "handles unreasonably large package names" do
-    fi       = FarmwareInstallation.create(device: device, url: FAKE_URL)
-    stringio = StringIO.new({ package: "*" * 100 }.to_json)
-    expect(fi).to receive(:open).and_return(stringio)
+    fi = FarmwareInstallation.create(device: device, url: FAKE_URL)
+    stub_request(:get, FAKE_URL).to_return(body: { package: "*" * 100 }.to_json)
     fi.infer_package_name_from_url
     error =
       FarmwareInstallation::KNOWN_PROBLEMS.fetch(ActiveRecord::ValueTooLong)
@@ -31,12 +30,11 @@ class Mystery < StandardError; end
 
   it "handles unreasonably large payloads" do
     old_value = FarmwareInstallation::MAX_JSON_SIZE
-    fi        = FarmwareInstallation.create(device: device, url: FAKE_URL)
-    stringio  = StringIO.new({hello: "world"}.to_json)
+    fi = FarmwareInstallation.create(device: device, url: FAKE_URL)
 
     const_reassign(FarmwareInstallation, :MAX_JSON_SIZE, 2)
 
-    expect(fi).to receive(:open).and_return(stringio)
+    stub_request(:get, FAKE_URL).to_return(body: {hello: "world"}.to_json)
     fi.infer_package_name_from_url
     error = FarmwareInstallation::KNOWN_PROBLEMS.fetch(JSON::ParserError)
     expect(fi.package_error).to eq(error)
@@ -46,8 +44,7 @@ class Mystery < StandardError; end
 
   it "sets the package name" do
     fi = FarmwareInstallation.create(device: device, url: FAKE_URL)
-    fake_json = StringIO.new({package: "FOO"}.to_json)
-    expect(fi).to receive(:open).and_return(fake_json)
+    stub_request(:get, FAKE_URL).to_return(body: {package: "FOO"}.to_json)
     fi.infer_package_name_from_url
     expect(fi.package_error).to eq(nil)
     expect(fi.package).to eq("FOO")
@@ -55,7 +52,7 @@ class Mystery < StandardError; end
 
   it "handles non-JSON strings" do
     fi = FarmwareInstallation.create(device: device, url: FAKE_URL)
-    expect(fi).to receive(:open).and_return(StringIO.new("{lol"))
+    stub_request(:get, FAKE_URL).to_return(body:"{lol")
     fi.infer_package_name_from_url
     error = FarmwareInstallation::KNOWN_PROBLEMS.fetch(JSON::ParserError)
     expect(fi.package_error).to eq(error)
@@ -63,9 +60,8 @@ class Mystery < StandardError; end
   end
 
   it "handles `package` fetch errors" do
-    fi            = FarmwareInstallation.create!(device: device,
-                                                 url:    "http://lycos.com")
-    expect(fi).to receive(:open).and_raise(SocketError.new("No!"))
+    fi = FarmwareInstallation.create!(device: device, url: FAKE_URL)
+    stub_request(:get, FAKE_URL).to_raise(SocketError.new("No!"))
     fi.infer_package_name_from_url
     error = FarmwareInstallation::KNOWN_PROBLEMS.fetch(SocketError)
     expect(fi.package_error).to eq(error)

From 5e93cb7ca06cafab2a9d9482101b0a5bb7a87ba7 Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Fri, 13 Oct 2023 12:23:52 -0700
Subject: [PATCH 2/9] upgrade rollbar

---
 app/views/dashboard/_addons.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/dashboard/_addons.html.erb b/app/views/dashboard/_addons.html.erb
index 938c18818f..86ff319c2f 100644
--- a/app/views/dashboard/_addons.html.erb
+++ b/app/views/dashboard/_addons.html.erb
@@ -50,7 +50,7 @@ try {
   };
 
 // Rollbar Snippet
-!function(r){var e={};function o(n){if(e[n])return e[n].exports;var t=e[n]={i:n,l:!1,exports:{}};return r[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=r,o.c=e,o.d=function(r,e,n){o.o(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:n})},o.r=function(r){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},o.t=function(r,e){if(1&e&&(r=o(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var t in r)o.d(n,t,function(e){return r[e]}.bind(null,t));return n},o.n=function(r){var e=r&&r.__esModule?function(){return r.default}:function(){return r};return o.d(e,"a",e),e},o.o=function(r,e){return Object.prototype.hasOwnProperty.call(r,e)},o.p="",o(o.s=0)}([function(r,e,o){"use strict";var n=o(1),t=o(5);_rollbarConfig=_rollbarConfig||{},_rollbarConfig.rollbarJsUrl=_rollbarConfig.rollbarJsUrl||"https://cdn.rollbar.com/rollbarjs/refs/tags/v2.25.0/rollbar.min.js",_rollbarConfig.async=void 0===_rollbarConfig.async||_rollbarConfig.async;var a=n.setupShim(window,_rollbarConfig),l=t(_rollbarConfig);window.rollbar=n.Rollbar,a.loadFull(window,document,!_rollbarConfig.async,_rollbarConfig,l)},function(r,e,o){"use strict";var n=o(2),t=o(3);function a(r){return function(){try{return r.apply(this,arguments)}catch(r){try{console.error("[Rollbar]: Internal error",r)}catch(r){}}}}var l=0;function i(r,e){this.options=r,this._rollbarOldOnError=null;var o=l++;this.shimId=function(){return o},"undefined"!=typeof window&&window._rollbarShims&&(window._rollbarShims[o]={handler:e,messages:[]})}var s=o(4),d=function(r,e){return new i(r,e)},c=function(r){return new s(d,r)};function u(r){return a((function(){var e=this,o=Array.prototype.slice.call(arguments,0),n={shim:e,method:r,args:o,ts:new Date};window._rollbarShims[this.shimId()].messages.push(n)}))}i.prototype.loadFull=function(r,e,o,n,t){var l=!1,i=e.createElement("script"),s=e.getElementsByTagName("script")[0],d=s.parentNode;i.crossOrigin="",i.src=n.rollbarJsUrl,o||(i.async=!0),i.onload=i.onreadystatechange=a((function(){if(!(l||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)){i.onload=i.onreadystatechange=null;try{d.removeChild(i)}catch(r){}l=!0,function(){var e;if(void 0===r._rollbarDidLoad){e=new Error("rollbar.js did not load");for(var o,n,a,l,i=0;o=r._rollbarShims[i++];)for(o=o.messages||[];n=o.shift();)for(a=n.args||[],i=0;i<a.length;++i)if("function"==typeof(l=a[i])){l(e);break}}"function"==typeof t&&t(e)}()}})),d.insertBefore(i,s)},i.prototype.wrap=function(r,e,o){try{var n;if(n="function"==typeof e?e:function(){return e||{}},"function"!=typeof r)return r;if(r._isWrap)return r;if(!r._rollbar_wrapped&&(r._rollbar_wrapped=function(){o&&"function"==typeof o&&o.apply(this,arguments);try{return r.apply(this,arguments)}catch(o){var e=o;throw e&&("string"==typeof e&&(e=new String(e)),e._rollbarContext=n()||{},e._rollbarContext._wrappedSource=r.toString(),window._rollbarWrappedError=e),e}},r._rollbar_wrapped._isWrap=!0,r.hasOwnProperty))for(var t in r)r.hasOwnProperty(t)&&(r._rollbar_wrapped[t]=r[t]);return r._rollbar_wrapped}catch(e){return r}};for(var p="log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleAnonymousErrors,handleUnhandledRejection,captureEvent,captureDomContentLoaded,captureLoad".split(","),f=0;f<p.length;++f)i.prototype[p[f]]=u(p[f]);r.exports={setupShim:function(r,e){if(r){var o=e.globalAlias||"Rollbar";if("object"==typeof r[o])return r[o];r._rollbarShims={},r._rollbarWrappedError=null;var l=new c(e);return a((function(){e.captureUncaught&&(l._rollbarOldOnError=r.onerror,n.captureUncaughtExceptions(r,l,!0),e.wrapGlobalEventHandlers&&t(r,l,!0)),e.captureUnhandledRejections&&n.captureUnhandledRejections(r,l,!0);var a=e.autoInstrument;return!1!==e.enabled&&(void 0===a||!0===a||"object"==typeof a&&a.network)&&r.addEventListener&&(r.addEventListener("load",l.captureLoad.bind(l)),r.addEventListener("DOMContentLoaded",l.captureDomContentLoaded.bind(l))),r[o]=l,l}))()}},Rollbar:c}},function(r,e,o){"use strict";function n(r,e,o,n){r._rollbarWrappedError&&(n[4]||(n[4]=r._rollbarWrappedError),n[5]||(n[5]=r._rollbarWrappedError._rollbarContext),r._rollbarWrappedError=null);var t=e.handleUncaughtException.apply(e,n);o&&o.apply(r,n),"anonymous"===t&&(e.anonymousErrorsPending+=1)}r.exports={captureUncaughtExceptions:function(r,e,o){if(r){var t;if("function"==typeof e._rollbarOldOnError)t=e._rollbarOldOnError;else if(r.onerror){for(t=r.onerror;t._rollbarOldOnError;)t=t._rollbarOldOnError;e._rollbarOldOnError=t}e.handleAnonymousErrors();var a=function(){var o=Array.prototype.slice.call(arguments,0);n(r,e,t,o)};o&&(a._rollbarOldOnError=t),r.onerror=a}},captureUnhandledRejections:function(r,e,o){if(r){"function"==typeof r._rollbarURH&&r._rollbarURH.belongsToShim&&r.removeEventListener("unhandledrejection",r._rollbarURH);var n=function(r){var o,n,t;try{o=r.reason}catch(r){o=void 0}try{n=r.promise}catch(r){n="[unhandledrejection] error getting `promise` from event"}try{t=r.detail,!o&&t&&(o=t.reason,n=t.promise)}catch(r){}o||(o="[unhandledrejection] error getting `reason` from event"),e&&e.handleUnhandledRejection&&e.handleUnhandledRejection(o,n)};n.belongsToShim=o,r._rollbarURH=n,r.addEventListener("unhandledrejection",n)}}}},function(r,e,o){"use strict";function n(r,e,o){if(e.hasOwnProperty&&e.hasOwnProperty("addEventListener")){for(var n=e.addEventListener;n._rollbarOldAdd&&n.belongsToShim;)n=n._rollbarOldAdd;var t=function(e,o,t){n.call(this,e,r.wrap(o),t)};t._rollbarOldAdd=n,t.belongsToShim=o,e.addEventListener=t;for(var a=e.removeEventListener;a._rollbarOldRemove&&a.belongsToShim;)a=a._rollbarOldRemove;var l=function(r,e,o){a.call(this,r,e&&e._rollbar_wrapped||e,o)};l._rollbarOldRemove=a,l.belongsToShim=o,e.removeEventListener=l}}r.exports=function(r,e,o){if(r){var t,a,l="EventTarget,Window,Node,ApplicationCache,AudioTrackList,ChannelMergerNode,CryptoOperation,EventSource,FileReader,HTMLUnknownElement,IDBDatabase,IDBRequest,IDBTransaction,KeyOperation,MediaController,MessagePort,ModalWindow,Notification,SVGElementInstance,Screen,TextTrack,TextTrackCue,TextTrackList,WebSocket,WebSocketWorker,Worker,XMLHttpRequest,XMLHttpRequestEventTarget,XMLHttpRequestUpload".split(",");for(t=0;t<l.length;++t)r[a=l[t]]&&r[a].prototype&&n(e,r[a].prototype,o)}}},function(r,e,o){"use strict";function n(r,e){this.impl=r(e,this),this.options=e,function(r){for(var e=function(r){return function(){var e=Array.prototype.slice.call(arguments,0);if(this.impl[r])return this.impl[r].apply(this.impl,e)}},o="log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleAnonymousErrors,handleUnhandledRejection,_createItem,wrap,loadFull,shimId,captureEvent,captureDomContentLoaded,captureLoad".split(","),n=0;n<o.length;n++)r[o[n]]=e(o[n])}(n.prototype)}n.prototype._swapAndProcessMessages=function(r,e){var o,n,t;for(this.impl=r(this.options);o=e.shift();)n=o.method,t=o.args,this[n]&&"function"==typeof this[n]&&("captureDomContentLoaded"===n||"captureLoad"===n?this[n].apply(this,[t[0],o.ts]):this[n].apply(this,t));return this},r.exports=n},function(r,e,o){"use strict";r.exports=function(r){return function(e){if(!e&&!window._rollbarInitialized){for(var o,n,t=(r=r||{}).globalAlias||"Rollbar",a=window.rollbar,l=function(r){return new a(r)},i=0;o=window._rollbarShims[i++];)n||(n=o.handler),o.handler._swapAndProcessMessages(l,o.messages);window[t]=n,window._rollbarInitialized=!0}}}}]);
+!function(r){var e={};function o(n){if(e[n])return e[n].exports;var t=e[n]={i:n,l:!1,exports:{}};return r[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.m=r,o.c=e,o.d=function(r,e,n){o.o(r,e)||Object.defineProperty(r,e,{enumerable:!0,get:n})},o.r=function(r){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},o.t=function(r,e){if(1&e&&(r=o(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var t in r)o.d(n,t,function(e){return r[e]}.bind(null,t));return n},o.n=function(r){var e=r&&r.__esModule?function(){return r.default}:function(){return r};return o.d(e,"a",e),e},o.o=function(r,e){return Object.prototype.hasOwnProperty.call(r,e)},o.p="",o(o.s=0)}([function(r,e,o){"use strict";var n=o(1),t=o(5);_rollbarConfig=_rollbarConfig||{},_rollbarConfig.rollbarJsUrl=_rollbarConfig.rollbarJsUrl||"https://cdn.rollbar.com/rollbarjs/refs/tags/v2.26.2/rollbar.min.js",_rollbarConfig.async=void 0===_rollbarConfig.async||_rollbarConfig.async;var a=n.setupShim(window,_rollbarConfig),l=t(_rollbarConfig);window.rollbar=n.Rollbar,a.loadFull(window,document,!_rollbarConfig.async,_rollbarConfig,l)},function(r,e,o){"use strict";var n=o(2),t=o(3);function a(r){return function(){try{return r.apply(this,arguments)}catch(r){try{console.error("[Rollbar]: Internal error",r)}catch(r){}}}}var l=0;function i(r,e){this.options=r,this._rollbarOldOnError=null;var o=l++;this.shimId=function(){return o},"undefined"!=typeof window&&window._rollbarShims&&(window._rollbarShims[o]={handler:e,messages:[]})}var s=o(4),d=function(r,e){return new i(r,e)},c=function(r){return new s(d,r)};function u(r){return a((function(){var e=this,o=Array.prototype.slice.call(arguments,0),n={shim:e,method:r,args:o,ts:new Date};window._rollbarShims[this.shimId()].messages.push(n)}))}i.prototype.loadFull=function(r,e,o,n,t){var l=!1,i=e.createElement("script"),s=e.getElementsByTagName("script")[0],d=s.parentNode;i.crossOrigin="",i.src=n.rollbarJsUrl,o||(i.async=!0),i.onload=i.onreadystatechange=a((function(){if(!(l||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)){i.onload=i.onreadystatechange=null;try{d.removeChild(i)}catch(r){}l=!0,function(){var e;if(void 0===r._rollbarDidLoad){e=new Error("rollbar.js did not load");for(var o,n,a,l,i=0;o=r._rollbarShims[i++];)for(o=o.messages||[];n=o.shift();)for(a=n.args||[],i=0;i<a.length;++i)if("function"==typeof(l=a[i])){l(e);break}}"function"==typeof t&&t(e)}()}})),d.insertBefore(i,s)},i.prototype.wrap=function(r,e,o){try{var n;if(n="function"==typeof e?e:function(){return e||{}},"function"!=typeof r)return r;if(r._isWrap)return r;if(!r._rollbar_wrapped&&(r._rollbar_wrapped=function(){o&&"function"==typeof o&&o.apply(this,arguments);try{return r.apply(this,arguments)}catch(o){var e=o;throw e&&("string"==typeof e&&(e=new String(e)),e._rollbarContext=n()||{},e._rollbarContext._wrappedSource=r.toString(),window._rollbarWrappedError=e),e}},r._rollbar_wrapped._isWrap=!0,r.hasOwnProperty))for(var t in r)r.hasOwnProperty(t)&&(r._rollbar_wrapped[t]=r[t]);return r._rollbar_wrapped}catch(e){return r}};for(var p="log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleAnonymousErrors,handleUnhandledRejection,captureEvent,captureDomContentLoaded,captureLoad".split(","),f=0;f<p.length;++f)i.prototype[p[f]]=u(p[f]);r.exports={setupShim:function(r,e){if(r){var o=e.globalAlias||"Rollbar";if("object"==typeof r[o])return r[o];r._rollbarShims={},r._rollbarWrappedError=null;var l=new c(e);return a((function(){e.captureUncaught&&(l._rollbarOldOnError=r.onerror,n.captureUncaughtExceptions(r,l,!0),e.wrapGlobalEventHandlers&&t(r,l,!0)),e.captureUnhandledRejections&&n.captureUnhandledRejections(r,l,!0);var a=e.autoInstrument;return!1!==e.enabled&&(void 0===a||!0===a||function(r){return!("object"!=typeof r||void 0!==r.page&&!r.page)}(a))&&r.addEventListener&&(r.addEventListener("load",l.captureLoad.bind(l)),r.addEventListener("DOMContentLoaded",l.captureDomContentLoaded.bind(l))),r[o]=l,l}))()}},Rollbar:c}},function(r,e,o){"use strict";function n(r,e,o,n){r._rollbarWrappedError&&(n[4]||(n[4]=r._rollbarWrappedError),n[5]||(n[5]=r._rollbarWrappedError._rollbarContext),r._rollbarWrappedError=null);var t=e.handleUncaughtException.apply(e,n);o&&o.apply(r,n),"anonymous"===t&&(e.anonymousErrorsPending+=1)}r.exports={captureUncaughtExceptions:function(r,e,o){if(r){var t;if("function"==typeof e._rollbarOldOnError)t=e._rollbarOldOnError;else if(r.onerror){for(t=r.onerror;t._rollbarOldOnError;)t=t._rollbarOldOnError;e._rollbarOldOnError=t}e.handleAnonymousErrors();var a=function(){var o=Array.prototype.slice.call(arguments,0);n(r,e,t,o)};o&&(a._rollbarOldOnError=t),r.onerror=a}},captureUnhandledRejections:function(r,e,o){if(r){"function"==typeof r._rollbarURH&&r._rollbarURH.belongsToShim&&r.removeEventListener("unhandledrejection",r._rollbarURH);var n=function(r){var o,n,t;try{o=r.reason}catch(r){o=void 0}try{n=r.promise}catch(r){n="[unhandledrejection] error getting `promise` from event"}try{t=r.detail,!o&&t&&(o=t.reason,n=t.promise)}catch(r){}o||(o="[unhandledrejection] error getting `reason` from event"),e&&e.handleUnhandledRejection&&e.handleUnhandledRejection(o,n)};n.belongsToShim=o,r._rollbarURH=n,r.addEventListener("unhandledrejection",n)}}}},function(r,e,o){"use strict";function n(r,e,o){if(e.hasOwnProperty&&e.hasOwnProperty("addEventListener")){for(var n=e.addEventListener;n._rollbarOldAdd&&n.belongsToShim;)n=n._rollbarOldAdd;var t=function(e,o,t){n.call(this,e,r.wrap(o),t)};t._rollbarOldAdd=n,t.belongsToShim=o,e.addEventListener=t;for(var a=e.removeEventListener;a._rollbarOldRemove&&a.belongsToShim;)a=a._rollbarOldRemove;var l=function(r,e,o){a.call(this,r,e&&e._rollbar_wrapped||e,o)};l._rollbarOldRemove=a,l.belongsToShim=o,e.removeEventListener=l}}r.exports=function(r,e,o){if(r){var t,a,l="EventTarget,Window,Node,ApplicationCache,AudioTrackList,ChannelMergerNode,CryptoOperation,EventSource,FileReader,HTMLUnknownElement,IDBDatabase,IDBRequest,IDBTransaction,KeyOperation,MediaController,MessagePort,ModalWindow,Notification,SVGElementInstance,Screen,TextTrack,TextTrackCue,TextTrackList,WebSocket,WebSocketWorker,Worker,XMLHttpRequest,XMLHttpRequestEventTarget,XMLHttpRequestUpload".split(",");for(t=0;t<l.length;++t)r[a=l[t]]&&r[a].prototype&&n(e,r[a].prototype,o)}}},function(r,e,o){"use strict";function n(r,e){this.impl=r(e,this),this.options=e,function(r){for(var e=function(r){return function(){var e=Array.prototype.slice.call(arguments,0);if(this.impl[r])return this.impl[r].apply(this.impl,e)}},o="log,debug,info,warn,warning,error,critical,global,configure,handleUncaughtException,handleAnonymousErrors,handleUnhandledRejection,_createItem,wrap,loadFull,shimId,captureEvent,captureDomContentLoaded,captureLoad".split(","),n=0;n<o.length;n++)r[o[n]]=e(o[n])}(n.prototype)}n.prototype._swapAndProcessMessages=function(r,e){var o,n,t;for(this.impl=r(this.options);o=e.shift();)n=o.method,t=o.args,this[n]&&"function"==typeof this[n]&&("captureDomContentLoaded"===n||"captureLoad"===n?this[n].apply(this,[t[0],o.ts]):this[n].apply(this,t));return this},r.exports=n},function(r,e,o){"use strict";r.exports=function(r){return function(e){if(!e&&!window._rollbarInitialized){for(var o,n,t=(r=r||{}).globalAlias||"Rollbar",a=window.rollbar,l=function(r){return new a(r)},i=0;o=window._rollbarShims[i++];)n||(n=o.handler),o.handler._swapAndProcessMessages(l,o.messages);window[t]=n,window._rollbarInitialized=!0}}}}]);
 // End Rollbar Snippet
 
 <% end %>

From 932c7131e86c3375c939faf7edecda57264c5c35 Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Wed, 18 Oct 2023 13:38:03 -0700
Subject: [PATCH 3/9] update add plant UI

---
 app/views/dashboard/_common_assets.html.erb   |   3 +-
 app/views/dashboard/demo.html.erb             |   2 +-
 app/views/layouts/dashboard.html.erb          |   3 +-
 .../fake_crop_search_result.ts                |  19 +-
 frontend/css/farm_designer/farm_designer.scss |  20 +-
 .../farm_designer/farm_designer_panels.scss   | 203 +++++++++++++++---
 frontend/css/fonts.scss                       |   9 +-
 frontend/css/static_pages.scss                |   2 +-
 frontend/curves/chart.tsx                     |  95 ++++----
 .../__tests__/search_selectors_test.ts        |   6 +-
 frontend/farm_designer/__tests__/util_test.ts |   6 +-
 frontend/farm_designer/interfaces.ts          |   3 +-
 .../map/__tests__/garden_map_test.tsx         |   9 +
 .../__tests__/add_plant_icon_test.tsx         |  49 +++++
 .../map/active_plant/add_plant_icon.tsx       |  34 +++
 .../farm_designer/map/active_plant/index.ts   |   1 +
 frontend/farm_designer/map/garden_map.tsx     |  12 ++
 frontend/farm_designer/search_selectors.ts    |   5 +-
 frontend/farm_designer/util.ts                |   8 +-
 frontend/open_farm/openfarm.ts                |   2 +-
 frontend/photos/images/image_flipper.tsx      |   2 +-
 frontend/photos/images/interfaces.ts          |   1 +
 frontend/photos/images/photos.tsx             |   1 +
 frontend/plants/__tests__/crop_info_test.tsx  |  66 ++++--
 .../openfarm_search_results_test.tsx          |   8 +-
 frontend/plants/crop_info.tsx                 | 157 ++++++++++----
 .../plants/grid/__tests__/grid_input_test.tsx |   2 +-
 frontend/plants/grid/grid_input.tsx           |  81 ++++---
 frontend/plants/grid/interfaces.ts            |   8 -
 frontend/plants/grid/plant_grid.tsx           |   5 +-
 frontend/plants/openfarm_search_results.tsx   |  10 +-
 frontend/points/create_points.tsx             |   3 +-
 public/404.html                               |   4 +-
 public/500.html                               |   4 +-
 public/app-resources/languages/_helper.js     |   6 +-
 public/app-resources/languages/_helper.ts     |   2 +-
 .../languages/translation_metrics.md          |  24 +--
 37 files changed, 612 insertions(+), 263 deletions(-)
 create mode 100644 frontend/farm_designer/map/active_plant/__tests__/add_plant_icon_test.tsx
 create mode 100644 frontend/farm_designer/map/active_plant/add_plant_icon.tsx

diff --git a/app/views/dashboard/_common_assets.html.erb b/app/views/dashboard/_common_assets.html.erb
index a990e54bea..13181975ab 100644
--- a/app/views/dashboard/_common_assets.html.erb
+++ b/app/views/dashboard/_common_assets.html.erb
@@ -18,4 +18,5 @@ window.process = {
 <%= render "addons" %>
 <%= javascript_include_tag *@js_assets %>
 <meta content="width=device-width, initial-scale=1" name="viewport">
-<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Cabin:300,300i,400,400i,700,700i" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua:300,300i,400,400i,700,700i" rel="stylesheet">
diff --git a/app/views/dashboard/demo.html.erb b/app/views/dashboard/demo.html.erb
index 5e74f65d4e..8fd0d45c3d 100644
--- a/app/views/dashboard/demo.html.erb
+++ b/app/views/dashboard/demo.html.erb
@@ -38,7 +38,7 @@
 	bottom: 30px;
 	box-shadow: 0 0 15px rgba(0,0,0,0.4);
 	color: #fff;
-	font-family: "Roboto", sans-serif;
+	font-family: "Cabin", sans-serif;
 	font-size: 25px;
 	font-weight: bold;
 	padding: 15px 30px;
diff --git a/app/views/layouts/dashboard.html.erb b/app/views/layouts/dashboard.html.erb
index f4d30a7088..17c69ca3ce 100644
--- a/app/views/layouts/dashboard.html.erb
+++ b/app/views/layouts/dashboard.html.erb
@@ -24,7 +24,8 @@
       text-align: center; width: 100%; padding-top: 10%; color: #434343; }
     </style>
     <%= stylesheet_link_tag *@css_assets %>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Cabin:300,300i,400,400i,700,700i" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Inknut+Antiqua:300,300i,400,400i,700,700i" rel="stylesheet">
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <link rel="apple-touch-icon" href="/images/favicon.png" type="image/png">
     <script>
diff --git a/frontend/__test_support__/fake_crop_search_result.ts b/frontend/__test_support__/fake_crop_search_result.ts
index 2d0df2681a..b5a2980ea4 100644
--- a/frontend/__test_support__/fake_crop_search_result.ts
+++ b/frontend/__test_support__/fake_crop_search_result.ts
@@ -4,14 +4,19 @@ export const fakeCropLiveSearchResult = (): CropLiveSearchResult => ({
   crop: {
     name: "Mint",
     slug: "mint",
-    binomial_name: "",
-    common_names: [],
-    description: "",
-    sun_requirements: "",
-    sowing_method: "",
-    processing_pictures: 0
+    binomial_name: "Mentha spicata",
+    common_names: ["Mint", "spearmint"],
+    description: "Mint is a perennial herb with a distinctive taste.",
+    sun_requirements: "Partial sun",
+    sowing_method: "Direct seed indoors or outside",
+    processing_pictures: 0,
+    main_image_path: "",
+    spread: 25,
+    row_spacing: 35,
+    height: 60,
+    growing_degree_days: 100,
   },
-  image: "fake-mint-svg",
+  images: ["fake-mint-svg"],
   companions: [
     { name: "Strawberry", slug: "strawberry", svg_icon: "fake-strawberry-svg" },
   ],
diff --git a/frontend/css/farm_designer/farm_designer.scss b/frontend/css/farm_designer/farm_designer.scss
index fc515ca94c..70a22a1c69 100644
--- a/frontend/css/farm_designer/farm_designer.scss
+++ b/frontend/css/farm_designer/farm_designer.scss
@@ -60,7 +60,9 @@
 }
 
 .crop-drag-info-image {
-  width: 100% !important;
+  width: 7rem;
+  height: 7rem;
+  padding: 1rem;
 }
 
 .plant-catalog-image {
@@ -113,22 +115,6 @@
   }
 }
 
-.crop-info-overlay {
-  display: flex;
-  position: relative;
-  bottom: 3rem;
-  z-index: 2;
-  background-color: $dark_gray;
-  font-style: italic;
-  color: $off_white;
-  justify-content: center;
-  /* align horizontal */
-  align-items: center;
-  /* align vertical */
-  height: 3rem;
-  width: 100%;
-}
-
 .thin-search-wrapper {
   width: 100%;
   .thin-search {
diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss
index 2cf5d23ac0..095dd2ac09 100644
--- a/frontend/css/farm_designer/farm_designer_panels.scss
+++ b/frontend/css/farm_designer/farm_designer_panels.scss
@@ -646,7 +646,7 @@
     ul {
       margin-bottom: 0;
     }
-    margin-top: 1rem;
+    padding-top: 1rem;
     label {
       margin-top: 0 !important;
     }
@@ -657,7 +657,7 @@
       margin-top: 1rem;
     }
     .fb-button {
-      &.green {
+      &.save {
         margin-right: 1.5rem;
       }
       &.delete {
@@ -680,12 +680,12 @@
       border-color: $medium_gray;
     }
     .grid-and-row-planting {
-      hr {
-        border-color: $medium_gray;
-      }
       label {
         color: $dark_gray;
       }
+      input {
+        box-shadow: 0 0 10px #ddd;
+      }
       .update-button,
       .preview-button,
       .cancel-button,
@@ -697,19 +697,12 @@
           background: $off_white;
         }
       }
-      .use-current-location {
-        margin-top: 0;
-      }
     }
     .blue {
       float: none;
     }
     .use-current-location {
       button {
-        position: absolute;
-        left: 1rem;
-        margin-top: 0.25rem;
-        height: 2.75rem;
         .fa {
           font-size: 1.5rem;
         }
@@ -884,9 +877,11 @@
     padding: 0 1.4rem 1rem;
   }
   .crop-info-description {
-    max-height: 10rem;
+    height: 8rem;
     overflow-y: auto;
     overflow-x: hidden;
+    width: 75%;
+    font-family: "Cabin", sans-serif;
   }
   .saving-indicator {
     position: absolute;
@@ -898,6 +893,46 @@
       color: $white;
     }
   }
+  .crop-drag-info-tile {
+    position: absolute;
+    right: 0;
+    margin: 1rem;
+    border: 2px solid $white;
+    border-radius: 50%;
+  }
+}
+
+.dark-portal {
+  .bp5-popover-content {
+    background: $dark_gray;
+    color: $off_white;
+  }
+}
+
+.grid-popup-content {
+  width: 25rem;
+}
+
+.grid-input {
+  .row {
+    margin-top: 0.5rem;
+    .grid-axis-label {
+      font-weight: bold;
+    }
+  }
+  .use-current-location {
+    display: inline;
+    float: none;
+    span,
+    button {
+      display: inline;
+      float: none;
+    }
+    button {
+      width: 2.25rem;
+      padding-left: 0;
+    }
+  }
 }
 
 .crop-info-panel {
@@ -906,6 +941,52 @@
     background-size: 144% !important;
     background-repeat: no-repeat !important;
     background-position: top center !important;
+    min-height: 125px;
+    .panel-title {
+      overflow: visible;
+      .title {
+        font-family: "Inknut Antiqua";
+        font-weight: bold;
+      }
+      .bp5-popover-wrapper {
+        position: absolute;
+        right: 0;
+      }
+      .transparent-button {
+        position: absolute;
+        bottom: -9.5rem;
+        right: 1.5rem;
+        margin: 0;
+        color: $white;
+        white-space: nowrap;
+      }
+      .fa-th-large,
+      .fa-plus,
+      .fa-arrows {
+        position: absolute;
+        background: $white;
+        color: $dark_gray;
+        border-radius: 50%;
+        height: 1.5rem;
+        width: 1.5rem;
+        line-height: 1.5rem;
+        text-align: center;
+        font-size: 1rem;
+        padding-left: 0.15rem;
+      }
+      .fa-th-large {
+        top: 6rem;
+        right: 1.25rem;
+      }
+      .fa-plus {
+        top: 3.8rem;
+        right: 0.25rem;
+      }
+      .fa-arrows {
+        top: 1.5rem;
+        right: 1.25rem;
+      }
+    }
   }
   .panel-content {
     max-height: calc(100vh - 19rem);
@@ -948,21 +1029,64 @@
     }
     .companion {
       display: inline-block;
-      margin-top: 0.5rem;
       text-decoration: none !important;
+      background: $light_gray;
+      border-radius: 2rem;
+      margin-right: 1rem;
+      margin-bottom: 0.5rem;
+      padding: 0.15rem;
+      padding-left: 0.5rem;
       &:hover {
-        text-decoration: underline !important;
+        background: $gray;
       }
       p {
         display: inline;
         margin-left: 0.25rem;
         margin-right: 1rem;
         font-weight: bold;
+        text-transform: none;
       }
     }
   }
   .edit-on-openfarm {
     margin-bottom: 1rem;
+    font-size: 1.3rem;
+  }
+  .object-list {
+    li {
+      position: relative;
+      margin-left: 2rem;
+    }
+    li {
+      p,
+      div {
+        display: inline;
+        font-size: 1.3rem;
+        color: $dark_gray;
+      }
+      p {
+        margin-right: 0.25rem;
+        text-transform: uppercase;
+        font-weight: bold;
+      }
+      span {
+        position: absolute;
+        left: -2rem;
+      }
+    }
+  }
+  .plant-stage-selection,
+  .planted-at-selection {
+    display: flex;
+    label {
+      margin-right: 0.5rem;
+      line-height: 1rem;
+      white-space: nowrap;
+    }
+    .filter-search,
+    .input {
+      width: 100%;
+    }
   }
 }
 
@@ -1004,7 +1128,6 @@ li {
   li {
     margin-top: 1rem;
     p {
-      font-size: 1.25rem;
       margin-bottom: 0.5rem !important;
     }
   }
@@ -1085,27 +1208,30 @@ li {
 }
 
 .grid-and-row-planting {
-  hr {
-    opacity: 0.7;
-    border-top: 1.5px solid $white;
+  h3 {
+    width: 100%;
+    text-align: center;
   }
   .row {
+    margin-left: 0;
+    margin-right: 0;
     div[class*=col-] {
-      padding-left: 1.5rem;
-      padding-right: 0;
+      padding-left: 0;
+      padding-right: 1rem;
     }
   }
+  i {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
   label {
-    color: $white;
+    color: $off_white;
+    margin-top: 0.75rem;
   }
   .use-current-location {
     padding: 0;
-    margin-top: 2rem;
+    margin-left: 1rem;
     button {
-      position: absolute;
-      left: 1rem;
-      margin-top: 0.5rem;
-      height: 2.75rem;
       .fa {
         font-size: 1.5rem;
       }
@@ -1121,13 +1247,17 @@ li {
       &.numPlantsV {
         -moz-appearance: unset !important;
       }
+      box-shadow: none;
     }
   }
   .grid-planting-toggle {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
     label {
-      margin-top: 1rem;
+      margin-top: 0.5rem;
+    }
+    button {
+      float: right;
+      margin-right: 0.5rem;
+      margin-top: 0.5rem;
     }
   }
   .fb-toggle-button {
@@ -1157,6 +1287,13 @@ li {
   label {
     margin-top: 1rem !important;
   }
+  .filter-search {
+    position: relative;
+  }
+}
+
+.plant-stage-selection {
+  margin-bottom: 1rem;
 }
 
 .move-to-form {
@@ -2599,7 +2736,6 @@ li {
 }
 
 .crop-curve-info {
-  margin-top: 1.5rem;
   .bp5-collapse {
     padding-top: 0.5rem;
   }
@@ -2636,6 +2772,11 @@ li {
       line-height: 4rem;
     }
   }
+  .curve-svg-wrapper {
+    background: $white;
+    box-shadow: 0 0 10px $light_gray;
+    border-radius: 5px;
+  }
 }
 
 .curve-info-panel-content-wrapper,
diff --git a/frontend/css/fonts.scss b/frontend/css/fonts.scss
index e11beda776..d26e931211 100644
--- a/frontend/css/fonts.scss
+++ b/frontend/css/fonts.scss
@@ -1,14 +1,15 @@
 // Google Fonts
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic,100,100italic");
+@import url("https://fonts.googleapis.com/css?family=Cabin:400,400italic,700,700italic,100,100italic");
+@import url("https://fonts.googleapis.com/css?family=Inknut+Antiqua:400,400italic,700,700italic,100,100italic");
 @import "colors";
 // Font Variables
-$roboto: 'Roboto',
+$cabin: 'Cabin',
 Arial,
 Helvetica,
 sans-serif;
 body,
 html {
-  font-family: $roboto;
+  font-family: $cabin;
   font-weight: 400;
 }
 
@@ -20,7 +21,7 @@ h5,
 h6,
 p,
 fieldset {
-  font-family: $roboto;
+  font-family: $cabin;
   font-weight: 400;
 }
 
diff --git a/frontend/css/static_pages.scss b/frontend/css/static_pages.scss
index 762814b43c..a7e4d0354a 100644
--- a/frontend/css/static_pages.scss
+++ b/frontend/css/static_pages.scss
@@ -8,7 +8,7 @@
   padding-top: 4rem;
   h1,
   h2 {
-    font-family: "Roboto", Arial, Helvetica, sans-serif !important;
+    font-family: "Cabin", Arial, Helvetica, sans-serif !important;
     font-weight: 100 !important;
     color: $white;
     text-shadow: 0 0 25px rgba(0, 0, 0, 0.1), 0 0 25px rgba(0, 0, 0, 0.1);
diff --git a/frontend/curves/chart.tsx b/frontend/curves/chart.tsx
index e50b3ea082..0e553f5a81 100644
--- a/frontend/curves/chart.tsx
+++ b/frontend/curves/chart.tsx
@@ -177,52 +177,55 @@ const Data = (props: DataProps) => {
       {Object.entries(populatedData(data)).map(bar())}
       {bar(true)(["" + lastDay, data[maxDay(data)]])}
     </g>
-    <path id={"line"}
-      stroke={curveColor(curve)} strokeWidth={0.5} fill={"none"}
-      d={Object.entries(data)
-        .map(([day, value], index) => {
-          const prefix = index == 0 ? "M" : "L";
-          return `${prefix}${normX(day)},${normY(value)}`;
-        }).join(" ")} />
-    <g id={"values"}
-      stroke={curveColor(curve)}
-      strokeWidth={0.5}
-      fill={curveColor(curve)}
-      fillOpacity={0.5}>
-      {Object.entries(data)
-        .map(([day, value]) => {
-          return <circle key={day}
-            style={props.editable ? { cursor: "row-resize" } : {}}
-            onMouseDown={() => props.editable && props.setDragging(day)}
-            cx={normX(day)}
-            cy={normY(value)}
-            r={1} />;
-        })}
-    </g>
-    <g id={"other-values"}
-      stroke={Color.gray}
-      strokeWidth={0.5}
-      fill={Color.white}
-      fillOpacity={0.5}>
-      {Object.entries(populatedData(data))
-        .map(([day, value]) => {
-          if (inData(data, day)) { return; }
-          const show = props.editable && hoveredValue == day && !dragging;
-          const opacity = show ? 1 : 0;
-          const cursor = dataFull(data) ? "not-allowed" : "copy";
-          return <circle key={day}
-            style={props.editable ? { cursor } : {}}
-            onMouseEnter={() => setHoveredValue(day)}
-            onMouseLeave={() => setHoveredValue(undefined)}
-            onClick={() => props.editable && props.dispatch(editCurve(curve, {
-              data: addOrRemoveItem(curve.body.data, day, value),
-            }))}
-            opacity={opacity} fillOpacity={opacity}
-            cx={normX(day)}
-            cy={normY(value)}
-            r={1.5} />;
-        })}
-    </g>
+    {props.editable &&
+      <path id={"line"}
+        stroke={curveColor(curve)} strokeWidth={0.5} fill={"none"}
+        d={Object.entries(data)
+          .map(([day, value], index) => {
+            const prefix = index == 0 ? "M" : "L";
+            return `${prefix}${normX(day)},${normY(value)}`;
+          }).join(" ")} />}
+    {props.editable &&
+      <g id={"values"}
+        stroke={curveColor(curve)}
+        strokeWidth={0.5}
+        fill={curveColor(curve)}
+        fillOpacity={0.5}>
+        {Object.entries(data)
+          .map(([day, value]) => {
+            return <circle key={day}
+              style={{ cursor: "row-resize" }}
+              onMouseDown={() => props.setDragging(day)}
+              cx={normX(day)}
+              cy={normY(value)}
+              r={1} />;
+          })}
+      </g>}
+    {props.editable &&
+      <g id={"other-values"}
+        stroke={Color.gray}
+        strokeWidth={0.5}
+        fill={Color.white}
+        fillOpacity={0.5}>
+        {Object.entries(populatedData(data))
+          .map(([day, value]) => {
+            if (inData(data, day)) { return; }
+            const show = hoveredValue == day && !dragging;
+            const opacity = show ? 1 : 0;
+            const cursor = dataFull(data) ? "not-allowed" : "copy";
+            return <circle key={day}
+              style={{ cursor }}
+              onMouseEnter={() => setHoveredValue(day)}
+              onMouseLeave={() => setHoveredValue(undefined)}
+              onClick={() => props.editable && props.dispatch(editCurve(curve, {
+                data: addOrRemoveItem(curve.body.data, day, value),
+              }))}
+              opacity={opacity} fillOpacity={opacity}
+              cx={normX(day)}
+              cy={normY(value)}
+              r={1.5} />;
+          })}
+      </g>}
   </g>;
 };
 
diff --git a/frontend/farm_designer/__tests__/search_selectors_test.ts b/frontend/farm_designer/__tests__/search_selectors_test.ts
index afa9c8e843..5dca2a5b4b 100644
--- a/frontend/farm_designer/__tests__/search_selectors_test.ts
+++ b/frontend/farm_designer/__tests__/search_selectors_test.ts
@@ -9,7 +9,7 @@ describe("findBySlug()", () => {
     const result = findBySlug([fakeCropLiveSearchResult()], "some-crop");
     expect(result).toEqual({
       crop: expect.objectContaining({ name: "Some Crop" }),
-      image: FilePath.DEFAULT_ICON,
+      images: [FilePath.DEFAULT_ICON],
       companions: [],
     });
   });
@@ -18,7 +18,7 @@ describe("findBySlug()", () => {
     const result = findBySlug([fakeCropLiveSearchResult()]);
     expect(result).toEqual({
       crop: expect.objectContaining({ name: "" }),
-      image: FilePath.DEFAULT_ICON,
+      images: [FilePath.DEFAULT_ICON],
       companions: [],
     });
   });
@@ -27,7 +27,7 @@ describe("findBySlug()", () => {
     const result = findBySlug([fakeCropLiveSearchResult()], "mint");
     expect(result).toEqual({
       crop: expect.objectContaining({ name: "Mint" }),
-      image: "fake-mint-svg",
+      images: ["fake-mint-svg"],
       companions: [
         { name: "Strawberry", slug: "strawberry", svg_icon: "fake-strawberry-svg" },
       ],
diff --git a/frontend/farm_designer/__tests__/util_test.ts b/frontend/farm_designer/__tests__/util_test.ts
index 26a1c7600a..1b97123302 100644
--- a/frontend/farm_designer/__tests__/util_test.ts
+++ b/frontend/farm_designer/__tests__/util_test.ts
@@ -29,7 +29,7 @@ describe("OFSearch()", () => {
     expect(dispatch).toHaveBeenCalledWith(START);
     await expect(dispatch).toHaveBeenCalledWith({
       type: Actions.OF_SEARCH_RESULTS_OK, payload: [
-        { crop: {}, image: FilePath.DEFAULT_ICON, companions: [] }]
+        { crop: {}, images: [FilePath.DEFAULT_ICON], companions: [] }]
     });
     await expect(dispatch).not.toHaveBeenCalledWith(NO);
   });
@@ -61,7 +61,7 @@ describe("OFSearch()", () => {
     await expect(dispatch).toHaveBeenCalledWith({
       type: Actions.OF_SEARCH_RESULTS_OK, payload: [{
         crop: {},
-        image: "thumbnail_url",
+        images: ["thumbnail_url"],
         companions: [{ name: "name", slug: "slug", svg_icon: "svg_icon" }]
       }]
     });
@@ -95,7 +95,7 @@ describe("OFSearch()", () => {
     await expect(dispatch).toHaveBeenCalledWith({
       type: Actions.OF_SEARCH_RESULTS_OK, payload: [{
         crop: {},
-        image: "thumbnail_url",
+        images: ["thumbnail_url"],
         companions: [{ name: "name", slug: "slug", svg_icon: "svg_icon" }]
       }]
     });
diff --git a/frontend/farm_designer/interfaces.ts b/frontend/farm_designer/interfaces.ts
index ccd2bf6ff3..4eff1c4ea3 100644
--- a/frontend/farm_designer/interfaces.ts
+++ b/frontend/farm_designer/interfaces.ts
@@ -128,7 +128,7 @@ export interface MovePointsProps {
  */
 export interface CropLiveSearchResult {
   crop: OpenFarm.OFCrop;
-  image: string;
+  images: string[];
   companions: OpenFarm.CompanionsData[];
 }
 
@@ -298,6 +298,7 @@ export interface GardenMapState {
   selectionBox: SelectionBoxData | undefined;
   previousSelectionBoxArea: number | undefined;
   toLocation: Vector3 | undefined;
+  cursorPosition: AxisNumberProperty | undefined;
 }
 
 export type PlantOptions = Partial<PlantPointer>;
diff --git a/frontend/farm_designer/map/__tests__/garden_map_test.tsx b/frontend/farm_designer/map/__tests__/garden_map_test.tsx
index d8f86da475..9f06e91852 100644
--- a/frontend/farm_designer/map/__tests__/garden_map_test.tsx
+++ b/frontend/farm_designer/map/__tests__/garden_map_test.tsx
@@ -442,6 +442,15 @@ describe("<GardenMap/>", () => {
     }));
   });
 
+  it("sets cursor position", () => {
+    const wrapper = shallow<GardenMap>(<GardenMap {...fakeProps()} />);
+    mockMode = Mode.clickToAdd;
+    wrapper.find(".drop-area-svg").simulate("mouseMove", {
+      pageX: 10, pageY: 20
+    });
+    expect(wrapper.state().cursorPosition).toEqual({ x: 100, y: 200 });
+  });
+
   it("lays eggs", () => {
     setEggStatus(EggKeys.BRING_ON_THE_BUGS, "");
     setEggStatus(EggKeys.BUGS_ARE_STILL_ALIVE, "");
diff --git a/frontend/farm_designer/map/active_plant/__tests__/add_plant_icon_test.tsx b/frontend/farm_designer/map/active_plant/__tests__/add_plant_icon_test.tsx
new file mode 100644
index 0000000000..9d4c77ea8c
--- /dev/null
+++ b/frontend/farm_designer/map/active_plant/__tests__/add_plant_icon_test.tsx
@@ -0,0 +1,49 @@
+import { Path, FilePath } from "../../../../internal_urls";
+let mockPath = Path.mock(Path.cropSearch());
+jest.mock("../../../../history", () => ({
+  getPathArray: jest.fn(() => mockPath.split("/")),
+  push: jest.fn(),
+}));
+
+import { mount } from "enzyme";
+import React from "react";
+import { AddPlantIcon, AddPlantIconProps } from "../add_plant_icon";
+import {
+  fakeMapTransformProps,
+} from "../../../../__test_support__/map_transform_props";
+import {
+  fakeCropLiveSearchResult,
+} from "../../../../__test_support__/fake_crop_search_result";
+import { svgToUrl } from "../../../../open_farm/icons";
+
+describe("<AddPlantIcon />", () => {
+  const fakeProps = (): AddPlantIconProps => ({
+    cursorPosition: { x: 1, y: 2 },
+    cropSearchResults: [fakeCropLiveSearchResult()],
+    mapTransformProps: fakeMapTransformProps(),
+  });
+
+  it("returns icon", () => {
+    const wrapper = mount(<AddPlantIcon {...fakeProps()} />);
+    expect(wrapper.find("image").length).toEqual(1);
+    expect(wrapper.find("image").props().xlinkHref).toEqual(FilePath.DEFAULT_ICON);
+  });
+
+  it("doesn't return icon", () => {
+    const p = fakeProps();
+    p.cursorPosition = undefined;
+    const wrapper = mount(<AddPlantIcon {...p} />);
+    expect(wrapper.find("image").length).toEqual(0);
+  });
+
+  it("returns specific icon", () => {
+    mockPath = Path.mock(Path.cropSearch("mint"));
+    const p = fakeProps();
+    const result = fakeCropLiveSearchResult();
+    result.crop.svg_icon = "fake_icon";
+    p.cropSearchResults = [result];
+    const wrapper = mount(<AddPlantIcon {...p} />);
+    expect(wrapper.find("image").length).toEqual(1);
+    expect(wrapper.find("image").props().xlinkHref).toEqual(svgToUrl("fake_icon"));
+  });
+});
diff --git a/frontend/farm_designer/map/active_plant/add_plant_icon.tsx b/frontend/farm_designer/map/active_plant/add_plant_icon.tsx
new file mode 100644
index 0000000000..88180fcc96
--- /dev/null
+++ b/frontend/farm_designer/map/active_plant/add_plant_icon.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { round, scaleIcon, transformXY } from "../util";
+import { AxisNumberProperty, MapTransformProps } from "../interfaces";
+import { Path } from "../../../internal_urls";
+import { findBySlug } from "../../search_selectors";
+import { CropLiveSearchResult } from "../../interfaces";
+import { svgToUrl } from "../../../open_farm/icons";
+
+export interface AddPlantIconProps {
+  cursorPosition: AxisNumberProperty | undefined;
+  cropSearchResults: CropLiveSearchResult[];
+  mapTransformProps: MapTransformProps;
+}
+
+export const AddPlantIcon = (props: AddPlantIconProps) => {
+  if (!props.cursorPosition) { return <g />; }
+  const { x, y } = props.cursorPosition;
+  const radius = 25;
+  const { qx, qy } = transformXY(round(x), round(y), props.mapTransformProps);
+  const iconRadius = scaleIcon(radius);
+  const crop = Path.getSlug(Path.cropSearch());
+  const result = findBySlug(props.cropSearchResults, crop);
+  const icon = svgToUrl(result.crop.svg_icon);
+  return <g id="adding-plant-icon">
+    <image
+      className={"adding-plant"}
+      style={{ pointerEvents: "none" }}
+      x={qx - iconRadius}
+      y={qy - iconRadius}
+      width={iconRadius * 2}
+      height={iconRadius * 2}
+      xlinkHref={icon} />
+  </g>;
+};
diff --git a/frontend/farm_designer/map/active_plant/index.ts b/frontend/farm_designer/map/active_plant/index.ts
index 65e15c6d90..661496d0fb 100644
--- a/frontend/farm_designer/map/active_plant/index.ts
+++ b/frontend/farm_designer/map/active_plant/index.ts
@@ -1,2 +1,3 @@
 export * from "./active_plant_drag_helper";
 export * from "./hovered_plant";
+export * from "./add_plant_icon";
diff --git a/frontend/farm_designer/map/garden_map.tsx b/frontend/farm_designer/map/garden_map.tsx
index 62b1d92fca..5fceb8ce0d 100644
--- a/frontend/farm_designer/map/garden_map.tsx
+++ b/frontend/farm_designer/map/garden_map.tsx
@@ -48,6 +48,7 @@ import { SequenceVisualization } from "./sequence_visualization";
 import { chooseProfile, ProfileLine } from "./profile";
 import { betterCompact } from "../../util";
 import { Path } from "../../internal_urls";
+import { AddPlantIcon } from "./active_plant/add_plant_icon";
 
 const BOUND_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
 
@@ -122,6 +123,7 @@ export class GardenMap extends
       activeDragXY: { x: undefined, y: undefined, z: undefined },
       activeDragSpread: undefined,
       selectionBox: undefined,
+      cursorPosition: undefined,
       previousSelectionBoxArea: getSelectionBoxArea(this.state.selectionBox),
     });
   }, 400);
@@ -375,6 +377,9 @@ export class GardenMap extends
           plantActions: !this.props.designer.editGroupAreaInMap,
         });
         break;
+      case Mode.clickToAdd:
+        this.setState({ cursorPosition: this.getGardenCoordinates(e) });
+        break;
       case Mode.boxSelect:
       default:
         resizeBox({
@@ -682,6 +687,12 @@ export class GardenMap extends
     ? <Bugs mapTransformProps={this.mapTransformProps}
       botSize={this.props.botSize} />
     : <g />;
+  AddPlantIcon = () => getMode() == Mode.clickToAdd
+    ? <AddPlantIcon
+      cursorPosition={this.state.cursorPosition}
+      cropSearchResults={this.props.designer.cropSearchResults}
+      mapTransformProps={this.mapTransformProps} />
+    : <g />;
 
   /** Render layers in order from back to front. */
   render() {
@@ -713,6 +724,7 @@ export class GardenMap extends
             <this.GroupOrder />
             <this.SequenceVisualization />
             <this.Bugs />
+            <this.AddPlantIcon />
           </svg>
         </svg>
       </ErrorBoundary>
diff --git a/frontend/farm_designer/search_selectors.ts b/frontend/farm_designer/search_selectors.ts
index 363b4911db..bdca35d7c9 100644
--- a/frontend/farm_designer/search_selectors.ts
+++ b/frontend/farm_designer/search_selectors.ts
@@ -14,9 +14,10 @@ export function findBySlug(
       description: "",
       sun_requirements: "",
       sowing_method: "",
-      processing_pictures: 0
+      processing_pictures: 0,
+      main_image_path: "",
     },
-    image: FilePath.DEFAULT_ICON,
+    images: [FilePath.DEFAULT_ICON],
     companions: [],
   };
 }
diff --git a/frontend/farm_designer/util.ts b/frontend/farm_designer/util.ts
index f4639febc9..567e336855 100644
--- a/frontend/farm_designer/util.ts
+++ b/frontend/farm_designer/util.ts
@@ -26,13 +26,13 @@ const OFSearchRaw = (specific: boolean) => (searchTerm: string) =>
       ? openFarmSearchQuerySpecific(searchTerm)
       : openFarmSearchQuery(searchTerm))
       .then(resp => {
-        const images: { [key: string]: string } = {};
+        const imageUrls: string[] = [];
         const companions: OpenFarm.CompanionsData[] = [];
         get(resp, "data.included", FALLBACK)
           .map((item: OpenFarm.Included) => {
             switch (item.type) {
               case "crops-pictures":
-                images[item.id] = item.attributes.thumbnail_url;
+                imageUrls.push(item.attributes.thumbnail_url);
                 break;
               case "crops":
                 const { name, slug, svg_icon } = item.attributes;
@@ -42,8 +42,8 @@ const OFSearchRaw = (specific: boolean) => (searchTerm: string) =>
           });
         const payload = flatten([resp.data.data]).map(datum => {
           const crop = datum.attributes;
-          const id = get(datum, "relationships.pictures.data[0].id", "");
-          return { crop, image: (images[id] || FilePath.DEFAULT_ICON), companions };
+          const images = imageUrls.length > 0 ? imageUrls : [FilePath.DEFAULT_ICON];
+          return { crop, images, companions };
         });
         dispatch({ type: Actions.OF_SEARCH_RESULTS_OK, payload });
       })
diff --git a/frontend/open_farm/openfarm.ts b/frontend/open_farm/openfarm.ts
index 10d283e772..fd614367be 100644
--- a/frontend/open_farm/openfarm.ts
+++ b/frontend/open_farm/openfarm.ts
@@ -16,7 +16,7 @@ export namespace OpenFarm {
     height?: number;
     processing_pictures: number;
     guides_count?: number;
-    main_image_path?: string;
+    main_image_path: string;
     taxon?: string;
     tags_array?: string[];
     growing_degree_days?: number;
diff --git a/frontend/photos/images/image_flipper.tsx b/frontend/photos/images/image_flipper.tsx
index 3ea199673c..7a47b6bfa1 100644
--- a/frontend/photos/images/image_flipper.tsx
+++ b/frontend/photos/images/image_flipper.tsx
@@ -101,7 +101,7 @@ export class ImageFlipper extends
       {multipleImages && !this.state.disablePrev &&
         <button
           onClick={this.go(1)}
-          autoFocus={true}
+          autoFocus={this.props.autoFocus}
           title={t("previous image")}
           className="image-flipper-left fb-button">
           <i className={"fa fa-chevron-left"} />
diff --git a/frontend/photos/images/interfaces.ts b/frontend/photos/images/interfaces.ts
index bd72c7c9d9..22751101b5 100644
--- a/frontend/photos/images/interfaces.ts
+++ b/frontend/photos/images/interfaces.ts
@@ -18,6 +18,7 @@ export interface ImageFlipperProps {
   hover?(hovered: string | undefined): void;
   target?: Record<"x" | "y", number> | undefined;
   flipActionOverride?(nextIndex: number): void;
+  autoFocus?: boolean;
 }
 
 export interface ImageFlipperState {
diff --git a/frontend/photos/images/photos.tsx b/frontend/photos/images/photos.tsx
index c4aa492c5c..efce8ba2cf 100644
--- a/frontend/photos/images/photos.tsx
+++ b/frontend/photos/images/photos.tsx
@@ -166,6 +166,7 @@ export class Photos extends React.Component<PhotosProps, PhotosComponentState> {
 
   ImageFlipper = ({ id }: { id: string }) =>
     <ImageFlipper id={id}
+      autoFocus={true}
       currentImage={this.props.currentImage}
       dispatch={this.props.dispatch}
       currentImageSize={this.props.currentImageSize}
diff --git a/frontend/plants/__tests__/crop_info_test.tsx b/frontend/plants/__tests__/crop_info_test.tsx
index 3b832b4b7a..34e5c8792a 100644
--- a/frontend/plants/__tests__/crop_info_test.tsx
+++ b/frontend/plants/__tests__/crop_info_test.tsx
@@ -11,6 +11,11 @@ jest.mock("../../farm_designer/map/actions", () => ({
   setDragIcon: jest.fn(),
 }));
 
+let mockDev = false;
+jest.mock("../../settings/dev/dev_support", () => ({
+  DevSettings: { futureFeaturesEnabled: () => mockDev }
+}));
+
 import React from "react";
 import {
   RawCropInfo as CropInfo, searchForCurrentCrop, mapStateToProps,
@@ -28,7 +33,7 @@ import { svgToUrl } from "../../open_farm/icons";
 import { fakeState } from "../../__test_support__/fake_state";
 import { Actions } from "../../constants";
 import { clickButton } from "../../__test_support__/helpers";
-import { Path } from "../../internal_urls";
+import { FilePath, Path } from "../../internal_urls";
 import {
   fakeCurve, fakePlant, fakeWebAppConfig,
 } from "../../__test_support__/fake_state/resources";
@@ -44,6 +49,7 @@ describe("<CropInfo />", () => {
     const cropSearchResult = fakeCropLiveSearchResult();
     cropSearchResult.crop.svg_icon = "fake_mint_svg";
     cropSearchResult.crop.row_spacing = 100;
+    cropSearchResult.crop.sowing_method = "";
     const designer = fakeDesignerState();
     designer.cropSearchResults = [cropSearchResult];
     return {
@@ -66,10 +72,19 @@ describe("<CropInfo />", () => {
     p.designer.cropSearchResults[0].companions = [];
     const wrapper = mount(<CropInfo {...p} />);
     expect(wrapper.text()).toContain("Mint");
-    expect(wrapper.text()).toContain("Drag and drop into map");
-    expect(wrapper.text()).toContain("Row Spacing1000mm");
-    expect(wrapper.find("img").at(1).props().src)
+    expect(wrapper.text()).toContain("Row Spacing:1000mm");
+    expect(wrapper.find("img").at(0).props().src)
       .toEqual(svgToUrl("fake_mint_svg"));
+    expect(wrapper.text().toLowerCase()).not.toContain("edit on");
+  });
+
+  it("renders openfarm link", () => {
+    mockDev = true;
+    mockPath = Path.mock(Path.cropSearch("mint"));
+    const p = fakeProps();
+    p.designer.cropSearchResults[0].companions = [];
+    const wrapper = mount(<CropInfo {...p} />);
+    expect(wrapper.text().toLowerCase()).toContain("edit on");
   });
 
   it("returns to crop search", () => {
@@ -135,6 +150,21 @@ describe("<CropInfo />", () => {
     });
   });
 
+  it("updates current image", () => {
+    mockPath = Path.mock(Path.cropSearch("mint"));
+    const images = [FilePath.DEFAULT_WEED_ICON];
+    const p = fakeProps();
+    const cropSearchResult = fakeCropLiveSearchResult();
+    cropSearchResult.images = [];
+    p.designer.cropSearchResults = [cropSearchResult];
+    const wrapper = mount<CropInfo>(<CropInfo {...p} />);
+    expect(wrapper.state().currentImage).toEqual(undefined);
+    cropSearchResult.images = images;
+    p.designer.cropSearchResults = [cropSearchResult];
+    wrapper.setProps(p);
+    expect(wrapper.state().currentImage?.body.attachment_url).toEqual(images[0]);
+  });
+
   it("doesn't change search query", () => {
     mockPath = Path.mock(Path.cropSearch("mint"));
     const p = fakeProps();
@@ -156,7 +186,7 @@ describe("<CropInfo />", () => {
     const p = fakeProps();
     p.botPosition = { x: 100, y: 200, z: undefined };
     const wrapper = mount(<CropInfo {...p} />);
-    clickButton(wrapper, 4, "location (100, 200)", { partial_match: true });
+    clickButton(wrapper, 5, "location (100, 200)", { partial_match: true });
     expect(initSave).toHaveBeenCalledWith("Point",
       expect.objectContaining({
         name: "Mint",
@@ -170,7 +200,7 @@ describe("<CropInfo />", () => {
     const p = fakeProps();
     p.botPosition = { x: 100, y: undefined, z: undefined };
     const wrapper = mount(<CropInfo {...p} />);
-    clickButton(wrapper, 4, "location (unknown)", { partial_match: true });
+    clickButton(wrapper, 5, "location (unknown)", { partial_match: true });
     expect(initSave).not.toHaveBeenCalled();
   });
 
@@ -186,10 +216,10 @@ describe("<CropInfo />", () => {
     p.designer.cropSearchResults[0].crop.svg_icon = undefined;
     p.designer.cropSearchResults[0].crop.row_spacing = undefined;
     p.designer.cropSearchResults[0].crop.common_names = [];
+    p.designer.cropSearchResults[0].images = [];
     const wrapper = mount(<CropInfo {...p} />);
-    expect(wrapper.text().toLowerCase()).toContain("iconnot available");
-    expect(wrapper.text().toLowerCase()).toContain("spacingnot available");
-    expect(wrapper.text().toLowerCase()).toContain("common namesnot available");
+    expect(wrapper.text().toLowerCase()).toContain("spacing:not available");
+    expect(wrapper.text().toLowerCase()).toContain("common names:not available");
   });
 
   it("handles string of names", () => {
@@ -197,7 +227,19 @@ describe("<CropInfo />", () => {
     p.designer.cropSearchResults[0].crop.common_names =
       "names" as unknown as string[];
     const wrapper = mount(<CropInfo {...p} />);
-    expect(wrapper.text().toLowerCase()).toContain("common namesnames");
+    expect(wrapper.text().toLowerCase()).toContain("common names:names");
+  });
+
+  it("sets current image", () => {
+    const images = ["/plant.jpg", FilePath.DEFAULT_WEED_ICON];
+    const p = fakeProps();
+    const cropSearchResult = fakeCropLiveSearchResult();
+    cropSearchResult.images = images;
+    p.designer.cropSearchResults = [cropSearchResult];
+    const wrapper = shallow<CropInfo>(<CropInfo {...p} />);
+    expect(wrapper.state().currentImage?.body.attachment_url).toEqual(images[0]);
+    wrapper.instance().setCurrentImage(1);
+    expect(wrapper.state().currentImage?.body.attachment_url).toEqual(images[1]);
   });
 
   it("navigates to companion plant", () => {
@@ -211,7 +253,7 @@ describe("<CropInfo />", () => {
     const wrapper = mount(<CropInfo {...p} />);
     jest.clearAllMocks();
     expect(wrapper.text().toLowerCase()).toContain("strawberry");
-    const companion = wrapper.find("a").at(1);
+    const companion = wrapper.find("a").at(0);
     expect(companion.text()).toEqual("Strawberry");
     companion.simulate("click");
     expect(p.openfarmCropFetch).toHaveBeenCalledWith("strawberry");
@@ -225,7 +267,7 @@ describe("<CropInfo />", () => {
     const wrapper = mount(<CropInfo {...p} />);
     jest.clearAllMocks();
     expect(wrapper.text().toLowerCase()).toContain("strawberry");
-    const companion = wrapper.find("a").at(1);
+    const companion = wrapper.find("a").at(0);
     expect(companion.text()).toEqual("Strawberry");
     companion.simulate("dragStart");
     expect(p.dispatch).toHaveBeenCalledWith({
diff --git a/frontend/plants/__tests__/openfarm_search_results_test.tsx b/frontend/plants/__tests__/openfarm_search_results_test.tsx
index 5eb5e0ca20..6775084448 100644
--- a/frontend/plants/__tests__/openfarm_search_results_test.tsx
+++ b/frontend/plants/__tests__/openfarm_search_results_test.tsx
@@ -19,15 +19,17 @@ describe("<OpenFarmResults />", () => {
           slug: "potato",
           name: "S. tuberosum",
           svg_icon: "icon",
+          main_image_path: "image",
         },
-        image: "potato.jpg"
+        images: ["potato.jpg"],
       },
       {
         crop: {
           slug: "tomato",
-          name: "Solanum lycopersicum"
+          name: "Solanum lycopersicum",
+          main_image_path: "https:image",
         },
-        image: "tomato.jpg"
+        images: ["tomato.jpg"],
       },
     ],
     cropSearchInProgress: false,
diff --git a/frontend/plants/crop_info.tsx b/frontend/plants/crop_info.tsx
index 205406e50c..53155d42d4 100644
--- a/frontend/plants/crop_info.tsx
+++ b/frontend/plants/crop_info.tsx
@@ -19,7 +19,7 @@ import { Actions } from "../constants";
 import {
   EmptyStateWrapper, EmptyStateGraphic,
 } from "../ui/empty_state_wrapper";
-import { startCase, isArray, chain, isNumber } from "lodash";
+import { startCase, isArray, chain, isNumber, isUndefined } from "lodash";
 import { t } from "../i18next_wrapper";
 import { Panel } from "../farm_designer/panel_header";
 import { ExternalUrl } from "../external_urls";
@@ -28,7 +28,7 @@ import {
   GetWebAppConfigValue, getWebAppConfigValue,
 } from "../config_storage/actions";
 import { BooleanSetting, NumericSetting } from "../session_keys";
-import { Path } from "../internal_urls";
+import { FilePath, Path } from "../internal_urls";
 import { Link } from "../link";
 import { botSize } from "../farm_designer/state_to_props";
 import { getFbosConfig } from "../resources/getters";
@@ -40,9 +40,13 @@ import {
   AllCurveInfo, changeCurve, findCurve, findMostUsedCurveForCrop,
 } from "./curve_info";
 import { CurveType } from "../curves/templates";
-import { BlurableInput, FBSelect } from "../ui";
+import { BlurableInput, FBSelect, Popover } from "../ui";
 import { PLANT_STAGE_DDI_LOOKUP, PLANT_STAGE_LIST } from "./edit_plant_status";
 import moment from "moment";
+import { ImageFlipper } from "../photos/images/image_flipper";
+import { SpecialStatus, TaggedImage } from "farmbot";
+import { Position } from "@blueprintjs/core";
+import { DevSettings } from "../settings/dev/dev_support";
 
 interface InfoFieldProps {
   title: string;
@@ -56,11 +60,32 @@ interface SummaryItemProps {
   value: string;
 }
 
+const EMOJI: { [field: string]: string } = {
+  binomial_name: "🏷",
+  common_names: "🪪",
+  sun_requirements: "🌞",
+  sowing_method: "🌱",
+  spread: "🟢",
+  row_spacing: "📏",
+  height: "🌿",
+  growing_degree_days: "🗓",
+  companions: "🌈",
+};
+
+const shortenTitle = (title: string) => {
+  switch (title) {
+    case "sun_requirements": return "sun";
+    case "sowing_method": return "sowing";
+    default: return title;
+  }
+};
+
 /** Basic field: value display for OpenFarm crop properties. */
 const InfoField = (props: InfoFieldProps) =>
   <li>
+    <span>{EMOJI[props.title]}</span>
     <p>
-      {t(startCase(props.title))}
+      {t(startCase(shortenTitle(props.title)))}:
     </p>
     <div className={"crop-info-field-data"}>
       {props.children}
@@ -68,33 +93,19 @@ const InfoField = (props: InfoFieldProps) =>
   </li>;
 
 const OMITTED_PROPERTIES = [
+  "name",
   "slug",
   "processing_pictures",
   "description",
   "main_image_path",
   "tags_array",
   "guides_count",
+  "svg_icon",
+  "taxon",
 ];
 
 const NO_VALUE = t("Not available");
 
-/**
-* If there's a value, give it an img element to render the
-* actual graphic. If no value, return NO_VALUE.
-*/
-const SvgIcon = ({ i, field, value }: SummaryItemProps) =>
-  <InfoField key={i} title={field}>
-    {value
-      ? <div className={"svg-img"}>
-        <img
-          src={svgToUrl(value)}
-          width={100}
-          height={100}
-          onDragStart={setDragIcon(value)} />
-      </div>
-      : <span>{NO_VALUE}</span>}
-  </InfoField>;
-
 /**
  * Need to convert the `cm` provided by OpenFarm to `mm`
  * to match the Farm Designer units.
@@ -124,8 +135,6 @@ const DefaultPropertyDisplay = ({ i, field, value }: SummaryItemProps) =>
 const handleDisplay = ([field, value]: string[], i: number) => {
   const commonProps: SummaryItemProps = { key: field, i, field, value };
   switch (field) {
-    case "svg_icon":
-      return <SvgIcon {...commonProps} />;
     case "spread":
     case "row_spacing":
     case "height":
@@ -162,7 +171,7 @@ const CropInfoList = (props: CropInfoListProps) => {
 const Companions = (props: CropInfoListProps) => {
   const { result, dispatch, openfarmCropFetch } = props;
   if (result.companions.length == 0) { return <div />; }
-  return <InfoField title={t("Companions")}>
+  return <InfoField title={"companions"}>
     {result.companions.map((companion, index) =>
       <Link key={companion.slug}
         className={"companion"}
@@ -186,8 +195,8 @@ const Companions = (props: CropInfoListProps) => {
         to={Path.cropSearch(companion.slug)}>
         <img
           src={svgToUrl(companion.svg_icon)}
-          width={32}
-          height={32} />
+          width={20}
+          height={20} />
         <p>{companion.name}</p>
       </Link>)}
   </InfoField>;
@@ -230,14 +239,11 @@ const AddPlantHereButton = (props: AddPlantHereButtonProps) => {
 
 /** Image of crop to drag into map. */
 const CropDragInfoTile =
-  ({ image, svgIcon }: { image: string, svgIcon: string | undefined }) =>
+  ({ svgIcon }: { svgIcon: string | undefined }) =>
     <div className="crop-drag-info-tile">
       <img className="crop-drag-info-image"
-        src={image}
+        src={svgIcon}
         onDragStart={setDragIcon(svgIcon)} />
-      <div className="crop-info-overlay">
-        {t("Drag and drop into map")}
-      </div>
     </div>;
 
 /** Text and link for crop editing. */
@@ -259,7 +265,7 @@ export const getCropHeaderProps = (props: {
   const result = findBySlug(props.cropSearchResults, crop);
   const basePath = Path.cropSearch();
   const backgroundURL = `linear-gradient(
-    rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(${result.image})`;
+    rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(${result.images[0]})`;
   return { crop, result, basePath, backgroundURL };
 };
 
@@ -289,12 +295,36 @@ export const searchForCurrentCrop = (openfarmCropFetch: OpenfarmSearch) =>
 
 interface CropInfoState {
   crop: string;
+  currentImage: TaggedImage | undefined;
 }
 
+const toTaggedImage = (url: string): TaggedImage => ({
+  kind: "Image",
+  uuid: url,
+  specialStatus: SpecialStatus.SAVED,
+  body: {
+    created_at: "",
+    updated_at: "",
+    device_id: 0,
+    attachment_processed_at: "1",
+    attachment_url: url,
+    meta: {
+      x: undefined,
+      y: undefined,
+      z: undefined,
+    }
+  },
+});
+
 export class RawCropInfo extends React.Component<CropInfoProps, CropInfoState> {
-  state: CropInfoState = { crop: Path.getSlug(Path.cropSearch()) };
+  state: CropInfoState = {
+    crop: Path.getSlug(Path.cropSearch()),
+    currentImage: undefined,
+  };
 
   componentDidMount() {
+    this.clearCropSearchResults("")();
+    this.setState({ currentImage: undefined });
     this.props.dispatch(searchForCurrentCrop(this.props.openfarmCropFetch));
     this.selectMostUsedCurves(Path.getSlug(Path.cropSearch()));
   }
@@ -304,6 +334,11 @@ export class RawCropInfo extends React.Component<CropInfoProps, CropInfoState> {
     if (crop != this.state.crop) {
       this.selectMostUsedCurves(crop);
       this.setState({ crop });
+      this.clearCropSearchResults(crop)();
+      this.setState({ currentImage: undefined });
+    }
+    if (isUndefined(this.state.currentImage) && this.imageData.length > 0) {
+      this.setCurrentImage(0);
     }
   }
 
@@ -328,6 +363,18 @@ export class RawCropInfo extends React.Component<CropInfoProps, CropInfoState> {
     dispatch({ type: Actions.OF_SEARCH_RESULTS_OK, payload: [] });
   };
 
+  get images() {
+    const crop = getCropHeaderProps({
+      cropSearchResults: this.props.designer.cropSearchResults,
+    });
+    return crop.result.images
+      .filter(image => !image.includes(FilePath.DEFAULT_ICON));
+  }
+  get imageData() { return this.images.map(toTaggedImage); }
+
+  setCurrentImage = (index: number) =>
+    this.setState({ currentImage: this.imageData[index] });
+
   render() {
     const { dispatch, designer } = this.props;
     const { cropSearchResults, cropSearchInProgress } = designer;
@@ -343,18 +390,35 @@ export class RawCropInfo extends React.Component<CropInfoProps, CropInfoState> {
         onBack={this.clearCropSearchResults(crop)}
         style={{ background: backgroundURL }}
         description={result.crop.description}>
+        <CropDragInfoTile
+          svgIcon={svgToUrl(result.crop.svg_icon)} />
+        <Popover portalClassName={"dark-portal"}
+          position={Position.BOTTOM_RIGHT}
+          target={<button className={"transparent-button"}>
+            + {t("grid")}
+          </button>}
+          content={<div className={"grid-popup-content"}>
+            <PlantGrid
+              xy_swap={this.props.xySwap}
+              dispatch={dispatch}
+              openfarm_slug={result.crop.slug}
+              spread={result.crop.spread}
+              botPosition={this.props.botPosition}
+              designer={designer}
+              itemName={result.crop.name} />
+          </div>} />
       </DesignerPanelHeader>
       <DesignerPanelContent panelName={panelName}>
         <EmptyStateWrapper
           notEmpty={!cropSearchInProgress}
           graphic={EmptyStateGraphic.no_crop_results}
           title={t("Loading...")}>
-          <CropDragInfoTile image={result.image} svgIcon={result.crop.svg_icon} />
-          <EditOnOpenFarm slug={result.crop.slug} />
           <CropInfoList result={result}
             dispatch={dispatch}
             selectMostUsedCurves={this.selectMostUsedCurves}
             openfarmCropFetch={this.props.openfarmCropFetch} />
+          {DevSettings.futureFeaturesEnabled() &&
+            <EditOnOpenFarm slug={result.crop.slug} />}
           <div className={"plant-stage-selection"}>
             <label className="stage">{t("status")}</label>
             <FBSelect
@@ -396,14 +460,21 @@ export class RawCropInfo extends React.Component<CropInfoProps, CropInfoState> {
             getConfigValue={this.props.getConfigValue}
             designer={designer}
             dispatch={dispatch} />
-          <PlantGrid
-            xy_swap={this.props.xySwap}
-            dispatch={dispatch}
-            openfarm_slug={result.crop.slug}
-            spread={result.crop.spread}
-            botPosition={this.props.botPosition}
-            designer={designer}
-            itemName={result.crop.name} />
+          {this.images.length > 0 &&
+            <label style={{ display: "block" }}>
+              {t("Images")} ({this.images.length})
+            </label>}
+          {this.images.length > 0 &&
+            <ImageFlipper id={"image-items-flipper"}
+              currentImage={this.state.currentImage}
+              dispatch={this.props.dispatch}
+              flipActionOverride={this.setCurrentImage}
+              currentImageSize={{ width: undefined, height: undefined }}
+              transformImage={false}
+              getConfigValue={this.props.getConfigValue}
+              env={{}}
+              crop={false}
+              images={this.imageData} />}
         </EmptyStateWrapper>
       </DesignerPanelContent>
     </DesignerPanel>;
diff --git a/frontend/plants/grid/__tests__/grid_input_test.tsx b/frontend/plants/grid/__tests__/grid_input_test.tsx
index a8a747e8d3..870dabb68d 100644
--- a/frontend/plants/grid/__tests__/grid_input_test.tsx
+++ b/frontend/plants/grid/__tests__/grid_input_test.tsx
@@ -26,7 +26,7 @@ describe("<GridInput/>", () => {
 
   it("renders", () => {
     const wrapper = mount(<GridInput {...fakeProps()} />);
-    ["Starting X", "starting Y", "# of plants", "Spacing (MM)"]
+    ["XYStart", "# of plants", "Spacing (MM)"]
       .map(string => expect(wrapper.text()).toContain(string));
   });
 
diff --git a/frontend/plants/grid/grid_input.tsx b/frontend/plants/grid/grid_input.tsx
index 1883d3fdb1..adb2cc118a 100644
--- a/frontend/plants/grid/grid_input.tsx
+++ b/frontend/plants/grid/grid_input.tsx
@@ -1,55 +1,32 @@
 import React from "react";
 import {
-  PlantGridKey, GridInputProps, InputCellProps, PlantGridLabelData,
+  PlantGridKey, GridInputProps, InputCellProps,
 } from "./interfaces";
 import { Col, Row } from "../../ui";
 import { t } from "../../i18next_wrapper";
 import { UseCurrentLocation } from "../../tools/tool_slot_edit_components";
 
-export const LABELS = (
+export const getLabel = (
+  gridKey: PlantGridKey,
   itemType: "points" | "plants",
-): Record<PlantGridKey, PlantGridLabelData> => ({
-  startX: {
-    label: t("Starting X"),
-    regular_icon: "fa-arrow-right",
-    swapped_icon: "fa-arrow-down",
-  },
-  startY: {
-    label: t("starting Y"),
-    regular_icon: "fa-arrow-down",
-    swapped_icon: "fa-arrow-right",
-  },
-  spacingH: {
-    label: t("Spacing (MM)"),
-    regular_icon: "fa-arrows-h",
-    swapped_icon: "fa-arrows-v",
-  },
-  spacingV: {
-    label: t("Spacing (MM)"),
-    regular_icon: "fa-arrows-v",
-    swapped_icon: "fa-arrows-h",
-  },
-  numPlantsH: {
-    label: itemType == "points" ? t("# of points") : t("# of plants"),
-    regular_icon: "fa-arrows-h",
-    swapped_icon: "fa-arrows-v",
-  },
-  numPlantsV: {
-    label: itemType == "points" ? t("# of points") : t("# of plants"),
-    regular_icon: "fa-arrows-v",
-    swapped_icon: "fa-arrows-h",
-  },
-});
+): string => {
+  switch (gridKey) {
+    case "startX":
+    case "startY":
+      return t("Start");
+    case "spacingH":
+    case "spacingV":
+      return t("Spacing (MM)");
+    case "numPlantsH":
+    case "numPlantsV":
+      return itemType == "points" ? t("# of points") : t("# of plants");
+  }
+};
 
 export function InputCell(props: InputCellProps) {
-  const { gridKey, onChange, grid, xy_swap, preview } = props;
-  const { label, regular_icon, swapped_icon } = LABELS(props.itemType)[gridKey];
+  const { gridKey, onChange, grid, preview } = props;
   const [value, setValue] = React.useState("" + grid[gridKey]);
-  return <Col xs={5}>
-    <label>
-      <i className={`fa ${xy_swap ? swapped_icon : regular_icon}`} />
-      {t(label)}
-    </label>
+  return <Col xs={3}>
     <input name={gridKey} className={gridKey}
       type={"number"}
       value={value}
@@ -71,9 +48,28 @@ const pairs: [PlantGridKey, PlantGridKey][] = [
 ];
 
 export function GridInput(props: GridInputProps) {
+  const { xy_swap } = props;
+  const vertical = "fa-arrows-v";
+  const horizontal = "fa-arrows-h";
   return <div className="grid-input">
+    <Row>
+      <Col xsOffset={6} xs={3} className={"grid-axis-label"}>
+        X
+        <i className={`fa ${xy_swap ? vertical : horizontal}`} />
+      </Col>
+      <Col xs={3} className={"grid-axis-label"}>
+        Y
+        <i className={`fa ${xy_swap ? horizontal : vertical}`} />
+      </Col>
+    </Row>
     {pairs.map(([left, right]) =>
       <Row key={left + right}>
+        <Col xs={6}>
+          <label>{getLabel(left, props.itemType)}</label>
+          {left == "startX" &&
+            <UseCurrentLocation botPosition={props.botPosition}
+              onChange={props.onUseCurrentPosition} />}
+        </Col>
         <InputCell
           itemType={props.itemType}
           xy_swap={props.xy_swap}
@@ -88,9 +84,6 @@ export function GridInput(props: GridInputProps) {
           onChange={props.onChange}
           preview={props.preview}
           grid={props.grid} />
-        {left == "startX" &&
-          <UseCurrentLocation botPosition={props.botPosition}
-            onChange={props.onUseCurrentPosition} />}
       </Row>)}
   </div>;
 }
diff --git a/frontend/plants/grid/interfaces.ts b/frontend/plants/grid/interfaces.ts
index f51daa2613..8123289756 100644
--- a/frontend/plants/grid/interfaces.ts
+++ b/frontend/plants/grid/interfaces.ts
@@ -64,11 +64,3 @@ export interface InputCellProps extends GridInputPropsBase {
   gridKey: PlantGridKey;
   itemType: "points" | "plants";
 }
-
-export interface PlantGridLabelData {
-  /** A `font-awesome` icon next to the input box label.  */
-  regular_icon: string;
-  /** What icon should we use if the user has `xy_swap` enabled? */
-  swapped_icon: string;
-  label: string;
-}
diff --git a/frontend/plants/grid/plant_grid.tsx b/frontend/plants/grid/plant_grid.tsx
index 5fe196a5e0..0eb7691656 100644
--- a/frontend/plants/grid/plant_grid.tsx
+++ b/frontend/plants/grid/plant_grid.tsx
@@ -159,10 +159,7 @@ export class PlantGrid extends React.Component<PlantGridProps, PlantGridState> {
 
   render() {
     return <div className={"grid-and-row-planting"}>
-      <hr />
-      <h3>
-        {this.props.openfarm_slug ? t("Grid and Row Planting") : t("Grid")}
-      </h3>
+      <h3>{t("Add Grid or Row")}</h3>
       <GridInput
         key={JSON.stringify(this.state.grid)}
         itemType={this.props.openfarm_slug ? "plants" : "points"}
diff --git a/frontend/plants/openfarm_search_results.tsx b/frontend/plants/openfarm_search_results.tsx
index fe9cc1e1bd..720fdebddc 100644
--- a/frontend/plants/openfarm_search_results.tsx
+++ b/frontend/plants/openfarm_search_results.tsx
@@ -6,7 +6,7 @@ import {
 import { Actions, Content } from "../constants";
 import { t } from "../i18next_wrapper";
 import { ExternalUrl } from "../external_urls";
-import { Path } from "../internal_urls";
+import { FilePath, Path } from "../internal_urls";
 import { edit, save } from "../api/crud";
 import { TaggedPlantPointer } from "farmbot";
 import { setHoveredPlant } from "../farm_designer/map/actions";
@@ -18,8 +18,9 @@ interface Result {
     slug: string;
     name: string;
     svg_icon?: string | undefined;
+    main_image_path: string;
   };
-  image: string;
+  images: string[];
 }
 
 export interface SearchResultProps {
@@ -87,7 +88,10 @@ export class OpenFarmResults extends React.Component<SearchResultProps, {}> {
       colorScheme={"plants"}>
       <div className={"openfarm-search-results-wrapper"}>
         {cropSearchResults.map(resp => {
-          const { crop, image } = resp;
+          const { crop } = resp;
+          const image = crop.main_image_path.startsWith("https")
+            ? crop.main_image_path
+            : FilePath.DEFAULT_ICON;
           return <Link
             key={crop.slug}
             draggable={false}
diff --git a/frontend/points/create_points.tsx b/frontend/points/create_points.tsx
index 94f16fa1e4..0bff030148 100644
--- a/frontend/points/create_points.tsx
+++ b/frontend/points/create_points.tsx
@@ -309,7 +309,7 @@ export class RawCreatePoints
 
   PointActions = () =>
     <Row>
-      <button className="fb-button green"
+      <button className="fb-button green save"
         title={t("save")}
         onClick={this.createPoint}>
         {t("Save")}
@@ -363,6 +363,7 @@ export class RawCreatePoints
       <DesignerPanelContent panelName={"point-creation"}>
         <this.PointProperties />
         <this.PointActions />
+        {panelType == Panel.Points && <hr />}
         {panelType == Panel.Points &&
           <PlantGrid
             xy_swap={this.props.xySwap}
diff --git a/public/404.html b/public/404.html
index b91d15ee79..bd11a3c627 100755
--- a/public/404.html
+++ b/public/404.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta content="width=device-width, initial-scale=1" name="viewport">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Cabin:300,400,500" rel="stylesheet">
     <style>
         body {
             min-width: 100vw;
@@ -22,7 +22,7 @@
         h1,
         h4,
         a {
-            font-family: "Roboto", sans-serif;
+            font-family: "Cabin", sans-serif;
             text-align: center;
             color: #fff;
         }
diff --git a/public/500.html b/public/500.html
index 1f3cdbdda9..565c4a4d23 100755
--- a/public/500.html
+++ b/public/500.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta content="width=device-width, initial-scale=1" name="viewport">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Cabin:300,400,500" rel="stylesheet">
     <style>
         body {
             min-width: 100vw;
@@ -22,7 +22,7 @@
         h1,
         h4,
         a {
-            font-family: "Roboto", sans-serif;
+            font-family: "Cabin", sans-serif;
             text-align: center;
             color: #fff;
         }
diff --git a/public/app-resources/languages/_helper.js b/public/app-resources/languages/_helper.js
index d98cfad856..37c7edbac8 100644
--- a/public/app-resources/languages/_helper.js
+++ b/public/app-resources/languages/_helper.js
@@ -16,7 +16,7 @@
  *
  *
  * */
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ATTENTION = void 0;
 exports.ATTENTION = "Run `_helper.js`, not `_helper.ts`.";
 var path_1 = require("path");
@@ -76,7 +76,7 @@ var EXTRA_TAGS = [
     "For IT Security Professionals", "visualize", "{{ axis }}-axis profile",
     "Using another device, search for and connect to the `farmbot-xxxx` WiFi network",
     "GROUP MEMBERS ({{count}})", "FarmBot's current position", "# of plants",
-    "Binomial Name", "Common Names", "Sun Requirements", "Sowing Method",
+    "Binomial Name", "Common Names", "Sun", "Sowing", "Companions",
 ];
 /** For debugging. Replace all characters except whitespace and {{ words }}. */
 function repl(string, character) {
@@ -330,7 +330,7 @@ var Helper;
             var jsonContent = {
                 translated: translated_1,
                 untranslated: untranslated_1,
-                other_translations: other_translations_1
+                other_translations: other_translations_1,
             };
             var stringJson = JSON.stringify(jsonContent, undefined, 2) + "\n";
             if (!metricsOnly) {
diff --git a/public/app-resources/languages/_helper.ts b/public/app-resources/languages/_helper.ts
index f8251fd72b..2d8b88b44a 100644
--- a/public/app-resources/languages/_helper.ts
+++ b/public/app-resources/languages/_helper.ts
@@ -112,7 +112,7 @@ const EXTRA_TAGS = [
   "For IT Security Professionals", "visualize", "{{ axis }}-axis profile",
   "Using another device, search for and connect to the `farmbot-xxxx` WiFi network",
   "GROUP MEMBERS ({{count}})", "FarmBot's current position", "# of plants",
-  "Binomial Name", "Common Names", "Sun Requirements", "Sowing Method",
+  "Binomial Name", "Common Names", "Sun", "Sowing", "Companions",
 ];
 
 /** For debugging. Replace all characters except whitespace and {{ words }}. */
diff --git a/public/app-resources/languages/translation_metrics.md b/public/app-resources/languages/translation_metrics.md
index 1a41944efe..0617a34231 100644
--- a/public/app-resources/languages/translation_metrics.md
+++ b/public/app-resources/languages/translation_metrics.md
@@ -21,21 +21,21 @@ For example, `sudo docker compose run web npm run translation-check`._
 
 See the [README](https://github.com/FarmBot/Farmbot-Web-App#translating-the-web-app) for contribution instructions.
 
-Total number of phrases identified by the language helper for translation: __2361__
+Total number of phrases identified by the language helper for translation: __2369__
 
 |Language|Percent translated|Translated|Untranslated|Other Translations|
 |:---:|---:|---:|---:|---:|
-|da|4%|86|2275|26|
-|de|80%|1889|472|558|
-|es|59%|1388|973|522|
-|fr|40%|947|1414|438|
-|it|99%|2346|15|113|
-|ko|100%|2350|11|0|
-|nl|3%|64|2297|74|
-|pt|2%|56|2305|97|
-|ru|19%|449|1912|348|
-|th|0%|0|2361|0|
-|zh|3%|71|2290|80|
+|da|4%|84|2285|28|
+|de|78%|1854|515|593|
+|es|57%|1362|1007|547|
+|fr|39%|927|1442|456|
+|it|97%|2309|60|150|
+|ko|98%|2312|57|38|
+|nl|3%|62|2307|76|
+|pt|2%|55|2314|98|
+|ru|19%|441|1928|356|
+|th|0%|0|2369|0|
+|zh|3%|69|2300|82|
 
 **Percent translated** refers to the percent of phrases identified by the
 language helper that have been translated. Additional phrases not identified

From c52f9757c88ad95d7af299307b94abd2b3db1671 Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Wed, 18 Oct 2023 13:38:26 -0700
Subject: [PATCH 4/9] update sequences page UI

---
 frontend/css/buttons.scss                     |   7 +-
 .../farm_designer/farm_designer_panels.scss   |  14 +-
 frontend/css/global.scss                      |   4 +-
 frontend/css/sequences.scss                   | 162 ++++++++++++++++--
 frontend/curves/curves_inventory.tsx          |   3 +-
 .../__tests__/panel_header_test.tsx           |   6 -
 frontend/farm_designer/panel_header.tsx       |   2 +-
 frontend/farm_events/farm_events.tsx          |   3 +-
 frontend/farmware/panel/list.tsx              |   3 +-
 frontend/folders/__tests__/actions_test.ts    |  12 +-
 frontend/folders/actions.ts                   |   2 +-
 frontend/folders/component.tsx                |   4 +-
 frontend/logs/index.tsx                       |   2 +-
 frontend/plants/crop_catalog.tsx              |   2 +-
 frontend/plants/plant_inventory.tsx           |   3 +-
 frontend/point_groups/group_list_panel.tsx    |   3 +-
 frontend/points/point_inventory.tsx           |   3 +-
 .../list/__tests__/add_regimen_test.ts        |   2 +-
 frontend/regimens/list/add_regimen.ts         |   2 +-
 frontend/regimens/list/list.tsx               |   3 +-
 frontend/saved_gardens/saved_gardens.tsx      |   3 +-
 .../sequences/__tests__/sequences_test.tsx    |  37 +++-
 .../sequences/panel/__tests__/list_test.tsx   |  28 ++-
 frontend/sequences/panel/editor.tsx           |   2 +-
 frontend/sequences/panel/list.tsx             |  23 ++-
 .../sequence_editor_middle_active.tsx         |  40 +++--
 frontend/sequences/sequences.tsx              |  89 +++++-----
 frontend/sequences/step_button_cluster.tsx    |   8 +-
 frontend/settings/index.tsx                   |   2 +-
 frontend/tools/index.tsx                      |   3 +-
 frontend/ui/__tests__/center_panel_test.tsx   |  15 --
 frontend/ui/__tests__/left_panel_test.tsx     |  15 --
 frontend/ui/__tests__/right_panel_test.tsx    |  17 --
 frontend/ui/__tests__/search_field_test.tsx   |   1 +
 frontend/ui/center_panel.tsx                  |  30 ----
 frontend/ui/index.ts                          |   3 -
 frontend/ui/left_panel.tsx                    |  23 ---
 frontend/ui/right_panel.tsx                   |  31 ----
 frontend/ui/search_field.tsx                  |   3 +-
 frontend/weeds/weeds_inventory.tsx            |   3 +-
 frontend/zones/zones_inventory.tsx            |   3 +-
 41 files changed, 369 insertions(+), 252 deletions(-)
 delete mode 100644 frontend/ui/__tests__/center_panel_test.tsx
 delete mode 100644 frontend/ui/__tests__/left_panel_test.tsx
 delete mode 100644 frontend/ui/__tests__/right_panel_test.tsx
 delete mode 100644 frontend/ui/center_panel.tsx
 delete mode 100644 frontend/ui/left_panel.tsx
 delete mode 100644 frontend/ui/right_panel.tsx

diff --git a/frontend/css/buttons.scss b/frontend/css/buttons.scss
index b3a41cb8d4..469751a0a1 100644
--- a/frontend/css/buttons.scss
+++ b/frontend/css/buttons.scss
@@ -315,17 +315,20 @@
   .step-block {
     display: flex;
     padding: 0;
+    box-shadow: none;
     .step-block-drag {
       margin: auto;
       width: 100%;
       padding: 0.2rem 0.8rem;
       label {
+        display: -webkit-box;
         margin: 0;
         width: 90%;
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
-        vertical-align: bottom;
+        word-wrap: break-word;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
       }
     }
   }
diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss
index 095dd2ac09..121a1492a9 100644
--- a/frontend/css/farm_designer/farm_designer_panels.scss
+++ b/frontend/css/farm_designer/farm_designer_panels.scss
@@ -3146,7 +3146,7 @@ li {
 
 .designer-sequence-list-panel {
   .panel-content {
-    max-height: calc(100vh - 15rem);
+    height: calc(100vh - 14rem);
     @media screen and (max-width: 450px) {
       max-height: calc(100vh - 19rem);
     }
@@ -3169,6 +3169,15 @@ li {
       margin-right: -1rem;
     }
   }
+  .fullscreen {
+    white-space: nowrap;
+    height: 3rem;
+    margin-top: 0.75rem;
+    margin-right: 1rem;
+    i {
+      margin-left: 1rem;
+    }
+  }
 }
 
 .group-detail-panel,
@@ -3205,6 +3214,9 @@ li {
   }
   .panel-content {
     .sequence-editor-content {
+      hr {
+        margin-top: 1rem;
+      }
       @media screen and (max-width: 767px) {
         margin-left: 5px;
         padding-right: 0;
diff --git a/frontend/css/global.scss b/frontend/css/global.scss
index 3e7d355322..b8a9548008 100644
--- a/frontend/css/global.scss
+++ b/frontend/css/global.scss
@@ -1040,7 +1040,7 @@ ul {
 
 .button-group {
   display: inline-block;
-  margin: 1rem 0 -1rem;
+  margin: 1.5rem 0 -1rem;
   width: 100%;
   button:not(:first-of-type) {
     margin-right: 1rem;
@@ -2311,6 +2311,8 @@ ul {
 }
 
 .custom-coordinate-form {
+  margin-left: -3rem;
+  margin-right: -1rem;
   .x,
   .y,
   .z {
diff --git a/frontend/css/sequences.scss b/frontend/css/sequences.scss
index 56f7eb2279..a9fa426617 100644
--- a/frontend/css/sequences.scss
+++ b/frontend/css/sequences.scss
@@ -1,6 +1,13 @@
+.sequence-page {
+  max-width: unset;
+  padding: 8.6rem 0rem 0;
+  background: $dark_gray;
+}
+
 .sequence-editor-panel {
-  margin: -3rem -1.5rem -3rem;
-  height: calc(100vh - 5rem);
+  margin-left: -3.5rem;
+  margin-top: 0.4rem;
+  height: calc(100vh - 8.95rem);
   background: $light_gray;
   @media screen and (max-width: 767px) {
     display: none;
@@ -12,7 +19,22 @@
       }
     }
   }
-  padding: 3rem 1.5rem 8rem;
+  padding: 0 2rem;
+  h3 {
+    margin-top: 1rem;
+  }
+  .bp5-popover-wrapper {
+    display: inline;
+    margin-left: 1rem;
+  }
+  .sequence-editor-tools {
+    .row {
+      flex: 1;
+    }
+    .button-group {
+      width: unset;
+    }
+  }
   overflow: hidden;
   .bp5-popover-target .saucer {
     float: left;
@@ -427,6 +449,7 @@
     }
     label {
       margin: 0;
+      font-size: 1.3rem;
     }
   }
   .show-on-hover {
@@ -576,6 +599,86 @@
   }
 }
 
+.sequence-editor-tools {
+  display: flex;
+  margin-left: -1rem;
+  margin-right: -1rem !important;
+  padding-right: 2rem;
+  .row {
+    margin-left: 0;
+  }
+  .title,
+  input {
+    flex: 1;
+  }
+  input {
+    margin: 0.75rem;
+    margin-left: 2.75rem;
+  }
+  .title {
+    padding: 1.25rem;
+    font-size: 1.6rem;
+    font-weight: bold;
+    margin-left: 1.5rem;
+  }
+  &.page {
+    i {
+      color: $white;
+    }
+    .publish-button {
+      span {
+        margin: 0;
+      }
+    }
+    .color-picker {
+      span,
+      i {
+        margin: 0;
+      }
+    }
+    .run-btn {
+      .pseudo-disabled {
+        background: $placeholder_gray !important;
+      }
+    }
+    &.blue,
+    &.yellow,
+    &.orange,
+    &.purple,
+    &.pink,
+    &.gray {
+      i,
+      .title {
+        color: $dark_gray;
+      }
+    }
+    &.blue {
+      background: $blue;
+    }
+    &.green {
+      background: $green;
+    }
+    &.yellow {
+      background: $yellow;
+    }
+    &.orange {
+      background: $orange;
+    }
+    &.purple {
+      background: $purple;
+    }
+    &.pink {
+      background: $pink;
+    }
+    &.gray {
+      background: $gray;
+    }
+    &.red {
+      background: $red;
+    }
+  }
+}
+
 .sequence-editor-tools,
 .regimen-editor-tools {
   margin-right: 15px;
@@ -699,11 +802,17 @@
   margin-right: -15px;
   overflow-y: auto;
   overflow-x: hidden;
-  max-height: calc(100vh - 16rem);
+  max-height: calc(100vh - 8rem);
   .text-input-wrapper {
     input {
       padding-left: 0.5rem !important;
     }
+    .fa-times {
+      color: $red !important;
+      &:hover {
+        color: $medium_dark_red !important;
+      }
+    }
   }
   .step-button {
     label {
@@ -774,6 +883,39 @@
     margin-left: 15px;
     margin-right: 15px;
   }
+  .row {
+    margin-left: -2.5rem;
+    margin-right: 3rem;
+  }
+  h3 {
+    margin-top: 1rem;
+    margin-left: -1rem;
+    color: $white;
+  }
+  .bp5-popover-wrapper {
+    display: inline;
+    margin-left: 1rem;
+    i {
+      color: $white;
+    }
+  }
+  .text-input-wrapper {
+    border-bottom-color: $white !important;
+    &:before,
+    &:after {
+      background: $white !important;
+    }
+    input {
+      color: $white;
+    }
+  }
+  .thin-search-wrapper {
+    position: sticky;
+    top: 0;
+    z-index: 9;
+    padding: 0.5rem;
+    background: $dark_gray;
+  }
 }
 
 .step-button-cluster {
@@ -1083,6 +1225,9 @@
   .matched {
     background: transparentize($yellow, 0.5);
   }
+  .non-empty-state {
+    width: 100%;
+  }
 }
 
 .sequence-list-item {
@@ -1175,11 +1320,6 @@
       margin-top: 25%;
     }
   }
-  .non-empty-state {
-    max-height: calc(100vh - 19rem);
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
   @media screen and (max-width: 767px) {
     &.open {
       display: none;
@@ -1192,10 +1332,6 @@
   }
   .panel-top {
     margin: 0;
-    .text-input-wrapper {
-      margin: 0.1rem;
-      margin-right: 1rem;
-    }
   }
 }
 
diff --git a/frontend/curves/curves_inventory.tsx b/frontend/curves/curves_inventory.tsx
index d95449b568..467d80dbc5 100644
--- a/frontend/curves/curves_inventory.tsx
+++ b/frontend/curves/curves_inventory.tsx
@@ -93,7 +93,8 @@ export class RawCurves extends React.Component<CurvesProps, CurvesState> {
     return <DesignerPanel panelName={"curves-inventory"} panel={Panel.Curves}>
       <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Curves}>
-        <SearchField searchTerm={this.state.searchTerm}
+        <SearchField nameKey={"curves"}
+          searchTerm={this.state.searchTerm}
           placeholder={t("Search your curves...")}
           onChange={searchTerm => this.setState({ searchTerm })} />
       </DesignerPanelTop>
diff --git a/frontend/farm_designer/__tests__/panel_header_test.tsx b/frontend/farm_designer/__tests__/panel_header_test.tsx
index 7deeed0b64..79355df984 100644
--- a/frontend/farm_designer/__tests__/panel_header_test.tsx
+++ b/frontend/farm_designer/__tests__/panel_header_test.tsx
@@ -49,12 +49,6 @@ describe("<DesignerNavTabs />", () => {
     expectActive(wrapper, slug);
   });
 
-  it("shows inactive icons for sequences page", () => {
-    mockPath = Path.mock(Path.sequencePage());
-    const wrapper = mount(<DesignerNavTabs />);
-    expect(wrapper.find(".active").length).toEqual(0);
-  });
-
   it("shows inactive icons for logs page", () => {
     mockPath = Path.mock(Path.logs());
     const wrapper = mount(<DesignerNavTabs />);
diff --git a/frontend/farm_designer/panel_header.tsx b/frontend/farm_designer/panel_header.tsx
index 2706774c1a..6ba6dea40e 100644
--- a/frontend/farm_designer/panel_header.tsx
+++ b/frontend/farm_designer/panel_header.tsx
@@ -170,7 +170,7 @@ export const getCurrentPanel = (): Tabs | undefined => {
   if (getPathArray().join("/") === Path.withApp(Path.designer())) {
     return Panel.Map;
   } else if (Path.getSlug(Path.app()) == "sequences") {
-    return undefined;
+    return Panel.Sequences;
   } else if (Path.getSlug(Path.app()) == "logs") {
     return undefined;
   } else if (Path.getSlug(Path.savedGardens()) == "templates") {
diff --git a/frontend/farm_events/farm_events.tsx b/frontend/farm_events/farm_events.tsx
index b329f5aac8..027eafa843 100644
--- a/frontend/farm_events/farm_events.tsx
+++ b/frontend/farm_events/farm_events.tsx
@@ -132,7 +132,8 @@ export class RawFarmEvents
         panel={Panel.FarmEvents}
         linkTo={Path.farmEvents("add")}
         title={t("Add event")}>
-        <SearchField searchTerm={this.state.searchTerm}
+        <SearchField nameKey={"events"}
+          searchTerm={this.state.searchTerm}
           customLeftIcon={
             <i className="fa fa-calendar" onClick={this.resetCalendar} />}
           placeholder={t("Search your events...")}
diff --git a/frontend/farmware/panel/list.tsx b/frontend/farmware/panel/list.tsx
index f1b7185f4d..fd63576ec9 100644
--- a/frontend/farmware/panel/list.tsx
+++ b/frontend/farmware/panel/list.tsx
@@ -55,7 +55,8 @@ export class RawDesignerFarmwareList
         panel={Panel.Farmware}
         linkTo={Path.farmware("add")}
         title={t("Install Farmware")}>
-        <SearchField searchTerm={this.state.searchTerm}
+        <SearchField nameKey={"farmware"}
+          searchTerm={this.state.searchTerm}
           placeholder={t("Search your Farmware...")}
           onChange={searchTerm => this.setState({ searchTerm })} />
       </DesignerPanelTop>
diff --git a/frontend/folders/__tests__/actions_test.ts b/frontend/folders/__tests__/actions_test.ts
index 8bd198365c..56eeae7013 100644
--- a/frontend/folders/__tests__/actions_test.ts
+++ b/frontend/folders/__tests__/actions_test.ts
@@ -96,33 +96,33 @@ describe("addNewSequenceToFolder", () => {
     addNewSequenceToFolder();
     expect(setActiveSequenceByName).toHaveBeenCalled();
     expect(init).toHaveBeenCalledWith("Sequence", expect.objectContaining({
-      name: "new sequence 1",
+      name: "New Sequence 1",
       color: "gray",
       folder_id: undefined,
     }));
-    expect(push).toHaveBeenCalledWith(Path.sequences("new_sequence_1"));
+    expect(push).toHaveBeenCalledWith(Path.sequences("New_Sequence_1"));
   });
 
   it("adds a new sequence to a folder", () => {
     addNewSequenceToFolder({ id: 11 });
     expect(setActiveSequenceByName).toHaveBeenCalled();
     expect(init).toHaveBeenCalledWith("Sequence", expect.objectContaining({
-      name: "new sequence 1",
+      name: "New Sequence 1",
       color: "gray",
       folder_id: 11,
     }));
-    expect(push).toHaveBeenCalledWith(Path.sequences("new_sequence_1"));
+    expect(push).toHaveBeenCalledWith(Path.sequences("New_Sequence_1"));
   });
 
   it("adds a new sequence to a folder with a color", () => {
     addNewSequenceToFolder({ id: 11, color: "blue" });
     expect(setActiveSequenceByName).toHaveBeenCalled();
     expect(init).toHaveBeenCalledWith("Sequence", expect.objectContaining({
-      name: "new sequence 1",
+      name: "New Sequence 1",
       color: "blue",
       folder_id: 11,
     }));
-    expect(push).toHaveBeenCalledWith(Path.sequences("new_sequence_1"));
+    expect(push).toHaveBeenCalledWith(Path.sequences("New_Sequence_1"));
   });
 });
 
diff --git a/frontend/folders/actions.ts b/frontend/folders/actions.ts
index e146b1d040..86f9ddcf00 100644
--- a/frontend/folders/actions.ts
+++ b/frontend/folders/actions.ts
@@ -41,7 +41,7 @@ export const addNewSequenceToFolder = (config: DeepPartial<Folder> = {}) => {
   const uuidMap = store.getState().resources.index.byKind["Sequence"];
   const seqCount = Object.keys(uuidMap).length;
   const newSequence = {
-    name: t("new sequence {{ num }}", { num: seqCount }),
+    name: t("New Sequence {{ num }}", { num: seqCount }),
     args: {
       version: -999,
       locals: { kind: "scope_declaration", args: {} },
diff --git a/frontend/folders/component.tsx b/frontend/folders/component.tsx
index a8b27879e5..1b0414d617 100644
--- a/frontend/folders/component.tsx
+++ b/frontend/folders/component.tsx
@@ -451,10 +451,10 @@ export class Folders extends React.Component<FolderProps, FolderState> {
         graphic={EmptyStateGraphic.sequences}
         title={t("No Sequences.")}
         text={Content.NO_SEQUENCES}>
+        <this.Graph />
         <ul className="sequences-not-in-folders">
           {this.rootSequences()}
         </ul>
-        <this.Graph />
         <SequenceDropArea
           dropAreaVisible={!!this.state.movedSequenceUuid}
           onMoveEnd={this.endSequenceMove}
@@ -468,7 +468,7 @@ export class Folders extends React.Component<FolderProps, FolderState> {
 
 export const FolderPanelTop = (props: FolderPanelTopProps) =>
   <div className="panel-top with-button">
-    <SearchField
+    <SearchField nameKey={"sequences"}
       placeholder={t("Search sequences...")}
       searchTerm={props.searchTerm || ""}
       onChange={updateSearchTerm} />
diff --git a/frontend/logs/index.tsx b/frontend/logs/index.tsx
index 4090822262..06b4d7855f 100644
--- a/frontend/logs/index.tsx
+++ b/frontend/logs/index.tsx
@@ -100,7 +100,7 @@ export class LogsPanel extends React.Component<LogsProps, Partial<LogsState>> {
     const { dispatch, bot } = this.props;
     return <div className={"logs-tab"}>
       <div className={"search-row"}>
-        <SearchField
+        <SearchField nameKey={"logs"}
           placeholder={t("Search logs...")}
           searchTerm={this.state.searchTerm}
           onChange={searchTerm => this.setState({ searchTerm })} />
diff --git a/frontend/plants/crop_catalog.tsx b/frontend/plants/crop_catalog.tsx
index e24b72de95..57eb5d555a 100644
--- a/frontend/plants/crop_catalog.tsx
+++ b/frontend/plants/crop_catalog.tsx
@@ -85,7 +85,7 @@ export class RawCropCatalog extends React.Component<CropCatalogProps, {}> {
         title={t("Choose a crop")}
         backTo={Path.plants()} />
       <DesignerPanelTop panel={Panel.Plants}>
-        <SearchField
+        <SearchField nameKey={"crops"}
           searchTerm={this.cropSearchQuery}
           placeholder={t("Search OpenFarm...")}
           onChange={this.handleChange}
diff --git a/frontend/plants/plant_inventory.tsx b/frontend/plants/plant_inventory.tsx
index b807e49b86..ad68cb6533 100644
--- a/frontend/plants/plant_inventory.tsx
+++ b/frontend/plants/plant_inventory.tsx
@@ -116,7 +116,8 @@ export class RawPlants
     return <DesignerPanel panelName={"plant-inventory"} panel={Panel.Plants}>
       <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Plants} withButton={true}>
-        <SearchField searchTerm={this.state.searchTerm}
+        <SearchField nameKey={"plants"}
+          searchTerm={this.state.searchTerm}
           placeholder={t("Search your plants...")}
           onChange={searchTerm => this.setState({ searchTerm })} />
         <Popover
diff --git a/frontend/point_groups/group_list_panel.tsx b/frontend/point_groups/group_list_panel.tsx
index 8b95ff7988..4625f265ee 100644
--- a/frontend/point_groups/group_list_panel.tsx
+++ b/frontend/point_groups/group_list_panel.tsx
@@ -51,7 +51,8 @@ export class RawGroupListPanel
         panel={Panel.Groups}
         onClick={() => this.props.dispatch(createGroup({ pointUuids: [] }))}
         title={t("Add group")}>
-        <SearchField searchTerm={this.state.searchTerm}
+        <SearchField nameKey={"groups"}
+          searchTerm={this.state.searchTerm}
           placeholder={t("Search your groups...")}
           onChange={searchTerm => this.setState({ searchTerm })} />
       </DesignerPanelTop>
diff --git a/frontend/points/point_inventory.tsx b/frontend/points/point_inventory.tsx
index e333087de0..915ee9b7b7 100644
--- a/frontend/points/point_inventory.tsx
+++ b/frontend/points/point_inventory.tsx
@@ -179,7 +179,8 @@ export class RawPoints extends React.Component<PointsProps, PointsState> {
     return <DesignerPanel panelName={"point-inventory"} panel={Panel.Points}>
       <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Points}>
-        <SearchField searchTerm={this.state.searchTerm}
+        <SearchField nameKey={"points"}
+          searchTerm={this.state.searchTerm}
           placeholder={t("Search your points...")}
           customLeftIcon={<PointSortMenu
             sortOptions={this.state} onChange={u => this.setState(u)} />}
diff --git a/frontend/regimens/list/__tests__/add_regimen_test.ts b/frontend/regimens/list/__tests__/add_regimen_test.ts
index bd06b11f3a..f205970d46 100644
--- a/frontend/regimens/list/__tests__/add_regimen_test.ts
+++ b/frontend/regimens/list/__tests__/add_regimen_test.ts
@@ -24,7 +24,7 @@ describe("addRegimen()", () => {
         kind: "Regimen"
       })
     });
-    expect(push).toHaveBeenCalledWith(Path.regimens("New_regimen_0"));
+    expect(push).toHaveBeenCalledWith(Path.regimens("New_Regimen_0"));
     expect(setActiveRegimenByName).toHaveBeenCalled();
   });
 });
diff --git a/frontend/regimens/list/add_regimen.ts b/frontend/regimens/list/add_regimen.ts
index 5b30daca1c..45811a0cb3 100644
--- a/frontend/regimens/list/add_regimen.ts
+++ b/frontend/regimens/list/add_regimen.ts
@@ -7,7 +7,7 @@ import { t } from "../../i18next_wrapper";
 import { Path } from "../../internal_urls";
 
 const emptyRegimenBody = (regimenCount: number): TaggedRegimen["body"] => ({
-  name: (t("New regimen ") + (regimenCount++)),
+  name: (t("New Regimen ") + (regimenCount++)),
   color: "gray",
   regimen_items: [],
   body: [],
diff --git a/frontend/regimens/list/list.tsx b/frontend/regimens/list/list.tsx
index 4867362f05..b207c1b5a6 100644
--- a/frontend/regimens/list/list.tsx
+++ b/frontend/regimens/list/list.tsx
@@ -35,7 +35,8 @@ export class RawDesignerRegimenList
         onClick={() =>
           this.props.dispatch(addRegimen(this.props.regimens.length))}
         title={t("add new regimen")}>
-        <SearchField searchTerm={this.state.searchTerm}
+        <SearchField nameKey={"regimens"}
+          searchTerm={this.state.searchTerm}
           placeholder={t("Search your regimens...")}
           onChange={searchTerm => this.setState({ searchTerm })} />
       </DesignerPanelTop>
diff --git a/frontend/saved_gardens/saved_gardens.tsx b/frontend/saved_gardens/saved_gardens.tsx
index df27b1971f..87d3c2d3fe 100644
--- a/frontend/saved_gardens/saved_gardens.tsx
+++ b/frontend/saved_gardens/saved_gardens.tsx
@@ -45,7 +45,8 @@ export class RawSavedGardens
           panel={Panel.SavedGardens}
           linkTo={Path.savedGardens("add")}
           title={t("Add garden")}>
-          <SearchField searchTerm={this.state.searchTerm}
+          <SearchField nameKey={"gardens"}
+            searchTerm={this.state.searchTerm}
             placeholder={t("Search your gardens...")}
             onChange={searchTerm => this.setState({ searchTerm })} />
         </DesignerPanelTop>
diff --git a/frontend/sequences/__tests__/sequences_test.tsx b/frontend/sequences/__tests__/sequences_test.tsx
index d0a579deae..50fd16ea71 100644
--- a/frontend/sequences/__tests__/sequences_test.tsx
+++ b/frontend/sequences/__tests__/sequences_test.tsx
@@ -1,3 +1,10 @@
+import { Path } from "../../internal_urls";
+let mockPath = "";
+jest.mock("../../history", () => ({
+  push: jest.fn(),
+  getPathArray: jest.fn(() => mockPath.split("/")),
+}));
+
 import React from "react";
 import {
   RawSequences as Sequences, SequenceBackButtonProps, SequenceBackButton,
@@ -6,14 +13,13 @@ import { shallow, mount } from "enzyme";
 import { SequencesProps } from "../interfaces";
 import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
-import { ToolTips, Actions } from "../../constants";
+import { Actions } from "../../constants";
 import {
   fakeHardwareFlags, fakeFarmwareData,
 } from "../../__test_support__/fake_sequence_step_data";
 import { push } from "../../history";
 import { mapStateToFolderProps } from "../../folders/map_state_to_props";
 import { fakeState } from "../../__test_support__/fake_state";
-import { Path } from "../../internal_urls";
 import { sequencesPanelState } from "../../__test_support__/panel_state";
 import { emptyState } from "../../resources/reducer";
 
@@ -35,9 +41,6 @@ describe("<Sequences />", () => {
   it("renders", () => {
     const wrapper = shallow(<Sequences {...fakeProps()} />);
     expect(wrapper.html()).toContain("Sequences");
-    expect(wrapper.html()).toContain("Edit Sequence");
-    expect(wrapper.html()).toContain(ToolTips.SEQUENCE_EDITOR);
-    expect(wrapper.html()).toContain("Commands");
   });
 
   it("step command cluster is hidden", () => {
@@ -53,6 +56,30 @@ describe("<Sequences />", () => {
     const wrapper = shallow(<Sequences {...p} />);
     expect(wrapper.html()).toContain("inserting-step");
   });
+
+  it("redirects to mobile interface", () => {
+    mockPath = Path.mock(Path.sequencePage());
+    Object.defineProperty(window, "innerWidth", {
+      value: 400,
+      configurable: true,
+    });
+    const p = fakeProps();
+    p.sequence = undefined;
+    shallow(<Sequences {...p} />);
+    expect(push).toHaveBeenCalledWith(Path.designerSequences());
+  });
+
+  it("redirects to mobile interface: sequence selected", () => {
+    mockPath = Path.mock(Path.sequencePage());
+    Object.defineProperty(window, "innerWidth", {
+      value: 400,
+      configurable: true,
+    });
+    const p = fakeProps();
+    p.sequence = fakeSequence();
+    shallow(<Sequences {...p} />);
+    expect(push).toHaveBeenCalledWith(Path.designerSequences("fake"));
+  });
 });
 
 describe("<SequenceBackButton />", () => {
diff --git a/frontend/sequences/panel/__tests__/list_test.tsx b/frontend/sequences/panel/__tests__/list_test.tsx
index 8940daa7ad..11a7907830 100644
--- a/frontend/sequences/panel/__tests__/list_test.tsx
+++ b/frontend/sequences/panel/__tests__/list_test.tsx
@@ -30,6 +30,13 @@ jest.mock("../../../folders/actions", () => ({
   updateSearchTerm: jest.fn(),
 }));
 
+import { Path } from "../../../internal_urls";
+let mockPath = "";
+jest.mock("../../../history", () => ({
+  push: jest.fn(),
+  getPathArray: jest.fn(() => mockPath.split("/")),
+}));
+
 import React from "react";
 import { mount, shallow } from "enzyme";
 import {
@@ -54,6 +61,7 @@ import { installSequence } from "../../actions";
 import { sequencesPanelState } from "../../../__test_support__/panel_state";
 import { Actions } from "../../../constants";
 import { emptyState } from "../../../resources/reducer";
+import { push } from "../../../history";
 
 API.setBaseUrl("");
 
@@ -90,19 +98,19 @@ describe("<DesignerSequenceList />", () => {
 
   it("adds new sequence", () => {
     const wrapper = mount(<DesignerSequenceList {...fakeProps()} />);
-    clickButton(wrapper, 0, "", { icon: "fa-plus" });
+    clickButton(wrapper, 1, "", { icon: "fa-plus" });
     expect(addNewSequenceToFolder).toHaveBeenCalled();
   });
 
   it("adds new folder", () => {
     const wrapper = mount(<DesignerSequenceList {...fakeProps()} />);
-    clickButton(wrapper, 1, "", { icon: "fa-folder" });
+    clickButton(wrapper, 2, "", { icon: "fa-folder" });
     expect(createFolder).toHaveBeenCalled();
   });
 
   it("opens folders", () => {
     const wrapper = mount(<DesignerSequenceList {...fakeProps()} />);
-    clickButton(wrapper, 2, "", { icon: "fa-chevron-right" });
+    clickButton(wrapper, 3, "", { icon: "fa-chevron-right" });
     expect(toggleAll).toHaveBeenCalled();
   });
 
@@ -135,4 +143,18 @@ describe("<DesignerSequenceList />", () => {
     expect(wrapper.text().toLowerCase()).not.toContain("first");
     expect(wrapper.text().toLowerCase()).toContain("second");
   });
+
+  it("navigates to sequence page", () => {
+    mockPath = Path.mock(Path.designerSequences());
+    const wrapper = mount(<DesignerSequenceList {...fakeProps()} />);
+    clickButton(wrapper, 0, "fullscreen");
+    expect(push).toHaveBeenCalledWith(Path.sequencePage());
+  });
+
+  it("navigates to designer sequence page", () => {
+    mockPath = Path.mock(Path.sequencePage());
+    const wrapper = mount(<DesignerSequenceList {...fakeProps()} />);
+    clickButton(wrapper, 0, "collapse");
+    expect(push).toHaveBeenCalledWith(Path.designerSequences());
+  });
 });
diff --git a/frontend/sequences/panel/editor.tsx b/frontend/sequences/panel/editor.tsx
index 6fba091d63..bbd61bedb9 100644
--- a/frontend/sequences/panel/editor.tsx
+++ b/frontend/sequences/panel/editor.tsx
@@ -161,7 +161,7 @@ interface AutoGenerateButtonProps {
   setColorProcessing(state: boolean): void;
 }
 
-const AutoGenerateButton = (props: AutoGenerateButtonProps) => {
+export const AutoGenerateButton = (props: AutoGenerateButtonProps) => {
   const {
     dispatch, sequence, isProcessing, setTitleProcessing, setColorProcessing,
   } = props;
diff --git a/frontend/sequences/panel/list.tsx b/frontend/sequences/panel/list.tsx
index 9c577fa209..1f19c9c1e7 100644
--- a/frontend/sequences/panel/list.tsx
+++ b/frontend/sequences/panel/list.tsx
@@ -23,6 +23,7 @@ import {
 } from "../../folders/actions";
 import { SequencesPanelState } from "../../interfaces";
 import { Actions } from "../../constants";
+import { push } from "../../history";
 
 interface DesignerSequenceListState {
   featuredList: FeaturedSequence[];
@@ -55,12 +56,30 @@ export class RawDesignerSequenceList
   render() {
     const panelName = "designer-sequence-list";
     const panelState = this.props.sequencesPanelState;
+    const buttonProps = Path.inDesigner()
+      ? {
+        caretDirection: "right",
+        path: Path.sequencePage(),
+        text: t("fullscreen"),
+      }
+      : {
+        caretDirection: "left",
+        path: Path.designerSequences(),
+        text: t("collapse"),
+      };
     return <DesignerPanel panelName={panelName} panel={Panel.Sequences}>
       <DesignerNavTabs />
-      <DesignerPanelTop panel={Panel.Sequences}>
-        <SearchField searchTerm={this.props.folderData.searchTerm || ""}
+      <DesignerPanelTop panel={Panel.Sequences} withButton={true}>
+        <SearchField nameKey={"sequences"}
+          searchTerm={this.props.folderData.searchTerm || ""}
           placeholder={t("Search sequences...")}
           onChange={updateSearchTerm} />
+        {window.innerWidth > 450 &&
+          <button className={"transparent-button fullscreen"}
+            onClick={() => push(buttonProps.path)}>
+            {buttonProps.text}
+            <i className={`fa fa-caret-square-o-${buttonProps.caretDirection}`} />
+          </button>}
       </DesignerPanelTop>
       <DesignerPanelContent panelName={panelName}>
         <SectionHeader title={t("My Sequences")}
diff --git a/frontend/sequences/sequence_editor_middle_active.tsx b/frontend/sequences/sequence_editor_middle_active.tsx
index 36f358a062..94643f33a7 100644
--- a/frontend/sequences/sequence_editor_middle_active.tsx
+++ b/frontend/sequences/sequence_editor_middle_active.tsx
@@ -58,6 +58,7 @@ import { ResourceIndex, UUID, VariableNameSet } from "../resources/interfaces";
 import { newVariableDataValue, newVariableLabel } from "./locals_list/new_variable";
 import { StepButtonCluster } from "./step_button_cluster";
 import { requestAutoGeneration } from "./request_auto_generation";
+import { AutoGenerateButton, ResourceTitle } from "./panel/editor";
 
 export const onDrop =
   (dispatch1: Function, sequence: TaggedSequence) =>
@@ -266,8 +267,11 @@ export const SequenceBtnGroup = ({
   toggleViewSequenceCeleryScript,
   viewCeleryScript,
   visualized,
-}: SequenceBtnGroupProps) =>
-  <div className="button-group">
+}: SequenceBtnGroupProps) => {
+  const [processingTitle, setProcessingTitle] = React.useState(false);
+  const [processingColor, setProcessingColor] = React.useState(false);
+  const isProcessing = processingColor || processingTitle;
+  return <div className="button-group">
     <SaveBtn status={sequence.specialStatus}
       onClick={() => dispatch(save(sequence.uuid)).then(() =>
         push(Path.sequences(urlFriendly(sequence.body.name))))} />
@@ -289,10 +293,6 @@ export const SequenceBtnGroup = ({
       <i className={`fa fa-code ${viewCeleryScript ? "enabled" : ""} step-control`}
         title={t("toggle celery script view")}
         onClick={toggleViewSequenceCeleryScript} />}
-    {!Path.inDesigner() && <ColorPicker
-      current={sequence.body.color}
-      onChange={color =>
-        editCurrentSequence(dispatch, sequence, { color })} />}
     <i title={sequence.body.pinned ? t("unpin sequence") : t("pin sequence")}
       className={[
         "fa",
@@ -322,7 +322,20 @@ export const SequenceBtnGroup = ({
           ? <SequenceShareMenu sequence={sequence} />
           : <SequencePublishMenu sequence={sequence} />} />
     </div>
+    {!Path.inDesigner() && <ColorPicker
+      targetElement={<i title={t("select color")}
+        className={"icon-saucer fa fa-paint-brush"} />}
+      current={sequence.body.color}
+      onChange={color =>
+        editCurrentSequence(dispatch, sequence, { color })} />}
+    {!Path.inDesigner() && <AutoGenerateButton
+      dispatch={dispatch}
+      sequence={sequence}
+      isProcessing={isProcessing}
+      setTitleProcessing={setProcessingTitle}
+      setColorProcessing={setProcessingColor} />}
   </div>;
+};
 
 interface DeleteSequenceProps {
   getWebAppConfigValue: GetWebAppConfigValue;
@@ -366,7 +379,16 @@ export const SequenceName =
 export const SequenceHeader = (props: SequenceHeaderProps) => {
   const { sequence, dispatch } = props;
   const sequenceAndDispatch = { sequence, dispatch };
-  return <div id="sequence-editor-tools" className="sequence-editor-tools">
+  const color = Path.inDesigner() ? "" : sequence.body.color;
+  const page = Path.inDesigner() ? "" : "page";
+  return <div id="sequence-editor-tools"
+    className={`sequence-editor-tools ${color} ${page}`}>
+    {props.showName &&
+      <ResourceTitle
+        key={sequence.body.name}
+        resource={sequence}
+        fallback={t("No Sequence selected")}
+        dispatch={dispatch} />}
     <SequenceBtnGroup {...sequenceAndDispatch}
       syncStatus={props.syncStatus}
       resources={props.resources}
@@ -375,8 +397,6 @@ export const SequenceHeader = (props: SequenceHeaderProps) => {
       viewCeleryScript={props.viewCeleryScript}
       visualized={props.visualized}
       sequencesState={props.sequencesState} />
-    {props.showName &&
-      <SequenceName {...sequenceAndDispatch} />}
   </div>;
 };
 
@@ -506,7 +526,7 @@ export class SequenceEditorMiddleActive extends
           toggleViewSequenceCeleryScript={
             this.toggleSection("viewSequenceCeleryScript")}
           showName={this.props.showName} />}
-      <hr />
+      {Path.inDesigner() && <hr />}
       {view == "local"
         ? <div className={"sequence-editor-sections"}>
           <Description
diff --git a/frontend/sequences/sequences.tsx b/frontend/sequences/sequences.tsx
index ba4934d3ef..73d1069d24 100644
--- a/frontend/sequences/sequences.tsx
+++ b/frontend/sequences/sequences.tsx
@@ -2,16 +2,19 @@ import React from "react";
 import { connect } from "react-redux";
 import { StepButtonCluster } from "./step_button_cluster";
 import { SequenceEditorMiddle } from "./sequence_editor_middle";
-import { Page, Row, LeftPanel, CenterPanel, RightPanel } from "../ui";
+import { Page, Row, Col } from "../ui";
 import { SequencesProps } from "./interfaces";
 import { mapStateToProps } from "./state_to_props";
-import { ToolTips } from "../constants";
 import { isTaggedSequence } from "../resources/tagged_resources";
 import { setActiveSequenceByName } from "./set_active_sequence_by_name";
 import { t } from "../i18next_wrapper";
 import { unselectSequence, closeCommandMenu } from "./actions";
 import { isNumber, noop } from "lodash";
-import { Folders } from "../folders/component";
+import { RawDesignerSequenceList } from "./panel/list";
+import { Path } from "../internal_urls";
+import { push } from "../history";
+import { urlFriendly } from "../util";
+import { ErrorBoundary } from "../error_boundary";
 
 export interface SequenceBackButtonProps {
   dispatch: Function;
@@ -39,48 +42,48 @@ export class RawSequences extends React.Component<SequencesProps, {}> {
     const sequenceOpen = sequenceSelected ? "open" : "";
     const insertingStep = isNumber(stepIndex) ? "inserting-step" : "";
     const activeClasses = [sequenceOpen, insertingStep].join(" ");
+    window.innerWidth <= 450 && !Path.inDesigner() && push(Path.designerSequences(
+      sequenceSelected ? urlFriendly(sequence.body.name) : undefined));
     return <Page className="sequence-page">
       <Row>
-        <LeftPanel
-          className={`sequence-list-panel ${activeClasses}`}
-          title={t("Sequences")}>
-          <Folders {...this.props.folderData} dispatch={this.props.dispatch} />
-        </LeftPanel>
-        <CenterPanel
-          className={`sequence-editor-panel ${activeClasses}`}
-          backButton={<SequenceBackButton
-            className={activeClasses}
-            dispatch={this.props.dispatch} />}
-          title={sequenceOpen ? t("Edit Sequence") : t("Sequence Editor")}
-          helpText={t(ToolTips.SEQUENCE_EDITOR)}>
-          <SequenceEditorMiddle
-            syncStatus={this.props.syncStatus}
-            dispatch={this.props.dispatch}
-            sequence={this.props.sequence}
-            sequences={this.props.sequences}
-            resources={this.props.resources}
-            hardwareFlags={this.props.hardwareFlags}
-            farmwareData={this.props.farmwareData}
-            getWebAppConfigValue={this.props.getWebAppConfigValue}
-            sequencesState={sequencesState} />
-        </CenterPanel>
-        <RightPanel
-          className={`step-button-cluster-panel ${activeClasses}`}
-          backButton={<SequenceBackButton
-            className={activeClasses}
-            dispatch={this.props.dispatch} />}
-          title={insertingStep ? t("Add Command") : t("Commands")}
-          helpText={t(ToolTips.SEQUENCE_COMMANDS)}
-          show={sequenceSelected}>
-          <StepButtonCluster
-            close={noop}
-            current={this.props.sequence}
-            dispatch={this.props.dispatch}
-            farmwareData={this.props.farmwareData}
-            sequences={this.props.sequences}
-            resources={this.props.resources}
-            stepIndex={stepIndex} />
-        </RightPanel>
+        <Col sm={3}>
+          <div className={`sequence-list-panel ${activeClasses}`}>
+            <ErrorBoundary>
+              <RawDesignerSequenceList {...this.props} />
+            </ErrorBoundary>
+          </div>
+        </Col>
+        <Col sm={6} lg={6}>
+          <div className={`sequence-editor-panel ${activeClasses}`}>
+            <ErrorBoundary>
+              <SequenceEditorMiddle
+                syncStatus={this.props.syncStatus}
+                dispatch={this.props.dispatch}
+                sequence={this.props.sequence}
+                sequences={this.props.sequences}
+                resources={this.props.resources}
+                hardwareFlags={this.props.hardwareFlags}
+                farmwareData={this.props.farmwareData}
+                getWebAppConfigValue={this.props.getWebAppConfigValue}
+                sequencesState={sequencesState} />
+            </ErrorBoundary>
+          </div>
+        </Col>
+        <Col sm={3} lg={3}>
+          {sequenceSelected &&
+            <div className={`step-button-cluster-panel ${activeClasses}`}>
+              <ErrorBoundary>
+                <StepButtonCluster
+                  close={noop}
+                  current={this.props.sequence}
+                  dispatch={this.props.dispatch}
+                  farmwareData={this.props.farmwareData}
+                  sequences={this.props.sequences}
+                  resources={this.props.resources}
+                  stepIndex={stepIndex} />
+              </ErrorBoundary>
+            </div>}
+        </Col>
       </Row>
     </Page>;
   }
diff --git a/frontend/sequences/step_button_cluster.tsx b/frontend/sequences/step_button_cluster.tsx
index e53d1489e8..8a60205fb6 100644
--- a/frontend/sequences/step_button_cluster.tsx
+++ b/frontend/sequences/step_button_cluster.tsx
@@ -232,7 +232,6 @@ export class StepButtonCluster
       .filter(x => x.title.toLowerCase()
         .includes(searchTerm.toLowerCase()));
     const sequences = (this.props.sequences || [])
-      .filter(s => Path.inDesigner() || s.body.pinned)
       .filter(x => x.body.name.toLowerCase()
         .includes(searchTerm.toLowerCase()));
     const first = commands[0]?.step || (sequences[0] && {
@@ -244,10 +243,11 @@ export class StepButtonCluster
       "step-button-cluster",
       Path.inDesigner() ? "designer-cluster" : "",
     ].join(" ")}>
-      <SearchField searchTerm={searchTerm}
+      <SearchField nameKey={"commands"}
+        searchTerm={searchTerm}
         placeholder={t("Search commands and sequences...")}
         customLeftIcon={<i />}
-        autoFocus={Path.inDesigner()}
+        autoFocus={true}
         onEnter={() => {
           if (first) {
             click();
@@ -267,7 +267,7 @@ export class StepButtonCluster
               color={stepButton.color} />
           </div>)}
         {!Path.inDesigner() && sequences.length > 0 &&
-          <Col xs={12}><label>{t("pinned sequences")}</label></Col>}
+          <Col xs={12}><label></label></Col>}
         <div className={"pinned-sequences"}>
           {sequences.map((s, inx) => s.body.id &&
             <div className={[
diff --git a/frontend/settings/index.tsx b/frontend/settings/index.tsx
index 898a520f4c..71e893a440 100644
--- a/frontend/settings/index.tsx
+++ b/frontend/settings/index.tsx
@@ -69,7 +69,7 @@ export class RawDesignerSettings
     return <DesignerPanel panelName={"settings"} panel={Panel.Settings}>
       <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Settings} withButton={true}>
-        <SearchField
+        <SearchField nameKey={"settings"}
           placeholder={t("Search settings...")}
           searchTerm={this.props.searchTerm}
           onChange={searchTerm => {
diff --git a/frontend/tools/index.tsx b/frontend/tools/index.tsx
index 1095183dce..7910722124 100644
--- a/frontend/tools/index.tsx
+++ b/frontend/tools/index.tsx
@@ -174,7 +174,8 @@ export class RawTools extends React.Component<ToolsProps, ToolsState> {
         panel={Panel.Tools}
         linkTo={!hasTools ? Path.tools("add") : undefined}
         title={!hasTools ? this.strings.titleText : undefined}>
-        <SearchField searchTerm={this.state.searchTerm}
+        <SearchField nameKey={"tools"}
+          searchTerm={this.state.searchTerm}
           placeholder={this.strings.placeholder}
           onChange={searchTerm => this.setState({ searchTerm })} />
       </DesignerPanelTop>
diff --git a/frontend/ui/__tests__/center_panel_test.tsx b/frontend/ui/__tests__/center_panel_test.tsx
deleted file mode 100644
index 9539ee4ded..0000000000
--- a/frontend/ui/__tests__/center_panel_test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-import { CenterPanel, CenterPanelProps } from "../center_panel";
-
-describe("<CenterPanel />", () => {
-  const fakeProps = (): CenterPanelProps => ({
-    className: "center",
-    title: "title",
-  });
-
-  it("renders", () => {
-    const wrapper = mount(<CenterPanel {...fakeProps()} />);
-    expect(wrapper.text()).toContain("title");
-  });
-});
diff --git a/frontend/ui/__tests__/left_panel_test.tsx b/frontend/ui/__tests__/left_panel_test.tsx
deleted file mode 100644
index 079e3e5798..0000000000
--- a/frontend/ui/__tests__/left_panel_test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-import { LeftPanel, LeftPanelProps } from "../left_panel";
-
-describe("<LeftPanel />", () => {
-  const fakeProps = (): LeftPanelProps => ({
-    className: "left",
-    title: "title",
-  });
-
-  it("renders", () => {
-    const wrapper = mount(<LeftPanel {...fakeProps()} />);
-    expect(wrapper.text()).toContain("title");
-  });
-});
diff --git a/frontend/ui/__tests__/right_panel_test.tsx b/frontend/ui/__tests__/right_panel_test.tsx
deleted file mode 100644
index bbe98b10a4..0000000000
--- a/frontend/ui/__tests__/right_panel_test.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-import { RightPanel, RightPanelProps } from "../right_panel";
-
-describe("<RightPanel />", () => {
-  const fakeProps = (): RightPanelProps => ({
-    className: "right",
-    title: "title",
-    helpText: "help",
-    show: true,
-  });
-
-  it("renders", () => {
-    const wrapper = mount(<RightPanel {...fakeProps()} />);
-    expect(wrapper.text()).toContain("title");
-  });
-});
diff --git a/frontend/ui/__tests__/search_field_test.tsx b/frontend/ui/__tests__/search_field_test.tsx
index c9f2e6e723..55134e070b 100644
--- a/frontend/ui/__tests__/search_field_test.tsx
+++ b/frontend/ui/__tests__/search_field_test.tsx
@@ -7,6 +7,7 @@ import {
 
 describe("<SearchField />", () => {
   const fakeProps = (): SearchFieldProps => ({
+    nameKey: "test",
     onChange: jest.fn(),
     searchTerm: "",
     placeholder: "search...",
diff --git a/frontend/ui/center_panel.tsx b/frontend/ui/center_panel.tsx
deleted file mode 100644
index e146c28f05..0000000000
--- a/frontend/ui/center_panel.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-import { Col, ToolTip, DocSlug } from ".";
-import { t } from "../i18next_wrapper";
-import { ErrorBoundary } from "../error_boundary";
-
-export interface CenterPanelProps {
-  children?: React.ReactNode;
-  className: string;
-  title: string;
-  helpText?: string;
-  width?: number;
-  docPage?: DocSlug;
-  backButton?: React.ReactNode;
-}
-
-export function CenterPanel(props: CenterPanelProps) {
-  return <Col sm={props.width || 6} lg={6}>
-    <div className={props.className}>
-      {props.backButton}
-      <h3>
-        <i>{t(props.title)}</i>
-      </h3>
-      {props.helpText &&
-        <ToolTip helpText={t(props.helpText)} docPage={props.docPage} />}
-      <ErrorBoundary>
-        {props.children}
-      </ErrorBoundary>
-    </div>
-  </Col>;
-}
diff --git a/frontend/ui/index.ts b/frontend/ui/index.ts
index 4a95b48906..497ab28067 100644
--- a/frontend/ui/index.ts
+++ b/frontend/ui/index.ts
@@ -1,6 +1,5 @@
 export * from "./back_arrow";
 export * from "./blurable_input";
-export * from "./center_panel";
 export * from "./checkbox";
 export * from "./color_picker";
 export * from "./colors";
@@ -12,13 +11,11 @@ export * from "./expandable_header";
 export * from "./fb_select";
 export * from "./help";
 export * from "./input_error";
-export * from "./left_panel";
 export * from "./markdown";
 export * from "./marked_slider";
 export * from "./new_fb_select";
 export * from "./page";
 export * from "./popover";
-export * from "./right_panel";
 export * from "./row";
 export * from "./saucer";
 export * from "./save_button";
diff --git a/frontend/ui/left_panel.tsx b/frontend/ui/left_panel.tsx
deleted file mode 100644
index 2468b9276c..0000000000
--- a/frontend/ui/left_panel.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import { Col } from ".";
-import { t } from "../i18next_wrapper";
-import { ErrorBoundary } from "../error_boundary";
-
-export interface LeftPanelProps {
-  children?: React.ReactNode;
-  className: string;
-  title: string;
-}
-
-export function LeftPanel(props: LeftPanelProps) {
-  return <Col sm={3}>
-    <div className={props.className}>
-      <h3>
-        <i>{t(props.title)}</i>
-      </h3>
-      <ErrorBoundary>
-        {props.children}
-      </ErrorBoundary>
-    </div>
-  </Col>;
-}
diff --git a/frontend/ui/right_panel.tsx b/frontend/ui/right_panel.tsx
deleted file mode 100644
index 94b29c2972..0000000000
--- a/frontend/ui/right_panel.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import { Col, ToolTip, DocSlug } from ".";
-import { t } from "../i18next_wrapper";
-import { ErrorBoundary } from "../error_boundary";
-
-export interface RightPanelProps {
-  children?: React.ReactNode;
-  className: string;
-  title: string;
-  helpText: string;
-  docPage?: DocSlug;
-  show: boolean | undefined;
-  width?: number;
-  backButton?: React.ReactNode;
-}
-
-export function RightPanel(props: RightPanelProps) {
-  return <Col sm={props.width || 3} lg={3}>
-    {props.show &&
-      <div className={props.className}>
-        {props.backButton}
-        <h3>
-          <i>{t(props.title)}</i>
-        </h3>
-        <ToolTip helpText={props.helpText} docPage={props.docPage} />
-        <ErrorBoundary>
-          {props.children}
-        </ErrorBoundary>
-      </div>}
-  </Col>;
-}
diff --git a/frontend/ui/search_field.tsx b/frontend/ui/search_field.tsx
index 6439166e8a..7d5286908a 100644
--- a/frontend/ui/search_field.tsx
+++ b/frontend/ui/search_field.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ErrorBoundary } from "../error_boundary";
 
 export interface SearchFieldProps {
+  nameKey: string;
   onChange(searchTerm: string): void;
   onKeyPress?: (searchTerm: string) => void;
   onEnter?: () => void;
@@ -18,7 +19,7 @@ export const SearchField = (props: SearchFieldProps) =>
       <div className="text-input-wrapper">
         <ErrorBoundary>
           {props.customLeftIcon || <i className="fa fa-search" />}
-          <input name="searchTerm"
+          <input name={props.nameKey + "SearchTerm"}
             value={props.searchTerm}
             autoFocus={props.autoFocus}
             onChange={e => props.onChange(e.currentTarget.value)}
diff --git a/frontend/weeds/weeds_inventory.tsx b/frontend/weeds/weeds_inventory.tsx
index 046c82c68f..86237306b8 100644
--- a/frontend/weeds/weeds_inventory.tsx
+++ b/frontend/weeds/weeds_inventory.tsx
@@ -211,7 +211,8 @@ export class RawWeeds extends React.Component<WeedsProps, WeedsState> {
     return <DesignerPanel panelName={"weeds-inventory"} panel={Panel.Weeds}>
       <DesignerNavTabs />
       <DesignerPanelTop panel={Panel.Weeds}>
-        <SearchField searchTerm={this.state.searchTerm}
+        <SearchField nameKey={"weeds"}
+          searchTerm={this.state.searchTerm}
           placeholder={t("Search your weeds...")}
           customLeftIcon={<PointSortMenu
             sortOptions={this.state} onChange={u => this.setState(u)} />}
diff --git a/frontend/zones/zones_inventory.tsx b/frontend/zones/zones_inventory.tsx
index 90de93b69e..04adc8a169 100644
--- a/frontend/zones/zones_inventory.tsx
+++ b/frontend/zones/zones_inventory.tsx
@@ -44,7 +44,8 @@ export const RawZones = (props: ZonesProps) => {
       }))
         .then((id: number) => navigate(id)).catch(() => { })}
       title={t("Add zone")}>
-      <SearchField searchTerm={searchTerm}
+      <SearchField nameKey={"zones"}
+        searchTerm={searchTerm}
         placeholder={t("Search your zones...")}
         onChange={setSearchTerm} />
     </DesignerPanelTop>

From 646c85d965286427946d623fa68c5da5f75364dc Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Wed, 18 Oct 2023 13:40:16 -0700
Subject: [PATCH 5/9] increase inactive account deletion time

---
 app/jobs/inactive_account_job.rb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/jobs/inactive_account_job.rb b/app/jobs/inactive_account_job.rb
index ec60efa8fb..b819e6ce51 100644
--- a/app/jobs/inactive_account_job.rb
+++ b/app/jobs/inactive_account_job.rb
@@ -3,7 +3,7 @@ class InactiveAccountJob < ApplicationJob
   queue_as :default
   LIMIT = 1000
   ORDER = "RANDOM()"
-  INACTIVE_WITH_DEVICE = 11.months + 15.days
+  INACTIVE_WITH_DEVICE = 29.months + 15.days
   INACTIVE_NO_DEVICE = 2.months + 15.days
   WARNING_TIME = 14.days
 
@@ -26,12 +26,12 @@ def ok_device
       .references(:devices)
   end
 
-  def inactive_3mo
+  def inactive_no_device
     no_device
       .where("last_sign_in_at < ?", INACTIVE_NO_DEVICE.ago)
   end
 
-  def inactive_11mo
+  def inactive_with_device
     ok_device
       .where("last_sign_in_at < ?", INACTIVE_WITH_DEVICE.ago)
   end
@@ -39,7 +39,7 @@ def inactive_11mo
   # Returns a Map. Key is the number of warnings sent, value is a User object
   # (not a device, but device is preloaded)
   def all_inactive
-    @all_inactive ||= inactive_11mo.or(inactive_3mo).order(ORDER).limit(LIMIT)
+    @all_inactive ||= inactive_with_device.or(inactive_no_device).order(ORDER).limit(LIMIT)
   end
 
   def notify_old_accounts

From 12eb0bbdf1ad64534f5e558e9dd8b27fa7901efd Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:05:50 -0700
Subject: [PATCH 6/9] fix plant drag behavior

---
 frontend/farm_designer/interfaces.ts          |  9 ++-
 .../map/__tests__/actions_test.ts             | 20 +++++-
 frontend/farm_designer/map/actions.ts         | 10 ++-
 frontend/farm_designer/map/garden_map.tsx     |  7 +-
 .../plants/__tests__/plant_actions_test.ts    | 72 +++----------------
 .../map/layers/plants/plant_actions.ts        | 32 +++------
 frontend/farm_designer/map/util.ts            |  2 +-
 7 files changed, 56 insertions(+), 96 deletions(-)

diff --git a/frontend/farm_designer/interfaces.ts b/frontend/farm_designer/interfaces.ts
index 4eff1c4ea3..119de9742c 100644
--- a/frontend/farm_designer/interfaces.ts
+++ b/frontend/farm_designer/interfaces.ts
@@ -123,6 +123,13 @@ export interface MovePointsProps {
   gridSize: AxisNumberProperty;
 }
 
+export interface MovePointToProps {
+  x: number;
+  y: number;
+  point: TaggedPoint | TaggedPlantTemplate;
+  gridSize: AxisNumberProperty;
+}
+
 /**
  * OFCrop bundled with corresponding profile image from OpenFarm API.
  */
@@ -291,8 +298,6 @@ export interface GardenMapProps {
 export interface GardenMapState {
   isDragging: boolean | undefined;
   botOriginQuadrant: BotOriginQuadrant;
-  qPageX: number | undefined;
-  qPageY: number | undefined;
   activeDragXY: BotPosition | undefined;
   activeDragSpread: number | undefined;
   selectionBox: SelectionBoxData | undefined;
diff --git a/frontend/farm_designer/map/__tests__/actions_test.ts b/frontend/farm_designer/map/__tests__/actions_test.ts
index 37c49f64ad..88e2d16294 100644
--- a/frontend/farm_designer/map/__tests__/actions_test.ts
+++ b/frontend/farm_designer/map/__tests__/actions_test.ts
@@ -23,8 +23,9 @@ import {
   movePoints, closePlantInfo, setDragIcon, clickMapPlant, selectPoint,
   setHoveredPlant,
   mapPointClickAction,
+  movePointTo,
 } from "../actions";
-import { MovePointsProps } from "../../interfaces";
+import { MovePointToProps, MovePointsProps } from "../../interfaces";
 import { edit } from "../../../api/crud";
 import { Actions } from "../../../constants";
 import { svgToUrl } from "../../../open_farm/icons";
@@ -65,6 +66,23 @@ describe("movePoints", () => {
     });
 });
 
+describe("movePointTo", () => {
+  it("moves plant", () => {
+    const payload: MovePointToProps = {
+      x: 10000,
+      y: 10000,
+      point: fakePlant(),
+      gridSize: { x: 3000, y: 1500 }
+    };
+    movePointTo(payload)(jest.fn());
+    expect(edit).toHaveBeenCalledWith(
+      expect.objectContaining({
+        body: expect.objectContaining({ x: 100, y: 200 })
+      }),
+      expect.objectContaining({ x: 3000, y: 1500 }));
+  });
+});
+
 describe("closePlantInfo()", () => {
   it("no plant info open", () => {
     mockPath = Path.mock(Path.plants());
diff --git a/frontend/farm_designer/map/actions.ts b/frontend/farm_designer/map/actions.ts
index 2fe89414a5..1ffb0bb754 100644
--- a/frontend/farm_designer/map/actions.ts
+++ b/frontend/farm_designer/map/actions.ts
@@ -1,4 +1,4 @@
-import { MovePointsProps, DraggableEvent } from "../interfaces";
+import { MovePointsProps, DraggableEvent, MovePointToProps } from "../interfaces";
 import { defensiveClone } from "../../util";
 import { edit } from "../../api/crud";
 import { push } from "../../history";
@@ -27,6 +27,14 @@ export const movePoints = (payload: MovePointsProps) => (dispatch: Function) =>
   });
 };
 
+export const movePointTo = (payload: MovePointToProps) => (dispatch: Function) => {
+  const tr = payload.point;
+  const update = defensiveClone(payload.point).body;
+  update.x = clamp(payload.x, 0, payload.gridSize.x);
+  update.y = clamp(payload.y, 0, payload.gridSize.y);
+  dispatch(edit(tr, update));
+};
+
 export const selectPoint = (payload: string[] | undefined) => {
   return { type: Actions.SELECT_POINT, payload };
 };
diff --git a/frontend/farm_designer/map/garden_map.tsx b/frontend/farm_designer/map/garden_map.tsx
index 5fceb8ce0d..6a8750626b 100644
--- a/frontend/farm_designer/map/garden_map.tsx
+++ b/frontend/farm_designer/map/garden_map.tsx
@@ -119,7 +119,7 @@ export class GardenMap extends
       boxSelected: this.props.designer.selectedPoints,
     });
     this.setState({
-      isDragging: false, qPageX: 0, qPageY: 0,
+      isDragging: false,
       activeDragXY: { x: undefined, y: undefined, z: undefined },
       activeDragSpread: undefined,
       selectionBox: undefined,
@@ -340,10 +340,7 @@ export class GardenMap extends
           isDragging: this.state.isDragging,
           dispatch: this.props.dispatch,
           setMapState: this.setMapState,
-          qPageX: this.state.qPageX,
-          qPageY: this.state.qPageY,
-          pageX: e.pageX,
-          pageY: e.pageY,
+          gardenCoords: this.getGardenCoordinates(e),
         });
         break;
       case Mode.createPoint:
diff --git a/frontend/farm_designer/map/layers/plants/__tests__/plant_actions_test.ts b/frontend/farm_designer/map/layers/plants/__tests__/plant_actions_test.ts
index 569fd6b063..1851ab2ad5 100644
--- a/frontend/farm_designer/map/layers/plants/__tests__/plant_actions_test.ts
+++ b/frontend/farm_designer/map/layers/plants/__tests__/plant_actions_test.ts
@@ -11,6 +11,7 @@ jest.mock("../../../../../open_farm/cached_crop", () => ({
 
 jest.mock("../../../actions", () => ({
   movePoints: jest.fn(),
+  movePointTo: jest.fn(),
 }));
 
 import { Path } from "../../../../../internal_urls";
@@ -36,7 +37,7 @@ import { cachedCrop } from "../../../../../open_farm/cached_crop";
 import {
   fakeMapTransformProps,
 } from "../../../../../__test_support__/map_transform_props";
-import { movePoints } from "../../../actions";
+import { movePointTo, movePoints } from "../../../actions";
 import {
   fakeCropLiveSearchResult,
 } from "../../../../../__test_support__/fake_crop_search_result";
@@ -229,58 +230,18 @@ describe("dragPlant()", () => {
     isDragging: true,
     dispatch: jest.fn(),
     setMapState: jest.fn(),
-    pageX: 100,
-    pageY: 200,
-    qPageX: 10,
-    qPageY: 20,
+    gardenCoords: { x: 100, y: 200 },
   });
 
   it("moves plant", () => {
     const p = fakeProps();
     dragPlant(p);
     expect(p.setMapState).toHaveBeenCalledWith({
-      activeDragXY: { x: 190, y: 380, z: 0 },
-      qPageX: 100, qPageY: 200
-    });
-    expect(movePoints).toHaveBeenCalledWith({
-      deltaX: 90, deltaY: 180, gridSize: p.mapTransformProps.gridSize,
-      points: [p.getPlant()],
-    });
-  });
-
-  it("moves plant while swapped in odd quadrant", () => {
-    Object.defineProperty(window, "getComputedStyle", {
-      value: () => ({ transform: "scale(0.5)" }), configurable: true
-    });
-    const p = fakeProps();
-    p.mapTransformProps.quadrant = 3;
-    p.mapTransformProps.xySwap = true;
-    p.qPageX = 500;
-    p.qPageY = 3000;
-    dragPlant(p);
-    expect(p.setMapState).toHaveBeenCalledWith({
-      activeDragXY: { x: 700, y: 400, z: 0 },
-      qPageX: 200, qPageY: 2900
-    });
-    expect(movePoints).toHaveBeenCalledWith({
-      deltaX: 600, deltaY: 200, gridSize: p.mapTransformProps.gridSize,
-      points: [p.getPlant()],
-    });
-  });
-
-  it("moves plant: zoom unknown", () => {
-    Object.defineProperty(window, "getComputedStyle", {
-      value: () => ({ transform: undefined }), configurable: true
-    });
-    const p = fakeProps();
-    dragPlant(p);
-    expect(p.setMapState).toHaveBeenCalledWith({
-      activeDragXY: { x: 190, y: 380, z: 0 },
-      qPageX: 100, qPageY: 200
+      activeDragXY: { x: 100, y: 200, z: 0 },
     });
-    expect(movePoints).toHaveBeenCalledWith({
-      deltaX: 90, deltaY: 180, gridSize: p.mapTransformProps.gridSize,
-      points: [p.getPlant()],
+    expect(movePointTo).toHaveBeenCalledWith({
+      x: 100, y: 200, gridSize: p.mapTransformProps.gridSize,
+      point: p.getPlant(),
     });
   });
 
@@ -289,24 +250,7 @@ describe("dragPlant()", () => {
     p.isDragging = false;
     dragPlant(p);
     expect(p.setMapState).not.toHaveBeenCalled();
-    expect(movePoints).not.toHaveBeenCalled();
-  });
-
-  it("moves plant: same location", () => {
-    const p = fakeProps();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    p.qPageX = undefined as any;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    p.qPageY = undefined as any;
-    dragPlant(p);
-    expect(p.setMapState).toHaveBeenCalledWith({
-      activeDragXY: { x: 100, y: 200, z: 0 },
-      qPageX: 100, qPageY: 200
-    });
-    expect(movePoints).toHaveBeenCalledWith({
-      deltaX: 0, deltaY: 0, gridSize: p.mapTransformProps.gridSize,
-      points: [p.getPlant()],
-    });
+    expect(movePointTo).not.toHaveBeenCalled();
   });
 });
 
diff --git a/frontend/farm_designer/map/layers/plants/plant_actions.ts b/frontend/farm_designer/map/layers/plants/plant_actions.ts
index f520a75d15..d3ff4979b0 100644
--- a/frontend/farm_designer/map/layers/plants/plant_actions.ts
+++ b/frontend/farm_designer/map/layers/plants/plant_actions.ts
@@ -10,10 +10,8 @@ import {
   DesignerState, GardenMapState, MovePointsProps,
 } from "../../../interfaces";
 import { findBySlug } from "../../../search_selectors";
-import {
-  transformXY, round, getZoomLevelFromMap, defaultSpreadCmDia,
-} from "../../util";
-import { movePoints } from "../../actions";
+import { round, defaultSpreadCmDia } from "../../util";
+import { movePointTo, movePoints } from "../../actions";
 import { cachedCrop } from "../../../../open_farm/cached_crop";
 import { t } from "../../../../i18next_wrapper";
 import { error } from "../../../../toast/toast";
@@ -153,31 +151,21 @@ export interface DragPlantProps {
   isDragging: boolean | undefined;
   dispatch: Function;
   setMapState(x: Partial<GardenMapState>): void;
-  pageX: number;
-  pageY: number;
-  qPageX: number | undefined;
-  qPageY: number | undefined;
+  gardenCoords: AxisNumberProperty | undefined;
 }
 
 /** Move a plant in the garden map. */
 export const dragPlant = (props: DragPlantProps) => {
   const plant = props.getPlant();
-  const map = document.querySelector(".farm-designer-map");
-  const { isDragging, pageX, pageY, qPageX, qPageY } = props;
-  const { quadrant, xySwap, gridSize } = props.mapTransformProps;
-  if (isDragging && plant && map) {
-    const zoomLvl = getZoomLevelFromMap(map);
-    const { qx, qy } = transformXY(pageX, pageY, props.mapTransformProps);
-    const deltaX = Math.round((qx - (qPageX || qx)) / zoomLvl);
-    const deltaY = Math.round((qy - (qPageY || qy)) / zoomLvl);
-    const dX = xySwap && (quadrant % 2 === 1) ? -deltaX : deltaX;
-    const dY = xySwap && (quadrant % 2 === 1) ? -deltaY : deltaY;
+  const { isDragging, gardenCoords } = props;
+  const { gridSize } = props.mapTransformProps;
+  if (isDragging && plant && gardenCoords) {
+    const newX = gardenCoords.x;
+    const newY = gardenCoords.y;
     props.setMapState({
-      qPageX: qx, qPageY: qy,
-      activeDragXY: { x: plant.body.x + dX, y: plant.body.y + dY, z: 0 }
+      activeDragXY: { x: newX, y: newY, z: plant.body.z }
     });
-    const points = [plant];
-    props.dispatch(movePoints({ deltaX: dX, deltaY: dY, points, gridSize }));
+    props.dispatch(movePointTo({ x: newX, y: newY, point: plant, gridSize }));
   }
 };
 
diff --git a/frontend/farm_designer/map/util.ts b/frontend/farm_designer/map/util.ts
index c4a4cf6b74..5d1c3c081d 100644
--- a/frontend/farm_designer/map/util.ts
+++ b/frontend/farm_designer/map/util.ts
@@ -323,7 +323,7 @@ export const savedGardenOpen = () =>
     ? parseInt(Path.getSlug(Path.savedGardens()))
     : false;
 
-export const getZoomLevelFromMap = (map: Element) =>
+const getZoomLevelFromMap = (map: Element) =>
   parseFloat((window.getComputedStyle(map).transform || "(1").split("(")[1]);
 
 /** Get the garden map coordinate of a cursor or screen interaction. */

From effa3530b413a44eeb8e4df471e14bb75853f211 Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Fri, 20 Oct 2023 13:46:06 -0700
Subject: [PATCH 7/9] upgrade deps

---
 Gemfile.lock | 14 +++++++-------
 package.json | 48 ++++++++++++++++++++++++------------------------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index de6fe155f0..7c0c8757cf 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -97,10 +97,10 @@ GEM
     declarative (0.0.20)
     delayed_job (4.1.11)
       activesupport (>= 3.0, < 8.0)
-    delayed_job_active_record (4.1.7)
+    delayed_job_active_record (4.1.8)
       activerecord (>= 3.0, < 8.0)
       delayed_job (>= 3.0, < 5)
-    devise (4.9.2)
+    devise (4.9.3)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 4.1.0)
@@ -200,7 +200,7 @@ GEM
       activerecord
       kaminari-core (= 1.2.2)
     kaminari-core (1.2.2)
-    lograge (0.13.0)
+    lograge (0.14.0)
       actionpack (>= 4)
       activesupport (>= 4)
       railties (>= 4)
@@ -221,7 +221,7 @@ GEM
     multipart-post (2.3.0)
     mutations (0.9.1)
       activesupport
-    net-imap (0.4.1)
+    net-imap (0.4.2)
       date
       net-protocol
     net-pop (0.1.2)
@@ -301,12 +301,12 @@ GEM
       uber (< 0.2.0)
     request_store (1.5.1)
       rack (>= 1.4)
-    responders (3.1.0)
+    responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
     retriable (3.1.2)
     rexml (3.2.6)
-    rollbar (3.4.0)
+    rollbar (3.4.1)
     rspec (3.12.0)
       rspec-core (~> 3.12.0)
       rspec-expectations (~> 3.12.0)
@@ -360,7 +360,7 @@ GEM
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
-    thor (1.2.2)
+    thor (1.3.0)
     thwait (0.2.0)
       e2mmap
     timeout (0.4.0)
diff --git a/package.json b/package.json
index ab30af16e1..043ed111ec 100644
--- a/package.json
+++ b/package.json
@@ -31,33 +31,33 @@
   "author": "farmbot.io",
   "license": "MIT",
   "dependencies": {
-    "@blueprintjs/core": "5.4.0",
-    "@blueprintjs/select": "5.0.14",
+    "@blueprintjs/core": "5.5.1",
+    "@blueprintjs/select": "5.0.16",
     "@monaco-editor/react": "4.6.0",
-    "@parcel/transformer-sass": "2.9.3",
-    "@parcel/transformer-typescript-tsc": "2.9.3",
-    "@types/lodash": "4.14.199",
-    "@types/markdown-it": "13.0.2",
-    "@types/node": "20.8.4",
-    "@types/promise-timeout": "1.3.1",
-    "@types/react": "18.2.27",
-    "@types/react-color": "3.0.7",
-    "@types/react-dom": "18.2.12",
-    "@types/ws": "8.5.6",
+    "@parcel/transformer-sass": "2.10.1",
+    "@parcel/transformer-typescript-tsc": "2.10.1",
+    "@types/lodash": "4.14.200",
+    "@types/markdown-it": "13.0.5",
+    "@types/node": "20.8.8",
+    "@types/promise-timeout": "1.3.2",
+    "@types/react": "18.2.31",
+    "@types/react-color": "3.0.9",
+    "@types/react-dom": "18.2.14",
+    "@types/ws": "8.5.8",
     "axios": "1.5.1",
     "bowser": "2.11.0",
     "browser-speech": "1.1.1",
     "events": "3.3.0",
     "farmbot": "15.8.1",
-    "i18next": "23.5.1",
+    "i18next": "23.6.0",
     "lodash": "4.17.21",
     "markdown-it": "13.0.2",
     "markdown-it-emoji": "2.0.2",
     "moment": "2.29.4",
     "monaco-editor": "0.44.0",
-    "mqtt": "5.1.2",
-    "npm": "10.2.0",
-    "parcel": "2.9.3",
+    "mqtt": "5.1.3",
+    "npm": "10.2.1",
+    "parcel": "2.10.1",
     "process": "0.11.10",
     "promise-timeout": "1.3.0",
     "punycode": "2.3.0",
@@ -76,17 +76,17 @@
   },
   "devDependencies": {
     "@types/enzyme": "3.10.12",
-    "@types/jest": "29.5.5",
-    "@types/readable-stream": "4.0.3",
-    "@typescript-eslint/eslint-plugin": "6.7.5",
-    "@typescript-eslint/parser": "6.7.5",
+    "@types/jest": "29.5.6",
+    "@types/readable-stream": "4.0.4",
+    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/parser": "6.9.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "coveralls": "3.1.1",
     "enzyme": "3.11.0",
-    "eslint": "8.51.0",
+    "eslint": "8.52.0",
     "eslint-plugin-eslint-comments": "3.2.0",
-    "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-jest": "27.4.2",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-jest": "27.4.3",
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.33.2",
@@ -101,7 +101,7 @@
     "raf": "3.4.1",
     "react-addons-test-utils": "15.6.2",
     "react-test-renderer": "18.2.0",
-    "sass": "1.69.1",
+    "sass": "1.69.4",
     "sass-lint": "1.13.1",
     "ts-jest": "29.1.1",
     "tslint": "6.1.3"

From 8e9b8f1bd7c8644e792a93e4b0ea7bf2c2df3b7b Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Tue, 24 Oct 2023 14:26:29 -0700
Subject: [PATCH 8/9] change button style part I

---
 frontend/controls/peripherals/index.tsx       |  6 +-
 frontend/css/buttons.scss                     | 73 +++++++++++++------
 frontend/css/colors.scss                      |  3 +
 frontend/css/global.scss                      |  7 +-
 frontend/css/sequences.scss                   |  6 --
 .../__tests__/edit_fe_form_test.tsx           |  2 +-
 frontend/sensors/index.tsx                    |  6 +-
 .../sensor_readings/sensor_readings.tsx       |  4 +-
 .../sequence_editor_middle_active_test.tsx    |  2 +-
 frontend/sequences/test_button.tsx            |  7 +-
 frontend/tools/edit_tool.tsx                  |  2 +-
 frontend/ui/__tests__/save_button_test.tsx    |  1 +
 frontend/ui/save_button.tsx                   | 49 ++++++-------
 13 files changed, 99 insertions(+), 69 deletions(-)

diff --git a/frontend/controls/peripherals/index.tsx b/frontend/controls/peripherals/index.tsx
index f42692790c..803ac71939 100644
--- a/frontend/controls/peripherals/index.tsx
+++ b/frontend/controls/peripherals/index.tsx
@@ -131,7 +131,7 @@ export class Peripherals
       </EmptyStateWrapper>
       <div className={"peripherals-buttons"}>
         <button
-          className="fb-button gray"
+          className="fb-button-2 gray"
           onClick={this.toggle}
           title={editButtonText}
           disabled={!!status && isEditing}>
@@ -143,7 +143,7 @@ export class Peripherals
           onClick={this.maybeSave} />
         <button
           hidden={!isEditing}
-          className="fb-button green"
+          className="fb-button-2 green"
           type="button"
           title={t("add peripheral")}
           onClick={() => this.newPeripheral()}>
@@ -151,7 +151,7 @@ export class Peripherals
         </button>
         <button
           hidden={!isEditing || this.props.firmwareHardware == "none"}
-          className="fb-button green"
+          className="fb-button-2 green"
           type="button"
           title={t("add stock peripherals")}
           onClick={() => this.stockPeripherals.map(p =>
diff --git a/frontend/css/buttons.scss b/frontend/css/buttons.scss
index 469751a0a1..490ec9b6b7 100644
--- a/frontend/css/buttons.scss
+++ b/frontend/css/buttons.scss
@@ -18,28 +18,6 @@
     pointer-events: none !important;
     cursor: not-allowed !important;
   }
-  &.is-saved,
-  &.is-saving {
-    color: $off_white !important;
-    background: $medium_gray !important;
-    box-shadow: 0 2px 0px 0px $dark_gray !important;
-    pointer-events: none;
-  }
-  .btn-spinner {
-    margin: 0.2rem 0px 0 0.6rem;
-    width: 0.8rem;
-    height: 0.8rem;
-    animation: rotate 0.8s infinite linear;
-    border: 1px solid $white;
-    border-right-color: transparent;
-    border-radius: 50%;
-    float: right;
-    &.sync {
-      border-color: $dark_gray;
-      border-right-color: transparent;
-      margin-top: 0.4rem;
-    }
-  }
   &:active {
     box-shadow: none !important;
     transform: translateY(2px);
@@ -288,6 +266,11 @@
   }
 }
 
+.is-saved,
+.is-saving {
+  pointer-events: none;
+}
+
 .block {
   height: 3.5rem;
   font-size: 1.2rem;
@@ -455,3 +438,49 @@
   font-size: "1.2rem";
   border-bottom: "none";
 }
+
+.fb-button-2 {
+  margin: 0.25em 0.5em;
+  float: right;
+  font-weight: bold;
+  padding: 0.4em 0.8em;
+  border-radius: 5px;
+  font-size: 1rem;
+  text-transform: uppercase;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  color: $off_white;
+  border: none !important;
+  box-shadow: inset 0 -1px 0px 0px $translucent2, 0 0 5px $translucent15;
+  &:hover:not(.pseudo-disabled) {
+    filter: brightness(1.05);
+    box-shadow: inset 0 -1px 0px 0px $translucent2, 0 0 5px $translucent15, inset 0 0 5px rgba(255, 255, 255, 0.3);
+  }
+  &:active:not(.pseudo-disabled) {
+    filter: brightness(1);
+    box-shadow: inset 0 1px 0px 0px $translucent1, inset 0 0 5px $translucent2;
+  }
+  &.pseudo-disabled {
+    filter: brightness(0.7) contrast(0.8);
+    cursor: not-allowed;
+  }
+  .fa-check,
+  .fa-spinner {
+    margin: 0;
+    color: $off_white !important;
+    line-height: 1rem;
+    margin-left: 0.5rem;
+    float: none;
+  }
+  &.gray {
+    background: $medium_gray !important;
+  }
+  &.yellow,
+  &.orange {
+    color: $dark_gray;
+    .fa-spinner {
+      color: $dark_gray !important;
+    }
+  }
+}
diff --git a/frontend/css/colors.scss b/frontend/css/colors.scss
index e195910c3a..6bdf11ca69 100644
--- a/frontend/css/colors.scss
+++ b/frontend/css/colors.scss
@@ -1,6 +1,9 @@
 // COLORS used throughout the web app
 $transparent: #00000000;
 $translucent: rgba(0, 0, 0, 0.2);
+$translucent1: rgba(0, 0, 0, 0.1);
+$translucent15: rgba(0, 0, 0, 0.15);
+$translucent2: rgba(0, 0, 0, 0.2);
 $translucent3: rgba(0, 0, 0, 0.3);
 $translucent4: rgba(0, 0, 0, 0.4);
 $translucent5: rgba(0, 0, 0, 0.5);
diff --git a/frontend/css/global.scss b/frontend/css/global.scss
index b8a9548008..b495648e5b 100644
--- a/frontend/css/global.scss
+++ b/frontend/css/global.scss
@@ -1048,9 +1048,14 @@ ul {
   .run-btn {
     margin-right: 0.5rem;
   }
+  .fb-button-2 {
+    margin: 0;
+  }
   .settings-menu-button {
-    margin-right: 1rem;
     margin-top: 0.15rem;
+    .bp5-popover-wrapper {
+      margin-left: 0;
+    }
   }
   .fa {
     margin: 0 0.75rem;
diff --git a/frontend/css/sequences.scss b/frontend/css/sequences.scss
index a9fa426617..557446d490 100644
--- a/frontend/css/sequences.scss
+++ b/frontend/css/sequences.scss
@@ -636,11 +636,6 @@
         margin: 0;
       }
     }
-    .run-btn {
-      .pseudo-disabled {
-        background: $placeholder_gray !important;
-      }
-    }
     &.blue,
     &.yellow,
     &.orange,
@@ -691,7 +686,6 @@
     transform: rotate(45deg);
     &.pinned {
       transform: rotate(0deg);
-      color: $dark_gray;
     }
   }
   hr {
diff --git a/frontend/farm_events/__tests__/edit_fe_form_test.tsx b/frontend/farm_events/__tests__/edit_fe_form_test.tsx
index 822f326b6f..50490bab52 100644
--- a/frontend/farm_events/__tests__/edit_fe_form_test.tsx
+++ b/frontend/farm_events/__tests__/edit_fe_form_test.tsx
@@ -186,7 +186,7 @@ describe("<EditFEForm />", () => {
       resources={buildResourceIndex([]).index} />);
     el.update();
     const txt = el.text().replace(/\s+/g, " ");
-    expect(txt).toContain("Save *");
+    expect(txt).toContain("Save");
   });
 
   it("displays success message on save", async () => {
diff --git a/frontend/sensors/index.tsx b/frontend/sensors/index.tsx
index 00b8b31b90..db0509959e 100644
--- a/frontend/sensors/index.tsx
+++ b/frontend/sensors/index.tsx
@@ -66,7 +66,7 @@ export class Sensors extends React.Component<SensorsProps, SensorState> {
     return <Widget className="sensors-widget">
       <WidgetHeader title={t("Sensors")} helpText={ToolTips.SENSORS}>
         <button
-          className="fb-button gray"
+          className="fb-button-2 gray"
           onClick={this.toggle}
           title={editButtonText}
           disabled={!!status && isEditing}>
@@ -78,7 +78,7 @@ export class Sensors extends React.Component<SensorsProps, SensorState> {
           onClick={this.maybeSave} />
         <button
           hidden={!isEditing}
-          className="fb-button green"
+          className="fb-button-2 green"
           type="button"
           title={t("add sensors")}
           onClick={() => this.newSensor()}>
@@ -86,7 +86,7 @@ export class Sensors extends React.Component<SensorsProps, SensorState> {
         </button>
         <button
           hidden={!isEditing || this.props.firmwareHardware == "none"}
-          className="fb-button green"
+          className="fb-button-2 green"
           type="button"
           title={t("add stock sensors")}
           onClick={this.stockSensors}>
diff --git a/frontend/sensors/sensor_readings/sensor_readings.tsx b/frontend/sensors/sensor_readings/sensor_readings.tsx
index 97323929fd..2e142fb0db 100644
--- a/frontend/sensors/sensor_readings/sensor_readings.tsx
+++ b/frontend/sensors/sensor_readings/sensor_readings.tsx
@@ -62,14 +62,14 @@ export class SensorReadings
       <WidgetHeader
         title={t("Sensor History")}
         helpText={ToolTips.SENSOR_HISTORY}>
-        <button className="fb-button gray"
+        <button className="fb-button-2 gray"
           title={t("clear filters")}
           onClick={this.clearFilters}>
           {t("clear filters")}
         </button>
         <Popover position={Position.TOP} usePortal={false}
           isOpen={this.state.addReadingMenuOpen}
-          target={<button className={"fb-button green"}
+          target={<button className={"fb-button-2 green"}
             title={t("add sensor reading")}
             onClick={this.toggleAddReadingMenu}>
             <i className={"fa fa-plus"} />
diff --git a/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx b/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx
index 1f316ae261..e9735db7b7 100644
--- a/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx
+++ b/frontend/sequences/__tests__/sequence_editor_middle_active_test.tsx
@@ -206,7 +206,7 @@ describe("<SequenceEditorMiddleActive />", () => {
     const p = fakeProps();
     p.dispatch = () => Promise.resolve();
     const wrapper = mount(<SequenceEditorMiddleActive {...p} />);
-    await clickButton(wrapper, 0, "Save * ");
+    await clickButton(wrapper, 0, "save");
     expect(save).toHaveBeenCalledWith(expect.stringContaining("Sequence"));
     expect(push).toHaveBeenCalledWith(Path.sequences("fake"));
   });
diff --git a/frontend/sequences/test_button.tsx b/frontend/sequences/test_button.tsx
index 19d40b9731..119465ae92 100644
--- a/frontend/sequences/test_button.tsx
+++ b/frontend/sequences/test_button.tsx
@@ -81,12 +81,12 @@ interface TestProps {
 
 /** Sequence test button. Turns grey when sequence is not saved and synced. */
 const Test = (props: TestProps) => {
-  const normalColor = props.canTest ? "orange" : "pseudo-disabled";
+  const normalColor = `orange ${props.canTest ? "" : "pseudo-disabled"}`;
   const buttonText = props.menuIsOpen
     ? t("Close")
     : t("Run");
   return <button
-    className={`fb-button ${props.menuIsOpen ? "gray" : normalColor}`}
+    className={`fb-button-2 ${props.menuIsOpen ? "gray" : normalColor}`}
     title={buttonText}
     onClick={props.onClick}>
     {buttonText}
@@ -147,6 +147,7 @@ export class TestButton extends React.Component<TestBtnProps, TestBtnState> {
 
   render() {
     const { menuOpen, sequence } = this.props;
+    const hasMenu = isParameterized(this.props.sequence.body);
     const isOpen = menuOpen == sequence.uuid;
     return <Popover className={"fb-button-popover-wrapper run-btn"} isOpen={isOpen}
       popoverClassName="parameter-assignment-menu-popover"
@@ -154,7 +155,7 @@ export class TestButton extends React.Component<TestBtnProps, TestBtnState> {
         canTest={this.canTest}
         onClick={this.onClick}
         menuIsOpen={isOpen} />}
-      content={isParameterized(this.props.sequence.body) ?
+      content={hasMenu ?
         <ParameterAssignmentMenu
           dispatch={this.props.dispatch}
           canTest={this.canTest}
diff --git a/frontend/tools/edit_tool.tsx b/frontend/tools/edit_tool.tsx
index 93904a3985..9f7f69100c 100644
--- a/frontend/tools/edit_tool.tsx
+++ b/frontend/tools/edit_tool.tsx
@@ -135,7 +135,7 @@ export class RawEditTool extends React.Component<EditToolProps, EditToolState> {
         </p>
       </div>
       <button
-        className={`fb-button red no-float ${activeOrMounted
+        className={`fb-button-2 red no-float ${activeOrMounted
           ? "pseudo-disabled"
           : ""}`}
         title={activeOrMounted ? message : t("delete")}
diff --git a/frontend/ui/__tests__/save_button_test.tsx b/frontend/ui/__tests__/save_button_test.tsx
index c1930d2912..2349a39742 100644
--- a/frontend/ui/__tests__/save_button_test.tsx
+++ b/frontend/ui/__tests__/save_button_test.tsx
@@ -6,6 +6,7 @@ import { SpecialStatus } from "farmbot";
 describe("<SaveBtn />", () => {
   const fakeProps = (): SaveBtnProps => ({
     status: SpecialStatus.SAVED,
+    onClick: jest.fn(),
   });
 
   it("returns button", () => {
diff --git a/frontend/ui/save_button.tsx b/frontend/ui/save_button.tsx
index dacf857596..09cebfd15d 100644
--- a/frontend/ui/save_button.tsx
+++ b/frontend/ui/save_button.tsx
@@ -3,43 +3,40 @@ import { SpecialStatus } from "farmbot";
 import { t } from "../i18next_wrapper";
 
 export interface SaveBtnProps {
-  /** Callback */
-  onClick?: (e: React.MouseEvent<{}>) => void;
+  onClick(e: React.MouseEvent): void;
   status: SpecialStatus;
-  dirtyText?: string;
   disabled?: boolean;
-  /** Optional alternative to "SAVING" */
-  savingText?: string;
-  /** Optional alternative to "SAVED" */
-  savedText?: string;
-  /** Optional alternative color to green */
-  color?: string;
-  /** Optional boolean for whether the button should be hidden or shown */
   hidden?: boolean;
 }
 
-/** Animation during saving action */
-const spinner = <span className="btn-spinner" />;
-
 export function SaveBtn(props: SaveBtnProps) {
-  const STATUS_TRANSLATION: Partial<Record<SpecialStatus, string>> = {
+  const CLASS: Record<SpecialStatus, string> = {
     [SpecialStatus.DIRTY]: "is-dirty",
-    [SpecialStatus.SAVING]: "is-saving"
+    [SpecialStatus.SAVING]: "is-saving",
+    [SpecialStatus.SAVED]: "is-saved",
   };
 
-  const CAPTIONS: Partial<Record<SpecialStatus, string>> = {
-    [SpecialStatus.DIRTY]: (props.dirtyText || t("Save") + " *"),
-    [SpecialStatus.SAVING]: props.savingText || t("Saving")
+  const COLOR: Record<SpecialStatus, string> = {
+    [SpecialStatus.DIRTY]: "green",
+    [SpecialStatus.SAVING]: "yellow",
+    [SpecialStatus.SAVED]: "gray",
   };
 
-  const { savedText, onClick, hidden, disabled } = props;
-  const statusClass = STATUS_TRANSLATION[props.status || ""] || "is-saved";
-  const klass = `${props.color || "green"} ${statusClass} save-btn fb-button`;
-  const spinnerEl = (props.status === SpecialStatus.SAVING) ? spinner : "";
+  const CAPTION: Record<SpecialStatus, string> = {
+    [SpecialStatus.DIRTY]: t("Save"),
+    [SpecialStatus.SAVING]: t("Saving"),
+    [SpecialStatus.SAVED]: t("Saved"),
+  };
 
-  return <button onClick={onClick} title={t("save")}
-    disabled={disabled}
-    hidden={!!hidden} className={klass}>
-    {CAPTIONS[props.status] || (savedText || t("Saved") + " ✔")} {spinnerEl}
+  const { status } = props;
+  return <button
+    className={`fb-button-2 save-btn ${COLOR[status]} ${CLASS[status]}`}
+    onClick={props.onClick}
+    title={t("save")}
+    disabled={props.disabled}
+    hidden={!!props.hidden}>
+    {CAPTION[status]}
+    {status === SpecialStatus.SAVING && <i className={"fa fa-spinner fa-pulse"} />}
+    {status === SpecialStatus.SAVED && <i className={"fa fa-check"} />}
   </button>;
 }

From 892b0117a91e084ee7b5540140b9b1f6f10a1de0 Mon Sep 17 00:00:00 2001
From: gabrielburnworth <gabrielburnworth@users.noreply.github.com>
Date: Tue, 24 Oct 2023 16:38:47 -0700
Subject: [PATCH 9/9] fix run button menu open state behavior

---
 .../__test_support__/fake_designer_state.ts   |  6 ++++
 frontend/__tests__/app_test.tsx               |  6 ++--
 frontend/app.tsx                              |  5 ++--
 frontend/controls/__tests__/controls_test.tsx |  5 ++--
 .../__tests__/pinned_sequence_list_test.tsx   |  3 +-
 frontend/controls/controls.tsx                |  5 ++--
 frontend/controls/interfaces.ts               |  7 +++--
 frontend/controls/pinned_sequence_list.tsx    |  2 +-
 frontend/css/global.scss                      |  8 +++--
 frontend/folders/__tests__/component_test.tsx |  7 +++--
 frontend/folders/component.tsx                |  8 +++--
 frontend/folders/interfaces.ts                |  7 +++--
 frontend/nav/__tests__/index_test.tsx         |  6 ++--
 frontend/nav/interfaces.ts                    |  5 ++--
 .../sequences/__tests__/test_button_test.tsx  | 20 ++++++++-----
 frontend/sequences/interfaces.ts              |  7 ++++-
 frontend/sequences/reducer.ts                 |  7 ++---
 .../sequence_editor_middle_active.tsx         |  2 +-
 .../sequences/set_active_sequence_by_name.ts  |  2 +-
 frontend/sequences/test_button.tsx            | 29 ++++++++++++++-----
 20 files changed, 96 insertions(+), 51 deletions(-)

diff --git a/frontend/__test_support__/fake_designer_state.ts b/frontend/__test_support__/fake_designer_state.ts
index b82b5e69ec..b05c304aec 100644
--- a/frontend/__test_support__/fake_designer_state.ts
+++ b/frontend/__test_support__/fake_designer_state.ts
@@ -1,5 +1,6 @@
 import { DesignerState } from "../farm_designer/interfaces";
 import { HelpState } from "../help/reducer";
+import { RunButtonMenuOpen } from "../sequences/interfaces";
 
 export const fakeDesignerState = (): DesignerState => ({
   selectedPoints: undefined,
@@ -56,3 +57,8 @@ export const fakeHelpState = (): HelpState => ({
   currentTour: undefined,
   currentTourStep: undefined,
 });
+
+export const fakeMenuOpenState = (): RunButtonMenuOpen => ({
+  component: undefined,
+  uuid: undefined,
+});
diff --git a/frontend/__tests__/app_test.tsx b/frontend/__tests__/app_test.tsx
index a57271d01c..10cafdeb56 100644
--- a/frontend/__tests__/app_test.tsx
+++ b/frontend/__tests__/app_test.tsx
@@ -29,7 +29,9 @@ import { fakeTimeSettings } from "../__test_support__/fake_time_settings";
 import { error, warning } from "../toast/toast";
 import { fakePings } from "../__test_support__/fake_state/pings";
 import { auth } from "../__test_support__/fake_state/token";
-import { fakeHelpState } from "../__test_support__/fake_designer_state";
+import {
+  fakeHelpState, fakeMenuOpenState,
+} from "../__test_support__/fake_designer_state";
 import { Path } from "../internal_urls";
 import { push } from "../history";
 import { app } from "../__test_support__/fake_state/app";
@@ -65,7 +67,7 @@ const fakeProps = (): AppProps => ({
   feeds: [],
   peripherals: [],
   sequences: [],
-  menuOpen: undefined,
+  menuOpen: fakeMenuOpenState(),
 });
 
 describe("<App />: Loading", () => {
diff --git a/frontend/app.tsx b/frontend/app.tsx
index a402016ee8..f503b7ed09 100644
--- a/frontend/app.tsx
+++ b/frontend/app.tsx
@@ -37,7 +37,7 @@ import { FirmwareConfig } from "farmbot/dist/resources/configs/firmware";
 import { getFirmwareConfig, getFbosConfig } from "./resources/getters";
 import { intersection, isString, uniq } from "lodash";
 import { t } from "./i18next_wrapper";
-import { ResourceIndex, UUID } from "./resources/interfaces";
+import { ResourceIndex } from "./resources/interfaces";
 import { getAllAlerts } from "./messages/state_to_props";
 import { PingDictionary } from "./devices/connectivity/qos";
 import { getEnv } from "./farmware/state_to_props";
@@ -55,6 +55,7 @@ import { AppState } from "./reducer";
 import {
   sourceFbosConfigValue, sourceFwConfigValue,
 } from "./settings/source_config_value";
+import { RunButtonMenuOpen } from "./sequences/interfaces";
 
 export interface AppProps {
   dispatch: Function;
@@ -83,7 +84,7 @@ export interface AppProps {
   feeds: TaggedWebcamFeed[];
   peripherals: TaggedPeripheral[];
   sequences: TaggedSequence[];
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   appState: AppState;
   children?: React.ReactNode;
 }
diff --git a/frontend/controls/__tests__/controls_test.tsx b/frontend/controls/__tests__/controls_test.tsx
index 4c5b985957..a53cbde1cb 100644
--- a/frontend/controls/__tests__/controls_test.tsx
+++ b/frontend/controls/__tests__/controls_test.tsx
@@ -11,6 +11,7 @@ import { DesignerControlsProps } from "../interfaces";
 import { fakeMovementState } from "../../__test_support__/fake_bot_data";
 import { app } from "../../__test_support__/fake_state/app";
 import { Actions } from "../../constants";
+import { fakeMenuOpenState } from "../../__test_support__/fake_designer_state";
 
 describe("<DesignerControls />", () => {
   const fakeProps = (): DesignerControlsProps => ({
@@ -20,7 +21,7 @@ describe("<DesignerControls />", () => {
     peripherals: [],
     sequences: [],
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     firmwareSettings: bot.hardware.mcu_params,
     getConfigValue: jest.fn(),
     sourceFwConfig: () => ({ value: 0, consistent: true }),
@@ -54,7 +55,7 @@ describe("<ControlsPanel />", () => {
     peripherals: [],
     sequences: [],
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     firmwareSettings: bot.hardware.mcu_params,
   });
 
diff --git a/frontend/controls/__tests__/pinned_sequence_list_test.tsx b/frontend/controls/__tests__/pinned_sequence_list_test.tsx
index 2a4ecfb352..1d19020511 100644
--- a/frontend/controls/__tests__/pinned_sequence_list_test.tsx
+++ b/frontend/controls/__tests__/pinned_sequence_list_test.tsx
@@ -4,13 +4,14 @@ import { PinnedSequences } from "../pinned_sequence_list";
 import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
 import { PinnedSequencesProps } from "../interfaces";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
+import { fakeMenuOpenState } from "../../__test_support__/fake_designer_state";
 
 describe("<PinnedSequences />", () => {
   const fakeProps = (): PinnedSequencesProps => ({
     syncStatus: undefined,
     sequences: [],
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     dispatch: jest.fn(),
   });
 
diff --git a/frontend/controls/controls.tsx b/frontend/controls/controls.tsx
index 09d3225cd2..3a2e1b5585 100644
--- a/frontend/controls/controls.tsx
+++ b/frontend/controls/controls.tsx
@@ -18,10 +18,11 @@ import {
   FirmwareHardware, McuParams, TaggedLog, TaggedPeripheral, TaggedSequence,
   TaggedWebcamFeed,
 } from "farmbot";
-import { ResourceIndex, UUID } from "../resources/interfaces";
+import { ResourceIndex } from "../resources/interfaces";
 import { t } from "../i18next_wrapper";
 import { push } from "../history";
 import { Path } from "../internal_urls";
+import { RunButtonMenuOpen } from "../sequences/interfaces";
 
 export class RawDesignerControls
   extends React.Component<DesignerControlsProps, {}> {
@@ -52,7 +53,7 @@ export interface ControlsPanelProps {
   peripherals: TaggedPeripheral[];
   sequences: TaggedSequence[];
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   firmwareSettings: McuParams;
 }
 
diff --git a/frontend/controls/interfaces.ts b/frontend/controls/interfaces.ts
index 2c0237fb84..0601d7b558 100644
--- a/frontend/controls/interfaces.ts
+++ b/frontend/controls/interfaces.ts
@@ -5,10 +5,11 @@ import {
   Vector3, McuParams, Xyz, AxisState, SyncStatus, TaggedSequence,
   FirmwareHardware, TaggedPeripheral, TaggedWebcamFeed, TaggedLog,
 } from "farmbot";
-import { ResourceIndex, UUID } from "../resources/interfaces";
+import { ResourceIndex } from "../resources/interfaces";
 import { GetWebAppConfigValue } from "../config_storage/actions";
 import { MovementState } from "../interfaces";
 import { PinBindingListItems } from "../settings/pin_bindings/interfaces";
+import { RunButtonMenuOpen } from "../sequences/interfaces";
 
 export interface AxisDisplayGroupProps {
   position: BotPosition;
@@ -58,7 +59,7 @@ export interface PinnedSequencesProps {
   syncStatus: SyncStatus | undefined;
   sequences: TaggedSequence[];
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   dispatch: Function;
 }
 
@@ -69,7 +70,7 @@ export interface DesignerControlsProps {
   peripherals: TaggedPeripheral[];
   sequences: TaggedSequence[];
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   firmwareSettings: McuParams;
   getConfigValue: GetWebAppConfigValue;
   sourceFwConfig: SourceFwConfig;
diff --git a/frontend/controls/pinned_sequence_list.tsx b/frontend/controls/pinned_sequence_list.tsx
index 3ad69bf479..3d9f6ba109 100644
--- a/frontend/controls/pinned_sequence_list.tsx
+++ b/frontend/controls/pinned_sequence_list.tsx
@@ -22,7 +22,7 @@ export const PinnedSequences = (props: PinnedSequencesProps) => {
                 </label>
               </Col>
               <Col xs={4}>
-                <TestButton
+                <TestButton component={"pinned"}
                   syncStatus={props.syncStatus}
                   sequence={sequence}
                   resources={props.resources}
diff --git a/frontend/css/global.scss b/frontend/css/global.scss
index b495648e5b..bc82a62f23 100644
--- a/frontend/css/global.scss
+++ b/frontend/css/global.scss
@@ -179,9 +179,11 @@ fieldset {
   margin-bottom: 0;
   .tabs {
     display: flex;
-    position: sticky;
-    top: 0;
+    position: absolute;
+    top: 1rem;
+    left: 0;
     z-index: 3;
+    width: 100%;
     background: $white;
     padding-bottom: 0.5rem;
     :first-child {
@@ -205,7 +207,7 @@ fieldset {
       color: $medium_gray;
       width: 50%;
       text-align: center;
-      margin-top: -1rem;
+      margin-top: 0;
       cursor: pointer;
       &.selected {
         background: $medium_gray;
diff --git a/frontend/folders/__tests__/component_test.tsx b/frontend/folders/__tests__/component_test.tsx
index 6b0d44850c..33e3816b23 100644
--- a/frontend/folders/__tests__/component_test.tsx
+++ b/frontend/folders/__tests__/component_test.tsx
@@ -73,6 +73,7 @@ import { SearchField } from "../../ui/search_field";
 import { Path } from "../../internal_urls";
 import { copySequence } from "../../sequences/actions";
 import { buildResourceIndex } from "../../__test_support__/resource_index_builder";
+import { fakeMenuOpenState } from "../../__test_support__/fake_designer_state";
 
 const fakeRootFolder = (): FolderNodeInitial => ({
   kind: "initial",
@@ -111,7 +112,7 @@ describe("<Folders />", () => {
     sequenceMetas: {},
     getWebAppConfigValue: jest.fn(),
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     syncStatus: undefined,
   });
 
@@ -258,7 +259,7 @@ describe("<FolderListItem />", () => {
     inUse: false,
     getWebAppConfigValue: jest.fn(),
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     syncStatus: undefined,
     searchTerm: undefined,
   });
@@ -523,7 +524,7 @@ describe("<FolderNameEditor />", () => {
     sequenceMetas: {},
     getWebAppConfigValue: jest.fn(),
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     syncStatus: undefined,
     searchTerm: undefined,
     dragging: false,
diff --git a/frontend/folders/component.tsx b/frontend/folders/component.tsx
index 1b0414d617..d01fe00bc9 100644
--- a/frontend/folders/component.tsx
+++ b/frontend/folders/component.tsx
@@ -51,7 +51,7 @@ import {
 } from "../sequences/sequence_editor_middle_active";
 import { Path } from "../internal_urls";
 import { copySequence } from "../sequences/actions";
-import { TestButton } from "../sequences/test_button";
+import { TestButton, isMenuOpen } from "../sequences/test_button";
 import { TaggedSequence } from "farmbot";
 
 export const FolderListItem = (props: FolderItemProps) => {
@@ -63,7 +63,9 @@ export const FolderListItem = (props: FolderItemProps) => {
   const active = Path.lastChunkEquals(urlFriendly(seqName)) ? "active" : "";
   const [settingsOpen, setSettingsOpen] = React.useState(false);
   const [descriptionOpen, setDescriptionOpen] = React.useState(false);
-  const hovered = props.menuOpen == sequence.uuid || settingsOpen || descriptionOpen
+  const menuOpen = isMenuOpen(props.menuOpen,
+    { component: "list", uuid: sequence.uuid });
+  const hovered = menuOpen || settingsOpen || descriptionOpen
     ? "hovered"
     : "";
   const matched = (props.searchTerm &&
@@ -93,7 +95,7 @@ export const FolderListItem = (props: FolderItemProps) => {
         draggable={false}>
         <p>{nameWithSaveIndicator}</p>
       </Link>
-      <TestButton
+      <TestButton component={"list"}
         syncStatus={props.syncStatus}
         sequence={sequence}
         resources={props.resources}
diff --git a/frontend/folders/interfaces.ts b/frontend/folders/interfaces.ts
index 0156a2069a..17d65207dd 100644
--- a/frontend/folders/interfaces.ts
+++ b/frontend/folders/interfaces.ts
@@ -2,6 +2,7 @@ import { Color } from "farmbot/dist/corpus";
 import { SyncStatus, TaggedSequence } from "farmbot";
 import { VariableNameSet, UUID, ResourceIndex } from "../resources/interfaces";
 import { GetWebAppConfigValue } from "../config_storage/actions";
+import { RunButtonMenuOpen } from "../sequences/interfaces";
 
 export interface FolderMeta {
   open: boolean;
@@ -65,7 +66,7 @@ export interface FolderProps {
   sequenceMetas: Record<UUID, VariableNameSet | undefined>;
   getWebAppConfigValue: GetWebAppConfigValue;
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   syncStatus: SyncStatus | undefined;
 }
 
@@ -95,7 +96,7 @@ export interface FolderNodeProps {
   sequenceMetas: Record<UUID, VariableNameSet | undefined>;
   getWebAppConfigValue: GetWebAppConfigValue;
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   syncStatus: SyncStatus | undefined;
   searchTerm: string | undefined;
 }
@@ -127,7 +128,7 @@ export interface FolderItemProps {
   inUse: boolean;
   getWebAppConfigValue: GetWebAppConfigValue;
   resources: ResourceIndex;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   syncStatus: SyncStatus | undefined;
   searchTerm: string | undefined;
 }
diff --git a/frontend/nav/__tests__/index_test.tsx b/frontend/nav/__tests__/index_test.tsx
index 911a76021c..ad42d17f84 100644
--- a/frontend/nav/__tests__/index_test.tsx
+++ b/frontend/nav/__tests__/index_test.tsx
@@ -23,7 +23,9 @@ import { fakePings } from "../../__test_support__/fake_state/pings";
 import { Link } from "../../link";
 import { refresh } from "../../api/crud";
 import { push } from "../../history";
-import { fakeHelpState } from "../../__test_support__/fake_designer_state";
+import {
+  fakeHelpState, fakeMenuOpenState,
+} from "../../__test_support__/fake_designer_state";
 import { Path } from "../../internal_urls";
 import { fakePercentJob } from "../../__test_support__/fake_bot_data";
 import {
@@ -55,7 +57,7 @@ describe("<NavBar />", () => {
     sourceFbosConfig: jest.fn(),
     firmwareConfig: fakeFirmwareConfig().body,
     resources: buildResourceIndex([]).index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     env: {},
     feeds: [],
     peripherals: [],
diff --git a/frontend/nav/interfaces.ts b/frontend/nav/interfaces.ts
index af91b48a35..3d8620d68b 100644
--- a/frontend/nav/interfaces.ts
+++ b/frontend/nav/interfaces.ts
@@ -14,8 +14,9 @@ import { TimeSettings } from "../interfaces";
 import { PingDictionary } from "../devices/connectivity/qos";
 import { HelpState } from "../help/reducer";
 import { AppState } from "../reducer";
-import { ResourceIndex, UUID } from "../resources/interfaces";
+import { ResourceIndex } from "../resources/interfaces";
 import { FirmwareConfig } from "farmbot/dist/resources/configs/firmware";
+import { RunButtonMenuOpen } from "../sequences/interfaces";
 
 export interface NavBarProps {
   logs: TaggedLog[];
@@ -38,7 +39,7 @@ export interface NavBarProps {
   helpState: HelpState;
   telemetry: TaggedTelemetry[];
   appState: AppState;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   env: UserEnv;
   feeds: TaggedWebcamFeed[];
   peripherals: TaggedPeripheral[];
diff --git a/frontend/sequences/__tests__/test_button_test.tsx b/frontend/sequences/__tests__/test_button_test.tsx
index 571139fc96..0faed09cb6 100644
--- a/frontend/sequences/__tests__/test_button_test.tsx
+++ b/frontend/sequences/__tests__/test_button_test.tsx
@@ -27,15 +27,17 @@ import { fakeVariableNameSet } from "../../__test_support__/fake_variables";
 import { SequenceMeta } from "../../resources/sequence_meta";
 import { clickButton } from "../../__test_support__/helpers";
 import { fakeSequence } from "../../__test_support__/fake_state/resources";
+import { fakeMenuOpenState } from "../../__test_support__/fake_designer_state";
 
-describe("<TestButton/>", () => {
+describe("<TestButton />", () => {
 
   const fakeProps = (): TestBtnProps => ({
     sequence: fakeSequence(),
     syncStatus: "synced",
     resources: buildResourceIndex().index,
-    menuOpen: undefined,
+    menuOpen: fakeMenuOpenState(),
     dispatch: jest.fn(),
+    component: "list",
   });
 
   it("doesn't fire if unsaved", () => {
@@ -88,13 +90,16 @@ describe("<TestButton/>", () => {
     expect(btn.hasClass("orange")).toBeTruthy();
     expect(warning).not.toHaveBeenCalled();
     expect(mockDevice.execSequence).not.toHaveBeenCalled();
-    expect(props.dispatch).toHaveBeenCalledWith(setMenuOpen(props.sequence.uuid));
+    expect(props.dispatch).toHaveBeenCalledWith(setMenuOpen({
+      component: "list", uuid: props.sequence.uuid,
+    }));
   });
 
   it("has open parameter assignment menu", () => {
     const props = fakeProps();
     mockHasParameters = true;
-    props.menuOpen = props.sequence.uuid;
+    props.menuOpen.component = "list";
+    props.menuOpen.uuid = props.sequence.uuid;
     const result = mount(<TestButton {...props} />);
     const btn = result.find("button").first();
     expect(btn.hasClass("gray")).toBeTruthy();
@@ -104,7 +109,8 @@ describe("<TestButton/>", () => {
 
   it("closes parameter assignment menu", () => {
     const p = fakeProps();
-    p.menuOpen = p.sequence.uuid;
+    p.menuOpen.component = "list";
+    p.menuOpen.uuid = p.sequence.uuid;
     p.syncStatus = "synced";
     p.sequence.specialStatus = SpecialStatus.SAVED;
     p.sequence.body.id = 1;
@@ -115,7 +121,7 @@ describe("<TestButton/>", () => {
     expect(btn.hasClass("gray")).toBeTruthy();
     expect(warning).not.toHaveBeenCalled();
     expect(mockDevice.execSequence).not.toHaveBeenCalled();
-    expect(p.dispatch).toHaveBeenCalledWith(setMenuOpen(undefined));
+    expect(p.dispatch).toHaveBeenCalledWith(setMenuOpen(fakeMenuOpenState()));
   });
 
   it("edits body variables", () => {
@@ -185,6 +191,6 @@ describe("<TestButton/>", () => {
     const props = fakeProps();
     const wrapper = mount(<TestButton {...props} />);
     wrapper.unmount();
-    expect(props.dispatch).toHaveBeenCalledWith(setMenuOpen(undefined));
+    expect(props.dispatch).toHaveBeenCalledWith(setMenuOpen(fakeMenuOpenState()));
   });
 });
diff --git a/frontend/sequences/interfaces.ts b/frontend/sequences/interfaces.ts
index cfb23341e1..6d65176efc 100644
--- a/frontend/sequences/interfaces.ts
+++ b/frontend/sequences/interfaces.ts
@@ -139,9 +139,14 @@ export const MESSAGE_TYPES = Object.keys(MessageType);
 export const isMessageType = (x: any): x is ALLOWED_MESSAGE_TYPES =>
   MESSAGE_TYPES.includes(x as string);
 
+export interface RunButtonMenuOpen {
+  component: "list" | "editor" | "pinned" | undefined;
+  uuid: UUID | undefined;
+}
+
 export interface SequenceReducerState {
   current: string | undefined;
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
   stepIndex: number | undefined;
 }
 
diff --git a/frontend/sequences/reducer.ts b/frontend/sequences/reducer.ts
index ad8ce476b8..b4ee40e2d9 100644
--- a/frontend/sequences/reducer.ts
+++ b/frontend/sequences/reducer.ts
@@ -1,12 +1,11 @@
-import { SequenceReducerState } from "./interfaces";
+import { RunButtonMenuOpen, SequenceReducerState } from "./interfaces";
 import { generateReducer } from "../redux/generate_reducer";
 import { TaggedResource } from "farmbot";
 import { Actions } from "../constants";
-import { UUID } from "../resources/interfaces";
 
 export const initialState: SequenceReducerState = {
   current: undefined,
-  menuOpen: undefined,
+  menuOpen: { component: undefined, uuid: undefined },
   stepIndex: undefined,
 };
 
@@ -23,7 +22,7 @@ export const sequenceReducer = generateReducer<SequenceReducerState>(initialStat
     s.current = payload;
     return s;
   })
-  .add<UUID | undefined>(Actions.SET_SEQUENCE_POPUP_STATE, (s, { payload }) => {
+  .add<RunButtonMenuOpen>(Actions.SET_SEQUENCE_POPUP_STATE, (s, { payload }) => {
     s.menuOpen = payload;
     return s;
   })
diff --git a/frontend/sequences/sequence_editor_middle_active.tsx b/frontend/sequences/sequence_editor_middle_active.tsx
index 94643f33a7..1d7f13f1f0 100644
--- a/frontend/sequences/sequence_editor_middle_active.tsx
+++ b/frontend/sequences/sequence_editor_middle_active.tsx
@@ -275,7 +275,7 @@ export const SequenceBtnGroup = ({
     <SaveBtn status={sequence.specialStatus}
       onClick={() => dispatch(save(sequence.uuid)).then(() =>
         push(Path.sequences(urlFriendly(sequence.body.name))))} />
-    <TestButton
+    <TestButton component={"editor"}
       key={JSON.stringify(sequence)}
       syncStatus={syncStatus}
       sequence={sequence}
diff --git a/frontend/sequences/set_active_sequence_by_name.ts b/frontend/sequences/set_active_sequence_by_name.ts
index 0f771745fe..f87be74f31 100644
--- a/frontend/sequences/set_active_sequence_by_name.ts
+++ b/frontend/sequences/set_active_sequence_by_name.ts
@@ -9,7 +9,7 @@ const setSequence = (uuid: string) => store.dispatch(selectSequence(uuid));
 
 export function setActiveSequenceByName() {
   const chunk = Path.getLastChunk();
-  store.dispatch(setMenuOpen(undefined));
+  store.dispatch(setMenuOpen({ component: undefined, uuid: undefined }));
   if (!chunk || chunk == "sequences") {
     return;
   }
diff --git a/frontend/sequences/test_button.tsx b/frontend/sequences/test_button.tsx
index 119465ae92..ea6f6fa050 100644
--- a/frontend/sequences/test_button.tsx
+++ b/frontend/sequences/test_button.tsx
@@ -13,13 +13,23 @@ import { t } from "../i18next_wrapper";
 import { warning } from "../toast/toast";
 import { forceOnline } from "../devices/must_be_online";
 import { Popover } from "../ui";
+import { RunButtonMenuOpen } from "./interfaces";
+
+export const isMenuOpen = (
+  state: RunButtonMenuOpen,
+  current: RunButtonMenuOpen,
+): boolean => (state.component == current.component) && (state.uuid == current.uuid);
+
+const closedMenu = (): RunButtonMenuOpen => ({
+  component: undefined, uuid: undefined,
+});
 
 /** Can't test without saving and syncing sequence. */
 const saveAndSyncWarning = () =>
   warning(t("Save sequence and sync device before running."));
 
 /** Open or close the sequence test parameter assignment menu. */
-export const setMenuOpen = (payload: UUID | undefined) => ({
+export const setMenuOpen = (payload: RunButtonMenuOpen) => ({
   type: Actions.SET_SEQUENCE_POPUP_STATE,
   payload
 });
@@ -43,12 +53,12 @@ class ParameterAssignmentMenu
   extends React.Component<ParameterAssignmentMenuProps> {
 
   componentWillUnmount() {
-    this.props.dispatch(setMenuOpen(undefined));
+    this.props.dispatch(setMenuOpen(closedMenu()));
   }
 
   /** Click actions for test button inside parameter assignment menu. */
   onClick = () => {
-    this.props.dispatch(setMenuOpen(undefined));
+    this.props.dispatch(setMenuOpen(closedMenu()));
     this.props.canTest
       ? execSequence(this.props.sequence.body.id, this.props.bodyVariables)
       : saveAndSyncWarning();
@@ -98,7 +108,8 @@ export interface TestBtnProps {
   sequence: TaggedSequence;
   resources: ResourceIndex;
   /** Parameter assignment menu open? */
-  menuOpen: UUID | undefined;
+  menuOpen: RunButtonMenuOpen;
+  component: RunButtonMenuOpen["component"];
   dispatch: Function;
 }
 
@@ -131,14 +142,16 @@ export class TestButton extends React.Component<TestBtnProps, TestBtnState> {
 
   /** Click actions for test button. */
   onClick = () => {
-    const { dispatch, menuOpen, sequence } = this.props;
+    const { dispatch, menuOpen, sequence, component } = this.props;
     const sequenceBody = sequence.body;
     const bodyVariables =
       mergeParameterApplications(this.varData, this.state.bodyVariables);
     this.setState({ bodyVariables });
     /** Open the variable menu if the sequence has parameter declarations. */
     isParameterized(sequenceBody) && dispatch(setMenuOpen(
-      menuOpen == sequence.uuid ? undefined : sequence.uuid));
+      isMenuOpen(menuOpen, { component, uuid: sequence.uuid })
+        ? closedMenu()
+        : { component, uuid: sequence.uuid }));
     this.canTest
       /** Execute if sequence is synced, saved, and doesn't use parameters. */
       ? !isParameterized(sequenceBody) && execSequence(sequenceBody.id)
@@ -146,9 +159,9 @@ export class TestButton extends React.Component<TestBtnProps, TestBtnState> {
   };
 
   render() {
-    const { menuOpen, sequence } = this.props;
+    const { menuOpen, sequence, component } = this.props;
     const hasMenu = isParameterized(this.props.sequence.body);
-    const isOpen = menuOpen == sequence.uuid;
+    const isOpen = isMenuOpen(menuOpen, { component, uuid: sequence.uuid });
     return <Popover className={"fb-button-popover-wrapper run-btn"} isOpen={isOpen}
       popoverClassName="parameter-assignment-menu-popover"
       target={<Test