[Plugins] Finish plugin settings

src/ui/settings/components/PluginCard.tsx

@@ -1,13 +1,12 @@
-import { ReactNative as RN, stylesheet } from "@metro/common";
+import { ReactNative as RN, stylesheet, navigation } from "@metro/common";
 import { Forms, General } from "@ui/components";
 import { Plugin } from "@types";
 import { getAssetIDByName } from "@ui/assets";
 import { getSettings, startPlugin, stopPlugin } from "@lib/plugins";
-import { findByProps } from "@metro/filters";
+import PluginSettings from "@ui/settings/components/PluginSettings";
 
 const { FormRow, FormSwitch } = Forms;
 const { TouchableOpacity, Image } = General;
-const navigation = findByProps("pushLazy");
 
 const styles = stylesheet.createThemedStyleSheet({
     card: {
@@ -62,7 +61,10 @@ export default function PluginCard({ plugin }: PluginCardProps) {
                     <RN.View style={styles.actions}>
                         {Settings && <TouchableOpacity
                             onPress={() => {
-                                navigation.push(Settings);
+                                navigation.push(PluginSettings, {
+                                    plugin: plugin,
+                                    children: Settings,
+                                });
                             }}
                         >
                             <Image style={styles.icon} source={getAssetIDByName("settings")} />

src/ui/settings/components/PluginSettings.tsx

@@ -0,0 +1,73 @@
+import { Plugin } from "@types";
+import { navigation, navigationStack, NavigationNative, stylesheet, constants } from "@metro/common";
+import { General } from "@ui/components";
+import { getAssetIDByName } from "@ui/assets";
+
+interface PluginSettingsProps {
+    plugin: Plugin;
+    children: JSX.Element;
+}
+
+const styles = stylesheet.createThemedStyleSheet({
+    container: {
+        backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_MOBILE_SECONDARY,
+        flex: 1,
+    },
+    cardStyle: {
+        backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_MOBILE_PRIMARY,
+        color: stylesheet.ThemeColorMap.TEXT_NORMAL,
+    },
+    header: {
+        backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_MOBILE_SECONDARY,
+        shadowColor: "transparent",
+        elevation: 0,
+    },
+    headerTitleContainer: {
+        color: stylesheet.ThemeColorMap.HEADER_PRIMARY,
+    },
+    headerTitle: {
+        fontFamily: constants.Fonts.PRIMARY_BOLD,
+        color: stylesheet.ThemeColorMap.HEADER_PRIMARY,
+    },
+    backIcon: {
+        tintColor: stylesheet.ThemeColorMap.INTERACTIVE_ACTIVE,
+        marginLeft: 15,
+        marginRight: 20,
+    }
+});
+
+export const Settings = navigationStack.createStackNavigator();
+const { TouchableOpacity, Image } = General;
+
+export default function PluginSettings({ plugin, children }: PluginSettingsProps) {
+    return (
+        <NavigationNative.NavigationContainer>
+            <Settings.Navigator
+                initialRouteName={plugin.manifest.name}
+                style={styles.container}
+                screenOptions={{
+                    cardOverlayEnabled: false,
+                    cardShadowEnabled: false,
+                    cardStyle: styles.cardStyle,
+                    headerStyle: styles.header,
+                    headerTitleContainerStyle: styles.headerTitleContainer,
+                }}
+            >
+                <Settings.Screen 
+                    name={plugin.manifest.name}
+                    component={children}
+                    options={{
+                        headerTitleStyle: styles.headerTitle,
+                        headerLeft: () => (
+                            <TouchableOpacity
+                                onPress={() => navigation.pop()}
+                            >
+                                <Image style={styles.backIcon} source={getAssetIDByName("back-icon")} />
+                            </TouchableOpacity>
+                        ),
+                    }}
+                />
+            </Settings.Navigator>
+        </NavigationNative.NavigationContainer>
+    )
+}