commit 79cbd1dd53e02320b422cdcf5b00c3894296017c · notnite.com/moonlight

packages/core-extensions/src/moonbase/style.css

···

       16
        
         resize: vertical;

     

       17
        
       }

     

       18
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       19
        
       .moonbase-speen {

     

       20
        
         animation: moonbase-speen-animation 0.25s linear infinite;

     

       21
        
       }

···

       16
        
         resize: vertical;

     

       17
        
       }

     

       18
        
       

     

       19
       +
       .moonbase-link-buttons {

     

       20
       +
         border-bottom: 2px solid var(--background-modifier-accent);

     

       21
       +
         margin-bottom: -2px;

     

       22
       +
         margin-left: 0 !important;

     

       23
       +
         padding-right: 20px;

     

       24
       +
         gap: 1rem;

     

       25
       +
       }

     

       26
       +
       

     

       27
        
       .moonbase-speen {

     

       28
        
         animation: moonbase-speen-animation 0.25s linear infinite;

     

       29
        
       }

+94 -45

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

···

       23
        
       

     

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

     

       25
        
       

     

       26
       -
       const { BeakerIcon, DownloadIcon, TrashIcon, AngleBracketsIcon, Tooltip } = Components;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       27
        
       

     

       28
        
       const PanelButton = spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.Z;

     

       29
        
       const TabBarClasses = spacepack.findByCode("tabBar:", "tabBarItem:", "headerContentWrapper:")[0].exports;

     
···

       38
        
       };

     

       39
        
       const CONFLICTING_TEXT = "This extension is already installed from another source.";

     

       40
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       41
        
       export default function ExtensionCard({ uniqueId }: { uniqueId: number }) {

     

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

     

       43
       -
       

     

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

     

       45
        
           return {

     

       46
        
             ext: MoonbaseSettingsStore.getExtension(uniqueId),

     
···

       51
        
           };

     

       52
        
         });

     

       53
        
       

     

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

     

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

     

       0
        
       
     

       56
        
       

     

       57
        
         const { Card, Text, FormSwitch, TabBar, Button } = Components;

     

       58
        
       

     

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

     

       60
       -
         const settings = ext.settingsOverride ?? ext.manifest?.settings;

     

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

     

       62
       -
         const changelog = ext.changelog;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       63
        
         const enabledDependants = useStateFromStores([MoonbaseSettingsStore], () =>

     

       64
        
           Object.keys(MoonbaseSettingsStore.extensions)

     

       65
        
             .filter((uniqueId) => {

     

       66
        
               const potentialDependant = MoonbaseSettingsStore.getExtension(parseInt(uniqueId));

     

       67
        
       

     

       68
        
               return (

     

       69
       -
                 potentialDependant.manifest.dependencies?.includes(ext.id) &&

     

       70
        
                 MoonbaseSettingsStore.getExtensionEnabled(parseInt(uniqueId))

     

       71
        
               );

     

       72
        
             })

     
···

       74
        
         );

     

       75
        
         const implicitlyEnabled = enabledDependants.length > 0;

     

       76
        
       

     

       77
       -
         return (

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

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

     

       79
        
             <div className={IntegrationCard.cardHeader}>

     

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

     
···

       99
        
                     gap: "1rem"

     

       100
        
                   }}

     

       101
        
                 >

     

       102
       -
                   {ext.manifest.meta?.source != null && (

     

       103
        
                     <PanelButton

     

       104
       -
                       icon={AngleBracketsIcon}

     

       105
       -
                       tooltipText="View source"

     

       106
       -
                       onClick={() => {

     

       107
       -
                         window.open(ext.manifest.meta!.source);

     

       108
       -
                       }}

     

       109
        
                     />

     

       110
        
                   )}

     

       111
        
       

     
···

       210
        
             </div>

     

       211
        
       

     

       212
        
             <div>

     

       213
       -
               {(description != null || changelog != null || settings != null) && (

     

       214
       -
                 <TabBar

     

       215
       -
                   selectedItem={tab}

     

       216
       -
                   type="top"

     

       217
       -
                   onItemSelect={setTab}

     

       218
       -
                   className={TabBarClasses.tabBar}

     

       219
       -
                   style={{

     

       220
       -
                     padding: "0 20px"

     

       221
       -
                   }}

     

       222
       -
                 >

     

       223
       -
                   <TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Info}>

     

       224
       -
                     Info

     

       225
       -
                   </TabBar.Item>

     

       0
        
       
     

       0
        
       
     

       226
        
       

     

       227
       -
                   {description != null && (

     

       228
       -
                     <TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Description}>

     

       229
       -
                       Description

     

       230
       -
                     </TabBar.Item>

     

       231
       -
                   )}

     

       232
        
       

     

       233
       -
                   {changelog != null && (

     

       234
       -
                     <TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Changelog}>

     

       235
       -
                       Changelog

     

       236
       -
                     </TabBar.Item>

     

       237
       -
                   )}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       238
        
       

     

       239
       -
                   {settings != null && (

     

       240
       -
                     <TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Settings}>

     

       241
       -
                       Settings

     

       242
       -
                     </TabBar.Item>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       243
        
                   )}

     

       244
       -
                 </TabBar>

     

       245
        
               )}

     

       246
        
       

     

       247
        
               <Flex

···

       23
        
       

     

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

     

       25
        
       

     

       26
       +
       const {

     

       27
       +
         BeakerIcon,

     

       28
       +
         DownloadIcon,

     

       29
       +
         TrashIcon,

     

       30
       +
         AngleBracketsIcon,

     

       31
       +
         ChannelListIcon,

     

       32
       +
         HeartIcon,

     

       33
       +
         WindowTopOutlineIcon,

     

       34
       +
         Tooltip

     

       35
       +
       } = Components;

     

       36
        
       

     

       37
        
       const PanelButton = spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.Z;

     

       38
        
       const TabBarClasses = spacepack.findByCode("tabBar:", "tabBarItem:", "headerContentWrapper:")[0].exports;

     
···

       47
        
       };

     

       48
        
       const CONFLICTING_TEXT = "This extension is already installed from another source.";

     

       49
        
       

     

       50
       +
       function PanelLinkButton({ icon, tooltip, link }: { icon: React.ReactNode; tooltip: string; link: string }) {

     

       51
       +
         return (

     

       52
       +
           <PanelButton

     

       53
       +
             icon={icon}

     

       54
       +
             tooltipText={tooltip}

     

       55
       +
             onClick={() => {

     

       56
       +
               window.open(link);

     

       57
       +
             }}

     

       58
       +
           />

     

       59
       +
         );

     

       60
       +
       }

     

       61
       +
       

     

       62
        
       export default function ExtensionCard({ uniqueId }: { uniqueId: number }) {

     

       0
        
       
     

       0
        
       
     

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

     

       64
        
           return {

     

       65
        
             ext: MoonbaseSettingsStore.getExtension(uniqueId),

     
···

       70
        
           };

     

       71
        
         });

     

       72
        
       

     

       73
       +
         const [tab, setTab] = React.useState(

     

       74
       +
           update != null && ext?.changelog != null ? ExtensionPage.Changelog : ExtensionPage.Info

     

       75
       +
         );

     

       76
        
       

     

       77
        
         const { Card, Text, FormSwitch, TabBar, Button } = Components;

     

       78
        
       

     

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

     

       80
       +
         const settings = ext?.settingsOverride ?? ext.manifest?.settings;

     

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

     

       82
       +
         const changelog = ext?.changelog;

     

       83
       +
         const linkButtons = [

     

       84
       +
           ext?.manifest?.meta?.source && (

     

       85
       +
             <PanelLinkButton icon={AngleBracketsIcon} tooltip="View source" link={ext.manifest.meta.source} />

     

       86
       +
           ),

     

       87
       +
           ext?.source?.url && <PanelLinkButton icon={ChannelListIcon} tooltip="View repository" link={ext.source.url} />,

     

       88
       +
           ext?.manifest?.meta?.donate && <PanelLinkButton icon={HeartIcon} tooltip="Donate" link={ext.manifest.meta.donate} />

     

       89
       +
         ].filter((x) => x != null);

     

       90
       +
       

     

       91
        
         const enabledDependants = useStateFromStores([MoonbaseSettingsStore], () =>

     

       92
        
           Object.keys(MoonbaseSettingsStore.extensions)

     

       93
        
             .filter((uniqueId) => {

     

       94
        
               const potentialDependant = MoonbaseSettingsStore.getExtension(parseInt(uniqueId));

     

       95
        
       

     

       96
        
               return (

     

       97
       +
                 potentialDependant.manifest.dependencies?.includes(ext?.id) &&

     

       98
        
                 MoonbaseSettingsStore.getExtensionEnabled(parseInt(uniqueId))

     

       99
        
               );

     

       100
        
             })

     
···

       102
        
         );

     

       103
        
         const implicitlyEnabled = enabledDependants.length > 0;

     

       104
        
       

     

       105
       +
         const hasDuplicateEntry = useStateFromStores([MoonbaseSettingsStore], () =>

     

       106
       +
           Object.entries(MoonbaseSettingsStore.extensions).some(

     

       107
       +
             ([otherUniqueId, otherExt]) =>

     

       108
       +
               otherExt != null && otherExt?.id === ext?.id && parseInt(otherUniqueId) !== uniqueId

     

       109
       +
           )

     

       110
       +
         );

     

       111
       +
       

     

       112
       +
         return ext == null ? (

     

       113
       +
           <></>

     

       114
       +
         ) : (

     

       115
        
           <Card editable={true} className={IntegrationCard.card}>

     

       116
        
             <div className={IntegrationCard.cardHeader}>

     

       117
        
               <Flex direction={Flex.Direction.VERTICAL}>

     
···

       136
        
                     gap: "1rem"

     

       137
        
                   }}

     

       138
        
                 >

     

       139
       +
                   {hasDuplicateEntry && ext?.source?.url && (

     

       140
        
                     <PanelButton

     

       141
       +
                       icon={WindowTopOutlineIcon}

     

       142
       +
                       tooltipText={`This extension is from the following repository: ${ext.source.url}`}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       143
        
                     />

     

       144
        
                   )}

     

       145
        
       

     
···

       244
        
             </div>

     

       245
        
       

     

       246
        
             <div>

     

       247
       +
               {(description != null || changelog != null || settings != null || linkButtons.length > 0) && (

     

       248
       +
                 <Flex>

     

       249
       +
                   <TabBar

     

       250
       +
                     selectedItem={tab}

     

       251
       +
                     type="top"

     

       252
       +
                     onItemSelect={setTab}

     

       253
       +
                     className={TabBarClasses.tabBar}

     

       254
       +
                     style={{

     

       255
       +
                       padding: "0 20px"

     

       256
       +
                     }}

     

       257
       +
                   >

     

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

     

       259
       +
                       <TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Info}>

     

       260
       +
                         Info

     

       261
       +
                       </TabBar.Item>

     

       262
        
       

     

       263
       +
                       {description != null && (

     

       264
       +
                         <TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Description}>

     

       265
       +
                           Description

     

       266
       +
                         </TabBar.Item>

     

       267
       +
                       )}

     

       268
        
       

     

       269
       +
                       {changelog != null && (

     

       270
       +
                         <TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Changelog}>

     

       271
       +
                           Changelog

     

       272
       +
                         </TabBar.Item>

     

       273
       +
                       )}

     

       274
       +
                       {settings != null && (

     

       275
       +
                         <TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Settings}>

     

       276
       +
                           Settings

     

       277
       +
                         </TabBar.Item>

     

       278
       +
                       )}

     

       279
       +
                     </Flex>

     

       280
       +
                   </TabBar>

     

       281
        
       

     

       282
       +
                   {linkButtons.length > 0 && (

     

       283
       +
                     <Flex

     

       284
       +
                       align={Flex.Align.CENTER}

     

       285
       +
                       justify={Flex.Justify.END}

     

       286
       +
                       direction={Flex.Direction.HORIZONTAL}

     

       287
       +
                       grow={1}

     

       288
       +
                       className="moonbase-link-buttons"

     

       289
       +
                     >

     

       290
       +
                       {linkButtons}

     

       291
       +
                     </Flex>

     

       292
        
                   )}

     

       293
       +
                 </Flex>

     

       294
        
               )}

     

       295
        
       

     

       296
        
               <Flex

packages/types/src/extension.ts

···

       85
        
           source?: string;

     

       86
        
       

     

       87
        
           /**

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       88
        
            * A changelog to show in Moonbase.

     

       89
        
            * Moonbase will show the changelog for the latest version, even if it is not installed.

     

       90
        
            */

···

       85
        
           source?: string;

     

       86
        
       

     

       87
        
           /**

     

       88
       +
            * A donation link (or other method of support). If you don't want financial contributions, consider putting your favorite charity here!

     

       89
       +
            */

     

       90
       +
           donate?: string;

     

       91
       +
       

     

       92
       +
           /**

     

       93
        
            * A changelog to show in Moonbase.

     

       94
        
            * Moonbase will show the changelog for the latest version, even if it is not installed.

     

       95
        
            */