plugin installation

Kernel/Notebook.wl

@@ -89,6 +89,8 @@ NotebookExport::usage = "export to standalone html"
 NotebookTheme::usage = "set the mode dark/light"
 NotebookSettings::usage = ""
 NotebookState::usage = ""
+
+NotebookAlert::usage = ""
 (*
     Internal commands used by other packages
     must not be PUBLIC!
@@ -733,6 +735,11 @@ NotebookEvaluate[cellid_] := (
     ];
 );
 
+NotebookAlert[text_String] := With[{},
+    Print[text];
+    WebSocketSend[Global`client, Global`FrontEndJSEval["alert(`"<>text<>"`)"] // DefaultSerializer];
+]
+
 
 NotebookKernelOperate[cmd_] := With[{channel = $AssociationSocket[Global`client]},
     jsfn`Notebooks[channel]["kernel"][cmd][Function[state,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wljs-frontend",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Web-based frontend for Wolfram Engine",
   "author": {
     "name": "Kirill Vasin",

public/template/modals/settings/install.wsp

@@ -0,0 +1,38 @@
+<?wsp With[{uid = CreateUUID[]}, ?>
+<div class="notion-selectable notion-collection_view_page-block" style="display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 4px;">
+            <div class="notion-selectable notion-page-block notion-collection-item" style="margin-top: 1px; margin-bottom: 1px; border-radius: 3px;">
+        <span style="display: flex; color: inherit; text-decoration: none; flex-grow: 1; overflow: hidden; border-radius: 3px; height: 30px;">
+                        <div class="filebrowser-strip" role="button" tabindex="0" style="<?wsp If[TrueQ[disabled], "opacity: 0.5;", ""]?>-webkit-user-select: none; transition: background 20ms ease-in 0s; cursor: pointer; width: 100%; display: flex; align-items: center; padding-right: 4px;">
+                           <div class="notion-record-icon notranslate" role="button" tabindex="0" style="-webkit-user-select: none;transition: background 20ms ease-in 0s;cursor: pointer;display: flex;align-items: center;justify-content: center;border: none;height: 22px;/* width: 22px; */border-radius: 0.25em;flex-shrink: 0;margin-left: 2px;margin-right: 6px;">
+
+                                <input style="width: 8em;border: none;border-radius: 6px;padding: 0.5em;" id="<?wsp uid ?>" type="text" placeholder="Put a link to Github repository" />
+
+                           </div>
+                           <div style="display: flex; margin-right: auto; min-width: 240px; align-items: center;">
+
+                                <div spellcheck="true" placeholder="Untitled" data-content-editable-leaf="true" style="font-size: small; max-width: 100%; width: auto; white-space: nowrap; word-break: break-word; caret-color: rgb(55, 53, 47); line-height: 1.3; pointer-events: none; overflow: hidden; text-overflow: ellipsis;" contenteditable="false">
+                                    Install a plugin
+                                </div>
+                              <div style="min-width: 35px;"></div>
+                           </div>
+
+                        </div>
+
+                     </span>      
+  </div>
+
+      </div>
+
+<script>
+    {
+        const i = document.getElementById("<?wsp uid ?>");
+
+        i.addEventListener('blur', (val) => {
+            if (i.value === "") return;
+
+            server.socket.send(`InstallPackage["${i.value}", Function[{state, comment}, NotebookAlert[comment]]]`);
+        })
+    }
+</script>
+
+<?wsp ] ?>

public/template/modals/settings/plugins.wsp

@@ -4,3 +4,5 @@
             LoadPage[FileNameJoin[{"template","modals","settings","toggle.wsp"}], {link = Packages[key, "repository", "url"], desc = Packages[key, "description"], name = key, disabled = Packages[key, "wljs-meta", "important"], default = Packages[key, "enabled"], update = Function[data, Packages[key, "enabled"] = data; UpdateConfiguration;]}] 
         ]?>
     <?wsp , {key, SortBy[Packages//Keys, Packages[#, "wljs-meta", "priority"]&]}] ?>
+
+  <?wsp  LoadPage[FileNameJoin[{"template","modals","settings","install.wsp"}]] ?>