Add changing toolbar icon to indicate state (#538)

* Add changing toolbar icon

* Return to default icon after closing error

* Update changelog

* Add assets

* Improved link icon

* Upload new icons

Co-authored-by: Lucien Greathouse <me@lpghatguy.com>

plugin/src/App/Components/Studio/StudioToggleButton.lua

@@ -44,6 +44,10 @@ function StudioToggleButton:didUpdate(lastProps)
 		self.button.Enabled = self.props.enabled
 	end
 
+	if self.props.icon ~= lastProps.icon then
+		self.button.Icon = self.props.icon
+	end
+
 	if self.props.active ~= lastProps.active then
 		self.button:SetActive(self.props.active)
 	end
@@ -63,4 +67,4 @@ local function StudioToggleButtonWrapper(props)
 	})
 end
 
-return StudioToggleButtonWrapper
+return StudioToggleButtonWrapper

plugin/src/App/init.lua

@@ -40,6 +40,7 @@ function App:init()
 	self:setState({
 		appStatus = AppStatus.NotConnected,
 		guiEnabled = false,
+		toolbarIcon = Assets.Images.PluginButton,
 	})
 end
 
@@ -57,6 +58,7 @@ function App:startSession(host, port, sessionOptions)
 		if status == ServeSession.Status.Connecting then
 			self:setState({
 				appStatus = AppStatus.Connecting,
+				toolbarIcon = Assets.Images.PluginButton,
 			})
 		elseif status == ServeSession.Status.Connected then
 			local address = ("%s:%s"):format(host, port)
@@ -64,6 +66,7 @@ function App:startSession(host, port, sessionOptions)
 				appStatus = AppStatus.Connected,
 				projectName = details,
 				address = address,
+				toolbarIcon = Assets.Images.PluginButtonConnected,
 			})
 		elseif status == ServeSession.Status.Disconnected then
 			self.serveSession = nil
@@ -76,10 +79,12 @@ function App:startSession(host, port, sessionOptions)
 				self:setState({
 					appStatus = AppStatus.Error,
 					errorMessage = tostring(details),
+					toolbarIcon = Assets.Images.PluginButtonWarning,
 				})
 			else
 				self:setState({
 					appStatus = AppStatus.NotConnected,
+					toolbarIcon = Assets.Images.PluginButton,
 				})
 			end
 		end
@@ -186,6 +191,7 @@ function App:render()
 						onClose = function()
 							self:setState({
 								appStatus = AppStatus.NotConnected,
+								toolbarIcon = Assets.Images.PluginButton,
 							})
 						end,
 					}),
@@ -206,7 +212,7 @@ function App:render()
 					button = e(StudioToggleButton, {
 						name = "Rojo",
 						tooltip = "Show or hide the Rojo panel",
-						icon = Assets.Images.PluginButton,
+						icon = self.state.toolbarIcon,
 						active = self.state.guiEnabled,
 						enabled = true,
 						onClick = function()
@@ -223,4 +229,4 @@ function App:render()
 	})
 end
 
-return App
+return App

plugin/src/Assets.lua

@@ -18,6 +18,8 @@ local Assets = {
 	Images = {
 		Logo = "rbxassetid://5990772764",
 		PluginButton = "rbxassetid://3405341609",
+		PluginButtonConnected = "rbxassetid://9529783993",
+		PluginButtonWarning = "rbxassetid://9529784530",
 		Icons = {
 			Close = "rbxassetid://6012985953",
 			Back = "rbxassetid://6017213752",