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].exports.Z;
16
17const notice = {
18 stores: [MoonbaseSettingsStore],
19 element: () => {
20 // Require it here because lazy loading SUX
21 const SettingsNotice = spacepack.findByCode("onSaveButtonColor", "FocusRingScope")[0].exports.Z;
22 return (
23 <SettingsNotice
24 submitting={MoonbaseSettingsStore.submitting}
25 onReset={() => {
26 MoonbaseSettingsStore.reset();
27 }}
28 onSave={() => {
29 MoonbaseSettingsStore.writeConfig();
30 }}
31 />
32 );
33 }
34};
35
36function addSection(id: string, name: string, element: React.FunctionComponent) {
37 settings.addSection(`moonbase-${id}`, name, element, null, -2, notice);
38}
39
40// FIXME: move to component types
41type Breadcrumb = {
42 id: string;
43 label: string;
44};
45
46function renderBreadcrumb(crumb: Breadcrumb, last: boolean) {
47 return (
48 <Text variant="heading-lg/semibold" tag="h2" color={last ? "header-primary" : "header-secondary"}>
49 {crumb.label}
50 </Text>
51 );
52}
53
54if (MoonbaseSettingsStore.getExtensionConfigRaw<boolean>("moonbase", "sections", false)) {
55 settings.addHeader("Moonbase", -2);
56
57 for (const page of pages) {
58 addSection(page.id, page.name, () => {
59 const breadcrumbs = [
60 { id: "moonbase", label: "Moonbase" },
61 { id: page.id, label: page.name }
62 ];
63 return (
64 <>
65 <Breadcrumbs
66 className={Margins.marginBottom20}
67 renderCustomBreadcrumb={renderBreadcrumb}
68 breadcrumbs={breadcrumbs}
69 activeId={page.id}
70 >
71 {page.name}
72 </Breadcrumbs>
73
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}