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