notnite.com
this repo has no description
Merge branch 'develop' into lunast
-2
CHANGELOG.md
-2
CHANGELOG.md
+1
-1
package.json
+1
-1
package.json
+35
-43
packages/core-extensions/src/moonbase/webpackModules/moonbase.tsx
+35
-43
packages/core-extensions/src/moonbase/webpackModules/moonbase.tsx
···
4
4
import { Moonbase, pages } from "@moonlight-mod/wp/moonbase_ui";
5
5
6
6
import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
7
-
import { Text } from "@moonlight-mod/wp/common_components";
7
+
import { MenuItem } from "@moonlight-mod/wp/common_components";
8
8
9
-
function addSection(name: string, element: React.FunctionComponent) {
10
-
settings.addSection(name, name, element, null, -2, {
11
-
stores: [MoonbaseSettingsStore],
12
-
element: () => {
13
-
// Require it here because lazy loading SUX
14
-
const SettingsNotice =
15
-
spacepack.findByCode("onSaveButtonColor")[0].exports.Z;
16
-
return (
17
-
<SettingsNotice
18
-
submitting={MoonbaseSettingsStore.submitting}
19
-
onReset={() => {
20
-
MoonbaseSettingsStore.reset();
21
-
}}
22
-
onSave={() => {
23
-
MoonbaseSettingsStore.writeConfig();
24
-
}}
25
-
disabled={false}
26
-
/>
27
-
);
28
-
}
29
-
});
30
-
}
9
+
const { open } = spacepack.findByExports("setSection", "clearSubsection")[0]
10
+
.exports.Z;
31
11
32
-
if (moonlight.getConfigOption<boolean>("moonbase", "sections")) {
33
-
const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;
34
-
35
-
settings.addHeader("Moonbase", -2);
36
-
for (const page of Object.values(pages)) {
37
-
addSection(page.name, () => (
38
-
<>
39
-
<Text
40
-
className={Margins.marginBottom20}
41
-
variant="heading-lg/semibold"
42
-
tag="h2"
43
-
>
44
-
Extensions
45
-
</Text>
46
-
<page.element />
47
-
</>
48
-
));
12
+
settings.addSection("moonbase", "Moonbase", Moonbase, null, -2, {
13
+
stores: [MoonbaseSettingsStore],
14
+
element: () => {
15
+
// Require it here because lazy loading SUX
16
+
const SettingsNotice = spacepack.findByCode(
17
+
"onSaveButtonColor",
18
+
"FocusRingScope"
19
+
)[0].exports.Z;
20
+
return (
21
+
<SettingsNotice
22
+
submitting={MoonbaseSettingsStore.submitting}
23
+
onReset={() => {
24
+
MoonbaseSettingsStore.reset();
25
+
}}
26
+
onSave={() => {
27
+
MoonbaseSettingsStore.writeConfig();
28
+
}}
29
+
/>
30
+
);
49
31
}
50
-
} else {
51
-
addSection("Moonbase", Moonbase);
52
-
}
32
+
});
33
+
34
+
settings.addSectionMenuItems(
35
+
"moonbase",
36
+
...pages.map((page, i) => (
37
+
<MenuItem
38
+
key={page.id}
39
+
id={`moonbase-${page.id}`}
40
+
label={page.name}
41
+
action={() => open("moonbase", i)}
42
+
/>
43
+
))
44
+
);
+2
-3
packages/core-extensions/src/moonbase/webpackModules/ui/extensions/card.tsx
+2
-3
packages/core-extensions/src/moonbase/webpackModules/ui/extensions/card.tsx
···
17
17
18
18
import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
19
19
20
-
const { DownloadIcon, TrashIcon, CircleExclamationPointIcon } =
21
-
CommonComponents;
20
+
const { DownloadIcon, TrashIcon, CircleWarningIcon } = CommonComponents;
22
21
23
22
const PanelButton = spacepack.findByCode("Masks.PANEL_BUTTON")[0].exports.Z;
24
23
const TabBarClasses = spacepack.findByExports(
···
127
126
{restartNeeded && (
128
127
<PanelButton
129
128
icon={() => (
130
-
<CircleExclamationPointIcon
129
+
<CircleWarningIcon
131
130
color={CommonComponents.tokens.colors.STATUS_DANGER}
132
131
/>
133
132
)}
+39
-16
packages/core-extensions/src/moonbase/webpackModules/ui/index.tsx
+39
-16
packages/core-extensions/src/moonbase/webpackModules/ui/index.tsx
···
1
1
import React from "@moonlight-mod/wp/common_react";
2
2
import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
3
3
import { Text, TabBar } from "@moonlight-mod/wp/common_components";
4
+
import * as Flux from "@moonlight-mod/wp/common_flux";
5
+
import { UserSettingsModalStore } from "@moonlight-mod/wp/common_stores";
4
6
5
7
import ExtensionsPage from "./extensions";
6
8
import ConfigPage from "./config";
···
11
13
const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0]
12
14
.exports;
13
15
const TabBarClasses = spacepack.findByCode("nowPlayingColumn:")[0].exports;
16
+
const { setSection, clearSubsection } = spacepack.findByExports(
17
+
"setSection",
18
+
"clearSubsection"
19
+
)[0].exports.Z;
14
20
15
-
export const pages: Record<
16
-
string,
21
+
export const pages: {
22
+
id: string;
23
+
name: string;
24
+
element: React.FunctionComponent;
25
+
}[] = [
17
26
{
18
-
name: string;
19
-
element: React.FunctionComponent;
20
-
}
21
-
> = {
22
-
extensions: {
27
+
id: "extensions",
23
28
name: "Extensions",
24
29
element: ExtensionsPage
25
30
},
26
-
config: {
31
+
{
32
+
id: "config",
27
33
name: "Config",
28
34
element: ConfigPage
29
35
}
30
-
};
36
+
];
37
+
38
+
export function Moonbase(props: { initialTab?: number } = {}) {
39
+
const subsection = Flux.useStateFromStores(
40
+
[UserSettingsModalStore],
41
+
() => UserSettingsModalStore.getSubsection() ?? 0
42
+
);
43
+
const setSubsection = React.useCallback(
44
+
(to: string) => {
45
+
if (subsection !== to) setSection("moonbase", to);
46
+
},
47
+
[subsection]
48
+
);
31
49
32
-
export function Moonbase() {
33
-
const [selectedTab, setSelectedTab] = React.useState(Object.keys(pages)[0]);
50
+
React.useEffect(
51
+
() => () => {
52
+
// 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
53
+
clearSubsection("moonbase");
54
+
},
55
+
[]
56
+
);
34
57
35
58
return (
36
59
<>
···
44
67
</Text>
45
68
<Divider />
46
69
<TabBar
47
-
selectedItem={selectedTab}
48
-
onItemSelect={setSelectedTab}
70
+
selectedItem={subsection}
71
+
onItemSelect={setSubsection}
49
72
type="top-pill"
50
73
className={TabBarClasses.tabBar}
51
74
>
52
-
{Object.entries(pages).map(([id, page]) => (
53
-
<TabBar.Item key={id} id={id} className={TabBarClasses.item}>
75
+
{pages.map((page, i) => (
76
+
<TabBar.Item key={page.id} id={i} className={TabBarClasses.item}>
54
77
{page.name}
55
78
</TabBar.Item>
56
79
))}
57
80
</TabBar>
58
81
</div>
59
82
60
-
{React.createElement(pages[selectedTab].element)}
83
+
{React.createElement(pages[subsection].element)}
61
84
</>
62
85
);
63
86
}
+9
-1
packages/core-extensions/src/settings/webpackModules/settings.ts
+9
-1
packages/core-extensions/src/settings/webpackModules/settings.ts
···
6
6
export const Settings: SettingsType = {
7
7
ourSections: [],
8
8
sectionNames: [],
9
+
sectionMenuItems: {},
9
10
10
11
addSection: (section, label, element, color = null, pos, notice) => {
11
12
const data: SettingsSection = {
···
18
19
};
19
20
20
21
Settings.ourSections.push(data);
21
-
Settings.sectionNames.push(label);
22
+
Settings.sectionNames.push(section);
22
23
return data;
24
+
},
25
+
addSectionMenuItems(section, ...newItems) {
26
+
const data = Settings.ourSections.find((x) => x.section === section);
27
+
if (!data || !("element" in data))
28
+
throw new Error(`Could not find section "${section}"`);
29
+
(Settings.sectionMenuItems[section] ??= []).push(...newItems);
30
+
data._moonlight_submenu ??= () => Settings.sectionMenuItems[section];
23
31
},
24
32
25
33
addDivider: (pos = null) => {
+1
-1
packages/types/package.json
+1
-1
packages/types/package.json
+4
-2
packages/types/src/coreExtensions.ts
+4
-2
packages/types/src/coreExtensions.ts
···
1
1
import { FluxDefault, Store } from "./discord/common/Flux";
2
2
import { CommonComponents as CommonComponents_ } from "./coreExtensions/components";
3
3
import { Dispatcher } from "flux";
4
-
import React from "react";
4
+
import React, { ReactElement } from "react";
5
5
import {
6
6
WebpackModule,
7
7
WebpackModuleFunc,
···
50
50
element: React.FunctionComponent;
51
51
pos: number;
52
52
notice?: NoticeProps;
53
-
_moonlight_submenu?: () => any;
53
+
_moonlight_submenu?: () => ReactElement | ReactElement[];
54
54
};
55
55
56
56
export type Settings = {
57
57
ourSections: SettingsSection[];
58
58
sectionNames: string[];
59
+
sectionMenuItems: Record<string, ReactElement[]>;
59
60
60
61
addSection: (
61
62
section: string,
···
65
66
pos?: number,
66
67
notice?: NoticeProps
67
68
) => void;
69
+
addSectionMenuItems: (section: string, ...items: ReactElement[]) => void;
68
70
69
71
addDivider: (pos: number | null) => void;
70
72
addHeader: (label: string, pos: number | null) => void;
+1
-1
pnpm-lock.yaml
+1
-1
pnpm-lock.yaml
···
504
504
engines: {node: '>= 6'}
505
505
506
506
concat-map@0.0.1:
507
-
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
507
+
resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
508
508
509
509
cross-spawn@7.0.3:
510
510
resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}