ui(plugins): use ContextMenu

src/index.ts

@@ -1,7 +1,7 @@
 import { patchLogHook } from "@lib/debug";
 import { patchCommands } from "@lib/commands";
 import { initPlugins } from "@lib/plugins";
-import { initThemes, patchChatBackground } from "@lib/themes";
+import { patchChatBackground } from "@lib/themes";
 import { patchAssets } from "@ui/assets";
 import initQuickInstall from "@ui/quickInstall";
 import initSafeMode from "@ui/safeMode";
@@ -10,7 +10,6 @@ import initFixes from "@lib/fixes";
 import logger from "@lib/logger";
 import windowObject from "@lib/windowObject";
 
-initThemes()
 export default async () => {
     // Load everything in parallel
     const unloads = await Promise.all([

src/ui/components/ContextMenu.tsx

@@ -0,0 +1,17 @@
+import { findByProps } from "@/lib/metro/filters";
+
+const { ContextMenu } = findByProps("ContextMenu");
+
+export default ContextMenu as (props: {
+    triggerOnLongPress: boolean;
+    items: Array<{ 
+        label: string, 
+        iconSource: number, 
+        action: () => unknown,
+        [key: string]: any;
+    }>;
+    align: "left" | "right" | "above" | "below" | "auto" | null;
+    title: string;
+    children: React.FC;
+    [key: string]: any;
+}) => JSX.Element;

src/ui/settings/components/AssetDisplay.tsx

@@ -1,7 +1,6 @@
 import { Asset } from "@types";
 import { ReactNative as RN, clipboard } from "@metro/common";
 import { showToast } from "@ui/toasts";
-import { getAssetIDByName } from "@ui/assets";
 import { Forms } from "@ui/components";
 
 interface AssetDisplayProps { asset: Asset }

src/ui/settings/components/Card.tsx

@@ -1,9 +1,10 @@
+import ContextMenu from "@/ui/components/ContextMenu";
 import { ReactNative as RN, stylesheet } from "@metro/common";
 import { findByProps } from "@metro/filters";
 import { getAssetIDByName } from "@ui/assets";
 import { semanticColors } from "@ui/color";
 
-const { TableRow, TableRowIcon, TableSwitchRow, TableCheckboxRow, TableRowGroup } = findByProps("TableRow");
+const { TableRow, TableRowIcon, TableSwitchRow, TableCheckboxRow, TableRowGroup, IconButton } = findByProps("TableRow");
 const { hideActionSheet } = findByProps("openLazy", "hideActionSheet");
 const { showSimpleActionSheet } = findByProps("showSimpleActionSheet");
 
@@ -53,6 +54,7 @@ interface CardProps {
     toggleValue?: boolean;
     onToggleChange?: (v: boolean) => void;
     descriptionLabel?: string | React.ComponentType;
+    /** @deprecated use overflowActions */
     actions?: Action[];
     overflowTitle?: string;
     overflowActions?: OverflowAction[];
@@ -87,26 +89,24 @@ export default function Card(props: CardProps) {
                 label={props.descriptionLabel}
                 trailing={
                     <RN.View style={styles.actions}>
-                        {props.overflowActions && <RN.TouchableOpacity
-                            onPress={() => showSimpleActionSheet({
-                                key: "CardOverflow",
-                                header: {
-                                    title: props.overflowTitle,
-                                    icon: props.headerIcon && <TableRowIcon style={{ marginRight: 8 }} source={getAssetIDByName(props.headerIcon)} />,
-                                    onClose: () => hideActionSheet(),
-                                },
-                                options: props.overflowActions?.map(i => ({ ...i, icon: getAssetIDByName(i.icon) })),
-                            })}
-                        >
-                            <RN.Image style={styles.actionIcon} source={getAssetIDByName("ic_more_24px")} />
-                        </RN.TouchableOpacity>}
-                        {props.actions?.map(({ icon, onPress }) => (
-                            <RN.TouchableOpacity
-                                onPress={onPress}
-                            >
-                                <RN.Image style={styles.actionIcon} source={getAssetIDByName(icon)} />
-                            </RN.TouchableOpacity>
-                        ))}
+                        {props.overflowActions &&
+                            <ContextMenu
+                                triggerOnLongPress={false}
+                                items={props.overflowActions.map(i => ({ 
+                                    label: i.label,
+                                    iconSource: getAssetIDByName(i.icon),
+                                    action: i.onPress
+                                }))}
+                                align="below"
+                                title={props.overflowTitle!!}
+                                children={(props) => <IconButton
+                                    {...props}
+                                    size="sm"
+                                    variant="secondary"
+                                    icon={getAssetIDByName("ic_settings_white_24px")} 
+                                />}
+                            />
+                        }
                     </RN.View>
                 }
             />

src/ui/settings/components/PluginCard.tsx

@@ -42,6 +42,14 @@ export default function PluginCard({ item: plugin, index }: CardWrapper<Plugin>)
             descriptionLabel={plugin.manifest.description}
             overflowTitle={plugin.manifest.name}
             overflowActions={[
+                ...(settings ? [{
+                    label: "Plugin settings",
+                    icon: "settings",
+                    onPress: () => navigation.push("VendettaCustomPage", {
+                        title: plugin.manifest.name,
+                        render: settings,
+                    })
+                }] : []),
                 {
                     icon: "ic_sync_24px",
                     label: "Refetch",
@@ -112,16 +120,7 @@ export default function PluginCard({ item: plugin, index }: CardWrapper<Plugin>)
                             }
                         }
                     }),
-                },
-            ]}
-            actions={[
-                ...(settings ? [{
-                    icon: "settings",
-                    onPress: () => navigation.push("VendettaCustomPage", {
-                        title: plugin.manifest.name,
-                        render: settings,
-                    })
-                }] : []),
+                }
             ]}
         />
     )