[plugin] add stashNotes (#192)

* Added Stash Notes plugin

* fix classname

* format code

---------

Co-authored-by: Raghavan (Tetrax-10)

plugins/stashNotes/stashNotes.js

@@ -0,0 +1,108 @@
+"use strict";
+(function () {
+  const api = window.PluginApi;
+  const React = api.React;
+  const { Button, Modal } = api.libraries.Bootstrap;
+  const { faNoteSticky } = api.libraries.FontAwesomeSolid;
+  const NotesComponent = () => {
+    const storageKey = "Stash Notes";
+    const [display, setDisplay] = React.useState(false);
+    const [notes, setNotes] = React.useState("");
+    const enableModal = () => setDisplay(true);
+    const disableModal = () => setDisplay(false);
+    const saveNotes = (notes) => {
+      localStorage.setItem(storageKey, notes);
+      disableModal();
+    };
+    React.useEffect(() => {
+      const notesFromStorage = localStorage.getItem(storageKey);
+      if (notesFromStorage) {
+        setNotes(notesFromStorage);
+      }
+    }, []);
+    return React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(NavButton, { onClickHandler: enableModal }),
+      React.createElement(NotesModal, {
+        displayState: display,
+        onCloseHandler: disableModal,
+        onSaveHandler: saveNotes,
+        notesState: notes,
+        notesChangeHandler: (n) => setNotes(n),
+      })
+    );
+  };
+  const NavButton = ({ onClickHandler }) => {
+    const { Icon } = api.components;
+    return React.createElement(
+      React.Fragment,
+      null,
+      React.createElement(
+        Button,
+        {
+          className: "nav-utility minimal",
+          title: "Notes",
+          onClick: onClickHandler,
+        },
+        React.createElement(Icon, { icon: faNoteSticky })
+      )
+    );
+  };
+  const NotesModal = ({
+    displayState,
+    onCloseHandler,
+    onSaveHandler,
+    notesState,
+    notesChangeHandler,
+  }) => {
+    return React.createElement(
+      Modal,
+      { show: displayState, onHide: onCloseHandler },
+      React.createElement(
+        Modal.Header,
+        { closeButton: true },
+        React.createElement(Modal.Title, null, "Notes")
+      ),
+      React.createElement(
+        Modal.Body,
+        null,
+        React.createElement("textarea", {
+          className: "text-input form-control",
+          rows: 10,
+          value: notesState,
+          onChange: (e) => notesChangeHandler(e.target.value),
+        }),
+        React.createElement("hr", null),
+        React.createElement("h5", null, "Important!"),
+        "Notes are stored as plain text in your browser's local storage. Do not save sensitive information. Notes will be lost after closing a browser in incognito mode."
+      ),
+      React.createElement(
+        Modal.Footer,
+        null,
+        React.createElement(
+          Button,
+          { variant: "secondary", onClick: onCloseHandler },
+          "Close"
+        ),
+        React.createElement(
+          Button,
+          { variant: "primary", onClick: () => onSaveHandler(notesState) },
+          "Save Changes"
+        )
+      )
+    );
+  };
+  api.patch.before("MainNavBar.UtilityItems", function (props) {
+    return [
+      {
+        children: React.createElement(
+          React.Fragment,
+          null,
+          props.children,
+          React.createElement(NotesComponent, null)
+        ),
+      },
+    ];
+  });
+})();

plugins/stashNotes/stashNotes.yml

@@ -0,0 +1,6 @@
+name: Stash Notes
+description: Adds a button to the navigation bar which opens a small window for writing notes to your browser's local storage.
+version: 1.0
+ui:
+  javascript:
+    - stashNotes.js