feat: yet another plugin sheet redesign

src/core/reporter/PluginReporter.ts

@@ -29,7 +29,7 @@ export default {
 
     updateStage(id: string, stage: PluginStage) {
         this.stages[id] = stage;
-        if (stage === PluginStage.STARTED && this.errors[id]) {
+        if (stage === PluginStage.RUNNING && this.errors[id]) {
             delete this.errors[id];
         }
     },

src/core/reporter/enums.ts

@@ -7,7 +7,7 @@ export enum PluginStage {
     INSTANTIATING = "INSTANTIATING",
     INSTANTIATED = "INSTANTIATED",
     STARTING = "STARTING",
-    STARTED = "STARTED",
+    RUNNING = "RUNNING",
     STOPPING = "STOPPING",
     STOPPED = "STOPPED"
 }

src/core/ui/components/AddonPage.tsx

@@ -1,21 +1,20 @@
 import BunnySettings from "@core/storage/BunnySettings";
 import { CardWrapper } from "@core/ui/components/AddonCard";
 import { findAssetId } from "@lib/api/assets";
+import { dismissAlert, openAlert } from "@lib/ui/alerts";
 import { showSheet } from "@lib/ui/sheets";
 import isValidHttpUrl from "@lib/utils/isValidHttpUrl";
 import { lazyDestructure } from "@lib/utils/lazy";
 import { findByProps } from "@metro";
 import { clipboard, NavigationNative } from "@metro/common";
-import { Button, FlashList, FloatingActionButton, HelpMessage, IconButton, Stack, Text, TextInput } from "@metro/common/components";
+import { AlertActionButton, AlertModal, Button, FlashList, FloatingActionButton, HelpMessage, IconButton, Stack, Text, TextInput } from "@metro/common/components";
 import { ErrorBoundary, Search } from "@ui/components";
 import { isNotNil } from "es-toolkit";
 import fuzzysort from "fuzzysort";
 import { ComponentType, ReactNode, useCallback, useEffect, useMemo } from "react";
 import { Image, ScrollView, View } from "react-native";
 
 const { showSimpleActionSheet, hideActionSheet } = lazyDestructure(() => findByProps("showSimpleActionSheet"));
-const { openAlert, dismissAlert } = lazyDestructure(() => findByProps("openAlert", "dismissAlert"));
-const { AlertModal, AlertActionButton } = lazyDestructure(() => findByProps("AlertModal", "AlertActions"));
 
 type SearchKeywords<T> = Array<string | ((obj: T & {}) => string)>;
 

src/core/ui/settings/index.ts

@@ -1,6 +1,9 @@
 import PyoncordIcon from "@assets/icons/pyoncord.png";
 import { Strings } from "@core/i18n";
 import BunnySettings from "@core/storage/BunnySettings";
+import { FontManager } from "@lib/addons/fonts";
+import { PluginManager } from "@lib/addons/plugins";
+import { ColorManager } from "@lib/addons/themes/colors";
 import { findAssetId } from "@lib/api/assets";
 import { LOADER_IDENTITY } from "@lib/api/native/loader";
 import { registerSection } from "@ui/settings";
@@ -25,21 +28,39 @@ export default function initSettings() {
                 key: "BUNNY_PLUGINS",
                 title: () => Strings.PLUGINS,
                 icon: findAssetId("ActivitiesIcon"),
-                render: () => import("@core/ui/settings/pages/Plugins")
+                render: () => import("@core/ui/settings/pages/Plugins"),
+                rawTabsConfig: {
+                    useTrailing: () => {
+                        PluginManager.usePlugins();
+                        return `${PluginManager.getAllIds().length} installed`;
+                    }
+                }
             },
             {
                 key: "BUNNY_THEMES",
                 title: () => Strings.THEMES,
                 icon: findAssetId("PaintPaletteIcon"),
                 render: () => import("@core/ui/settings/pages/Themes"),
-                usePredicate: () => LOADER_IDENTITY.features.themes != null
+                usePredicate: () => LOADER_IDENTITY.features.themes != null,
+                rawTabsConfig: {
+                    useTrailing: () => {
+                        ColorManager.useColors();
+                        return `${ColorManager.getAllIds().length} installed`;
+                    }
+                }
             },
             {
                 key: "BUNNY_FONTS",
                 title: () => Strings.FONTS,
                 icon: findAssetId("ic_add_text"),
                 render: () => import("@core/ui/settings/pages/Fonts"),
-                usePredicate: () => LOADER_IDENTITY.features.fonts != null
+                usePredicate: () => LOADER_IDENTITY.features.fonts != null,
+                rawTabsConfig: {
+                    useTrailing: () => {
+                        FontManager.useFonts();
+                        return `${FontManager.getAllIds().length} installed`;
+                    }
+                }
             },
             {
                 key: "BUNNY_DEVELOPER",

src/core/ui/settings/pages/General/Version.tsx

@@ -1,6 +1,6 @@
 import { findAssetId } from "@lib/api/assets";
 import { clipboard } from "@metro/common";
-import { LegacyFormText, TableRow } from "@metro/common/components";
+import { TableRow, Text } from "@metro/common/components";
 import { showToast } from "@ui/toasts";
 
 interface VersionProps {
@@ -14,7 +14,7 @@ export default function Version({ label, version, icon }: VersionProps) {
         <TableRow
             label={label}
             icon={<TableRow.Icon source={findAssetId(icon)} />}
-            trailing={<LegacyFormText>{version}</LegacyFormText>}
+            trailing={<Text variant="text-sm/normal">{version}</Text>}
             onPress={() => {
                 clipboard.setString(`${label} - ${version}`);
                 showToast.showCopyToClipboard();

src/core/ui/settings/pages/General/index.tsx

@@ -5,9 +5,11 @@ import { PyoncordIcon } from "@core/ui/settings";
 import About from "@core/ui/settings/pages/General/About";
 import { findAssetId } from "@lib/api/assets";
 import { getDebugInfo } from "@lib/api/debug";
+import { RTNBundleUpdaterManager } from "@lib/api/native/rn-modules";
 import { DISCORD_SERVER, GITHUB } from "@lib/constants";
+import { openAlert } from "@lib/ui/alerts";
 import { NavigationNative, url } from "@metro/common";
-import { Stack, TableRow, TableRowGroup, TableSwitchRow } from "@metro/common/components";
+import { AlertActionButton, AlertActions, AlertModal, Stack, TableRow, TableRowGroup, TableSwitchRow } from "@metro/common/components";
 import { NativeModules, ScrollView } from "react-native";
 
 export default function General() {
@@ -57,18 +59,36 @@ export default function General() {
                 <TableRowGroup title={Strings.ACTIONS}>
                     <TableRow
                         label={Strings.RELOAD_DISCORD}
-                        icon={<TableRow.Icon source={findAssetId("ic_message_retry")!} />}
+                        icon={<TableRow.Icon source={findAssetId("RetryIcon")!} />}
                         onPress={() => NativeModules.BundleUpdaterManager.reload()}
                     />
-                    <TableRow
-                        label={BunnySettings.isSafeMode() ? Strings.RELOAD_IN_NORMAL_MODE : Strings.RELOAD_IN_SAFE_MODE}
-                        subLabel={BunnySettings.isSafeMode() ? Strings.RELOAD_IN_NORMAL_MODE_DESC : Strings.RELOAD_IN_SAFE_MODE_DESC}
-                        icon={<TableRow.Icon source={findAssetId("ic_privacy_24px")!} />}
-                        onPress={() => toggleSafeMode()}
+                    <TableSwitchRow
+                        label={"Safe Mode"}
+                        subLabel={"Load Bunny without loading add-ons"}
+                        icon={<TableRow.Icon source={findAssetId("ShieldIcon")!} />}
+                        value={BunnySettings.isSafeMode()}
+                        onValueChange={(to: boolean) => {
+                            toggleSafeMode({ to, reload: false });
+                            openAlert(
+                                "bunny-reload-safe-mode",
+                                <AlertModal
+                                    title="Reload now?"
+                                    content={!to ? "All add-ons will load normally." : "All add-ons will be temporarily disabled upon reload."}
+                                    actions={<AlertActions>
+                                        <AlertActionButton
+                                            text="Reload Now"
+                                            variant="destructive"
+                                            onPress={() => RTNBundleUpdaterManager.reload()}
+                                        />
+                                        <AlertActionButton text="Later" variant="secondary" />
+                                    </AlertActions>}
+                                />
+                            );
+                        }}
                     />
                     <TableSwitchRow
                         label={Strings.DEVELOPER_SETTINGS}
-                        icon={<TableRow.Icon source={findAssetId("ic_progress_wrench_24px")!} />}
+                        icon={<TableRow.Icon source={findAssetId("WrenchIcon")!} />}
                         value={BunnySettings.developer.enabled}
                         onValueChange={(v: boolean) => {
                             BunnySettings.developer.enabled = v;
@@ -79,7 +99,7 @@ export default function General() {
                     <TableSwitchRow
                         label={Strings.SETTINGS_ACTIVATE_DISCORD_EXPERIMENTS}
                         subLabel={Strings.SETTINGS_ACTIVATE_DISCORD_EXPERIMENTS_DESC}
-                        icon={<TableRow.Icon source={findAssetId("ic_progress_wrench_24px")!} />}
+                        icon={<TableRow.Icon source={findAssetId("WrenchIcon")!} />}
                         value={BunnySettings.general.patchIsStaff}
                         onValueChange={(v: boolean) => {
                             BunnySettings.general.patchIsStaff = v;

src/core/ui/settings/pages/Plugins/components/PluginCard.tsx

@@ -1,4 +1,5 @@
 import { CardWrapper } from "@core/ui/components/AddonCard";
+import { UnifiedPluginModel } from "@core/ui/settings/pages/Plugins/models/UnifiedPluginModel";
 import { usePluginCardStyles } from "@core/ui/settings/pages/Plugins/usePluginCardStyles";
 import usePluginStatusColor from "@core/ui/settings/pages/Plugins/usePluginStatusColor";
 import { findAssetId } from "@lib/api/assets";
@@ -9,8 +10,6 @@ import chroma from "chroma-js";
 import { createContext, useContext, useMemo } from "react";
 import { Image, View } from "react-native";
 
-import { UnifiedPluginModel } from "..";
-
 const CardContext = createContext<{ plugin: UnifiedPluginModel, result: Fuzzysort.KeysResult<UnifiedPluginModel> }>(null!);
 const useCardContext = () => useContext(CardContext);
 

src/core/ui/settings/pages/Plugins/index.tsx

@@ -8,34 +8,16 @@ import { Author } from "@lib/addons/types";
 import { findAssetId } from "@lib/api/assets";
 import { useObservable } from "@lib/api/storage";
 import { BUNNY_PROXY_PREFIX, VD_PROXY_PREFIX } from "@lib/constants";
+import { openAlert } from "@lib/ui/alerts";
 import { showToast } from "@lib/ui/toasts";
-import { lazyDestructure } from "@lib/utils/lazy";
-import { findByProps } from "@metro";
 import { NavigationNative } from "@metro/common";
-import { Button, Card, FlashList, Text, TwinButtons } from "@metro/common/components";
+import { AlertActionButton, AlertActions, AlertModal, Button, Card, FlashList, Text, TwinButtons } from "@metro/common/components";
 import { ComponentProps, useState } from "react";
 import { View } from "react-native";
 
+import { UnifiedPluginModel } from "./models/UnifiedPluginModel";
 import unifyVdPlugin from "./models/vendetta";
 
-export interface UnifiedPluginModel {
-    id: string;
-    name: string;
-    description?: string;
-    authors?: Array<Author | string>;
-    icon?: string;
-
-    isEnabled(): boolean;
-    usePluginState(): void;
-    isInstalled(): boolean;
-    toggle(start: boolean): void;
-    resolveSheetComponent(): Promise<{ default: React.ComponentType<any>; }>;
-    getPluginSettingsComponent(): React.ComponentType<any> | null | undefined;
-}
-
-const { openAlert } = lazyDestructure(() => findByProps("openAlert", "dismissAlert"));
-const { AlertModal, AlertActions, AlertActionButton } = lazyDestructure(() => findByProps("AlertModal", "AlertActions"));
-
 interface PluginPageProps extends Partial<ComponentProps<typeof AddonPage<UnifiedPluginModel>>> {
     useItems: () => unknown[];
 }
@@ -72,7 +54,8 @@ export default function Plugins() {
             return PluginManager.getAllIds().map(id => PluginManager.getManifest(id));
         }}
         resolveItem={unifyVdPlugin}
-        ListHeaderComponent={() => <HeaderComponent />}
+        ListHeaderComponent={HeaderComponent}
+        ListFooterComponent={FooterComponent}
         installAction={{
             label: "Install a plugin",
             fetchFn: async (url: string) => {
@@ -104,6 +87,15 @@ export default function Plugins() {
         }}
     />;
 }
+
+function FooterComponent() {
+    return <View style={{ flexDirection: "row", justifyContent: "center", paddingVertical: 8 }}>
+        <Text variant="text-sm/semibold">
+            {PluginManager.getAllIds().length} installed
+        </Text>
+    </View>;
+}
+
 function HeaderComponent() {
     const [dismissUnproxied, setDismissUnproxied] = useState(false);
     const navigation = NavigationNative.useNavigation();

src/core/ui/settings/pages/Plugins/models/UnifiedPluginModel.tsx

@@ -0,0 +1,17 @@
+import { Author } from "@lib/addons/types";
+
+
+export interface UnifiedPluginModel {
+    id: string;
+    name: string;
+    description?: string;
+    authors?: Array<Author>;
+    icon?: string;
+
+    isEnabled(): boolean;
+    usePluginState(): void;
+    isInstalled(): boolean;
+    toggle(start: boolean): void | Promise<void>;
+    resolveSheetComponent(): Promise<{ default: React.ComponentType<any>; }>;
+    getPluginSettingsComponent(): React.ComponentType<any> | null | undefined;
+}

src/core/ui/settings/pages/Plugins/models/vendetta.ts

@@ -1,7 +1,7 @@
 import PluginManager from "@lib/addons/plugins/PluginManager";
 import { BunnyPluginManifest } from "@lib/addons/plugins/types";
 
-import { UnifiedPluginModel } from "..";
+import { UnifiedPluginModel } from "./UnifiedPluginModel";
 
 export default function unifyVdPlugin(manifest: BunnyPluginManifest): UnifiedPluginModel {
     return {
@@ -17,12 +17,12 @@ export default function unifyVdPlugin(manifest: BunnyPluginManifest): UnifiedPlu
             PluginManager.usePlugin(manifest.id);
         },
         toggle(start: boolean) {
-            start
+            return start
                 ? PluginManager.enable(manifest.id)
                 : PluginManager.disable(manifest.id);
         },
         resolveSheetComponent() {
-            return import("../sheets/VdPluginInfoActionSheet");
+            return import("../sheets/PluginInfoActionSheet");
         },
         getPluginSettingsComponent() {
             return PluginManager.getSettingsComponent(manifest.id);

src/core/ui/settings/pages/Plugins/sheets/Badges.tsx

@@ -0,0 +1,32 @@
+import PluginReporter from "@core/reporter/PluginReporter";
+import usePluginStatusColor from "@core/ui/settings/pages/Plugins/usePluginStatusColor";
+import { PluginManager } from "@lib/addons/plugins";
+import { Text } from "@metro/common/components";
+import { View } from "react-native";
+
+import { useStyles } from "./useStyles";
+
+export function Badges(props: { id: string; }) {
+    PluginReporter.useReporter();
+
+    const styles = useStyles();
+    const stageColor = usePluginStatusColor(props.id);
+
+    const stage = PluginReporter.stages[props.id];
+    const isProxied = PluginManager.isProxied(props.id);
+
+    return <View style={{ gap: 8, flexDirection: "row" }}>
+        {[
+            { text: stage, bg: stageColor },
+            isProxied && { text: "proxied" }
+        ].filter(x => x && typeof x === "object").map(badge => (
+            <Text
+                variant="eyebrow"
+                color={badge.bg ? "white" : "text-normal"}
+                style={[styles.badge, badge.bg ? { backgroundColor: badge.bg } : null]}
+            >
+                {badge.text}
+            </Text>
+        ))}
+    </View>;
+}