chore+fix: bunch of stuff

- funny hack for the funny react bug not rendering for some state change for some reason
- funny unproxied plugin warning
- addons alert input is clearable now

src/core/ui/components/AddonPage.tsx

@@ -60,6 +60,7 @@ function InputAlert(props: { label: string, fetchFn: (url: string) => Promise<vo
             <Stack style={{ marginTop: -12 }}>
                 <TextInput
                     autoFocus={true}
+                    isClearable={true}
                     value={value}
                     onChange={(v: string) => {
                         setValue(v);
@@ -149,7 +150,6 @@ export default function AddonPage<T extends object>({ CardComponent, ...props }:
 
     const headerElement = (
         <View style={{ paddingBottom: 8 }}>
-            {props.ListHeaderComponent && <props.ListHeaderComponent />}
             {settings.safeMode?.enabled && <View style={{ marginBottom: 10 }}>
                 <HelpMessage messageType={0}>
                     {props.safeModeHint?.message}
@@ -160,7 +160,7 @@ export default function AddonPage<T extends object>({ CardComponent, ...props }:
                 <Search style={{ flexGrow: 1 }} isRound={!!props.sortOptions} onChangeText={v => setSearch(v)} />
                 {props.sortOptions && <IconButton
                     icon={findAssetId("ic_forum_channel_sort_order_24px")}
-                    variant="secondary"
+                    variant="tertiary"
                     disabled={!!search}
                     onPress={() => showSimpleActionSheet({
                         key: "AddonListSortOptions",
@@ -175,6 +175,7 @@ export default function AddonPage<T extends object>({ CardComponent, ...props }:
                     })}
                 />}
             </View>
+            {props.ListHeaderComponent && <props.ListHeaderComponent />}
         </View>
     );
 

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

@@ -123,6 +123,7 @@ const Actions = memo(() => {
 export default function PluginCard({ result, item: plugin }: CardWrapper<UnifiedPluginModel>) {
     plugin.usePluginState();
 
+    const [, forceUpdate] = React.useReducer(() => ({}), 0);
     const cardContextValue = useMemo(() => ({ plugin, result }), [plugin, result]);
 
     return (
@@ -141,6 +142,7 @@ export default function PluginCard({ result, item: plugin }: CardWrapper<Unified
                                     value={plugin.isEnabled()}
                                     onValueChange={(v: boolean) => {
                                         plugin.toggle(v);
+                                        forceUpdate();
                                     }}
                                 />
                             </Stack>

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

@@ -10,8 +10,10 @@ 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 { Card, Text } from "@metro/common/components";
+import { NavigationNative } from "@metro/common";
+import { Button, Card, FlashList, Text } from "@metro/common/components";
 import { ComponentProps } from "react";
+import { View } from "react-native";
 
 import unifyVdPlugin from "./models/vendetta";
 
@@ -69,17 +71,51 @@ function PluginPage(props: PluginPageProps) {
 
 export default function Plugins() {
     useProxy(settings);
+    const navigation = NavigationNative.useNavigation();
 
     return <PluginPage
         useItems={() => useProxy(VdPluginManager.plugins) && Object.values(VdPluginManager.plugins)}
         resolveItem={unifyVdPlugin}
+        ListHeaderComponent={() => {
+            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;
+
+            // TODO: Make this dismissable
+            return <Card style={{ marginVertical: 8, gap: 4 }}>
+                <Text variant="heading-lg/bold">Unproxied Plugins Detected</Text>
+                <Text variant="text-md/medium">Installed plugins from unproxied sources may execute unreviewed code in this app without your knowledge.</Text>
+                <View style={{ marginTop: 8, flexDirection: "row" }}>
+                    <Button
+                        style={{ flexShrink: 1 }}
+                        size="sm"
+                        text="Review"
+                        variant="secondary"
+                        onPress={() => {
+                            navigation.push("BUNNY_CUSTOM_PAGE", {
+                                title: "Unproxied Plugins",
+                                render: () => {
+                                    return <FlashList
+                                        data={unproxiedPlugins}
+                                        contentContainerStyle={{ padding: 8 }}
+                                        ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
+                                        renderItem={({ item: p }: any) => <Card>
+                                            <Text variant="heading-md/semibold">{p.id}</Text>
+                                        </Card>}
+                                    />;
+                                }
+                            });
+                        }}
+                    />
+                </View>
+            </Card>;
+        }}
         installAction={{
             label: "Install a plugin",
             fetchFn: async (url: string) => {
                 if (!url.startsWith(VD_PROXY_PREFIX) && !url.startsWith(BUNNY_PROXY_PREFIX) && !settings.developerSettings) {
                     openAlert("bunny-plugin-unproxied-confirmation", <AlertModal
                         title="Hold On!"
-                        content="You're trying to install a plugin from an external source. This means you're trusting the creator to run their code in this app. Are you sure you want to continue?"
+                        content="You're trying to install a plugin from an unproxied external source. This means you're trusting the creator to run their code in this app without your knowledge. Are you sure you want to continue?"
                         extraContent={<Card><Text variant="text-md/bold">{url}</Text></Card>}
                         actions={<AlertActions>
                             <AlertActionButton text="Continue" variant="primary" onPress={() => {

src/core/vendetta/plugins.ts

@@ -147,7 +147,7 @@ export const VdPluginManager = {
             delete pluginInstance[id];
         }
 
-        disable && (plugin.enabled = false);
+        if (disable) plugin.enabled = false;
     },
 
     async removePlugin(id: string) {

src/lib/api/storage/index.ts

@@ -9,6 +9,7 @@ export function createProxy(target: any = {}): { proxy: any; emitter: Emitter; }
     const parentTarget = target;
 
     const childrens = new WeakMap<any, any>();
+    const proxiedChildrenSet = new WeakSet<any>();
 
     function createProxy(target: any, path: string[]): any {
         return new Proxy(target, {
@@ -26,6 +27,7 @@ export function createProxy(target: any = {}): { proxy: any; emitter: Emitter; }
                     });
 
                     if (typeof value === "object") {
+                        if (proxiedChildrenSet.has(value)) return value;
                         if (childrens.has(value)) return childrens.get(value);
 
                         const childrenProxy = createProxy(value, newPath);
@@ -41,19 +43,22 @@ export function createProxy(target: any = {}): { proxy: any; emitter: Emitter; }
 
             set(target, prop: string, value) {
                 if (typeof value === "object") {
-                    if (childrens.has(value)) return childrens.get(value);
-
-                    const childrenProxy = createProxy(value, [...path, prop]);
-                    childrens.set(value, childrenProxy);
-                    target[prop] = childrenProxy;
+                    if (childrens.has(value)) {
+                        target[prop] = childrens.get(value);
+                    } else {
+                        const childrenProxy = createProxy(value, [...path, prop]);
+                        childrens.set(value, childrenProxy);
+                        proxiedChildrenSet.add(value);
+                        target[prop] = childrenProxy;
+                    }
                 } else {
                     target[prop] = value;
                 }
 
                 emitter.emit("SET", {
                     parent: parentTarget,
                     path: [...path, prop],
-                    value,
+                    value: target[prop],
                 });
                 // we do not care about success, if this actually does fail we have other problems
                 return true;
@@ -88,7 +93,6 @@ export function useProxy<T>(storage: T): T {
     React.useEffect(() => {
         const listener: EmitterListener = (event: EmitterEvent, data: EmitterListenerData) => {
             if (event === "DEL" && data.value === storage) return;
-            console.log({ event, data });
             forceUpdate();
         };
 
@@ -99,7 +103,7 @@ export function useProxy<T>(storage: T): T {
             emitter.off("SET", listener);
             emitter.off("DEL", listener);
         };
-    }, [storage]);
+    }, []);
 
     return storage;
 }