ui(plugins): partially revert to old design

bunny-mod · Jun 1, 2024 · 93ab105 · 93ab105
1 parent e660447
commit 93ab105
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 64 deletions.
diff --git 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 <Text variant="heading-lg/semibold">
-        {plugin.manifest.vendetta?.icon && <>
+    const iconName = plugin.manifest.vendetta?.icon;
+    const icon = iconName && requireAssetIndex(iconName);
+
+    return <Text
+        numberOfLines={1}
+        adjustsFontSizeToFit={true}
+        variant="heading-md/semibold"
+    >
+        {icon && <>
             <Image
-                style={styles.iconStyle}
-                source={{
-                    // This is pretty dirty but RN won't listen if I declare height and width somewhere else
-                    ...Image.resolveAssetSource(
-                        requireAssetIndex(plugin.manifest.vendetta?.icon)
-                    ),
-                    height: 18,
-                    width: 18
-                }}
+                style={styles.pluginIcon}
+                source={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 <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-        <Image
-            tintColor={TEXT_NORMAL}
-            source={{
-                ...Image.resolveAssetSource(
-                    requireAssetIndex("WarningIcon")
-                ),
-                height: 18,
-                width: 18
-            }}
-        />
+        <View style={styles.actionIcon}>
+            <Image
+                tintColor={INTERACTIVE_NORMAL}
+                source={requireAssetIndex("WarningIcon")}
+            />
+        </View>
         <Text variant="text-sm/semibold">
             There was an error while attempting to start this plugin.
         </Text>
     </View>;
 }
 
+function ActionIcon(props: {
+    onPress: () => void;
+    icon: string;
+    disabled?: boolean;
+}) {
+    const styles = usePluginCardStyles();
+
+    return <View style={props.disabled && { opacity: 0.4, pointerEvents: "none" }}>
+        <PressableScale onPress={() => !props.disabled && props.onPress()}>
+            <View style={styles.actionIconContainer}>
+                <Image
+                    source={requireAssetIndex(props.icon)}
+                    style={styles.actionIcon}
+                />
+            </View>
+        </PressableScale>
+    </View>;
+}
+
 export default function PluginCard({ item: plugin }: CardWrapper<BunnyPlugin>) {
     const navigation = NavigationNative.useNavigation();
+    const styles = usePluginCardStyles();
+
     useProxy(plugin);
 
     return (
@@ -96,20 +114,24 @@ export default function PluginCard({ item: plugin }: CardWrapper<BunnyPlugin>) {
                         </Stack>
                         <View style={{ marginLeft: "auto" }}>
                             <Stack spacing={12} direction="horizontal">
-                                <IconButton
-                                    onPress={() => {
-                                        showSheet(
+                                <View style={{ flexDirection: "row", gap: 6 }}>
+                                    <ActionIcon
+                                        icon="WrenchIcon"
+                                        disabled={!getSettings(plugin.id)}
+                                        onPress={() => navigation.push("VendettaCustomPage", {
+                                            title: plugin.manifest.name,
+                                            render: getSettings(plugin.id),
+                                        })}
+                                    />
+                                    <ActionIcon
+                                        icon="CircleInformationIcon-primary"
+                                        onPress={() => void showSheet(
                                             "PluginInfoActionSheet",
                                             import("./sheets/PluginInfoActionSheet"),
                                             { plugin, navigation }
-                                        );
-                                    }}
-                                    size="sm"
-                                    variant="secondary"
-                                    icon={requireAssetIndex(
-                                        getSettings(plugin.id) ? "SettingsIcon" : "MoreHorizontalIcon"
-                                    )}
-                                />
+                                        )}
+                                    />
+                                </View>
                                 <TableSwitch
                                     value={plugin.enabled}
                                     onValueChange={(v: boolean) => {

diff --git 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
@@ -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