From 02f85ea4962a00fb7af4c065c1fa8978b6798d48 Mon Sep 17 00:00:00 2001
From: redstonekasi <kasi@hanneskann.de>
Date: Sat, 9 Dec 2023 21:43:54 +0100
Subject: [PATCH 1/2] Bring back the true Moonbase navigation (and make it
 optional)

---
 .../core-extensions/src/moonbase/index.tsx    | 55 ++++++++++++++++--
 .../src/moonbase/manifest.json                |  5 ++
 .../src/moonbase/ui/config/index.tsx          | 11 +---
 .../src/moonbase/ui/extensions/index.tsx      |  8 ---
 .../core-extensions/src/moonbase/ui/index.tsx | 56 +++++++++++++++++++
 5 files changed, 112 insertions(+), 23 deletions(-)
 create mode 100644 packages/core-extensions/src/moonbase/ui/index.tsx

diff --git a/packages/core-extensions/src/moonbase/index.tsx b/packages/core-extensions/src/moonbase/index.tsx
index c258b52..3601cc3 100644
--- a/packages/core-extensions/src/moonbase/index.tsx
+++ b/packages/core-extensions/src/moonbase/index.tsx
@@ -1,8 +1,31 @@
-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 enum MoonbasePage {
+  Extensions = "extensions",
+  Config = "config"
+}
+
+export const pageModules: (require: WebpackRequireType) => Record<
+  MoonbasePage,
+  {
+    name: string;
+    element: React.FunctionComponent;
+  }
+> = (require) => ({
+  [MoonbasePage.Extensions]: {
+    name: "Extensions",
+    element: extensionsPage(require)
+  },
+  [MoonbasePage.Config]: {
+    name: "Config",
+    element: configPage(require)
+  }
+});
 
 export const webpackModules: ExtensionWebExports["webpackModules"] = {
   stores: {
@@ -55,9 +78,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));
+      }
     }
   }
 };
diff --git a/packages/core-extensions/src/moonbase/manifest.json b/packages/core-extensions/src/moonbase/manifest.json
index d4dbfe1..b508020 100644
--- a/packages/core-extensions/src/moonbase/manifest.json
+++ b/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",
diff --git a/packages/core-extensions/src/moonbase/ui/config/index.tsx b/packages/core-extensions/src/moonbase/ui/config/index.tsx
index 9f5b1db..01f3882 100644
--- a/packages/core-extensions/src/moonbase/ui/config/index.tsx
+++ b/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
diff --git a/packages/core-extensions/src/moonbase/ui/extensions/index.tsx b/packages/core-extensions/src/moonbase/ui/extensions/index.tsx
index 5289955..b1b5e5e 100644
--- a/packages/core-extensions/src/moonbase/ui/extensions/index.tsx
+++ b/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}
diff --git a/packages/core-extensions/src/moonbase/ui/index.tsx b/packages/core-extensions/src/moonbase/ui/index.tsx
new file mode 100644
index 0000000..e9197e9
--- /dev/null
+++ b/packages/core-extensions/src/moonbase/ui/index.tsx
@@ -0,0 +1,56 @@
+import { WebpackRequireType } from "@moonlight-mod/types";
+import { MoonbasePage, 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(
+      MoonbasePage.Extensions
+    );
+
+    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)}
+      </>
+    );
+  };
+};

From 61bb1160f869c3207784f005409d5029abb52ea7 Mon Sep 17 00:00:00 2001
From: redstonekasi <kasi@hanneskann.de>
Date: Sat, 9 Dec 2023 21:46:22 +0100
Subject: [PATCH 2/2] That enum is useless oop

---
 packages/core-extensions/src/moonbase/index.tsx    | 11 +++--------
 packages/core-extensions/src/moonbase/ui/index.tsx |  6 ++----
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/core-extensions/src/moonbase/index.tsx b/packages/core-extensions/src/moonbase/index.tsx
index 3601cc3..b2456f1 100644
--- a/packages/core-extensions/src/moonbase/index.tsx
+++ b/packages/core-extensions/src/moonbase/index.tsx
@@ -5,23 +5,18 @@ import configPage from "./ui/config";
 import { CircleXIconSVG, DownloadIconSVG, TrashIconSVG } from "./types";
 import ui from "./ui";
 
-export enum MoonbasePage {
-  Extensions = "extensions",
-  Config = "config"
-}
-
 export const pageModules: (require: WebpackRequireType) => Record<
-  MoonbasePage,
+  string,
   {
     name: string;
     element: React.FunctionComponent;
   }
 > = (require) => ({
-  [MoonbasePage.Extensions]: {
+  extensions: {
     name: "Extensions",
     element: extensionsPage(require)
   },
-  [MoonbasePage.Config]: {
+  config: {
     name: "Config",
     element: configPage(require)
   }
diff --git a/packages/core-extensions/src/moonbase/ui/index.tsx b/packages/core-extensions/src/moonbase/ui/index.tsx
index e9197e9..b095bbe 100644
--- a/packages/core-extensions/src/moonbase/ui/index.tsx
+++ b/packages/core-extensions/src/moonbase/ui/index.tsx
@@ -1,5 +1,5 @@
 import { WebpackRequireType } from "@moonlight-mod/types";
-import { MoonbasePage, pageModules } from "..";
+import { pageModules } from "..";
 
 export default (require: WebpackRequireType) => {
   const React = require("common_react");
@@ -18,9 +18,7 @@ export default (require: WebpackRequireType) => {
   return function Moonbase() {
     const { Text, TabBar } = require("common_components");
 
-    const [selectedTab, setSelectedTab] = React.useState(
-      MoonbasePage.Extensions
-    );
+    const [selectedTab, setSelectedTab] = React.useState(Object.keys(pages)[0]);
 
     return (
       <>