91 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 } 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
import Update from "./ui/update";
10
11
const { MenuItem, Text, Breadcrumbs } = Components;
12
13
const Margins = spacepack.require("discord/styles/shared/Margins.css");
14
15
const { open } = spacepack.findByExports("setSection", "clearSubsection")[0].exports.Z;
16
17
let SettingsNotice;
18
const notice = {
19
stores: [MoonbaseSettingsStore],
20
element: () => {
21
// Require it here because lazy loading SUX
22
SettingsNotice ??= spacepack.findByCode("onSaveButtonColor", "FocusRingScope")[0].exports.Z;
23
return (
24
<SettingsNotice
25
submitting={MoonbaseSettingsStore.submitting}
26
onReset={() => {
27
MoonbaseSettingsStore.reset();
28
}}
29
onSave={() => {
30
MoonbaseSettingsStore.writeConfig();
31
}}
32
/>
33
);
34
}
35
};
36
37
function addSection(id: string, name: string, element: React.FunctionComponent) {
38
settings.addSection(`moonbase-${id}`, name, element, null, -2, notice);
39
}
40
41
// FIXME: move to component types
42
type Breadcrumb = {
43
id: string;
44
label: string;
45
};
46
47
function renderBreadcrumb(crumb: Breadcrumb, last: boolean) {
48
return (
49
<Text variant="heading-lg/semibold" tag="h2" color={last ? "header-primary" : "header-secondary"}>
50
{crumb.label}
51
</Text>
52
);
53
}
54
55
if (MoonbaseSettingsStore.getExtensionConfigRaw<boolean>("moonbase", "sections", false)) {
56
settings.addHeader("Moonbase", -2);
57
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
<Update />
76
77
<page.element />
78
</>
79
);
80
});
81
}
82
} else {
83
settings.addSection("moonbase", "Moonbase", Moonbase, null, -2, notice);
84
85
settings.addSectionMenuItems(
86
"moonbase",
87
...pages.map((page, i) => (
88
<MenuItem key={page.id} id={`moonbase-${page.id}`} label={page.name} action={() => open("moonbase", i)} />
89
))
90
);
91
}
92