From 4af5aef142022a711dbcd7ba851d7344b6839fd0 Mon Sep 17 00:00:00 2001
From: redstonekasi <kasi@hanneskann.de>
Date: Thu, 7 Dec 2023 02:05:45 +0100
Subject: [PATCH 1/4] add basic extension search

---
 .../core-extensions/src/moonbase/ui/index.tsx | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/core-extensions/src/moonbase/ui/index.tsx b/packages/core-extensions/src/moonbase/ui/index.tsx
index 1ef020a..7981f41 100644
--- a/packages/core-extensions/src/moonbase/ui/index.tsx
+++ b/packages/core-extensions/src/moonbase/ui/index.tsx
@@ -39,6 +39,10 @@ export default (require: typeof WebpackRequire) => {
   const PanelButton =
     spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.default;
 
+  const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;
+  const SearchBar = spacepack.findByCode("Messages.SEARCH", "hideSearchIcon")[0]
+    .exports.default;
+
   function ExtensionCard({ id }: { id: string }) {
     const [tab, setTab] = React.useState(ExtensionPage.Info);
     const [restartNeeded, setRestartNeeded] = React.useState(false);
@@ -229,12 +233,23 @@ export default (require: typeof WebpackRequire) => {
       }
     );
 
+    const [query, setQuery] = React.useState("");
+
     const sorted = Object.values(extensions).sort((a, b) => {
       const aName = a.manifest.meta?.name ?? a.id;
       const bName = b.manifest.meta?.name ?? b.id;
       return aName.localeCompare(bName);
     });
 
+    const filtered = query.trim().length
+      ? sorted.filter(
+          (ext) =>
+            ext.manifest.meta?.name?.toLowerCase().includes(query) ||
+            ext.manifest.meta?.tagline?.toLowerCase().includes(query) ||
+            ext.manifest.meta?.description?.toLowerCase().includes(query)
+        )
+      : sorted;
+
     return (
       <>
         <Text
@@ -246,7 +261,20 @@ export default (require: typeof WebpackRequire) => {
         >
           Moonbase
         </Text>
-        {sorted.map((ext) => (
+        <SearchBar
+          size={SearchBar.Sizes.MEDIUM}
+          className={Margins.marginBottom20}
+          query={query}
+          onChange={(v: string) => setQuery(v.toLowerCase())}
+          onClear={() => setQuery("")}
+          autoComplete="off"
+          inputProps={{
+            autoCapitalize: "none",
+            autoCorrect: "off",
+            spellCheck: "false"
+          }}
+        />
+        {filtered.map((ext) => (
           <ExtensionCard id={ext.id} key={ext.id} />
         ))}
       </>

From e7fe57d5da9cf01e12309ec43955134bed3061d6 Mon Sep 17 00:00:00 2001
From: redstonekasi <kasi@hanneskann.de>
Date: Thu, 7 Dec 2023 02:07:41 +0100
Subject: [PATCH 2/4] auto focus search

---
 packages/core-extensions/src/moonbase/ui/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core-extensions/src/moonbase/ui/index.tsx b/packages/core-extensions/src/moonbase/ui/index.tsx
index 7981f41..b45eb4d 100644
--- a/packages/core-extensions/src/moonbase/ui/index.tsx
+++ b/packages/core-extensions/src/moonbase/ui/index.tsx
@@ -267,6 +267,7 @@ export default (require: typeof WebpackRequire) => {
           query={query}
           onChange={(v: string) => setQuery(v.toLowerCase())}
           onClear={() => setQuery("")}
+          autoFocus={true}
           autoComplete="off"
           inputProps={{
             autoCapitalize: "none",

From 0d42f8975a02f76b0a2520ecd0ddf04ae883c638 Mon Sep 17 00:00:00 2001
From: redstonekasi <kasi@hanneskann.de>
Date: Thu, 7 Dec 2023 02:12:36 +0100
Subject: [PATCH 3/4] move extension card into separate file

---
 .../core-extensions/src/moonbase/ui/card.tsx  | 221 ++++++++++++++++++
 .../core-extensions/src/moonbase/ui/index.tsx | 206 +---------------
 .../src/moonbase/ui/settings.tsx              |   7 +-
 3 files changed, 224 insertions(+), 210 deletions(-)
 create mode 100644 packages/core-extensions/src/moonbase/ui/card.tsx

diff --git a/packages/core-extensions/src/moonbase/ui/card.tsx b/packages/core-extensions/src/moonbase/ui/card.tsx
new file mode 100644
index 0000000..34479ce
--- /dev/null
+++ b/packages/core-extensions/src/moonbase/ui/card.tsx
@@ -0,0 +1,221 @@
+import WebpackRequire from "@moonlight-mod/types/discord/require";
+import {
+  DangerIconSVG,
+  DownloadIconSVG,
+  ExtensionState,
+  TrashIconSVG
+} from "../types";
+import { ExtensionLoadSource } from "types/src";
+import info from "./info";
+import settings from "./settings";
+
+export enum ExtensionPage {
+  Info,
+  Description,
+  Settings
+}
+
+export default (require: typeof WebpackRequire) => {
+  const React = require("common_react");
+  const spacepack = require("spacepack_spacepack").spacepack;
+  const CommonComponents = require("common_components");
+  const Flux = require("common_flux");
+
+  const { ExtensionInfo } = info(require);
+  const Settings = settings(require);
+  const { MoonbaseSettingsStore } =
+    require("moonbase_stores") as typeof import("../webpackModules/stores");
+
+  const UserProfileClasses = spacepack.findByCode(
+    "tabBarContainer",
+    "topSection"
+  )[0].exports;
+
+  const DownloadIcon = spacepack.findByCode(DownloadIconSVG)[0].exports.default;
+  const TrashIcon = spacepack.findByCode(TrashIconSVG)[0].exports.default;
+  const DangerIcon =
+    spacepack.findByCode(DangerIconSVG)[0].exports.CircleExclamationPointIcon;
+
+  const PanelButton =
+    spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.default;
+
+  return function ExtensionCard({ id }: { id: string }) {
+    const [tab, setTab] = React.useState(ExtensionPage.Info);
+    const [restartNeeded, setRestartNeeded] = React.useState(false);
+
+    const { ext, enabled, busy, update } = Flux.useStateFromStores(
+      [MoonbaseSettingsStore],
+      () => {
+        return {
+          ext: MoonbaseSettingsStore.getExtension(id),
+          enabled: MoonbaseSettingsStore.getExtensionEnabled(id),
+          busy: MoonbaseSettingsStore.busy,
+          update: MoonbaseSettingsStore.getExtensionUpdate(id)
+        };
+      }
+    );
+
+    // Why it work like that :sob:
+    if (ext == null) return <></>;
+
+    const {
+      Card,
+      CardClasses,
+      Flex,
+      Text,
+      MarkdownParser,
+      Switch,
+      TabBar,
+      Button
+    } = CommonComponents;
+
+    const tagline = ext.manifest?.meta?.tagline;
+    const settings = ext.manifest?.settings;
+    const description = ext.manifest?.meta?.description;
+
+    return (
+      <Card editable={true} className={CardClasses.card}>
+        <div className={CardClasses.cardHeader}>
+          <Flex direction={Flex.Direction.VERTICAL}>
+            <Flex direction={Flex.Direction.HORIZONTAL}>
+              <Text variant="text-md/semibold">
+                {ext.manifest?.meta?.name ?? ext.id}
+              </Text>
+            </Flex>
+
+            {tagline != null && (
+              <Text variant="text-sm/normal">
+                {MarkdownParser.parse(tagline)}
+              </Text>
+            )}
+          </Flex>
+
+          <Flex
+            direction={Flex.Direction.HORIZONTAL}
+            align={Flex.Align.END}
+            justify={Flex.Justify.END}
+          >
+            {ext.state === ExtensionState.NotDownloaded ? (
+              <Button
+                color={Button.Colors.BRAND}
+                submitting={busy}
+                onClick={() => {
+                  MoonbaseSettingsStore.installExtension(id);
+                }}
+              >
+                Install
+              </Button>
+            ) : (
+              <div
+                // too lazy to learn how <Flex /> works lmao
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "1rem"
+                }}
+              >
+                {ext.source.type === ExtensionLoadSource.Normal && (
+                  <PanelButton
+                    icon={TrashIcon}
+                    tooltipText="Delete"
+                    onClick={() => {
+                      MoonbaseSettingsStore.deleteExtension(id);
+                    }}
+                  />
+                )}
+
+                {update !== null && (
+                  <PanelButton
+                    icon={DownloadIcon}
+                    tooltipText="Delete"
+                    onClick={() => {
+                      MoonbaseSettingsStore.installExtension(id);
+                    }}
+                  />
+                )}
+
+                {restartNeeded && (
+                  <PanelButton
+                    icon={() => (
+                      <DangerIcon
+                        color={CommonComponents.tokens.colors.STATUS_DANGER}
+                      />
+                    )}
+                    tooltipText="You will need to reload/restart your client for this extension to work properly."
+                  />
+                )}
+
+                <Switch
+                  checked={enabled}
+                  onChange={() => {
+                    setRestartNeeded(true);
+                    MoonbaseSettingsStore.setExtensionEnabled(id, !enabled);
+                  }}
+                />
+              </div>
+            )}
+          </Flex>
+        </div>
+
+        <div className={UserProfileClasses.body}>
+          {(description != null || settings != null) && (
+            <div
+              className={UserProfileClasses.tabBarContainer}
+              style={{
+                padding: "0 10px"
+              }}
+            >
+              <TabBar
+                selectedItem={tab}
+                type="top"
+                onItemSelect={setTab}
+                className={UserProfileClasses.tabBar}
+              >
+                <TabBar.Item
+                  className={UserProfileClasses.tabBarItem}
+                  id={ExtensionPage.Info}
+                >
+                  Info
+                </TabBar.Item>
+
+                {description != null && (
+                  <TabBar.Item
+                    className={UserProfileClasses.tabBarItem}
+                    id={ExtensionPage.Description}
+                  >
+                    Description
+                  </TabBar.Item>
+                )}
+
+                {settings != null && (
+                  <TabBar.Item
+                    className={UserProfileClasses.tabBarItem}
+                    id={ExtensionPage.Settings}
+                  >
+                    Settings
+                  </TabBar.Item>
+                )}
+              </TabBar>
+            </div>
+          )}
+
+          <Flex
+            justify={Flex.Justify.START}
+            wrap={Flex.Wrap.WRAP}
+            style={{
+              padding: "16px 16px"
+            }}
+          >
+            {tab === ExtensionPage.Info && <ExtensionInfo ext={ext} />}
+            {tab === ExtensionPage.Description && (
+              <Text variant="text-md/normal">
+                {MarkdownParser.parse(description ?? "*No description*")}
+              </Text>
+            )}
+            {tab === ExtensionPage.Settings && <Settings ext={ext} />}
+          </Flex>
+        </div>
+      </Card>
+    );
+  };
+};
diff --git a/packages/core-extensions/src/moonbase/ui/index.tsx b/packages/core-extensions/src/moonbase/ui/index.tsx
index b45eb4d..6cfe06f 100644
--- a/packages/core-extensions/src/moonbase/ui/index.tsx
+++ b/packages/core-extensions/src/moonbase/ui/index.tsx
@@ -1,13 +1,5 @@
 import WebpackRequire from "@moonlight-mod/types/discord/require";
-import {
-  DangerIconSVG,
-  DownloadIconSVG,
-  ExtensionState,
-  TrashIconSVG
-} from "../types";
-import { ExtensionLoadSource } from "types/src";
-import info from "./info";
-import settings from "./settings";
+import card from "./card";
 
 export enum ExtensionPage {
   Info,
@@ -18,211 +10,17 @@ export enum ExtensionPage {
 export default (require: typeof WebpackRequire) => {
   const React = require("common_react");
   const spacepack = require("spacepack_spacepack").spacepack;
-  const CommonComponents = require("common_components");
   const Flux = require("common_flux");
 
-  const { ExtensionInfo } = info(require);
-  const { Settings } = settings(require);
   const { MoonbaseSettingsStore } =
     require("moonbase_stores") as typeof import("../webpackModules/stores");
 
-  const UserProfileClasses = spacepack.findByCode(
-    "tabBarContainer",
-    "topSection"
-  )[0].exports;
-
-  const DownloadIcon = spacepack.findByCode(DownloadIconSVG)[0].exports.default;
-  const TrashIcon = spacepack.findByCode(TrashIconSVG)[0].exports.default;
-  const DangerIcon =
-    spacepack.findByCode(DangerIconSVG)[0].exports.CircleExclamationPointIcon;
-
-  const PanelButton =
-    spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.default;
+  const ExtensionCard = card(require);
 
   const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;
   const SearchBar = spacepack.findByCode("Messages.SEARCH", "hideSearchIcon")[0]
     .exports.default;
 
-  function ExtensionCard({ id }: { id: string }) {
-    const [tab, setTab] = React.useState(ExtensionPage.Info);
-    const [restartNeeded, setRestartNeeded] = React.useState(false);
-
-    const { ext, enabled, busy, update } = Flux.useStateFromStores(
-      [MoonbaseSettingsStore],
-      () => {
-        return {
-          ext: MoonbaseSettingsStore.getExtension(id),
-          enabled: MoonbaseSettingsStore.getExtensionEnabled(id),
-          busy: MoonbaseSettingsStore.busy,
-          update: MoonbaseSettingsStore.getExtensionUpdate(id)
-        };
-      }
-    );
-
-    // Why it work like that :sob:
-    if (ext == null) return <></>;
-
-    const {
-      Card,
-      CardClasses,
-      Flex,
-      Text,
-      MarkdownParser,
-      Switch,
-      TabBar,
-      Button
-    } = CommonComponents;
-
-    const tagline = ext.manifest?.meta?.tagline;
-    const settings = ext.manifest?.settings;
-    const description = ext.manifest?.meta?.description;
-
-    return (
-      <Card editable={true} className={CardClasses.card}>
-        <div className={CardClasses.cardHeader}>
-          <Flex direction={Flex.Direction.VERTICAL}>
-            <Flex direction={Flex.Direction.HORIZONTAL}>
-              <Text variant="text-md/semibold">
-                {ext.manifest?.meta?.name ?? ext.id}
-              </Text>
-            </Flex>
-
-            {tagline != null && (
-              <Text variant="text-sm/normal">
-                {MarkdownParser.parse(tagline)}
-              </Text>
-            )}
-          </Flex>
-
-          <Flex
-            direction={Flex.Direction.HORIZONTAL}
-            align={Flex.Align.END}
-            justify={Flex.Justify.END}
-          >
-            {ext.state === ExtensionState.NotDownloaded ? (
-              <Button
-                color={Button.Colors.BRAND}
-                submitting={busy}
-                onClick={() => {
-                  MoonbaseSettingsStore.installExtension(id);
-                }}
-              >
-                Install
-              </Button>
-            ) : (
-              <div
-                // too lazy to learn how <Flex /> works lmao
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "1rem"
-                }}
-              >
-                {ext.source.type === ExtensionLoadSource.Normal && (
-                  <PanelButton
-                    icon={TrashIcon}
-                    tooltipText="Delete"
-                    onClick={() => {
-                      MoonbaseSettingsStore.deleteExtension(id);
-                    }}
-                  />
-                )}
-
-                {update !== null && (
-                  <PanelButton
-                    icon={DownloadIcon}
-                    tooltipText="Delete"
-                    onClick={() => {
-                      MoonbaseSettingsStore.installExtension(id);
-                    }}
-                  />
-                )}
-
-                {restartNeeded && (
-                  <PanelButton
-                    icon={() => (
-                      <DangerIcon
-                        color={CommonComponents.tokens.colors.STATUS_DANGER}
-                      />
-                    )}
-                    tooltipText="You will need to reload/restart your client for this extension to work properly."
-                  />
-                )}
-
-                <Switch
-                  checked={enabled}
-                  onChange={() => {
-                    setRestartNeeded(true);
-                    MoonbaseSettingsStore.setExtensionEnabled(id, !enabled);
-                  }}
-                />
-              </div>
-            )}
-          </Flex>
-        </div>
-
-        <div className={UserProfileClasses.body}>
-          {(description != null || settings != null) && (
-            <div
-              className={UserProfileClasses.tabBarContainer}
-              style={{
-                padding: "0 10px"
-              }}
-            >
-              <TabBar
-                selectedItem={tab}
-                type="top"
-                onItemSelect={setTab}
-                className={UserProfileClasses.tabBar}
-              >
-                <TabBar.Item
-                  className={UserProfileClasses.tabBarItem}
-                  id={ExtensionPage.Info}
-                >
-                  Info
-                </TabBar.Item>
-
-                {description != null && (
-                  <TabBar.Item
-                    className={UserProfileClasses.tabBarItem}
-                    id={ExtensionPage.Description}
-                  >
-                    Description
-                  </TabBar.Item>
-                )}
-
-                {settings != null && (
-                  <TabBar.Item
-                    className={UserProfileClasses.tabBarItem}
-                    id={ExtensionPage.Settings}
-                  >
-                    Settings
-                  </TabBar.Item>
-                )}
-              </TabBar>
-            </div>
-          )}
-
-          <Flex
-            justify={Flex.Justify.START}
-            wrap={Flex.Wrap.WRAP}
-            style={{
-              padding: "16px 16px"
-            }}
-          >
-            {tab === ExtensionPage.Info && <ExtensionInfo ext={ext} />}
-            {tab === ExtensionPage.Description && (
-              <Text variant="text-md/normal">
-                {MarkdownParser.parse(description ?? "*No description*")}
-              </Text>
-            )}
-            {tab === ExtensionPage.Settings && <Settings ext={ext} />}
-          </Flex>
-        </div>
-      </Card>
-    );
-  }
-
   return function Moonbase() {
     const { Text } = require("common_components");
 
diff --git a/packages/core-extensions/src/moonbase/ui/settings.tsx b/packages/core-extensions/src/moonbase/ui/settings.tsx
index 389fac2..6199cb6 100644
--- a/packages/core-extensions/src/moonbase/ui/settings.tsx
+++ b/packages/core-extensions/src/moonbase/ui/settings.tsx
@@ -352,7 +352,7 @@ export default (require: typeof WebpackRequire) => {
     return React.createElement(element, { ext, name, setting });
   }
 
-  function Settings({ ext }: { ext: MoonbaseExtension }) {
+  return function Settings({ ext }: { ext: MoonbaseExtension }) {
     const { Flex } = CommonComponents;
     return (
       <Flex direction={Flex.Direction.VERTICAL}>
@@ -361,10 +361,5 @@ export default (require: typeof WebpackRequire) => {
         ))}
       </Flex>
     );
-  }
-
-  return {
-    Boolean,
-    Settings
   };
 };

From 7e2c7135fd6cecb46acb20c94440a6a3dc3d65ae Mon Sep 17 00:00:00 2001
From: redstonekasi <kasi@hanneskann.de>
Date: Thu, 7 Dec 2023 02:28:44 +0100
Subject: [PATCH 4/4] make margin uniform across all setting types

---
 packages/core-extensions/src/moonbase/ui/settings.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/core-extensions/src/moonbase/ui/settings.tsx b/packages/core-extensions/src/moonbase/ui/settings.tsx
index 6199cb6..102978d 100644
--- a/packages/core-extensions/src/moonbase/ui/settings.tsx
+++ b/packages/core-extensions/src/moonbase/ui/settings.tsx
@@ -59,6 +59,7 @@ export default (require: typeof WebpackRequire) => {
           MoonbaseSettingsStore.setExtensionConfig(ext.id, name, value);
         }}
         note={description}
+        className={`${Margins.marginReset} ${Margins.marginTop20}`}
       >
         {displayName}
       </FormSwitch>
@@ -77,7 +78,7 @@ export default (require: typeof WebpackRequire) => {
     const max = castedSetting.max ?? 100;
 
     return (
-      <FormItem className={Margins.marginTop8} title={displayName}>
+      <FormItem className={Margins.marginTop20} title={displayName}>
         {description && <FormText>{description}</FormText>}
         <Slider
           initialValue={value ?? 0}
@@ -355,7 +356,10 @@ export default (require: typeof WebpackRequire) => {
   return function Settings({ ext }: { ext: MoonbaseExtension }) {
     const { Flex } = CommonComponents;
     return (
-      <Flex direction={Flex.Direction.VERTICAL}>
+      <Flex className="moonbase-settings" direction={Flex.Direction.VERTICAL}>
+        <style>
+          {".moonbase-settings > :nth-child(2) { margin-top: 0px; }"}
+        </style>
         {Object.entries(ext.manifest.settings!).map(([name, setting]) => (
           <Setting ext={ext} key={name} name={name} setting={setting} />
         ))}