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 { MenuItem, Text, Breadcrumbs } from "@moonlight-mod/wp/discord/components/common/index";
9
10const 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
29const oldLocation = MoonbaseSettingsStore.getExtensionConfigRaw<boolean>("moonbase", "oldLocation", false);
30const position = oldLocation ? -2 : -9999;
31
32function 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
37type Breadcrumb = {
38 id: string;
39 label: string;
40};
41
42function 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
50if (!oldLocation) {
51 settings.addDivider(position);
52}
53
54if (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}