Add changelog tab, make settings page update without reload

packages/browser/src/index.ts

···
     },
     getConfigOption(ext, name) {
       const manifest = getManifest(extensions, ext);
-      return getConfigOption(ext, name, config, manifest);
+      return getConfigOption(ext, name, config, manifest?.settings);
     },
     setConfigOption(ext, name, value) {
       setConfigOption(config, ext, name, value);

packages/core-extensions/src/moonbase/types.ts

···
   state: ExtensionState;
   compat: ExtensionCompat;
   hasUpdate: boolean;
+  changelog?: string;
+  settingsOverride?: ExtensionManifest["settings"];
 };
 
 export enum UpdateState {

packages/core-extensions/src/moonbase/webpackModules/stores.ts

···
                     updateManifest: ext
                   };
                   existing.hasUpdate = true;
+                  existing.changelog = ext.meta?.changelog;
                 }
 
                 continue;
···
 
   getExtensionConfig<T>(uniqueId: number, key: string): T | undefined {
     const ext = this.getExtension(uniqueId);
-    return getConfigOption(ext.id, key, this.config, ext.manifest);
+    const settings = ext.settingsOverride ?? ext.manifest.settings;
+    return getConfigOption(ext.id, key, this.config, settings);
   }
 
   getExtensionConfigRaw<T>(id: string, key: string, defaultValue: T | undefined): T | undefined {
···
 
   getExtensionConfigName(uniqueId: number, key: string) {
     const ext = this.getExtension(uniqueId);
-    return ext.manifest.settings?.[key]?.displayName ?? key;
+    const settings = ext.settingsOverride ?? ext.manifest.settings;
+    return settings?.[key]?.displayName ?? key;
   }
 
   getExtensionConfigDescription(uniqueId: number, key: string) {
     const ext = this.getExtension(uniqueId);
-    return ext.manifest.settings?.[key]?.description;
+    const settings = ext.settingsOverride ?? ext.manifest.settings;
+    return settings?.[key]?.description;
   }
 
   setExtensionConfig(id: string, key: string, value: any) {
···
         this.extensions[uniqueId].state = ExtensionState.Disabled;
       }
 
-      if (update != null) this.extensions[uniqueId].compat = checkExtensionCompat(update.updateManifest);
+      if (update != null) {
+        this.extensions[uniqueId].settingsOverride = update.updateManifest.settings;
+        this.extensions[uniqueId].compat = checkExtensionCompat(update.updateManifest);
+      }
 
       delete this.updates[uniqueId];
     } catch (e) {

packages/core-extensions/src/moonbase/webpackModules/ui/extensions/card.tsx

···
 export enum ExtensionPage {
   Info,
   Description,
+  Changelog,
   Settings
 }
 
···
   const { Card, Text, FormSwitch, TabBar, Button } = Components;
 
   const tagline = ext.manifest?.meta?.tagline;
-  const settings = ext.manifest?.settings;
+  const settings = ext.settingsOverride ?? ext.manifest?.settings;
   const description = ext.manifest?.meta?.description;
+  const changelog = ext.changelog;
   const enabledDependants = useStateFromStores([MoonbaseSettingsStore], () =>
     Object.keys(MoonbaseSettingsStore.extensions)
       .filter((uniqueId) => {
···
       </div>
 
       <div>
-        {(description != null || settings != null) && (
+        {(description != null || changelog != null || settings != null) && (
           <TabBar
             selectedItem={tab}
             type="top"
···
               </TabBar.Item>
             )}
 
+            {changelog != null && (
+              <TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Changelog}>
+                Changelog
+              </TabBar.Item>
+            )}
+
             {settings != null && (
               <TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Settings}>
                 Settings
···
           {tab === ExtensionPage.Description && (
             <Text variant="text-md/normal" className={MarkupClasses.markup} style={{ width: "100%" }}>
               {MarkupUtils.parse(description ?? "*No description*", true, {
+                allowHeading: true,
+                allowLinks: true,
+                allowList: true
+              })}
+            </Text>
+          )}
+          {tab === ExtensionPage.Changelog && (
+            <Text variant="text-md/normal" className={MarkupClasses.markup} style={{ width: "100%" }}>
+              {MarkupUtils.parse(changelog ?? "*No changelog*", true, {
                 allowHeading: true,
                 allowLinks: true,
                 allowList: true

packages/core-extensions/src/moonbase/webpackModules/ui/extensions/settings.tsx

···
 export default function Settings({ ext }: { ext: MoonbaseExtension }) {
   return (
     <Flex className="moonbase-settings" direction={Flex.Direction.VERTICAL}>
-      {Object.entries(ext.manifest.settings!).map(([name, setting]) => (
+      {Object.entries(ext.settingsOverride ?? ext.manifest.settings!).map(([name, setting]) => (
         <Setting
           ext={ext}
           key={name}

packages/core/src/util/config.ts

···
   ext: string,
   key: string,
   config: Config,
-  manifest?: ExtensionManifest
+  settings?: ExtensionManifest["settings"]
 ): T | undefined {
-  const defaultValue: T | undefined = structuredClone(manifest?.settings?.[key]?.default);
+  const defaultValue: T | undefined = structuredClone(settings?.[key]?.default);
   const cfg = getConfig(ext, config);
   if (cfg == null || typeof cfg === "boolean") return defaultValue;
   return cfg?.[key] ?? defaultValue;

packages/node-preload/src/index.ts

···
     },
     getConfigOption(ext, name) {
       const manifest = getManifest(extensions, ext);
-      return getConfigOption(ext, name, config, manifest);
+      return getConfigOption(ext, name, config, manifest?.settings);
     },
     setConfigOption(ext, name, value) {
       setConfigOption(config, ext, name, value);

packages/types/src/extension.ts

···
     deprecated?: boolean;
     tags?: ExtensionTag[];
     source?: string;
+    changelog?: string;
   };
 
   dependencies?: string[];