feat: Implement a plugins page

src/mobx/stores/Plugins.ts

@@ -94,6 +94,18 @@ export default class Plugins implements Store, Persistent<Data> {
         return "revite:plugins";
     }
 
+    // lexisother: https://github.com/revoltchat/revite/pull/571#discussion_r836824601
+    list() {
+        return [...this.plugins.values()].map(
+            ({ namespace, id, version, enabled }) => ({
+                namespace,
+                id,
+                version,
+                enabled,
+            }),
+        );
+    }
+
     toJSON() {
         return {
             "revite:plugins": mapToRecord(this.plugins),
@@ -211,7 +223,7 @@ export default class Plugins implements Store, Persistent<Data> {
             loaded.onUnload?.();
             this.plugins.set(ns, {
                 ...plugin,
-                enabled: true,
+                enabled: false,
             });
         }
     }

src/pages/settings/Settings.tsx

@@ -15,7 +15,7 @@ import {
     User,
     Megaphone,
     Speaker,
-    Store,
+    Plug,
     Bot,
     Trash,
 } from "@styled-icons/boxicons-solid";
@@ -53,6 +53,7 @@ import { Languages } from "./panes/Languages";
 import { MyBots } from "./panes/MyBots";
 import { Native } from "./panes/Native";
 import { Notifications } from "./panes/Notifications";
+import { PluginsPage } from "./panes/Plugins";
 import { Profile } from "./panes/Profile";
 import { Sessions } from "./panes/Sessions";
 import { Sync } from "./panes/Sync";
@@ -162,6 +163,13 @@ export default observer(() => {
                     icon: <Palette size={20} />,
                     title: <Text id="app.settings.pages.appearance.title" />,
                 },
+                {
+                    id: "plugins",
+                    icon: <Plug size={20} />,
+                    // TODO(lexisother): Replace this with the actual i18n <Text />
+                    title: <p>Plugins</p>,
+                    hidden: !experiments.isEnabled("plugins"),
+                },
                 {
                     id: "notifications",
                     icon: <Bell size={20} />,
@@ -214,6 +222,9 @@ export default observer(() => {
                     <Route path="/settings/appearance">
                         <Appearance />
                     </Route>
+                    <Route path="/settings/plugins">
+                        <PluginsPage />
+                    </Route>
                     <Route path="/settings/audio">
                         <Audio />
                     </Route>

src/pages/settings/panes/Panes.module.scss

@@ -528,6 +528,12 @@
     }
 }
 
+.plugins {
+    h1 {
+        margin-bottom: 20px !important;
+    }
+}
+
 .myBots {
     margin-top: 10px;
     .botList {

src/pages/settings/panes/Plugins.tsx

@@ -0,0 +1,36 @@
+import { observer } from "mobx-react-lite";
+
+import styles from "./Panes.module.scss";
+
+import { useApplicationState } from "../../../mobx/State";
+
+import Checkbox from "../../../components/ui/Checkbox";
+import Tip from "../../../components/ui/Tip";
+
+export const PluginsPage = observer(() => {
+    const plugins = useApplicationState().plugins;
+    return (
+        <div className={styles.plugins}>
+            {/* TODO(lexisother): Wrap in <h3><Text /></h3> */}
+            <h1>Plugins</h1>
+            <Tip error hideSeparator>
+                Warning: This feature is still in development.
+            </Tip>
+            {plugins.list().map((plugin) => {
+                return (
+                    <Checkbox
+                        key={plugin.id}
+                        checked={plugin.enabled!}
+                        onChange={() => {
+                            !plugin.enabled
+                                ? plugins.load(plugin.namespace, plugin.id)
+                                : plugins.unload(plugin.namespace, plugin.id);
+                        }}
+                        description={""}>
+                        {plugin.namespace} / {plugin.id}
+                    </Checkbox>
+                );
+            })}
+        </div>
+    );
+});