fix

src/Components/AccountDetailsButton.tsx

@@ -6,7 +6,7 @@ import { defaultSettings } from "../lib/consts";
 import FakeDeafenContextMenu from "./ContextMenu";
 import Icons from "../Components/Icons";
 import Utils from "../lib/utils";
-export const AccountDetailsButton = () => {
+export default () => {
   if (
     !SettingValues.get("userPanel", defaultSettings.userPanel) ||
     plugins.getDisabled().includes("dev.tharki.FakeDeafen")
@@ -43,4 +43,3 @@ export const AccountDetailsButton = () => {
     />
   );
 };
-export default () => (Modules.PanelButton ? <AccountDetailsButton /> : <></>);

src/Components/AccountProfileItem.tsx

@@ -0,0 +1,48 @@
+import { SettingValues } from "../index";
+import { defaultSettings } from "../lib/consts";
+import ContextMenu from "./ContextMenu";
+import Icons from "./Icons";
+import Utils from "../lib/utils";
+import Types from "../types";
+
+export default ({ ProfileItem }: { ProfileItem: Types.ProfileItem }): React.ReactElement | null => {
+  if (!SettingValues.get("statusPicker", defaultSettings.statusPicker)) return null;
+  const [status, toogleStatus] = Utils.useSoundStatus();
+  const Icon = (
+    <Icons.sound
+      width="16"
+      height="16"
+      style={{
+        marginLeft: "-2px",
+      }}
+    />
+  );
+  const DisabledIcon = (
+    <Icons.sound
+      width="16"
+      height="16"
+      style={{
+        marginLeft: "-2px",
+      }}>
+      <polygon
+        style={{
+          fill: "#a61616",
+        }}
+        points="22.6,2.7 22.6,2.8 19.3,6.1 16,9.3 16,9.4 15,10.4 15,10.4 10.3,15 2.8,22.5 1.4,21.1 21.2,1.3 "
+      />
+    </Icons.sound>
+  );
+
+  return (
+    <div>
+      <ProfileItem
+        label={`${status ? "Unfake" : "Fake"} VC Status`}
+        id="fake-deafen"
+        icon={() => (status ? DisabledIcon : Icon)}
+        onClick={() => toogleStatus()}
+        renderSubmenu={({ closePopout }) => <ContextMenu onClose={closePopout} />}
+      />
+      <div id="profileDivider" />
+    </div>
+  );
+};

src/Components/ContextMenu.tsx

@@ -23,7 +23,7 @@ export default (props: Types.MenuProps | { onClose: Types.DefaultTypes.AnyFuncti
   return (
     <ContextMenu.ContextMenu
       {...props}
-      navId="yofukashino"
+      navId="yofukashino-fake-deafen-submenu"
       onClose={props.onClose ?? ContextMenuApi.close}>
       <ContextMenu.MenuGroup label="What to fake?">
         <ContextMenu.MenuSeparator />

src/index.ts

@@ -21,6 +21,6 @@ export const stop = (): void => {
   Listeners.removeListeners();
 };
 
-export { default as _addPanelButton } from "./Components/AccountDetailsButton";
-
 export { Settings } from "./Components/Settings.jsx";
+
+export { _addPanelButton, _addProfileItem } from "./plaintextFunctions";

src/injections/index.ts

@@ -2,14 +2,12 @@ import Modules from "../lib/requiredModules";
 import injectAudioResolver from "./AudioResolver";
 import injectCenterControlTray from "./CenterControlTray";
 import injectGatewayConnection from "./GatewayConnection";
-import injectAccountContextMenu from "./AccountContextMenu";
 import injectSettingSetter from "./SettingValues";
 export const applyInjections = async (): Promise<void> => {
   await Modules.loadModules();
   void injectAudioResolver();
   injectCenterControlTray();
   injectGatewayConnection();
-  injectAccountContextMenu();
   injectSettingSetter();
 };
 

src/lib/utils.ts

@@ -51,6 +51,16 @@ export const toggleSoundStatus = (enabled: boolean): void => {
   PluginLogger.log(enabled ? "Disabled Fake Voice State" : "Enabled Fake Voice State");
   SettingValues.set("enabled", !enabled);
 };
+export const useSoundStatus = (): [boolean, () => void] => {
+  const [enabled, setEnabled] = React.useState(
+    SettingValues.get("enabled", defaultSettings.enabled),
+  );
+  const toogleEnabled = (): void => {
+    toggleSoundStatus(enabled);
+    setEnabled(SettingValues.get("enabled", defaultSettings.enabled));
+  };
+  return [enabled, toogleEnabled];
+};
 export const useSetting = <
   T extends Record<string, Types.Jsonifiable>,
   D extends keyof T,
@@ -130,6 +140,7 @@ export default {
   forceRerenderElement,
   updateSoundStatus,
   toggleSoundStatus,
+  useSoundStatus,
   useSetting,
   useSettingArray,
 };

src/plaintextFunctions.tsx

@@ -0,0 +1,7 @@
+import Modules from "./lib/requiredModules";
+import AccountDetailsButton from "./Components/AccountDetailsButton";
+import AccountProfileItem from "./Components/AccountProfileItem";
+
+export const _addPanelButton = () => (Modules.PanelButton ? <AccountDetailsButton /> : <></>);
+
+export const _addProfileItem = (props) => <AccountProfileItem {...props} />;

src/plaintextPatches.ts

@@ -1,6 +1,16 @@
 import Types from "./types";
 
 export default [
+  {
+    find: "AccountProfilePopout",
+    replacements: [
+      {
+        match: /\(0,\w+\.jsx\)\((\w+\.\w+),{id:"switch-accounts/,
+        replace: (suffix: string, ProfileItem: string) =>
+          `replugged.plugins.getExports("dev.tharki.FakeDeafen")?._addProfileItem?.({ProfileItem: ${ProfileItem}}),${suffix}`,
+      },
+    ],
+  },
   {
     find: "isCopiedStreakGodlike",
     replacements: [

src/style.css

@@ -15,3 +15,9 @@
   color: var(----interactive-hover);
   display: none;
 }
+
+#profileDivider {
+  background-color: var(--profile-body-divider-color);
+  height: 1px;
+  margin: 8px 4px;
+}

src/types.ts

@@ -222,6 +222,13 @@ export namespace Types {
     default: DefaultTypes.AnyFunction;
     handleToggleVideo: DefaultTypes.AnyFunction;
   }
+  export type ProfileItem = React.ComponentType<{
+    label: string;
+    id: string;
+    icon: () => React.ReactElement;
+    onClick: () => void;
+    renderSubmenu?: ({ closePopout }: { closePopout: () => void }) => React.ReactElement;
+  }>;
   export interface AccountDetailsClasses {
     accountProfilePopoutWrapper: string;
     avatar: string;