random shit to the UI

rollup.config.js

@@ -1,22 +1,27 @@
-import pkjs from "./package.json"
+import pkjs from "./package.json";
 import { defineConfig } from "rollup";
-import { uglify } from "rollup-plugin-uglify"
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import sucrase from '@rollup/plugin-sucrase';
-import alias from '@rollup/plugin-alias'
+import { uglify } from "rollup-plugin-uglify";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import sucrase from "@rollup/plugin-sucrase";
+import alias from "@rollup/plugin-alias";
 
 export default defineConfig({
-	input: pkjs.main,
-	output: {
-		file: "dist/build.js",
-		format: "iife"
-	},
-	plugins: [alias({
-		entries: [
-			{ find: "nests", replacement: "../../node_modules/nests/esm/index.js" }
-		]
-	}), nodeResolve(), sucrase({
-		exclude: ["node_modules/**"],
-		transforms: ["jsx"]
-	}), uglify()]
-})
+  input: pkjs.main,
+  output: {
+    file: "dist/build.js",
+    format: "iife",
+  },
+  plugins: [
+    alias({
+      entries: [
+        { find: "nests", replacement: "../../node_modules/nests/esm/index.js" },
+      ],
+    }),
+    nodeResolve(),
+    sucrase({
+      exclude: ["node_modules/**"],
+      transforms: ["jsx"],
+    }),
+    uglify(),
+  ],
+});

src/api/ui/settings/plugincard.jsx

@@ -0,0 +1,21 @@
+import { React } from "../../common"
+import webpack from "../../webpack"
+
+const Header = webpack.findByProps("Sizes", "Tags")
+const Card = webpack.findByDisplayName("Card");
+const FormText = webpack.findByDisplayName("FormText");
+const Button = webpack.findByProps("BorderColors", "Colors");
+
+export default (props) => {
+    return (<>
+        <Card type="cardPrimary" outline={false} editable={false}>
+            <Header size={Header.Sizes.SIZE_5}>
+                {props.name}
+            </Header>
+            <Button color={Button.Colors.RED} onClick={()=>{
+                Start/Stop
+            }}>
+            </Button>
+        </Card>
+    </>)
+}

src/api/ui/settings/plugins.jsx

@@ -0,0 +1,21 @@
+import { React, nests } from "../../common"
+import webpack from "../../webpack"
+import PlugCard from "./plugincard.jsx"
+
+const Header = webpack.findByProps("Sizes", "Tags")
+const FormTitle = webpack.findByDisplayName("FormTitle")
+const FormSection = webpack.findByDisplayName("FormSection");
+const FormDivider = webpack.findByDisplayName("FormDivider");
+
+export default () => {
+    const extNest = demon.require("internal/nest")
+    const pluginList = extNest.ghost.pluginsList
+    return (<>
+        <Header size={Header.Sizes.SIZE_20}>Plugins</Header>
+        {Object.keys(pluginList).map((k) => {
+            return (
+                <PlugCard name={pluginList[k].meta.name}></PlugCard>
+            )
+        })}
+    </>)
+}

src/api/ui/settings/settings.js

@@ -1,6 +1,6 @@
 import webpack from "../../webpack"
 import { after } from "../../patcher"
-import test from "./test.jsx"
+import plugins from "./plugins.jsx"
 
 const SettingsView = webpack.findByDisplayName("SettingsView")
 
@@ -14,7 +14,7 @@ function init() {
         {
             section: "demoncord", 
             label: "Plugins", 
-            element: test
+            element: plugins
         },
         {
             section: "DIVIDER"

src/api/ui/settings/test.jsx

@@ -1,9 +0,0 @@
-import { React, nests } from "../../common"
-
-export default () => {
-    const extNest = demon.require("internal/nest")
-    const pluginList = Object.keys(extNest.ghost.pluginsList)
-    return (
-        <h1>{pluginList}</h1>
-    )
-}