Fix settings on Vencord Mobile (#905)

src/components/VencordSettings/index.tsx

@@ -21,6 +21,7 @@ import "./settingsStyles.css";
 import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { handleComponentFailed } from "@components/handleComponentFailed";
+import { isMobile } from "@utils/misc";
 import { Forms, SettingsRouter, TabBar, Text } from "@webpack/common";
 
 import BackupRestoreTab from "./BackupRestoreTab";
@@ -55,7 +56,10 @@ if (!IS_WEB) SettingsTabs.VencordUpdater.component = () => Updater && <Updater /
 function Settings(props: SettingsProps) {
     const { tab = "VencordSettings" } = props;
 
-    const CurrentTab = SettingsTabs[tab]?.component;
+    const CurrentTab = SettingsTabs[tab]?.component ?? null;
+    if (isMobile) {
+        return CurrentTab && <CurrentTab />;
+    }
 
     return <Forms.FormSection>
         <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">Vencord Settings</Text>

src/plugins/apiContextMenu.ts

@@ -23,6 +23,8 @@ export default definePlugin({
     name: "ContextMenuAPI",
     description: "API for adding/removing items to/from context menus.",
     authors: [Devs.Nuckyz, Devs.Ven],
+    required: true,
+
     patches: [
         {
             find: "♫ (つ｡◕‿‿◕｡)つ ♪",

src/plugins/settings.tsx

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { addContextMenuPatch } from "@api/ContextMenu";
 import { Settings } from "@api/settings";
 import PatchHelper from "@components/PatchHelper";
 import { Devs } from "@utils/constants";
@@ -33,6 +34,23 @@ export default definePlugin({
     description: "Adds Settings UI and debug info",
     authors: [Devs.Ven, Devs.Megu],
     required: true,
+
+    start() {
+        // The settings shortcuts in the user settings cog context menu
+        // read the elements from a hardcoded map which for obvious reason
+        // doesn't contain our sections. This patches the actions of our
+        // sections to manually use SettingsRouter (which only works on desktop
+        // but the context menu is usually not available on mobile anyway)
+        addContextMenuPatch("user-settings-cog", children => {
+            const section = children.find(c => Array.isArray(c) && c.some(it => it?.props?.id === "VencordSettings")) as any;
+            section?.forEach(c => {
+                if (c?.props?.id?.startsWith("Vencord")) {
+                    c.props.action = () => SettingsRouter.open(c.props.id);
+                }
+            });
+        });
+    },
+
     patches: [{
         find: ".versionHash",
         replacement: [
@@ -69,8 +87,6 @@ export default definePlugin({
     }],
 
     makeSettingsCategories({ ID }: { ID: Record<string, unknown>; }) {
-        const makeOnClick = (tab: string) => () => SettingsRouter.open(tab);
-
         return [
             {
                 section: ID.HEADER,
@@ -79,50 +95,42 @@ export default definePlugin({
             {
                 section: "VencordSettings",
                 label: "Vencord",
-                element: () => <SettingsComponent tab="VencordSettings" />,
+                element: () => <SettingsComponent tab="VencordSettings" />
-                onClick: makeOnClick("VencordSettings")
             },
             {
                 section: "VencordPlugins",
                 label: "Plugins",
                 element: () => <SettingsComponent tab="VencordPlugins" />,
-                onClick: makeOnClick("VencordPlugins")
             },
             {
                 section: "VencordThemes",
                 label: "Themes",
                 element: () => <SettingsComponent tab="VencordThemes" />,
-                onClick: makeOnClick("VencordThemes")
             },
             !IS_WEB && {
                 section: "VencordUpdater",
                 label: "Updater",
                 element: () => <SettingsComponent tab="VencordUpdater" />,
-                onClick: makeOnClick("VencordUpdater")
             },
             {
                 section: "VencordCloud",
                 label: "Cloud",
                 element: () => <SettingsComponent tab="VencordCloud" />,
-                onClick: makeOnClick("VencordCloud")
             },
             {
                 section: "VencordSettingsSync",
                 label: "Backup & Restore",
                 element: () => <SettingsComponent tab="VencordSettingsSync" />,
-                onClick: makeOnClick("VencordSettingsSync")
             },
             IS_DEV && {
                 section: "VencordPatchHelper",
                 label: "Patch Helper",
                 element: PatchHelper!,
-                onClick: makeOnClick("VencordPatchHelper")
             },
             IS_VENCORD_DESKTOP && {
                 section: "VencordDesktop",
                 label: "Desktop Settings",
                 element: VencordDesktop.Components.Settings,
-                onClick: makeOnClick("VencordDesktop")
             },
             {
                 section: ID.DIVIDER

src/utils/misc.tsx

@@ -204,3 +204,7 @@ export const checkIntersecting = (el: Element) => {
 export function identity<T>(value: T): T {
     return value;
 }
+
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile_tablet_or_desktop
+// "In summary, we recommend looking for the string Mobi anywhere in the User Agent to detect a mobile device."
+export const isMobile = navigator.userAgent.includes("Mobi");