90 lines
2.6 kB
1
import settings from "@moonlight-mod/wp/settings_settings";
2
import React from "@moonlight-mod/wp/react";
3
import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
4
import { Moonbase, pages, RestartAdviceMessage, Update } from "@moonlight-mod/wp/moonbase_ui";
5
6
import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
7
import * as Components from "@moonlight-mod/wp/discord/components/common/index";
8
9
const { MenuItem, Text, Breadcrumbs } = Components;
10
11
const Margins = spacepack.require("discord/styles/shared/Margins.css");
12
13
const { open } = spacepack.findByCode(':"USER_SETTINGS_MODAL_SET_SECTION"')[0].exports.Z;
14
15
let SettingsNotice;
16
const notice = {
17
stores: [MoonbaseSettingsStore],
18
element: () => {
19
// Require it here because lazy loading SUX
20
SettingsNotice ??= spacepack.findByCode("onSaveButtonColor", "FocusRingScope")[0].exports.Z;
21
return (
22
<SettingsNotice
23
submitting={MoonbaseSettingsStore.submitting}
24
onReset={() => {
25
MoonbaseSettingsStore.reset();
26
}}
27
onSave={() => {
28
MoonbaseSettingsStore.writeConfig();
29
}}
30
/>
31
);
32
}
33
};
34
35
function addSection(id: string, name: string, element: React.FunctionComponent) {
36
settings.addSection(`moonbase-${id}`, name, element, null, -2, notice);
37
}
38
39
// FIXME: move to component types
40
type Breadcrumb = {
41
id: string;
42
label: string;
43
};
44
45
function renderBreadcrumb(crumb: Breadcrumb, last: boolean) {
46
return (
47
<Text variant="heading-lg/semibold" tag="h2" color={last ? "header-primary" : "header-secondary"}>
48
{crumb.label}
49
</Text>
50
);
51
}
52
53
if (MoonbaseSettingsStore.getExtensionConfigRaw<boolean>("moonbase", "sections", false)) {
54
settings.addHeader("Moonbase", -2);
55
56
for (const page of pages) {
57
addSection(page.id, page.name, () => {
58
const breadcrumbs = [
59
{ id: "moonbase", label: "Moonbase" },
60
{ id: page.id, label: page.name }
61
];
62
return (
63
<>
64
<Breadcrumbs
65
className={Margins.marginBottom20}
66
renderCustomBreadcrumb={renderBreadcrumb}
67
breadcrumbs={breadcrumbs}
68
activeId={page.id}
69
>
70
{page.name}
71
</Breadcrumbs>
72
73
<RestartAdviceMessage />
74
<Update />
75
76
<page.element />
77
</>
78
);
79
});
80
}
81
} else {
82
settings.addSection("moonbase", "Moonbase", Moonbase, null, -2, notice);
83
84
settings.addSectionMenuItems(
85
"moonbase",
86
...pages.map((page, i) => (
87
<MenuItem key={page.id} id={`moonbase-${page.id}`} label={page.name} action={() => open("moonbase", i)} />
88
))
89
);
90
}
91