toggle plugin ui, delete plugin ui

rollup.config.js

@@ -4,17 +4,23 @@ 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 { resolve as resolvePath } from "path"; 
+const projectRootDir = resolvePath(__dirname);
 
 export default defineConfig({
   input: pkjs.main,
   output: {
     file: "dist/build.js",
     format: "iife",
+    globals: {
+    }
   },
+  external: ["React"],
   plugins: [
     alias({
       entries: [
-        { find: "nests", replacement: "../../node_modules/nests/esm/index.js" },
+        { find: "nests", replacement: resolvePath(projectRootDir, "node_modules/nests/esm/") },
+        { find: "react", replacement: resolvePath(projectRootDir, "src/shim_react.js") }
       ],
     }),
     nodeResolve(),

src/api/common.js

@@ -1,6 +1,7 @@
 import webpack from "./webpack"
 import * as idb from "idb-keyval"
 import * as nests from "nests"
+import * as nestsReact from "nests/react"
 
 const { findByProps } = webpack
 
@@ -20,4 +21,4 @@ export default {
 	nests
 }
 
-export { idb, nests, React }
+export { idb, nests, nestsReact, React }

src/api/plugin.js

@@ -29,20 +29,24 @@ async function init() {
         }
     })
     extNest.store.pluginsList = currdemon.plugins
+    extNest.store.pluginsStatus = currdemon.status
     await idb.set("demon", currdemon)
 }
 
 async function add(iife, meta) {
+    const extNest = demon.require("internal/nest")
     const currdemon = await idb.get("demon")
     currdemon.plugins[meta.name] = {
         initialize: iife,
         meta: meta
     }
     extNest.store.pluginsList = currdemon.plugins
+    extNest.store.pluginsStatus = currdemon.status
     await idb.set("demon", currdemon)
 }
 
 async function del(name) {
+    const extNest = demon.require("internal/nest")
     const currdemon = await idb.get("demon")
     if (!!currdemon.plugins[name])
         if (currdemon.status[name].running) {
@@ -52,10 +56,12 @@ async function del(name) {
         delete currdemon.status[name]
         delete currdemon.plugins[name]
     extNest.store.pluginsList = currdemon.plugins
+    extNest.store.pluginsStatus = currdemon.status
     await idb.set("demon", currdemon)
 }
 
 async function toggle(name) {
+    const extNest = demon.require("internal/nest")
     const currdemon = await idb.get("demon")
     if (!!currdemon.plugins[name]) {
         if (currdemon.status[name]?.running) {
@@ -72,9 +78,18 @@ async function toggle(name) {
             }
         }
     }
+    extNest.store.pluginsList = currdemon.plugins
+    extNest.store.pluginsStatus = currdemon.status
     await idb.set("demon", currdemon)
 }
 
+export {
+    init,
+    add,
+    del,
+    toggle
+}
+
 export default {
     init,
     add,

src/api/ui/settings/plugincard.jsx

@@ -1,5 +1,6 @@
-import { React } from "../../common"
+import { React, nestsReact } from "../../common"
 import webpack from "../../webpack"
+import { toggle, del } from "../../plugin"
 
 const Header = webpack.findByProps("Sizes", "Tags")
 const Card = webpack.findByDisplayName("Card");
@@ -7,9 +8,13 @@ const Flex = webpack.findByDisplayName("Flex");
 const FormText = webpack.findByDisplayName("FormText");
 const Button = webpack.findByProps("BorderColors", "Colors");
 const FormDivider = webpack.findByDisplayName("FormDivider");
+const Switch = webpack.findByDisplayName("Switch")
 
 export default (props) => {
-    console.log(props)
+    nestsReact.useNest(props.nest)
+    if (!props.nest.ghost.pluginsList[props.name]) {
+        return null //you wouldn't think i'd have to do this but
+    }
     return (<>
         <Card type="cardPrimary" outline={false} editable={false}>
             <Header className="demon-settings-card-header" size={Header.Sizes.SIZE_20}>
@@ -17,8 +22,25 @@ export default (props) => {
             </Header>
             <hr className="demon-settings-card-divider" />
             <FormText className="demon-settings-card-desc">
-                {props.desc}
+                {props.nest.ghost.pluginsList[props.name].meta.desc}
             </FormText>
+            <svg
+                position="top"
+                onClick = {async () => {
+                    del(props.name)
+                }}
+                className="demon-settings-card-delete"
+                viewBox="0 0 24 24"
+            >
+                <path fill="var(--text-muted)" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12 1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z" />
+            </svg>
+            <Switch
+                className="demon-settings-card-switch"
+                checked = {props.nest.ghost.pluginsStatus[props.name].running}
+                onChange = {async () => {
+                    toggle(props.name)
+                }}
+            />
         </Card>
     </>)
 }

src/api/ui/settings/plugins.jsx

@@ -1,4 +1,4 @@
-import { React, nests } from "../../common"
+import { React, nests, nestsReact } from "../../common"
 import webpack from "../../webpack"
 import PlugCard from "./plugincard.jsx"
 
@@ -9,13 +9,13 @@ const FormDivider = webpack.findByDisplayName("FormDivider");
 
 export default () => {
     const extNest = demon.require("internal/nest")
-    const pluginList = extNest.ghost.pluginsList
+    nestsReact.useNest(extNest)
     return (<>
         <Header size="demon-settings-header-size30">Plugins</Header>
         <FormDivider className="demon-settings-divider" />
-        {Object.keys(pluginList).map((k) => {
+        {Object.keys(extNest.ghost.pluginsList).map((k) => {
             return (<>
-                <PlugCard name={pluginList[k].meta.name} desc={"temporary description because plugin metadata doesn't have it yet"}></PlugCard>
+                <PlugCard name={k} nest={extNest}></PlugCard>
             </>)
         })}
     </>)

src/api/ui/settings/settings.js

@@ -20,7 +20,8 @@ function init() {
         "border": "thin solid var(--background-modifier-accent)"
     })
     css.createClass("demon-settings-card-header", {
-        "margin-left": "10px"
+        "margin-left": "10px",
+        "margin-top": "10px"
     })
     css.createClass("demon-settings-card-desc", {
         "color": "var(--header-secondary)",
@@ -29,7 +30,19 @@ function init() {
         "line-height": "15px",
         "margin-left": "10px",
         "margin-top": "5px",
-        "margin-bottom": "5px"
+        "margin-bottom": "10px"
+    })
+    css.createClass("demon-settings-card-switch", {
+        "margin-right": "10px",
+        "margin-top": "0px",
+        "margin-bottom": "10px",
+        "float": "right"
+    })
+    css.createClass("demon-settings-card-delete", {
+        "margin-right": "5px",
+        "float": "right",
+        "width": "24px",
+        "cursor": "pointer"
     })
     css.createClass("demon-settings-header-size30", {
         "font-size": "30px",

src/shim_react.js

@@ -0,0 +1,17 @@
+//super omega jank to make nests/react work
+
+import webpack from "./api/webpack"
+
+const React = webpack.findByProps(
+	"__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED",
+	"createElement"
+)
+
+const { useRef, useReducer, useEffect } = React
+
+export default React
+export {
+    useRef,
+    useReducer,
+    useEffect
+}