The Great Sectionification

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

@@ -1,5 +1,7 @@
 import { ExtensionWebExports } from "@moonlight-mod/types";
-import ui from "./ui";
+import configPage from "./ui/config";
+import extensionsPage from "./ui/extensions";
+
 import { CircleXIconSVG, DownloadIconSVG, TrashIconSVG } from "./types";
 
 export const webpackModules: ExtensionWebExports["webpackModules"] = {
@@ -32,25 +34,30 @@ export const webpackModules: ExtensionWebExports["webpackModules"] = {
       const { MoonbaseSettingsStore } =
         require("moonbase_stores") as typeof import("./webpackModules/stores");
 
-      settings.addSection("Moonbase", "Moonbase", ui(require), null, -2, {
-        stores: [MoonbaseSettingsStore],
-        element: () => {
-          // Require it here because lazy loading SUX
-          const SettingsNotice =
-            spacepack.findByCode("onSaveButtonColor")[0].exports.default;
-          return (
-            <SettingsNotice
-              submitting={MoonbaseSettingsStore.submitting}
-              onReset={() => {
-                MoonbaseSettingsStore.reset();
-              }}
-              onSave={() => {
-                MoonbaseSettingsStore.writeConfig();
-              }}
-            />
-          );
-        }
-      });
+      const 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.default;
+            return (
+              <SettingsNotice
+                submitting={MoonbaseSettingsStore.submitting}
+                onReset={() => {
+                  MoonbaseSettingsStore.reset();
+                }}
+                onSave={() => {
+                  MoonbaseSettingsStore.writeConfig();
+                }}
+              />
+            );
+          }
+        });
+      };
+      settings.addHeader("moonlight", -2);
+      addSection("Extensions", extensionsPage(require));
+      addSection("Config", configPage(require));
     }
   }
 };

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

@@ -40,7 +40,7 @@ export default (require: WebpackRequireType) => {
               className={RemoveButtonClasses.removeButton}
               onClick={onClick}
             >
-              <CircleXIcon width={16} height={16} />
+              <CircleXIcon width={24} height={24} />
             </Clickable>
           )}
         </Tooltip>
@@ -55,7 +55,12 @@ export default (require: WebpackRequireType) => {
   }) {
     const items = MoonbaseSettingsStore.getConfigOption(config) ?? [];
     return (
-      <Flex direction={Flex.Direction.VERTICAL}>
+      <Flex
+        style={{
+          gap: "20px"
+        }}
+        direction={Flex.Direction.VERTICAL}
+      >
         {items.map((val, i) => (
           <div
             key={i}
@@ -68,7 +73,7 @@ export default (require: WebpackRequireType) => {
             }}
           >
             <TextInput
-              size={TextInput.Sizes.MINI}
+              size={TextInput.Sizes.DEFAULT}
               value={val}
               onChange={(newVal: string) => {
                 items[i] = newVal;
@@ -88,7 +93,9 @@ export default (require: WebpackRequireType) => {
           look={Button.Looks.FILLED}
           color={Button.Colors.GREEN}
           size={Button.Sizes.SMALL}
-          className={Margins.marginTop8}
+          style={{
+            marginTop: "10px"
+          }}
           onClick={() => {
             items.push("");
             MoonbaseSettingsStore.setConfigOption(config, items);

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

@@ -23,6 +23,7 @@ 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 } = Flux.useStateFromStoresObject(
@@ -35,7 +36,8 @@ export default (require: WebpackRequireType) => {
     const [query, setQuery] = React.useState("");
     const [filter, setFilter] = React.useState({ ...defaultFilter });
     const [selectedTags, setSelectedTags] = React.useState(new Set<string>());
-
+    const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0]
+      .exports;
     const sorted = Object.values(extensions).sort((a, b) => {
       const aName = a.manifest.meta?.name ?? a.id;
       const bName = b.manifest.meta?.name ?? b.id;
@@ -67,6 +69,17 @@ export default (require: WebpackRequireType) => {
 
     return (
       <>
+        <div
+          className={`${TitleBarClasses.children} ${Margins.marginBottom20}`}
+        >
+          <Text
+            className={TitleBarClasses.titleWrapper}
+            variant="heading-lg/semibold"
+            tag="h2"
+          >
+            Extensions
+          </Text>
+        </div>
         <SearchBar
           size={SearchBar.Sizes.MEDIUM}
           query={query}