(Optionally) bring back Moonbase tabs

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

@@ -1,8 +1,26 @@
-import { ExtensionWebExports } from "@moonlight-mod/types";
-import configPage from "./ui/config";
+import { ExtensionWebExports, WebpackRequireType } from "@moonlight-mod/types";
 import extensionsPage from "./ui/extensions";
+import configPage from "./ui/config";
 
 import { CircleXIconSVG, DownloadIconSVG, TrashIconSVG } from "./types";
+import ui from "./ui";
+
+export const pageModules: (require: WebpackRequireType) => Record<
+  string,
+  {
+    name: string;
+    element: React.FunctionComponent;
+  }
+> = (require) => ({
+  extensions: {
+    name: "Extensions",
+    element: extensionsPage(require)
+  },
+  config: {
+    name: "Config",
+    element: configPage(require)
+  }
+});
 
 export const webpackModules: ExtensionWebExports["webpackModules"] = {
   stores: {
@@ -55,9 +73,31 @@ export const webpackModules: ExtensionWebExports["webpackModules"] = {
           }
         });
       };
-      settings.addHeader("moonlight", -2);
-      addSection("Extensions", extensionsPage(require));
-      addSection("Config", configPage(require));
+
+      if (moonlight.getConfigOption<boolean>("moonbase", "sections")) {
+        const pages = pageModules(require);
+
+        const { Text } = require("common_components");
+        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 />
+            </>
+          ));
+        }
+      } else {
+        addSection("Moonbase", ui(require));
+      }
     }
   }
 };

packages/core-extensions/src/moonbase/manifest.json

@@ -7,6 +7,11 @@
   },
   "dependencies": ["spacepack", "settings", "common"],
   "settings": {
+    "sections": {
+      "displayName": "Split into sections",
+      "description": "Show the Moonbase tabs as separate sections",
+      "type": "boolean"
+    },
     "saveFilter": {
       "displayName": "Persist filter",
       "description": "Save extension filter in config",

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

@@ -17,8 +17,7 @@ export default (require: WebpackRequireType) => {
     TextInput,
     Flex,
     Button,
-    SingleSelect,
-    Text
+    SingleSelect
   } = CommonComponents;
 
   const { MoonbaseSettingsStore } =
@@ -111,14 +110,6 @@ export default (require: WebpackRequireType) => {
   return function ConfigPage() {
     return (
       <>
-        <Text
-          className={Margins.marginBottom20}
-          variant="heading-lg/semibold"
-          tag="h2"
-        >
-          Config
-        </Text>
-
         <FormItem title="Repositories">
           <FormText className={Margins.marginBottom4}>
             A list of remote repositories to display extensions from

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

@@ -23,7 +23,6 @@ export default (require: WebpackRequireType) => {
   const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;
   const SearchBar = spacepack.findByCode("Messages.SEARCH", "hideSearchIcon")[0]
     .exports.default;
-  const { Text } = require("common_components");
 
   return function ExtensionsPage() {
     const { extensions, savedFilter } = Flux.useStateFromStoresObject(
@@ -87,13 +86,6 @@ export default (require: WebpackRequireType) => {
 
     return (
       <>
-        <Text
-          className={Margins.marginBottom20}
-          variant="heading-lg/semibold"
-          tag="h2"
-        >
-          Extensions
-        </Text>
         <SearchBar
           size={SearchBar.Sizes.MEDIUM}
           query={query}

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

@@ -0,0 +1,54 @@
+import { WebpackRequireType } from "@moonlight-mod/types";
+import { pageModules } from "..";
+
+export default (require: WebpackRequireType) => {
+  const React = require("common_react");
+  const spacepack = require("spacepack_spacepack").spacepack;
+
+  const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;
+
+  const { Divider } = spacepack.findByCode(".default.HEADER_BAR")[0].exports
+    .default;
+  const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0]
+    .exports;
+  const TabBarClasses = spacepack.findByCode("nowPlayingColumn:")[0].exports;
+
+  const pages = pageModules(require);
+
+  return function Moonbase() {
+    const { Text, TabBar } = require("common_components");
+
+    const [selectedTab, setSelectedTab] = React.useState(Object.keys(pages)[0]);
+
+    return (
+      <>
+        <div
+          className={`${TitleBarClasses.children} ${Margins.marginBottom20}`}
+        >
+          <Text
+            className={TitleBarClasses.titleWrapper}
+            variant="heading-lg/semibold"
+            tag="h2"
+          >
+            Moonbase
+          </Text>
+          <Divider />
+          <TabBar
+            selectedItem={selectedTab}
+            onItemSelect={setSelectedTab}
+            type="top-pill"
+            className={TabBarClasses.tabBar}
+          >
+            {Object.entries(pages).map(([id, page]) => (
+              <TabBar.Item key={id} id={id} className={TabBarClasses.item}>
+                {page.name}
+              </TabBar.Item>
+            ))}
+          </TabBar>
+        </div>
+
+        {React.createElement(pages[selectedTab].element)}
+      </>
+    );
+  };
+};