do some work on plugin adding UI

options.default.toml

@@ -3,4 +3,5 @@
 [values]
 _DEBUG     = 0 #enables debug logs
 _ANALYTICS = 0 #enables analytics nagging
-_TOKEN     = 0 #enables the valentino token logging easter egg (untested, no clue if it actually works)
+_TOKEN     = 0 #enables the valentino token logging easter egg (untested, no clue if it actually works)
+_CORS_URL  = "https://cors.ruthenic.com/"

src/api/ui/settings/hummus.jsx

@@ -16,7 +16,7 @@ export default class HummusUI extends React.Component {
 		const extNest = demon.summon("internal/nest");
 		return (
 			<div className="control-group demon-settings-card-header">
-				<label className="demon-settings-header-size30 ">Plugins</label>
+				<label className="demon-settings-header-size30">Plugins</label>
 				{Object.keys(extNest.ghost.pluginsList).map((k) => {
 					return (
 						<div className="demon-settings-card-base">

src/api/ui/settings/plugins.jsx

@@ -1,18 +1,40 @@
+//#ifnset _CORS_URL
+//#set _CORS_URL = "https://cors.ruthenic.com/"
+//#endif
+
 import { React, nests, nestsReact } from "../../common";
+import { add } from "../../plugin"
 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");
+const Flex = webpack.findByDisplayName("Flex");
+const TextInput = webpack.findByDisplayName("TextInput");
+const Button = webpack.findByProps("BorderColors", "Colors");
 
 export default () => {
 	const extNest = demon.summon("internal/nest");
+	const [input, setInput] = React.useState("")
 	nestsReact.useNest(extNest);
 	return (
 		<>
 			<Header size="demon-settings-header-size30">Plugins</Header>
+			<Flex basis="auto" grow={1} shrink={1}>
+				<TextInput
+					className="demon-settings-url"
+					placeholder="https://git.ruthenic.com/ruthenic/demoncord-noReplyMention/raw/branch/master/dist/plugin.js"
+					type="text"
+					value={input}
+					onChange={setInput}
+					onKeyDown={async (eve) => {
+						if (eve.key === "Enter") {
+							const text = await (await fetch("$_CORS_URL" + input)).text()
+							add(text);
+						}
+					}}
+				/>
+			</Flex>
 			<FormDivider className="demon-settings-divider" />
 			{Object.keys(extNest.ghost.plugins).map((k) => {
 				return (

src/api/ui/settings/settings.js

@@ -8,6 +8,10 @@ import { React } from "../../common";
 const SettingsView = webpack.findByDisplayName("SettingsView");
 
 function init() {
+	css.createClass("demon-settings-url", {
+		"margin-top": "10px",
+		width: "100%"
+	});
 	css.createClass("demon-settings-divider", {
 		"margin-top": "10px",
 		"margin-bottom": "10px",