Neat Settings Context Menu

src/neatSettingsContext/index.ts

@@ -0,0 +1,24 @@
+import { ExtensionWebpackModule, Patch } from "@moonlight-mod/types";
+
+export const patches: Patch[] = [
+  {
+    find: 'navId:"user-settings-cog"',
+    replace: [
+      {
+        match: /(?<=,\i=\(0,(\i\.\i)\)\(\)\.filter\(.+?),children:\[(?=\i\.map\()/,
+        replacement: (_, getSections) => `,children:[require("neatSettingsContext_menu").default(${getSections},`
+      },
+      {
+        match: /\),(?=\i\.user\.isStaff\(\)&&)/,
+        replacement: ")),"
+      }
+    ],
+    hardFail: true
+  }
+];
+
+export const webpackModules: Record<string, ExtensionWebpackModule> = {
+  menu: {
+    dependencies: [{ id: "react" }, { ext: "contextMenu", id: "contextMenu" }, { ext: "settings", id: "settings" }]
+  }
+};

src/neatSettingsContext/manifest.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://moonlight-mod.github.io/manifest.schema.json",
+  "id": "neatSettingsContext",
+  "version": "1.0.0",
+  "meta": {
+    "name": "Neat Settings Context Menu",
+    "tagline": "Groups the user settings context menu by their headings",
+    "authors": ["Cynosphere"],
+    "tags": ["qol"],
+    "source": "https://github.com/Cynosphere/moonlight-extensions",
+    "donate": "https://ko-fi.com/Cynosphere"
+  },
+  "dependencies": ["contextMenu", "settings"],
+  "apiLevel": 2
+}

src/neatSettingsContext/webpackModules/menu.tsx

@@ -0,0 +1,60 @@
+import React from "@moonlight-mod/wp/react";
+import { MenuItem } from "@moonlight-mod/wp/contextMenu_contextMenu";
+import { Settings } from "@moonlight-mod/wp/settings_settings";
+
+const DEVELOPER_SECTIONS = [
+  "Experiments",
+  "Developer Options",
+  "Hotspot Options",
+  "Dismissible Content Options",
+  "Payment Flow Modals",
+  "Revenue Storybook",
+  "Design System",
+  "Text Playground",
+  "Text Component",
+  "Intl Testing",
+  "Profile Effects Preview Tool",
+  "Name Plate Tool",
+  "Web Setting Tree Tool",
+  "Quest Preview Tool"
+];
+
+export default function ReorganizeMenu(getSections: () => any[], sections: any[]) {
+  const newSections = [];
+  const currentCategory = [];
+  const allSections = getSections();
+
+  let currentHeader = "Unsorted";
+  for (const section of allSections) {
+    const key = section.section.replace(/\W/gi, "_");
+    const item = sections.find((s) => s.key === key);
+    if (Settings.sectionNames.includes(section.section)) {
+      newSections.push(item);
+      continue;
+    }
+    if (section.section === "CUSTOM" || section.section === "logout") continue;
+
+    if (section.section === "DIVIDER") {
+      if (currentCategory.length > 0)
+        newSections.push(
+          <MenuItem id={currentHeader.replace(/\W/gi, "_")} label={currentHeader}>
+            {currentCategory.splice(0, currentCategory.length)}
+          </MenuItem>
+        );
+
+      currentHeader = "Unsorted";
+    } else if (section.section === "HEADER") {
+      currentHeader = section.label;
+    } else {
+      if (DEVELOPER_SECTIONS.includes(section.section)) currentHeader = "Developer";
+
+      if (currentHeader === "Unsorted") {
+        newSections.push(item);
+      } else {
+        currentCategory.push(item);
+      }
+    }
+  }
+
+  return newSections;
+}