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