add file upload while editing plugins

uwu · Sep 20, 2024 · 4a71932 · 4a71932
1 parent 9ac9d9b
commit 4a71932
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 16 deletions.
diff --git a/packages/shelter-ui/package.json b/packages/shelter-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@uwu/shelter-ui",
   "description": "Discord components remade for shelter",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "author": "uwu.network",
   "homepage": "https://shelter.uwu.network/",
   "repository": "github:uwu/shelter",

diff --git a/packages/shelter-ui/src/icons.tsx b/packages/shelter-ui/src/icons.tsx
@@ -106,3 +106,21 @@ export const IconUpdate: IconComponent = (props) => (
     />
   </svg>
 );
+
+export const IconUpload: IconComponent = (props) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 -960 960 960"
+    {...props}
+    style={{
+      "margin-bottom": "-4px",
+      ...props.style,
+    }}
+  >
+    <path
+      fill="currentColor"
+      d="M440-200h80v-167l64 64 56-57-160-160-160 160 57 56 63-63v167ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"
+    />
+  </svg>
+);
diff --git a/packages/shelter/src/components/PluginEditModal.tsx b/packages/shelter/src/components/PluginEditModal.tsx
@@ -9,11 +9,11 @@ import {
   TextArea,
   TextBox,
   Space,
-  openConfirmationModal,
   openModal,
   showToast,
+  IconUpload,
 } from "@uwu/shelter-ui";
-import { createMemo, createSignal, Match, onCleanup, Show, Switch, untrack } from "solid-js";
+import { Component, createMemo, createSignal, Match, onCleanup, Show, Switch, untrack } from "solid-js";
 import {
   addLocalPlugin,
   addRemotePlugin,
@@ -24,6 +24,33 @@ import {
   StoredPlugin,
   updatePlugin,
 } from "../plugins";
+import { classes } from "./Plugins.tsx.scss";
+
+const JsUploader: Component<{ setCode: (t: string) => void }> = (props) => {
+  let inp: HTMLInputElement;
+
+  return (
+    <>
+      <input
+        ref={inp}
+        type="file"
+        style="display: none"
+        accept="text/javascript"
+        onChange={() => {
+          const f = inp.files[0];
+          if (f) {
+            const reader = new FileReader();
+            reader.readAsText(f);
+            reader.onloadend = () => props.setCode(reader.result as string);
+          }
+        }}
+      />
+      <button class={classes.btn} onClick={() => inp.click()}>
+        <IconUpload />
+      </button>
+    </>
+  );
+};
 
 const PluginEditModal = (props: {
   close(): void;
@@ -63,7 +90,7 @@ const PluginEditModal = (props: {
   const [lAuthor, setLAuthor] = createSignal(stateInit.manifest?.author ?? "");
   const [lDesc, setLDesc] = createSignal(stateInit.manifest?.description ?? "");
 
-  const genId = createMemo(() => {
+  const targetId = createMemo(() => {
     if (props.editId) return props.editId;
 
     if (!local()) return rSrc().split("://")[1];
@@ -83,8 +110,8 @@ const PluginEditModal = (props: {
 
     if ((!lName() || !lCode() || !lAuthor()) && local()) return;
 
-    if (props.editId) return genId() == props.editId;
-    else return !(genId() in untrack(installedPlugins));
+    if (props.editId) return targetId() == props.editId;
+    else return !(targetId() in untrack(installedPlugins));
   };
 
   return (
@@ -118,11 +145,15 @@ const PluginEditModal = (props: {
             <Header tag={HeaderTags.H4}>Description</Header>
             <TextBox placeholder="The plugin is very cool and helpful" value={lDesc()} onInput={setLDesc} />
             <Header tag={HeaderTags.H4}>Code</Header>
-            {/* TODO: monaco */}
-            <TextArea
-              mono
-              resize-y
-              placeholder={`{
+
+            <div class={classes.tawrap}>
+              <JsUploader setCode={setLCode} />
+              {/* TODO: monaco */}
+              <TextArea
+                mono
+                style={{ height: "150px" }}
+                resize-y
+                placeholder={`{
   onLoad() {
     const { name } = shelter.plugin.manifest;
     console.log(\`Hello from $\u200C{name}!\`);
@@ -131,9 +162,10 @@ const PluginEditModal = (props: {
     console.log("Goodbye :(");
   }
 }`}
-              value={lCode()}
-              onInput={setLCode}
-            />
+                value={lCode()}
+                onInput={setLCode}
+              />
+            </div>
           </Match>
         </Switch>
       </ModalBody>
@@ -172,7 +204,7 @@ const PluginEditModal = (props: {
               if (!local() && wasRunning) startPlugin(props.editId);
             } else if (local()) {
               // create new local plugin
-              addLocalPlugin(genId(), {
+              addLocalPlugin(targetId(), {
                 local: true,
                 js: lCode(),
                 update: rUpdate(),
@@ -186,7 +218,7 @@ const PluginEditModal = (props: {
               });
             } else {
               // create new remote plugin
-              await addRemotePlugin(genId(), rSrc(), rUpdate());
+              await addRemotePlugin(targetId(), rSrc(), rUpdate());
             }
           } catch (e) {
             return props.reject(e);

diff --git a/packages/shelter/src/components/Plugins.tsx.scss b/packages/shelter/src/components/Plugins.tsx.scss
@@ -40,3 +40,19 @@ $DIM: hsl(216, calc(var(--saturation-factor, 1) * 3.7%), 73.5%);
     color: var(--interactive-hover);
   }
 }
+
+/* the wrapper containing the text area and the uploader */
+.tawrap {
+  display: grid;
+
+  .btn {
+    z-index: 1;
+    align-self: start;
+    justify-self: right;
+    padding: .4rem;
+  }
+
+  & > * {
+    grid-area: 1 / 1 / span 1 / span 1;
+  }
+}