plugins/ServerDrawer/manifest.json

@@ -1,13 +1,10 @@
 {
   "name": "Server Drawer",
-  "description": "Server Drawer above the YouBar, manage your servers differently! Now fully hides the Quest Dock/GuildsBar, adds a DM tile, optional server-name labels, and a settings screen.",
+  "description": "Server Drawer above the YouBar, manage your servers differently!",
   "authors": [
     {
       "name": "kmmiio99o",
       "id": "879393496627306587"
-    },
-    {
-      "name": "Rosie"
     }
   ],
   "main": "src/index.tsx",

plugins/ServerDrawer/src/components/DmTile.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { View, Pressable, Image, StyleSheet } from "react-native";
-import { getAssetIDByName } from "@vendetta/ui/assets";
-import { findByProps, findByName } from "@vendetta/metro";
-
-const ICON = 48;
-
-const ChatIcon = getAssetIDByName("ChatIcon");
-const Haptic = findByProps("triggerHapticFeedback", "HapticFeedbackTypes");
-const ChannelActions = findByProps("selectPrivateChannel");
-const SelectedChannelStore = findByName("SelectedChannelStore");
-const Flux = findByProps("useStateFromStores");
-const NavContext = findByProps("getGuildId");
-const colors = findByProps("colors", "unsafe_rawColors")?.colors;
-
-function openDms() {
-    Haptic?.triggerHapticFeedback?.(Haptic.HapticFeedbackTypes.SOFT);
-    if (ChannelActions?.selectPrivateChannel) {
-        const lastChannelId = SelectedChannelStore?.getLastSelectedChannelId?.();
-        ChannelActions.selectPrivateChannel(lastChannelId);
-    }
-}
-
-// Moved into the drawer's own grid as the first tile, since this plugin otherwise hides the
-// native rail DMs used to live on.
-export default function DmTile() {
-    const selected = Flux?.useStateFromStores?.(
-        [NavContext],
-        () => NavContext?.getGuildId?.() == null,
-    ) ?? false;
-
-    return (
-        <Pressable onPress={openDms} style={st.outer}>
-            <View style={[st.icon, { backgroundColor: selected ? (colors?.BG_ACCENT ?? "#5865f2") : "rgba(128,128,128,0.24)" }]}>
-                <Image source={ChatIcon} style={{ width: 24, height: 24, tintColor: "#fff" }} />
-            </View>
-        </Pressable>
-    );
-}
-
-const st = StyleSheet.create({
-    outer: { width: ICON, height: ICON },
-    icon: { width: ICON, height: ICON, borderRadius: 16, alignItems: "center", justifyContent: "center" },
-});

plugins/ServerDrawer/src/components/FolderItem.tsx

@@ -82,7 +82,7 @@ function FadeIn({ children }: { children: React.ReactNode }) {
     return <Animated.View style={{ opacity }}>{children}</Animated.View>;
 }
 
-export default function FolderItem({ node, onPick, showNames }: { node: GuildNode; onPick: (id: string) => void; showNames?: boolean }) {
+export default function FolderItem({ node, onPick }: { node: GuildNode; onPick: (id: string) => void }) {
     const open = useFolderExpanded(node.id);
 
     const toggle = () => {
@@ -99,7 +99,7 @@ export default function FolderItem({ node, onPick, showNames }: { node: GuildNod
                 </Pressable>
                 {node.children.map((ch) => (
                     <FadeIn key={ch.id}>
-                        <GuildItem node={ch} onPick={onPick} showNames={showNames} />
+                        <GuildItem node={ch} onPick={onPick} />
                     </FadeIn>
                 ))}
             </>

plugins/ServerDrawer/src/components/GuildItem.tsx

@@ -12,7 +12,6 @@ const GuildReadStateStore = findByStoreName("GuildReadStateStore");
 const GuildStore = findByStoreName("GuildStore");
 const SortedGuildStore = findByStoreName("SortedGuildStore");
 const Haptic = findByProps("triggerHapticFeedback", "HapticFeedbackTypes");
-const colors = findByProps("colors", "unsafe_rawColors")?.colors;
 
 function Badge({ guildId }: { guildId: string }) {
     const mentionCount = Flux?.useStateFromStores?.(
@@ -48,7 +47,7 @@ function Badge({ guildId }: { guildId: string }) {
     return null;
 }
 
-export default function GuildItem({ node, onPick, showNames }: { node: GuildNode; onPick: (id: string) => void; showNames?: boolean }) {
+export default function GuildItem({ node, onPick }: { node: GuildNode; onPick: (id: string) => void }) {
     const viewRef = React.useRef<View>(null);
     const scale = React.useRef(new Animated.Value(1)).current;
     const scaleDown = () => Animated.spring(scale, { toValue: 0.85, useNativeDriver: true }).start();
@@ -103,12 +102,6 @@ export default function GuildItem({ node, onPick, showNames }: { node: GuildNode
 
     const guildId = node.id as string;
 
-    const name = Flux?.useStateFromStores?.(
-        [GuildStore],
-        () => GuildStore?.getGuild?.(guildId)?.name ?? "",
-        [guildId],
-    ) ?? "";
-
     return (
         <>
             <Pressable
@@ -118,19 +111,12 @@ export default function GuildItem({ node, onPick, showNames }: { node: GuildNode
                 onLongPress={handleLongPress}
                 delayLongPress={500}
             >
-                <View style={st.outer}>
+                <View ref={viewRef} style={st.outer} collapsable={false}>
-                    <View ref={viewRef} style={st.iconWrap} collapsable={false}>
                     <Animated.View style={[st.icon, { transform: [{ scale }] }]}>
                         <GuildIcon id={guildId} />
                     </Animated.View>
                     <Badge guildId={guildId} />
                 </View>
-                    {showNames && (
-                        <Text numberOfLines={2} ellipsizeMode="tail" style={st.label}>
-                            {name}
-                        </Text>
-                    )}
-                </View>
             </Pressable>
             <ContextMenuModal
                 visible={menuState.visible}
@@ -145,21 +131,8 @@ export default function GuildItem({ node, onPick, showNames }: { node: GuildNode
 }
 
 const st = StyleSheet.create({
-    outer: { width: ICON, alignItems: "center" },
+    outer: { width: ICON, height: ICON },
-    iconWrap: { width: ICON, height: ICON },
     icon: { width: ICON, height: ICON, borderRadius: 16, overflow: "hidden" },
-    label: {
-        marginTop: 4,
-        width: ICON,
-        fontSize: 10,
-        lineHeight: 12,
-        fontWeight: "600",
-        textAlign: "center",
-        color: colors?.HEADER_PRIMARY ?? colors?.TEXT_NORMAL ?? "#fff",
-        textShadowColor: "rgba(0,0,0,0.75)",
-        textShadowOffset: { width: 0, height: 1 },
-        textShadowRadius: 2,
-    },
 });
 
 const bd = StyleSheet.create({

plugins/ServerDrawer/src/components/ServerDrawerSheet.tsx

@@ -1,12 +1,9 @@
 import React from "react";
 import { View, Text, Pressable, Animated, Dimensions, StyleSheet, BackHandler } from "react-native";
 import { find, findByProps, findByStoreName } from "@vendetta/metro";
-import { storage } from "@vendetta/plugin";
-import { useProxy } from "@vendetta/storage";
 import { GuildNode } from "../utils/theme";
 import GuildItem from "./GuildItem";
 import FolderItem from "./FolderItem";
-import DmTile from "./DmTile";
 
 const Flux = findByProps("useStateFromStores");
 const SortedGuildStore = findByStoreName("SortedGuildStore");
@@ -57,8 +54,6 @@ function CreateJoinButton() {
 }
 
 export default function ServerDrawerSheet({ gestureContext }: { gestureContext: any }) {
-    useProxy(storage);
-
     const pick = React.useCallback((id: string) => {
         Haptic?.triggerHapticFeedback(Haptic.HapticFeedbackTypes.SOFT);
         if (Routing?.transitionToGuild) {
@@ -115,11 +110,10 @@ export default function ServerDrawerSheet({ gestureContext }: { gestureContext:
                 style={[st.grid, { paddingHorizontal: padX, gap: GAP }]}
                 onLayout={onLayout}
             >
-                {!storage.hideDmTile && <DmTile />}
                 {nodes.map((node) =>
                     node.type === "folder"
-                        ? <FolderItem key={node.id} node={node} onPick={pick} showNames={!!storage.showGuildNames} />
+                        ? <FolderItem key={node.id} node={node} onPick={pick} />
-                        : <GuildItem key={node.id} node={node} onPick={pick} showNames={!!storage.showGuildNames} />
+                        : <GuildItem key={node.id} node={node} onPick={pick} />
                 )}
                 <CreateJoinButton />
             </View>

plugins/ServerDrawer/src/index.tsx

@@ -4,19 +4,13 @@ import { patchMobileQuestDock } from "./patches/mobileQuestDock";
 import { patchGetQuestAsset } from "./patches/getQuestAsset";
 import { patchExpanded, patchEmpty } from "./patches/contentPatch";
 import { patchHideGuildsBar } from "./patches/hideGuildsBar";
-import { patchTransparentBackground } from "./patches/transparentBackground";
 import { patchCreateElement } from "./patches/createElementIntercept";
-import { storage } from "@vendetta/plugin";
-import Settings from "./ui/Settings";
 
 const TAG = "[ServerDrawer]";
 const cleanups: (() => void)[] = [];
 
 export default {
     onLoad() {
-        storage.hideDmTile ??= false;
-        storage.showGuildNames ??= false;
-
         console.log(TAG, "onLoad");
 
         let patched = 0;
@@ -35,7 +29,6 @@ export default {
         if (patchEmpty("QuestDockEnrolledBody", cleanups)) patched++;
         if (patchEmpty("QuestDockUnenrolledBody", cleanups)) patched++;
         if (patchHideGuildsBar(cleanups)) patched++;
-        if (patchTransparentBackground(cleanups)) patched++;
 
         console.log(TAG, `onLoad done — ${patched} patches applied, ${cleanups.length} cleanups`);
     },
@@ -44,5 +37,4 @@ export default {
         for (const fn of cleanups) fn();
         cleanups.length = 0;
     },
-    settings: Settings,
 };

plugins/ServerDrawer/src/patches/contentPatch.tsx

@@ -1,7 +1,7 @@
 import { find } from "@vendetta/metro";
 import { React } from "@vendetta/metro/common";
 import ServerDrawerSheet from "../components/ServerDrawerSheet";
-import { registerIntercept, registerTypeDetector } from "./createElementIntercept";
+import { registerIntercept } from "./createElementIntercept";
 
 const TAG = "[ServerDrawer]";
 
@@ -13,26 +13,13 @@ function getGestureContext(): any {
     return cachedGestureContext;
 }
 
-function isNamed(name: string) {
-    return (type: any) => type?.name === name || type?.displayName === name ||
-        type?.type?.name === name || type?.type?.displayName === name;
-}
-
-// find()'s module-registry search can land on a different copy of QuestDockContentExpanded than
-// the one actually mounted - registerTypeDetector instead inspects the exact `type` value passed
-// to createElement/jsx as it's used, so there's no "which copy" ambiguity.
 export function patchExpanded(
     cleanups: (() => void)[]
 ): boolean {
-    registerTypeDetector("ServerDrawer.Expanded", isNamed("QuestDockContentExpanded"), (real) => {
-        registerIntercept(real, ServerDrawerSheet, { gestureContext: getGestureContext() });
-        console.log(TAG, "PATCH: QuestDockContentExpanded replaced (type detector)");
-    }, { persistent: true });
-
     const mod = find((m) => m?.type?.displayName === "QuestDockContentExpanded" || m?.type?.name === "QuestDockContentExpanded");
     if (!mod?.type) {
         console.log(TAG, "WARN: QuestDockContentExpanded not found (will retry)");
-        return true; // type detector is already watching regardless
+        return false;
     }
     const orig = mod.type;
 
@@ -42,7 +29,7 @@ export function patchExpanded(
         return <ServerDrawerSheet gestureContext={getGestureContext()} />;
     };
     cleanups.push(() => { mod.type = orig; });
-    console.log(TAG, "PATCH: QuestDockContentExpanded replaced (module mutation)");
+    console.log(TAG, "PATCH: QuestDockContentExpanded replaced");
     return true;
 }
 
@@ -50,15 +37,10 @@ export function patchEmpty(
     name: string,
     cleanups: (() => void)[]
 ): boolean {
-    registerTypeDetector(`ServerDrawer.Empty.${name}`, isNamed(name), (real) => {
-        registerIntercept(real, function EmptyPatch() { return null; });
-        console.log(TAG, `PATCH: ${name} replaced (type detector)`);
-    }, { persistent: true });
-
     const mod = find((m) => m?.type?.displayName === name || m?.type?.name === name);
     if (!mod?.type) {
         console.log(TAG, `WARN: ${name} not found`);
-        return true; // type detector is already watching regardless
+        return false;
     }
     const orig = mod.type;
     const originalComponent = orig;

plugins/ServerDrawer/src/patches/createElementIntercept.ts

@@ -1,304 +1,56 @@
 import { React } from "@vendetta/metro/common";
-import { after } from "@vendetta/patcher";
 
 interface Intercept {
     replacement: React.ComponentType<any>;
     extraProps?: Record<string, any>;
-    /** How many collapsed-to-zero-size ancestor levels above this element are also allowed to collapse (0 = none). */
-    collapseAncestors?: number;
-}
-
-interface PropsIntercept {
-    predicate: (props: any) => boolean;
-    replacement: React.ComponentType<any> | null;
-}
-
-interface PropsTransform {
-    predicate: (props: any) => boolean;
-    transform: (props: any) => any;
-}
-
-interface TypeDetector {
-    key: string;
-    predicate: (type: any) => boolean;
-    onDetected: (type: any) => void;
-    persistent: boolean;
 }
 
 const intercepts = new Map<React.ComponentType<any>, Intercept>();
-const propsIntercepts: PropsIntercept[] = [];
+let origCreateElement: typeof React.createElement | null = null;
-const propsTransforms: PropsTransform[] = [];
-let typeDetectors: TypeDetector[] = [];
-const detectorKeys = new Set<string>();
 let isPatched = false;
 
-// Elements are created child-first, so a collapse mark on a child is already present by the time
-// the parent's own call is intercepted - that's what makes walking the collapse upward possible.
-const collapseMarks = new WeakMap<object, number>();
-
-// display: none alone doesn't reclaim space on every layout, so this also zeroes width/flex/margin
-// and hides overflow.
-const COLLAPSE_STYLE = {
-    display: "none" as const,
-    width: 0,
-    minWidth: 0,
-    maxWidth: 0,
-    flexGrow: 0,
-    flexShrink: 0,
-    flexBasis: 0,
-    margin: 0,
-    padding: 0,
-    borderWidth: 0,
-    overflow: "hidden" as const,
-};
-
 export function registerIntercept(
     original: React.ComponentType<any>,
     replacement: React.ComponentType<any>,
     extraProps?: Record<string, any>,
-    options?: { collapseAncestors?: number },
 ) {
-    intercepts.set(original, { replacement, extraProps, collapseAncestors: options?.collapseAncestors });
+    intercepts.set(original, { replacement, extraProps });
-}
-
-// Matches on a props predicate instead of an exact type reference, for components with no
-// reliable name. Pass replacement: null to render nothing.
-export function registerPropsIntercept(predicate: (props: any) => boolean, replacement: React.ComponentType<any> | null) {
-    propsIntercepts.push({ predicate, replacement });
-}
-
-// Rewrites props in place, keeping the same type.
-export function registerPropsTransform(predicate: (props: any) => boolean, transform: (props: any) => any) {
-    propsTransforms.push({ predicate, transform });
-}
-
-// Fires onDetected(type) the first time a matching element is created. For components with no
-// stable module export to search for after the fact. persistent keeps firing on every match
-// instead of once, for references that change across navigation.
-export function registerTypeDetector(
-    key: string,
-    predicate: (type: any) => boolean,
-    onDetected: (type: any) => void,
-    options?: { persistent?: boolean },
-) {
-    if (detectorKeys.has(key)) return;
-    detectorKeys.add(key);
-    typeDetectors.push({ key, predicate, onDetected, persistent: options?.persistent ?? false });
-}
-
-export function hasTypeDetector(key: string): boolean {
-    return detectorKeys.has(key);
-}
-
-function runTypeDetectors(type: any) {
-    if (typeDetectors.length === 0) return;
-
-    let consumed = false;
-    for (const detector of typeDetectors) {
-        let matched = false;
-        try {
-            matched = detector.predicate(type);
-        } catch {
-            // Ignore
-        }
-        if (!matched) continue;
-
-        try {
-            detector.onDetected(type);
-        } catch {
-            // Ignore
-        }
-        if (!detector.persistent) {
-            detector.justFired = true;
-            consumed = true;
-        }
-    }
-
-    if (consumed) {
-        typeDetectors = typeDetectors.filter((d) => d.persistent || !d.justFired);
-    }
-}
-
-declare module "./createElementIntercept" {}
-interface TypeDetector { justFired?: boolean }
-
-/** Returns the collapse depth a parent should inherit from its children (max of any real child, 0 if none). */
-function inspectCollapseChild(child: any): number {
-    if (child == null || child === false || typeof child !== "object") return 0;
-    return collapseMarks.get(child) ?? 0;
-}
-
-function inheritedCollapseDepth(props: any, rest: any[] = []): number {
-    let deepest = 0;
-
-    const children = props?.children;
-    if (children != null) {
-        if (Array.isArray(children)) {
-            for (const child of children) deepest = Math.max(deepest, inspectCollapseChild(child));
-        } else {
-            deepest = Math.max(deepest, inspectCollapseChild(children));
-        }
-    }
-
-    for (const child of rest) deepest = Math.max(deepest, inspectCollapseChild(child));
-    return deepest;
-}
-
-/** Returns a replacement type if this element should be intercepted, `null` to render nothing, or `undefined` to pass through unchanged. */
-function resolveReplacement(type: any, props: any, rest: any[]): { type: any; props: any; collapse?: number } | null | undefined {
-    runTypeDetectors(type);
-
-    let effectiveProps = props;
-    if (effectiveProps) {
-        for (const { predicate, transform } of propsTransforms) {
-            try {
-                if (predicate(effectiveProps, type, rest)) {
-                    effectiveProps = transform(effectiveProps);
-                }
-            } catch {
-                // Ignore
-            }
-        }
-    }
-
-    if (effectiveProps) {
-        for (const { predicate, replacement } of propsIntercepts) {
-            try {
-                if (predicate(effectiveProps, type, rest)) {
-                    return replacement ? { type: replacement, props: effectiveProps } : null;
-                }
-            } catch {
-                // Ignore
-            }
-        }
-    }
-
-    const entry = intercepts.get(type);
-    if (entry) {
-        return {
-            type: entry.replacement,
-            props: entry.extraProps ? { ...effectiveProps, ...entry.extraProps } : effectiveProps,
-            collapse: entry.collapseAncestors,
-        };
-    }
-
-    // A wrapper whose only child was already collapsed - zero it out too and pass the remaining budget up.
-    const inherited = inheritedCollapseDepth(effectiveProps, rest);
-    if (inherited > 0) {
-        return {
-            type,
-            props: { ...effectiveProps, style: [effectiveProps?.style, COLLAPSE_STYLE] },
-            collapse: inherited - 1,
-        };
-    }
-
-    if (effectiveProps !== props) {
-        return { type, props: effectiveProps };
-    }
-
-    return undefined;
-}
-
-// after() only sees the return value, not the call itself, so we mutate the element in place
-// rather than substituting args beforehand.
-function applyResolved(res: any, type: any, props: any, rest: any[]) {
-    if (!res || typeof res !== "object") return res;
-    const resolved = resolveReplacement(type, props, rest);
-    if (resolved === null) {
-        res.type = () => null;
-        return res;
-    }
-    if (resolved) {
-        res.type = resolved.type;
-        res.props = resolved.props ?? null;
-        if (resolved.collapse && resolved.collapse > 0) {
-            collapseMarks.set(res, resolved.collapse);
-        }
-    }
-    return res;
 }
 
 export function patchCreateElement(cleanups: (() => void)[]) {
     if (isPatched) return;
+
+    // Guard against React.createElement being null in some environments
+    origCreateElement = React.createElement;
+    if (!origCreateElement) {
+        console.warn("[ServerDrawer] React.createElement is null, skipping patch");
+        return;
+    }
+
+    const patched = function (type: any, props: any, ...rest: any[]) {
+        if (!origCreateElement) {
+            // Fallback to original createElement if somehow null (should not happen)
+            return React.createElement(type, props, ...rest);
+        }
+        const entry = intercepts.get(type);
+        if (entry) {
+            const newProps = entry.extraProps
+                ? { ...props, ...entry.extraProps }
+                : props;
+            return origCreateElement.call(React, entry.replacement, newProps, ...rest);
+        }
+        return origCreateElement.call(React, type, props, ...rest);
+    };
+
+    Object.assign(patched, origCreateElement);
+    React.createElement = patched as typeof React.createElement;
     isPatched = true;
 
-    if (React.createElement) {
-        cleanups.push(
-            after("createElement", React, (args: any[], res: any) => applyResolved(res, args[0], args[1], args.slice(2)))
-        );
-    } else {
-        console.warn("[ServerDrawer] React.createElement is null, skipping patch");
-    }
-
-    // Discord compiles JSX through jsx/jsxs/jsxDEV, not React.createElement - scan for those
-    // runtimes by shape (names are mangled) and keep scanning since Metro registers lazily.
-    const patchedJsxRuntimes = new WeakSet<any>();
-
-    function isJsxRuntime(m: any): boolean {
-        return typeof m?.jsx === "function" || typeof m?.jsxs === "function" || typeof m?.jsxDEV === "function";
-    }
-
-    function patchJsxObject(runtime: any) {
-        if (patchedJsxRuntimes.has(runtime)) return;
-        patchedJsxRuntimes.add(runtime);
-        for (const key of ["jsx", "jsxs", "jsxDEV"] as const) {
-            if (typeof runtime[key] !== "function") continue;
-            cleanups.push(
-                after(key, runtime, (args: any[], res: any) => applyResolved(res, args[0], args[1], args.slice(2)))
-            );
-        }
-    }
-
-    function patchJsxModule(def: any) {
-        if (!def?.publicModule?.exports) return;
-        const exports = def.publicModule.exports;
-
-        try {
-            if (isJsxRuntime(exports)) patchJsxObject(exports);
-
-            const dflt = exports.default;
-            if (dflt != null && isJsxRuntime(dflt)) patchJsxObject(dflt);
-        } catch {
-            // Ignore
-        }
-    }
-
-    function scanAndPatchJsxRuntimes() {
-        const modules = (window as any)?.modules;
-        if (!modules) return;
-        for (const id in modules) {
-            const def = modules[id];
-            if (!def?.isInitialized) continue;
-            patchJsxModule(def);
-        }
-    }
-
-    scanAndPatchJsxRuntimes();
-
-    // Fast while the app boots, then slow, then stop.
-    let ticks = 0;
-    let timer: ReturnType<typeof setInterval> | undefined = setInterval(() => {
-        scanAndPatchJsxRuntimes();
-        if (++ticks === 50 && timer) { // ~5s at 100ms
-            clearInterval(timer);
-            timer = setInterval(() => {
-                scanAndPatchJsxRuntimes();
-                if (++ticks >= 75 && timer) { // + ~25s at 1s
-                    clearInterval(timer);
-                    timer = undefined;
-                }
-            }, 1000);
-        }
-    }, 100);
-
     cleanups.push(() => {
-        if (timer) clearInterval(timer);
+        if (isPatched && origCreateElement) {
-        timer = undefined;
+            React.createElement = origCreateElement;
             isPatched = false;
+        }
         intercepts.clear();
-        propsIntercepts.length = 0;
-        propsTransforms.length = 0;
-        typeDetectors = [];
-        detectorKeys.clear();
     });
 }

plugins/ServerDrawer/src/patches/hideGuildsBar.tsx

@@ -1,78 +1,94 @@
 import React from "react";
-import { View } from "react-native";
+import { Pressable, Image, View } from "react-native";
-import { registerPropsTransform, registerTypeDetector, registerIntercept } from "./createElementIntercept";
+import { find, findByName, findByProps } from "@vendetta/metro";
+import { getAssetIDByName } from "@vendetta/ui/assets";
+import { registerIntercept } from "./createElementIntercept";
 
 const TAG = "[ServerDrawer]";
-const SD_NOTHING_TEST_ID = "ServerDrawerNothing";
 
-function Nothing() {
+const ChatIcon = getAssetIDByName("ChatIcon");
-    return React.createElement(View, {
+const Haptic = findByProps("triggerHapticFeedback", "HapticFeedbackTypes");
-        style: {
+const ChannelActions = findByProps("selectPrivateChannel");
-            display: "none",
+const SelectedChannelStore = findByName("SelectedChannelStore");
-            width: 0,
+const FluxStores = findByProps("useStateFromStores");
-            minWidth: 0,
+const useStateFromStores = FluxStores?.useStateFromStores;
-            maxWidth: 0,
+const GuildStore = findByProps("getGuildId");
-            flexGrow: 0,
+const colors = findByProps("colors", "unsafe_rawColors")?.colors;
-            flexShrink: 0,
+const Routes = findByProps("ME");
-            flexBasis: 0,
+const ME = Routes?.ME ?? "/channels/@me";
-            margin: 0,
-            padding: 0,
-            borderWidth: 0,
-            overflow: "hidden",
-        },
-    });
-}
 
-// The parent creates GuildsBar via its outer React.memo wrapper object, which has no own
+function openDms() {
-// .name/.displayName at all - those only exist on the memo's inner function, at
+    Haptic?.triggerHapticFeedback(Haptic.HapticFeedbackTypes.SOFT);
-// type.type.name/type.type.displayName.
+    if (ChannelActions?.selectPrivateChannel) {
-function isGuildsBar(type: any): boolean {
+        const lastChannelId = SelectedChannelStore?.getLastSelectedChannelId?.();
-    return type?.name === "GuildsBar" || type?.displayName === "GuildsBar" ||
+        ChannelActions.selectPrivateChannel(lastChannelId);
-        type?.type?.name === "GuildsBar" || type?.type?.displayName === "GuildsBar";
-}
-
-function hasChildWithTestID(children: any, rest: any[], testID: string): boolean {
-    const inspect = (child: any) => child != null && typeof child === "object" && child.props?.testID === testID;
-    if (children != null) {
-        if (Array.isArray(children)) { if (children.some(inspect)) return true; }
-        else if (inspect(children)) return true;
     }
-    for (const child of rest) if (inspect(child)) return true;
+}
-    return false;
+
+function useIsInDms(): boolean {
+    try {
+        return GuildStore ? useStateFromStores([GuildStore], () => {
+            const guildId = GuildStore?.getGuildId?.();
+            return guildId == null || guildId === ME;
+        }) : false;
+    } catch { return false; }
+}
+
+function DmsGuildIcon() {
+    const selected = useIsInDms();
+
+    const iconColor = selected
+        ? (colors?.WHITE ?? "#fff")
+        : (colors?.INTERACTIVE_NORMAL ?? "#80848e");
+
+    return (
+        <Pressable onPress={openDms} style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+            {selected ? (
+                <View style={{
+                    position: "absolute", left: 0, top: "25%",
+                    width: 4, height: "50%", borderRadius: 2,
+                    backgroundColor: colors?.WHITE ?? "#fff",
+                }} />
+            ) : null}
+            <Image
+                source={ChatIcon}
+                style={{ width: 28, height: 28, tintColor: iconColor }}
+            />
+        </Pressable>
+    );
+}
+
+function findGuildsBar(): any {
+    const byName = findByName("GuildsBar");
+    if (byName) return { default: byName };
+
+    let mod = find((m) => {
+        try { return m?.default?.type?.name === "GuildsBar"; } catch { return false; }
+    });
+    if (mod?.default) return mod;
+
+    mod = find((m) => {
+        try { return m?.default?.displayName === "GuildsBar"; } catch { return false; }
+    });
+    if (mod?.default) return mod;
+
+    return null;
 }
 
 export function patchHideGuildsBar(cleanups: (() => void)[]): boolean {
-    // Rendering GuildsBar as nothing alone still leaves its space reserved - the immediate parent
+    const mod = findGuildsBar();
-    // carries an explicit width in its own style, so display: none on the child doesn't reclaim
+    if (!mod?.default) {
-    // it. This zeroes the parent wrapper too once it spots the hidden marker as a child.
+        console.log(TAG, "WARN: GuildsBar not found");
-    registerPropsTransform(
+        return false;
-        (props: any, _type: any, rest: any[]) =>
+    }
-            hasChildWithTestID(props?.children, rest, SD_NOTHING_TEST_ID),
+    const orig = mod.default;
-        (props: any) => ({
-            ...props,
-            style: [
-                props?.style,
-                {
-                    display: "none",
-                    width: 0,
-                    minWidth: 0,
-                    maxWidth: 0,
-                    flexGrow: 0,
-                    flexShrink: 0,
-                    flexBasis: 0,
-                    margin: 0,
-                    padding: 0,
-                    borderWidth: 0,
-                    overflow: "hidden",
-                },
-            ],
-        }),
-    );
 
-    registerTypeDetector("ServerDrawer.HideGuildsBar", isGuildsBar, (realGuildsBar) => {
+    registerIntercept(orig, DmsGuildIcon);
-        registerIntercept(realGuildsBar, Nothing, { testID: SD_NOTHING_TEST_ID }, { collapseAncestors: 6 });
+
-        console.log(TAG, "PATCH: found a real GuildsBar reference, now rendering nothing");
+    mod.default = function DmsGuildsBar() {
-    }, { persistent: true });
+        return React.createElement(DmsGuildIcon);
-    console.log(TAG, "PATCH: watching for the real GuildsBar to appear");
+    };
+    mod.default.displayName = "GuildsBar";
+    cleanups.push(() => { mod.default = orig; });
     return true;
 }

plugins/ServerDrawer/src/patches/transparentBackground.ts

@@ -1,46 +0,0 @@
-import { registerPropsTransform, registerPropsIntercept } from "./createElementIntercept";
-
-const TAG = "[ServerDrawer]";
-
-// The quest dock's outer wrapper carries an opaque card background (borderRadius: 24) via
-// useAnimatedStyle - no component reference to intercept, so match on the computed style instead.
-// The color itself varies in format (rgba vs hex), so borderRadius + "has a background color" is
-// the stable signal, not the color string.
-function flatten(style: any): Record<string, any> {
-    if (!style) return {};
-    if (Array.isArray(style)) return Object.assign({}, ...style.map(flatten));
-    return style;
-}
-
-function isQuestDockCard(props: any): boolean {
-    const s = flatten(props?.style);
-    return s.borderRadius === 24 && typeof s.backgroundColor === "string";
-}
-
-// Removing the card color reveals a second layer underneath: the quest's promotional hero photo.
-// Matched by URL shape, not component, since the same image component renders ordinary guild/
-// folder icons everywhere else too.
-function getSourceUri(props: any): string | undefined {
-    const source = props?.source;
-    if (!source) return undefined;
-    if (Array.isArray(source)) return source[0]?.uri;
-    return source.uri;
-}
-
-function isQuestHeroImage(props: any): boolean {
-    const uri = getSourceUri(props);
-    return typeof uri === "string" && uri.includes("/quests/");
-}
-
-export function patchTransparentBackground(cleanups: (() => void)[]): boolean {
-    registerPropsTransform(
-        (props: any) => isQuestDockCard(props),
-        (props: any) => ({
-            ...props,
-            style: [props?.style, { backgroundColor: "transparent" }],
-        }),
-    );
-    registerPropsIntercept(isQuestHeroImage, null);
-    console.log(TAG, "PATCH: watching for the quest dock card background and hero image");
-    return true;
-}

plugins/ServerDrawer/src/ui/NoteBox.tsx

@@ -1,29 +0,0 @@
-import { React, ReactNative } from "@vendetta/metro/common";
-import { findByProps } from "@vendetta/metro";
-
-const { View, Text } = ReactNative;
-
-const colors = findByProps("colors", "unsafe_rawColors")?.colors;
-
-/** Small bordered callout for explanatory text in a settings screen. */
-export default function NoteBox({ children, style }: { children: any; style?: any }) {
-    const textColor = colors?.TEXT_MUTED ?? colors?.TEXT_NORMAL ?? "#96989d";
-
-    return (
-        <View
-            style={[
-                {
-                    marginHorizontal: 16,
-                    marginVertical: 8,
-                    padding: 10,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: "rgba(128,128,128,0.25)"
-                },
-                style
-            ]}
-        >
-            <Text style={{ fontSize: 12.5, lineHeight: 18, opacity: 0.75, color: textColor }}>{children}</Text>
-        </View>
-    );
-}

plugins/ServerDrawer/src/ui/Settings.tsx

@@ -1,36 +0,0 @@
-import { React, ReactNative } from "@vendetta/metro/common";
-import { storage } from "@vendetta/plugin";
-import { useProxy } from "@vendetta/storage";
-import { TableRowGroup, TableSwitchRow } from "../utils/table";
-import NoteBox from "./NoteBox";
-
-const { ScrollView, View } = ReactNative;
-
-export default function Settings() {
-    useProxy(storage);
-
-    return (
-        <ScrollView style={{ flex: 1 }}>
-            <NoteBox>
-                Server Drawer takes over the Quest Dock (the strip above the tab bar) to show your
-                servers as a grid instead - tap to expand, long-press a server for its usual context
-                menu, and the + button creates or joins a server through Discord's own modal.
-            </NoteBox>
-            <TableRowGroup title="Layout">
-                <TableSwitchRow
-                    label="Hide the DMs tile"
-                    subLabel="Remove the DMs tile from the drawer entirely"
-                    value={!!storage.hideDmTile}
-                    onValueChange={(v: boolean) => { storage.hideDmTile = v; }}
-                />
-                <TableSwitchRow
-                    label="Show server names"
-                    subLabel="Print each server's name under its icon in the drawer"
-                    value={!!storage.showGuildNames}
-                    onValueChange={(v: boolean) => { storage.showGuildNames = v; }}
-                />
-            </TableRowGroup>
-            <View style={{ height: 24 }} />
-        </ScrollView>
-    );
-}

plugins/ServerDrawer/src/utils/table.ts

@@ -1,14 +0,0 @@
-import { findByProps } from "@vendetta/metro";
-import { Forms } from "@vendetta/ui/components";
-
-// Discord's redesigned "Table" row family replaced Forms.Form* in the app itself, but the
-// vendetta.ui.components compat object never exposed it - found via direct findByProps instead,
-// falling back to the legacy Form component (whose prop names don't perfectly match) if a lookup
-// ever comes back empty.
-const find = (prop: string): any => findByProps(prop)?.[prop];
-
-const RealTableRow: any = find("TableRow");
-
-export const TableRow: any = RealTableRow ?? Forms.FormRow;
-export const TableRowGroup: any = find("TableRowGroup") ?? Forms.FormSection;
-export const TableSwitchRow: any = find("TableSwitchRow") ?? Forms.FormSwitchRow;