Fix widget handling and make them toggle, improve dropdown component

CHANGELOG.md

@@ -10,7 +10,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 - Floating point errors no longer cause some properties to be detected as changed
 - Argon UI quality no longer drops with extreme widget sizes
-- Minor UI performance improvements
+- General UI visual and performance improvements
+- Settings, Help and Project Details widgets now open properly after begin closed with `x` button
+
+### Changed
+
+- `Sync Properties` setting is now `Syncback Properties` and doesn't require `Two-Way Sync`
+- Settings, Help and Project Details buttons now toggle their widgets
 
 ## [2.0.10] - 2024-07-19
 

src/App/.src.luau

@@ -65,8 +65,6 @@ function App.new()
 	local self = setmetatable({}, App)
 
 	self.core = nil
-	self.helpWidget = nil
-	self.settingsWidget = nil
 	self.lastUpdate = os.clock()
 	self.onCanceled = Signal.new()
 
@@ -75,10 +73,14 @@ function App.new()
 
 	self.lastSync = Value(os.time())
 	self.lastSyncKind = Value("Unknown")
+
 	self.rootSize = Value(Vector2.new(300, 200))
 	self.icon = Value(Assets.Argon.Logo)
 	self.pages = Value({})
 
+	self.settingsWidget = Value(nil)
+	self.helpWidget = Value(nil)
+
 	local isOpen = Value(false)
 
 	local toolbarButton = ToolbarButton {
@@ -257,29 +259,39 @@ function App:home()
 end
 
 function App:settings()
-	if self.settingsWidget then
-		self.settingsWidget:Destroy()
+	local widget = peek(self.settingsWidget)
+
+	if widget then
+		widget:Destroy()
+		widget = nil
+	else
+		widget = Settings {
+			Closed = function()
+				peek(self.settingsWidget):Destroy()
+				self.settingsWidget:set(nil)
+			end,
+		}
 	end
 
-	self.settingsWidget = Settings {
-		Closed = function()
-			self.settingsWidget:Destroy()
-			self.settingsWidget = nil
-		end,
-	}
+	self.settingsWidget:set(widget)
 end
 
 function App:help()
-	if self.helpWidget then
-		self.helpWidget:Destroy()
+	local widget = peek(self.helpWidget)
+
+	if widget then
+		widget:Destroy()
+		widget = nil
+	else
+		widget = Help {
+			Closed = function()
+				peek(self.helpWidget):Destroy()
+				self.helpWidget:set(nil)
+			end,
+		}
 	end
 
-	self.helpWidget = Help {
-		Closed = function()
-			self.helpWidget:Destroy()
-			self.helpWidget = nil
-		end,
-	}
+	self.helpWidget:set(widget)
 end
 
 function App:connect()
@@ -362,7 +374,10 @@ function App:connect()
 		project:set(projectDetails)
 
 		self.lastSync:set(os.time())
-		self.lastSyncKind:set(Config:get("InitialSyncPriority"))
+
+		if not Config:get("SkipInitialSync") then
+			self.lastSyncKind:set(Config:get("InitialSyncPriority"))
+		end
 
 		self:setPage(Connected {
 			App = self,

src/App/Components/Dropdown.luau

@@ -27,8 +27,10 @@ local Value = Fusion.Value
 local Spring = Fusion.Spring
 local Hydrate = Fusion.Hydrate
 local OnEvent = Fusion.OnEvent
+local Cleanup = Fusion.Cleanup
 local Computed = Fusion.Computed
 local Children = Fusion.Children
+local Observer = Fusion.Observer
 local ForValues = Fusion.ForValues
 local peek = Fusion.peek
 
@@ -55,6 +57,7 @@ local function Button(props: ButtonProps): TextButton
 		Hovered = isHovered,
 		Pressed = isPressed,
 	})
+	local lastState = peek(state)
 
 	local color = animate(
 		Computed(function(use)
@@ -63,6 +66,25 @@ local function Button(props: ButtonProps): TextButton
 		state
 	)
 
+	-- Hide very minor hover flicker of the first button when the dropdown is expanded
+	local disconnect = Observer(state):onChange(function()
+		if props.IsFirst and not peek(props.IsFirst) then
+			local state = peek(state)
+
+			if state == Enum.GuiState.Idle and lastState == Enum.GuiState.Press then
+				task.defer(function()
+					if peek(props.IsFirst) then
+						color:setPosition(
+							peek(props.IsSelected) and peek(Theme.Colors.Brand) or peek(Theme.Colors.Background)
+						)
+					end
+				end)
+			end
+
+			lastState = state
+		end
+	end)
+
 	return Hydrate(New "TextButton" {
 		Size = UDim2.new(1, 0, 0, Theme.CompSizeY.Medium),
 		FontFace = Theme.Fonts.Regular,
@@ -97,6 +119,7 @@ local function Button(props: ButtonProps): TextButton
 			props.Activated()
 		end,
 
+		[Cleanup] = disconnect,
 		[Children] = GlobalUtil.join(
 			{
 				Padding {

src/App/Components/IconButton.luau

@@ -25,13 +25,15 @@ local COMPONENT_ONLY_PROPS = {
 	"Activated",
 	"Solid",
 	"Icon",
+	"BackgroundActive",
 	"Blending",
 }
 
 type Props = {
 	Activated: (() -> ())?,
 	Solid: Fusion.CanBeState<boolean>?,
 	Icon: Fusion.CanBeState<string>?,
+	BackgroundActive: Fusion.Computed<boolean>?,
 	Blending: boolean?,
 	[any]: any,
 }
@@ -47,7 +49,11 @@ return function(props: Props): TextButton
 
 	local color = animate(
 		Computed(function(use)
-			return use(props.Solid) and use(Theme.Colors.Brand) or use(Theme.Colors.Background)
+			return if use(props.Solid)
+				then use(Theme.Colors.Brand)
+				else use(props.BackgroundActive) and use(Theme.Colors.ActiveBackground) or use(
+					Theme.Colors.Background
+				)
 		end),
 		state
 	)

src/App/Components/Plugin/Widget.luau

@@ -26,7 +26,6 @@ local COMPONENT_ONLY_PROPS = {
 
 type WidgetProps = {
 	Id: string?,
-	Name: Fusion.CanBeState<string>,
 	InitialDockTo: Enum.InitialDockState?,
 	InitialEnabled: boolean?,
 	OverrideEnabled: boolean?,

src/App/Pages/Connected.luau

@@ -33,7 +33,7 @@ type Props = {
 
 return function(props: Props): { Instance }
 	local syncedText = Value("just now")
-	local widget = nil
+	local projectDetailsWidget = Value(nil)
 
 	local function updateSyncedText()
 		return task.spawn(function()
@@ -133,29 +133,42 @@ return function(props: Props): { Instance }
 				},
 				IconButton {
 					Icon = Assets.Icons.Settings,
-					LayoutOrder = 1,
+					BackgroundActive = Computed(function(use)
+						return use(props.App.settingsWidget) ~= nil
+					end),
 					Activated = function()
 						props.App:settings()
 					end,
+					LayoutOrder = 1,
 				},
 				IconButton {
 					Icon = Assets.Icons.Info,
+					BackgroundActive = Computed(function(use)
+						return use(projectDetailsWidget) ~= nil
+					end),
 					Activated = function()
+						local widget = peek(projectDetailsWidget)
+
 						if widget then
 							widget:Destroy()
+							widget = nil
+						else
+							widget = ProjectDetails {
+								App = props.App,
+								Project = props.Project,
+
+								Closed = function()
+									peek(projectDetailsWidget):Destroy()
+									projectDetailsWidget:set(nil)
+								end,
+							}
 						end
 
-						widget = ProjectDetails {
-							App = props.App,
-							Project = props.Project,
-
-							Closed = function()
-								widget:Destroy()
-								widget = nil
-							end,
-						}
+						projectDetailsWidget:set(widget)
 					end,
 					[Cleanup] = function()
+						local widget = peek(projectDetailsWidget)
+
 						if widget then
 							widget:Destroy()
 							widget = nil

src/App/Pages/NotConnected.luau

@@ -21,6 +21,7 @@ local Text = require(Components.Text)
 local Box = require(Components.Box)
 
 local Value = Fusion.Value
+local Computed = Fusion.Computed
 local Children = Fusion.Children
 
 type Props = {
@@ -102,13 +103,19 @@ return function(props: Props): { Instance }
 				},
 				IconButton {
 					Icon = Assets.Icons.Settings,
-					LayoutOrder = 1,
+					BackgroundActive = Computed(function(use)
+						return use(props.App.settingsWidget) ~= nil
+					end),
 					Activated = function()
 						props.App:settings()
 					end,
+					LayoutOrder = 1,
 				},
 				IconButton {
 					Icon = Assets.Icons.Help,
+					BackgroundActive = Computed(function(use)
+						return use(props.App.helpWidget) ~= nil
+					end),
 					Activated = function()
 						props.App:help()
 					end,

src/App/Theme.luau

@@ -16,6 +16,7 @@ local function getColors(isDark: boolean): { [string]: { Color3 | { [string]: Co
 		Brand = Color3.fromRGB(120, 110, 220),
 
 		Background = background,
+		ActiveBackground = Studio.Theme:GetColor(Enum.StudioStyleGuideColor.Titlebar),
 		Border = border ~= background and border
 			or Studio.Theme:GetColor(Enum.StudioStyleGuideColor.ScrollBarBackground),
 
@@ -41,6 +42,7 @@ local Theme = {
 		Brand = init(),
 
 		Background = init(),
+		ActiveBackground = init(),
 		Border = init(),
 
 		Text = init(),

src/App/Widgets/Help.luau

@@ -80,6 +80,7 @@ type Props = {
 return function(props: Props): DockWidgetPluginGui
 	return Widget {
 		Name = "Argon - Help",
+		OverrideEnabled = true,
 		MinimumSize = Vector2.new(400, 350),
 		Closed = props.Closed,
 

src/App/Widgets/ProjectDetails.luau

@@ -56,6 +56,7 @@ type Props = {
 return function(props: Props): DockWidgetPluginGui
 	return Widget {
 		Name = "Argon - Project Details",
+		OverrideEnabled = true,
 		MinimumSize = Vector2.new(410, 300),
 		Closed = props.Closed,