commit bab950e3eb13d11f28f80eec2e54f86dbcb639d4 · notnite.com/moonlight

+2 -1

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

···

       21
       21
        
             TrashIconSVG,

     

       22
       22
        
             CircleXIconSVG,

     

       23
       23
        
             "Masks.PANEL_BUTTON",

     

       24
       24
       -
             "removeButtonContainer:"

     

       24
       24
       +
             "removeButtonContainer:",

     

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

     

       25
       26
        
           ],

     

       26
       27
        
           entrypoint: true,

     

       27
       28
        
           run: (module, exports, require) => {

packages/core-extensions/src/moonbase/types.ts

···

       8
       8
        
         "M7.02799 0.333252C3.346 0.333252 0.361328 3.31792 0.361328 6.99992C0.361328 10.6819 3.346 13.6666 7.02799 13.6666C10.71 13.6666 13.6947 10.6819 13.6947 6.99992C13.6947 3.31792 10.7093 0.333252 7.02799 0.333252ZM10.166 9.19525L9.22333 10.1379L7.02799 7.94325L4.83266 10.1379L3.89 9.19525L6.08466 6.99992L3.88933 4.80459L4.832 3.86259L7.02733 6.05792L9.22266 3.86259L10.1653 4.80459L7.97066 6.99992L10.166 9.19525Z";

     

       9
       9
        
       export const DangerIconSVG =

     

       10
       10
        
         "M12 23a11 11 0 1 0 0-22 11 11 0 0 0 0 22Zm1.44-15.94L13.06 14a1.06 1.06 0 0 1-2.12 0l-.38-6.94a1 1 0 0 1 1-1.06h.88a1 1 0 0 1 1 1.06Zm-.19 10.69a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z";

     

       11
       11
       +
       export const ChevronSmallDownIconSVG =

     

       12
       12
       +
         "M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z";

     

       13
       13
       +
       export const ChevronSmallUpIconSVG =

     

       14
       14
       +
         "M7.41 16.0001L12 11.4201L16.59 16.0001L18 14.5901L12 8.59006L6 14.5901L7.41 16.0001Z";

     

       15
       15
       +
       export const ArrowsUpDownIconSVG =

     

       16
       16
       +
         "M3.81962 11.3333L3.81962 1.33325L5.52983 1.33325L5.52985 11.3333L7.46703 9.36658L8.66663 10.5916L4.67068 14.6666L0.666626 10.5916L1.86622 9.34158L3.81962 11.3333Z";

     

       11
       17
        
       

     

       12
       18
        
       export type MoonbaseNatives = {

     

       13
       19
        
         fetchRepositories(

+378

packages/core-extensions/src/moonbase/ui/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 const defaultFilter = {

     

       10
       10
       +
         core: true,

     

       11
       11
       +
         normal: true,

     

       12
       12
       +
         developer: true,

     

       13
       13
       +
         enabled: true,

     

       14
       14
       +
         disabled: true,

     

       15
       15
       +
         installed: true,

     

       16
       16
       +
         repository: true

     

       17
       17
       +
       };

     

       18
       18
       +
       export type Filter = typeof defaultFilter;

     

       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
       +
           return (

     

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

     

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

     

       93
       93
       +
                 <MenuGroup label="Type">

     

       94
       94
       +
                   <MenuCheckboxItem

     

       95
       95
       +
                     id="t-core"

     

       96
       96
       +
                     label="Core"

     

       97
       97
       +
                     checked={filter.core}

     

       98
       98
       +
                     action={() => setFilter({ ...filter, core: !filter.core })}

     

       99
       99
       +
                   />

     

       100
       100
       +
                   <MenuCheckboxItem

     

       101
       101
       +
                     id="t-normal"

     

       102
       102
       +
                     label="Normal"

     

       103
       103
       +
                     checked={filter.normal}

     

       104
       104
       +
                     action={() => setFilter({ ...filter, normal: !filter.normal })}

     

       105
       105
       +
                   />

     

       106
       106
       +
                   <MenuCheckboxItem

     

       107
       107
       +
                     id="t-developer"

     

       108
       108
       +
                     label="Developer"

     

       109
       109
       +
                     checked={filter.developer}

     

       110
       110
       +
                     action={() =>

     

       111
       111
       +
                       setFilter({ ...filter, developer: !filter.developer })

     

       112
       112
       +
                     }

     

       113
       113
       +
                   />

     

       114
       114
       +
                 </MenuGroup>

     

       115
       115
       +
                 <MenuGroup label="State">

     

       116
       116
       +
                   <MenuCheckboxItem

     

       117
       117
       +
                     id="s-enabled"

     

       118
       118
       +
                     label="Enabled"

     

       119
       119
       +
                     checked={filter.enabled}

     

       120
       120
       +
                     action={() => setFilter({ ...filter, enabled: !filter.enabled })}

     

       121
       121
       +
                   />

     

       122
       122
       +
                   <MenuCheckboxItem

     

       123
       123
       +
                     id="s-disabled"

     

       124
       124
       +
                     label="Disabled"

     

       125
       125
       +
                     checked={filter.disabled}

     

       126
       126
       +
                     action={() =>

     

       127
       127
       +
                       setFilter({ ...filter, disabled: !filter.disabled })

     

       128
       128
       +
                     }

     

       129
       129
       +
                   />

     

       130
       130
       +
                 </MenuGroup>

     

       131
       131
       +
                 <MenuGroup label="Location">

     

       132
       132
       +
                   <MenuCheckboxItem

     

       133
       133
       +
                     id="l-installed"

     

       134
       134
       +
                     label="Installed"

     

       135
       135
       +
                     checked={filter.installed}

     

       136
       136
       +
                     action={() =>

     

       137
       137
       +
                       setFilter({ ...filter, installed: !filter.installed })

     

       138
       138
       +
                     }

     

       139
       139
       +
                   />

     

       140
       140
       +
                   <MenuCheckboxItem

     

       141
       141
       +
                     id="l-repository"

     

       142
       142
       +
                     label="Repository"

     

       143
       143
       +
                     checked={filter.repository}

     

       144
       144
       +
                     action={() =>

     

       145
       145
       +
                       setFilter({ ...filter, repository: !filter.repository })

     

       146
       146
       +
                     }

     

       147
       147
       +
                   />

     

       148
       148
       +
                 </MenuGroup>

     

       149
       149
       +
                 <MenuGroup>

     

       150
       150
       +
                   <MenuItem

     

       151
       151
       +
                     id="reset-all"

     

       152
       152
       +
                     className={SortMenuClasses.clearText}

     

       153
       153
       +
                     label={

     

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

     

       155
       155
       +
                         Reset to default

     

       156
       156
       +
                       </Text>

     

       157
       157
       +
                     }

     

       158
       158
       +
                     action={() => {

     

       159
       159
       +
                       setFilter({ ...defaultFilter });

     

       160
       160
       +
                       closePopout();

     

       161
       161
       +
                     }}

     

       162
       162
       +
                   />

     

       163
       163
       +
                 </MenuGroup>

     

       164
       164
       +
               </Menu>

     

       165
       165
       +
             </div>

     

       166
       166
       +
           );

     

       167
       167
       +
         }

     

       168
       168
       +
       

     

       169
       169
       +
         function TagButtonPopout({

     

       170
       170
       +
           selectedTags,

     

       171
       171
       +
           setSelectedTags,

     

       172
       172
       +
           setPopoutRef,

     

       173
       173
       +
           closePopout

     

       174
       174
       +
         }: any) {

     

       175
       175
       +
           return (

     

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

     

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

     

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

     

       179
       179
       +
                   <Heading

     

       180
       180
       +
                     color="interactive-normal"

     

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

     

       182
       182
       +
                     className={FilterDialogClasses.headerText}

     

       183
       183
       +
                   >

     

       184
       184
       +
                     Select tags

     

       185
       185
       +
                   </Heading>

     

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

     

       187
       187
       +
                     <Text

     

       188
       188
       +
                       className={FilterDialogClasses.countText}

     

       189
       189
       +
                       color="none"

     

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

     

       191
       191
       +
                     >

     

       192
       192
       +
                       {selectedTags.size}

     

       193
       193
       +
                     </Text>

     

       194
       194
       +
                   </div>

     

       195
       195
       +
                 </div>

     

       196
       196
       +
               </div>

     

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

     

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

     

       199
       199
       +
                   <TagItem

     

       200
       200
       +
                     key={tag}

     

       201
       201
       +
                     className={FilterDialogClasses.tag}

     

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

     

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

     

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

     

       205
       205
       +
                   />

     

       206
       206
       +
                 ))}

     

       207
       207
       +
               </div>

     

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

     

       209
       209
       +
               <Button

     

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

     

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

     

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

     

       213
       213
       +
                 className={FilterDialogClasses.clear}

     

       214
       214
       +
                 onClick={() => {

     

       215
       215
       +
                   setSelectedTags(new Set());

     

       216
       216
       +
                   closePopout();

     

       217
       217
       +
                 }}

     

       218
       218
       +
               >

     

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

     

       220
       220
       +
                   Clear all

     

       221
       221
       +
                 </Text>

     

       222
       222
       +
               </Button>

     

       223
       223
       +
             </Dialog>

     

       224
       224
       +
           );

     

       225
       225
       +
         }

     

       226
       226
       +
       

     

       227
       227
       +
         return function FilterBar({

     

       228
       228
       +
           filter,

     

       229
       229
       +
           setFilter,

     

       230
       230
       +
           selectedTags,

     

       231
       231
       +
           setSelectedTags

     

       232
       232
       +
         }: {

     

       233
       233
       +
           filter: Filter;

     

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

     

       235
       235
       +
           selectedTags: Set<string>;

     

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

     

       237
       237
       +
         }) {

     

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

     

       239
       239
       +
             WindowStore.windowSize()

     

       240
       240
       +
           );

     

       241
       241
       +
       

     

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

     

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

     

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

     

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

     

       246
       246
       +
             if (tagsContainer.current === null || tagListInner.current === null)

     

       247
       247
       +
               return;

     

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

     

       249
       249
       +
               tagsContainer.current.getBoundingClientRect();

     

       250
       250
       +
             let offset = 0;

     

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

     

       252
       252
       +
               const {

     

       253
       253
       +
                 right: childX,

     

       254
       254
       +
                 top: childY,

     

       255
       255
       +
                 height

     

       256
       256
       +
               } = child.getBoundingClientRect();

     

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

     

       258
       258
       +
               const newOffset = childX - containerX;

     

       259
       259
       +
               if (newOffset > offset) {

     

       260
       260
       +
                 offset = newOffset;

     

       261
       261
       +
               }

     

       262
       262
       +
             }

     

       263
       263
       +
             setTagsButtonOffset(offset);

     

       264
       264
       +
           }, [windowSize]);

     

       265
       265
       +
       

     

       266
       266
       +
           return (

     

       267
       267
       +
             <div

     

       268
       268
       +
               ref={tagsContainer}

     

       269
       269
       +
               style={{

     

       270
       270
       +
                 paddingTop: "12px"

     

       271
       271
       +
               }}

     

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

     

       273
       273
       +
             >

     

       274
       274
       +
               <Popout

     

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

     

       276
       276
       +
                   <FilterButtonPopout

     

       277
       277
       +
                     filter={filter}

     

       278
       278
       +
                     setFilter={setFilter}

     

       279
       279
       +
                     closePopout={closePopout}

     

       280
       280
       +
                   />

     

       281
       281
       +
                 )}

     

       282
       282
       +
                 position="bottom"

     

       283
       283
       +
                 align="left"

     

       284
       284
       +
               >

     

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

     

       286
       286
       +
                   <Button

     

       287
       287
       +
                     {...props}

     

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

     

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

     

       290
       290
       +
                     className={FilterBarClasses.sortDropdown}

     

       291
       291
       +
                     innerClassName={FilterBarClasses.sortDropdownInner}

     

       292
       292
       +
                   >

     

       293
       293
       +
                     <ArrowsUpDownIcon />

     

       294
       294
       +
                     <Text

     

       295
       295
       +
                       className={FilterBarClasses.sortDropdownText}

     

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

     

       297
       297
       +
                       color="interactive-normal"

     

       298
       298
       +
                     >

     

       299
       299
       +
                       Sort & filter

     

       300
       300
       +
                     </Text>

     

       301
       301
       +
                     {isShown ? (

     

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

     

       303
       303
       +
                     ) : (

     

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

     

       305
       305
       +
                     )}

     

       306
       306
       +
                   </Button>

     

       307
       307
       +
                 )}

     

       308
       308
       +
               </Popout>

     

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

     

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

     

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

     

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

     

       313
       313
       +
                     <TagItem

     

       314
       314
       +
                       key={tag}

     

       315
       315
       +
                       className={FilterBarClasses.tag}

     

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

     

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

     

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

     

       319
       319
       +
                     />

     

       320
       320
       +
                   ))}

     

       321
       321
       +
                 </div>

     

       322
       322
       +
               </div>

     

       323
       323
       +
               <Popout

     

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

     

       325
       325
       +
                   <TagButtonPopout

     

       326
       326
       +
                     selectedTags={selectedTags}

     

       327
       327
       +
                     setSelectedTags={setSelectedTags}

     

       328
       328
       +
                     setPopoutRef={setPopoutRef}

     

       329
       329
       +
                     closePopout={closePopout}

     

       330
       330
       +
                   />

     

       331
       331
       +
                 )}

     

       332
       332
       +
                 position="bottom"

     

       333
       333
       +
                 align="right"

     

       334
       334
       +
               >

     

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

     

       336
       336
       +
                   <Button

     

       337
       337
       +
                     {...props}

     

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

     

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

     

       340
       340
       +
                     style={{

     

       341
       341
       +
                       left: tagsButtonOffset

     

       342
       342
       +
                     }}

     

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

     

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

     

       345
       345
       +
                       selectedTags.size > 0

     

       346
       346
       +
                         ? FilterBarClasses.tagsButtonWithCount

     

       347
       347
       +
                         : ""

     

       348
       348
       +
                     }`}

     

       349
       349
       +
                     innerClassName={FilterBarClasses.tagsButtonInner}

     

       350
       350
       +
                   >

     

       351
       351
       +
                     {selectedTags.size > 0 ? (

     

       352
       352
       +
                       <div

     

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

     

       354
       354
       +
                         className={FilterBarClasses.countContainer}

     

       355
       355
       +
                       >

     

       356
       356
       +
                         <Text

     

       357
       357
       +
                           className={FilterBarClasses.countText}

     

       358
       358
       +
                           color="none"

     

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

     

       360
       360
       +
                         >

     

       361
       361
       +
                           {selectedTags.size}

     

       362
       362
       +
                         </Text>

     

       363
       363
       +
                       </div>

     

       364
       364
       +
                     ) : (

     

       365
       365
       +
                       <>All</>

     

       366
       366
       +
                     )}

     

       367
       367
       +
                     {isShown ? (

     

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

     

       369
       369
       +
                     ) : (

     

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

     

       371
       371
       +
                     )}

     

       372
       372
       +
                   </Button>

     

       373
       373
       +
                 )}

     

       374
       374
       +
               </Popout>

     

       375
       375
       +
             </div>

     

       376
       376
       +
           );

     

       377
       377
       +
         };

     

       378
       378
       +
       };

+45 -13

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

···

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

     

       1
       1
       +
       import {

     

       2
       2
       +
         ExtensionLoadSource,

     

       3
       3
       +
         ExtensionTag,

     

       4
       4
       +
         WebpackRequireType

     

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

     

       2
       6
        
       import card from "./card";

     

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

     

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

     

       3
       9
        
       

     

       4
       10
        
       export enum ExtensionPage {

     

       5
       11
        
         Info,

     
···

       7
       13
        
         Settings

     

       8
       14
        
       }

     

       9
       15
        
       

     

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

     

       16
       16
       +
       export default (require: WebpackRequireType) => {

     

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

     

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

     

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

     
···

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

     

       17
       23
        
       

     

       18
       24
        
         const ExtensionCard = card(require);

     

       25
       25
       +
         const FilterBar = React.lazy(() =>

     

       26
       26
       +
           filterBar(require).then((c) => ({ default: c }))

     

       27
       27
       +
         );

     

       19
       28
        
       

     

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

     

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

     
···

       32
       41
        
           );

     

       33
       42
        
       

     

       34
       43
        
           const [query, setQuery] = React.useState("");

     

       44
       44
       +
           const [filter, setFilter] = React.useState({ ...defaultFilter });

     

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

     

       35
       46
        
       

     

       36
       47
        
           const sorted = Object.values(extensions).sort((a, b) => {

     

       37
       48
        
             const aName = a.manifest.meta?.name ?? a.id;

     
···

       39
       50
        
             return aName.localeCompare(bName);

     

       40
       51
        
           });

     

       41
       52
        
       

     

       42
       42
       -
           const filtered = query.trim().length

     

       43
       43
       -
             ? sorted.filter(

     

       44
       44
       -
                 (ext) =>

     

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

     

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

     

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

     

       53
       53
       +
           const filtered = sorted.filter(

     

       54
       54
       +
             (ext) =>

     

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

     

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

     

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

     

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

     

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

     

       60
       60
       +
               ) &&

     

       61
       61
       +
               // This seems very bad, sorry

     

       62
       62
       +
               !(

     

       63
       63
       +
                 (!filter.core && ext.source.type === ExtensionLoadSource.Core) ||

     

       64
       64
       +
                 (!filter.normal && ext.source.type === ExtensionLoadSource.Normal) ||

     

       65
       65
       +
                 (!filter.developer &&

     

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

     

       67
       67
       +
                 (!filter.enabled &&

     

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

     

       69
       69
       +
                 (!filter.disabled &&

     

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

     

       71
       71
       +
                 (!filter.installed && ext.state !== ExtensionState.NotDownloaded) ||

     

       72
       72
       +
                 (!filter.repository && ext.state === ExtensionState.NotDownloaded)

     

       48
       73
        
               )

     

       49
       49
       -
             : sorted;

     

       74
       74
       +
           );

     

       50
       75
        
       

     

       51
       76
        
           return (

     

       52
       77
        
             <>

     

       53
       78
        
               <Text

     

       54
       54
       -
                 style={{

     

       55
       55
       -
                   "margin-bottom": "16px"

     

       56
       56
       -
                 }}

     

       79
       79
       +
                 className={Margins.marginBottom20}

     

       57
       80
        
                 variant="heading-lg/semibold"

     

       58
       81
        
                 tag="h2"

     

       59
       82
        
               >

     
···

       61
       84
        
               </Text>

     

       62
       85
        
               <SearchBar

     

       63
       86
        
                 size={SearchBar.Sizes.MEDIUM}

     

       64
       64
       -
                 className={Margins.marginBottom20}

     

       65
       87
        
                 query={query}

     

       66
       88
        
                 onChange={(v: string) => setQuery(v.toLowerCase())}

     

       67
       89
        
                 onClear={() => setQuery("")}

     
···

       73
       95
        
                   spellCheck: "false"

     

       74
       96
        
                 }}

     

       75
       97
        
               />

     

       98
       98
       +
               <React.Suspense

     

       99
       99
       +
                 fallback={<div className={Margins.marginBottom20}></div>}

     

       100
       100
       +
               >

     

       101
       101
       +
                 <FilterBar

     

       102
       102
       +
                   filter={filter}

     

       103
       103
       +
                   setFilter={setFilter}

     

       104
       104
       +
                   selectedTags={selectedTags}

     

       105
       105
       +
                   setSelectedTags={setSelectedTags}

     

       106
       106
       +
                 />

     

       107
       107
       +
               </React.Suspense>

     

       76
       108
        
               {filtered.map((ext) => (

     

       77
       109
        
                 <ExtensionCard id={ext.id} key={ext.id} />

     

       78
       110
        
               ))}

+19 -18

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

···

       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
       +
       

     

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

     

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

     

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

     
···

       137
       155
        
               {tags != null && (

     

       138
       156
        
                 <InfoSection title="Tags">

     

       139
       157
        
                   {tags.map((tag, i) => {

     

       140
       140
       -
                     const names: Record<ExtensionTag, string> = {

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       156
       156
       -
                     };

     

       157
       157
       -
                     const name = names[tag];

     

       158
       158
       +
                     const name = tagNames[tag];

     

       158
       159
        
       

     

       159
       160
        
                     return (

     

       160
       161
        
                       <Badge

+2 -3

packages/types/src/coreExtensions.ts

···

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

     

       3
       3
        
       import { Dispatcher } from "flux";

     

       4
       4
        
       import React from "react";

     

       5
       5
       -
       import { WebpackModuleFunc } from "./discord";

     

       6
       6
       -
       import WebpackRequire from "./discord/require";

     

       5
       5
       +
       import { WebpackModuleFunc, WebpackRequireType } from "./discord";

     

       7
       6
        
       

     

       8
       7
        
       export type Spacepack = {

     

       9
       8
        
         inspect: (module: number | string) => WebpackModuleFunc | null;

     

       10
       9
        
         findByCode: (...args: (string | RegExp)[]) => any[];

     

       11
       10
        
         findByExports: (...args: string[]) => any[];

     

       12
       12
       -
         require: typeof WebpackRequire;

     

       11
       11
       +
         require: WebpackRequireType;

     

       13
       12
        
         modules: Record<string, WebpackModuleFunc>;

     

       14
       13
        
         cache: Record<string, any>;

     

       15
       14
        
         findObjectFromKey: (exports: Record<string, any>, key: string) => any | null;

packages/types/src/coreExtensions/components.ts

···

       298
       298
        
         Avatar: Component;

     

       299
       299
        
         Scroller: Component;

     

       300
       300
        
         Text: ComponentClass<PropsWithChildren<any>>;

     

       301
       301
       +
         Heading: ComponentClass<PropsWithChildren<any>>;

     

       301
       302
        
         LegacyText: Component;

     

       302
       303
        
         Flex: Flex;

     

       303
       304
        
         Card: ComponentClass<PropsWithChildren<any>>;

     

       305
       305
       +
         Popout: ComponentClass<PropsWithChildren<any>>;

     

       306
       306
       +
         Dialog: ComponentClass<PropsWithChildren<any>>;

     

       307
       307
       +
         Menu: ComponentClass<PropsWithChildren<any>>;

     

       308
       308
       +
         MenuItem: ComponentClass<PropsWithChildren<any>>;

     

       309
       309
       +
         MenuGroup: ComponentClass<PropsWithChildren<any>>;

     

       310
       310
       +
         MenuCheckboxItem: ComponentClass<PropsWithChildren<any>>;

     

       304
       311
        
         CardClasses: {

     

       305
       312
        
           card: string;

     

       306
       313
        
           cardHeader: string;

packages/types/src/discord/webpack.ts

···

       3
       3
        
       export type WebpackRequireType = typeof WebpackRequire & {

     

       4
       4
        
         c: Record<string, WebpackModule>;

     

       5
       5
        
         m: Record<string, WebpackModuleFunc>;

     

       6
       6
       +
         el: (module: number | string) => Promise<void>;

     

       6
       7
        
       };

     

       7
       8
        
       

     

       8
       9
        
       export type WebpackModule = {