Text box improvements

src/App/Components/Box.luau

@@ -37,6 +37,7 @@ return function(props: Props): Frame
 
 		[Children] = {
 			Border {
+				Color = props.BorderColor,
 				Transparency = props.BorderTransparency,
 			},
 		},

src/App/Components/Input.luau

@@ -19,6 +19,7 @@ local Children = Fusion.Children
 local peek = Fusion.peek
 
 local COMPONENT_ONLY_PROPS = {
+	"Started",
 	"Changed",
 	"Finished",
 	"Font",
@@ -28,6 +29,7 @@ local COMPONENT_ONLY_PROPS = {
 }
 
 type Props = {
+	Started: (() -> ())?,
 	Changed: ((text: string) -> ())?,
 	Finished: ((text: string) -> ())?,
 	AutomaticSize: Enum.AutomaticSize?,
@@ -61,6 +63,12 @@ return function(props: Props): TextBox
 			end
 		end,
 
+		[OnEvent "Focused"] = function()
+			if props.Started then
+				props.Started()
+			end
+		end,
+
 		[OnEvent "FocusLost"] = function()
 			if props.Finished then
 				props.Finished(peek(text))

src/App/Pages/NotConnected.luau

@@ -24,6 +24,7 @@ local New = Fusion.New
 local Value = Fusion.Value
 local Computed = Fusion.Computed
 local Children = Fusion.Children
+local Spring = Fusion.Spring
 
 type Props = {
 	App: { [string]: any },
@@ -35,11 +36,25 @@ return function(props: Props): { Instance }
 	local hostInput = Value(props.Host ~= Config:getDefault("Host") and props.Host or "")
 	local portInput = Value(props.Port ~= Config:getDefault("Port") and props.Port or "")
 
+	local hostFocused = Value(false)
+	local portFocused = Value(false)
+
 	return {
 		List {},
 		Box {
 			Size = UDim2.new(1, 0, 0, Theme.CompSizeY.Large),
 			AutomaticSize = Enum.AutomaticSize.None,
+			BorderColor = Spring(
+				Computed(function(use)
+					if use(hostFocused) or use(portFocused) then
+						return use(Theme.Colors.Brand)
+					else
+						return use(Theme.Colors.Border)
+					end
+				end),
+				Theme.SpringFastSpeed,
+				Theme.SpringDamping
+			),
 
 			[Children] = {
 				List {
@@ -53,15 +68,25 @@ return function(props: Props): { Instance }
 					PlaceholderText = "localhost",
 					Text = hostInput,
 
+					Started = function()
+						hostFocused:set(true)
+					end,
+
 					Changed = function(text)
 						hostInput:set(filterHost(text))
 					end,
 
 					Finished = function(host)
+						hostFocused:set(false)
 						props.App:setHost(host ~= "" and host or Config:getDefault("Host"))
 					end,
 
 					[Children] = {
+						-- The cursor will not be visible when it is all the way at the left because of ClipsDescendants,
+						-- so this padding makes sure there's always 1 pixel of space from the left.
+						Padding {
+							Left = 1,
+						},
 						New "UIFlexItem" {
 							FlexMode = Enum.UIFlexMode.Fill,
 						},
@@ -84,11 +109,16 @@ return function(props: Props): { Instance }
 					PlaceholderText = "8000",
 					Text = portInput,
 
+					Started = function()
+						portFocused:set(true)
+					end,
+
 					Changed = function(text)
 						portInput:set(filterPort(text))
 					end,
 
 					Finished = function(port)
+						portFocused:set(false)
 						props.App:setPort(port ~= "" and tonumber(port) or Config:getDefault("Port"))
 					end,
 				},

src/App/Theme.luau

@@ -90,6 +90,7 @@ local Theme = {
 	},
 
 	SpringSpeed = 30,
+	SpringFastSpeed = 60,
 	SpringDamping = 1.5,
 
 	IsDark = Value(true),

src/App/Widgets/Settings.luau

@@ -39,6 +39,7 @@ local Children = Fusion.Children
 local OnChange = Fusion.OnChange
 local ForValues = Fusion.ForValues
 local ForPairs = Fusion.ForPairs
+local Spring = Fusion.Spring
 local peek = Fusion.peek
 
 local SETTINGS_DATA: { { Title: string, Settings: { SettingData } } } = {
@@ -188,22 +189,39 @@ local function Entry(props: EntryProps): Frame
 			props.Binding:set("")
 		end
 
+		local focused = Value(false)
+
 		valueComponent = Box {
 			Size = props.Data.CustomWidth
 					and math.floor(props.Data.CustomWidth) == props.Data.CustomWidth
 					and UDim2.fromOffset(props.Data.CustomWidth, Theme.CompSizeY.Medium)
 				or UDim2.new(props.Data.CustomWidth or 0.2, 0, 0, Theme.CompSizeY.Medium),
+			BorderColor = Spring(
+				Computed(function(use)
+					if use(focused) then
+						return use(Theme.Colors.Brand)
+					else
+						return use(Theme.Colors.Border)
+					end
+				end),
+				Theme.SpringFastSpeed,
+				Theme.SpringDamping
+			),
 			[Children] = {
 				Input {
 					Size = UDim2.fromScale(1, 1),
 					Text = props.Binding,
 					PlaceholderText = Config:getDefault(setting),
 
+					Started = function()
+						focused:set(true)
+					end,
 					Changed = function(text)
 						userInput = true
 						props.Binding:set(props.Data.Filter(text))
 					end,
 					Finished = function(text)
+						focused:set(false)
 						text = text ~= "" and text or Config:getDefault(setting)
 
 						props.Binding:set(text)