Merge pull request #15 from moonlight-mod/eva/moonbase-setting-improv…

…ements

Moonbase setting improvements

packages/core-extensions/src/moonbase/manifest.json

@@ -5,5 +5,12 @@
     "tagline": "The official settings UI for moonlight",
     "authors": ["Cynosphere", "NotNite"]
   },
-  "dependencies": ["spacepack", "settings", "common"]
+  "dependencies": ["spacepack", "settings", "common"],
+  "settings": {
+    "saveFilter": {
+      "displayName": "Persist filter",
+      "description": "Save extension filter in config",
+      "type": "boolean"
+    }
+  }
 }

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

@@ -17,7 +17,8 @@ export default (require: WebpackRequireType) => {
     TextInput,
     Flex,
     Button,
-    SingleSelect
+    SingleSelect,
+    Text
   } = CommonComponents;
 
   const { MoonbaseSettingsStore } =
@@ -110,6 +111,14 @@ export default (require: WebpackRequireType) => {
   return function ConfigPage() {
     return (
       <>
+        <Text
+          className={Margins.marginBottom20}
+          variant="heading-lg/semibold"
+          tag="h2"
+        >
+          Config
+        </Text>
+
         <FormItem title="Repositories">
           <FormText className={Margins.marginBottom4}>
             A list of remote repositories to display extensions from

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

@@ -141,6 +141,7 @@ export default (require: typeof WebpackRequire) => {
                         color={CommonComponents.tokens.colors.STATUS_DANGER}
                       />
                     )}
+                    onClick={() => window.location.reload()}
                     tooltipText="You will need to reload/restart your client for this extension to work properly."
                   />
                 )}

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

@@ -6,16 +6,16 @@ import {
   ChevronSmallUpIconSVG
 } from "../../types";
 
-export const defaultFilter = {
-  core: true,
-  normal: true,
-  developer: true,
-  enabled: true,
-  disabled: true,
-  installed: true,
-  repository: true
-};
-export type Filter = typeof defaultFilter;
+export enum Filter {
+  Core = 1 << 0,
+  Normal = 1 << 1,
+  Developer = 1 << 2,
+  Enabled = 1 << 3,
+  Disabled = 1 << 4,
+  Installed = 1 << 5,
+  Repository = 1 << 6
+}
+export const defaultFilter = ~(~0 << 7);
 
 export default async (require: WebpackRequireType) => {
   const spacepack = require("spacepack_spacepack").spacepack;
@@ -87,63 +87,58 @@ export default async (require: WebpackRequireType) => {
       MenuCheckboxItem
     } = require("common_components");
 
+    const toggleFilter = (set: Filter) =>
+      setFilter(filter & set ? filter & ~set : filter | set);
+
     return (
       <div className={SortMenuClasses.container}>
         <Menu navId="sort-filter" hideScrollbar={true} onClose={closePopout}>
           <MenuGroup label="Type">
             <MenuCheckboxItem
               id="t-core"
               label="Core"
-              checked={filter.core}
-              action={() => setFilter({ ...filter, core: !filter.core })}
+              checked={filter & Filter.Core}
+              action={() => toggleFilter(Filter.Core)}
             />
             <MenuCheckboxItem
               id="t-normal"
               label="Normal"
-              checked={filter.normal}
-              action={() => setFilter({ ...filter, normal: !filter.normal })}
+              checked={filter & Filter.Normal}
+              action={() => toggleFilter(Filter.Normal)}
             />
             <MenuCheckboxItem
               id="t-developer"
               label="Developer"
-              checked={filter.developer}
-              action={() =>
-                setFilter({ ...filter, developer: !filter.developer })
-              }
+              checked={filter & Filter.Developer}
+              action={() => toggleFilter(Filter.Developer)}
             />
           </MenuGroup>
           <MenuGroup label="State">
             <MenuCheckboxItem
               id="s-enabled"
               label="Enabled"
-              checked={filter.enabled}
-              action={() => setFilter({ ...filter, enabled: !filter.enabled })}
+              checked={filter & Filter.Enabled}
+              action={() => toggleFilter(Filter.Enabled)}
             />
             <MenuCheckboxItem
               id="s-disabled"
               label="Disabled"
-              checked={filter.disabled}
-              action={() =>
-                setFilter({ ...filter, disabled: !filter.disabled })
-              }
+              checked={filter & Filter.Disabled}
+              action={() => toggleFilter(Filter.Disabled)}
             />
           </MenuGroup>
           <MenuGroup label="Location">
             <MenuCheckboxItem
               id="l-installed"
               label="Installed"
-              checked={filter.installed}
-              action={() =>
-                setFilter({ ...filter, installed: !filter.installed })
-              }
+              checked={filter & Filter.Installed}
+              action={() => toggleFilter(Filter.Installed)}
             />
             <MenuCheckboxItem
               id="l-repository"
               label="Repository"
-              checked={filter.repository}
-              action={() =>
-                setFilter({ ...filter, repository: !filter.repository })
-              }
+              checked={filter & Filter.Repository}
+              action={() => toggleFilter(Filter.Repository)}
             />
           </MenuGroup>
           <MenuGroup>
@@ -156,7 +151,7 @@ export default async (require: WebpackRequireType) => {
                 </Text>
               }
               action={() => {
-                setFilter({ ...defaultFilter });
+                setFilter(defaultFilter);
                 closePopout();
               }}
             />

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

@@ -4,7 +4,7 @@ import {
   WebpackRequireType
 } from "@moonlight-mod/types";
 import { ExtensionState } from "../../types";
-import filterBar, { defaultFilter } from "./filterBar";
+import filterBar, { Filter, defaultFilter } from "./filterBar";
 import card from "./card";
 
 export default (require: WebpackRequireType) => {
@@ -26,18 +26,32 @@ export default (require: WebpackRequireType) => {
   const { Text } = require("common_components");
 
   return function ExtensionsPage() {
-    const { extensions } = Flux.useStateFromStoresObject(
+    const { extensions, savedFilter } = Flux.useStateFromStoresObject(
       [MoonbaseSettingsStore],
       () => {
-        return { extensions: MoonbaseSettingsStore.extensions };
+        return {
+          extensions: MoonbaseSettingsStore.extensions,
+          savedFilter: MoonbaseSettingsStore.getExtensionConfig(
+            "moonbase",
+            "filter"
+          )
+        };
       }
     );
 
     const [query, setQuery] = React.useState("");
-    const [filter, setFilter] = React.useState({ ...defaultFilter });
+
+    let filter: Filter, setFilter: (filter: Filter) => void;
+    if (moonlight.getConfigOption<boolean>("moonbase", "saveFilter")) {
+      filter = savedFilter ?? defaultFilter;
+      setFilter = (filter) =>
+        MoonbaseSettingsStore.setExtensionConfig("moonbase", "filter", filter);
+    } else {
+      const state = React.useState(defaultFilter);
+      filter = state[0];
+      setFilter = state[1];
+    }
     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;
@@ -54,32 +68,32 @@ export default (require: WebpackRequireType) => {
         ) &&
         // This seems very bad, sorry
         !(
-          (!filter.core && ext.source.type === ExtensionLoadSource.Core) ||
-          (!filter.normal && ext.source.type === ExtensionLoadSource.Normal) ||
-          (!filter.developer &&
+          (!(filter & Filter.Core) &&
+            ext.source.type === ExtensionLoadSource.Core) ||
+          (!(filter & Filter.Normal) &&
+            ext.source.type === ExtensionLoadSource.Normal) ||
+          (!(filter & Filter.Developer) &&
             ext.source.type === ExtensionLoadSource.Developer) ||
-          (!filter.enabled &&
+          (!(filter & Filter.Enabled) &&
             MoonbaseSettingsStore.getExtensionEnabled(ext.id)) ||
-          (!filter.disabled &&
+          (!(filter & Filter.Disabled) &&
             !MoonbaseSettingsStore.getExtensionEnabled(ext.id)) ||
-          (!filter.installed && ext.state !== ExtensionState.NotDownloaded) ||
-          (!filter.repository && ext.state === ExtensionState.NotDownloaded)
+          (!(filter & Filter.Installed) &&
+            ext.state !== ExtensionState.NotDownloaded) ||
+          (!(filter & Filter.Repository) &&
+            ext.state === ExtensionState.NotDownloaded)
         )
     );
 
     return (
       <>
-        <div
-          className={`${TitleBarClasses.children} ${Margins.marginBottom20}`}
+        <Text
+          className={Margins.marginBottom20}
+          variant="heading-lg/semibold"
+          tag="h2"
         >
-          <Text
-            className={TitleBarClasses.titleWrapper}
-            variant="heading-lg/semibold"
-            tag="h2"
-          >
-            Extensions
-          </Text>
-        </div>
+          Extensions
+        </Text>
         <SearchBar
           size={SearchBar.Sizes.MEDIUM}
           query={query}