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";
5
6import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
7import * as Components from "@moonlight-mod/wp/discord/components/common/index";
8
9const { MenuItem, Text, Breadcrumbs } = Components;
10
11const Margins = spacepack.require("discord/styles/shared/Margins.css");
12
13const { open } = spacepack.findByExports("setSection", "clearSubsection")[0].exports.Z;
14
15let SettingsNotice;
16const 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
35function addSection(id: string, name: string, element: React.FunctionComponent) {
36 settings.addSection(`moonbase-${id}`, name, element, null, -2, notice);
37}
38
39// FIXME: move to component types
40type Breadcrumb = {
41 id: string;
42 label: string;
43};
44
45function renderBreadcrumb(crumb: Breadcrumb, last: boolean) {
46 return (
47 <Text variant="heading-lg/semibold" tag="h2" color={last ? "header-primary" : "header-secondary"}>
48 {crumb.label}
49 </Text>
50 );
51}
52
53if (MoonbaseSettingsStore.getExtensionConfigRaw<boolean>("moonbase", "sections", false)) {
54 settings.addHeader("Moonbase", -2);
55
56 for (const page of pages) {
57 addSection(page.id, page.name, () => {
58 const breadcrumbs = [
59 { id: "moonbase", label: "Moonbase" },
60 { id: page.id, label: page.name }
61 ];
62 return (
63 <>
64 <Breadcrumbs
65 className={Margins.marginBottom20}
66 renderCustomBreadcrumb={renderBreadcrumb}
67 breadcrumbs={breadcrumbs}
68 activeId={page.id}
69 >
70 {page.name}
71 </Breadcrumbs>
72
73 <RestartAdviceMessage />
74 <Update />
75
76 <page.element />
77 </>
78 );
79 });
80 }
81} else {
82 settings.addSection("moonbase", "Moonbase", Moonbase, null, -2, notice);
83
84 settings.addSectionMenuItems(
85 "moonbase",
86 ...pages.map((page, i) => (
87 <MenuItem key={page.id} id={`moonbase-${page.id}`} label={page.name} action={() => open("moonbase", i)} />
88 ))
89 );
90}