[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")} />}