Mount the app and fetch extensions

plugin/src/components/App.lua

@@ -0,0 +1,54 @@
+local Root = script:FindFirstAncestor("rbxtheme")
+
+local React = require(Root.Packages.React)
+local fetchVisualStudioExtensions = require(Root.fetchVisualStudioExtensions)
+
+type VsMarketplaceExtension = fetchVisualStudioExtensions.VsMarketplaceExtension
+
+local useEffect = React.useState
+local useState = React.useState
+
+export type Props = {
+	plugin: Plugin,
+}
+
+local function App(_props: Props)
+	local extensions, setExtensions = useState({} :: { VsMarketplaceExtension })
+
+	useEffect(function()
+		fetchVisualStudioExtensions({
+			searchTerm = "theme",
+		}):andThen(function(newExtensions)
+			print("extensions", newExtensions)
+			setExtensions(newExtensions)
+		end)
+	end, {})
+
+	return React.createElement("Frame", {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundTransparency = 1,
+	}, {
+		Layout = React.createElement("UIListLayout", {
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		}),
+
+		SearchForm = React.createElement("Frame", {
+			LayoutOrder = 1,
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+		}, {
+			Input = React.createElement("TextBox", {
+				PlaceholderText = "Search themes...",
+			}),
+
+			ErrorMessage = React.createElement("TextLabel", {}),
+		}),
+
+		Extensions = React.createElement("TextLabel", {
+			LayoutOrder = 2,
+			Text = tostring(extensions),
+		}),
+	})
+end
+
+return App

plugin/src/components/App.story.lua

@@ -0,0 +1,14 @@
+local Root = script:FindFirstAncestor("rbxtheme")
+
+local React = require(Root.Packages.React)
+local App = require(script.Parent.App)
+
+local mockPlugin = {}
+
+return {
+	story = function()
+		return React.createElement(App, {
+			plugin = mockPlugin,
+		})
+	end,
+}

plugin/src/fetchVisualStudioExtensions.lua

@@ -6,7 +6,7 @@ local request = require(Root.request)
 local urls = require(Root.urls)
 local createUrl = require(Root.createUrl)
 
-local function fetchVisualStudioExtensions(query: { [string]: any })
+local function fetchVisualStudioExtensions(query: { [string]: any }?)
 	return request({
 		method = "GET",
 		url = createUrl(`{urls.SERVER_URL}/extensions`, query),

plugin/src/init.server.lua

@@ -1,79 +1,46 @@
 local React = require(script.Packages.React)
 local ReactRoblox = require(script.Packages.ReactRoblox)
-local fetchVisualStudioExtensions = require(script.fetchVisualStudioExtensions)
-local fetchExtensionThemes = require(script.fetchExtensionThemes)
-local getThemeColors = require(script.getThemeColors)
-local types = require(script.types)
-local urls = require(script.urls)
-local request = require(script.request)
 local constants = require(script.constants)
-local App = require(script.App)
+local App = require(script.components.App)
 
 local info = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Float, false, false, 400, 400, 100, 100)
-local container = plugin:CreateDockWidgetPluginGui(constants.PLUGIN_NAME, info)
-
-local root = ReactRoblox.createRoot(container)
-local element = React.createElement(App, {
+local widget = plugin:CreateDockWidgetPluginGui(constants.PLUGIN_NAME, info)
+widget.Name = constants.PLUGIN_NAME
+widget.Title = widget.Name
+widget.ZIndexBehavior = Enum.ZIndexBehavior.Sibling
+
+local toolbar = plugin:CreateToolbar(constants.PLUGIN_NAME)
+local button = toolbar:CreateButton(
+	widget.Name,
+	"View Themes",
+	"" -- TODO: Add an icon
+)
+
+local root = ReactRoblox.createRoot(widget)
+local app = React.createElement(App, {
 	plugin = plugin,
 })
 
-root:render(element)
-
-plugin.Unloading:Connect(function()
-	root:unmount()
+local clickConn = button.Click:Connect(function()
+	widget.Enabled = not widget.Enabled
 end)
 
-do
-	local success = request({
-		url = `{urls.SERVER_URL}/health`,
-		polling = {
-			times = 5,
-			seconds = 10,
-		},
-	}):await()
+local function update()
+	button:SetActive(widget.Enabled)
 
-	if not success then
-		warn("Failed to connect to server. Reload the experience to retry")
-		return
+	if widget.Enabled then
+		root:render(app)
+	else
+		root:unmount()
 	end
 end
 
-do
-	print("Established connection to server")
-
-	local success, themes = fetchVisualStudioExtensions({ searchTerm = "synthwave" })
-		:andThen(function(extensions: { types.PublishedExtension })
-			local extension = extensions[1]
-			local latestVersion = extension.versions[1]
-
-			assert(latestVersion, "No latest version found for extension {extension.displayName}")
-
-			return fetchExtensionThemes(extension, latestVersion.version)
-		end)
-		:catch(function(err)
-			warn("ERR:", err)
-		end)
-		:await()
+local widgetConn = widget:GetPropertyChangedSignal("Enabled"):Connect(update)
 
-	if success and themes then
-		print("themes", themes)
-		local theme = if #themes > 0 then themes[1] else nil
+update()
 
-		if theme then
-			local colors = getThemeColors(theme)
-
-			if colors and colors.found then
-				print("applying theme...")
-				for name, color in colors.found do
-					-- Discard the alpha component of the hexcode
-					if #color - 1 > 6 then
-						warn(`{name} uses unsupported alpha value`)
-						color = color:sub(7, #color)
-					end
-
-					settings().Studio[name] = Color3.fromHex(color)
-				end
-			end
-		end
-	end
-end
+plugin.Unloading:Connect(function()
+	widgetConn:Disconnect()
+	clickConn:Disconnect()
+	root:unmount()
+end)

plugin/src/init.storybook.lua

@@ -0,0 +1,12 @@
+local Root = script:FindFirstAncestor("rbxtheme")
+
+local React = require(Root.Packages.React)
+local ReactRoblox = require(Root.Packages.ReactRoblox)
+
+return {
+	storyRoots = {
+		script.Parent.components,
+	},
+	react = React,
+	reactRoblox = ReactRoblox,
+}