commit 3abf2dfa4101653522ea712d99cd5da436549a07 · notnite.com/moonlight

+33 -42

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

···

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

     

       5
        
       

     

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

     

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

     

       8
        
       

     

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

     

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

     

       11
       -
           stores: [MoonbaseSettingsStore],

     

       12
       -
           element: () => {

     

       13
       -
             // Require it here because lazy loading SUX

     

       14
       -
             const SettingsNotice =

     

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

     

       16
       -
             return (

     

       17
       -
               <SettingsNotice

     

       18
       -
                 submitting={MoonbaseSettingsStore.submitting}

     

       19
       -
                 onReset={() => {

     

       20
       -
                   MoonbaseSettingsStore.reset();

     

       21
       -
                 }}

     

       22
       -
                 onSave={() => {

     

       23
       -
                   MoonbaseSettingsStore.writeConfig();

     

       24
       -
                 }}

     

       25
       -
               />

     

       26
       -
             );

     

       27
       -
           }

     

       28
       -
         });

     

       29
       -
       }

     

       30
        
       

     

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

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       33
        
       

     

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

     

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

     

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

     

       37
       -
             <>

     

       38
       -
               <Text

     

       39
       -
                 className={Margins.marginBottom20}

     

       40
       -
                 variant="heading-lg/semibold"

     

       41
       -
                 tag="h2"

     

       42
       -
               >

     

       43
       -
                 Extensions

     

       44
       -
               </Text>

     

       45
       -
               <page.element />

     

       46
       -
             </>

     

       47
       -
           ));

     

       48
       -
         }

     

       49
       -
       } else {

     

       50
       -
         addSection("Moonbase", Moonbase);

     

       51
       -
       }

···

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

     

       5
        
       

     

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

     

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

     

       8
        
       

     

       9
       +
       const { open } = spacepack.findByExports("setSection", "clearSubsection")[0]

     

       10
       +
         .exports.default;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       11
        
       

     

       12
       +
       settings.addSection("moonbase", "Moonbase", Moonbase, null, -2, {

     

       13
       +
         stores: [MoonbaseSettingsStore],

     

       14
       +
         element: () => {

     

       15
       +
           // Require it here because lazy loading SUX

     

       16
       +
           const SettingsNotice =

     

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

     

       18
       +
           return (

     

       19
       +
             <SettingsNotice

     

       20
       +
               submitting={MoonbaseSettingsStore.submitting}

     

       21
       +
               onReset={() => {

     

       22
       +
                 MoonbaseSettingsStore.reset();

     

       23
       +
               }}

     

       24
       +
               onSave={() => {

     

       25
       +
                 MoonbaseSettingsStore.writeConfig();

     

       26
       +
               }}

     

       27
       +
             />

     

       28
       +
           );

     

       29
       +
         }

     

       30
       +
       });

     

       31
        
       

     

       32
       +
       settings.addSectionMenuItems(

     

       33
       +
         "moonbase",

     

       34
       +
         ...pages.map((page, i) => (

     

       35
       +
           <MenuItem

     

       36
       +
             key={page.id}

     

       37
       +
             id={`moonbase-${page.id}`}

     

       38
       +
             label={page.name}

     

       39
       +
             action={() => open("moonbase", i)}

     

       40
       +
           />

     

       41
       +
         ))

     

       42
       +
       );

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0

+39 -16

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

···

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

     

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

     

       3
        
       import { Text, TabBar } from "@moonlight-mod/wp/common_components";

     

       0
        
       
     

       0
        
       
     

       4
        
       

     

       5
        
       import ExtensionsPage from "./extensions";

     

       6
        
       import ConfigPage from "./config";

     
···

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

     

       13
        
         .exports;

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       15
        
       

     

       16
       -
       export const pages: Record<

     

       17
       -
         string,

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       18
        
         {

     

       19
       -
           name: string;

     

       20
       -
           element: React.FunctionComponent;

     

       21
       -
         }

     

       22
       -
       > = {

     

       23
       -
         extensions: {

     

       24
        
           name: "Extensions",

     

       25
        
           element: ExtensionsPage

     

       26
        
         },

     

       27
       -
         config: {

     

       0
        
       
     

       28
        
           name: "Config",

     

       29
        
           element: ConfigPage

     

       30
        
         }

     

       31
       -
       };

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       32
        
       

     

       33
       -
       export function Moonbase() {

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       35
        
       

     

       36
        
         return (

     

       37
        
           <>

     
···

       45
        
               </Text>

     

       46
        
               <Divider />

     

       47
        
               <TabBar

     

       48
       -
                 selectedItem={selectedTab}

     

       49
       -
                 onItemSelect={setSelectedTab}

     

       50
        
                 type="top-pill"

     

       51
        
                 className={TabBarClasses.tabBar}

     

       52
        
               >

     

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

     

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

     

       55
        
                     {page.name}

     

       56
        
                   </TabBar.Item>

     

       57
        
                 ))}

     

       58
        
               </TabBar>

     

       59
        
             </div>

     

       60
        
       

     

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

     

       62
        
           </>

     

       63
        
         );

     

       64
        
       }

···

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

     

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

     

       3
        
       import { Text, TabBar } from "@moonlight-mod/wp/common_components";

     

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

     

       5
       +
       import { UserSettingsModalStore } from "@moonlight-mod/wp/common_stores";

     

       6
        
       

     

       7
        
       import ExtensionsPage from "./extensions";

     

       8
        
       import ConfigPage from "./config";

     
···

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

     

       15
        
         .exports;

     

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

     

       17
       +
       const { setSection, clearSubsection } = spacepack.findByExports(

     

       18
       +
         "setSection",

     

       19
       +
         "clearSubsection"

     

       20
       +
       )[0].exports.default;

     

       21
        
       

     

       22
       +
       export const pages: {

     

       23
       +
         id: string;

     

       24
       +
         name: string;

     

       25
       +
         element: React.FunctionComponent;

     

       26
       +
       }[] = [

     

       27
        
         {

     

       28
       +
           id: "extensions",

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       29
        
           name: "Extensions",

     

       30
        
           element: ExtensionsPage

     

       31
        
         },

     

       32
       +
         {

     

       33
       +
           id: "config",

     

       34
        
           name: "Config",

     

       35
        
           element: ConfigPage

     

       36
        
         }

     

       37
       +
       ];

     

       38
       +
       

     

       39
       +
       export function Moonbase(props: { initialTab?: number } = {}) {

     

       40
       +
         const subsection = Flux.useStateFromStores(

     

       41
       +
           [UserSettingsModalStore],

     

       42
       +
           () => UserSettingsModalStore.getSubsection() ?? 0

     

       43
       +
         );

     

       44
       +
         const setSubsection = React.useCallback(

     

       45
       +
           (to: string) => {

     

       46
       +
             if (subsection !== to) setSection("moonbase", to);

     

       47
       +
           },

     

       48
       +
           [subsection]

     

       49
       +
         );

     

       50
        
       

     

       51
       +
         React.useEffect(

     

       52
       +
           () => () => {

     

       53
       +
             // Normally there's an onSettingsClose prop you can set but we don't expose it and I don't care enough to add support for it right now

     

       54
       +
             clearSubsection("moonbase");

     

       55
       +
           },

     

       56
       +
           []

     

       57
       +
         );

     

       58
        
       

     

       59
        
         return (

     

       60
        
           <>

     
···

       68
        
               </Text>

     

       69
        
               <Divider />

     

       70
        
               <TabBar

     

       71
       +
                 selectedItem={subsection}

     

       72
       +
                 onItemSelect={setSubsection}

     

       73
        
                 type="top-pill"

     

       74
        
                 className={TabBarClasses.tabBar}

     

       75
        
               >

     

       76
       +
                 {pages.map((page, i) => (

     

       77
       +
                   <TabBar.Item key={page.id} id={i} className={TabBarClasses.item}>

     

       78
        
                     {page.name}

     

       79
        
                   </TabBar.Item>

     

       80
        
                 ))}

     

       81
        
               </TabBar>

     

       82
        
             </div>

     

       83
        
       

     

       84
       +
             {React.createElement(pages[subsection].element)}

     

       85
        
           </>

     

       86
        
         );

     

       87
        
       }

+9 -1

packages/core-extensions/src/settings/webpackModules/settings.ts

···

       6
        
       export const Settings: SettingsType = {

     

       7
        
         ourSections: [],

     

       8
        
         sectionNames: [],

     

       0
        
       
     

       9
        
       

     

       10
        
         addSection: (section, label, element, color = null, pos, notice) => {

     

       11
        
           const data: SettingsSection = {

     
···

       18
        
           };

     

       19
        
       

     

       20
        
           Settings.ourSections.push(data);

     

       21
       -
           Settings.sectionNames.push(label);

     

       22
        
           return data;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       23
        
         },

     

       24
        
       

     

       25
        
         addDivider: (pos = null) => {

···

       6
        
       export const Settings: SettingsType = {

     

       7
        
         ourSections: [],

     

       8
        
         sectionNames: [],

     

       9
       +
         sectionMenuItems: {},

     

       10
        
       

     

       11
        
         addSection: (section, label, element, color = null, pos, notice) => {

     

       12
        
           const data: SettingsSection = {

     
···

       19
        
           };

     

       20
        
       

     

       21
        
           Settings.ourSections.push(data);

     

       22
       +
           Settings.sectionNames.push(section);

     

       23
        
           return data;

     

       24
       +
         },

     

       25
       +
         addSectionMenuItems(section, ...newItems) {

     

       26
       +
           const data = Settings.ourSections.find((x) => x.section === section);

     

       27
       +
           if (!data || !("element" in data))

     

       28
       +
             throw new Error(`Could not find section "${section}"`);

     

       29
       +
           (Settings.sectionMenuItems[section] ??= []).push(...newItems);

     

       30
       +
           data._moonlight_submenu ??= () => Settings.sectionMenuItems[section];

     

       31
        
         },

     

       32
        
       

     

       33
        
         addDivider: (pos = null) => {

+4 -2

packages/types/src/coreExtensions.ts

···

       1
        
       import { FluxDefault, Store } from "./discord/common/Flux";

     

       2
        
       import { CommonComponents as CommonComponents_ } from "./coreExtensions/components";

     

       3
        
       import { Dispatcher } from "flux";

     

       4
       -
       import React from "react";

     

       5
        
       import {

     

       6
        
         WebpackModule,

     

       7
        
         WebpackModuleFunc,

     
···

       50
        
             element: React.FunctionComponent;

     

       51
        
             pos: number;

     

       52
        
             notice?: NoticeProps;

     

       53
       -
             _moonlight_submenu?: () => any;

     

       54
        
           };

     

       55
        
       

     

       56
        
       export type Settings = {

     

       57
        
         ourSections: SettingsSection[];

     

       58
        
         sectionNames: string[];

     

       0
        
       
     

       59
        
       

     

       60
        
         addSection: (

     

       61
        
           section: string,

     
···

       65
        
           pos?: number,

     

       66
        
           notice?: NoticeProps

     

       67
        
         ) => void;

     

       0
        
       
     

       68
        
       

     

       69
        
         addDivider: (pos: number | null) => void;

     

       70
        
         addHeader: (label: string, pos: number | null) => void;

···

       1
        
       import { FluxDefault, Store } from "./discord/common/Flux";

     

       2
        
       import { CommonComponents as CommonComponents_ } from "./coreExtensions/components";

     

       3
        
       import { Dispatcher } from "flux";

     

       4
       +
       import React, { ReactElement } from "react";

     

       5
        
       import {

     

       6
        
         WebpackModule,

     

       7
        
         WebpackModuleFunc,

     
···

       50
        
             element: React.FunctionComponent;

     

       51
        
             pos: number;

     

       52
        
             notice?: NoticeProps;

     

       53
       +
             _moonlight_submenu?: () => ReactElement | ReactElement[];

     

       54
        
           };

     

       55
        
       

     

       56
        
       export type Settings = {

     

       57
        
         ourSections: SettingsSection[];

     

       58
        
         sectionNames: string[];

     

       59
       +
         sectionMenuItems: Record<string, ReactElement[]>;

     

       60
        
       

     

       61
        
         addSection: (

     

       62
        
           section: string,

     
···

       66
        
           pos?: number,

     

       67
        
           notice?: NoticeProps

     

       68
        
         ) => void;

     

       69
       +
         addSectionMenuItems: (section: string, ...items: ReactElement[]) => void;

     

       70
        
       

     

       71
        
         addDivider: (pos: number | null) => void;

     

       72
        
         addHeader: (label: string, pos: number | null) => void;