Add installed mods list to Credits page

src/js/beat-saber/InstalledMods.tsx

@@ -0,0 +1,55 @@
+import { FC, useMemo } from 'react';
+import { useFailsafeWebsocket } from '../hooks/use-failsafe-websocket';
+import { bsdpDataSource } from '../utils/constants';
+import { validateBsdpModData } from '../validators/validate-bsdp-mod-data';
+import { ExternalLink } from '../ExternalLink';
+import * as styles from '../../scss/modules/InstalledMods.module.scss';
+import { ReadyState } from 'react-use-websocket';
+import { Loading } from '../Loading';
+
+const simplifyLink = (href: string) => href.replace(/^https?:\/\//, '');
+
+export const InstalledMods: FC = () => {
+    const {
+        message: modData,
+        readyState
+    } = useFailsafeWebsocket(`${bsdpDataSource}/ModData`, validateBsdpModData);
+
+    const enabledModes = modData?.EnabledPlugins;
+    const sortedModsList = useMemo(() => enabledModes?.slice().sort(({ Name: NameA },
+        { Name: NameB }) => NameA.localeCompare(NameB)) ?? [], [enabledModes]);
+
+    let modsJsx: JSX.Element;
+    if (readyState === ReadyState.CONNECTING) {
+        modsJsx = <Loading name="connection" />;
+    } else if (sortedModsList.length === 0) {
+        modsJsx = <p>Installed mods could not be loaded.</p>;
+    } else {
+        modsJsx =
+            <ul>
+                {sortedModsList.map((mod) => <li key={mod.Name}>
+                    <h4 className={styles['mod-title']}>
+                        <span className={styles['mod-name']}>{mod.Name}</span>
+                        {' '}<span className={styles['mod-version']}>v{mod.Version}</span>
+                    </h4>
+                    {mod.Author && <p className={styles['mod-info']}>Developed by: {mod.Author}</p>}
+                    {mod.HomeLink && <p className={styles['mod-info']}>
+                        Home
+                        page: <ExternalLink href={mod.HomeLink}>{simplifyLink(mod.HomeLink)}</ExternalLink>
+                    </p>}
+                    {mod.SourceLink && <p className={styles['mod-info']}>
+                        Source
+                        code: <ExternalLink href={mod.SourceLink}>{simplifyLink(mod.SourceLink)}</ExternalLink>
+                    </p>}
+                    {mod.DonateLink && <p className={styles['mod-info']}>
+                        Donations: <ExternalLink href={mod.DonateLink}>{simplifyLink(mod.DonateLink)}</ExternalLink>
+                    </p>}
+                </li>)}
+            </ul>;
+    }
+
+    return <div className={styles['installed-mods']}>
+        <h3>Installed Mods</h3>
+        {modsJsx}
+    </div>;
+};

src/js/model/bsdp.ts

@@ -57,3 +57,17 @@ export interface BsdpMapData {
     CoverImage: string | null;
     Modifiers: BsdpModifiers;
 }
+
+export interface BsdpModData {
+    EnabledPlugins: BsdpPluginMetadata[];
+}
+
+export interface BsdpPluginMetadata {
+    Name: string;
+    Version: string;
+    Author: string;
+    Description: string;
+    HomeLink: string;
+    SourceLink: string;
+    DonateLink: string;
+}

src/js/settings/pages/SettingsPageCredits.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { ExternalLink } from '../../ExternalLink';
+import { InstalledMods } from '../../beat-saber/InstalledMods';
 
 const bluetoothLogoLink = 'https://commons.wikimedia.org/wiki/File:Bluetooth.svg';
 
@@ -39,5 +40,7 @@ export const SettingsPageCredits: FC = () => {
                 <ExternalLink href="https://www.twitch.tv/minniefoxx">MinnieFoxx</ExternalLink>
             </li>
         </ul>
+
+        <InstalledMods />
     </>;
 };

src/js/validators/validate-bsdp-mod-data.ts

@@ -0,0 +1,17 @@
+import Joi from 'joi';
+import { dataValidatorFactory } from '../utils/data-validator-factory';
+import { BsdpModData, BsdpPluginMetadata } from '../model/bsdp';
+
+const schema = Joi.object<BsdpModData>({
+    EnabledPlugins: Joi.array<BsdpPluginMetadata[]>().items({
+        Name: Joi.string().allow(''),
+        Version: Joi.string().allow(''),
+        Author: Joi.string().allow(''),
+        Description: Joi.string().allow(''),
+        HomeLink: Joi.string().allow(''),
+        SourceLink: Joi.string().allow(''),
+        DonateLink: Joi.string().allow(''),
+    }),
+});
+
+export const validateBsdpModData = dataValidatorFactory(schema);

src/scss/modules/InstalledMods.module.scss

@@ -0,0 +1,38 @@
+.installed-mods {
+  .mod-title {
+    font-size: 1em;
+    font-weight: bold;
+    margin: 0 0 .25em;
+
+    .mod-name {
+      font-size: 1em;
+    }
+
+    .mod-version {
+      font-size: .8em;
+    }
+  }
+
+  .mod-info {
+    font-size: .8em;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    width: 100%;
+    flex-flow: row wrap;
+    text-align: center;
+    gap: .75em;
+    justify-content: space-around;
+
+    li {
+      box-sizing: border-box;
+      padding: .5em;
+      border: .125em solid;
+      border-radius: .3em;
+    }
+  }
+}

src/scss/modules/SettingsDialog.module.scss

@@ -19,6 +19,7 @@
     width: 0;
 
     .close-button {
+      position: absolute;
       border: 0;
       padding: .25em;
       margin: 0;
@@ -61,6 +62,7 @@
   overflow: auto;
   flex: 1 1 auto;
   padding-right: 1em;
+  box-sizing: border-box;
 }
 
 .settings-header {