Fix settings on Vencord Mobile (#905)

This commit is contained in:
V 2023-04-15 02:27:11 +02:00 committed by GitHub
parent 6c719f5ee9
commit db7fc3769b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 12 deletions

View file

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

View file

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

View file

@ -16,6 +16,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { addContextMenuPatch } from "@api/ContextMenu";
import { Settings } from "@api/settings"; import { Settings } from "@api/settings";
import PatchHelper from "@components/PatchHelper"; import PatchHelper from "@components/PatchHelper";
import { Devs } from "@utils/constants"; import { Devs } from "@utils/constants";
@ -33,6 +34,23 @@ export default definePlugin({
description: "Adds Settings UI and debug info", description: "Adds Settings UI and debug info",
authors: [Devs.Ven, Devs.Megu], authors: [Devs.Ven, Devs.Megu],
required: true, 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: [{ patches: [{
find: ".versionHash", find: ".versionHash",
replacement: [ replacement: [
@ -69,8 +87,6 @@ export default definePlugin({
}], }],
makeSettingsCategories({ ID }: { ID: Record<string, unknown>; }) { makeSettingsCategories({ ID }: { ID: Record<string, unknown>; }) {
const makeOnClick = (tab: string) => () => SettingsRouter.open(tab);
return [ return [
{ {
section: ID.HEADER, section: ID.HEADER,
@ -79,50 +95,42 @@ export default definePlugin({
{ {
section: "VencordSettings", section: "VencordSettings",
label: "Vencord", label: "Vencord",
element: () => <SettingsComponent tab="VencordSettings" />, element: () => <SettingsComponent tab="VencordSettings" />
onClick: makeOnClick("VencordSettings")
}, },
{ {
section: "VencordPlugins", section: "VencordPlugins",
label: "Plugins", label: "Plugins",
element: () => <SettingsComponent tab="VencordPlugins" />, element: () => <SettingsComponent tab="VencordPlugins" />,
onClick: makeOnClick("VencordPlugins")
}, },
{ {
section: "VencordThemes", section: "VencordThemes",
label: "Themes", label: "Themes",
element: () => <SettingsComponent tab="VencordThemes" />, element: () => <SettingsComponent tab="VencordThemes" />,
onClick: makeOnClick("VencordThemes")
}, },
!IS_WEB && { !IS_WEB && {
section: "VencordUpdater", section: "VencordUpdater",
label: "Updater", label: "Updater",
element: () => <SettingsComponent tab="VencordUpdater" />, element: () => <SettingsComponent tab="VencordUpdater" />,
onClick: makeOnClick("VencordUpdater")
}, },
{ {
section: "VencordCloud", section: "VencordCloud",
label: "Cloud", label: "Cloud",
element: () => <SettingsComponent tab="VencordCloud" />, element: () => <SettingsComponent tab="VencordCloud" />,
onClick: makeOnClick("VencordCloud")
}, },
{ {
section: "VencordSettingsSync", section: "VencordSettingsSync",
label: "Backup & Restore", label: "Backup & Restore",
element: () => <SettingsComponent tab="VencordSettingsSync" />, element: () => <SettingsComponent tab="VencordSettingsSync" />,
onClick: makeOnClick("VencordSettingsSync")
}, },
IS_DEV && { IS_DEV && {
section: "VencordPatchHelper", section: "VencordPatchHelper",
label: "Patch Helper", label: "Patch Helper",
element: PatchHelper!, element: PatchHelper!,
onClick: makeOnClick("VencordPatchHelper")
}, },
IS_VENCORD_DESKTOP && { IS_VENCORD_DESKTOP && {
section: "VencordDesktop", section: "VencordDesktop",
label: "Desktop Settings", label: "Desktop Settings",
element: VencordDesktop.Components.Settings, element: VencordDesktop.Components.Settings,
onClick: makeOnClick("VencordDesktop")
}, },
{ {
section: ID.DIVIDER section: ID.DIVIDER

View file

@ -204,3 +204,7 @@ export const checkIntersecting = (el: Element) => {
export function identity<T>(value: T): T { export function identity<T>(value: T): T {
return value; 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");