ServerDrawer: force the quest dock's opaque card background transparent

plugins/server-drawer/src/index.tsx

@@ -4,6 +4,7 @@ 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";
@@ -34,6 +35,7 @@ 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`);
     },

plugins/server-drawer/src/patches/transparentBackground.ts

@@ -0,0 +1,30 @@
+import { registerPropsTransform } from "./createElementIntercept";
+
+const TAG = "[ServerDrawer]";
+
+// Confirmed live: the quest dock's outer "island" wrapper - a ReanimatedView ten levels above the
+// drawer's own grid - carries this exact opaque card background via useAnimatedStyle. It's not
+// anything our own code renders, so there's no component reference to intercept - matching the
+// static part of its computed style is the only way to reach it.
+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.backgroundColor === "rgba(10,10,14,1)" && s.borderRadius === 24;
+}
+
+export function patchTransparentBackground(cleanups: (() => void)[]): boolean {
+    registerPropsTransform(
+        (props: any) => isQuestDockCard(props),
+        (props: any) => ({
+            ...props,
+            style: [props?.style, { backgroundColor: "transparent" }],
+        }),
+    );
+    console.log(TAG, "PATCH: watching for the quest dock card background");
+    return true;
+}