commit e061c1c80c24abc7ed7323b0feb7785cbd2dd39d · notnite.com/moonlight

+2 -2

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

···

       58
       58
        
         );

     

       59
       59
        
       }

     

       60
       60
        
       

     

       61
       61
       -
       export default function ExtensionCard({ uniqueId }: { uniqueId: number }) {

     

       61
       61
       +
       export default function ExtensionCard({ uniqueId, selectTag }: { uniqueId: number; selectTag: (tag: string) => void }) {

     

       62
       62
        
         const { ext, enabled, busy, update, conflicting } = useStateFromStores([MoonbaseSettingsStore], () => {

     

       63
       63
        
           return {

     

       64
       64
        
             ext: MoonbaseSettingsStore.getExtension(uniqueId),

     
···

       303
       303
        
                   rowGap: tab === ExtensionPage.Info ? "16px" : undefined

     

       304
       304
        
                 }}

     

       305
       305
        
               >

     

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

     

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

     

       307
       307
        
                 {tab === ExtensionPage.Description && (

     

       308
       308
        
                   <Text variant="text-md/normal" className={MarkupClasses.markup} style={{ width: "100%" }}>

     

       309
       309
        
                     {MarkupUtils.parse(description ?? "*No description*", true, {

+14 -2

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

···

       20
       20
        
       

     

       21
       21
        
       const SearchBar = spacepack.require("discord/uikit/search/SearchBar").default;

     

       22
       22
        
       

     

       23
       23
       +
       const validTags: string[] = Object.values(ExtensionTag);

     

       24
       24
       +
       

     

       23
       25
        
       export default function ExtensionsPage() {

     

       24
       26
        
         const { extensions, savedFilter } = useStateFromStoresObject([MoonbaseSettingsStore], () => {

     

       25
       27
        
           return {

     
···

       41
       43
        
           filter = filterState[0];

     

       42
       44
        
           setFilter = filterState[1];

     

       43
       45
        
         }

     

       46
       46
       +
       

     

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

     

       48
       48
       +
         const selectTag = React.useCallback(

     

       49
       49
       +
           (tag: string) => {

     

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

     

       51
       51
       +
             if (validTags.includes(tag)) newState.add(tag);

     

       52
       52
       +
             setSelectedTags(newState);

     

       53
       53
       +
           },

     

       54
       54
       +
           [selectedTags]

     

       55
       55
       +
         );

     

       56
       56
       +
       

     

       45
       57
        
         const sorted = Object.values(extensions).sort((a, b) => {

     

       46
       58
        
           const aName = a.manifest.meta?.name ?? a.id;

     

       47
       59
        
           const bName = b.manifest.meta?.name ?? b.id;

     
···

       132
       144
        
             )}

     

       133
       145
        
       

     

       134
       146
        
             {filteredWithUpdates.map((ext) => (

     

       135
       135
       -
               <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} />

     

       147
       147
       +
               <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} selectTag={selectTag} />

     

       136
       148
        
             ))}

     

       137
       149
        
             {filteredWithUpdates.length > 0 && filteredWithoutUpdates.length > 0 && (

     

       138
       150
        
               <FormDivider className="moonbase-update-divider" />

     

       139
       151
        
             )}

     

       140
       152
        
             {filteredWithoutUpdates.map((ext) => (

     

       141
       141
       -
               <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} />

     

       153
       153
       +
               <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} selectTag={selectTag} />

     

       142
       154
        
             ))}

     

       143
       155
        
           </>

     

       144
       156
        
         );

+13 -3

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

···

       54
       54
        
       function Badge({

     

       55
       55
        
         color,

     

       56
       56
        
         children,

     

       57
       57
       -
         style = {}

     

       57
       57
       +
         style = {},

     

       58
       58
       +
         onClick

     

       58
       59
        
       }: {

     

       59
       60
        
         color: string;

     

       60
       61
        
         children: React.ReactNode;

     

       61
       62
        
         style?: React.CSSProperties;

     

       63
       63
       +
         onClick?: () => void;

     

       62
       64
        
       }) {

     

       65
       65
       +
         if (onClick) style.cursor ??= "pointer";

     

       63
       66
        
         return (

     

       64
       67
        
           <span

     

       65
       68
        
             className="moonlight-card-badge"

     
···

       69
       72
        
                 ...style

     

       70
       73
        
               } as React.CSSProperties

     

       71
       74
        
             }

     

       75
       75
       +
             onClick={onClick}

     

       72
       76
        
           >

     

       73
       77
        
             {children}

     

       74
       78
        
           </span>

     

       75
       79
        
         );

     

       76
       80
        
       }

     

       77
       81
        
       

     

       78
       78
       -
       export default function ExtensionInfo({ ext }: { ext: MoonbaseExtension }) {

     

       82
       82
       +
       export default function ExtensionInfo({

     

       83
       83
       +
         ext,

     

       84
       84
       +
         selectTag

     

       85
       85
       +
       }: {

     

       86
       86
       +
         ext: MoonbaseExtension;

     

       87
       87
       +
         selectTag: (tag: string) => void;

     

       88
       88
       +
       }) {

     

       79
       89
        
         const authors = ext.manifest?.meta?.authors;

     

       80
       90
        
         const tags = ext.manifest?.meta?.tags;

     

       81
       91
        
         const version = ext.manifest?.version;

     
···

       148
       158
        
                   }

     

       149
       159
        
       

     

       150
       160
        
                   return (

     

       151
       151
       -
                     <Badge key={i} color={color} style={style}>

     

       161
       161
       +
                     <Badge key={i} color={color} style={style} onClick={() => selectTag(tag)}>

     

       152
       162
        
                       {name}

     

       153
       163
        
                     </Badge>

     

       154
       164
        
                   );