84 lines
2.7 kB
1
import React from "@moonlight-mod/wp/react";
2
import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
3
import { Text, TabBar } from "@moonlight-mod/wp/discord/components/common/index";
4
import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
5
import { UserSettingsModalStore } from "@moonlight-mod/wp/common_stores";
6
7
import ExtensionsPage from "./extensions";
8
import ConfigPage from "./config";
9
import AboutPage from "./about";
10
import Update from "./update";
11
import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
12
import RestartAdviceMessage from "./RestartAdvice";
13
14
const { Divider } = spacepack.findByCode(".forumOrHome]:")[0].exports.Z;
15
const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0].exports;
16
const TabBarClasses = spacepack.findByCode("nowPlayingColumn:")[0].exports;
17
const { setSection, clearSubsection } = spacepack.findByCode(':"USER_SETTINGS_MODAL_SET_SECTION"')[0].exports.Z;
18
const Margins = spacepack.require("discord/styles/shared/Margins.css");
19
20
export const pages: {
21
id: string;
22
name: string;
23
element: React.FunctionComponent;
24
}[] = [
25
{
26
id: "extensions",
27
name: "Extensions",
28
element: ExtensionsPage
29
},
30
{
31
id: "config",
32
name: "Config",
33
element: ConfigPage
34
},
35
{
36
id: "about",
37
name: "About",
38
element: AboutPage
39
}
40
];
41
42
export function Moonbase(props: { initialTab?: number } = {}) {
43
const subsection = useStateFromStores([UserSettingsModalStore], () => UserSettingsModalStore.getSubsection() ?? 0);
44
const setSubsection = React.useCallback(
45
(to: string) => {
46
if (subsection !== to) setSection("moonbase", to);
47
},
48
[subsection]
49
);
50
51
React.useEffect(
52
() => () => {
53
// Normally there's an onSettingsClose prop you can set but we don't expose it and I don't care enough to add support for it right now
54
clearSubsection("moonbase");
55
MoonbaseSettingsStore.showOnlyUpdateable = false;
56
},
57
[]
58
);
59
60
return (
61
<>
62
<div className={`${TitleBarClasses.children} ${Margins.marginBottom20}`}>
63
<Text className={TitleBarClasses.titleWrapper} variant="heading-lg/semibold" tag="h2">
64
Moonbase
65
</Text>
66
<Divider />
67
<TabBar selectedItem={subsection} onItemSelect={setSubsection} type="top-pill" className={TabBarClasses.tabBar}>
68
{pages.map((page, i) => (
69
<TabBar.Item key={page.id} id={i} className={TabBarClasses.item}>
70
{page.name}
71
</TabBar.Item>
72
))}
73
</TabBar>
74
</div>
75
76
<RestartAdviceMessage />
77
<Update />
78
79
{React.createElement(pages[subsection].element)}
80
</>
81
);
82
}
83
84
export { RestartAdviceMessage, Update };
85