commit 02f85ea4962a00fb7af4c065c1fa8978b6798d48 · notnite.com/moonlight

+50 -5

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

···

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

     

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

     

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

     

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

     

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

     

       4
       4
        
       

     

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

     

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

     

       7
       7
       +
       

     

       8
       8
       +
       export enum MoonbasePage {

     

       9
       9
       +
         Extensions = "extensions",

     

       10
       10
       +
         Config = "config"

     

       11
       11
       +
       }

     

       12
       12
       +
       

     

       13
       13
       +
       export const pageModules: (require: WebpackRequireType) => Record<

     

       14
       14
       +
         MoonbasePage,

     

       15
       15
       +
         {

     

       16
       16
       +
           name: string;

     

       17
       17
       +
           element: React.FunctionComponent;

     

       18
       18
       +
         }

     

       19
       19
       +
       > = (require) => ({

     

       20
       20
       +
         [MoonbasePage.Extensions]: {

     

       21
       21
       +
           name: "Extensions",

     

       22
       22
       +
           element: extensionsPage(require)

     

       23
       23
       +
         },

     

       24
       24
       +
         [MoonbasePage.Config]: {

     

       25
       25
       +
           name: "Config",

     

       26
       26
       +
           element: configPage(require)

     

       27
       27
       +
         }

     

       28
       28
       +
       });

     

       6
       29
        
       

     

       7
       30
        
       export const webpackModules: ExtensionWebExports["webpackModules"] = {

     

       8
       31
        
         stores: {

     
···

       55
       78
        
                 }

     

       56
       79
        
               });

     

       57
       80
        
             };

     

       58
       58
       -
             settings.addHeader("moonlight", -2);

     

       59
       59
       -
             addSection("Extensions", extensionsPage(require));

     

       60
       60
       -
             addSection("Config", configPage(require));

     

       81
       81
       +
       

     

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

     

       83
       83
       +
               const pages = pageModules(require);

     

       84
       84
       +
       

     

       85
       85
       +
               const { Text } = require("common_components");

     

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

     

       87
       87
       +
       

     

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

     

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

     

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

     

       91
       91
       +
                   <>

     

       92
       92
       +
                     <Text

     

       93
       93
       +
                       className={Margins.marginBottom20}

     

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

     

       95
       95
       +
                       tag="h2"

     

       96
       96
       +
                     >

     

       97
       97
       +
                       Extensions

     

       98
       98
       +
                     </Text>

     

       99
       99
       +
                     <page.element />

     

       100
       100
       +
                   </>

     

       101
       101
       +
                 ));

     

       102
       102
       +
               }

     

       103
       103
       +
             } else {

     

       104
       104
       +
               addSection("Moonbase", ui(require));

     

       105
       105
       +
             }

     

       61
       106
        
           }

     

       62
       107
        
         }

     

       63
       108
        
       };

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

···

       7
       7
        
         },

     

       8
       8
        
         "dependencies": ["spacepack", "settings", "common"],

     

       9
       9
        
         "settings": {

     

       10
       10
       +
           "sections": {

     

       11
       11
       +
             "displayName": "Split into sections",

     

       12
       12
       +
             "description": "Show the Moonbase tabs as separate sections",

     

       13
       13
       +
             "type": "boolean"

     

       14
       14
       +
           },

     

       10
       15
        
           "saveFilter": {

     

       11
       16
        
             "displayName": "Persist filter",

     

       12
       17
        
             "description": "Save extension filter in config",

+1 -10

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

···

       17
       17
        
           TextInput,

     

       18
       18
        
           Flex,

     

       19
       19
        
           Button,

     

       20
       20
       -
           SingleSelect,

     

       21
       21
       -
           Text

     

       20
       20
       +
           SingleSelect

     

       22
       21
        
         } = CommonComponents;

     

       23
       22
        
       

     

       24
       23
        
         const { MoonbaseSettingsStore } =

     
···

       111
       110
        
         return function ConfigPage() {

     

       112
       111
        
           return (

     

       113
       112
        
             <>

     

       114
       114
       -
               <Text

     

       115
       115
       -
                 className={Margins.marginBottom20}

     

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

     

       117
       117
       -
                 tag="h2"

     

       118
       118
       -
               >

     

       119
       119
       -
                 Config

     

       120
       120
       -
               </Text>

     

       121
       121
       -
       

     

       122
       113
        
               <FormItem title="Repositories">

     

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

     

       124
       115
        
                   A list of remote repositories to display extensions from

-8

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

···

       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
       -
         const { Text } = require("common_components");

     

       27
       26
        
       

     

       28
       27
        
         return function ExtensionsPage() {

     

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

     
···

       87
       86
        
       

     

       88
       87
        
           return (

     

       89
       88
        
             <>

     

       90
       90
       -
               <Text

     

       91
       91
       -
                 className={Margins.marginBottom20}

     

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

     

       93
       93
       -
                 tag="h2"

     

       94
       94
       -
               >

     

       95
       95
       -
                 Extensions

     

       96
       96
       -
               </Text>

     

       97
       89
        
               <SearchBar

     

       98
       90
        
                 size={SearchBar.Sizes.MEDIUM}

     

       99
       91
        
                 query={query}

+56

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

···

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

     

       2
       2
       +
       import { MoonbasePage, 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(

     

       22
       22
       +
             MoonbasePage.Extensions

     

       23
       23
       +
           );

     

       24
       24
       +
       

     

       25
       25
       +
           return (

     

       26
       26
       +
             <>

     

       27
       27
       +
               <div

     

       28
       28
       +
                 className={`${TitleBarClasses.children} ${Margins.marginBottom20}`}

     

       29
       29
       +
               >

     

       30
       30
       +
                 <Text

     

       31
       31
       +
                   className={TitleBarClasses.titleWrapper}

     

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

     

       33
       33
       +
                   tag="h2"

     

       34
       34
       +
                 >

     

       35
       35
       +
                   Moonbase

     

       36
       36
       +
                 </Text>

     

       37
       37
       +
                 <Divider />

     

       38
       38
       +
                 <TabBar

     

       39
       39
       +
                   selectedItem={selectedTab}

     

       40
       40
       +
                   onItemSelect={setSelectedTab}

     

       41
       41
       +
                   type="top-pill"

     

       42
       42
       +
                   className={TabBarClasses.tabBar}

     

       43
       43
       +
                 >

     

       44
       44
       +
                   {Object.entries(pages).map(([id, page]) => (

     

       45
       45
       +
                     <TabBar.Item key={id} id={id} className={TabBarClasses.item}>

     

       46
       46
       +
                       {page.name}

     

       47
       47
       +
                     </TabBar.Item>

     

       48
       48
       +
                   ))}

     

       49
       49
       +
                 </TabBar>

     

       50
       50
       +
               </div>

     

       51
       51
       +
       

     

       52
       52
       +
               {React.createElement(pages[selectedTab].element)}

     

       53
       53
       +
             </>

     

       54
       54
       +
           );

     

       55
       55
       +
         };

     

       56
       56
       +
       };