From 4d881835a63a64602dc0edc0332ee0097d28a601 Mon Sep 17 00:00:00 2001 From: pylixonly <82711525+pylixonly@users.noreply.github.com> Date: Sat, 12 Oct 2024 00:37:47 +0800 Subject: [PATCH] feat(ui): simplify some components and show bunny plugins on the page --- src/core/ui/components/AddonPage.tsx | 10 +- .../pages/Plugins/components/PluginCard.tsx | 6 +- src/core/ui/settings/pages/Plugins/index.tsx | 159 ++++++++---------- .../ui/settings/pages/Plugins/models/bunny.ts | 2 +- .../Plugins/sheets/PluginInfoActionSheet.tsx | 18 +- src/lib/plugins/index.ts | 4 + 6 files changed, 93 insertions(+), 106 deletions(-) diff --git a/src/core/ui/components/AddonPage.tsx b/src/core/ui/components/AddonPage.tsx index 66b82bc..255a9ca 100644 --- a/src/core/ui/components/AddonPage.tsx +++ b/src/core/ui/components/AddonPage.tsx @@ -27,19 +27,19 @@ interface AddonPageProps { safeModeHint?: { message?: string; footer?: ReactNode; - } + }; installAction?: { label?: string; // Ignored when onPress is defined! fetchFn?: (url: string) => Promise; onPress?: () => void; - } + }; CardComponent: ComponentType>; ListHeaderComponent?: ComponentType; ListFooterComponent?: ComponentType; } -function InputAlert(props: { label: string, fetchFn: (url: string) => Promise }) { +function InputAlert(props: { label: string, fetchFn: (url: string) => Promise; }) { const [value, setValue] = React.useState(""); const [error, setError] = React.useState(""); const [isFetching, setIsFetching] = React.useState(false); @@ -122,7 +122,7 @@ export default function AddonPage({ CardComponent, ...props }: }, [props.items, sortFn, search]); const onInstallPress = useCallback(() => { - if (!props.installAction) return () => {}; + if (!props.installAction) return () => { }; const { label, onPress, fetchFn } = props.installAction; if (fetchFn) { openAlert("AddonInputAlert", ); @@ -175,7 +175,7 @@ export default function AddonPage({ CardComponent, ...props }: })} />} - {props.ListHeaderComponent && } + {props.ListHeaderComponent && !search && } ); diff --git a/src/core/ui/settings/pages/Plugins/components/PluginCard.tsx b/src/core/ui/settings/pages/Plugins/components/PluginCard.tsx index 4053d5f..49b3495 100644 --- a/src/core/ui/settings/pages/Plugins/components/PluginCard.tsx +++ b/src/core/ui/settings/pages/Plugins/components/PluginCard.tsx @@ -10,7 +10,7 @@ import { Image, View } from "react-native"; import { UnifiedPluginModel } from ".."; -const CardContext = createContext<{ plugin: UnifiedPluginModel, result: Fuzzysort.KeysResult }>(null!); +const CardContext = createContext<{ plugin: UnifiedPluginModel, result: Fuzzysort.KeysResult; }>(null!); const useCardContext = () => useContext(CardContext); function getHighlightColor(): import("react-native").ColorValue { @@ -92,7 +92,7 @@ function Description() { ; } -const Actions = memo(() => { +const Actions = () => { const { plugin } = useCardContext(); const navigation = NavigationNative.useNavigation(); @@ -118,7 +118,7 @@ const Actions = memo(() => { )} /> ; -}); +}; export default function PluginCard({ result, item: plugin }: CardWrapper) { plugin.usePluginState(); diff --git a/src/core/ui/settings/pages/Plugins/index.tsx b/src/core/ui/settings/pages/Plugins/index.tsx index f49f4af..de3a32c 100644 --- a/src/core/ui/settings/pages/Plugins/index.tsx +++ b/src/core/ui/settings/pages/Plugins/index.tsx @@ -5,18 +5,30 @@ import { VdPluginManager } from "@core/vendetta/plugins"; import { findAssetId } from "@lib/api/assets"; import { settings } from "@lib/api/settings"; import { useProxy } from "@lib/api/storage"; +import { useProxy as useNewProxy } from "@lib/api/storage/new"; import { showToast } from "@lib/ui/toasts"; import { BUNNY_PROXY_PREFIX, VD_PROXY_PREFIX } from "@lib/utils/constants"; import { lazyDestructure } from "@lib/utils/lazy"; import { Author } from "@lib/utils/types"; import { findByProps } from "@metro"; -import { NavigationNative } from "@metro/common"; -import { Button, Card, FlashList, IconButton, Stack, Text } from "@metro/common/components"; +import { NavigationNative, tokens } from "@metro/common"; +import { Card, FlashList, IconButton, PressableScale, Stack, Text } from "@metro/common/components"; import { ComponentProps } from "react"; import { Image, View } from "react-native"; import unifyVdPlugin from "./models/vendetta"; +import { isCorePlugin, isPluginInstalled, pluginSettings, registeredPlugins } from "@lib/plugins"; +import unifyBunnyPlugin from "./models/bunny"; +import { createStyles } from "@lib/ui/styles"; +const useStyles = createStyles({ + xButton: { + position: "absolute", + right: 8, + top: 8, + tintColor: tokens.colors.INTERACTIVE_NORMAL + } +}); export interface UnifiedPluginModel { id: string; name: string; @@ -67,45 +79,63 @@ export default function Plugins() { const navigation = NavigationNative.useNavigation(); return useProxy(VdPluginManager.plugins) && Object.values(VdPluginManager.plugins)} - resolveItem={unifyVdPlugin} + useItems={() => { + useProxy(VdPluginManager.plugins); + useNewProxy(pluginSettings); + + const vdPlugins = Object.values(VdPluginManager.plugins).map(unifyVdPlugin); + const bnPlugins = [...registeredPlugins.values()].filter(p => isPluginInstalled(p.id) && !isCorePlugin(p.id)).map(unifyBunnyPlugin); + + return [...vdPlugins, ...bnPlugins]; + }} ListHeaderComponent={() => { + const styles = useStyles(); const unproxiedPlugins = Object.values(VdPluginManager.plugins).filter(p => !p.id.startsWith(VD_PROXY_PREFIX) && !p.id.startsWith(BUNNY_PROXY_PREFIX)); if (!unproxiedPlugins.length) return null; - return - - - Unproxied Plugins Found - - Plugins installed from unproxied sources may run unverified code in this app without your awareness. - + return + + {/* { + + }} + > + + */} + + + Unproxied Plugins Found + + Plugins installed from unproxied sources may run unverified code in this app without your awareness. + + + + { + navigation.push("BUNNY_CUSTOM_PAGE", { + title: "Unproxied Plugins", + render: () => { + return } + renderItem={({ item: p }: any) => + {p.id} + } + />; + } + }); + }} + /> + - - { - navigation.push("BUNNY_CUSTOM_PAGE", { - title: "Unproxied Plugins", - render: () => { - return } - renderItem={({ item: p }: any) => - {p.id} - } - />; - } - }); - }} - /> - - - ; + + ; }} installAction={{ label: "Install a plugin", @@ -135,61 +165,4 @@ export default function Plugins() { } }} />; - - // const navigation = NavigationNative.useNavigation(); - // const { width: pageWidth } = useWindowDimensions(); - - // const state = useSegmentedControlState({ - // pageWidth, - // items: [ - // { - // label: "Vendetta", - // id: "vendetta-plugins", - // page: ( - // useProxy(VdPluginManager.plugins) && Object.values(VdPluginManager.plugins)} - // resolveItem={unifyVdPlugin} - // fetchFunction={(url: string) => VdPluginManager.installPlugin(url)} - // /> - // ) - // }, - // { - // label: "Bunny", - // id: "bunny-plugins", - // page: ( - // (useNewProxy(pluginSettings), [...registeredPlugins.values()].filter(p => isPluginInstalled(p.id)))} - // resolveItem={unifyBunnyPlugin} - // ListHeaderComponent={() => ( - // - // - // Bunny plugin system is in no way ready, try not getting yourself burnt ⚠️ - // - // - // )} - // ListFooterComponent={() => ( - // - // {"Looking for more?"} - //