this repo has no description
notnite.com
1import settings from "@moonlight-mod/wp/settings_settings";
2import React from "@moonlight-mod/wp/react";
3import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
4import { Moonbase, pages, RestartAdviceMessage, Update } from "@moonlight-mod/wp/moonbase_ui";
5import UserSettingsModalActionCreators from "@moonlight-mod/wp/discord/actions/UserSettingsModalActionCreators";
6import Margins from "@moonlight-mod/wp/discord/styles/shared/Margins.css";
7import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
8import { Text, Breadcrumbs } from "@moonlight-mod/wp/discord/components/common/index";
9import { MenuItem } from "@moonlight-mod/wp/contextMenu_contextMenu";
10
11const 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
30const oldLocation = MoonbaseSettingsStore.getExtensionConfigRaw<boolean>("moonbase", "oldLocation", false);
31const position = oldLocation ? -2 : -9999;
32
33function 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
38type Breadcrumb = {
39 id: string;
40 label: string;
41};
42
43function 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
51if (!oldLocation) {
52 settings.addDivider(position);
53}
54
55if (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}