78 lines
2.6 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 Update from "./update";
10
import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
11
import RestartAdviceMessage from "./RestartAdvice";
12
13
const { Divider } = spacepack.findByCode(".forumOrHome]:")[0].exports.Z;
14
const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0].exports;
15
const TabBarClasses = spacepack.findByCode("nowPlayingColumn:")[0].exports;
16
const { setSection, clearSubsection } = spacepack.findByCode(':"USER_SETTINGS_MODAL_SET_SECTION"')[0].exports.Z;
17
const Margins = spacepack.require("discord/styles/shared/Margins.css");
18
19
export const pages: {
20
id: string;
21
name: string;
22
element: React.FunctionComponent;
23
}[] = [
24
{
25
id: "extensions",
26
name: "Extensions",
27
element: ExtensionsPage
28
},
29
{
30
id: "config",
31
name: "Config",
32
element: ConfigPage
33
}
34
];
35
36
export function Moonbase(props: { initialTab?: number } = {}) {
37
const subsection = useStateFromStores([UserSettingsModalStore], () => UserSettingsModalStore.getSubsection() ?? 0);
38
const setSubsection = React.useCallback(
39
(to: string) => {
40
if (subsection !== to) setSection("moonbase", to);
41
},
42
[subsection]
43
);
44
45
React.useEffect(
46
() => () => {
47
// 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
48
clearSubsection("moonbase");
49
MoonbaseSettingsStore.showOnlyUpdateable = false;
50
},
51
[]
52
);
53
54
return (
55
<>
56
<div className={`${TitleBarClasses.children} ${Margins.marginBottom20}`}>
57
<Text className={TitleBarClasses.titleWrapper} variant="heading-lg/semibold" tag="h2">
58
Moonbase
59
</Text>
60
<Divider />
61
<TabBar selectedItem={subsection} onItemSelect={setSubsection} type="top-pill" className={TabBarClasses.tabBar}>
62
{pages.map((page, i) => (
63
<TabBar.Item key={page.id} id={i} className={TabBarClasses.item}>
64
{page.name}
65
</TabBar.Item>
66
))}
67
</TabBar>
68
</div>
69
70
<RestartAdviceMessage />
71
<Update />
72
73
{React.createElement(pages[subsection].element)}
74
</>
75
);
76
}
77
78
export { RestartAdviceMessage, Update };
79