···
import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
26
-
const { BeakerIcon, DownloadIcon, TrashIcon, AngleBracketsIcon, Tooltip } = Components;
33
+
WindowTopOutlineIcon,
const PanelButton = spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.Z;
const TabBarClasses = spacepack.findByCode("tabBar:", "tabBarItem:", "headerContentWrapper:")[0].exports;
···
const CONFLICTING_TEXT = "This extension is already installed from another source.";
50
+
function PanelLinkButton({ icon, tooltip, link }: { icon: React.ReactNode; tooltip: string; link: string }) {
54
+
tooltipText={tooltip}
export default function ExtensionCard({ uniqueId }: { uniqueId: number }) {
42
-
const [tab, setTab] = React.useState(ExtensionPage.Info);
const { ext, enabled, busy, update, conflicting } = useStateFromStores([MoonbaseSettingsStore], () => {
ext: MoonbaseSettingsStore.getExtension(uniqueId),
···
54
-
// Why it work like that :sob:
55
-
if (ext == null) return <></>;
73
+
const [tab, setTab] = React.useState(
74
+
update != null && ext?.changelog != null ? ExtensionPage.Changelog : ExtensionPage.Info
const { Card, Text, FormSwitch, TabBar, Button } = Components;
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;
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} />
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);
const enabledDependants = useStateFromStores([MoonbaseSettingsStore], () =>
Object.keys(MoonbaseSettingsStore.extensions)
const potentialDependant = MoonbaseSettingsStore.getExtension(parseInt(uniqueId));
69
-
potentialDependant.manifest.dependencies?.includes(ext.id) &&
97
+
potentialDependant.manifest.dependencies?.includes(ext?.id) &&
MoonbaseSettingsStore.getExtensionEnabled(parseInt(uniqueId))
···
const implicitlyEnabled = enabledDependants.length > 0;
105
+
const hasDuplicateEntry = useStateFromStores([MoonbaseSettingsStore], () =>
106
+
Object.entries(MoonbaseSettingsStore.extensions).some(
107
+
([otherUniqueId, otherExt]) =>
108
+
otherExt != null && otherExt?.id === ext?.id && parseInt(otherUniqueId) !== uniqueId
112
+
return ext == null ? (
<Card editable={true} className={IntegrationCard.card}>
<div className={IntegrationCard.cardHeader}>
<Flex direction={Flex.Direction.VERTICAL}>
···
102
-
{ext.manifest.meta?.source != null && (
139
+
{hasDuplicateEntry && ext?.source?.url && (
104
-
icon={AngleBracketsIcon}
105
-
tooltipText="View source"
107
-
window.open(ext.manifest.meta!.source);
141
+
icon={WindowTopOutlineIcon}
142
+
tooltipText={`This extension is from the following repository: ${ext.source.url}`}
···
213
-
{(description != null || changelog != null || settings != null) && (
217
-
onItemSelect={setTab}
218
-
className={TabBarClasses.tabBar}
223
-
<TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Info}>
247
+
{(description != null || changelog != null || settings != null || linkButtons.length > 0) && (
252
+
onItemSelect={setTab}
253
+
className={TabBarClasses.tabBar}
258
+
<Flex direction={Flex.Direction.HORIZONTAL}>
259
+
<TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Info}>
227
-
{description != null && (
228
-
<TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Description}>
263
+
{description != null && (
264
+
<TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Description}>
233
-
{changelog != null && (
234
-
<TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Changelog}>
269
+
{changelog != null && (
270
+
<TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Changelog}>
274
+
{settings != null && (
275
+
<TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Settings}>
239
-
{settings != null && (
240
-
<TabBar.Item className={TabBarClasses.tabBarItem} id={ExtensionPage.Settings}>
282
+
{linkButtons.length > 0 && (
284
+
align={Flex.Align.CENTER}
285
+
justify={Flex.Justify.END}
286
+
direction={Flex.Direction.HORIZONTAL}
288
+
className="moonbase-link-buttons"