100 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
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
const oldLocation = MoonbaseSettingsStore.getExtensionConfigRaw<boolean>("moonbase", "oldLocation", false);
36
const position = oldLocation ? -2 : -9999;
37
38
function addSection(id: string, name: string, element: React.FunctionComponent) {
39
settings.addSection(`moonbase-${id}`, name, element, null, position, notice);
40
}
41
42
// FIXME: move to component types
43
type Breadcrumb = {
44
id: string;
45
label: string;
46
};
47
48
function renderBreadcrumb(crumb: Breadcrumb, last: boolean) {
49
return (
50
<Text variant="heading-lg/semibold" tag="h2" color={last ? "header-primary" : "header-secondary"}>
51
{crumb.label}
52
</Text>
53
);
54
}
55
56
if (!oldLocation) {
57
settings.addDivider(position);
58
}
59
60
if (MoonbaseSettingsStore.getExtensionConfigRaw<boolean>("moonbase", "sections", false)) {
61
if (oldLocation) settings.addHeader("Moonbase", position);
62
63
const _pages = oldLocation ? pages : pages.reverse();
64
for (const page of _pages) {
65
addSection(page.id, page.name, () => {
66
const breadcrumbs = [
67
{ id: "moonbase", label: "Moonbase" },
68
{ id: page.id, label: page.name }
69
];
70
return (
71
<>
72
<Breadcrumbs
73
className={Margins.marginBottom20}
74
renderCustomBreadcrumb={renderBreadcrumb}
75
breadcrumbs={breadcrumbs}
76
activeId={page.id}
77
>
78
{page.name}
79
</Breadcrumbs>
80
81
<RestartAdviceMessage />
82
<Update />
83
84
<page.element />
85
</>
86
);
87
});
88
}
89
90
if (!oldLocation) settings.addHeader("Moonbase", position);
91
} else {
92
settings.addSection("moonbase", "Moonbase", Moonbase, null, position, notice);
93
94
settings.addSectionMenuItems(
95
"moonbase",
96
...pages.map((page, i) => (
97
<MenuItem key={page.id} id={`moonbase-${page.id}`} label={page.name} action={() => open("moonbase", i)} />
98
))
99
);
100
}
101