[Plugin] Basic, non-functional implementation

src/ui/settings/components/PluginCard.tsx

@@ -0,0 +1,49 @@
+import { ReactNative as RN, stylesheet } from "@metro/common";
+import { Forms } from "@ui/components";
+import { Plugin } from "@types";
+import { getAssetIDByName } from "@/ui/assets";
+
+const { FormRow, FormText, FormSwitch } = Forms;
+
+const styles = stylesheet.createThemedStyleSheet({
+    card: {
+        backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_SECONDARY,
+        borderRadius: 5,
+        margin: 10,
+    },
+    header: {
+        backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_TERTIARY,
+        borderTopLeftRadius: 5,
+        borderTopRightRadius: 5,
+    }
+})
+
+interface PluginCardProps {
+    plugin: Plugin;
+}
+
+export default function PluginCard({ plugin }: PluginCardProps) {
+    const [enabled, setEnabled] = React.useState(plugin.enabled);
+
+    return ( 
+        <RN.View style={styles.card}>
+            <FormRow
+                style={styles.header}
+                label={`${plugin.manifest.name} by ${plugin.manifest.author}`}
+                leading={<FormRow.Icon source={getAssetIDByName(plugin.manifest.icon || "ic_application_command_24px")} />}
+                trailing={
+                    <FormSwitch
+                        value={plugin.enabled}
+                        onValueChange={(v: boolean) => {
+                            setEnabled(v);
+                            plugin.enabled = enabled;
+                        }}
+                    />
+                }
+            />
+            <FormRow
+                label={plugin.manifest.description}
+            />
+        </RN.View>
+    )
+}

src/ui/settings/components/SettingsSection.tsx

@@ -16,6 +16,12 @@ export default function SettingsSection({ navigation }: SettingsSectionProps) {
                 trailing={FormRow.Arrow}
                 onPress={() => navigation.push("VendettaSettings")}
             />
+            <FormRow
+                label="Plugins"
+                leading={() => <FormRow.Icon source={getAssetIDByName("debug")} />}
+                trailing={FormRow.Arrow}
+                onPress={() => navigation.push("VendettaPlugins")}
+            />
             <FormRow
                 label="Asset Browser"
                 leading={() => <FormRow.Icon source={getAssetIDByName("grid")} />}

src/ui/settings/index.tsx

@@ -18,6 +18,10 @@ export default function initSettings() {
                 title: "Vendetta",
                 render: General,
             },
+            VendettaPlugins: {
+                title: "Plugins",
+                render: Plugins
+            },
             VendettaAssetBrowser: {
                 title: "Asset Browser",
                 render: AssetBrowser,

src/ui/settings/pages/Plugins.tsx

@@ -0,0 +1,56 @@
+import { ReactNative as RN, stylesheet } from "@metro/common";
+import { Forms } from "@ui/components";
+import { showToast } from "@ui/toasts";
+import { getAssetIDByName } from "@ui/assets";
+import { fetchPlugin, plugins } from "@lib/plugins";
+import PluginCard from "@ui/settings/components/PluginCard";
+
+const { FormInput, FormRow, FormText } = Forms;
+
+const styles = stylesheet.createThemedStyleSheet({
+    disclaimer: {
+        backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_SECONDARY,
+        padding: 10
+    },
+    disclaimerText: {
+        textAlign: "center"
+    }
+})
+
+export default function Plugins() {
+    const [pluginUrl, setPluginUrl] = React.useState("");
+    const [pluginList, setPluginList] = React.useState(plugins);
+
+
+    return (
+        <>
+            <FormInput 
+                value={pluginUrl}
+                onChange={(v: string) => setPluginUrl(v)}
+                title="PLUGIN URL"
+            />
+            <FormRow
+                label="Install plugin"
+                leading={() => <FormRow.Icon source={getAssetIDByName("add_white")} />}
+                trailing={FormRow.Arrow}
+                onPress={() => {
+                        fetchPlugin(pluginUrl).then(() => {
+                            setPluginUrl("");
+                            setPluginList(plugins);
+                        }).catch((e: Error) => {
+                            showToast(e.message, getAssetIDByName("Small"));
+                        });
+                    }
+                }
+            />
+            <RN.FlatList
+                data={Object.values(pluginList)}
+                renderItem={({ item }) => <PluginCard plugin={item} />}
+                keyExtractor={item => item.id}
+            />
+            <RN.View style={styles.disclaimer}>
+                <FormText style={styles.disclaimerText}>Plugins are currently non-functional, but most of the infrastructure and UI is in place.</FormText>
+            </RN.View>
+        </>
+    )
+}