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