@@ -11,6 +11,7 @@ textarea.moonbase-resizeable {
   resize: vertical;
 }
 
+/* Update notice at the top of the client */
 .moonbase-updates-notice {
   background-color: var(--moonbase-bg);
   color: var(--moonbase-fg);
@@ -31,15 +32,22 @@ line-height: 36px;
   gap: 2px;
 }
 
+/* Help messages in Moonbase UI */
+.moonbase-help-message {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.moonbase-extension-update-section {
+  margin-top: 15px;
+}
+
 .moonbase-update-section {
   background-color: var(--moonbase-bg);
   --info-help-foreground: var(--moonbase-fg);
   border: none !important;
   color: var(--moonbase-fg);
-
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
 }
 
 .moonbase-update-section button {
@@ -49,7 +57,7 @@ background-color: transparent;
   border-color: var(--moonbase-fg);
 }
 
-.moonbase-update-section-buttons {
+.moonbase-help-message-buttons {
   display: flex;
   flex-direction: row;
   gap: 8px;
@@ -59,7 +67,7 @@ .moonbase-update-divider {
   margin: 32px 0;
 }
 
-/* crash screen */
+/* Crash screen */
 .moonbase-crash-wrapper > [class^="buttons_"] {
   gap: 1rem;
 }

@@ -14,11 +14,12 @@ const Margins = spacepack.require("discord/styles/shared/Margins.css");
 
 const { open } = spacepack.findByExports("setSection", "clearSubsection")[0].exports.Z;
 
+let SettingsNotice;
 const notice = {
   stores: [MoonbaseSettingsStore],
   element: () => {
     // Require it here because lazy loading SUX
-    const SettingsNotice = spacepack.findByCode("onSaveButtonColor", "FocusRingScope")[0].exports.Z;
+    SettingsNotice ??= spacepack.findByCode("onSaveButtonColor", "FocusRingScope")[0].exports.Z;
     return (
       <SettingsNotice
         submitting={MoonbaseSettingsStore.submitting}

@@ -26,6 +26,15 @@
   newVersion: string | null;
   shouldShowNotice: boolean;
 
+  #showOnlyUpdateable = false;
+  set showOnlyUpdateable(v: boolean) {
+    this.#showOnlyUpdateable = v;
+    this.emitChange();
+  }
+  get showOnlyUpdateable() {
+    return this.#showOnlyUpdateable;
+  }
+
   extensions: { [id: number]: MoonbaseExtension };
   updates: {
     [id: number]: {

@@ -0,0 +1,47 @@
+import React from "@moonlight-mod/wp/react";
+import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
+import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
+import { Text } from "@moonlight-mod/wp/discord/components/common/index";
+
+const Margins = spacepack.require("discord/styles/shared/Margins.css");
+const HelpMessageClasses = spacepack.findByExports("positive", "iconDiv")[0].exports;
+
+// reimpl of HelpMessage but with a custom icon
+export default function HelpMessage({
+  className,
+  text,
+  icon,
+  children
+}: {
+  className?: string;
+  text: string;
+  icon: React.ComponentType<any>;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div
+      className={`${Margins.marginBottom20} ${HelpMessageClasses.info} ${HelpMessageClasses.container} moonbase-help-message ${className}`}
+    >
+      <Flex direction={Flex.Direction.HORIZONTAL}>
+        <div
+          className={HelpMessageClasses.iconDiv}
+          style={{
+            alignItems: "center"
+          }}
+        >
+          {React.createElement(icon, {
+            size: "sm",
+            color: "currentColor",
+            className: HelpMessageClasses.icon
+          })}
+        </div>
+
+        <Text variant="text-sm/medium" color="currentColor" className={HelpMessageClasses.text}>
+          {text}
+        </Text>
+
+        {children}
+      </Flex>
+    </div>
+  );
+}

@@ -10,14 +10,18 @@ import * as Components from "@moonlight-mod/wp/discord/components/common/index";
 
 import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
 import { ExtensionCompat } from "@moonlight-mod/core/extension/loader";
+import HelpMessage from "../HelpMessage";
 
 const SearchBar: any = Object.values(spacepack.findByCode("hideSearchIcon")[0].exports)[0];
+const { CircleInformationIcon, XSmallIcon } = Components;
+const PanelButton = spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.Z;
 
 export default function ExtensionsPage() {
-  const { extensions, savedFilter } = useStateFromStoresObject([MoonbaseSettingsStore], () => {
+  const { extensions, savedFilter, showOnlyUpdateable } = useStateFromStoresObject([MoonbaseSettingsStore], () => {
     return {
       extensions: MoonbaseSettingsStore.extensions,
-      savedFilter: MoonbaseSettingsStore.getExtensionConfigRaw<number>("moonbase", "filter", defaultFilter)
+      savedFilter: MoonbaseSettingsStore.getExtensionConfigRaw<number>("moonbase", "filter", defaultFilter),
+      showOnlyUpdateable: MoonbaseSettingsStore.showOnlyUpdateable
     };
   });
 
@@ -93,15 +97,36 @@ }}
       />
       <FilterBar filter={filter} setFilter={setFilter} selectedTags={selectedTags} setSelectedTags={setSelectedTags} />
 
+      {showOnlyUpdateable && (
+        <HelpMessage
+          icon={CircleInformationIcon}
+          text="Only displaying updates"
+          className="moonbase-extension-update-section"
+        >
+          <div className="moonbase-help-message-buttons">
+            <PanelButton
+              icon={XSmallIcon}
+              onClick={() => {
+                MoonbaseSettingsStore.showOnlyUpdateable = false;
+              }}
+            />
+          </div>
+        </HelpMessage>
+      )}
+
       {filteredWithUpdates.map((ext) => (
         <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} />
       ))}
-      {filteredWithUpdates.length > 0 && filteredWithoutUpdates.length > 0 && (
-        <FormDivider className="moonbase-update-divider" />
+      {!showOnlyUpdateable && (
+        <>
+          {filteredWithUpdates.length > 0 && filteredWithoutUpdates.length > 0 && (
+            <FormDivider className="moonbase-update-divider" />
+          )}
+          {filteredWithoutUpdates.map((ext) => (
+            <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} />
+          ))}
+        </>
       )}
-      {filteredWithoutUpdates.map((ext) => (
-        <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} />
-      ))}
     </>
   );
 }

@@ -7,6 +7,7 @@
 import ExtensionsPage from "./extensions";
 import ConfigPage from "./config";
 import Update from "./update";
+import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
 
 const { Divider } = spacepack.findByCode(".forumOrHome]:")[0].exports.Z;
 const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0].exports;
@@ -44,6 +45,7 @@ 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");
+      MoonbaseSettingsStore.showOnlyUpdateable = false;
     },
     []
   );

@@ -2,13 +2,10 @@ import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
 import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
 import * as Components from "@moonlight-mod/wp/discord/components/common/index";
 import React from "@moonlight-mod/wp/react";
-import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
-import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
 import { UpdateState } from "../../types";
+import HelpMessage from "./HelpMessage";
 
-const { ThemeDarkIcon, Text, Button } = Components;
-const Margins = spacepack.require("discord/styles/shared/Margins.css");
-const HelpMessageClasses = spacepack.findByExports("positive", "iconDiv")[0].exports;
+const { ThemeDarkIcon, Button } = Components;
 
 const logger = moonlight.getLogger("moonbase/ui/update");
 
@@ -25,27 +22,9 @@ const newVersion = useStateFromStores([MoonbaseSettingsStore], () => MoonbaseSettingsStore.newVersion);
 
   if (newVersion == null) return null;
 
-  // reimpl of HelpMessage but with a custom icon
   return (
-    <div
-      className={`${Margins.marginBottom20} ${HelpMessageClasses.info} ${HelpMessageClasses.container} moonbase-update-section`}
-    >
-      <Flex direction={Flex.Direction.HORIZONTAL}>
-        <div
-          className={HelpMessageClasses.iconDiv}
-          style={{
-            alignItems: "center"
-          }}
-        >
-          <ThemeDarkIcon size="sm" color="currentColor" className={HelpMessageClasses.icon} />
-        </div>
-
-        <Text variant="text-sm/medium" color="currentColor" className={HelpMessageClasses.text}>
-          {strings[state]}
-        </Text>
-      </Flex>
-
-      <div className="moonbase-update-section-buttons">
+    <HelpMessage text={strings[state]} className="moonbase-update-section" icon={ThemeDarkIcon}>
+      <div className="moonbase-help-message-buttons">
         {state === UpdateState.Installed && (
           <Button
             look={Button.Looks.OUTLINED}
@@ -78,6 +57,6 @@ >
           Update
         </Button>
       </div>
-    </div>
+    </HelpMessage>
   );
 }

@@ -5,10 +5,6 @@ import { MoonlightBranch } from "@moonlight-mod/types";
 import React from "@moonlight-mod/wp/react";
 import * as Components from "@moonlight-mod/wp/discord/components/common/index";
 
-// FIXME: not indexed as importable
-const Constants = spacepack.require("discord/Constants");
-const UserSettingsSections = spacepack.findObjectFromKey(Constants, "DEVELOPER_OPTIONS");
-
 const { ThemeDarkIcon } = Components;
 
 function plural(str: string, num: number) {
@@ -64,18 +60,12 @@ {
           name: "Open Moonbase",
           onClick: () => {
             const { open } = spacepack.findByExports("setSection", "clearSubsection")[0].exports.Z;
-
-            // settings is lazy loaded thus lazily patched
-            // FIXME: figure out a way to detect if settings has been opened
-            //        alreadyjust so the transition isnt as jarring
-            open(UserSettingsSections.ACCOUNT);
-            setTimeout(() => {
-              if (MoonbaseSettingsStore.getExtensionConfigRaw<boolean>("moonbase", "sections", false)) {
-                open("moonbase-extensions");
-              } else {
-                open("moonbase", 0);
-              }
-            }, 0);
+            if (MoonbaseSettingsStore.getExtensionConfigRaw<boolean>("moonbase", "sections", false)) {
+              open("moonbase-extensions");
+            } else {
+              MoonbaseSettingsStore.showOnlyUpdateable = true;
+              open("moonbase", 0);
+            }
             return true;
           }
         }

@@ -101,6 +101,7 @@ moonlight.moonmap.parseScript(id, moduleCache[id]);
     }
   }
 
+  let modified = false;
   for (const [id, func] of Object.entries(entry)) {
     if (func.__moonlight === true) continue;
 
@@ -165,15 +166,20 @@ replaced = replaced.toString().replace(/\n/g, "") + `//# sourceURL=Webpack-Module-${id}`;
           }
         }
 
-        if (!hardFailed) moduleString = replaced;
+        if (!hardFailed) {
+          moduleString = replaced;
+          modified = true;
+        }
 
         moonlight.unpatched.delete(patch);
         if (shouldRemove) patches.splice(i--, 1);
       }
     }
 
-    patchModule(id, patchedStr.join(", "), moduleString);
-    moduleCache[id] = moduleString;
+    if (modified) {
+      patchModule(id, patchedStr.join(", "), moduleString);
+      moduleCache[id] = moduleString;
+    }
 
     try {
       const parsed = moonlight.lunast.parseScript(id, moduleString);