Merge branch 'develop' into lunast

CHANGELOG.md

···
-- Added multiline string input for extension settings
-- Fixed conflicting extensions in Moonbase
 - Fixes for latest Discord

package.json

···
 {
   "name": "moonlight",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Yet another Discord mod",
   "homepage": "https://moonlight-mod.github.io/",
   "license": "LGPL-3.0-or-later",

packages/core-extensions/src/moonbase/webpackModules/moonbase.tsx

···
 import { Moonbase, pages } from "@moonlight-mod/wp/moonbase_ui";
 
 import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
-import { Text } from "@moonlight-mod/wp/common_components";
+import { MenuItem } from "@moonlight-mod/wp/common_components";
 
-function addSection(name: string, element: React.FunctionComponent) {
-  settings.addSection(name, name, element, null, -2, {
-    stores: [MoonbaseSettingsStore],
-    element: () => {
-      // Require it here because lazy loading SUX
-      const SettingsNotice =
-        spacepack.findByCode("onSaveButtonColor")[0].exports.Z;
-      return (
-        <SettingsNotice
-          submitting={MoonbaseSettingsStore.submitting}
-          onReset={() => {
-            MoonbaseSettingsStore.reset();
-          }}
-          onSave={() => {
-            MoonbaseSettingsStore.writeConfig();
-          }}
-          disabled={false}
-        />
-      );
-    }
-  });
-}
+const { open } = spacepack.findByExports("setSection", "clearSubsection")[0]
+  .exports.Z;
 
-if (moonlight.getConfigOption<boolean>("moonbase", "sections")) {
-  const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;
-
-  settings.addHeader("Moonbase", -2);
-  for (const page of Object.values(pages)) {
-    addSection(page.name, () => (
-      <>
-        <Text
-          className={Margins.marginBottom20}
-          variant="heading-lg/semibold"
-          tag="h2"
-        >
-          Extensions
-        </Text>
-        <page.element />
-      </>
-    ));
+settings.addSection("moonbase", "Moonbase", Moonbase, null, -2, {
+  stores: [MoonbaseSettingsStore],
+  element: () => {
+    // Require it here because lazy loading SUX
+    const SettingsNotice = spacepack.findByCode(
+      "onSaveButtonColor",
+      "FocusRingScope"
+    )[0].exports.Z;
+    return (
+      <SettingsNotice
+        submitting={MoonbaseSettingsStore.submitting}
+        onReset={() => {
+          MoonbaseSettingsStore.reset();
+        }}
+        onSave={() => {
+          MoonbaseSettingsStore.writeConfig();
+        }}
+      />
+    );
   }
-} else {
-  addSection("Moonbase", Moonbase);
-}
+});
+
+settings.addSectionMenuItems(
+  "moonbase",
+  ...pages.map((page, i) => (
+    <MenuItem
+      key={page.id}
+      id={`moonbase-${page.id}`}
+      label={page.name}
+      action={() => open("moonbase", i)}
+    />
+  ))
+);

packages/core-extensions/src/moonbase/webpackModules/ui/extensions/card.tsx

···
 
 import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
 
-const { DownloadIcon, TrashIcon, CircleExclamationPointIcon } =
-  CommonComponents;
+const { DownloadIcon, TrashIcon, CircleWarningIcon } = CommonComponents;
 
 const PanelButton = spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.Z;
 const TabBarClasses = spacepack.findByExports(
···
               {restartNeeded && (
                 <PanelButton
                   icon={() => (
-                    <CircleExclamationPointIcon
+                    <CircleWarningIcon
                       color={CommonComponents.tokens.colors.STATUS_DANGER}
                     />
                   )}

packages/core-extensions/src/moonbase/webpackModules/ui/index.tsx

···
 import React from "@moonlight-mod/wp/common_react";
 import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
 import { Text, TabBar } from "@moonlight-mod/wp/common_components";
+import * as Flux from "@moonlight-mod/wp/common_flux";
+import { UserSettingsModalStore } from "@moonlight-mod/wp/common_stores";
 
 import ExtensionsPage from "./extensions";
 import ConfigPage from "./config";
···
 const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0]
   .exports;
 const TabBarClasses = spacepack.findByCode("nowPlayingColumn:")[0].exports;
+const { setSection, clearSubsection } = spacepack.findByExports(
+  "setSection",
+  "clearSubsection"
+)[0].exports.Z;
 
-export const pages: Record<
-  string,
+export const pages: {
+  id: string;
+  name: string;
+  element: React.FunctionComponent;
+}[] = [
   {
-    name: string;
-    element: React.FunctionComponent;
-  }
-> = {
-  extensions: {
+    id: "extensions",
     name: "Extensions",
     element: ExtensionsPage
   },
-  config: {
+  {
+    id: "config",
     name: "Config",
     element: ConfigPage
   }
-};
+];
+
+export function Moonbase(props: { initialTab?: number } = {}) {
+  const subsection = Flux.useStateFromStores(
+    [UserSettingsModalStore],
+    () => UserSettingsModalStore.getSubsection() ?? 0
+  );
+  const setSubsection = React.useCallback(
+    (to: string) => {
+      if (subsection !== to) setSection("moonbase", to);
+    },
+    [subsection]
+  );
 
-export function Moonbase() {
-  const [selectedTab, setSelectedTab] = React.useState(Object.keys(pages)[0]);
+  React.useEffect(
+    () => () => {
+      // Normally there's an onSettingsClose prop you can set but we don't expose it and I don't care enough to add support for it right now
+      clearSubsection("moonbase");
+    },
+    []
+  );
 
   return (
     <>
···
         </Text>
         <Divider />
         <TabBar
-          selectedItem={selectedTab}
-          onItemSelect={setSelectedTab}
+          selectedItem={subsection}
+          onItemSelect={setSubsection}
           type="top-pill"
           className={TabBarClasses.tabBar}
         >
-          {Object.entries(pages).map(([id, page]) => (
-            <TabBar.Item key={id} id={id} className={TabBarClasses.item}>
+          {pages.map((page, i) => (
+            <TabBar.Item key={page.id} id={i} className={TabBarClasses.item}>
               {page.name}
             </TabBar.Item>
           ))}
         </TabBar>
       </div>
 
-      {React.createElement(pages[selectedTab].element)}
+      {React.createElement(pages[subsection].element)}
     </>
   );
 }

packages/core-extensions/src/settings/webpackModules/settings.ts

···
 export const Settings: SettingsType = {
   ourSections: [],
   sectionNames: [],
+  sectionMenuItems: {},
 
   addSection: (section, label, element, color = null, pos, notice) => {
     const data: SettingsSection = {
···
     };
 
     Settings.ourSections.push(data);
-    Settings.sectionNames.push(label);
+    Settings.sectionNames.push(section);
     return data;
+  },
+  addSectionMenuItems(section, ...newItems) {
+    const data = Settings.ourSections.find((x) => x.section === section);
+    if (!data || !("element" in data))
+      throw new Error(`Could not find section "${section}"`);
+    (Settings.sectionMenuItems[section] ??= []).push(...newItems);
+    data._moonlight_submenu ??= () => Settings.sectionMenuItems[section];
   },
 
   addDivider: (pos = null) => {

packages/types/package.json

···
 {
   "name": "@moonlight-mod/types",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {

packages/types/src/coreExtensions.ts

···
 import { FluxDefault, Store } from "./discord/common/Flux";
 import { CommonComponents as CommonComponents_ } from "./coreExtensions/components";
 import { Dispatcher } from "flux";
-import React from "react";
+import React, { ReactElement } from "react";
 import {
   WebpackModule,
   WebpackModuleFunc,
···
       element: React.FunctionComponent;
       pos: number;
       notice?: NoticeProps;
-      _moonlight_submenu?: () => any;
+      _moonlight_submenu?: () => ReactElement | ReactElement[];
     };
 
 export type Settings = {
   ourSections: SettingsSection[];
   sectionNames: string[];
+  sectionMenuItems: Record<string, ReactElement[]>;
 
   addSection: (
     section: string,
···
     pos?: number,
     notice?: NoticeProps
   ) => void;
+  addSectionMenuItems: (section: string, ...items: ReactElement[]) => void;
 
   addDivider: (pos: number | null) => void;
   addHeader: (label: string, pos: number | null) => void;

pnpm-lock.yaml

···
     engines: {node: '>= 6'}
 
   concat-map@0.0.1:
-    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
 
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}