[Plugins] Basic implementation of plugin settings

src/def.d.ts

@@ -101,7 +101,8 @@ interface VendettaObject {
     }
     ui: {
         components: {
-            Forms: PropIntellisense<"FormSection">;
+            Forms: PropIntellisense<"Form" | "FormSection">;
+            General: PropIntellisense<"Button" | "Text" | "View">;
         }
         toasts: {
             showToast: (content: string, asset: number) => void;

src/lib/plugins.ts

@@ -4,6 +4,7 @@ import logger from "./logger";
 type EvaledPlugin = {
     onLoad?(): void;
     onUnload(): void;
+    settings: JSX.Element;
 };
 
 export const plugins: Indexable<Plugin> = {};
@@ -92,5 +93,7 @@ export function stopPlugin(id: string) {
     plugin.enabled = false;
 }
 
+export const getSettings = (id: string) => loadedPlugins[id]?.settings;
+
 // TODO: When startAllPlugins exists, return this so cleanup in index.ts is easier
 const stopAllPlugins = () => Object.keys(loadedPlugins).forEach(stopPlugin);

src/ui/components.ts

@@ -1,3 +1,4 @@
 import { findByProps } from "@metro/filters";
 
-export const Forms = findByProps("FormSection");
+export const Forms = findByProps("Form", "FormSection");
+export const General = findByProps("Button", "Text", "View");

src/ui/settings/components/PluginCard.tsx

@@ -1,10 +1,13 @@
 import { ReactNative as RN, stylesheet } from "@metro/common";
-import { Forms } from "@ui/components";
+import { Forms, General } from "@ui/components";
 import { Plugin } from "@types";
 import { getAssetIDByName } from "@ui/assets";
-import { startPlugin, stopPlugin } from "@lib/plugins";
+import { getSettings, startPlugin, stopPlugin } from "@lib/plugins";
+import { findByProps } from "@metro/filters";
 
 const { FormRow, FormSwitch } = Forms;
+const { TouchableOpacity, Image } = General;
+const navigation = findByProps("pushLazy");
 
 const styles = stylesheet.createThemedStyleSheet({
     card: {
@@ -16,6 +19,16 @@ const styles = stylesheet.createThemedStyleSheet({
         backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_TERTIARY,
         borderTopLeftRadius: 5,
         borderTopRightRadius: 5,
+    },
+    actions: {
+        justifyContent: "flex-end",
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    icon: {
+        width: 22,
+        height: 22,
+        tintColor: stylesheet.ThemeColorMap.INTERACTIVE_NORMAL,
     }
 })
 
@@ -25,6 +38,7 @@ interface PluginCardProps {
 
 export default function PluginCard({ plugin }: PluginCardProps) {
     const [enabled, setEnabled] = React.useState(plugin.enabled);
+    const Settings = getSettings(plugin.id);
 
     return ( 
         <RN.View style={styles.card}>
@@ -44,6 +58,17 @@ export default function PluginCard({ plugin }: PluginCardProps) {
             />
             <FormRow
                 label={plugin.manifest.description}
+                trailing={
+                    <RN.View style={styles.actions}>
+                        {Settings && <TouchableOpacity
+                            onPress={() => {
+                                navigation.push(Settings);
+                            }}
+                        >
+                            <Image style={styles.icon} source={getAssetIDByName("settings")} />
+                        </TouchableOpacity>}
+                    </RN.View>
+                }
             />
         </RN.View>
     )