commit cde93d90629624a495ab201587e353b28bfff472 · notnite.com/moonlight

+17 -5

build.mjs

···

       135
       135
        
       

     

       136
       136
        
         const wpModulesDir = `packages/core-extensions/src/${ext}/webpackModules`;

     

       137
       137
        
         if (fs.existsSync(wpModulesDir) && side === "index") {

     

       138
       138
       -
           const wpModules = fs.readdirSync(wpModulesDir);

     

       139
       139
       -
           for (const wpModule of wpModules) {

     

       140
       140
       -
             entryPoints.push(

     

       141
       141
       -
               `packages/core-extensions/src/${ext}/webpackModules/${wpModule}`

     

       142
       142
       -
             );

     

       138
       138
       +
           const wpModules = fs.opendirSync(wpModulesDir);

     

       139
       139
       +
           for await (const wpModule of wpModules) {

     

       140
       140
       +
             if (wpModule.isFile()) {

     

       141
       141
       +
               entryPoints.push(

     

       142
       142
       +
                 `packages/core-extensions/src/${ext}/webpackModules/${wpModule.name}`

     

       143
       143
       +
               );

     

       144
       144
       +
             } else {

     

       145
       145
       +
               for (const fileExt of ["ts", "tsx"]) {

     

       146
       146
       +
                 const path = `packages/core-extensions/src/${ext}/webpackModules/${wpModule.name}/index.${fileExt}`;

     

       147
       147
       +
                 if (fs.existsSync(path)) {

     

       148
       148
       +
                   entryPoints.push({

     

       149
       149
       +
                     in: path,

     

       150
       150
       +
                     out: `webpackModules/${wpModule.name}`

     

       151
       151
       +
                   });

     

       152
       152
       +
                 }

     

       153
       153
       +
               }

     

       154
       154
       +
             }

     

       143
       155
        
           }

     

       144
       156
        
         }

     

       145
       157

-1

env.d.ts

···

       1
       1
       -
       /// <reference types="./packages/types/src/index" />

+12 -78

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

···

       1
       1
       -
       import { ExtensionWebExports, WebpackRequireType } from "@moonlight-mod/types";

     

       2
       2
       -
       import extensionsPage from "./ui/extensions";

     

       3
       3
       -
       import configPage from "./ui/config";

     

       1
       1
       +
       import { ExtensionWebExports } from "@moonlight-mod/types";

     

       4
       2
        
       

     

       5
       3
        
       import { CircleXIconSVG, DownloadIconSVG, TrashIconSVG } from "./types";

     

       6
       6
       -
       import ui from "./ui";

     

       7
       7
       -
       

     

       8
       8
       -
       export const pageModules: (require: WebpackRequireType) => Record<

     

       9
       9
       -
         string,

     

       10
       10
       -
         {

     

       11
       11
       -
           name: string;

     

       12
       12
       -
           element: React.FunctionComponent;

     

       13
       13
       -
         }

     

       14
       14
       -
       > = (require) => ({

     

       15
       15
       -
         extensions: {

     

       16
       16
       -
           name: "Extensions",

     

       17
       17
       -
           element: extensionsPage(require)

     

       18
       18
       -
         },

     

       19
       19
       -
         config: {

     

       20
       20
       -
           name: "Config",

     

       21
       21
       -
           element: configPage(require)

     

       22
       22
       -
         }

     

       23
       23
       -
       });

     

       24
       4
        
       

     

       25
       5
        
       export const webpackModules: ExtensionWebExports["webpackModules"] = {

     

       26
       6
        
         stores: {

     
···

       30
       10
        
           ]

     

       31
       11
        
         },

     

       32
       12
        
       

     

       33
       33
       -
         moonbase: {

     

       13
       13
       +
         ui: {

     

       34
       14
        
           dependencies: [

     

       35
       15
        
             { ext: "spacepack", id: "spacepack" },

     

       36
       36
       -
             { ext: "settings", id: "settings" },

     

       37
       16
        
             { ext: "common", id: "react" },

     

       38
       17
        
             { ext: "common", id: "components" },

     

       39
       18
        
             { ext: "moonbase", id: "stores" },

     
···

       44
       23
        
             "removeButtonContainer:",

     

       45
       24
        
             '"Missing channel in Channel.openChannelContextMenu"',

     

       46
       25
        
             ".default.HEADER_BAR"

     

       47
       47
       -
           ],

     

       48
       48
       -
           entrypoint: true,

     

       49
       49
       -
           run: (module, exports, require) => {

     

       50
       50
       -
             const settings = require("settings_settings").Settings;

     

       51
       51
       -
             const React = require("common_react");

     

       52
       52
       -
             const spacepack = require("spacepack_spacepack").spacepack;

     

       53
       53
       -
             const { MoonbaseSettingsStore } =

     

       54
       54
       -
               require("moonbase_stores") as typeof import("./webpackModules/stores");

     

       55
       55
       -
       

     

       56
       56
       -
             const addSection = (name: string, element: React.FunctionComponent) => {

     

       57
       57
       -
               settings.addSection(name, name, element, null, -2, {

     

       58
       58
       -
                 stores: [MoonbaseSettingsStore],

     

       59
       59
       -
                 element: () => {

     

       60
       60
       -
                   // Require it here because lazy loading SUX

     

       61
       61
       -
                   const SettingsNotice =

     

       62
       62
       -
                     spacepack.findByCode("onSaveButtonColor")[0].exports.default;

     

       63
       63
       -
                   return (

     

       64
       64
       -
                     <SettingsNotice

     

       65
       65
       -
                       submitting={MoonbaseSettingsStore.submitting}

     

       66
       66
       -
                       onReset={() => {

     

       67
       67
       -
                         MoonbaseSettingsStore.reset();

     

       68
       68
       -
                       }}

     

       69
       69
       -
                       onSave={() => {

     

       70
       70
       -
                         MoonbaseSettingsStore.writeConfig();

     

       71
       71
       -
                       }}

     

       72
       72
       -
                     />

     

       73
       73
       -
                   );

     

       74
       74
       -
                 }

     

       75
       75
       -
               });

     

       76
       76
       -
             };

     

       26
       26
       +
           ]

     

       27
       27
       +
         },

     

       77
       28
        
       

     

       78
       78
       -
             if (moonlight.getConfigOption<boolean>("moonbase", "sections")) {

     

       79
       79
       -
               const pages = pageModules(require);

     

       80
       80
       -
       

     

       81
       81
       -
               const { Text } = require("common_components");

     

       82
       82
       -
               const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       83
       83
       -
       

     

       84
       84
       -
               settings.addHeader("Moonbase", -2);

     

       85
       85
       -
               for (const page of Object.values(pages)) {

     

       86
       86
       -
                 addSection(page.name, () => (

     

       87
       87
       -
                   <>

     

       88
       88
       -
                     <Text

     

       89
       89
       -
                       className={Margins.marginBottom20}

     

       90
       90
       -
                       variant="heading-lg/semibold"

     

       91
       91
       -
                       tag="h2"

     

       92
       92
       -
                     >

     

       93
       93
       -
                       Extensions

     

       94
       94
       -
                     </Text>

     

       95
       95
       -
                     <page.element />

     

       96
       96
       -
                   </>

     

       97
       97
       -
                 ));

     

       98
       98
       -
               }

     

       99
       99
       -
             } else {

     

       100
       100
       -
               addSection("Moonbase", ui(require));

     

       101
       101
       -
             }

     

       102
       102
       -
           }

     

       29
       29
       +
         moonbase: {

     

       30
       30
       +
           dependencies: [

     

       31
       31
       +
             { ext: "spacepack", id: "spacepack" },

     

       32
       32
       +
             { ext: "settings", id: "settings" },

     

       33
       33
       +
             { ext: "common", id: "react" },

     

       34
       34
       +
             { ext: "moonbase", id: "ui" }

     

       35
       35
       +
           ],

     

       36
       36
       +
           entrypoint: true

     

       103
       37
        
         }

     

       104
       38
        
       };

     

       105
       39

-157

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

···

       1
       1
       -
       import { LogLevel, WebpackRequireType } from "@moonlight-mod/types";

     

       2
       2
       -
       import { CircleXIconSVG } from "../../types";

     

       3
       3
       -
       

     

       4
       4
       -
       const logLevels = Object.values(LogLevel).filter(

     

       5
       5
       -
         (v) => typeof v === "string"

     

       6
       6
       -
       ) as string[];

     

       7
       7
       -
       

     

       8
       8
       -
       export default (require: WebpackRequireType) => {

     

       9
       9
       -
         const React = require("common_react");

     

       10
       10
       -
         const spacepack = require("spacepack_spacepack").spacepack;

     

       11
       11
       -
         const CommonComponents = require("common_components");

     

       12
       12
       -
         const {

     

       13
       13
       -
           FormDivider,

     

       14
       14
       -
           FormItem,

     

       15
       15
       -
           FormText,

     

       16
       16
       -
           FormSwitch,

     

       17
       17
       -
           TextInput,

     

       18
       18
       -
           Flex,

     

       19
       19
       -
           Button,

     

       20
       20
       -
           SingleSelect

     

       21
       21
       -
         } = CommonComponents;

     

       22
       22
       -
       

     

       23
       23
       -
         const { MoonbaseSettingsStore } =

     

       24
       24
       -
           require("moonbase_stores") as typeof import("../../webpackModules/stores");

     

       25
       25
       -
       

     

       26
       26
       -
         const FormClasses = spacepack.findByCode("dividerDefault:")[0].exports;

     

       27
       27
       -
         const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       28
       28
       -
       

     

       29
       29
       -
         const RemoveButtonClasses = spacepack.findByCode("removeButtonContainer")[0]

     

       30
       30
       -
           .exports;

     

       31
       31
       -
         const CircleXIcon = spacepack.findByCode(CircleXIconSVG)[0].exports.default;

     

       32
       32
       -
         function RemoveEntryButton({ onClick }: { onClick: () => void }) {

     

       33
       33
       -
           const { Tooltip, Clickable } = CommonComponents;

     

       34
       34
       -
           return (

     

       35
       35
       -
             <div className={RemoveButtonClasses.removeButtonContainer}>

     

       36
       36
       -
               <Tooltip text="Remove entry" position="top">

     

       37
       37
       -
                 {(props: any) => (

     

       38
       38
       -
                   <Clickable

     

       39
       39
       -
                     {...props}

     

       40
       40
       -
                     className={RemoveButtonClasses.removeButton}

     

       41
       41
       -
                     onClick={onClick}

     

       42
       42
       -
                   >

     

       43
       43
       -
                     <CircleXIcon width={24} height={24} />

     

       44
       44
       -
                   </Clickable>

     

       45
       45
       -
                 )}

     

       46
       46
       -
               </Tooltip>

     

       47
       47
       -
             </div>

     

       48
       48
       -
           );

     

       49
       49
       -
         }

     

       50
       50
       -
       

     

       51
       51
       -
         function ArrayFormItem({

     

       52
       52
       -
           config

     

       53
       53
       -
         }: {

     

       54
       54
       -
           config: "repositories" | "devSearchPaths";

     

       55
       55
       -
         }) {

     

       56
       56
       -
           const items = MoonbaseSettingsStore.getConfigOption(config) ?? [];

     

       57
       57
       -
           return (

     

       58
       58
       -
             <Flex

     

       59
       59
       -
               style={{

     

       60
       60
       -
                 gap: "20px"

     

       61
       61
       -
               }}

     

       62
       62
       -
               direction={Flex.Direction.VERTICAL}

     

       63
       63
       -
             >

     

       64
       64
       -
               {items.map((val, i) => (

     

       65
       65
       -
                 <div

     

       66
       66
       -
                   key={i}

     

       67
       67
       -
                   style={{

     

       68
       68
       -
                     display: "grid",

     

       69
       69
       -
                     height: "32px",

     

       70
       70
       -
                     gap: "8px",

     

       71
       71
       -
                     gridTemplateColumns: "1fr 32px",

     

       72
       72
       -
                     alignItems: "center"

     

       73
       73
       -
                   }}

     

       74
       74
       -
                 >

     

       75
       75
       -
                   <TextInput

     

       76
       76
       -
                     size={TextInput.Sizes.DEFAULT}

     

       77
       77
       -
                     value={val}

     

       78
       78
       -
                     onChange={(newVal: string) => {

     

       79
       79
       -
                       items[i] = newVal;

     

       80
       80
       -
                       MoonbaseSettingsStore.setConfigOption(config, items);

     

       81
       81
       -
                     }}

     

       82
       82
       -
                   />

     

       83
       83
       -
                   <RemoveEntryButton

     

       84
       84
       -
                     onClick={() => {

     

       85
       85
       -
                       items.splice(i, 1);

     

       86
       86
       -
                       MoonbaseSettingsStore.setConfigOption(config, items);

     

       87
       87
       -
                     }}

     

       88
       88
       -
                   />

     

       89
       89
       -
                 </div>

     

       90
       90
       -
               ))}

     

       91
       91
       -
       

     

       92
       92
       -
               <Button

     

       93
       93
       -
                 look={Button.Looks.FILLED}

     

       94
       94
       -
                 color={Button.Colors.GREEN}

     

       95
       95
       -
                 size={Button.Sizes.SMALL}

     

       96
       96
       -
                 style={{

     

       97
       97
       -
                   marginTop: "10px"

     

       98
       98
       -
                 }}

     

       99
       99
       -
                 onClick={() => {

     

       100
       100
       -
                   items.push("");

     

       101
       101
       -
                   MoonbaseSettingsStore.setConfigOption(config, items);

     

       102
       102
       -
                 }}

     

       103
       103
       -
               >

     

       104
       104
       -
                 Add new entry

     

       105
       105
       -
               </Button>

     

       106
       106
       -
             </Flex>

     

       107
       107
       -
           );

     

       108
       108
       -
         }

     

       109
       109
       -
       

     

       110
       110
       -
         return function ConfigPage() {

     

       111
       111
       -
           return (

     

       112
       112
       -
             <>

     

       113
       113
       -
               <FormItem title="Repositories">

     

       114
       114
       -
                 <FormText className={Margins.marginBottom4}>

     

       115
       115
       -
                   A list of remote repositories to display extensions from

     

       116
       116
       -
                 </FormText>

     

       117
       117
       -
                 <ArrayFormItem config="repositories" />

     

       118
       118
       -
               </FormItem>

     

       119
       119
       -
               <FormDivider className={FormClasses.dividerDefault} />

     

       120
       120
       -
               <FormItem

     

       121
       121
       -
                 title="Extension search paths"

     

       122
       122
       -
                 className={Margins.marginTop20}

     

       123
       123
       -
               >

     

       124
       124
       -
                 <FormText className={Margins.marginBottom4}>

     

       125
       125
       -
                   A list of local directories to search for built extensions

     

       126
       126
       -
                 </FormText>

     

       127
       127
       -
                 <ArrayFormItem config="devSearchPaths" />

     

       128
       128
       -
               </FormItem>

     

       129
       129
       -
               <FormDivider className={FormClasses.dividerDefault} />

     

       130
       130
       -
               <FormSwitch

     

       131
       131
       -
                 className={Margins.marginTop20}

     

       132
       132
       -
                 value={MoonbaseSettingsStore.getConfigOption("patchAll")}

     

       133
       133
       -
                 onChange={(value: boolean) => {

     

       134
       134
       -
                   MoonbaseSettingsStore.setConfigOption("patchAll", value);

     

       135
       135
       -
                 }}

     

       136
       136
       -
                 note="Wraps every webpack module in a function, separating them in DevTools"

     

       137
       137
       -
               >

     

       138
       138
       -
                 Patch all

     

       139
       139
       -
               </FormSwitch>

     

       140
       140
       -
               <FormItem title="Log level">

     

       141
       141
       -
                 <SingleSelect

     

       142
       142
       -
                   autofocus={false}

     

       143
       143
       -
                   clearable={false}

     

       144
       144
       -
                   value={MoonbaseSettingsStore.getConfigOption("loggerLevel")}

     

       145
       145
       -
                   options={logLevels.map((o) => ({

     

       146
       146
       -
                     value: o.toLowerCase(),

     

       147
       147
       -
                     label: o[0] + o.slice(1).toLowerCase()

     

       148
       148
       -
                   }))}

     

       149
       149
       -
                   onChange={(v) =>

     

       150
       150
       -
                     MoonbaseSettingsStore.setConfigOption("loggerLevel", v)

     

       151
       151
       -
                   }

     

       152
       152
       -
                 />

     

       153
       153
       -
               </FormItem>

     

       154
       154
       -
             </>

     

       155
       155
       -
           );

     

       156
       156
       -
         };

     

       157
       157
       -
       };

-223

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

···

       1
       1
       -
       import WebpackRequire from "@moonlight-mod/types/discord/require";

     

       2
       2
       -
       import {

     

       3
       3
       -
         DangerIconSVG,

     

       4
       4
       -
         DownloadIconSVG,

     

       5
       5
       -
         ExtensionState,

     

       6
       6
       -
         TrashIconSVG

     

       7
       7
       -
       } from "../../types";

     

       8
       8
       -
       import { ExtensionLoadSource } from "@moonlight-mod/types";

     

       9
       9
       -
       import info from "./info";

     

       10
       10
       -
       import settings from "./settings";

     

       11
       11
       -
       

     

       12
       12
       -
       export enum ExtensionPage {

     

       13
       13
       -
         Info,

     

       14
       14
       -
         Description,

     

       15
       15
       -
         Settings

     

       16
       16
       -
       }

     

       17
       17
       -
       

     

       18
       18
       -
       export default (require: typeof WebpackRequire) => {

     

       19
       19
       -
         const React = require("common_react");

     

       20
       20
       -
         const spacepack = require("spacepack_spacepack").spacepack;

     

       21
       21
       -
         const CommonComponents = require("common_components");

     

       22
       22
       -
         const Flux = require("common_flux");

     

       23
       23
       -
       

     

       24
       24
       -
         const { ExtensionInfo } = info(require);

     

       25
       25
       -
         const Settings = settings(require);

     

       26
       26
       -
         const { MoonbaseSettingsStore } =

     

       27
       27
       -
           require("moonbase_stores") as typeof import("../../webpackModules/stores");

     

       28
       28
       -
       

     

       29
       29
       -
         const UserProfileClasses = spacepack.findByCode(

     

       30
       30
       -
           "tabBarContainer",

     

       31
       31
       -
           "topSection"

     

       32
       32
       -
         )[0].exports;

     

       33
       33
       -
       

     

       34
       34
       -
         const DownloadIcon =

     

       35
       35
       -
           spacepack.findByCode(DownloadIconSVG)[0].exports.DownloadIcon;

     

       36
       36
       -
         const TrashIcon = spacepack.findByCode(TrashIconSVG)[0].exports.default;

     

       37
       37
       -
         const DangerIcon =

     

       38
       38
       -
           spacepack.findByCode(DangerIconSVG)[0].exports.CircleExclamationPointIcon;

     

       39
       39
       -
       

     

       40
       40
       -
         const PanelButton =

     

       41
       41
       -
           spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.default;

     

       42
       42
       -
       

     

       43
       43
       -
         return function ExtensionCard({ id }: { id: string }) {

     

       44
       44
       -
           const [tab, setTab] = React.useState(ExtensionPage.Info);

     

       45
       45
       -
           const [restartNeeded, setRestartNeeded] = React.useState(false);

     

       46
       46
       -
       

     

       47
       47
       -
           const { ext, enabled, busy, update } = Flux.useStateFromStores(

     

       48
       48
       -
             [MoonbaseSettingsStore],

     

       49
       49
       -
             () => {

     

       50
       50
       -
               return {

     

       51
       51
       -
                 ext: MoonbaseSettingsStore.getExtension(id),

     

       52
       52
       -
                 enabled: MoonbaseSettingsStore.getExtensionEnabled(id),

     

       53
       53
       -
                 busy: MoonbaseSettingsStore.busy,

     

       54
       54
       -
                 update: MoonbaseSettingsStore.getExtensionUpdate(id)

     

       55
       55
       -
               };

     

       56
       56
       -
             }

     

       57
       57
       -
           );

     

       58
       58
       -
       

     

       59
       59
       -
           // Why it work like that :sob:

     

       60
       60
       -
           if (ext == null) return <></>;

     

       61
       61
       -
       

     

       62
       62
       -
           const {

     

       63
       63
       -
             Card,

     

       64
       64
       -
             CardClasses,

     

       65
       65
       -
             Flex,

     

       66
       66
       -
             Text,

     

       67
       67
       -
             MarkdownParser,

     

       68
       68
       -
             Switch,

     

       69
       69
       -
             TabBar,

     

       70
       70
       -
             Button

     

       71
       71
       -
           } = CommonComponents;

     

       72
       72
       -
       

     

       73
       73
       -
           const tagline = ext.manifest?.meta?.tagline;

     

       74
       74
       -
           const settings = ext.manifest?.settings;

     

       75
       75
       -
           const description = ext.manifest?.meta?.description;

     

       76
       76
       -
       

     

       77
       77
       -
           return (

     

       78
       78
       -
             <Card editable={true} className={CardClasses.card}>

     

       79
       79
       -
               <div className={CardClasses.cardHeader}>

     

       80
       80
       -
                 <Flex direction={Flex.Direction.VERTICAL}>

     

       81
       81
       -
                   <Flex direction={Flex.Direction.HORIZONTAL}>

     

       82
       82
       -
                     <Text variant="text-md/semibold">

     

       83
       83
       -
                       {ext.manifest?.meta?.name ?? ext.id}

     

       84
       84
       -
                     </Text>

     

       85
       85
       -
                   </Flex>

     

       86
       86
       -
       

     

       87
       87
       -
                   {tagline != null && (

     

       88
       88
       -
                     <Text variant="text-sm/normal">

     

       89
       89
       -
                       {MarkdownParser.parse(tagline)}

     

       90
       90
       -
                     </Text>

     

       91
       91
       -
                   )}

     

       92
       92
       -
                 </Flex>

     

       93
       93
       -
       

     

       94
       94
       -
                 <Flex

     

       95
       95
       -
                   direction={Flex.Direction.HORIZONTAL}

     

       96
       96
       -
                   align={Flex.Align.END}

     

       97
       97
       -
                   justify={Flex.Justify.END}

     

       98
       98
       -
                 >

     

       99
       99
       -
                   {ext.state === ExtensionState.NotDownloaded ? (

     

       100
       100
       -
                     <Button

     

       101
       101
       -
                       color={Button.Colors.BRAND}

     

       102
       102
       -
                       submitting={busy}

     

       103
       103
       -
                       onClick={() => {

     

       104
       104
       -
                         MoonbaseSettingsStore.installExtension(id);

     

       105
       105
       -
                       }}

     

       106
       106
       -
                     >

     

       107
       107
       -
                       Install

     

       108
       108
       -
                     </Button>

     

       109
       109
       -
                   ) : (

     

       110
       110
       -
                     <div

     

       111
       111
       -
                       // too lazy to learn how <Flex /> works lmao

     

       112
       112
       -
                       style={{

     

       113
       113
       -
                         display: "flex",

     

       114
       114
       -
                         alignItems: "center",

     

       115
       115
       -
                         gap: "1rem"

     

       116
       116
       -
                       }}

     

       117
       117
       -
                     >

     

       118
       118
       -
                       {ext.source.type === ExtensionLoadSource.Normal && (

     

       119
       119
       -
                         <PanelButton

     

       120
       120
       -
                           icon={TrashIcon}

     

       121
       121
       -
                           tooltipText="Delete"

     

       122
       122
       -
                           onClick={() => {

     

       123
       123
       -
                             MoonbaseSettingsStore.deleteExtension(id);

     

       124
       124
       -
                           }}

     

       125
       125
       -
                         />

     

       126
       126
       -
                       )}

     

       127
       127
       -
       

     

       128
       128
       -
                       {update !== null && (

     

       129
       129
       -
                         <PanelButton

     

       130
       130
       -
                           icon={DownloadIcon}

     

       131
       131
       -
                           tooltipText="Update"

     

       132
       132
       -
                           onClick={() => {

     

       133
       133
       -
                             MoonbaseSettingsStore.installExtension(id);

     

       134
       134
       -
                           }}

     

       135
       135
       -
                         />

     

       136
       136
       -
                       )}

     

       137
       137
       -
       

     

       138
       138
       -
                       {restartNeeded && (

     

       139
       139
       -
                         <PanelButton

     

       140
       140
       -
                           icon={() => (

     

       141
       141
       -
                             <DangerIcon

     

       142
       142
       -
                               color={CommonComponents.tokens.colors.STATUS_DANGER}

     

       143
       143
       -
                             />

     

       144
       144
       -
                           )}

     

       145
       145
       -
                           onClick={() => window.location.reload()}

     

       146
       146
       -
                           tooltipText="You will need to reload/restart your client for this extension to work properly."

     

       147
       147
       -
                         />

     

       148
       148
       -
                       )}

     

       149
       149
       -
       

     

       150
       150
       -
                       <Switch

     

       151
       151
       -
                         checked={enabled}

     

       152
       152
       -
                         onChange={() => {

     

       153
       153
       -
                           setRestartNeeded(true);

     

       154
       154
       -
                           MoonbaseSettingsStore.setExtensionEnabled(id, !enabled);

     

       155
       155
       -
                         }}

     

       156
       156
       -
                       />

     

       157
       157
       -
                     </div>

     

       158
       158
       -
                   )}

     

       159
       159
       -
                 </Flex>

     

       160
       160
       -
               </div>

     

       161
       161
       -
       

     

       162
       162
       -
               <div className={UserProfileClasses.body}>

     

       163
       163
       -
                 {(description != null || settings != null) && (

     

       164
       164
       -
                   <div

     

       165
       165
       -
                     className={UserProfileClasses.tabBarContainer}

     

       166
       166
       -
                     style={{

     

       167
       167
       -
                       padding: "0 10px"

     

       168
       168
       -
                     }}

     

       169
       169
       -
                   >

     

       170
       170
       -
                     <TabBar

     

       171
       171
       -
                       selectedItem={tab}

     

       172
       172
       -
                       type="top"

     

       173
       173
       -
                       onItemSelect={setTab}

     

       174
       174
       -
                       className={UserProfileClasses.tabBar}

     

       175
       175
       -
                     >

     

       176
       176
       -
                       <TabBar.Item

     

       177
       177
       -
                         className={UserProfileClasses.tabBarItem}

     

       178
       178
       -
                         id={ExtensionPage.Info}

     

       179
       179
       -
                       >

     

       180
       180
       -
                         Info

     

       181
       181
       -
                       </TabBar.Item>

     

       182
       182
       -
       

     

       183
       183
       -
                       {description != null && (

     

       184
       184
       -
                         <TabBar.Item

     

       185
       185
       -
                           className={UserProfileClasses.tabBarItem}

     

       186
       186
       -
                           id={ExtensionPage.Description}

     

       187
       187
       -
                         >

     

       188
       188
       -
                           Description

     

       189
       189
       -
                         </TabBar.Item>

     

       190
       190
       -
                       )}

     

       191
       191
       -
       

     

       192
       192
       -
                       {settings != null && (

     

       193
       193
       -
                         <TabBar.Item

     

       194
       194
       -
                           className={UserProfileClasses.tabBarItem}

     

       195
       195
       -
                           id={ExtensionPage.Settings}

     

       196
       196
       -
                         >

     

       197
       197
       -
                           Settings

     

       198
       198
       -
                         </TabBar.Item>

     

       199
       199
       -
                       )}

     

       200
       200
       -
                     </TabBar>

     

       201
       201
       -
                   </div>

     

       202
       202
       -
                 )}

     

       203
       203
       -
       

     

       204
       204
       -
                 <Flex

     

       205
       205
       -
                   justify={Flex.Justify.START}

     

       206
       206
       -
                   wrap={Flex.Wrap.WRAP}

     

       207
       207
       -
                   style={{

     

       208
       208
       -
                     padding: "16px 16px"

     

       209
       209
       -
                   }}

     

       210
       210
       -
                 >

     

       211
       211
       -
                   {tab === ExtensionPage.Info && <ExtensionInfo ext={ext} />}

     

       212
       212
       -
                   {tab === ExtensionPage.Description && (

     

       213
       213
       -
                     <Text variant="text-md/normal">

     

       214
       214
       -
                       {MarkdownParser.parse(description ?? "*No description*")}

     

       215
       215
       -
                     </Text>

     

       216
       216
       -
                   )}

     

       217
       217
       -
                   {tab === ExtensionPage.Settings && <Settings ext={ext} />}

     

       218
       218
       -
                 </Flex>

     

       219
       219
       -
               </div>

     

       220
       220
       -
             </Card>

     

       221
       221
       -
           );

     

       222
       222
       -
         };

     

       223
       223
       -
       };

-373

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

···

       1
       1
       -
       import { WebpackRequireType } from "@moonlight-mod/types";

     

       2
       2
       -
       import { tagNames } from "./info";

     

       3
       3
       -
       import {

     

       4
       4
       -
         ArrowsUpDownIconSVG,

     

       5
       5
       -
         ChevronSmallDownIconSVG,

     

       6
       6
       -
         ChevronSmallUpIconSVG

     

       7
       7
       -
       } from "../../types";

     

       8
       8
       -
       

     

       9
       9
       -
       export enum Filter {

     

       10
       10
       -
         Core = 1 << 0,

     

       11
       11
       -
         Normal = 1 << 1,

     

       12
       12
       -
         Developer = 1 << 2,

     

       13
       13
       -
         Enabled = 1 << 3,

     

       14
       14
       -
         Disabled = 1 << 4,

     

       15
       15
       -
         Installed = 1 << 5,

     

       16
       16
       -
         Repository = 1 << 6

     

       17
       17
       -
       }

     

       18
       18
       -
       export const defaultFilter = ~(~0 << 7);

     

       19
       19
       -
       

     

       20
       20
       -
       export default async (require: WebpackRequireType) => {

     

       21
       21
       -
         const spacepack = require("spacepack_spacepack").spacepack;

     

       22
       22
       -
         const React = require("common_react");

     

       23
       23
       -
         const Flux = require("common_flux");

     

       24
       24
       -
         const { WindowStore } = require("common_stores");

     

       25
       25
       -
       

     

       26
       26
       -
         const {

     

       27
       27
       -
           Button,

     

       28
       28
       -
           Text,

     

       29
       29
       -
           Heading,

     

       30
       30
       -
           Popout,

     

       31
       31
       -
           Dialog

     

       32
       32
       -
         } = require("common_components");

     

       33
       33
       -
       

     

       34
       34
       -
         const channelModule =

     

       35
       35
       -
           require.m[

     

       36
       36
       -
             spacepack.findByCode(

     

       37
       37
       -
               '"Missing channel in Channel.openChannelContextMenu"'

     

       38
       38
       -
             )[0].id

     

       39
       39
       -
           ].toString();

     

       40
       40
       -
         const moduleId = channelModule.match(/webpackId:"(.+?)"/)![1];

     

       41
       41
       -
         await require.el(moduleId);

     

       42
       42
       -
       

     

       43
       43
       -
         const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       44
       44
       -
         const SortMenuClasses = spacepack.findByCode("container:", "clearText:")[0]

     

       45
       45
       -
           .exports;

     

       46
       46
       -
         const FilterDialogClasses = spacepack.findByCode(

     

       47
       47
       -
           "countContainer:",

     

       48
       48
       -
           "tagContainer:"

     

       49
       49
       -
         )[0].exports;

     

       50
       50
       -
         const FilterBarClasses = spacepack.findByCode("tagsButtonWithCount:")[0]

     

       51
       51
       -
           .exports;

     

       52
       52
       -
       

     

       53
       53
       -
         const TagItem = spacepack.findByCode("IncreasedActivityForumTagPill:")[0]

     

       54
       54
       -
           .exports.default;

     

       55
       55
       -
       

     

       56
       56
       -
         const ChevronSmallDownIcon = spacepack.findByCode(ChevronSmallDownIconSVG)[0]

     

       57
       57
       -
           .exports.default;

     

       58
       58
       -
         const ChevronSmallUpIcon = spacepack.findByCode(ChevronSmallUpIconSVG)[0]

     

       59
       59
       -
           .exports.default;

     

       60
       60
       -
         const ArrowsUpDownIcon =

     

       61
       61
       -
           spacepack.findByCode(ArrowsUpDownIconSVG)[0].exports.default;

     

       62
       62
       -
       

     

       63
       63
       -
         function toggleTag(

     

       64
       64
       -
           selectedTags: Set<string>,

     

       65
       65
       -
           setSelectedTags: (tags: Set<string>) => void,

     

       66
       66
       -
           tag: string

     

       67
       67
       -
         ) {

     

       68
       68
       -
           const newState = new Set(selectedTags);

     

       69
       69
       -
           if (newState.has(tag)) newState.delete(tag);

     

       70
       70
       -
           else newState.add(tag);

     

       71
       71
       -
           setSelectedTags(newState);

     

       72
       72
       -
         }

     

       73
       73
       -
       

     

       74
       74
       -
         function FilterButtonPopout({

     

       75
       75
       -
           filter,

     

       76
       76
       -
           setFilter,

     

       77
       77
       -
           closePopout

     

       78
       78
       -
         }: {

     

       79
       79
       -
           filter: Filter;

     

       80
       80
       -
           setFilter: (filter: Filter) => void;

     

       81
       81
       -
           closePopout: () => void;

     

       82
       82
       -
         }) {

     

       83
       83
       -
           const {

     

       84
       84
       -
             Menu,

     

       85
       85
       -
             MenuItem,

     

       86
       86
       -
             MenuGroup,

     

       87
       87
       -
             MenuCheckboxItem

     

       88
       88
       -
           } = require("common_components");

     

       89
       89
       -
       

     

       90
       90
       -
           const toggleFilter = (set: Filter) =>

     

       91
       91
       -
             setFilter(filter & set ? filter & ~set : filter | set);

     

       92
       92
       -
       

     

       93
       93
       -
           return (

     

       94
       94
       -
             <div className={SortMenuClasses.container}>

     

       95
       95
       -
               <Menu navId="sort-filter" hideScrollbar={true} onClose={closePopout}>

     

       96
       96
       -
                 <MenuGroup label="Type">

     

       97
       97
       -
                   <MenuCheckboxItem

     

       98
       98
       -
                     id="t-core"

     

       99
       99
       -
                     label="Core"

     

       100
       100
       -
                     checked={filter & Filter.Core}

     

       101
       101
       -
                     action={() => toggleFilter(Filter.Core)}

     

       102
       102
       -
                   />

     

       103
       103
       -
                   <MenuCheckboxItem

     

       104
       104
       -
                     id="t-normal"

     

       105
       105
       -
                     label="Normal"

     

       106
       106
       -
                     checked={filter & Filter.Normal}

     

       107
       107
       -
                     action={() => toggleFilter(Filter.Normal)}

     

       108
       108
       -
                   />

     

       109
       109
       -
                   <MenuCheckboxItem

     

       110
       110
       -
                     id="t-developer"

     

       111
       111
       -
                     label="Developer"

     

       112
       112
       -
                     checked={filter & Filter.Developer}

     

       113
       113
       -
                     action={() => toggleFilter(Filter.Developer)}

     

       114
       114
       -
                   />

     

       115
       115
       -
                 </MenuGroup>

     

       116
       116
       -
                 <MenuGroup label="State">

     

       117
       117
       -
                   <MenuCheckboxItem

     

       118
       118
       -
                     id="s-enabled"

     

       119
       119
       -
                     label="Enabled"

     

       120
       120
       -
                     checked={filter & Filter.Enabled}

     

       121
       121
       -
                     action={() => toggleFilter(Filter.Enabled)}

     

       122
       122
       -
                   />

     

       123
       123
       -
                   <MenuCheckboxItem

     

       124
       124
       -
                     id="s-disabled"

     

       125
       125
       -
                     label="Disabled"

     

       126
       126
       -
                     checked={filter & Filter.Disabled}

     

       127
       127
       -
                     action={() => toggleFilter(Filter.Disabled)}

     

       128
       128
       -
                   />

     

       129
       129
       -
                 </MenuGroup>

     

       130
       130
       -
                 <MenuGroup label="Location">

     

       131
       131
       -
                   <MenuCheckboxItem

     

       132
       132
       -
                     id="l-installed"

     

       133
       133
       -
                     label="Installed"

     

       134
       134
       -
                     checked={filter & Filter.Installed}

     

       135
       135
       -
                     action={() => toggleFilter(Filter.Installed)}

     

       136
       136
       -
                   />

     

       137
       137
       -
                   <MenuCheckboxItem

     

       138
       138
       -
                     id="l-repository"

     

       139
       139
       -
                     label="Repository"

     

       140
       140
       -
                     checked={filter & Filter.Repository}

     

       141
       141
       -
                     action={() => toggleFilter(Filter.Repository)}

     

       142
       142
       -
                   />

     

       143
       143
       -
                 </MenuGroup>

     

       144
       144
       -
                 <MenuGroup>

     

       145
       145
       -
                   <MenuItem

     

       146
       146
       -
                     id="reset-all"

     

       147
       147
       -
                     className={SortMenuClasses.clearText}

     

       148
       148
       -
                     label={

     

       149
       149
       -
                       <Text variant="text-sm/medium" color="none">

     

       150
       150
       -
                         Reset to default

     

       151
       151
       -
                       </Text>

     

       152
       152
       -
                     }

     

       153
       153
       -
                     action={() => {

     

       154
       154
       -
                       setFilter(defaultFilter);

     

       155
       155
       -
                       closePopout();

     

       156
       156
       -
                     }}

     

       157
       157
       -
                   />

     

       158
       158
       -
                 </MenuGroup>

     

       159
       159
       -
               </Menu>

     

       160
       160
       -
             </div>

     

       161
       161
       -
           );

     

       162
       162
       -
         }

     

       163
       163
       -
       

     

       164
       164
       -
         function TagButtonPopout({

     

       165
       165
       -
           selectedTags,

     

       166
       166
       -
           setSelectedTags,

     

       167
       167
       -
           setPopoutRef,

     

       168
       168
       -
           closePopout

     

       169
       169
       -
         }: any) {

     

       170
       170
       -
           return (

     

       171
       171
       -
             <Dialog ref={setPopoutRef} className={FilterDialogClasses.container}>

     

       172
       172
       -
               <div className={FilterDialogClasses.header}>

     

       173
       173
       -
                 <div className={FilterDialogClasses.headerLeft}>

     

       174
       174
       -
                   <Heading

     

       175
       175
       -
                     color="interactive-normal"

     

       176
       176
       -
                     variant="text-xs/bold"

     

       177
       177
       -
                     className={FilterDialogClasses.headerText}

     

       178
       178
       -
                   >

     

       179
       179
       -
                     Select tags

     

       180
       180
       -
                   </Heading>

     

       181
       181
       -
                   <div className={FilterDialogClasses.countContainer}>

     

       182
       182
       -
                     <Text

     

       183
       183
       -
                       className={FilterDialogClasses.countText}

     

       184
       184
       -
                       color="none"

     

       185
       185
       -
                       variant="text-xs/medium"

     

       186
       186
       -
                     >

     

       187
       187
       -
                       {selectedTags.size}

     

       188
       188
       -
                     </Text>

     

       189
       189
       -
                   </div>

     

       190
       190
       -
                 </div>

     

       191
       191
       -
               </div>

     

       192
       192
       -
               <div className={FilterDialogClasses.tagContainer}>

     

       193
       193
       -
                 {Object.keys(tagNames).map((tag) => (

     

       194
       194
       -
                   <TagItem

     

       195
       195
       -
                     key={tag}

     

       196
       196
       -
                     className={FilterDialogClasses.tag}

     

       197
       197
       -
                     tag={{ name: tagNames[tag as keyof typeof tagNames] }}

     

       198
       198
       -
                     onClick={() => toggleTag(selectedTags, setSelectedTags, tag)}

     

       199
       199
       -
                     selected={selectedTags.has(tag)}

     

       200
       200
       -
                   />

     

       201
       201
       -
                 ))}

     

       202
       202
       -
               </div>

     

       203
       203
       -
               <div className={FilterDialogClasses.separator} />

     

       204
       204
       -
               <Button

     

       205
       205
       -
                 look={Button.Looks.LINK}

     

       206
       206
       -
                 size={Button.Sizes.MIN}

     

       207
       207
       -
                 color={Button.Colors.CUSTOM}

     

       208
       208
       -
                 className={FilterDialogClasses.clear}

     

       209
       209
       -
                 onClick={() => {

     

       210
       210
       -
                   setSelectedTags(new Set());

     

       211
       211
       -
                   closePopout();

     

       212
       212
       -
                 }}

     

       213
       213
       -
               >

     

       214
       214
       -
                 <Text variant="text-sm/medium" color="text-link">

     

       215
       215
       -
                   Clear all

     

       216
       216
       -
                 </Text>

     

       217
       217
       -
               </Button>

     

       218
       218
       -
             </Dialog>

     

       219
       219
       -
           );

     

       220
       220
       -
         }

     

       221
       221
       -
       

     

       222
       222
       -
         return function FilterBar({

     

       223
       223
       -
           filter,

     

       224
       224
       -
           setFilter,

     

       225
       225
       -
           selectedTags,

     

       226
       226
       -
           setSelectedTags

     

       227
       227
       -
         }: {

     

       228
       228
       -
           filter: Filter;

     

       229
       229
       -
           setFilter: (filter: Filter) => void;

     

       230
       230
       -
           selectedTags: Set<string>;

     

       231
       231
       -
           setSelectedTags: (tags: Set<string>) => void;

     

       232
       232
       -
         }) {

     

       233
       233
       -
           const windowSize = Flux.useStateFromStores([WindowStore], () =>

     

       234
       234
       -
             WindowStore.windowSize()

     

       235
       235
       -
           );

     

       236
       236
       -
       

     

       237
       237
       -
           const tagsContainer = React.useRef<HTMLDivElement>(null);

     

       238
       238
       -
           const tagListInner = React.useRef<HTMLDivElement>(null);

     

       239
       239
       -
           const [tagsButtonOffset, setTagsButtonOffset] = React.useState(0);

     

       240
       240
       -
           React.useLayoutEffect(() => {

     

       241
       241
       -
             if (tagsContainer.current === null || tagListInner.current === null)

     

       242
       242
       -
               return;

     

       243
       243
       -
             const { left: containerX, top: containerY } =

     

       244
       244
       -
               tagsContainer.current.getBoundingClientRect();

     

       245
       245
       -
             let offset = 0;

     

       246
       246
       -
             for (const child of tagListInner.current.children) {

     

       247
       247
       -
               const {

     

       248
       248
       -
                 right: childX,

     

       249
       249
       -
                 top: childY,

     

       250
       250
       -
                 height

     

       251
       251
       -
               } = child.getBoundingClientRect();

     

       252
       252
       -
               if (childY - containerY > height) break;

     

       253
       253
       -
               const newOffset = childX - containerX;

     

       254
       254
       -
               if (newOffset > offset) {

     

       255
       255
       -
                 offset = newOffset;

     

       256
       256
       -
               }

     

       257
       257
       -
             }

     

       258
       258
       -
             setTagsButtonOffset(offset);

     

       259
       259
       -
           }, [windowSize]);

     

       260
       260
       -
       

     

       261
       261
       -
           return (

     

       262
       262
       -
             <div

     

       263
       263
       -
               ref={tagsContainer}

     

       264
       264
       -
               style={{

     

       265
       265
       -
                 paddingTop: "12px"

     

       266
       266
       -
               }}

     

       267
       267
       -
               className={`${FilterBarClasses.tagsContainer} ${Margins.marginBottom8}`}

     

       268
       268
       -
             >

     

       269
       269
       -
               <Popout

     

       270
       270
       -
                 renderPopout={({ closePopout }: any) => (

     

       271
       271
       -
                   <FilterButtonPopout

     

       272
       272
       -
                     filter={filter}

     

       273
       273
       -
                     setFilter={setFilter}

     

       274
       274
       -
                     closePopout={closePopout}

     

       275
       275
       -
                   />

     

       276
       276
       -
                 )}

     

       277
       277
       -
                 position="bottom"

     

       278
       278
       -
                 align="left"

     

       279
       279
       -
               >

     

       280
       280
       -
                 {(props: any, { isShown }: { isShown: boolean }) => (

     

       281
       281
       -
                   <Button

     

       282
       282
       -
                     {...props}

     

       283
       283
       -
                     size={Button.Sizes.MIN}

     

       284
       284
       -
                     color={Button.Colors.CUSTOM}

     

       285
       285
       -
                     className={FilterBarClasses.sortDropdown}

     

       286
       286
       -
                     innerClassName={FilterBarClasses.sortDropdownInner}

     

       287
       287
       -
                   >

     

       288
       288
       -
                     <ArrowsUpDownIcon />

     

       289
       289
       -
                     <Text

     

       290
       290
       -
                       className={FilterBarClasses.sortDropdownText}

     

       291
       291
       -
                       variant="text-sm/medium"

     

       292
       292
       -
                       color="interactive-normal"

     

       293
       293
       -
                     >

     

       294
       294
       -
                       Sort & filter

     

       295
       295
       -
                     </Text>

     

       296
       296
       -
                     {isShown ? (

     

       297
       297
       -
                       <ChevronSmallUpIcon size={20} />

     

       298
       298
       -
                     ) : (

     

       299
       299
       -
                       <ChevronSmallDownIcon size={20} />

     

       300
       300
       -
                     )}

     

       301
       301
       -
                   </Button>

     

       302
       302
       -
                 )}

     

       303
       303
       -
               </Popout>

     

       304
       304
       -
               <div className={FilterBarClasses.divider} />

     

       305
       305
       -
               <div className={FilterBarClasses.tagList}>

     

       306
       306
       -
                 <div ref={tagListInner} className={FilterBarClasses.tagListInner}>

     

       307
       307
       -
                   {Object.keys(tagNames).map((tag) => (

     

       308
       308
       -
                     <TagItem

     

       309
       309
       -
                       key={tag}

     

       310
       310
       -
                       className={FilterBarClasses.tag}

     

       311
       311
       -
                       tag={{ name: tagNames[tag as keyof typeof tagNames] }}

     

       312
       312
       -
                       onClick={() => toggleTag(selectedTags, setSelectedTags, tag)}

     

       313
       313
       -
                       selected={selectedTags.has(tag)}

     

       314
       314
       -
                     />

     

       315
       315
       -
                   ))}

     

       316
       316
       -
                 </div>

     

       317
       317
       -
               </div>

     

       318
       318
       -
               <Popout

     

       319
       319
       -
                 renderPopout={({ setPopoutRef, closePopout }: any) => (

     

       320
       320
       -
                   <TagButtonPopout

     

       321
       321
       -
                     selectedTags={selectedTags}

     

       322
       322
       -
                     setSelectedTags={setSelectedTags}

     

       323
       323
       -
                     setPopoutRef={setPopoutRef}

     

       324
       324
       -
                     closePopout={closePopout}

     

       325
       325
       -
                   />

     

       326
       326
       -
                 )}

     

       327
       327
       -
                 position="bottom"

     

       328
       328
       -
                 align="right"

     

       329
       329
       -
               >

     

       330
       330
       -
                 {(props: any, { isShown }: { isShown: boolean }) => (

     

       331
       331
       -
                   <Button

     

       332
       332
       -
                     {...props}

     

       333
       333
       -
                     size={Button.Sizes.MIN}

     

       334
       334
       -
                     color={Button.Colors.CUSTOM}

     

       335
       335
       -
                     style={{

     

       336
       336
       -
                       left: tagsButtonOffset

     

       337
       337
       -
                     }}

     

       338
       338
       -
                     // TODO: Use Discord's class name utility

     

       339
       339
       -
                     className={`${FilterBarClasses.tagsButton} ${

     

       340
       340
       -
                       selectedTags.size > 0

     

       341
       341
       -
                         ? FilterBarClasses.tagsButtonWithCount

     

       342
       342
       -
                         : ""

     

       343
       343
       -
                     }`}

     

       344
       344
       -
                     innerClassName={FilterBarClasses.tagsButtonInner}

     

       345
       345
       -
                   >

     

       346
       346
       -
                     {selectedTags.size > 0 ? (

     

       347
       347
       -
                       <div

     

       348
       348
       -
                         style={{ boxSizing: "content-box" }}

     

       349
       349
       -
                         className={FilterBarClasses.countContainer}

     

       350
       350
       -
                       >

     

       351
       351
       -
                         <Text

     

       352
       352
       -
                           className={FilterBarClasses.countText}

     

       353
       353
       -
                           color="none"

     

       354
       354
       -
                           variant="text-xs/medium"

     

       355
       355
       -
                         >

     

       356
       356
       -
                           {selectedTags.size}

     

       357
       357
       -
                         </Text>

     

       358
       358
       -
                       </div>

     

       359
       359
       -
                     ) : (

     

       360
       360
       -
                       <>All</>

     

       361
       361
       -
                     )}

     

       362
       362
       -
                     {isShown ? (

     

       363
       363
       -
                       <ChevronSmallUpIcon size={20} />

     

       364
       364
       -
                     ) : (

     

       365
       365
       -
                       <ChevronSmallDownIcon size={20} />

     

       366
       366
       -
                     )}

     

       367
       367
       -
                   </Button>

     

       368
       368
       -
                 )}

     

       369
       369
       -
               </Popout>

     

       370
       370
       -
             </div>

     

       371
       371
       -
           );

     

       372
       372
       -
         };

     

       373
       373
       -
       };

-118

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

···

       1
       1
       -
       import {

     

       2
       2
       -
         ExtensionLoadSource,

     

       3
       3
       -
         ExtensionTag,

     

       4
       4
       -
         WebpackRequireType

     

       5
       5
       -
       } from "@moonlight-mod/types";

     

       6
       6
       -
       import { ExtensionState } from "../../types";

     

       7
       7
       -
       import filterBar, { Filter, defaultFilter } from "./filterBar";

     

       8
       8
       -
       import card from "./card";

     

       9
       9
       -
       

     

       10
       10
       -
       export default (require: WebpackRequireType) => {

     

       11
       11
       -
         const React = require("common_react");

     

       12
       12
       -
         const spacepack = require("spacepack_spacepack").spacepack;

     

       13
       13
       -
         const Flux = require("common_flux");

     

       14
       14
       -
       

     

       15
       15
       -
         const { MoonbaseSettingsStore } =

     

       16
       16
       -
           require("moonbase_stores") as typeof import("../../webpackModules/stores");

     

       17
       17
       -
       

     

       18
       18
       -
         const ExtensionCard = card(require);

     

       19
       19
       -
         const FilterBar = React.lazy(() =>

     

       20
       20
       -
           filterBar(require).then((c) => ({ default: c }))

     

       21
       21
       -
         );

     

       22
       22
       -
       

     

       23
       23
       -
         const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       24
       24
       -
         const SearchBar = spacepack.findByCode("Messages.SEARCH", "hideSearchIcon")[0]

     

       25
       25
       -
           .exports.default;

     

       26
       26
       -
       

     

       27
       27
       -
         return function ExtensionsPage() {

     

       28
       28
       -
           const { extensions, savedFilter } = Flux.useStateFromStoresObject(

     

       29
       29
       -
             [MoonbaseSettingsStore],

     

       30
       30
       -
             () => {

     

       31
       31
       -
               return {

     

       32
       32
       -
                 extensions: MoonbaseSettingsStore.extensions,

     

       33
       33
       -
                 savedFilter: MoonbaseSettingsStore.getExtensionConfig(

     

       34
       34
       -
                   "moonbase",

     

       35
       35
       -
                   "filter"

     

       36
       36
       -
                 )

     

       37
       37
       -
               };

     

       38
       38
       -
             }

     

       39
       39
       -
           );

     

       40
       40
       -
       

     

       41
       41
       -
           const [query, setQuery] = React.useState("");

     

       42
       42
       -
       

     

       43
       43
       -
           let filter: Filter, setFilter: (filter: Filter) => void;

     

       44
       44
       -
           if (moonlight.getConfigOption<boolean>("moonbase", "saveFilter")) {

     

       45
       45
       -
             filter = savedFilter ?? defaultFilter;

     

       46
       46
       -
             setFilter = (filter) =>

     

       47
       47
       -
               MoonbaseSettingsStore.setExtensionConfig("moonbase", "filter", filter);

     

       48
       48
       -
           } else {

     

       49
       49
       -
             const state = React.useState(defaultFilter);

     

       50
       50
       -
             filter = state[0];

     

       51
       51
       -
             setFilter = state[1];

     

       52
       52
       -
           }

     

       53
       53
       -
           const [selectedTags, setSelectedTags] = React.useState(new Set<string>());

     

       54
       54
       -
           const sorted = Object.values(extensions).sort((a, b) => {

     

       55
       55
       -
             const aName = a.manifest.meta?.name ?? a.id;

     

       56
       56
       -
             const bName = b.manifest.meta?.name ?? b.id;

     

       57
       57
       -
             return aName.localeCompare(bName);

     

       58
       58
       -
           });

     

       59
       59
       -
       

     

       60
       60
       -
           const filtered = sorted.filter(

     

       61
       61
       -
             (ext) =>

     

       62
       62
       -
               (ext.manifest.meta?.name?.toLowerCase().includes(query) ||

     

       63
       63
       -
                 ext.manifest.meta?.tagline?.toLowerCase().includes(query) ||

     

       64
       64
       -
                 ext.manifest.meta?.description?.toLowerCase().includes(query)) &&

     

       65
       65
       -
               [...selectedTags.values()].every(

     

       66
       66
       -
                 (tag) => ext.manifest.meta?.tags?.includes(tag as ExtensionTag)

     

       67
       67
       -
               ) &&

     

       68
       68
       -
               // This seems very bad, sorry

     

       69
       69
       -
               !(

     

       70
       70
       -
                 (!(filter & Filter.Core) &&

     

       71
       71
       -
                   ext.source.type === ExtensionLoadSource.Core) ||

     

       72
       72
       -
                 (!(filter & Filter.Normal) &&

     

       73
       73
       -
                   ext.source.type === ExtensionLoadSource.Normal) ||

     

       74
       74
       -
                 (!(filter & Filter.Developer) &&

     

       75
       75
       -
                   ext.source.type === ExtensionLoadSource.Developer) ||

     

       76
       76
       -
                 (!(filter & Filter.Enabled) &&

     

       77
       77
       -
                   MoonbaseSettingsStore.getExtensionEnabled(ext.id)) ||

     

       78
       78
       -
                 (!(filter & Filter.Disabled) &&

     

       79
       79
       -
                   !MoonbaseSettingsStore.getExtensionEnabled(ext.id)) ||

     

       80
       80
       -
                 (!(filter & Filter.Installed) &&

     

       81
       81
       -
                   ext.state !== ExtensionState.NotDownloaded) ||

     

       82
       82
       -
                 (!(filter & Filter.Repository) &&

     

       83
       83
       -
                   ext.state === ExtensionState.NotDownloaded)

     

       84
       84
       -
               )

     

       85
       85
       -
           );

     

       86
       86
       -
       

     

       87
       87
       -
           return (

     

       88
       88
       -
             <>

     

       89
       89
       -
               <SearchBar

     

       90
       90
       -
                 size={SearchBar.Sizes.MEDIUM}

     

       91
       91
       -
                 query={query}

     

       92
       92
       -
                 onChange={(v: string) => setQuery(v.toLowerCase())}

     

       93
       93
       -
                 onClear={() => setQuery("")}

     

       94
       94
       -
                 autoFocus={true}

     

       95
       95
       -
                 autoComplete="off"

     

       96
       96
       -
                 inputProps={{

     

       97
       97
       -
                   autoCapitalize: "none",

     

       98
       98
       -
                   autoCorrect: "off",

     

       99
       99
       -
                   spellCheck: "false"

     

       100
       100
       -
                 }}

     

       101
       101
       -
               />

     

       102
       102
       -
               <React.Suspense

     

       103
       103
       -
                 fallback={<div className={Margins.marginBottom20}></div>}

     

       104
       104
       -
               >

     

       105
       105
       -
                 <FilterBar

     

       106
       106
       -
                   filter={filter}

     

       107
       107
       -
                   setFilter={setFilter}

     

       108
       108
       -
                   selectedTags={selectedTags}

     

       109
       109
       -
                   setSelectedTags={setSelectedTags}

     

       110
       110
       -
                 />

     

       111
       111
       -
               </React.Suspense>

     

       112
       112
       -
               {filtered.map((ext) => (

     

       113
       113
       -
                 <ExtensionCard id={ext.id} key={ext.id} />

     

       114
       114
       -
               ))}

     

       115
       115
       -
             </>

     

       116
       116
       -
           );

     

       117
       117
       -
         };

     

       118
       118
       -
       };

-209

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

···

       1
       1
       -
       import WebpackRequire from "@moonlight-mod/types/discord/require";

     

       2
       2
       -
       import { ExtensionTag } from "@moonlight-mod/types";

     

       3
       3
       -
       import { MoonbaseExtension } from "../../types";

     

       4
       4
       -
       

     

       5
       5
       -
       type Dependency = {

     

       6
       6
       -
         id: string;

     

       7
       7
       -
         type: DependencyType;

     

       8
       8
       -
       };

     

       9
       9
       -
       

     

       10
       10
       -
       enum DependencyType {

     

       11
       11
       -
         Dependency = "dependency",

     

       12
       12
       -
         Optional = "optional",

     

       13
       13
       -
         Incompatible = "incompatible"

     

       14
       14
       -
       }

     

       15
       15
       -
       

     

       16
       16
       -
       export const tagNames: Record<ExtensionTag, string> = {

     

       17
       17
       -
         [ExtensionTag.Accessibility]: "Accessibility",

     

       18
       18
       -
         [ExtensionTag.Appearance]: "Appearance",

     

       19
       19
       -
         [ExtensionTag.Chat]: "Chat",

     

       20
       20
       -
         [ExtensionTag.Commands]: "Commands",

     

       21
       21
       -
         [ExtensionTag.ContextMenu]: "Context Menu",

     

       22
       22
       -
         [ExtensionTag.DangerZone]: "Danger Zone",

     

       23
       23
       -
         [ExtensionTag.Development]: "Development",

     

       24
       24
       -
         [ExtensionTag.Fixes]: "Fixes",

     

       25
       25
       -
         [ExtensionTag.Fun]: "Fun",

     

       26
       26
       -
         [ExtensionTag.Markdown]: "Markdown",

     

       27
       27
       -
         [ExtensionTag.Voice]: "Voice",

     

       28
       28
       -
         [ExtensionTag.Privacy]: "Privacy",

     

       29
       29
       -
         [ExtensionTag.Profiles]: "Profiles",

     

       30
       30
       -
         [ExtensionTag.QualityOfLife]: "Quality of Life",

     

       31
       31
       -
         [ExtensionTag.Library]: "Library"

     

       32
       32
       -
       };

     

       33
       33
       -
       

     

       34
       34
       -
       export default (require: typeof WebpackRequire) => {

     

       35
       35
       -
         const React = require("common_react");

     

       36
       36
       -
         const spacepack = require("spacepack_spacepack").spacepack;

     

       37
       37
       -
       

     

       38
       38
       -
         const CommonComponents = require("common_components");

     

       39
       39
       -
         const UserInfoClasses = spacepack.findByCode(

     

       40
       40
       -
           "infoScroller",

     

       41
       41
       -
           "userInfoSection",

     

       42
       42
       -
           "userInfoSectionHeader"

     

       43
       43
       -
         )[0].exports;

     

       44
       44
       -
       

     

       45
       45
       -
         const { MoonbaseSettingsStore } =

     

       46
       46
       -
           require("moonbase_stores") as typeof import("../../webpackModules/stores");

     

       47
       47
       -
       

     

       48
       48
       -
         function InfoSection({

     

       49
       49
       -
           title,

     

       50
       50
       -
           children

     

       51
       51
       -
         }: {

     

       52
       52
       -
           title: string;

     

       53
       53
       -
           children: React.ReactNode;

     

       54
       54
       -
         }) {

     

       55
       55
       -
           return (

     

       56
       56
       -
             <div

     

       57
       57
       -
               style={{

     

       58
       58
       -
                 marginRight: "1em"

     

       59
       59
       -
               }}

     

       60
       60
       -
             >

     

       61
       61
       -
               <CommonComponents.Text

     

       62
       62
       -
                 variant="eyebrow"

     

       63
       63
       -
                 className={UserInfoClasses.userInfoSectionHeader}

     

       64
       64
       -
               >

     

       65
       65
       -
                 {title}

     

       66
       66
       -
               </CommonComponents.Text>

     

       67
       67
       -
       

     

       68
       68
       -
               <CommonComponents.Text variant="text-sm/normal">

     

       69
       69
       -
                 {children}

     

       70
       70
       -
               </CommonComponents.Text>

     

       71
       71
       -
             </div>

     

       72
       72
       -
           );

     

       73
       73
       -
         }

     

       74
       74
       -
       

     

       75
       75
       -
         function Badge({

     

       76
       76
       -
           color,

     

       77
       77
       -
           children

     

       78
       78
       -
         }: {

     

       79
       79
       -
           color: string;

     

       80
       80
       -
           children: React.ReactNode;

     

       81
       81
       -
         }) {

     

       82
       82
       -
           return (

     

       83
       83
       -
             <span

     

       84
       84
       -
               style={{

     

       85
       85
       -
                 borderRadius: ".1875rem",

     

       86
       86
       -
                 padding: "0 0.275rem",

     

       87
       87
       -
                 marginRight: "0.4em",

     

       88
       88
       -
                 backgroundColor: color,

     

       89
       89
       -
                 color: "#fff"

     

       90
       90
       -
               }}

     

       91
       91
       -
             >

     

       92
       92
       -
               {children}

     

       93
       93
       -
             </span>

     

       94
       94
       -
           );

     

       95
       95
       -
         }

     

       96
       96
       -
       

     

       97
       97
       -
         function ExtensionInfo({ ext }: { ext: MoonbaseExtension }) {

     

       98
       98
       -
           const authors = ext.manifest?.meta?.authors;

     

       99
       99
       -
           const tags = ext.manifest?.meta?.tags;

     

       100
       100
       -
           const version = ext.manifest?.version;

     

       101
       101
       -
       

     

       102
       102
       -
           const dependencies: Dependency[] = [];

     

       103
       103
       -
           if (ext.manifest.dependencies != null) {

     

       104
       104
       -
             dependencies.push(

     

       105
       105
       -
               ...ext.manifest.dependencies.map((dep) => ({

     

       106
       106
       -
                 id: dep,

     

       107
       107
       -
                 type: DependencyType.Dependency

     

       108
       108
       -
               }))

     

       109
       109
       -
             );

     

       110
       110
       -
           }

     

       111
       111
       -
       

     

       112
       112
       -
           if (ext.manifest.suggested != null) {

     

       113
       113
       -
             dependencies.push(

     

       114
       114
       -
               ...ext.manifest.suggested.map((dep) => ({

     

       115
       115
       -
                 id: dep,

     

       116
       116
       -
                 type: DependencyType.Optional

     

       117
       117
       -
               }))

     

       118
       118
       -
             );

     

       119
       119
       -
           }

     

       120
       120
       -
       

     

       121
       121
       -
           if (ext.manifest.incompatible != null) {

     

       122
       122
       -
             dependencies.push(

     

       123
       123
       -
               ...ext.manifest.incompatible.map((dep) => ({

     

       124
       124
       -
                 id: dep,

     

       125
       125
       -
                 type: DependencyType.Incompatible

     

       126
       126
       -
               }))

     

       127
       127
       -
             );

     

       128
       128
       -
           }

     

       129
       129
       -
       

     

       130
       130
       -
           return (

     

       131
       131
       -
             <>

     

       132
       132
       -
               {authors != null && (

     

       133
       133
       -
                 <InfoSection title="Authors">

     

       134
       134
       -
                   {authors.map((author, i) => {

     

       135
       135
       -
                     const comma = i !== authors.length - 1 ? ", " : "";

     

       136
       136
       -
                     if (typeof author === "string") {

     

       137
       137
       -
                       return (

     

       138
       138
       -
                         <span key={i}>

     

       139
       139
       -
                           {author}

     

       140
       140
       -
                           {comma}

     

       141
       141
       -
                         </span>

     

       142
       142
       -
                       );

     

       143
       143
       -
                     } else {

     

       144
       144
       -
                       // TODO: resolve IDs

     

       145
       145
       -
                       return (

     

       146
       146
       -
                         <span key={i}>

     

       147
       147
       -
                           {author.name}

     

       148
       148
       -
                           {comma}

     

       149
       149
       -
                         </span>

     

       150
       150
       -
                       );

     

       151
       151
       -
                     }

     

       152
       152
       -
                   })}

     

       153
       153
       -
                 </InfoSection>

     

       154
       154
       -
               )}

     

       155
       155
       -
       

     

       156
       156
       -
               {tags != null && (

     

       157
       157
       -
                 <InfoSection title="Tags">

     

       158
       158
       -
                   {tags.map((tag, i) => {

     

       159
       159
       -
                     const name = tagNames[tag];

     

       160
       160
       -
       

     

       161
       161
       -
                     return (

     

       162
       162
       -
                       <Badge

     

       163
       163
       -
                         key={i}

     

       164
       164
       -
                         color={

     

       165
       165
       -
                           tag === ExtensionTag.DangerZone

     

       166
       166
       -
                             ? "var(--red-400)"

     

       167
       167
       -
                             : "var(--brand-500)"

     

       168
       168
       -
                         }

     

       169
       169
       -
                       >

     

       170
       170
       -
                         {name}

     

       171
       171
       -
                       </Badge>

     

       172
       172
       -
                     );

     

       173
       173
       -
                   })}

     

       174
       174
       -
                 </InfoSection>

     

       175
       175
       -
               )}

     

       176
       176
       -
       

     

       177
       177
       -
               {dependencies.length > 0 && (

     

       178
       178
       -
                 <InfoSection title="Dependencies">

     

       179
       179
       -
                   {dependencies.map((dep) => {

     

       180
       180
       -
                     const colors = {

     

       181
       181
       -
                       [DependencyType.Dependency]: "var(--brand-500)",

     

       182
       182
       -
                       [DependencyType.Optional]: "var(--orange-400)",

     

       183
       183
       -
                       [DependencyType.Incompatible]: "var(--red-400)"

     

       184
       184
       -
                     };

     

       185
       185
       -
                     const color = colors[dep.type];

     

       186
       186
       -
                     const name = MoonbaseSettingsStore.getExtensionName(dep.id);

     

       187
       187
       -
                     return (

     

       188
       188
       -
                       <Badge color={color} key={dep.id}>

     

       189
       189
       -
                         {name}

     

       190
       190
       -
                       </Badge>

     

       191
       191
       -
                     );

     

       192
       192
       -
                   })}

     

       193
       193
       -
                 </InfoSection>

     

       194
       194
       -
               )}

     

       195
       195
       -
       

     

       196
       196
       -
               {version != null && (

     

       197
       197
       -
                 <InfoSection title="Version">

     

       198
       198
       -
                   <span>{version}</span>

     

       199
       199
       -
                 </InfoSection>

     

       200
       200
       -
               )}

     

       201
       201
       -
             </>

     

       202
       202
       -
           );

     

       203
       203
       -
         }

     

       204
       204
       -
       

     

       205
       205
       -
         return {

     

       206
       206
       -
           InfoSection,

     

       207
       207
       -
           ExtensionInfo

     

       208
       208
       -
         };

     

       209
       209
       -
       };

-396

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

···

       1
       1
       -
       import {

     

       2
       2
       -
         ExtensionSettingType,

     

       3
       3
       -
         ExtensionSettingsManifest,

     

       4
       4
       -
         MultiSelectSettingType,

     

       5
       5
       -
         NumberSettingType,

     

       6
       6
       -
         SelectOption,

     

       7
       7
       -
         SelectSettingType

     

       8
       8
       -
       } from "@moonlight-mod/types/config";

     

       9
       9
       -
       import WebpackRequire from "@moonlight-mod/types/discord/require";

     

       10
       10
       -
       import { CircleXIconSVG, ExtensionState, MoonbaseExtension } from "../../types";

     

       11
       11
       -
       

     

       12
       12
       -
       type SettingsProps = {

     

       13
       13
       -
         ext: MoonbaseExtension;

     

       14
       14
       -
         name: string;

     

       15
       15
       -
         setting: ExtensionSettingsManifest;

     

       16
       16
       -
         disabled: boolean;

     

       17
       17
       -
       };

     

       18
       18
       -
       

     

       19
       19
       -
       type SettingsComponent = React.ComponentType<SettingsProps>;

     

       20
       20
       -
       

     

       21
       21
       -
       export default (require: typeof WebpackRequire) => {

     

       22
       22
       -
         const React = require("common_react");

     

       23
       23
       -
         const CommonComponents = require("common_components");

     

       24
       24
       -
         const Flux = require("common_flux");

     

       25
       25
       -
         const spacepack = require("spacepack_spacepack").spacepack;

     

       26
       26
       -
       

     

       27
       27
       -
         const { MoonbaseSettingsStore } =

     

       28
       28
       -
           require("moonbase_stores") as typeof import("../../webpackModules/stores");

     

       29
       29
       -
       

     

       30
       30
       -
         const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       31
       31
       -
       

     

       32
       32
       -
         function useConfigEntry<T>(id: string, name: string) {

     

       33
       33
       -
           return Flux.useStateFromStores(

     

       34
       34
       -
             [MoonbaseSettingsStore],

     

       35
       35
       -
             () => {

     

       36
       36
       -
               return {

     

       37
       37
       -
                 value: MoonbaseSettingsStore.getExtensionConfig<T>(id, name),

     

       38
       38
       -
                 displayName: MoonbaseSettingsStore.getExtensionConfigName(id, name),

     

       39
       39
       -
                 description: MoonbaseSettingsStore.getExtensionConfigDescription(

     

       40
       40
       -
                   id,

     

       41
       41
       -
                   name

     

       42
       42
       -
                 )

     

       43
       43
       -
               };

     

       44
       44
       -
             },

     

       45
       45
       -
             [id, name]

     

       46
       46
       -
           );

     

       47
       47
       -
         }

     

       48
       48
       -
       

     

       49
       49
       -
         function Boolean({ ext, name, setting, disabled }: SettingsProps) {

     

       50
       50
       -
           const { FormSwitch } = CommonComponents;

     

       51
       51
       -
           const { value, displayName, description } = useConfigEntry<boolean>(

     

       52
       52
       -
             ext.id,

     

       53
       53
       -
             name

     

       54
       54
       -
           );

     

       55
       55
       -
       

     

       56
       56
       -
           return (

     

       57
       57
       -
             <FormSwitch

     

       58
       58
       -
               value={value ?? false}

     

       59
       59
       -
               hideBorder={true}

     

       60
       60
       -
               disabled={disabled}

     

       61
       61
       -
               onChange={(value: boolean) => {

     

       62
       62
       -
                 MoonbaseSettingsStore.setExtensionConfig(ext.id, name, value);

     

       63
       63
       -
               }}

     

       64
       64
       -
               note={description}

     

       65
       65
       -
               className={`${Margins.marginReset} ${Margins.marginTop20}`}

     

       66
       66
       -
             >

     

       67
       67
       -
               {displayName}

     

       68
       68
       -
             </FormSwitch>

     

       69
       69
       -
           );

     

       70
       70
       -
         }

     

       71
       71
       -
       

     

       72
       72
       -
         function Number({ ext, name, setting, disabled }: SettingsProps) {

     

       73
       73
       -
           const { FormItem, FormText, Slider } = CommonComponents;

     

       74
       74
       -
           const { value, displayName, description } = useConfigEntry<number>(

     

       75
       75
       -
             ext.id,

     

       76
       76
       -
             name

     

       77
       77
       -
           );

     

       78
       78
       -
       

     

       79
       79
       -
           const castedSetting = setting as NumberSettingType;

     

       80
       80
       -
           const min = castedSetting.min ?? 0;

     

       81
       81
       -
           const max = castedSetting.max ?? 100;

     

       82
       82
       -
       

     

       83
       83
       -
           return (

     

       84
       84
       -
             <FormItem className={Margins.marginTop20} title={displayName}>

     

       85
       85
       -
               {description && <FormText>{description}</FormText>}

     

       86
       86
       -
               <Slider

     

       87
       87
       -
                 initialValue={value ?? 0}

     

       88
       88
       -
                 disabled={disabled}

     

       89
       89
       -
                 minValue={castedSetting.min ?? 0}

     

       90
       90
       -
                 maxValue={castedSetting.max ?? 100}

     

       91
       91
       -
                 onValueChange={(value: number) => {

     

       92
       92
       -
                   const rounded = Math.max(min, Math.min(max, Math.round(value)));

     

       93
       93
       -
                   MoonbaseSettingsStore.setExtensionConfig(ext.id, name, rounded);

     

       94
       94
       -
                 }}

     

       95
       95
       -
               />

     

       96
       96
       -
             </FormItem>

     

       97
       97
       -
           );

     

       98
       98
       -
         }

     

       99
       99
       -
       

     

       100
       100
       -
         function String({ ext, name, setting, disabled }: SettingsProps) {

     

       101
       101
       -
           const { FormItem, FormText, TextInput } = CommonComponents;

     

       102
       102
       -
           const { value, displayName, description } = useConfigEntry<string>(

     

       103
       103
       -
             ext.id,

     

       104
       104
       -
             name

     

       105
       105
       -
           );

     

       106
       106
       -
       

     

       107
       107
       -
           return (

     

       108
       108
       -
             <FormItem className={Margins.marginTop20} title={displayName}>

     

       109
       109
       -
               {description && (

     

       110
       110
       -
                 <FormText className={Margins.marginBottom8}>{description}</FormText>

     

       111
       111
       -
               )}

     

       112
       112
       -
               <TextInput

     

       113
       113
       -
                 value={value ?? ""}

     

       114
       114
       -
                 onChange={(value: string) => {

     

       115
       115
       -
                   if (disabled) return;

     

       116
       116
       -
                   MoonbaseSettingsStore.setExtensionConfig(ext.id, name, value);

     

       117
       117
       -
                 }}

     

       118
       118
       -
               />

     

       119
       119
       -
             </FormItem>

     

       120
       120
       -
           );

     

       121
       121
       -
         }

     

       122
       122
       -
       

     

       123
       123
       -
         function Select({ ext, name, setting, disabled }: SettingsProps) {

     

       124
       124
       -
           const { FormItem, FormText, SingleSelect } = CommonComponents;

     

       125
       125
       -
           const { value, displayName, description } = useConfigEntry<string>(

     

       126
       126
       -
             ext.id,

     

       127
       127
       -
             name

     

       128
       128
       -
           );

     

       129
       129
       -
       

     

       130
       130
       -
           const castedSetting = setting as SelectSettingType;

     

       131
       131
       -
           const options = castedSetting.options;

     

       132
       132
       -
       

     

       133
       133
       -
           return (

     

       134
       134
       -
             <FormItem className={Margins.marginTop20} title={displayName}>

     

       135
       135
       -
               {description && (

     

       136
       136
       -
                 <FormText className={Margins.marginBottom8}>{description}</FormText>

     

       137
       137
       -
               )}

     

       138
       138
       -
               <SingleSelect

     

       139
       139
       -
                 autofocus={false}

     

       140
       140
       -
                 clearable={false}

     

       141
       141
       -
                 value={value ?? ""}

     

       142
       142
       -
                 options={options.map((o: SelectOption) =>

     

       143
       143
       -
                   typeof o === "string" ? { value: o, label: o } : o

     

       144
       144
       -
                 )}

     

       145
       145
       -
                 onChange={(value: string) => {

     

       146
       146
       -
                   if (disabled) return;

     

       147
       147
       -
                   MoonbaseSettingsStore.setExtensionConfig(ext.id, name, value);

     

       148
       148
       -
                 }}

     

       149
       149
       -
               />

     

       150
       150
       -
             </FormItem>

     

       151
       151
       -
           );

     

       152
       152
       -
         }

     

       153
       153
       -
       

     

       154
       154
       -
         function MultiSelect({ ext, name, setting, disabled }: SettingsProps) {

     

       155
       155
       -
           const { FormItem, FormText, Select, useVariableSelect, multiSelect } =

     

       156
       156
       -
             CommonComponents;

     

       157
       157
       -
           const { value, displayName, description } = useConfigEntry<

     

       158
       158
       -
             string | string[]

     

       159
       159
       -
           >(ext.id, name);

     

       160
       160
       -
       

     

       161
       161
       -
           const castedSetting = setting as MultiSelectSettingType;

     

       162
       162
       -
           const options = castedSetting.options;

     

       163
       163
       -
       

     

       164
       164
       -
           return (

     

       165
       165
       -
             <FormItem className={Margins.marginTop20} title={displayName}>

     

       166
       166
       -
               {description && (

     

       167
       167
       -
                 <FormText className={Margins.marginBottom8}>{description}</FormText>

     

       168
       168
       -
               )}

     

       169
       169
       -
               <Select

     

       170
       170
       -
                 autofocus={false}

     

       171
       171
       -
                 clearable={false}

     

       172
       172
       -
                 closeOnSelect={false}

     

       173
       173
       -
                 options={options.map((o: SelectOption) =>

     

       174
       174
       -
                   typeof o === "string" ? { value: o, label: o } : o

     

       175
       175
       -
                 )}

     

       176
       176
       -
                 {...useVariableSelect({

     

       177
       177
       -
                   onSelectInteraction: multiSelect,

     

       178
       178
       -
                   value: new Set(Array.isArray(value) ? value : [value]),

     

       179
       179
       -
                   onChange: (value: string) => {

     

       180
       180
       -
                     if (disabled) return;

     

       181
       181
       -
                     MoonbaseSettingsStore.setExtensionConfig(

     

       182
       182
       -
                       ext.id,

     

       183
       183
       -
                       name,

     

       184
       184
       -
                       Array.from(value)

     

       185
       185
       -
                     );

     

       186
       186
       -
                   }

     

       187
       187
       -
                 })}

     

       188
       188
       -
               />

     

       189
       189
       -
             </FormItem>

     

       190
       190
       -
           );

     

       191
       191
       -
         }

     

       192
       192
       -
       

     

       193
       193
       -
         const RemoveButtonClasses = spacepack.findByCode("removeButtonContainer")[0]

     

       194
       194
       -
           .exports;

     

       195
       195
       -
         const CircleXIcon = spacepack.findByCode(CircleXIconSVG)[0].exports.default;

     

       196
       196
       -
         function RemoveEntryButton({

     

       197
       197
       -
           onClick,

     

       198
       198
       -
           disabled

     

       199
       199
       -
         }: {

     

       200
       200
       -
           onClick: () => void;

     

       201
       201
       -
           disabled: boolean;

     

       202
       202
       -
         }) {

     

       203
       203
       -
           const { Tooltip, Clickable } = CommonComponents;

     

       204
       204
       -
           return (

     

       205
       205
       -
             <div className={RemoveButtonClasses.removeButtonContainer}>

     

       206
       206
       -
               <Tooltip text="Remove entry" position="top">

     

       207
       207
       -
                 {(props: any) => (

     

       208
       208
       -
                   <Clickable

     

       209
       209
       -
                     {...props}

     

       210
       210
       -
                     className={RemoveButtonClasses.removeButton}

     

       211
       211
       -
                     onClick={onClick}

     

       212
       212
       -
                   >

     

       213
       213
       -
                     <CircleXIcon width={16} height={16} />

     

       214
       214
       -
                   </Clickable>

     

       215
       215
       -
                 )}

     

       216
       216
       -
               </Tooltip>

     

       217
       217
       -
             </div>

     

       218
       218
       -
           );

     

       219
       219
       -
         }

     

       220
       220
       -
       

     

       221
       221
       -
         function List({ ext, name, setting, disabled }: SettingsProps) {

     

       222
       222
       -
           const { FormItem, FormText, TextInput, Button, Flex } = CommonComponents;

     

       223
       223
       -
           const { value, displayName, description } = useConfigEntry<string[]>(

     

       224
       224
       -
             ext.id,

     

       225
       225
       -
             name

     

       226
       226
       -
           );

     

       227
       227
       -
       

     

       228
       228
       -
           const entries = value ?? [];

     

       229
       229
       -
           const updateConfig = () =>

     

       230
       230
       -
             MoonbaseSettingsStore.setExtensionConfig(ext.id, name, entries);

     

       231
       231
       -
       

     

       232
       232
       -
           return (

     

       233
       233
       -
             <FormItem className={Margins.marginTop20} title={displayName}>

     

       234
       234
       -
               {description && (

     

       235
       235
       -
                 <FormText className={Margins.marginBottom4}>{description}</FormText>

     

       236
       236
       -
               )}

     

       237
       237
       -
               <Flex direction={Flex.Direction.VERTICAL}>

     

       238
       238
       -
                 {entries.map((val, i) => (

     

       239
       239
       -
                   // FIXME: stylesheets

     

       240
       240
       -
                   <div

     

       241
       241
       -
                     key={i}

     

       242
       242
       -
                     style={{

     

       243
       243
       -
                       display: "grid",

     

       244
       244
       -
                       height: "32px",

     

       245
       245
       -
                       gap: "8px",

     

       246
       246
       -
                       gridTemplateColumns: "1fr 32px",

     

       247
       247
       -
                       alignItems: "center"

     

       248
       248
       -
                     }}

     

       249
       249
       -
                   >

     

       250
       250
       -
                     <TextInput

     

       251
       251
       -
                       size={TextInput.Sizes.MINI}

     

       252
       252
       -
                       value={val}

     

       253
       253
       -
                       disabled={disabled}

     

       254
       254
       -
                       onChange={(newVal: string) => {

     

       255
       255
       -
                         entries[i] = newVal;

     

       256
       256
       -
                         updateConfig();

     

       257
       257
       -
                       }}

     

       258
       258
       -
                     />

     

       259
       259
       -
                     <RemoveEntryButton

     

       260
       260
       -
                       disabled={disabled}

     

       261
       261
       -
                       onClick={() => {

     

       262
       262
       -
                         entries.splice(i, 1);

     

       263
       263
       -
                         updateConfig();

     

       264
       264
       -
                       }}

     

       265
       265
       -
                     />

     

       266
       266
       -
                   </div>

     

       267
       267
       -
                 ))}

     

       268
       268
       -
       

     

       269
       269
       -
                 <Button

     

       270
       270
       -
                   look={Button.Looks.FILLED}

     

       271
       271
       -
                   color={Button.Colors.GREEN}

     

       272
       272
       -
                   size={Button.Sizes.SMALL}

     

       273
       273
       -
                   disabled={disabled}

     

       274
       274
       -
                   className={Margins.marginTop8}

     

       275
       275
       -
                   onClick={() => {

     

       276
       276
       -
                     entries.push("");

     

       277
       277
       -
                     updateConfig();

     

       278
       278
       -
                   }}

     

       279
       279
       -
                 >

     

       280
       280
       -
                   Add new entry

     

       281
       281
       -
                 </Button>

     

       282
       282
       -
               </Flex>

     

       283
       283
       -
             </FormItem>

     

       284
       284
       -
           );

     

       285
       285
       -
         }

     

       286
       286
       -
       

     

       287
       287
       -
         function Dictionary({ ext, name, setting, disabled }: SettingsProps) {

     

       288
       288
       -
           const { FormItem, FormText, TextInput, Button, Flex } = CommonComponents;

     

       289
       289
       -
           const { value, displayName, description } = useConfigEntry<

     

       290
       290
       -
             Record<string, string>

     

       291
       291
       -
           >(ext.id, name);

     

       292
       292
       -
       

     

       293
       293
       -
           const entries = Object.entries(value ?? {});

     

       294
       294
       -
           const updateConfig = () =>

     

       295
       295
       -
             MoonbaseSettingsStore.setExtensionConfig(

     

       296
       296
       -
               ext.id,

     

       297
       297
       -
               name,

     

       298
       298
       -
               Object.fromEntries(entries)

     

       299
       299
       -
             );

     

       300
       300
       -
       

     

       301
       301
       -
           return (

     

       302
       302
       -
             <FormItem className={Margins.marginTop20} title={displayName}>

     

       303
       303
       -
               {description && (

     

       304
       304
       -
                 <FormText className={Margins.marginBottom4}>{description}</FormText>

     

       305
       305
       -
               )}

     

       306
       306
       -
               <Flex direction={Flex.Direction.VERTICAL}>

     

       307
       307
       -
                 {entries.map(([key, val], i) => (

     

       308
       308
       -
                   // FIXME: stylesheets

     

       309
       309
       -
                   <div

     

       310
       310
       -
                     key={i}

     

       311
       311
       -
                     style={{

     

       312
       312
       -
                       display: "grid",

     

       313
       313
       -
                       height: "32px",

     

       314
       314
       -
                       gap: "8px",

     

       315
       315
       -
                       gridTemplateColumns: "1fr 1fr 32px",

     

       316
       316
       -
                       alignItems: "center"

     

       317
       317
       -
                     }}

     

       318
       318
       -
                   >

     

       319
       319
       -
                     <TextInput

     

       320
       320
       -
                       size={TextInput.Sizes.MINI}

     

       321
       321
       -
                       value={key}

     

       322
       322
       -
                       disabled={disabled}

     

       323
       323
       -
                       onChange={(newKey: string) => {

     

       324
       324
       -
                         entries[i][0] = newKey;

     

       325
       325
       -
                         updateConfig();

     

       326
       326
       -
                       }}

     

       327
       327
       -
                     />

     

       328
       328
       -
                     <TextInput

     

       329
       329
       -
                       size={TextInput.Sizes.MINI}

     

       330
       330
       -
                       value={val}

     

       331
       331
       -
                       disabled={disabled}

     

       332
       332
       -
                       onChange={(newValue: string) => {

     

       333
       333
       -
                         entries[i][1] = newValue;

     

       334
       334
       -
                         updateConfig();

     

       335
       335
       -
                       }}

     

       336
       336
       -
                     />

     

       337
       337
       -
                     <RemoveEntryButton

     

       338
       338
       -
                       disabled={disabled}

     

       339
       339
       -
                       onClick={() => {

     

       340
       340
       -
                         entries.splice(i, 1);

     

       341
       341
       -
                         updateConfig();

     

       342
       342
       -
                       }}

     

       343
       343
       -
                     />

     

       344
       344
       -
                   </div>

     

       345
       345
       -
                 ))}

     

       346
       346
       -
       

     

       347
       347
       -
                 <Button

     

       348
       348
       -
                   look={Button.Looks.FILLED}

     

       349
       349
       -
                   color={Button.Colors.GREEN}

     

       350
       350
       -
                   size={Button.Sizes.SMALL}

     

       351
       351
       -
                   className={Margins.marginTop8}

     

       352
       352
       -
                   disabled={disabled}

     

       353
       353
       -
                   onClick={() => {

     

       354
       354
       -
                     entries.push([`entry-${entries.length}`, ""]);

     

       355
       355
       -
                     updateConfig();

     

       356
       356
       -
                   }}

     

       357
       357
       -
                 >

     

       358
       358
       -
                   Add new entry

     

       359
       359
       -
                 </Button>

     

       360
       360
       -
               </Flex>

     

       361
       361
       -
             </FormItem>

     

       362
       362
       -
           );

     

       363
       363
       -
         }

     

       364
       364
       -
       

     

       365
       365
       -
         function Setting({ ext, name, setting, disabled }: SettingsProps) {

     

       366
       366
       -
           const elements: Partial<Record<ExtensionSettingType, SettingsComponent>> = {

     

       367
       367
       -
             [ExtensionSettingType.Boolean]: Boolean,

     

       368
       368
       -
             [ExtensionSettingType.Number]: Number,

     

       369
       369
       -
             [ExtensionSettingType.String]: String,

     

       370
       370
       -
             [ExtensionSettingType.Select]: Select,

     

       371
       371
       -
             [ExtensionSettingType.MultiSelect]: MultiSelect,

     

       372
       372
       -
             [ExtensionSettingType.List]: List,

     

       373
       373
       -
             [ExtensionSettingType.Dictionary]: Dictionary

     

       374
       374
       -
           };

     

       375
       375
       -
           const element = elements[setting.type];

     

       376
       376
       -
           if (element == null) return <></>;

     

       377
       377
       -
           return React.createElement(element, { ext, name, setting, disabled });

     

       378
       378
       -
         }

     

       379
       379
       -
       

     

       380
       380
       -
         return function Settings({ ext }: { ext: MoonbaseExtension }) {

     

       381
       381
       -
           const { Flex } = CommonComponents;

     

       382
       382
       -
           return (

     

       383
       383
       -
             <Flex className="moonbase-settings" direction={Flex.Direction.VERTICAL}>

     

       384
       384
       -
               {Object.entries(ext.manifest.settings!).map(([name, setting]) => (

     

       385
       385
       -
                 <Setting

     

       386
       386
       -
                   ext={ext}

     

       387
       387
       -
                   key={name}

     

       388
       388
       -
                   name={name}

     

       389
       389
       -
                   setting={setting}

     

       390
       390
       -
                   disabled={ext.state === ExtensionState.NotDownloaded}

     

       391
       391
       -
                 />

     

       392
       392
       -
               ))}

     

       393
       393
       -
             </Flex>

     

       394
       394
       -
           );

     

       395
       395
       -
         };

     

       396
       396
       -
       };

-54

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

···

       1
       1
       -
       import { WebpackRequireType } from "@moonlight-mod/types";

     

       2
       2
       -
       import { pageModules } from "..";

     

       3
       3
       -
       

     

       4
       4
       -
       export default (require: WebpackRequireType) => {

     

       5
       5
       -
         const React = require("common_react");

     

       6
       6
       -
         const spacepack = require("spacepack_spacepack").spacepack;

     

       7
       7
       -
       

     

       8
       8
       -
         const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       9
       9
       -
       

     

       10
       10
       -
         const { Divider } = spacepack.findByCode(".default.HEADER_BAR")[0].exports

     

       11
       11
       -
           .default;

     

       12
       12
       -
         const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0]

     

       13
       13
       -
           .exports;

     

       14
       14
       -
         const TabBarClasses = spacepack.findByCode("nowPlayingColumn:")[0].exports;

     

       15
       15
       -
       

     

       16
       16
       -
         const pages = pageModules(require);

     

       17
       17
       -
       

     

       18
       18
       -
         return function Moonbase() {

     

       19
       19
       -
           const { Text, TabBar } = require("common_components");

     

       20
       20
       -
       

     

       21
       21
       -
           const [selectedTab, setSelectedTab] = React.useState(Object.keys(pages)[0]);

     

       22
       22
       -
       

     

       23
       23
       -
           return (

     

       24
       24
       -
             <>

     

       25
       25
       -
               <div

     

       26
       26
       -
                 className={`${TitleBarClasses.children} ${Margins.marginBottom20}`}

     

       27
       27
       -
               >

     

       28
       28
       -
                 <Text

     

       29
       29
       -
                   className={TitleBarClasses.titleWrapper}

     

       30
       30
       -
                   variant="heading-lg/semibold"

     

       31
       31
       -
                   tag="h2"

     

       32
       32
       -
                 >

     

       33
       33
       -
                   Moonbase

     

       34
       34
       -
                 </Text>

     

       35
       35
       -
                 <Divider />

     

       36
       36
       -
                 <TabBar

     

       37
       37
       -
                   selectedItem={selectedTab}

     

       38
       38
       -
                   onItemSelect={setSelectedTab}

     

       39
       39
       -
                   type="top-pill"

     

       40
       40
       -
                   className={TabBarClasses.tabBar}

     

       41
       41
       -
                 >

     

       42
       42
       -
                   {Object.entries(pages).map(([id, page]) => (

     

       43
       43
       -
                     <TabBar.Item key={id} id={id} className={TabBarClasses.item}>

     

       44
       44
       -
                       {page.name}

     

       45
       45
       -
                     </TabBar.Item>

     

       46
       46
       -
                   ))}

     

       47
       47
       -
                 </TabBar>

     

       48
       48
       -
               </div>

     

       49
       49
       -
       

     

       50
       50
       -
               {React.createElement(pages[selectedTab].element)}

     

       51
       51
       -
             </>

     

       52
       52
       -
           );

     

       53
       53
       -
         };

     

       54
       54
       -
       };

+51

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

···

       1
       1
       +
       import settings from "@moonlight-mod/wp/settings_settings";

     

       2
       2
       +
       import React from "@moonlight-mod/wp/common_react";

     

       3
       3
       +
       import spacepack from "@moonlight-mod/wp/spacepack_spacepack";

     

       4
       4
       +
       import { Moonbase, pages } from "@moonlight-mod/wp/moonbase_ui";

     

       5
       5
       +
       

     

       6
       6
       +
       import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";

     

       7
       7
       +
       import { Text } from "@moonlight-mod/wp/common_components";

     

       8
       8
       +
       

     

       9
       9
       +
       function addSection(name: string, element: React.FunctionComponent) {

     

       10
       10
       +
         settings.addSection(name, name, element, null, -2, {

     

       11
       11
       +
           stores: [MoonbaseSettingsStore],

     

       12
       12
       +
           element: () => {

     

       13
       13
       +
             // Require it here because lazy loading SUX

     

       14
       14
       +
             const SettingsNotice =

     

       15
       15
       +
               spacepack.findByCode("onSaveButtonColor")[0].exports.default;

     

       16
       16
       +
             return (

     

       17
       17
       +
               <SettingsNotice

     

       18
       18
       +
                 submitting={MoonbaseSettingsStore.submitting}

     

       19
       19
       +
                 onReset={() => {

     

       20
       20
       +
                   MoonbaseSettingsStore.reset();

     

       21
       21
       +
                 }}

     

       22
       22
       +
                 onSave={() => {

     

       23
       23
       +
                   MoonbaseSettingsStore.writeConfig();

     

       24
       24
       +
                 }}

     

       25
       25
       +
               />

     

       26
       26
       +
             );

     

       27
       27
       +
           }

     

       28
       28
       +
         });

     

       29
       29
       +
       }

     

       30
       30
       +
       

     

       31
       31
       +
       if (moonlight.getConfigOption<boolean>("moonbase", "sections")) {

     

       32
       32
       +
         const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       33
       33
       +
       

     

       34
       34
       +
         settings.addHeader("Moonbase", -2);

     

       35
       35
       +
         for (const page of Object.values(pages)) {

     

       36
       36
       +
           addSection(page.name, () => (

     

       37
       37
       +
             <>

     

       38
       38
       +
               <Text

     

       39
       39
       +
                 className={Margins.marginBottom20}

     

       40
       40
       +
                 variant="heading-lg/semibold"

     

       41
       41
       +
                 tag="h2"

     

       42
       42
       +
               >

     

       43
       43
       +
                 Extensions

     

       44
       44
       +
               </Text>

     

       45
       45
       +
               <page.element />

     

       46
       46
       +
             </>

     

       47
       47
       +
           ));

     

       48
       48
       +
         }

     

       49
       49
       +
       } else {

     

       50
       50
       +
         addSection("Moonbase", Moonbase);

     

       51
       51
       +
       }

+151

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

···

       1
       1
       +
       import { LogLevel } from "@moonlight-mod/types";

     

       2
       2
       +
       import { CircleXIconSVG } from "../../../types";

     

       3
       3
       +
       

     

       4
       4
       +
       const logLevels = Object.values(LogLevel).filter(

     

       5
       5
       +
         (v) => typeof v === "string"

     

       6
       6
       +
       ) as string[];

     

       7
       7
       +
       

     

       8
       8
       +
       import React from "@moonlight-mod/wp/common_react";

     

       9
       9
       +
       import spacepack from "@moonlight-mod/wp/spacepack_spacepack";

     

       10
       10
       +
       import {

     

       11
       11
       +
         FormDivider,

     

       12
       12
       +
         FormItem,

     

       13
       13
       +
         FormText,

     

       14
       14
       +
         FormSwitch,

     

       15
       15
       +
         TextInput,

     

       16
       16
       +
         Flex,

     

       17
       17
       +
         Button,

     

       18
       18
       +
         SingleSelect,

     

       19
       19
       +
         Tooltip,

     

       20
       20
       +
         Clickable

     

       21
       21
       +
       } from "@moonlight-mod/wp/common_components";

     

       22
       22
       +
       

     

       23
       23
       +
       import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";

     

       24
       24
       +
       

     

       25
       25
       +
       const FormClasses = spacepack.findByCode("dividerDefault:")[0].exports;

     

       26
       26
       +
       const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       27
       27
       +
       

     

       28
       28
       +
       const RemoveButtonClasses = spacepack.findByCode("removeButtonContainer")[0]

     

       29
       29
       +
         .exports;

     

       30
       30
       +
       const CircleXIcon = spacepack.findByCode(CircleXIconSVG)[0].exports.default;

     

       31
       31
       +
       function RemoveEntryButton({ onClick }: { onClick: () => void }) {

     

       32
       32
       +
         return (

     

       33
       33
       +
           <div className={RemoveButtonClasses.removeButtonContainer}>

     

       34
       34
       +
             <Tooltip text="Remove entry" position="top">

     

       35
       35
       +
               {(props: any) => (

     

       36
       36
       +
                 <Clickable

     

       37
       37
       +
                   {...props}

     

       38
       38
       +
                   className={RemoveButtonClasses.removeButton}

     

       39
       39
       +
                   onClick={onClick}

     

       40
       40
       +
                 >

     

       41
       41
       +
                   <CircleXIcon width={24} height={24} />

     

       42
       42
       +
                 </Clickable>

     

       43
       43
       +
               )}

     

       44
       44
       +
             </Tooltip>

     

       45
       45
       +
           </div>

     

       46
       46
       +
         );

     

       47
       47
       +
       }

     

       48
       48
       +
       

     

       49
       49
       +
       function ArrayFormItem({

     

       50
       50
       +
         config

     

       51
       51
       +
       }: {

     

       52
       52
       +
         config: "repositories" | "devSearchPaths";

     

       53
       53
       +
       }) {

     

       54
       54
       +
         const items = MoonbaseSettingsStore.getConfigOption(config) ?? [];

     

       55
       55
       +
         return (

     

       56
       56
       +
           <Flex

     

       57
       57
       +
             style={{

     

       58
       58
       +
               gap: "20px"

     

       59
       59
       +
             }}

     

       60
       60
       +
             direction={Flex.Direction.VERTICAL}

     

       61
       61
       +
           >

     

       62
       62
       +
             {items.map((val, i) => (

     

       63
       63
       +
               <div

     

       64
       64
       +
                 key={i}

     

       65
       65
       +
                 style={{

     

       66
       66
       +
                   display: "grid",

     

       67
       67
       +
                   height: "32px",

     

       68
       68
       +
                   gap: "8px",

     

       69
       69
       +
                   gridTemplateColumns: "1fr 32px",

     

       70
       70
       +
                   alignItems: "center"

     

       71
       71
       +
                 }}

     

       72
       72
       +
               >

     

       73
       73
       +
                 <TextInput

     

       74
       74
       +
                   size={TextInput.Sizes.DEFAULT}

     

       75
       75
       +
                   value={val}

     

       76
       76
       +
                   onChange={(newVal: string) => {

     

       77
       77
       +
                     items[i] = newVal;

     

       78
       78
       +
                     MoonbaseSettingsStore.setConfigOption(config, items);

     

       79
       79
       +
                   }}

     

       80
       80
       +
                 />

     

       81
       81
       +
                 <RemoveEntryButton

     

       82
       82
       +
                   onClick={() => {

     

       83
       83
       +
                     items.splice(i, 1);

     

       84
       84
       +
                     MoonbaseSettingsStore.setConfigOption(config, items);

     

       85
       85
       +
                   }}

     

       86
       86
       +
                 />

     

       87
       87
       +
               </div>

     

       88
       88
       +
             ))}

     

       89
       89
       +
       

     

       90
       90
       +
             <Button

     

       91
       91
       +
               look={Button.Looks.FILLED}

     

       92
       92
       +
               color={Button.Colors.GREEN}

     

       93
       93
       +
               size={Button.Sizes.SMALL}

     

       94
       94
       +
               style={{

     

       95
       95
       +
                 marginTop: "10px"

     

       96
       96
       +
               }}

     

       97
       97
       +
               onClick={() => {

     

       98
       98
       +
                 items.push("");

     

       99
       99
       +
                 MoonbaseSettingsStore.setConfigOption(config, items);

     

       100
       100
       +
               }}

     

       101
       101
       +
             >

     

       102
       102
       +
               Add new entry

     

       103
       103
       +
             </Button>

     

       104
       104
       +
           </Flex>

     

       105
       105
       +
         );

     

       106
       106
       +
       }

     

       107
       107
       +
       

     

       108
       108
       +
       export default function ConfigPage() {

     

       109
       109
       +
         return (

     

       110
       110
       +
           <>

     

       111
       111
       +
             <FormItem title="Repositories">

     

       112
       112
       +
               <FormText className={Margins.marginBottom4}>

     

       113
       113
       +
                 A list of remote repositories to display extensions from

     

       114
       114
       +
               </FormText>

     

       115
       115
       +
               <ArrayFormItem config="repositories" />

     

       116
       116
       +
             </FormItem>

     

       117
       117
       +
             <FormDivider className={FormClasses.dividerDefault} />

     

       118
       118
       +
             <FormItem title="Extension search paths" className={Margins.marginTop20}>

     

       119
       119
       +
               <FormText className={Margins.marginBottom4}>

     

       120
       120
       +
                 A list of local directories to search for built extensions

     

       121
       121
       +
               </FormText>

     

       122
       122
       +
               <ArrayFormItem config="devSearchPaths" />

     

       123
       123
       +
             </FormItem>

     

       124
       124
       +
             <FormDivider className={FormClasses.dividerDefault} />

     

       125
       125
       +
             <FormSwitch

     

       126
       126
       +
               className={Margins.marginTop20}

     

       127
       127
       +
               value={MoonbaseSettingsStore.getConfigOption("patchAll")}

     

       128
       128
       +
               onChange={(value: boolean) => {

     

       129
       129
       +
                 MoonbaseSettingsStore.setConfigOption("patchAll", value);

     

       130
       130
       +
               }}

     

       131
       131
       +
               note="Wraps every webpack module in a function, separating them in DevTools"

     

       132
       132
       +
             >

     

       133
       133
       +
               Patch all

     

       134
       134
       +
             </FormSwitch>

     

       135
       135
       +
             <FormItem title="Log level">

     

       136
       136
       +
               <SingleSelect

     

       137
       137
       +
                 autofocus={false}

     

       138
       138
       +
                 clearable={false}

     

       139
       139
       +
                 value={MoonbaseSettingsStore.getConfigOption("loggerLevel")}

     

       140
       140
       +
                 options={logLevels.map((o) => ({

     

       141
       141
       +
                   value: o.toLowerCase(),

     

       142
       142
       +
                   label: o[0] + o.slice(1).toLowerCase()

     

       143
       143
       +
                 }))}

     

       144
       144
       +
                 onChange={(v) =>

     

       145
       145
       +
                   MoonbaseSettingsStore.setConfigOption("loggerLevel", v)

     

       146
       146
       +
                 }

     

       147
       147
       +
               />

     

       148
       148
       +
             </FormItem>

     

       149
       149
       +
           </>

     

       150
       150
       +
         );

     

       151
       151
       +
       }

+218

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

···

       1
       1
       +
       import {

     

       2
       2
       +
         DangerIconSVG,

     

       3
       3
       +
         DownloadIconSVG,

     

       4
       4
       +
         ExtensionState,

     

       5
       5
       +
         TrashIconSVG

     

       6
       6
       +
       } from "../../../types";

     

       7
       7
       +
       import { ExtensionLoadSource } from "@moonlight-mod/types";

     

       8
       8
       +
       

     

       9
       9
       +
       import React from "@moonlight-mod/wp/common_react";

     

       10
       10
       +
       import spacepack from "@moonlight-mod/wp/spacepack_spacepack";

     

       11
       11
       +
       import CommonComponents from "@moonlight-mod/wp/common_components";

     

       12
       12
       +
       import * as Flux from "@moonlight-mod/wp/common_flux";

     

       13
       13
       +
       

     

       14
       14
       +
       import ExtensionInfo from "./info";

     

       15
       15
       +
       import Settings from "./settings";

     

       16
       16
       +
       

     

       17
       17
       +
       export enum ExtensionPage {

     

       18
       18
       +
         Info,

     

       19
       19
       +
         Description,

     

       20
       20
       +
         Settings

     

       21
       21
       +
       }

     

       22
       22
       +
       

     

       23
       23
       +
       import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";

     

       24
       24
       +
       

     

       25
       25
       +
       const UserProfileClasses = spacepack.findByCode(

     

       26
       26
       +
         "tabBarContainer",

     

       27
       27
       +
         "topSection"

     

       28
       28
       +
       )[0].exports;

     

       29
       29
       +
       

     

       30
       30
       +
       const DownloadIcon =

     

       31
       31
       +
         spacepack.findByCode(DownloadIconSVG)[0].exports.DownloadIcon;

     

       32
       32
       +
       const TrashIcon = spacepack.findByCode(TrashIconSVG)[0].exports.default;

     

       33
       33
       +
       const DangerIcon =

     

       34
       34
       +
         spacepack.findByCode(DangerIconSVG)[0].exports.CircleExclamationPointIcon;

     

       35
       35
       +
       

     

       36
       36
       +
       const PanelButton =

     

       37
       37
       +
         spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.default;

     

       38
       38
       +
       

     

       39
       39
       +
       export default function ExtensionCard({ id }: { id: string }) {

     

       40
       40
       +
         const [tab, setTab] = React.useState(ExtensionPage.Info);

     

       41
       41
       +
         const [restartNeeded, setRestartNeeded] = React.useState(false);

     

       42
       42
       +
       

     

       43
       43
       +
         const { ext, enabled, busy, update } = Flux.useStateFromStores(

     

       44
       44
       +
           [MoonbaseSettingsStore],

     

       45
       45
       +
           () => {

     

       46
       46
       +
             return {

     

       47
       47
       +
               ext: MoonbaseSettingsStore.getExtension(id),

     

       48
       48
       +
               enabled: MoonbaseSettingsStore.getExtensionEnabled(id),

     

       49
       49
       +
               busy: MoonbaseSettingsStore.busy,

     

       50
       50
       +
               update: MoonbaseSettingsStore.getExtensionUpdate(id)

     

       51
       51
       +
             };

     

       52
       52
       +
           }

     

       53
       53
       +
         );

     

       54
       54
       +
       

     

       55
       55
       +
         // Why it work like that :sob:

     

       56
       56
       +
         if (ext == null) return <></>;

     

       57
       57
       +
       

     

       58
       58
       +
         const {

     

       59
       59
       +
           Card,

     

       60
       60
       +
           CardClasses,

     

       61
       61
       +
           Flex,

     

       62
       62
       +
           Text,

     

       63
       63
       +
           MarkdownParser,

     

       64
       64
       +
           Switch,

     

       65
       65
       +
           TabBar,

     

       66
       66
       +
           Button

     

       67
       67
       +
         } = CommonComponents;

     

       68
       68
       +
       

     

       69
       69
       +
         const tagline = ext.manifest?.meta?.tagline;

     

       70
       70
       +
         const settings = ext.manifest?.settings;

     

       71
       71
       +
         const description = ext.manifest?.meta?.description;

     

       72
       72
       +
       

     

       73
       73
       +
         return (

     

       74
       74
       +
           <Card editable={true} className={CardClasses.card}>

     

       75
       75
       +
             <div className={CardClasses.cardHeader}>

     

       76
       76
       +
               <Flex direction={Flex.Direction.VERTICAL}>

     

       77
       77
       +
                 <Flex direction={Flex.Direction.HORIZONTAL}>

     

       78
       78
       +
                   <Text variant="text-md/semibold">

     

       79
       79
       +
                     {ext.manifest?.meta?.name ?? ext.id}

     

       80
       80
       +
                   </Text>

     

       81
       81
       +
                 </Flex>

     

       82
       82
       +
       

     

       83
       83
       +
                 {tagline != null && (

     

       84
       84
       +
                   <Text variant="text-sm/normal">

     

       85
       85
       +
                     {MarkdownParser.parse(tagline)}

     

       86
       86
       +
                   </Text>

     

       87
       87
       +
                 )}

     

       88
       88
       +
               </Flex>

     

       89
       89
       +
       

     

       90
       90
       +
               <Flex

     

       91
       91
       +
                 direction={Flex.Direction.HORIZONTAL}

     

       92
       92
       +
                 align={Flex.Align.END}

     

       93
       93
       +
                 justify={Flex.Justify.END}

     

       94
       94
       +
               >

     

       95
       95
       +
                 {ext.state === ExtensionState.NotDownloaded ? (

     

       96
       96
       +
                   <Button

     

       97
       97
       +
                     color={Button.Colors.BRAND}

     

       98
       98
       +
                     submitting={busy}

     

       99
       99
       +
                     onClick={() => {

     

       100
       100
       +
                       MoonbaseSettingsStore.installExtension(id);

     

       101
       101
       +
                     }}

     

       102
       102
       +
                   >

     

       103
       103
       +
                     Install

     

       104
       104
       +
                   </Button>

     

       105
       105
       +
                 ) : (

     

       106
       106
       +
                   <div

     

       107
       107
       +
                     // too lazy to learn how <Flex /> works lmao

     

       108
       108
       +
                     style={{

     

       109
       109
       +
                       display: "flex",

     

       110
       110
       +
                       alignItems: "center",

     

       111
       111
       +
                       gap: "1rem"

     

       112
       112
       +
                     }}

     

       113
       113
       +
                   >

     

       114
       114
       +
                     {ext.source.type === ExtensionLoadSource.Normal && (

     

       115
       115
       +
                       <PanelButton

     

       116
       116
       +
                         icon={TrashIcon}

     

       117
       117
       +
                         tooltipText="Delete"

     

       118
       118
       +
                         onClick={() => {

     

       119
       119
       +
                           MoonbaseSettingsStore.deleteExtension(id);

     

       120
       120
       +
                         }}

     

       121
       121
       +
                       />

     

       122
       122
       +
                     )}

     

       123
       123
       +
       

     

       124
       124
       +
                     {update !== null && (

     

       125
       125
       +
                       <PanelButton

     

       126
       126
       +
                         icon={DownloadIcon}

     

       127
       127
       +
                         tooltipText="Update"

     

       128
       128
       +
                         onClick={() => {

     

       129
       129
       +
                           MoonbaseSettingsStore.installExtension(id);

     

       130
       130
       +
                         }}

     

       131
       131
       +
                       />

     

       132
       132
       +
                     )}

     

       133
       133
       +
       

     

       134
       134
       +
                     {restartNeeded && (

     

       135
       135
       +
                       <PanelButton

     

       136
       136
       +
                         icon={() => (

     

       137
       137
       +
                           <DangerIcon

     

       138
       138
       +
                             color={CommonComponents.tokens.colors.STATUS_DANGER}

     

       139
       139
       +
                           />

     

       140
       140
       +
                         )}

     

       141
       141
       +
                         onClick={() => window.location.reload()}

     

       142
       142
       +
                         tooltipText="You will need to reload/restart your client for this extension to work properly."

     

       143
       143
       +
                       />

     

       144
       144
       +
                     )}

     

       145
       145
       +
       

     

       146
       146
       +
                     <Switch

     

       147
       147
       +
                       checked={enabled}

     

       148
       148
       +
                       onChange={() => {

     

       149
       149
       +
                         setRestartNeeded(true);

     

       150
       150
       +
                         MoonbaseSettingsStore.setExtensionEnabled(id, !enabled);

     

       151
       151
       +
                       }}

     

       152
       152
       +
                     />

     

       153
       153
       +
                   </div>

     

       154
       154
       +
                 )}

     

       155
       155
       +
               </Flex>

     

       156
       156
       +
             </div>

     

       157
       157
       +
       

     

       158
       158
       +
             <div className={UserProfileClasses.body}>

     

       159
       159
       +
               {(description != null || settings != null) && (

     

       160
       160
       +
                 <div

     

       161
       161
       +
                   className={UserProfileClasses.tabBarContainer}

     

       162
       162
       +
                   style={{

     

       163
       163
       +
                     padding: "0 10px"

     

       164
       164
       +
                   }}

     

       165
       165
       +
                 >

     

       166
       166
       +
                   <TabBar

     

       167
       167
       +
                     selectedItem={tab}

     

       168
       168
       +
                     type="top"

     

       169
       169
       +
                     onItemSelect={setTab}

     

       170
       170
       +
                     className={UserProfileClasses.tabBar}

     

       171
       171
       +
                   >

     

       172
       172
       +
                     <TabBar.Item

     

       173
       173
       +
                       className={UserProfileClasses.tabBarItem}

     

       174
       174
       +
                       id={ExtensionPage.Info}

     

       175
       175
       +
                     >

     

       176
       176
       +
                       Info

     

       177
       177
       +
                     </TabBar.Item>

     

       178
       178
       +
       

     

       179
       179
       +
                     {description != null && (

     

       180
       180
       +
                       <TabBar.Item

     

       181
       181
       +
                         className={UserProfileClasses.tabBarItem}

     

       182
       182
       +
                         id={ExtensionPage.Description}

     

       183
       183
       +
                       >

     

       184
       184
       +
                         Description

     

       185
       185
       +
                       </TabBar.Item>

     

       186
       186
       +
                     )}

     

       187
       187
       +
       

     

       188
       188
       +
                     {settings != null && (

     

       189
       189
       +
                       <TabBar.Item

     

       190
       190
       +
                         className={UserProfileClasses.tabBarItem}

     

       191
       191
       +
                         id={ExtensionPage.Settings}

     

       192
       192
       +
                       >

     

       193
       193
       +
                         Settings

     

       194
       194
       +
                       </TabBar.Item>

     

       195
       195
       +
                     )}

     

       196
       196
       +
                   </TabBar>

     

       197
       197
       +
                 </div>

     

       198
       198
       +
               )}

     

       199
       199
       +
       

     

       200
       200
       +
               <Flex

     

       201
       201
       +
                 justify={Flex.Justify.START}

     

       202
       202
       +
                 wrap={Flex.Wrap.WRAP}

     

       203
       203
       +
                 style={{

     

       204
       204
       +
                   padding: "16px 16px"

     

       205
       205
       +
                 }}

     

       206
       206
       +
               >

     

       207
       207
       +
                 {tab === ExtensionPage.Info && <ExtensionInfo ext={ext} />}

     

       208
       208
       +
                 {tab === ExtensionPage.Description && (

     

       209
       209
       +
                   <Text variant="text-md/normal">

     

       210
       210
       +
                     {MarkdownParser.parse(description ?? "*No description*")}

     

       211
       211
       +
                   </Text>

     

       212
       212
       +
                 )}

     

       213
       213
       +
                 {tab === ExtensionPage.Settings && <Settings ext={ext} />}

     

       214
       214
       +
               </Flex>

     

       215
       215
       +
             </div>

     

       216
       216
       +
           </Card>

     

       217
       217
       +
         );

     

       218
       218
       +
       }

+373

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

···

       1
       1
       +
       import { tagNames } from "./info";

     

       2
       2
       +
       import {

     

       3
       3
       +
         ArrowsUpDownIconSVG,

     

       4
       4
       +
         ChevronSmallDownIconSVG,

     

       5
       5
       +
         ChevronSmallUpIconSVG

     

       6
       6
       +
       } from "../../../types";

     

       7
       7
       +
       

     

       8
       8
       +
       import spacepack from "@moonlight-mod/wp/spacepack_spacepack";

     

       9
       9
       +
       import React from "@moonlight-mod/wp/common_react";

     

       10
       10
       +
       import * as Flux from "@moonlight-mod/wp/common_flux";

     

       11
       11
       +
       import { WindowStore } from "@moonlight-mod/wp/common_stores";

     

       12
       12
       +
       import {

     

       13
       13
       +
         Button,

     

       14
       14
       +
         Text,

     

       15
       15
       +
         Heading,

     

       16
       16
       +
         Popout,

     

       17
       17
       +
         Dialog,

     

       18
       18
       +
         Menu,

     

       19
       19
       +
         MenuGroup,

     

       20
       20
       +
         MenuCheckboxItem,

     

       21
       21
       +
         MenuItem

     

       22
       22
       +
       } from "@moonlight-mod/wp/common_components";

     

       23
       23
       +
       

     

       24
       24
       +
       export enum Filter {

     

       25
       25
       +
         Core = 1 << 0,

     

       26
       26
       +
         Normal = 1 << 1,

     

       27
       27
       +
         Developer = 1 << 2,

     

       28
       28
       +
         Enabled = 1 << 3,

     

       29
       29
       +
         Disabled = 1 << 4,

     

       30
       30
       +
         Installed = 1 << 5,

     

       31
       31
       +
         Repository = 1 << 6

     

       32
       32
       +
       }

     

       33
       33
       +
       export const defaultFilter = ~(~0 << 7);

     

       34
       34
       +
       

     

       35
       35
       +
       const channelModule =

     

       36
       36
       +
         spacepack.require.m[

     

       37
       37
       +
           spacepack.findByCode(

     

       38
       38
       +
             '"Missing channel in Channel.openChannelContextMenu"'

     

       39
       39
       +
           )[0].id

     

       40
       40
       +
         ].toString();

     

       41
       41
       +
       const moduleId = channelModule.match(/webpackId:"(.+?)"/)![1];

     

       42
       42
       +
       const modPromise = spacepack.require.el(moduleId);

     

       43
       43
       +
       

     

       44
       44
       +
       const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       45
       45
       +
       const SortMenuClasses = spacepack.findByCode("container:", "clearText:")[0]

     

       46
       46
       +
         .exports;

     

       47
       47
       +
       const FilterDialogClasses = spacepack.findByCode(

     

       48
       48
       +
         "countContainer:",

     

       49
       49
       +
         "tagContainer:"

     

       50
       50
       +
       )[0].exports;

     

       51
       51
       +
       const FilterBarClasses = spacepack.findByCode("tagsButtonWithCount:")[0]

     

       52
       52
       +
         .exports;

     

       53
       53
       +
       

     

       54
       54
       +
       const TagItem = spacepack.findByCode("IncreasedActivityForumTagPill:")[0]

     

       55
       55
       +
         .exports.default;

     

       56
       56
       +
       

     

       57
       57
       +
       const ChevronSmallDownIcon = spacepack.findByCode(ChevronSmallDownIconSVG)[0]

     

       58
       58
       +
         .exports.default;

     

       59
       59
       +
       const ChevronSmallUpIcon = spacepack.findByCode(ChevronSmallUpIconSVG)[0]

     

       60
       60
       +
         .exports.default;

     

       61
       61
       +
       let ArrowsUpDownIcon: React.FunctionComponent;

     

       62
       62
       +
       

     

       63
       63
       +
       function toggleTag(

     

       64
       64
       +
         selectedTags: Set<string>,

     

       65
       65
       +
         setSelectedTags: (tags: Set<string>) => void,

     

       66
       66
       +
         tag: string

     

       67
       67
       +
       ) {

     

       68
       68
       +
         const newState = new Set(selectedTags);

     

       69
       69
       +
         if (newState.has(tag)) newState.delete(tag);

     

       70
       70
       +
         else newState.add(tag);

     

       71
       71
       +
         setSelectedTags(newState);

     

       72
       72
       +
       }

     

       73
       73
       +
       

     

       74
       74
       +
       function FilterButtonPopout({

     

       75
       75
       +
         filter,

     

       76
       76
       +
         setFilter,

     

       77
       77
       +
         closePopout

     

       78
       78
       +
       }: {

     

       79
       79
       +
         filter: Filter;

     

       80
       80
       +
         setFilter: (filter: Filter) => void;

     

       81
       81
       +
         closePopout: () => void;

     

       82
       82
       +
       }) {

     

       83
       83
       +
         const toggleFilter = (set: Filter) =>

     

       84
       84
       +
           setFilter(filter & set ? filter & ~set : filter | set);

     

       85
       85
       +
       

     

       86
       86
       +
         return (

     

       87
       87
       +
           <div className={SortMenuClasses.container}>

     

       88
       88
       +
             <Menu navId="sort-filter" hideScrollbar={true} onClose={closePopout}>

     

       89
       89
       +
               <MenuGroup label="Type">

     

       90
       90
       +
                 <MenuCheckboxItem

     

       91
       91
       +
                   id="t-core"

     

       92
       92
       +
                   label="Core"

     

       93
       93
       +
                   checked={filter & Filter.Core}

     

       94
       94
       +
                   action={() => toggleFilter(Filter.Core)}

     

       95
       95
       +
                 />

     

       96
       96
       +
                 <MenuCheckboxItem

     

       97
       97
       +
                   id="t-normal"

     

       98
       98
       +
                   label="Normal"

     

       99
       99
       +
                   checked={filter & Filter.Normal}

     

       100
       100
       +
                   action={() => toggleFilter(Filter.Normal)}

     

       101
       101
       +
                 />

     

       102
       102
       +
                 <MenuCheckboxItem

     

       103
       103
       +
                   id="t-developer"

     

       104
       104
       +
                   label="Developer"

     

       105
       105
       +
                   checked={filter & Filter.Developer}

     

       106
       106
       +
                   action={() => toggleFilter(Filter.Developer)}

     

       107
       107
       +
                 />

     

       108
       108
       +
               </MenuGroup>

     

       109
       109
       +
               <MenuGroup label="State">

     

       110
       110
       +
                 <MenuCheckboxItem

     

       111
       111
       +
                   id="s-enabled"

     

       112
       112
       +
                   label="Enabled"

     

       113
       113
       +
                   checked={filter & Filter.Enabled}

     

       114
       114
       +
                   action={() => toggleFilter(Filter.Enabled)}

     

       115
       115
       +
                 />

     

       116
       116
       +
                 <MenuCheckboxItem

     

       117
       117
       +
                   id="s-disabled"

     

       118
       118
       +
                   label="Disabled"

     

       119
       119
       +
                   checked={filter & Filter.Disabled}

     

       120
       120
       +
                   action={() => toggleFilter(Filter.Disabled)}

     

       121
       121
       +
                 />

     

       122
       122
       +
               </MenuGroup>

     

       123
       123
       +
               <MenuGroup label="Location">

     

       124
       124
       +
                 <MenuCheckboxItem

     

       125
       125
       +
                   id="l-installed"

     

       126
       126
       +
                   label="Installed"

     

       127
       127
       +
                   checked={filter & Filter.Installed}

     

       128
       128
       +
                   action={() => toggleFilter(Filter.Installed)}

     

       129
       129
       +
                 />

     

       130
       130
       +
                 <MenuCheckboxItem

     

       131
       131
       +
                   id="l-repository"

     

       132
       132
       +
                   label="Repository"

     

       133
       133
       +
                   checked={filter & Filter.Repository}

     

       134
       134
       +
                   action={() => toggleFilter(Filter.Repository)}

     

       135
       135
       +
                 />

     

       136
       136
       +
               </MenuGroup>

     

       137
       137
       +
               <MenuGroup>

     

       138
       138
       +
                 <MenuItem

     

       139
       139
       +
                   id="reset-all"

     

       140
       140
       +
                   className={SortMenuClasses.clearText}

     

       141
       141
       +
                   label={

     

       142
       142
       +
                     <Text variant="text-sm/medium" color="none">

     

       143
       143
       +
                       Reset to default

     

       144
       144
       +
                     </Text>

     

       145
       145
       +
                   }

     

       146
       146
       +
                   action={() => {

     

       147
       147
       +
                     setFilter(defaultFilter);

     

       148
       148
       +
                     closePopout();

     

       149
       149
       +
                   }}

     

       150
       150
       +
                 />

     

       151
       151
       +
               </MenuGroup>

     

       152
       152
       +
             </Menu>

     

       153
       153
       +
           </div>

     

       154
       154
       +
         );

     

       155
       155
       +
       }

     

       156
       156
       +
       

     

       157
       157
       +
       function TagButtonPopout({

     

       158
       158
       +
         selectedTags,

     

       159
       159
       +
         setSelectedTags,

     

       160
       160
       +
         setPopoutRef,

     

       161
       161
       +
         closePopout

     

       162
       162
       +
       }: any) {

     

       163
       163
       +
         return (

     

       164
       164
       +
           <Dialog ref={setPopoutRef} className={FilterDialogClasses.container}>

     

       165
       165
       +
             <div className={FilterDialogClasses.header}>

     

       166
       166
       +
               <div className={FilterDialogClasses.headerLeft}>

     

       167
       167
       +
                 <Heading

     

       168
       168
       +
                   color="interactive-normal"

     

       169
       169
       +
                   variant="text-xs/bold"

     

       170
       170
       +
                   className={FilterDialogClasses.headerText}

     

       171
       171
       +
                 >

     

       172
       172
       +
                   Select tags

     

       173
       173
       +
                 </Heading>

     

       174
       174
       +
                 <div className={FilterDialogClasses.countContainer}>

     

       175
       175
       +
                   <Text

     

       176
       176
       +
                     className={FilterDialogClasses.countText}

     

       177
       177
       +
                     color="none"

     

       178
       178
       +
                     variant="text-xs/medium"

     

       179
       179
       +
                   >

     

       180
       180
       +
                     {selectedTags.size}

     

       181
       181
       +
                   </Text>

     

       182
       182
       +
                 </div>

     

       183
       183
       +
               </div>

     

       184
       184
       +
             </div>

     

       185
       185
       +
             <div className={FilterDialogClasses.tagContainer}>

     

       186
       186
       +
               {Object.keys(tagNames).map((tag) => (

     

       187
       187
       +
                 <TagItem

     

       188
       188
       +
                   key={tag}

     

       189
       189
       +
                   className={FilterDialogClasses.tag}

     

       190
       190
       +
                   tag={{ name: tagNames[tag as keyof typeof tagNames] }}

     

       191
       191
       +
                   onClick={() => toggleTag(selectedTags, setSelectedTags, tag)}

     

       192
       192
       +
                   selected={selectedTags.has(tag)}

     

       193
       193
       +
                 />

     

       194
       194
       +
               ))}

     

       195
       195
       +
             </div>

     

       196
       196
       +
             <div className={FilterDialogClasses.separator} />

     

       197
       197
       +
             <Button

     

       198
       198
       +
               look={Button.Looks.LINK}

     

       199
       199
       +
               size={Button.Sizes.MIN}

     

       200
       200
       +
               color={Button.Colors.CUSTOM}

     

       201
       201
       +
               className={FilterDialogClasses.clear}

     

       202
       202
       +
               onClick={() => {

     

       203
       203
       +
                 setSelectedTags(new Set());

     

       204
       204
       +
                 closePopout();

     

       205
       205
       +
               }}

     

       206
       206
       +
             >

     

       207
       207
       +
               <Text variant="text-sm/medium" color="text-link">

     

       208
       208
       +
                 Clear all

     

       209
       209
       +
               </Text>

     

       210
       210
       +
             </Button>

     

       211
       211
       +
           </Dialog>

     

       212
       212
       +
         );

     

       213
       213
       +
       }

     

       214
       214
       +
       

     

       215
       215
       +
       function FilterBar({

     

       216
       216
       +
         filter,

     

       217
       217
       +
         setFilter,

     

       218
       218
       +
         selectedTags,

     

       219
       219
       +
         setSelectedTags

     

       220
       220
       +
       }: {

     

       221
       221
       +
         filter: Filter;

     

       222
       222
       +
         setFilter: (filter: Filter) => void;

     

       223
       223
       +
         selectedTags: Set<string>;

     

       224
       224
       +
         setSelectedTags: (tags: Set<string>) => void;

     

       225
       225
       +
       }) {

     

       226
       226
       +
         const windowSize = Flux.useStateFromStores([WindowStore], () =>

     

       227
       227
       +
           WindowStore.windowSize()

     

       228
       228
       +
         );

     

       229
       229
       +
       

     

       230
       230
       +
         const tagsContainer = React.useRef<HTMLDivElement>(null);

     

       231
       231
       +
         const tagListInner = React.useRef<HTMLDivElement>(null);

     

       232
       232
       +
         const [tagsButtonOffset, setTagsButtonOffset] = React.useState(0);

     

       233
       233
       +
         React.useLayoutEffect(() => {

     

       234
       234
       +
           if (tagsContainer.current === null || tagListInner.current === null) return;

     

       235
       235
       +
           const { left: containerX, top: containerY } =

     

       236
       236
       +
             tagsContainer.current.getBoundingClientRect();

     

       237
       237
       +
           let offset = 0;

     

       238
       238
       +
           for (const child of tagListInner.current.children) {

     

       239
       239
       +
             const {

     

       240
       240
       +
               right: childX,

     

       241
       241
       +
               top: childY,

     

       242
       242
       +
               height

     

       243
       243
       +
             } = child.getBoundingClientRect();

     

       244
       244
       +
             if (childY - containerY > height) break;

     

       245
       245
       +
             const newOffset = childX - containerX;

     

       246
       246
       +
             if (newOffset > offset) {

     

       247
       247
       +
               offset = newOffset;

     

       248
       248
       +
             }

     

       249
       249
       +
           }

     

       250
       250
       +
           setTagsButtonOffset(offset);

     

       251
       251
       +
         }, [windowSize]);

     

       252
       252
       +
       

     

       253
       253
       +
         return (

     

       254
       254
       +
           <div

     

       255
       255
       +
             ref={tagsContainer}

     

       256
       256
       +
             style={{

     

       257
       257
       +
               paddingTop: "12px"

     

       258
       258
       +
             }}

     

       259
       259
       +
             className={`${FilterBarClasses.tagsContainer} ${Margins.marginBottom8}`}

     

       260
       260
       +
           >

     

       261
       261
       +
             <Popout

     

       262
       262
       +
               renderPopout={({ closePopout }: any) => (

     

       263
       263
       +
                 <FilterButtonPopout

     

       264
       264
       +
                   filter={filter}

     

       265
       265
       +
                   setFilter={setFilter}

     

       266
       266
       +
                   closePopout={closePopout}

     

       267
       267
       +
                 />

     

       268
       268
       +
               )}

     

       269
       269
       +
               position="bottom"

     

       270
       270
       +
               align="left"

     

       271
       271
       +
             >

     

       272
       272
       +
               {(props: any, { isShown }: { isShown: boolean }) => (

     

       273
       273
       +
                 <Button

     

       274
       274
       +
                   {...props}

     

       275
       275
       +
                   size={Button.Sizes.MIN}

     

       276
       276
       +
                   color={Button.Colors.CUSTOM}

     

       277
       277
       +
                   className={FilterBarClasses.sortDropdown}

     

       278
       278
       +
                   innerClassName={FilterBarClasses.sortDropdownInner}

     

       279
       279
       +
                 >

     

       280
       280
       +
                   <ArrowsUpDownIcon />

     

       281
       281
       +
                   <Text

     

       282
       282
       +
                     className={FilterBarClasses.sortDropdownText}

     

       283
       283
       +
                     variant="text-sm/medium"

     

       284
       284
       +
                     color="interactive-normal"

     

       285
       285
       +
                   >

     

       286
       286
       +
                     Sort & filter

     

       287
       287
       +
                   </Text>

     

       288
       288
       +
                   {isShown ? (

     

       289
       289
       +
                     <ChevronSmallUpIcon size={20} />

     

       290
       290
       +
                   ) : (

     

       291
       291
       +
                     <ChevronSmallDownIcon size={20} />

     

       292
       292
       +
                   )}

     

       293
       293
       +
                 </Button>

     

       294
       294
       +
               )}

     

       295
       295
       +
             </Popout>

     

       296
       296
       +
             <div className={FilterBarClasses.divider} />

     

       297
       297
       +
             <div className={FilterBarClasses.tagList}>

     

       298
       298
       +
               <div ref={tagListInner} className={FilterBarClasses.tagListInner}>

     

       299
       299
       +
                 {Object.keys(tagNames).map((tag) => (

     

       300
       300
       +
                   <TagItem

     

       301
       301
       +
                     key={tag}

     

       302
       302
       +
                     className={FilterBarClasses.tag}

     

       303
       303
       +
                     tag={{ name: tagNames[tag as keyof typeof tagNames] }}

     

       304
       304
       +
                     onClick={() => toggleTag(selectedTags, setSelectedTags, tag)}

     

       305
       305
       +
                     selected={selectedTags.has(tag)}

     

       306
       306
       +
                   />

     

       307
       307
       +
                 ))}

     

       308
       308
       +
               </div>

     

       309
       309
       +
             </div>

     

       310
       310
       +
             <Popout

     

       311
       311
       +
               renderPopout={({ setPopoutRef, closePopout }: any) => (

     

       312
       312
       +
                 <TagButtonPopout

     

       313
       313
       +
                   selectedTags={selectedTags}

     

       314
       314
       +
                   setSelectedTags={setSelectedTags}

     

       315
       315
       +
                   setPopoutRef={setPopoutRef}

     

       316
       316
       +
                   closePopout={closePopout}

     

       317
       317
       +
                 />

     

       318
       318
       +
               )}

     

       319
       319
       +
               position="bottom"

     

       320
       320
       +
               align="right"

     

       321
       321
       +
             >

     

       322
       322
       +
               {(props: any, { isShown }: { isShown: boolean }) => (

     

       323
       323
       +
                 <Button

     

       324
       324
       +
                   {...props}

     

       325
       325
       +
                   size={Button.Sizes.MIN}

     

       326
       326
       +
                   color={Button.Colors.CUSTOM}

     

       327
       327
       +
                   style={{

     

       328
       328
       +
                     left: tagsButtonOffset

     

       329
       329
       +
                   }}

     

       330
       330
       +
                   // TODO: Use Discord's class name utility

     

       331
       331
       +
                   className={`${FilterBarClasses.tagsButton} ${

     

       332
       332
       +
                     selectedTags.size > 0 ? FilterBarClasses.tagsButtonWithCount : ""

     

       333
       333
       +
                   }`}

     

       334
       334
       +
                   innerClassName={FilterBarClasses.tagsButtonInner}

     

       335
       335
       +
                 >

     

       336
       336
       +
                   {selectedTags.size > 0 ? (

     

       337
       337
       +
                     <div

     

       338
       338
       +
                       style={{ boxSizing: "content-box" }}

     

       339
       339
       +
                       className={FilterBarClasses.countContainer}

     

       340
       340
       +
                     >

     

       341
       341
       +
                       <Text

     

       342
       342
       +
                         className={FilterBarClasses.countText}

     

       343
       343
       +
                         color="none"

     

       344
       344
       +
                         variant="text-xs/medium"

     

       345
       345
       +
                       >

     

       346
       346
       +
                         {selectedTags.size}

     

       347
       347
       +
                       </Text>

     

       348
       348
       +
                     </div>

     

       349
       349
       +
                   ) : (

     

       350
       350
       +
                     <>All</>

     

       351
       351
       +
                   )}

     

       352
       352
       +
                   {isShown ? (

     

       353
       353
       +
                     <ChevronSmallUpIcon size={20} />

     

       354
       354
       +
                   ) : (

     

       355
       355
       +
                     <ChevronSmallDownIcon size={20} />

     

       356
       356
       +
                   )}

     

       357
       357
       +
                 </Button>

     

       358
       358
       +
               )}

     

       359
       359
       +
             </Popout>

     

       360
       360
       +
           </div>

     

       361
       361
       +
         );

     

       362
       362
       +
       }

     

       363
       363
       +
       

     

       364
       364
       +
       // TODO: spacepack lazy loading utils

     

       365
       365
       +
       export default React.lazy(() =>

     

       366
       366
       +
         modPromise.then(async () => {

     

       367
       367
       +
           await modPromise;

     

       368
       368
       +
           ArrowsUpDownIcon ??=

     

       369
       369
       +
             spacepack.findByCode(ArrowsUpDownIconSVG)[0].exports.default;

     

       370
       370
       +
       

     

       371
       371
       +
           return { default: FilterBar };

     

       372
       372
       +
         })

     

       373
       373
       +
       );

+104

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

···

       1
       1
       +
       import { ExtensionLoadSource, ExtensionTag } from "@moonlight-mod/types";

     

       2
       2
       +
       import { ExtensionState } from "../../../types";

     

       3
       3
       +
       import FilterBar, { Filter, defaultFilter } from "./filterBar";

     

       4
       4
       +
       import ExtensionCard from "./card";

     

       5
       5
       +
       

     

       6
       6
       +
       import React from "@moonlight-mod/wp/common_react";

     

       7
       7
       +
       import spacepack from "@moonlight-mod/wp/spacepack_spacepack";

     

       8
       8
       +
       import * as Flux from "@moonlight-mod/wp/common_flux";

     

       9
       9
       +
       

     

       10
       10
       +
       import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";

     

       11
       11
       +
       

     

       12
       12
       +
       const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       13
       13
       +
       const SearchBar = spacepack.findByCode("Messages.SEARCH", "hideSearchIcon")[0]

     

       14
       14
       +
         .exports.default;

     

       15
       15
       +
       

     

       16
       16
       +
       export default function ExtensionsPage() {

     

       17
       17
       +
         const { extensions, savedFilter } = Flux.useStateFromStoresObject(

     

       18
       18
       +
           [MoonbaseSettingsStore],

     

       19
       19
       +
           () => {

     

       20
       20
       +
             return {

     

       21
       21
       +
               extensions: MoonbaseSettingsStore.extensions,

     

       22
       22
       +
               savedFilter: MoonbaseSettingsStore.getExtensionConfig(

     

       23
       23
       +
                 "moonbase",

     

       24
       24
       +
                 "filter"

     

       25
       25
       +
               )

     

       26
       26
       +
             };

     

       27
       27
       +
           }

     

       28
       28
       +
         );

     

       29
       29
       +
       

     

       30
       30
       +
         const [query, setQuery] = React.useState("");

     

       31
       31
       +
       

     

       32
       32
       +
         let filter: Filter, setFilter: (filter: Filter) => void;

     

       33
       33
       +
         if (moonlight.getConfigOption<boolean>("moonbase", "saveFilter")) {

     

       34
       34
       +
           filter = savedFilter ?? defaultFilter;

     

       35
       35
       +
           setFilter = (filter) =>

     

       36
       36
       +
             MoonbaseSettingsStore.setExtensionConfig("moonbase", "filter", filter);

     

       37
       37
       +
         } else {

     

       38
       38
       +
           const state = React.useState(defaultFilter);

     

       39
       39
       +
           filter = state[0];

     

       40
       40
       +
           setFilter = state[1];

     

       41
       41
       +
         }

     

       42
       42
       +
         const [selectedTags, setSelectedTags] = React.useState(new Set<string>());

     

       43
       43
       +
         const sorted = Object.values(extensions).sort((a, b) => {

     

       44
       44
       +
           const aName = a.manifest.meta?.name ?? a.id;

     

       45
       45
       +
           const bName = b.manifest.meta?.name ?? b.id;

     

       46
       46
       +
           return aName.localeCompare(bName);

     

       47
       47
       +
         });

     

       48
       48
       +
       

     

       49
       49
       +
         const filtered = sorted.filter(

     

       50
       50
       +
           (ext) =>

     

       51
       51
       +
             (ext.manifest.meta?.name?.toLowerCase().includes(query) ||

     

       52
       52
       +
               ext.manifest.meta?.tagline?.toLowerCase().includes(query) ||

     

       53
       53
       +
               ext.manifest.meta?.description?.toLowerCase().includes(query)) &&

     

       54
       54
       +
             [...selectedTags.values()].every(

     

       55
       55
       +
               (tag) => ext.manifest.meta?.tags?.includes(tag as ExtensionTag)

     

       56
       56
       +
             ) &&

     

       57
       57
       +
             // This seems very bad, sorry

     

       58
       58
       +
             !(

     

       59
       59
       +
               (!(filter & Filter.Core) &&

     

       60
       60
       +
                 ext.source.type === ExtensionLoadSource.Core) ||

     

       61
       61
       +
               (!(filter & Filter.Normal) &&

     

       62
       62
       +
                 ext.source.type === ExtensionLoadSource.Normal) ||

     

       63
       63
       +
               (!(filter & Filter.Developer) &&

     

       64
       64
       +
                 ext.source.type === ExtensionLoadSource.Developer) ||

     

       65
       65
       +
               (!(filter & Filter.Enabled) &&

     

       66
       66
       +
                 MoonbaseSettingsStore.getExtensionEnabled(ext.id)) ||

     

       67
       67
       +
               (!(filter & Filter.Disabled) &&

     

       68
       68
       +
                 !MoonbaseSettingsStore.getExtensionEnabled(ext.id)) ||

     

       69
       69
       +
               (!(filter & Filter.Installed) &&

     

       70
       70
       +
                 ext.state !== ExtensionState.NotDownloaded) ||

     

       71
       71
       +
               (!(filter & Filter.Repository) &&

     

       72
       72
       +
                 ext.state === ExtensionState.NotDownloaded)

     

       73
       73
       +
             )

     

       74
       74
       +
         );

     

       75
       75
       +
       

     

       76
       76
       +
         return (

     

       77
       77
       +
           <>

     

       78
       78
       +
             <SearchBar

     

       79
       79
       +
               size={SearchBar.Sizes.MEDIUM}

     

       80
       80
       +
               query={query}

     

       81
       81
       +
               onChange={(v: string) => setQuery(v.toLowerCase())}

     

       82
       82
       +
               onClear={() => setQuery("")}

     

       83
       83
       +
               autoFocus={true}

     

       84
       84
       +
               autoComplete="off"

     

       85
       85
       +
               inputProps={{

     

       86
       86
       +
                 autoCapitalize: "none",

     

       87
       87
       +
                 autoCorrect: "off",

     

       88
       88
       +
                 spellCheck: "false"

     

       89
       89
       +
               }}

     

       90
       90
       +
             />

     

       91
       91
       +
             <React.Suspense fallback={<div className={Margins.marginBottom20}></div>}>

     

       92
       92
       +
               <FilterBar

     

       93
       93
       +
                 filter={filter}

     

       94
       94
       +
                 setFilter={setFilter}

     

       95
       95
       +
                 selectedTags={selectedTags}

     

       96
       96
       +
                 setSelectedTags={setSelectedTags}

     

       97
       97
       +
               />

     

       98
       98
       +
             </React.Suspense>

     

       99
       99
       +
             {filtered.map((ext) => (

     

       100
       100
       +
               <ExtensionCard id={ext.id} key={ext.id} />

     

       101
       101
       +
             ))}

     

       102
       102
       +
           </>

     

       103
       103
       +
         );

     

       104
       104
       +
       }

+200

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

···

       1
       1
       +
       import { ExtensionTag } from "@moonlight-mod/types";

     

       2
       2
       +
       import { MoonbaseExtension } from "../../../types";

     

       3
       3
       +
       

     

       4
       4
       +
       import React from "@moonlight-mod/wp/common_react";

     

       5
       5
       +
       import CommonComponents from "@moonlight-mod/wp/common_components";

     

       6
       6
       +
       import spacepack from "@moonlight-mod/wp/spacepack_spacepack";

     

       7
       7
       +
       

     

       8
       8
       +
       type Dependency = {

     

       9
       9
       +
         id: string;

     

       10
       10
       +
         type: DependencyType;

     

       11
       11
       +
       };

     

       12
       12
       +
       

     

       13
       13
       +
       enum DependencyType {

     

       14
       14
       +
         Dependency = "dependency",

     

       15
       15
       +
         Optional = "optional",

     

       16
       16
       +
         Incompatible = "incompatible"

     

       17
       17
       +
       }

     

       18
       18
       +
       

     

       19
       19
       +
       export const tagNames: Record<ExtensionTag, string> = {

     

       20
       20
       +
         [ExtensionTag.Accessibility]: "Accessibility",

     

       21
       21
       +
         [ExtensionTag.Appearance]: "Appearance",

     

       22
       22
       +
         [ExtensionTag.Chat]: "Chat",

     

       23
       23
       +
         [ExtensionTag.Commands]: "Commands",

     

       24
       24
       +
         [ExtensionTag.ContextMenu]: "Context Menu",

     

       25
       25
       +
         [ExtensionTag.DangerZone]: "Danger Zone",

     

       26
       26
       +
         [ExtensionTag.Development]: "Development",

     

       27
       27
       +
         [ExtensionTag.Fixes]: "Fixes",

     

       28
       28
       +
         [ExtensionTag.Fun]: "Fun",

     

       29
       29
       +
         [ExtensionTag.Markdown]: "Markdown",

     

       30
       30
       +
         [ExtensionTag.Voice]: "Voice",

     

       31
       31
       +
         [ExtensionTag.Privacy]: "Privacy",

     

       32
       32
       +
         [ExtensionTag.Profiles]: "Profiles",

     

       33
       33
       +
         [ExtensionTag.QualityOfLife]: "Quality of Life",

     

       34
       34
       +
         [ExtensionTag.Library]: "Library"

     

       35
       35
       +
       };

     

       36
       36
       +
       

     

       37
       37
       +
       const UserInfoClasses = spacepack.findByCode(

     

       38
       38
       +
         "infoScroller",

     

       39
       39
       +
         "userInfoSection",

     

       40
       40
       +
         "userInfoSectionHeader"

     

       41
       41
       +
       )[0].exports;

     

       42
       42
       +
       

     

       43
       43
       +
       import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";

     

       44
       44
       +
       

     

       45
       45
       +
       function InfoSection({

     

       46
       46
       +
         title,

     

       47
       47
       +
         children

     

       48
       48
       +
       }: {

     

       49
       49
       +
         title: string;

     

       50
       50
       +
         children: React.ReactNode;

     

       51
       51
       +
       }) {

     

       52
       52
       +
         return (

     

       53
       53
       +
           <div

     

       54
       54
       +
             style={{

     

       55
       55
       +
               marginRight: "1em"

     

       56
       56
       +
             }}

     

       57
       57
       +
           >

     

       58
       58
       +
             <CommonComponents.Text

     

       59
       59
       +
               variant="eyebrow"

     

       60
       60
       +
               className={UserInfoClasses.userInfoSectionHeader}

     

       61
       61
       +
             >

     

       62
       62
       +
               {title}

     

       63
       63
       +
             </CommonComponents.Text>

     

       64
       64
       +
       

     

       65
       65
       +
             <CommonComponents.Text variant="text-sm/normal">

     

       66
       66
       +
               {children}

     

       67
       67
       +
             </CommonComponents.Text>

     

       68
       68
       +
           </div>

     

       69
       69
       +
         );

     

       70
       70
       +
       }

     

       71
       71
       +
       

     

       72
       72
       +
       function Badge({

     

       73
       73
       +
         color,

     

       74
       74
       +
         children

     

       75
       75
       +
       }: {

     

       76
       76
       +
         color: string;

     

       77
       77
       +
         children: React.ReactNode;

     

       78
       78
       +
       }) {

     

       79
       79
       +
         return (

     

       80
       80
       +
           <span

     

       81
       81
       +
             style={{

     

       82
       82
       +
               borderRadius: ".1875rem",

     

       83
       83
       +
               padding: "0 0.275rem",

     

       84
       84
       +
               marginRight: "0.4em",

     

       85
       85
       +
               backgroundColor: color,

     

       86
       86
       +
               color: "#fff"

     

       87
       87
       +
             }}

     

       88
       88
       +
           >

     

       89
       89
       +
             {children}

     

       90
       90
       +
           </span>

     

       91
       91
       +
         );

     

       92
       92
       +
       }

     

       93
       93
       +
       

     

       94
       94
       +
       export default function ExtensionInfo({ ext }: { ext: MoonbaseExtension }) {

     

       95
       95
       +
         const authors = ext.manifest?.meta?.authors;

     

       96
       96
       +
         const tags = ext.manifest?.meta?.tags;

     

       97
       97
       +
         const version = ext.manifest?.version;

     

       98
       98
       +
       

     

       99
       99
       +
         const dependencies: Dependency[] = [];

     

       100
       100
       +
         if (ext.manifest.dependencies != null) {

     

       101
       101
       +
           dependencies.push(

     

       102
       102
       +
             ...ext.manifest.dependencies.map((dep) => ({

     

       103
       103
       +
               id: dep,

     

       104
       104
       +
               type: DependencyType.Dependency

     

       105
       105
       +
             }))

     

       106
       106
       +
           );

     

       107
       107
       +
         }

     

       108
       108
       +
       

     

       109
       109
       +
         if (ext.manifest.suggested != null) {

     

       110
       110
       +
           dependencies.push(

     

       111
       111
       +
             ...ext.manifest.suggested.map((dep) => ({

     

       112
       112
       +
               id: dep,

     

       113
       113
       +
               type: DependencyType.Optional

     

       114
       114
       +
             }))

     

       115
       115
       +
           );

     

       116
       116
       +
         }

     

       117
       117
       +
       

     

       118
       118
       +
         if (ext.manifest.incompatible != null) {

     

       119
       119
       +
           dependencies.push(

     

       120
       120
       +
             ...ext.manifest.incompatible.map((dep) => ({

     

       121
       121
       +
               id: dep,

     

       122
       122
       +
               type: DependencyType.Incompatible

     

       123
       123
       +
             }))

     

       124
       124
       +
           );

     

       125
       125
       +
         }

     

       126
       126
       +
       

     

       127
       127
       +
         return (

     

       128
       128
       +
           <>

     

       129
       129
       +
             {authors != null && (

     

       130
       130
       +
               <InfoSection title="Authors">

     

       131
       131
       +
                 {authors.map((author, i) => {

     

       132
       132
       +
                   const comma = i !== authors.length - 1 ? ", " : "";

     

       133
       133
       +
                   if (typeof author === "string") {

     

       134
       134
       +
                     return (

     

       135
       135
       +
                       <span key={i}>

     

       136
       136
       +
                         {author}

     

       137
       137
       +
                         {comma}

     

       138
       138
       +
                       </span>

     

       139
       139
       +
                     );

     

       140
       140
       +
                   } else {

     

       141
       141
       +
                     // TODO: resolve IDs

     

       142
       142
       +
                     return (

     

       143
       143
       +
                       <span key={i}>

     

       144
       144
       +
                         {author.name}

     

       145
       145
       +
                         {comma}

     

       146
       146
       +
                       </span>

     

       147
       147
       +
                     );

     

       148
       148
       +
                   }

     

       149
       149
       +
                 })}

     

       150
       150
       +
               </InfoSection>

     

       151
       151
       +
             )}

     

       152
       152
       +
       

     

       153
       153
       +
             {tags != null && (

     

       154
       154
       +
               <InfoSection title="Tags">

     

       155
       155
       +
                 {tags.map((tag, i) => {

     

       156
       156
       +
                   const name = tagNames[tag];

     

       157
       157
       +
       

     

       158
       158
       +
                   return (

     

       159
       159
       +
                     <Badge

     

       160
       160
       +
                       key={i}

     

       161
       161
       +
                       color={

     

       162
       162
       +
                         tag === ExtensionTag.DangerZone

     

       163
       163
       +
                           ? "var(--red-400)"

     

       164
       164
       +
                           : "var(--brand-500)"

     

       165
       165
       +
                       }

     

       166
       166
       +
                     >

     

       167
       167
       +
                       {name}

     

       168
       168
       +
                     </Badge>

     

       169
       169
       +
                   );

     

       170
       170
       +
                 })}

     

       171
       171
       +
               </InfoSection>

     

       172
       172
       +
             )}

     

       173
       173
       +
       

     

       174
       174
       +
             {dependencies.length > 0 && (

     

       175
       175
       +
               <InfoSection title="Dependencies">

     

       176
       176
       +
                 {dependencies.map((dep) => {

     

       177
       177
       +
                   const colors = {

     

       178
       178
       +
                     [DependencyType.Dependency]: "var(--brand-500)",

     

       179
       179
       +
                     [DependencyType.Optional]: "var(--orange-400)",

     

       180
       180
       +
                     [DependencyType.Incompatible]: "var(--red-400)"

     

       181
       181
       +
                   };

     

       182
       182
       +
                   const color = colors[dep.type];

     

       183
       183
       +
                   const name = MoonbaseSettingsStore.getExtensionName(dep.id);

     

       184
       184
       +
                   return (

     

       185
       185
       +
                     <Badge color={color} key={dep.id}>

     

       186
       186
       +
                       {name}

     

       187
       187
       +
                     </Badge>

     

       188
       188
       +
                   );

     

       189
       189
       +
                 })}

     

       190
       190
       +
               </InfoSection>

     

       191
       191
       +
             )}

     

       192
       192
       +
       

     

       193
       193
       +
             {version != null && (

     

       194
       194
       +
               <InfoSection title="Version">

     

       195
       195
       +
                 <span>{version}</span>

     

       196
       196
       +
               </InfoSection>

     

       197
       197
       +
             )}

     

       198
       198
       +
           </>

     

       199
       199
       +
         );

     

       200
       200
       +
       }

+398

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

···

       1
       1
       +
       import {

     

       2
       2
       +
         ExtensionSettingType,

     

       3
       3
       +
         ExtensionSettingsManifest,

     

       4
       4
       +
         MultiSelectSettingType,

     

       5
       5
       +
         NumberSettingType,

     

       6
       6
       +
         SelectOption,

     

       7
       7
       +
         SelectSettingType

     

       8
       8
       +
       } from "@moonlight-mod/types/config";

     

       9
       9
       +
       

     

       10
       10
       +
       import {

     

       11
       11
       +
         CircleXIconSVG,

     

       12
       12
       +
         ExtensionState,

     

       13
       13
       +
         MoonbaseExtension

     

       14
       14
       +
       } from "../../../types";

     

       15
       15
       +
       

     

       16
       16
       +
       import React from "@moonlight-mod/wp/common_react";

     

       17
       17
       +
       import CommonComponents from "@moonlight-mod/wp/common_components";

     

       18
       18
       +
       import * as Flux from "@moonlight-mod/wp/common_flux";

     

       19
       19
       +
       import spacepack from "@moonlight-mod/wp/spacepack_spacepack";

     

       20
       20
       +
       

     

       21
       21
       +
       type SettingsProps = {

     

       22
       22
       +
         ext: MoonbaseExtension;

     

       23
       23
       +
         name: string;

     

       24
       24
       +
         setting: ExtensionSettingsManifest;

     

       25
       25
       +
         disabled: boolean;

     

       26
       26
       +
       };

     

       27
       27
       +
       

     

       28
       28
       +
       type SettingsComponent = React.ComponentType<SettingsProps>;

     

       29
       29
       +
       

     

       30
       30
       +
       import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";

     

       31
       31
       +
       

     

       32
       32
       +
       const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       33
       33
       +
       

     

       34
       34
       +
       function useConfigEntry<T>(id: string, name: string) {

     

       35
       35
       +
         return Flux.useStateFromStores(

     

       36
       36
       +
           [MoonbaseSettingsStore],

     

       37
       37
       +
           () => {

     

       38
       38
       +
             return {

     

       39
       39
       +
               value: MoonbaseSettingsStore.getExtensionConfig<T>(id, name),

     

       40
       40
       +
               displayName: MoonbaseSettingsStore.getExtensionConfigName(id, name),

     

       41
       41
       +
               description: MoonbaseSettingsStore.getExtensionConfigDescription(

     

       42
       42
       +
                 id,

     

       43
       43
       +
                 name

     

       44
       44
       +
               )

     

       45
       45
       +
             };

     

       46
       46
       +
           },

     

       47
       47
       +
           [id, name]

     

       48
       48
       +
         );

     

       49
       49
       +
       }

     

       50
       50
       +
       

     

       51
       51
       +
       function Boolean({ ext, name, setting, disabled }: SettingsProps) {

     

       52
       52
       +
         const { FormSwitch } = CommonComponents;

     

       53
       53
       +
         const { value, displayName, description } = useConfigEntry<boolean>(

     

       54
       54
       +
           ext.id,

     

       55
       55
       +
           name

     

       56
       56
       +
         );

     

       57
       57
       +
       

     

       58
       58
       +
         return (

     

       59
       59
       +
           <FormSwitch

     

       60
       60
       +
             value={value ?? false}

     

       61
       61
       +
             hideBorder={true}

     

       62
       62
       +
             disabled={disabled}

     

       63
       63
       +
             onChange={(value: boolean) => {

     

       64
       64
       +
               MoonbaseSettingsStore.setExtensionConfig(ext.id, name, value);

     

       65
       65
       +
             }}

     

       66
       66
       +
             note={description}

     

       67
       67
       +
             className={`${Margins.marginReset} ${Margins.marginTop20}`}

     

       68
       68
       +
           >

     

       69
       69
       +
             {displayName}

     

       70
       70
       +
           </FormSwitch>

     

       71
       71
       +
         );

     

       72
       72
       +
       }

     

       73
       73
       +
       

     

       74
       74
       +
       function Number({ ext, name, setting, disabled }: SettingsProps) {

     

       75
       75
       +
         const { FormItem, FormText, Slider } = CommonComponents;

     

       76
       76
       +
         const { value, displayName, description } = useConfigEntry<number>(

     

       77
       77
       +
           ext.id,

     

       78
       78
       +
           name

     

       79
       79
       +
         );

     

       80
       80
       +
       

     

       81
       81
       +
         const castedSetting = setting as NumberSettingType;

     

       82
       82
       +
         const min = castedSetting.min ?? 0;

     

       83
       83
       +
         const max = castedSetting.max ?? 100;

     

       84
       84
       +
       

     

       85
       85
       +
         return (

     

       86
       86
       +
           <FormItem className={Margins.marginTop20} title={displayName}>

     

       87
       87
       +
             {description && <FormText>{description}</FormText>}

     

       88
       88
       +
             <Slider

     

       89
       89
       +
               initialValue={value ?? 0}

     

       90
       90
       +
               disabled={disabled}

     

       91
       91
       +
               minValue={castedSetting.min ?? 0}

     

       92
       92
       +
               maxValue={castedSetting.max ?? 100}

     

       93
       93
       +
               onValueChange={(value: number) => {

     

       94
       94
       +
                 const rounded = Math.max(min, Math.min(max, Math.round(value)));

     

       95
       95
       +
                 MoonbaseSettingsStore.setExtensionConfig(ext.id, name, rounded);

     

       96
       96
       +
               }}

     

       97
       97
       +
             />

     

       98
       98
       +
           </FormItem>

     

       99
       99
       +
         );

     

       100
       100
       +
       }

     

       101
       101
       +
       

     

       102
       102
       +
       function String({ ext, name, setting, disabled }: SettingsProps) {

     

       103
       103
       +
         const { FormItem, FormText, TextInput } = CommonComponents;

     

       104
       104
       +
         const { value, displayName, description } = useConfigEntry<string>(

     

       105
       105
       +
           ext.id,

     

       106
       106
       +
           name

     

       107
       107
       +
         );

     

       108
       108
       +
       

     

       109
       109
       +
         return (

     

       110
       110
       +
           <FormItem className={Margins.marginTop20} title={displayName}>

     

       111
       111
       +
             {description && (

     

       112
       112
       +
               <FormText className={Margins.marginBottom8}>{description}</FormText>

     

       113
       113
       +
             )}

     

       114
       114
       +
             <TextInput

     

       115
       115
       +
               value={value ?? ""}

     

       116
       116
       +
               onChange={(value: string) => {

     

       117
       117
       +
                 if (disabled) return;

     

       118
       118
       +
                 MoonbaseSettingsStore.setExtensionConfig(ext.id, name, value);

     

       119
       119
       +
               }}

     

       120
       120
       +
             />

     

       121
       121
       +
           </FormItem>

     

       122
       122
       +
         );

     

       123
       123
       +
       }

     

       124
       124
       +
       

     

       125
       125
       +
       function Select({ ext, name, setting, disabled }: SettingsProps) {

     

       126
       126
       +
         const { FormItem, FormText, SingleSelect } = CommonComponents;

     

       127
       127
       +
         const { value, displayName, description } = useConfigEntry<string>(

     

       128
       128
       +
           ext.id,

     

       129
       129
       +
           name

     

       130
       130
       +
         );

     

       131
       131
       +
       

     

       132
       132
       +
         const castedSetting = setting as SelectSettingType;

     

       133
       133
       +
         const options = castedSetting.options;

     

       134
       134
       +
       

     

       135
       135
       +
         return (

     

       136
       136
       +
           <FormItem className={Margins.marginTop20} title={displayName}>

     

       137
       137
       +
             {description && (

     

       138
       138
       +
               <FormText className={Margins.marginBottom8}>{description}</FormText>

     

       139
       139
       +
             )}

     

       140
       140
       +
             <SingleSelect

     

       141
       141
       +
               autofocus={false}

     

       142
       142
       +
               clearable={false}

     

       143
       143
       +
               value={value ?? ""}

     

       144
       144
       +
               options={options.map((o: SelectOption) =>

     

       145
       145
       +
                 typeof o === "string" ? { value: o, label: o } : o

     

       146
       146
       +
               )}

     

       147
       147
       +
               onChange={(value: string) => {

     

       148
       148
       +
                 if (disabled) return;

     

       149
       149
       +
                 MoonbaseSettingsStore.setExtensionConfig(ext.id, name, value);

     

       150
       150
       +
               }}

     

       151
       151
       +
             />

     

       152
       152
       +
           </FormItem>

     

       153
       153
       +
         );

     

       154
       154
       +
       }

     

       155
       155
       +
       

     

       156
       156
       +
       function MultiSelect({ ext, name, setting, disabled }: SettingsProps) {

     

       157
       157
       +
         const { FormItem, FormText, Select, useVariableSelect, multiSelect } =

     

       158
       158
       +
           CommonComponents;

     

       159
       159
       +
         const { value, displayName, description } = useConfigEntry<string | string[]>(

     

       160
       160
       +
           ext.id,

     

       161
       161
       +
           name

     

       162
       162
       +
         );

     

       163
       163
       +
       

     

       164
       164
       +
         const castedSetting = setting as MultiSelectSettingType;

     

       165
       165
       +
         const options = castedSetting.options;

     

       166
       166
       +
       

     

       167
       167
       +
         return (

     

       168
       168
       +
           <FormItem className={Margins.marginTop20} title={displayName}>

     

       169
       169
       +
             {description && (

     

       170
       170
       +
               <FormText className={Margins.marginBottom8}>{description}</FormText>

     

       171
       171
       +
             )}

     

       172
       172
       +
             <Select

     

       173
       173
       +
               autofocus={false}

     

       174
       174
       +
               clearable={false}

     

       175
       175
       +
               closeOnSelect={false}

     

       176
       176
       +
               options={options.map((o: SelectOption) =>

     

       177
       177
       +
                 typeof o === "string" ? { value: o, label: o } : o

     

       178
       178
       +
               )}

     

       179
       179
       +
               {...useVariableSelect({

     

       180
       180
       +
                 onSelectInteraction: multiSelect,

     

       181
       181
       +
                 value: new Set(Array.isArray(value) ? value : [value]),

     

       182
       182
       +
                 onChange: (value: string) => {

     

       183
       183
       +
                   if (disabled) return;

     

       184
       184
       +
                   MoonbaseSettingsStore.setExtensionConfig(

     

       185
       185
       +
                     ext.id,

     

       186
       186
       +
                     name,

     

       187
       187
       +
                     Array.from(value)

     

       188
       188
       +
                   );

     

       189
       189
       +
                 }

     

       190
       190
       +
               })}

     

       191
       191
       +
             />

     

       192
       192
       +
           </FormItem>

     

       193
       193
       +
         );

     

       194
       194
       +
       }

     

       195
       195
       +
       

     

       196
       196
       +
       const RemoveButtonClasses = spacepack.findByCode("removeButtonContainer")[0]

     

       197
       197
       +
         .exports;

     

       198
       198
       +
       const CircleXIcon = spacepack.findByCode(CircleXIconSVG)[0].exports.default;

     

       199
       199
       +
       function RemoveEntryButton({

     

       200
       200
       +
         onClick,

     

       201
       201
       +
         disabled

     

       202
       202
       +
       }: {

     

       203
       203
       +
         onClick: () => void;

     

       204
       204
       +
         disabled: boolean;

     

       205
       205
       +
       }) {

     

       206
       206
       +
         const { Tooltip, Clickable } = CommonComponents;

     

       207
       207
       +
         return (

     

       208
       208
       +
           <div className={RemoveButtonClasses.removeButtonContainer}>

     

       209
       209
       +
             <Tooltip text="Remove entry" position="top">

     

       210
       210
       +
               {(props: any) => (

     

       211
       211
       +
                 <Clickable

     

       212
       212
       +
                   {...props}

     

       213
       213
       +
                   className={RemoveButtonClasses.removeButton}

     

       214
       214
       +
                   onClick={onClick}

     

       215
       215
       +
                 >

     

       216
       216
       +
                   <CircleXIcon width={16} height={16} />

     

       217
       217
       +
                 </Clickable>

     

       218
       218
       +
               )}

     

       219
       219
       +
             </Tooltip>

     

       220
       220
       +
           </div>

     

       221
       221
       +
         );

     

       222
       222
       +
       }

     

       223
       223
       +
       

     

       224
       224
       +
       function List({ ext, name, setting, disabled }: SettingsProps) {

     

       225
       225
       +
         const { FormItem, FormText, TextInput, Button, Flex } = CommonComponents;

     

       226
       226
       +
         const { value, displayName, description } = useConfigEntry<string[]>(

     

       227
       227
       +
           ext.id,

     

       228
       228
       +
           name

     

       229
       229
       +
         );

     

       230
       230
       +
       

     

       231
       231
       +
         const entries = value ?? [];

     

       232
       232
       +
         const updateConfig = () =>

     

       233
       233
       +
           MoonbaseSettingsStore.setExtensionConfig(ext.id, name, entries);

     

       234
       234
       +
       

     

       235
       235
       +
         return (

     

       236
       236
       +
           <FormItem className={Margins.marginTop20} title={displayName}>

     

       237
       237
       +
             {description && (

     

       238
       238
       +
               <FormText className={Margins.marginBottom4}>{description}</FormText>

     

       239
       239
       +
             )}

     

       240
       240
       +
             <Flex direction={Flex.Direction.VERTICAL}>

     

       241
       241
       +
               {entries.map((val, i) => (

     

       242
       242
       +
                 // FIXME: stylesheets

     

       243
       243
       +
                 <div

     

       244
       244
       +
                   key={i}

     

       245
       245
       +
                   style={{

     

       246
       246
       +
                     display: "grid",

     

       247
       247
       +
                     height: "32px",

     

       248
       248
       +
                     gap: "8px",

     

       249
       249
       +
                     gridTemplateColumns: "1fr 32px",

     

       250
       250
       +
                     alignItems: "center"

     

       251
       251
       +
                   }}

     

       252
       252
       +
                 >

     

       253
       253
       +
                   <TextInput

     

       254
       254
       +
                     size={TextInput.Sizes.MINI}

     

       255
       255
       +
                     value={val}

     

       256
       256
       +
                     disabled={disabled}

     

       257
       257
       +
                     onChange={(newVal: string) => {

     

       258
       258
       +
                       entries[i] = newVal;

     

       259
       259
       +
                       updateConfig();

     

       260
       260
       +
                     }}

     

       261
       261
       +
                   />

     

       262
       262
       +
                   <RemoveEntryButton

     

       263
       263
       +
                     disabled={disabled}

     

       264
       264
       +
                     onClick={() => {

     

       265
       265
       +
                       entries.splice(i, 1);

     

       266
       266
       +
                       updateConfig();

     

       267
       267
       +
                     }}

     

       268
       268
       +
                   />

     

       269
       269
       +
                 </div>

     

       270
       270
       +
               ))}

     

       271
       271
       +
       

     

       272
       272
       +
               <Button

     

       273
       273
       +
                 look={Button.Looks.FILLED}

     

       274
       274
       +
                 color={Button.Colors.GREEN}

     

       275
       275
       +
                 size={Button.Sizes.SMALL}

     

       276
       276
       +
                 disabled={disabled}

     

       277
       277
       +
                 className={Margins.marginTop8}

     

       278
       278
       +
                 onClick={() => {

     

       279
       279
       +
                   entries.push("");

     

       280
       280
       +
                   updateConfig();

     

       281
       281
       +
                 }}

     

       282
       282
       +
               >

     

       283
       283
       +
                 Add new entry

     

       284
       284
       +
               </Button>

     

       285
       285
       +
             </Flex>

     

       286
       286
       +
           </FormItem>

     

       287
       287
       +
         );

     

       288
       288
       +
       }

     

       289
       289
       +
       

     

       290
       290
       +
       function Dictionary({ ext, name, setting, disabled }: SettingsProps) {

     

       291
       291
       +
         const { FormItem, FormText, TextInput, Button, Flex } = CommonComponents;

     

       292
       292
       +
         const { value, displayName, description } = useConfigEntry<

     

       293
       293
       +
           Record<string, string>

     

       294
       294
       +
         >(ext.id, name);

     

       295
       295
       +
       

     

       296
       296
       +
         const entries = Object.entries(value ?? {});

     

       297
       297
       +
         const updateConfig = () =>

     

       298
       298
       +
           MoonbaseSettingsStore.setExtensionConfig(

     

       299
       299
       +
             ext.id,

     

       300
       300
       +
             name,

     

       301
       301
       +
             Object.fromEntries(entries)

     

       302
       302
       +
           );

     

       303
       303
       +
       

     

       304
       304
       +
         return (

     

       305
       305
       +
           <FormItem className={Margins.marginTop20} title={displayName}>

     

       306
       306
       +
             {description && (

     

       307
       307
       +
               <FormText className={Margins.marginBottom4}>{description}</FormText>

     

       308
       308
       +
             )}

     

       309
       309
       +
             <Flex direction={Flex.Direction.VERTICAL}>

     

       310
       310
       +
               {entries.map(([key, val], i) => (

     

       311
       311
       +
                 // FIXME: stylesheets

     

       312
       312
       +
                 <div

     

       313
       313
       +
                   key={i}

     

       314
       314
       +
                   style={{

     

       315
       315
       +
                     display: "grid",

     

       316
       316
       +
                     height: "32px",

     

       317
       317
       +
                     gap: "8px",

     

       318
       318
       +
                     gridTemplateColumns: "1fr 1fr 32px",

     

       319
       319
       +
                     alignItems: "center"

     

       320
       320
       +
                   }}

     

       321
       321
       +
                 >

     

       322
       322
       +
                   <TextInput

     

       323
       323
       +
                     size={TextInput.Sizes.MINI}

     

       324
       324
       +
                     value={key}

     

       325
       325
       +
                     disabled={disabled}

     

       326
       326
       +
                     onChange={(newKey: string) => {

     

       327
       327
       +
                       entries[i][0] = newKey;

     

       328
       328
       +
                       updateConfig();

     

       329
       329
       +
                     }}

     

       330
       330
       +
                   />

     

       331
       331
       +
                   <TextInput

     

       332
       332
       +
                     size={TextInput.Sizes.MINI}

     

       333
       333
       +
                     value={val}

     

       334
       334
       +
                     disabled={disabled}

     

       335
       335
       +
                     onChange={(newValue: string) => {

     

       336
       336
       +
                       entries[i][1] = newValue;

     

       337
       337
       +
                       updateConfig();

     

       338
       338
       +
                     }}

     

       339
       339
       +
                   />

     

       340
       340
       +
                   <RemoveEntryButton

     

       341
       341
       +
                     disabled={disabled}

     

       342
       342
       +
                     onClick={() => {

     

       343
       343
       +
                       entries.splice(i, 1);

     

       344
       344
       +
                       updateConfig();

     

       345
       345
       +
                     }}

     

       346
       346
       +
                   />

     

       347
       347
       +
                 </div>

     

       348
       348
       +
               ))}

     

       349
       349
       +
       

     

       350
       350
       +
               <Button

     

       351
       351
       +
                 look={Button.Looks.FILLED}

     

       352
       352
       +
                 color={Button.Colors.GREEN}

     

       353
       353
       +
                 size={Button.Sizes.SMALL}

     

       354
       354
       +
                 className={Margins.marginTop8}

     

       355
       355
       +
                 disabled={disabled}

     

       356
       356
       +
                 onClick={() => {

     

       357
       357
       +
                   entries.push([`entry-${entries.length}`, ""]);

     

       358
       358
       +
                   updateConfig();

     

       359
       359
       +
                 }}

     

       360
       360
       +
               >

     

       361
       361
       +
                 Add new entry

     

       362
       362
       +
               </Button>

     

       363
       363
       +
             </Flex>

     

       364
       364
       +
           </FormItem>

     

       365
       365
       +
         );

     

       366
       366
       +
       }

     

       367
       367
       +
       

     

       368
       368
       +
       function Setting({ ext, name, setting, disabled }: SettingsProps) {

     

       369
       369
       +
         const elements: Partial<Record<ExtensionSettingType, SettingsComponent>> = {

     

       370
       370
       +
           [ExtensionSettingType.Boolean]: Boolean,

     

       371
       371
       +
           [ExtensionSettingType.Number]: Number,

     

       372
       372
       +
           [ExtensionSettingType.String]: String,

     

       373
       373
       +
           [ExtensionSettingType.Select]: Select,

     

       374
       374
       +
           [ExtensionSettingType.MultiSelect]: MultiSelect,

     

       375
       375
       +
           [ExtensionSettingType.List]: List,

     

       376
       376
       +
           [ExtensionSettingType.Dictionary]: Dictionary

     

       377
       377
       +
         };

     

       378
       378
       +
         const element = elements[setting.type];

     

       379
       379
       +
         if (element == null) return <></>;

     

       380
       380
       +
         return React.createElement(element, { ext, name, setting, disabled });

     

       381
       381
       +
       }

     

       382
       382
       +
       

     

       383
       383
       +
       export default function Settings({ ext }: { ext: MoonbaseExtension }) {

     

       384
       384
       +
         const { Flex } = CommonComponents;

     

       385
       385
       +
         return (

     

       386
       386
       +
           <Flex className="moonbase-settings" direction={Flex.Direction.VERTICAL}>

     

       387
       387
       +
             {Object.entries(ext.manifest.settings!).map(([name, setting]) => (

     

       388
       388
       +
               <Setting

     

       389
       389
       +
                 ext={ext}

     

       390
       390
       +
                 key={name}

     

       391
       391
       +
                 name={name}

     

       392
       392
       +
                 setting={setting}

     

       393
       393
       +
                 disabled={ext.state === ExtensionState.NotDownloaded}

     

       394
       394
       +
               />

     

       395
       395
       +
             ))}

     

       396
       396
       +
           </Flex>

     

       397
       397
       +
         );

     

       398
       398
       +
       }

+64

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

···

       1
       1
       +
       import React from "@moonlight-mod/wp/common_react";

     

       2
       2
       +
       import spacepack from "@moonlight-mod/wp/spacepack_spacepack";

     

       3
       3
       +
       import { Text, TabBar } from "@moonlight-mod/wp/common_components";

     

       4
       4
       +
       

     

       5
       5
       +
       import ExtensionsPage from "./extensions";

     

       6
       6
       +
       import ConfigPage from "./config";

     

       7
       7
       +
       

     

       8
       8
       +
       const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;

     

       9
       9
       +
       

     

       10
       10
       +
       const { Divider } = spacepack.findByCode(".default.HEADER_BAR")[0].exports

     

       11
       11
       +
         .default;

     

       12
       12
       +
       const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0]

     

       13
       13
       +
         .exports;

     

       14
       14
       +
       const TabBarClasses = spacepack.findByCode("nowPlayingColumn:")[0].exports;

     

       15
       15
       +
       

     

       16
       16
       +
       export const pages: Record<

     

       17
       17
       +
         string,

     

       18
       18
       +
         {

     

       19
       19
       +
           name: string;

     

       20
       20
       +
           element: React.FunctionComponent;

     

       21
       21
       +
         }

     

       22
       22
       +
       > = {

     

       23
       23
       +
         extensions: {

     

       24
       24
       +
           name: "Extensions",

     

       25
       25
       +
           element: ExtensionsPage

     

       26
       26
       +
         },

     

       27
       27
       +
         config: {

     

       28
       28
       +
           name: "Config",

     

       29
       29
       +
           element: ConfigPage

     

       30
       30
       +
         }

     

       31
       31
       +
       };

     

       32
       32
       +
       

     

       33
       33
       +
       export function Moonbase() {

     

       34
       34
       +
         const [selectedTab, setSelectedTab] = React.useState(Object.keys(pages)[0]);

     

       35
       35
       +
       

     

       36
       36
       +
         return (

     

       37
       37
       +
           <>

     

       38
       38
       +
             <div className={`${TitleBarClasses.children} ${Margins.marginBottom20}`}>

     

       39
       39
       +
               <Text

     

       40
       40
       +
                 className={TitleBarClasses.titleWrapper}

     

       41
       41
       +
                 variant="heading-lg/semibold"

     

       42
       42
       +
                 tag="h2"

     

       43
       43
       +
               >

     

       44
       44
       +
                 Moonbase

     

       45
       45
       +
               </Text>

     

       46
       46
       +
               <Divider />

     

       47
       47
       +
               <TabBar

     

       48
       48
       +
                 selectedItem={selectedTab}

     

       49
       49
       +
                 onItemSelect={setSelectedTab}

     

       50
       50
       +
                 type="top-pill"

     

       51
       51
       +
                 className={TabBarClasses.tabBar}

     

       52
       52
       +
               >

     

       53
       53
       +
                 {Object.entries(pages).map(([id, page]) => (

     

       54
       54
       +
                   <TabBar.Item key={id} id={id} className={TabBarClasses.item}>

     

       55
       55
       +
                     {page.name}

     

       56
       56
       +
                   </TabBar.Item>

     

       57
       57
       +
                 ))}

     

       58
       58
       +
               </TabBar>

     

       59
       59
       +
             </div>

     

       60
       60
       +
       

     

       61
       61
       +
             {React.createElement(pages[selectedTab].element)}

     

       62
       62
       +
           </>

     

       63
       63
       +
         );

     

       64
       64
       +
       }

packages/core-extensions/src/moonbase/wp.d.ts

···

       1
       1
       +
       declare module "@moonlight-mod/wp/moonbase_ui" {

     

       2
       2
       +
         export * from "core-extensions/src/moonbase/webpackModules/ui";

     

       3
       3
       +
       }

     

       4
       4
       +
       

     

       5
       5
       +
       declare module "@moonlight-mod/wp/moonbase_stores" {

     

       6
       6
       +
         export * from "core-extensions/src/moonbase/webpackModules/stores";

     

       7
       7
       +
       }

-1

packages/types/package.json

···

       10
       10
        
         },

     

       11
       11
        
         "dependencies": {

     

       12
       12
        
           "@types/flux": "^3.1.12",

     

       13
       13
       -
           "@types/node": "^20.6.2",

     

       14
       13
        
           "@types/react": "^18.2.22",

     

       15
       14
        
           "csstype": "^3.1.2",

     

       16
       15
        
           "standalone-electron-types": "^1.0.0"

+6 -5

packages/types/src/import.d.ts

···

       6
       6
        
       

     

       7
       7
        
       declare module "@moonlight-mod/wp/common_components" {

     

       8
       8
        
         import { CoreExtensions } from "@moonlight-mod/types";

     

       9
       9
       -
         const components: CoreExtensions.CommonComponents;

     

       10
       10
       -
         export default components;

     

       11
       11
       -
         export = components;

     

       9
       9
       +
         const CommonComponent: CoreExtensions.CommonComponents;

     

       10
       10
       +
         export = CommonComponent;

     

       12
       11
        
       }

     

       13
       12
        
       

     

       14
       13
        
       declare module "@moonlight-mod/wp/common_flux" {

     

       15
       14
        
         import { CoreExtensions } from "@moonlight-mod/types";

     

       16
       15
        
         const Flux: CoreExtensions.CommonFlux;

     

       17
       17
       -
         export default Flux;

     

       16
       16
       +
         // FIXME: This is wrong, the default export differs from the named exports.

     

       17
       17
       +
         export = Flux;

     

       18
       18
        
       }

     

       19
       19
        
       

     

       20
       20
        
       declare module "@moonlight-mod/wp/common_fluxDispatcher" {

     
···

       22
       22
        
         const Dispatcher: CoreExtensions.CommonFluxDispatcher;

     

       23
       23
        
         export default Dispatcher;

     

       24
       24
        
       }

     

       25
       25
       +
       

     

       26
       26
       +
       declare module "@moonlight-mod/wp/common_stores";

     

       25
       27
        
       

     

       26
       28
        
       declare module "@moonlight-mod/wp/common_react" {

     

       27
       29
        
         import React from "react";

     
···

       32
       34
        
         import { CoreExtensions } from "@moonlight-mod/types";

     

       33
       35
        
         export const Settings: CoreExtensions.Settings;

     

       34
       36
        
         export default Settings;

     

       35
       35
       -
         export = Settings;

     

       36
       37
        
       }

     

       37
       38
        
       

     

       38
       39
        
       declare module "@moonlight-mod/wp/markdown_markdown" {

-1

packages/types/src/index.ts

···

       1
       1
       -
       /// <reference types="node" />

     

       2
       1
        
       /// <reference types="standalone-electron-types" />

     

       3
       2
        
       /// <reference types="react" />

     

       4
       3
        
       /// <reference types="flux" />

-1

packages/types/tsconfig.json

···

       5
       5
        
           "esModuleInterop": true,

     

       6
       6
        
           "forceConsistentCasingInFileNames": true,

     

       7
       7
        
           "strict": true,

     

       8
       8
       -
           "skipLibCheck": true,

     

       9
       8
        
           "moduleResolution": "bundler",

     

       10
       9
        
           "jsx": "react",

     

       11
       10
        
           "declaration": true

-7

pnpm-lock.yaml

···

       80
       80
        
             '@types/flux':

     

       81
       81
        
               specifier: ^3.1.12

     

       82
       82
        
               version: 3.1.12

     

       83
       83
       -
             '@types/node':

     

       84
       84
       -
               specifier: ^20.6.2

     

       85
       85
       -
               version: 20.6.2

     

       86
       83
        
             '@types/react':

     

       87
       84
        
               specifier: ^18.2.22

     

       88
       85
        
               version: 18.2.22

     
···

       421
       418
        
       

     

       422
       419
        
         /@types/node@18.17.17:

     

       423
       420
        
           resolution: {integrity: sha512-cOxcXsQ2sxiwkykdJqvyFS+MLQPLvIdwh5l6gNg8qF6s+C7XSkEWOZjK+XhUZd+mYvHV/180g2cnCcIl4l06Pw==}

     

       424
       424
       -
           dev: false

     

       425
       425
       -
       

     

       426
       426
       -
         /@types/node@20.6.2:

     

       427
       427
       -
           resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==}

     

       428
       421
        
           dev: false

     

       429
       422
        
       

     

       430
       423
        
         /@types/prop-types@15.7.6:

-1

tsconfig.json

···

       5
       5
        
           "esModuleInterop": true,

     

       6
       6
        
           "forceConsistentCasingInFileNames": true,

     

       7
       7
        
           "strict": true,

     

       8
       8
       -
           "skipLibCheck": true,

     

       9
       8
        
           "moduleResolution": "bundler",

     

       10
       9
        
           "baseUrl": "./packages/",

     

       11
       10
        
           "jsx": "react",