More Moonbase things

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

@@ -1,5 +1,12 @@
 import { Config, ExtensionEnvironment, ExtensionLoadSource, ExtensionSettingsAdvice } from "@moonlight-mod/types";
-import { ExtensionState, MoonbaseExtension, MoonbaseNatives, RepositoryManifest, RestartAdvice } from "../types";
+import {
+  ExtensionState,
+  MoonbaseExtension,
+  MoonbaseNatives,
+  RepositoryManifest,
+  RestartAdvice,
+  UpdateState
+} from "../types";
 import { Store } from "@moonlight-mod/wp/discord/packages/flux";
 import Dispatcher from "@moonlight-mod/wp/discord/Dispatcher";
 import getNatives from "../native";
@@ -25,6 +32,10 @@ class MoonbaseSettingsStore extends Store<any> {
   submitting: boolean;
   installing: boolean;
 
+  #updateState = UpdateState.Ready;
+  get updateState() {
+    return this.#updateState;
+  }
   newVersion: string | null;
   shouldShowNotice: boolean;
 
@@ -353,7 +364,18 @@ class MoonbaseSettingsStore extends Store<any> {
   }
 
   async updateMoonlight() {
-    await natives.updateMoonlight();
+    this.#updateState = UpdateState.Working;
+    this.emitChange();
+
+    await natives
+      .updateMoonlight()
+      .then(() => (this.#updateState = UpdateState.Installed))
+      .catch((e) => {
+        logger.error(e);
+        this.#updateState = UpdateState.Failed;
+      });
+
+    this.emitChange();
   }
 
   getConfigOption<K extends keyof Config>(key: K): Config[K] {
@@ -381,6 +403,9 @@ class MoonbaseSettingsStore extends Store<any> {
   }
 
   #computeRestartAdvice() {
+    // If moonlight update needs a restart, always hide advice.
+    if (this.#updateState === UpdateState.Installed) return RestartAdvice.NotNeeded;
+
     const i = this.initialConfig; // Initial config, from startup
     const n = this.config; // New config about to be saved
 
@@ -486,7 +511,7 @@ class MoonbaseSettingsStore extends Store<any> {
     this.modified = false;
     this.emitChange();
 
-    if (modifiedRepos) this.checkUpdates();
+    if (modifiedRepos.length !== 0) this.checkUpdates();
   }
 
   reset() {

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

@@ -58,7 +58,7 @@ function PanelLinkButton({ icon, tooltip, link }: { icon: React.ReactNode; toolt
   );
 }
 
-export default function ExtensionCard({ uniqueId }: { uniqueId: number }) {
+export default function ExtensionCard({ uniqueId, selectTag }: { uniqueId: number; selectTag: (tag: string) => void }) {
   const { ext, enabled, busy, update, conflicting } = useStateFromStores([MoonbaseSettingsStore], () => {
     return {
       ext: MoonbaseSettingsStore.getExtension(uniqueId),
@@ -303,7 +303,7 @@ export default function ExtensionCard({ uniqueId }: { uniqueId: number }) {
             rowGap: tab === ExtensionPage.Info ? "16px" : undefined
           }}
         >
-          {tab === ExtensionPage.Info && <ExtensionInfo ext={ext} />}
+          {tab === ExtensionPage.Info && <ExtensionInfo ext={ext} selectTag={selectTag} />}
           {tab === ExtensionPage.Description && (
             <Text variant="text-md/normal" className={MarkupClasses.markup} style={{ width: "100%" }}>
               {MarkupUtils.parse(description ?? "*No description*", true, {

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

@@ -20,6 +20,8 @@ import HelpMessage from "../HelpMessage";
 
 const SearchBar = spacepack.require("discord/uikit/search/SearchBar").default;
 
+const validTags: string[] = Object.values(ExtensionTag);
+
 export default function ExtensionsPage() {
   const { extensions, savedFilter } = useStateFromStoresObject([MoonbaseSettingsStore], () => {
     return {
@@ -41,7 +43,17 @@ export default function ExtensionsPage() {
     filter = filterState[0];
     setFilter = filterState[1];
   }
+
   const [selectedTags, setSelectedTags] = React.useState(new Set<string>());
+  const selectTag = React.useCallback(
+    (tag: string) => {
+      const newState = new Set(selectedTags);
+      if (validTags.includes(tag)) newState.add(tag);
+      setSelectedTags(newState);
+    },
+    [selectedTags]
+  );
+
   const sorted = Object.values(extensions).sort((a, b) => {
     const aName = a.manifest.meta?.name ?? a.id;
     const bName = b.manifest.meta?.name ?? b.id;
@@ -132,13 +144,13 @@ export default function ExtensionsPage() {
       )}
 
       {filteredWithUpdates.map((ext) => (
-        <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} />
+        <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} selectTag={selectTag} />
       ))}
       {filteredWithUpdates.length > 0 && filteredWithoutUpdates.length > 0 && (
         <FormDivider className="moonbase-update-divider" />
       )}
       {filteredWithoutUpdates.map((ext) => (
-        <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} />
+        <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} selectTag={selectTag} />
       ))}
     </>
   );

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

@@ -54,12 +54,15 @@ function InfoSection({ title, children }: { title: string; children: React.React
 function Badge({
   color,
   children,
-  style = {}
+  style = {},
+  onClick
 }: {
   color: string;
   children: React.ReactNode;
   style?: React.CSSProperties;
+  onClick?: () => void;
 }) {
+  if (onClick) style.cursor ??= "pointer";
   return (
     <span
       className="moonlight-card-badge"
@@ -69,13 +72,20 @@ function Badge({
           ...style
         } as React.CSSProperties
       }
+      onClick={onClick}
     >
       {children}
     </span>
   );
 }
 
-export default function ExtensionInfo({ ext }: { ext: MoonbaseExtension }) {
+export default function ExtensionInfo({
+  ext,
+  selectTag
+}: {
+  ext: MoonbaseExtension;
+  selectTag: (tag: string) => void;
+}) {
   const authors = ext.manifest?.meta?.authors;
   const tags = ext.manifest?.meta?.tags;
   const version = ext.manifest?.version;
@@ -148,7 +158,7 @@ export default function ExtensionInfo({ ext }: { ext: MoonbaseExtension }) {
             }
 
             return (
-              <Badge key={i} color={color} style={style}>
+              <Badge key={i} color={color} style={style} onClick={() => selectTag(tag)}>
                 {name}
               </Badge>
             );

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

@@ -20,8 +20,6 @@ import {
 } from "@moonlight-mod/wp/discord/components/common/index";
 import MarkupClasses from "@moonlight-mod/wp/discord/modules/messages/web/Markup.css";
 
-const logger = moonlight.getLogger("moonbase/ui/update");
-
 const strings: Record<UpdateState, string> = {
   [UpdateState.Ready]: "A new version of moonlight is available.",
   [UpdateState.Working]: "Updating moonlight...",
@@ -67,8 +65,10 @@ function MoonlightChangelog({
 }
 
 export default function Update() {
-  const [state, setState] = React.useState(UpdateState.Ready);
-  const newVersion = useStateFromStores([MoonbaseSettingsStore], () => MoonbaseSettingsStore.newVersion);
+  const [newVersion, state] = useStateFromStores([MoonbaseSettingsStore], () => [
+    MoonbaseSettingsStore.newVersion,
+    MoonbaseSettingsStore.updateState
+  ]);
 
   if (newVersion == null) return null;
 
@@ -113,14 +113,7 @@ export default function Update() {
           size={Button.Sizes.TINY}
           disabled={state !== UpdateState.Ready}
           onClick={() => {
-            setState(UpdateState.Working);
-
-            MoonbaseSettingsStore.updateMoonlight()
-              .then(() => setState(UpdateState.Installed))
-              .catch((e) => {
-                logger.error(e);
-                setState(UpdateState.Failed);
-              });
+            MoonbaseSettingsStore.updateMoonlight();
           }}
         >
           Update