this repo has no description
notnite.com
1import React from "@moonlight-mod/wp/react";
2import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
3import { Text, TabBar } from "@moonlight-mod/wp/discord/components/common/index";
4import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
5import { UserSettingsModalStore } from "@moonlight-mod/wp/common_stores";
6
7import ExtensionsPage from "./extensions";
8import ConfigPage from "./config";
9import Update from "./update";
10import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
11import RestartAdviceMessage from "./RestartAdvice";
12
13const { Divider } = spacepack.findByCode(".forumOrHome]:")[0].exports.Z;
14const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0].exports;
15const TabBarClasses = spacepack.findByCode("nowPlayingColumn:")[0].exports;
16const { setSection, clearSubsection } = spacepack.findByCode(':"USER_SETTINGS_MODAL_SET_SECTION"')[0].exports.Z;
17const Margins = spacepack.require("discord/styles/shared/Margins.css");
18
19export 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
36export 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
78export { RestartAdviceMessage, Update };