All around fixes

Author: doggybootsy

injections/vars.ts

@@ -19,10 +19,10 @@ const request: FetchRequest = async (input, init) => {
     return electron.session.defaultSession.fetch(isURL(input) ? input.href : input, init);
   }
 
-  if (!document.body) {
+  if (typeof document === "object" && !document.body) {
     await new Promise(r => document.addEventListener("readystatechange", () => { r(true); }))
   }
-  return fetch.call(window, input, init);
+  return fetch.call(globalThis, input, init);
 }
 
 request.text = async (input, init) => {

packages/mod/src/dashboard/pages/community/themes/index.tsx

@@ -5,7 +5,7 @@ import { Messages } from "vx:i18n";
 import {className, InternalStore, suffixNumber} from "../../../../util";
 import { NO_RESULTS, NO_RESULTS_ALT, NoAddons, queryStore } from "../../addons/shared";
 import { useInternalStore } from "../../../../hooks";
-import { openInviteModal } from "../../../../api/modals";
+import { openImageModal, openInviteModal } from "../../../../api/modals";
 import { closeMenu, MenuComponents, MenuRenderProps, openMenu } from "../../../../api/menu";
 import { addons } from "../../../../native";
 import { themeStore } from "../../../../addons/themes";
@@ -212,7 +212,7 @@ function CommunityAddonCard({ addon }: { addon: Addon }) {
     <div className="vx-community-card" onContextMenu={(event) => openMenu(event, (props) => <CommunityAddonMenu props={props} addon={addon} />)}>
       <div className="vx-community-card-splash">
         <div className="vx-community-card-preview">
-          <img src={addon.getSplashImage()} className="vx-community-card-preview-img" loading="lazy" />
+          <img src={addon.getSplashImage()} className="vx-community-card-preview-img" loading="lazy" onClick={() => openImageModal(addon.getSplashImage(), { scale: 5 })} />
         </div>
         <Tooltip text={addon.author}>
           {(props) => (

packages/mod/src/dashboard/pages/index.css

@@ -462,7 +462,9 @@ button.vx-community-card-button {
   top: 50%;
   transform: translate(-50%, -50%);
 }
-
+.vx-community-addons-tags-icon > :last-child {
+  transition: color .2s linear;
+}
 .vx-community-addons-tags-notice > :last-child {
   color: var(--status-danger);
 }

packages/mod/src/plugins/favorite-images/index.ts

@@ -1,7 +1,7 @@
 import { bySource, getLazy } from "@webpack";
 import { definePlugin } from "..";
 import { Developers } from "../../constants";
-import { createAbort } from "../../util";
+import { createAbort, focusStore } from "../../util";
 import { Injector } from "../../patcher";
 import { isValidElement } from "react";
 
@@ -44,12 +44,10 @@ const plugin = definePlugin({
 
     if (signal.aborted) return;
 
-    injector.after(ImageModule.default.prototype, "render", (that, args, res) => {
-      if (that.props.animated && isValidElement(res)) {
-        res.props.renderAccessory = function() {
-          if (that.state.hasMouseOver || that.state.hasFocus) {
-            return that.props.renderAccessory();
-          }
+    injector.after(ImageModule.default.prototype, "render", (that, args, res) => {      
+      if (!that.props.animated && isValidElement(res)) {
+        res.props.renderAccessory = function() {          
+          return that.props.renderAccessory?.();
         }
       }
     });

packages/web/mv3/src/service-worker/assets.ts

@@ -1,15 +1,20 @@
 import { browser } from "vx:self";
 import { Connection } from "./connection";
 import { VXMessageEvent, ipc } from "./events";
+import { logger } from "vx:logger";
 
 let release: Promise<Git.Release>;
 async function getRelease(): Promise<Git.Release> {
+  logger.log(`Getting release is-using-cache(${Boolean(release)})`);
+
   if (release) return release;
 
-  return release = request("https://api.github.com/repos/doggybootsy/vx/releases/latest", { cache: "no-cache" }).then(r => r.json());
+  return release = request.json<Git.Release>("https://api.github.com/repos/doggybootsy/vx/releases/latest", { cache: "no-cache" }).then(r => r.json);
 }
 
 async function getAsset(type: "js" | "css", release: Promise<Git.Release> | Git.Release = getRelease()) {
+  logger.log(`Fetching asset '${type}'`);
+
   release = release instanceof Promise ? await release : release;  
 
   const asset = release.assets.find((asset) => asset.name.endsWith(`.${type}`))!;
@@ -19,26 +24,31 @@ async function getAsset(type: "js" | "css", release: Promise<Git.Release> | Git.
 }
 
 export async function install() {
+  logger.log("Starting install process");
+
   const data = await browser.storage.local.get([ "js", "css" ]);
 
   let didChangeAnything = false;
   if (!data.js) {
     didChangeAnything = true;
     data.js = await getAsset("js");
   }
-  if (!data.js) {
+  if (!data.css) {
     didChangeAnything = true;
     data.css = await getAsset("css");
   }
 
+  logger.log(`Did make any changes '${didChangeAnything}'`);
+
   if (didChangeAnything) await browser.storage.local.set(data);
 
   ipc.dispatchEvent(new VXMessageEvent("code-ready", data));
-  
+    
   browser.tabs.query({ url: "*://*.discord.com/*" }, (tabs: { id: number }[]) => {
     for (const tab of tabs) {
       if (Connection.conections.has(tab.id)) continue;
       browser.tabs.reload(tab.id);
+      logger.log(`Reloading tab id ${tab.id}`);
     }
   });
 }

packages/web/mv3/src/service-worker/connection.ts

@@ -10,19 +10,6 @@ interface BrowserEventTarget<T extends (...args: any[]) => void> {
   dispatch(...args: unknown[]): unknown
 }
 
-function native(id: string) {
-  window.VXExtension = {
-    id,
-    update(release) {
-      postMessage({
-        type: "update", 
-        from: "vx", 
-        release
-      });
-    }
-  };
-}
-
 let js: string;
 let css: string;
 ipc.addEventListener("code-ready", (event) => {  
@@ -41,19 +28,35 @@ function executeScript(connection: Connection) {
     return;
   }
 
-  connection.eval(native, { id: browser.runtime.id });
+  logger.log(`Injecting script on tab id '${connection.tabId}'`);
+
+  connection.eval((id: string, js: string) => {
+    (globalThis as typeof window).VXExtension = {
+      id,
+      update(release) {
+        postMessage({
+          type: "update", 
+          from: "vx", 
+          release
+        });
+      }
+    };
 
-  connection.eval(`
-if (location.pathname === "/popout") {
-  console.log("VX Skipping, is a popout");
-  return;
-}
-if (typeof webpackChunkdiscord_app === "object") {
-  console.log("VX loaded to late aborting!");
-  console.log(Array.from(webpackChunkdiscord_app));
-  return;
-}
-${js}`);
+    if (location.pathname.startsWith("/vx")) {
+      location.replace(`/channels/@me?__vx_dashboard_path__=${encodeURIComponent(location.pathname)}`);
+      return;
+    }
+    if (location.pathname === "/popout") {
+      console.log("VX Skipping, is a popout");
+      return;
+    }
+    if (typeof (globalThis as typeof window).webpackChunkdiscord_app === "object") {
+      console.log("VX loaded to late aborting!");
+      return;
+    }
+
+    (0, eval)(js);
+  }, { id: browser.runtime.id, js });
 
   connection.insertCSS(css);
 }
@@ -77,7 +80,9 @@ export class Connection {
       Connection.conections.delete(this.tabId);
     });
 
-    executeScript(this);
+    queueMicrotask(() => {
+      executeScript(this);
+    });
   }
 
   private readonly logger: Logger;

packages/web/mv3/src/service-worker/index.ts

@@ -14,4 +14,6 @@ browser.runtime.onConnect.addListener((_connection: any) => {
   });
 });
 
-browser.runtime.onInstalled.addListener(install);
+browser.runtime.onInstalled.addListener(() => {  
+  install();
+});