New UI

.gitmodules

@@ -9,4 +9,7 @@
 	url = https://github.com/LPGhatguy/roblox-lua-promise.git
 [submodule "plugin/modules/t"]
 	path = plugin/modules/t
-	url = https://github.com/osyrisrblx/t.git
+	url = https://github.com/osyrisrblx/t.git
+[submodule "plugin/modules/flipper"]
+	path = plugin/modules/flipper
+	url = https://github.com/Reselim/Flipper

build.rs

@@ -62,6 +62,9 @@ fn main() -> Result<(), anyhow::Error> {
             "t" => VfsSnapshot::dir(hashmap! {
                 "lib" => snapshot_from_fs_path(&plugin_modules.join("t").join("lib"))?
             }),
+            "flipper" => VfsSnapshot::dir(hashmap! {
+                "src" => snapshot_from_fs_path(&plugin_modules.join("flipper").join("src"))?
+            }),
         }),
     });
 

foreman.toml

@@ -1,3 +1,3 @@
 [tools]
-rojo = { source = "rojo-rbx/rojo", version = "6.0.0-rc.1" }
+rojo = { source = "rojo-rbx/rojo", version = "6.0.0-rc.3" }
 run-in-roblox = { source = "rojo-rbx/run-in-roblox", version = "0.3.0" }

plugin/default.project.json

@@ -25,6 +25,9 @@
     },
     "t": {
       "$path": "modules/t/lib"
+    },
+    "Flipper": {
+      "$path": "modules/flipper/src"
     }
   }
 }

plugin/src/App/Components/BorderedContainer.lua

@@ -0,0 +1,41 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Theme = require(Plugin.App.Theme)
+local Assets = require(Plugin.Assets)
+
+local SlicedImage = require(script.Parent.SlicedImage)
+
+local e = Roact.createElement
+
+local function BorderedContainer(props)
+	return Theme.with(function(theme)
+		return e(SlicedImage, {
+			slice = Assets.Slices.RoundedBackground,
+			color = theme.BorderedContainer.BackgroundColor,
+			transparency = props.transparency,
+
+			size = props.size,
+			position = props.position,
+			anchorPoint = props.anchorPoint,
+			layoutOrder = props.layoutOrder,
+		}, {
+			Content = e("Frame", {
+				Size = UDim2.new(1, 0, 1, 0),
+				BackgroundTransparency = 1,
+			}, props[Roact.Children]),
+
+			Border = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBorder,
+				color = theme.BorderedContainer.BorderColor,
+				transparency = props.transparency,
+
+				size = UDim2.new(1, 0, 1, 0),
+			}),
+		})
+	end)
+end
+
+return BorderedContainer

plugin/src/App/Components/Checkbox.lua

@@ -0,0 +1,96 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+local Flipper = require(Rojo.Flipper)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local SlicedImage = require(script.Parent.SlicedImage)
+
+local e = Roact.createElement
+
+local Checkbox = Roact.Component:extend("Checkbox")
+
+function Checkbox:init()
+	self.motor = Flipper.SingleMotor.new(self.props.active and 1 or 0)
+	self.binding = bindingUtil.fromMotor(self.motor)
+end
+
+function Checkbox:didUpdate(lastProps)
+	if lastProps.active ~= self.props.active then
+		self.motor:setGoal(
+			Flipper.Spring.new(self.props.active and 1 or 0, {
+				frequency = 6,
+				dampingRatio = 1.1,
+			})
+		)
+	end
+end
+
+function Checkbox:render()
+	return Theme.with(function(theme)
+		theme = theme.Checkbox
+
+		local activeTransparency = Roact.joinBindings({
+			self.binding:map(function(value)
+				return 1 - value
+			end),
+			self.props.transparency,
+		}):map(bindingUtil.blendAlpha)
+
+		return e("ImageButton", {
+			Size = UDim2.new(0, 28, 0, 28),
+			Position = self.props.position,
+			AnchorPoint = self.props.anchorPoint,
+			LayoutOrder = self.props.layoutOrder,
+			ZIndex = self.props.zIndex,
+			BackgroundTransparency = 1,
+
+			[Roact.Event.Activated] = self.props.onClick,
+		}, {
+			Active = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBackground,
+				color = theme.Active.BackgroundColor,
+				transparency = activeTransparency,
+				size = UDim2.new(1, 0, 1, 0),
+				zIndex = 2,
+			}, {
+				Icon = e("ImageLabel", {
+					Image = Assets.Images.Checkbox.Active,
+					ImageColor3 = theme.Active.IconColor,
+					ImageTransparency = activeTransparency,
+
+					Size = UDim2.new(0, 16, 0, 16),
+					Position = UDim2.new(0.5, 0, 0.5, 0),
+					AnchorPoint = Vector2.new(0.5, 0.5),
+
+					BackgroundTransparency = 1,
+				}),
+			}),
+
+			Inactive = e(SlicedImage, {
+				slice = Assets.Slices.RoundedBorder,
+				color = theme.Inactive.BorderColor,
+				transparency = self.props.transparency,
+				size = UDim2.new(1, 0, 1, 0),
+			}, {
+				Icon = e("ImageLabel", {
+					Image = Assets.Images.Checkbox.Inactive,
+					ImageColor3 = theme.Inactive.IconColor,
+					ImageTransparency = self.props.transparency,
+
+					Size = UDim2.new(0, 16, 0, 16),
+					Position = UDim2.new(0.5, 0, 0.5, 0),
+					AnchorPoint = Vector2.new(0.5, 0.5),
+
+					BackgroundTransparency = 1,
+				}),
+			}),
+		})
+	end)
+end
+
+return Checkbox

plugin/src/App/Components/Header.lua

@@ -0,0 +1,55 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Theme = require(Plugin.App.Theme)
+local Assets = require(Plugin.Assets)
+local Config = require(Plugin.Config)
+local Version = require(Plugin.Version)
+
+local e = Roact.createElement
+
+local function Header(props)
+	return Theme.with(function(theme)
+		return e("Frame", {
+			Size = UDim2.new(1, 0, 0, 32),
+			LayoutOrder = props.layoutOrder,
+			BackgroundTransparency = 1,
+		}, {
+			Logo = e("ImageLabel", {
+				Image = Assets.Images.Logo,
+				ImageColor3 = theme.Header.LogoColor,
+				ImageTransparency = props.transparency,
+
+				Size = UDim2.new(0, 60, 0, 27),
+
+				LayoutOrder = 1,
+				BackgroundTransparency = 1,
+			}),
+
+			Version = e("TextLabel", {
+				Text = Version.display(Config.version),
+				Font = Enum.Font.Gotham,
+				TextSize = 14,
+				TextColor3 = theme.Header.VersionColor,
+				TextXAlignment = Enum.TextXAlignment.Left,
+				TextTransparency = props.transparency,
+
+				Size = UDim2.new(1, 0, 0, 14),
+
+				LayoutOrder = 2,
+				BackgroundTransparency = 1,
+			}),
+
+			Layout = e("UIListLayout", {
+				VerticalAlignment = Enum.VerticalAlignment.Center,
+				FillDirection = Enum.FillDirection.Horizontal,
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				Padding = UDim.new(0, 15),
+			}),
+		})
+	end)
+end
+
+return Header

plugin/src/App/Components/IconButton.lua

@@ -0,0 +1,79 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+local Flipper = require(Rojo.Flipper)
+
+local Assets = require(Plugin.Assets)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local HOVER_SPRING_PROPS = {
+	frequency = 5,
+	dampingRatio = 1.1,
+}
+
+local e = Roact.createElement
+
+local IconButton = Roact.Component:extend("IconButton")
+
+function IconButton:init()
+	self.motor = Flipper.SingleMotor.new(0)
+	self.binding = bindingUtil.fromMotor(self.motor)
+end
+
+function IconButton:render()
+	local iconSize = self.props.iconSize
+
+	return e("ImageButton", {
+		Size = UDim2.new(0, iconSize * 1.5, 0, iconSize * 1.5),
+		Position = self.props.position,
+		AnchorPoint = self.props.anchorPoint,
+
+		LayoutOrder = self.props.layoutOrder,
+		ZIndex = self.props.zIndex,
+		BackgroundTransparency = 1,
+
+		[Roact.Event.Activated] = self.props.onClick,
+
+		[Roact.Event.MouseEnter] = function()
+			self.motor:setGoal(
+				Flipper.Spring.new(1, HOVER_SPRING_PROPS)
+			)
+		end,
+
+		[Roact.Event.MouseLeave] = function()
+			self.motor:setGoal(
+				Flipper.Spring.new(0, HOVER_SPRING_PROPS)
+			)
+		end,
+	}, {
+		Icon = e("ImageLabel", {
+			Image = self.props.icon,
+			ImageColor3 = self.props.color,
+			ImageTransparency = self.props.transparency,
+
+			Size = UDim2.new(0, iconSize, 0, iconSize),
+			Position = UDim2.new(0.5, 0, 0.5, 0),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+
+			BackgroundTransparency = 1,
+		}),
+
+		HoverCircle = e("ImageLabel", {
+			Image = Assets.Images.Circles[128],
+			ImageColor3 = self.props.color,
+			ImageTransparency = Roact.joinBindings({
+				hover = self.binding,
+				transparency = self.props.transparency,
+			}):map(function(values)
+				return bindingUtil.blendAlpha({ 0.85, 1 - values.hover, values.transparency })
+			end),
+
+			Size = UDim2.new(1, 0, 1, 0),
+
+			BackgroundTransparency = 1,
+		}),
+	})
+end
+
+return IconButton

plugin/src/App/Components/ScrollingFrame.lua

@@ -0,0 +1,42 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Assets = require(Plugin.Assets)
+local Theme = require(Plugin.App.Theme)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local e = Roact.createElement
+
+local function ScrollingFrame(props)
+	return Theme.with(function(theme)
+		return e("ScrollingFrame", {
+			ScrollBarThickness = 9,
+			ScrollBarImageColor3 = theme.ScrollBarColor,
+			ScrollBarImageTransparency = props.transparency:map(function(value)
+				return bindingUtil.blendAlpha({ 0.65, value })
+			end),
+			TopImage = Assets.Images.ScrollBar.Top,
+			MidImage = Assets.Images.ScrollBar.Middle,
+			BottomImage = Assets.Images.ScrollBar.Bottom,
+
+			ElasticBehavior = Enum.ElasticBehavior.Always,
+			ScrollingDirection = Enum.ScrollingDirection.Y,
+
+			Size = props.size,
+			Position = props.position,
+			AnchorPoint = props.anchorPoint,
+			CanvasSize = props.contentSize:map(function(value)
+				return UDim2.new(0, 0, 0, value.Y)
+			end),
+
+			BorderSizePixel = 0,
+			BackgroundTransparency = 1,
+
+			[Roact.Change.AbsoluteSize] = props[Roact.Change.AbsoluteSize]
+		}, props[Roact.Children])
+	end)
+end
+
+return ScrollingFrame

plugin/src/App/Components/SlicedImage.lua

@@ -0,0 +1,29 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+
+local Roact = require(Rojo.Roact)
+
+local e = Roact.createElement
+
+local function SlicedImage(props)
+	local slice = props.slice
+
+	return e("ImageLabel", {
+		Image = slice.Image,
+		ImageColor3 = props.color,
+		ImageTransparency = props.transparency,
+
+		ScaleType = Enum.ScaleType.Slice,
+		SliceCenter = slice.Center,
+		SliceScale = slice.Scale,
+
+		Size = props.size,
+		Position = props.position,
+		AnchorPoint = props.anchorPoint,
+
+		ZIndex = props.zIndex,
+		LayoutOrder = props.layoutOrder,
+		BackgroundTransparency = 1,
+	}, props[Roact.Children])
+end
+
+return SlicedImage