diff --git a/src/core/ui/settings/pages/Plugins/PluginCard.tsx b/src/core/ui/settings/pages/Plugins/PluginCard.tsx index ed7933c..839ebdc 100644 --- a/src/core/ui/settings/pages/Plugins/PluginCard.tsx +++ b/src/core/ui/settings/pages/Plugins/PluginCard.tsx @@ -6,7 +6,7 @@ import { showSheet } from "@lib/ui/sheets"; import { lazyDestructure } from "@lib/utils/lazy"; import { findByProps } from "@metro"; import { NavigationNative, tokens } from "@metro/common"; -import { Card, IconButton, Stack, TableSwitch, Text } from "@metro/common/components"; +import { Card, PressableScale, Stack, TableSwitch, Text } from "@metro/common/components"; import { createContext, useContext } from "react"; import { Image, View } from "react-native"; @@ -36,18 +36,18 @@ function Title() { const styles = usePluginCardStyles(); const plugin = usePlugin(); - return - {plugin.manifest.vendetta?.icon && <> + const iconName = plugin.manifest.vendetta?.icon; + const icon = iconName && requireAssetIndex(iconName); + + return + {icon && <> {" "} } @@ -59,29 +59,47 @@ function Title() { // TODO: Allow glacing at the error's stack function Status() { const plugin = usePlugin(); - const TEXT_NORMAL = useToken(tokens.colors.TEXT_NORMAL); + const styles = usePluginCardStyles(); + const INTERACTIVE_NORMAL = useToken(tokens.colors.INTERACTIVE_NORMAL); if (!plugin.error) return null; return - + + + There was an error while attempting to start this plugin. ; } +function ActionIcon(props: { + onPress: () => void; + icon: string; + disabled?: boolean; +}) { + const styles = usePluginCardStyles(); + + return + !props.disabled && props.onPress()}> + + + + + ; +} + export default function PluginCard({ item: plugin }: CardWrapper) { const navigation = NavigationNative.useNavigation(); + const styles = usePluginCardStyles(); + useProxy(plugin); return ( @@ -96,20 +114,24 @@ export default function PluginCard({ item: plugin }: CardWrapper) { - { - showSheet( + + navigation.push("VendettaCustomPage", { + title: plugin.manifest.name, + render: getSettings(plugin.id), + })} + /> + void showSheet( "PluginInfoActionSheet", import("./sheets/PluginInfoActionSheet"), { plugin, navigation } - ); - }} - size="sm" - variant="secondary" - icon={requireAssetIndex( - getSettings(plugin.id) ? "SettingsIcon" : "MoreHorizontalIcon" - )} - /> + )} + /> + { diff --git a/src/core/ui/settings/pages/Plugins/usePluginCardStyles.ts b/src/core/ui/settings/pages/Plugins/usePluginCardStyles.ts index 08d6944..592270b 100644 --- a/src/core/ui/settings/pages/Plugins/usePluginCardStyles.ts +++ b/src/core/ui/settings/pages/Plugins/usePluginCardStyles.ts @@ -1,37 +1,23 @@ -import { createStyles, TextStyleSheet } from "@lib/ui/styles"; +import { createStyles } from "@lib/ui/styles"; import { tokens } from "@metro/common"; export const usePluginCardStyles = createStyles({ - header: { - paddingVertical: 2, + pluginIcon: { + tintColor: tokens.colors.LOGO_PRIMARY, + height: 18, + width: 18, }, - headerLeading: { - flexDirection: "column", + actionIconContainer: { + width: 32, + height: 32, + borderRadius: 20, + backgroundColor: tokens.colors.BACKGROUND_ACCENT, justifyContent: "center", - scale: 1.2 - }, - headerTrailing: { - display: "flex", - flexDirection: "row", - gap: 15, - alignItems: "center" - }, - headerLabel: { - ...TextStyleSheet["heading-md/semibold"], - color: tokens.colors.TEXT_NORMAL, - }, - headerSubtitle: { - }, - descriptionLabel: { - ...TextStyleSheet["text-md/semibold"], - color: tokens.colors.TEXT_NORMAL, - }, - actions: { - flexDirection: "row-reverse", alignItems: "center", - gap: 5 }, - iconStyle: { - tintColor: tokens.colors.LOGO_PRIMARY - } + actionIcon: { + tintColor: tokens.colors.INTERACTIVE_NORMAL, + width: 18, + height: 18, + }, }); diff --git a/src/lib/managers/plugins.ts b/src/lib/managers/plugins.ts index b09b818..3078d74 100644 --- a/src/lib/managers/plugins.ts +++ b/src/lib/managers/plugins.ts @@ -10,7 +10,7 @@ import { Author } from "@lib/utils/types"; type EvaledPlugin = { onLoad?(): void; onUnload(): void; - settings: JSX.Element; + settings: () => JSX.Element; }; // See https://github.com/vendetta-mod/polymanifest