profxadke/Vencord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat(settings): new settings design (#261)

Browse source
This commit is contained in:
megumin 2022-11-25 22:38:55 +00:00 committed by GitHub
parent a85ec594a7
commit 6b55dee9fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 369 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/PatchHelper.tsx
View file

@ -18,7 +18,7 @@
import { debounce } from "../utils/debounce";
import { makeCodeblock } from "../utils/misc";
import { Button, Clipboard, Forms, Margins, Parser, React, Switch, TextInput } from "../webpack/common";
import { Button, Clipboard, Forms, Margins, Parser, React, Switch, Text, TextInput } from "../webpack/common";
import { search } from "../webpack/webpack";
import { CheckedTextInput } from "./CheckedTextInput";
import ErrorBoundary from "./ErrorBoundary";
@ -243,7 +243,8 @@ function PatchHelper() {
}
return (
<>
<Forms.FormSection>
<Text variant="heading-md/normal" tag="h2" className={Margins.marginBottom8}>Patch Helper</Text>
<Forms.FormTitle>find</Forms.FormTitle>
<TextInput
type="text"
@ -288,7 +289,7 @@ function PatchHelper() {
<Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button>
</>
)}
</>
</Forms.FormSection>
);
}

6
src/components/PluginSettings/index.tsx
View file

@ -243,9 +243,9 @@ export default ErrorBoundary.wrap(function Settings() {
};
return (
<Forms.FormSection tag="h1" title="Vencord">
<Forms.FormSection>
<Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
Plugins
Filters
</Forms.FormTitle>
<ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
@ -268,6 +268,8 @@ export default ErrorBoundary.wrap(function Settings() {
</div>
</div>
<Forms.FormTitle className={Margins.marginTop20}>Plugins</Forms.FormTitle>
<div style={styles.PluginsGrid}>
{sortedPlugins?.length ? sortedPlugins
.filter(a => !a.required && !dependencyCheck(a.name, depMap).length && pluginFilter(a))

140
src/components/Settings.tsx
View file

@ -1,140 +0,0 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2022 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { useSettings } from "../api/settings";
import IpcEvents from "../utils/IpcEvents";
import { useAwaiter } from "../utils/misc";
import { downloadSettingsBackup, uploadSettingsBackup } from "../utils/settingsSync";
import { Button, Card, Forms, Margins, React, Switch } from "../webpack/common";
import DonateButton from "./DonateButton";
import ErrorBoundary from "./ErrorBoundary";
import { Flex } from "./Flex";
import { handleComponentFailed } from "./handleComponentFailed";
export default ErrorBoundary.wrap(function Settings() {
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
const settings = useSettings();
return (
<Forms.FormSection tag="h1" title="Vencord">
<Card style={{
padding: "1em",
display: "flex",
flexDirection: "row",
marginBottom: "1em"
}}>
<div>
<Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
<Forms.FormText>
Please consider supporting the Development of Vencord by donating!
</Forms.FormText>
<DonateButton style={{ transform: "translateX(-1em)" }} />
</div>
<img
role="presentation"
src="https://cdn.discordapp.com/emojis/1026533090627174460.png"
alt=""
style={{ marginLeft: "auto", transform: "rotate(10deg)" }}
/>
</Card>
<Forms.FormTitle tag="h5">
Settings
</Forms.FormTitle>
<Forms.FormText className={Margins.marginBottom8}>
Settings Directory: <code style={{ userSelect: "text", cursor: "text" }}>{settingsDir}</code>
</Forms.FormText>
{!IS_WEB && <Flex className={Margins.marginBottom20}>
<Button
onClick={() => window.DiscordNative.app.relaunch()}
size={Button.Sizes.SMALL}
color={Button.Colors.GREEN}
>
Reload
</Button>
<Button
onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)}
size={Button.Sizes.SMALL}
disabled={settingsDirPending}
>
Launch Directory
</Button>
<Button
onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_MONACO_EDITOR)}
size={Button.Sizes.SMALL}
disabled={settingsDir === "Loading..."}
>
Open QuickCSS File
</Button>
</Flex>}
{IS_WEB && <Button
onClick={() => require("./Monaco").launchMonacoEditor()}
size={Button.Sizes.SMALL}
disabled={settingsDir === "Loading..."}
>
Open QuickCSS File
</Button>}
<Forms.FormDivider />
<Switch
value={settings.useQuickCss}
onChange={(v: boolean) => settings.useQuickCss = v}
note="Loads styles from your QuickCss file"
>
Use QuickCss
</Switch>
{!IS_WEB && <Switch
value={settings.enableReactDevtools}
onChange={(v: boolean) => settings.enableReactDevtools = v}
note="Requires a full restart"
>
Enable React Developer Tools
</Switch>}
{!IS_WEB && <Switch
value={settings.notifyAboutUpdates}
onChange={(v: boolean) => settings.notifyAboutUpdates = v}
note="Shows a Toast on StartUp"
>
Get notified about new Updates
</Switch>}
<Forms.FormDivider />
<Forms.FormTitle tag="h5">Settings Sync</Forms.FormTitle>
<Flex>
<Button
onClick={uploadSettingsBackup}
size={Button.Sizes.SMALL}
>
Import Settings
</Button>
<Button
onClick={downloadSettingsBackup}
size={Button.Sizes.SMALL}
>
Export Settings
</Button>
</Flex>
</Forms.FormSection >
);
}, {
message: "Failed to render the Settings. If this persists, try using the installer to reinstall!",
onError: handleComponentFailed,
});

69
src/components/VencordSettings/BackupRestoreTab.tsx Normal file
View file

@ -0,0 +1,69 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2022 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { downloadSettingsBackup, uploadSettingsBackup } from "../../utils/settingsSync";
import { Button, Card, Forms, Margins, Text } from "../../webpack/common";
import ErrorBoundary from "../ErrorBoundary";
import { Flex } from "../Flex";
function BackupRestoreTab() {
return (
<Forms.FormSection title="Settings Sync">
<Card style={{
backgroundColor: "var(--info-warning-background)",
borderColor: "var(--info-warning-foreground)",
color: "var(--info-warning-text)",
padding: "1em",
marginBottom: "0.5em",
}}>
<Flex flexDirection="column">
<strong>Warning</strong>
<span>Importing a settings file will overwrite your current settings.</span>
</Flex>
</Card>
<Text variant="text-md/normal" className={Margins.marginBottom8}>
You can import and export your Vencord settings as a JSON file.
This allows you to easily transfer your settings to another device,
or recover your settings after reinstalling Vencord or Discord.
</Text>
<Text variant="text-md/normal" className={Margins.marginBottom8}>
Settings Export contains:
<ul>
<li>&mdash; Custom QuickCSS</li>
<li>&mdash; Plugin Settings</li>
</ul>
</Text>
<Flex>
<Button
onClick={uploadSettingsBackup}
size={Button.Sizes.SMALL}
>
Import Settings
</Button>
<Button
onClick={downloadSettingsBackup}
size={Button.Sizes.SMALL}
>
Export Settings
</Button>
</Flex>
</Forms.FormSection>
);
}
export default ErrorBoundary.wrap(BackupRestoreTab);

22
src/components/VencordSettings/PluginsTab.tsx Normal file
View file

@ -0,0 +1,22 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2022 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import ErrorBoundary from "../ErrorBoundary";
import PluginSettings from "../PluginSettings";
export default ErrorBoundary.wrap(PluginSettings);

18
src/components/Updater.tsx → src/components/VencordSettings/Updater.tsx
View file

@ -18,14 +18,14 @@
import gitHash from "~git-hash";
import { classes, useAwaiter } from "../utils/misc";
import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "../utils/updater";
import { Alerts, Button, Card, Forms, Margins, Parser, React, Toasts } from "../webpack/common";
import ErrorBoundary from "./ErrorBoundary";
import { ErrorCard } from "./ErrorCard";
import { Flex } from "./Flex";
import { handleComponentFailed } from "./handleComponentFailed";
import { Link } from "./Link";
import { classes, useAwaiter } from "../../utils/misc";
import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "../../utils/updater";
import { Alerts, Button, Card, Forms, Margins, Parser, React, Toasts } from "../../webpack/common";
import ErrorBoundary from "../ErrorBoundary";
import { ErrorCard } from "../ErrorCard";
import { Flex } from "../Flex";
import { handleComponentFailed } from "../handleComponentFailed";
import { Link } from "../Link";
function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) {
return async () => {
@ -192,7 +192,7 @@ function Updater() {
};
return (
<Forms.FormSection tag="h1" title="Vencord Updater">
<Forms.FormSection>
<Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
<Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (

134
src/components/VencordSettings/VencordTab.tsx Normal file
View file

@ -0,0 +1,134 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2022 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { useSettings } from "../../api/settings";
import IpcEvents from "../../utils/IpcEvents";
import { useAwaiter } from "../../utils/misc";
import { Button, Card, Forms, React, Switch } from "../../webpack/common";
import DonateButton from "../DonateButton";
import ErrorBoundary from "../ErrorBoundary";
const st = (style: string) => `vcSettings${style}`;
function VencordSettings() {
const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), "Loading...");
const settings = useSettings();
return (
<React.Fragment>
<DonateCard />
<Forms.FormSection title="Quick Actions">
<Card className={st("QuickActionCard")}>
{IS_WEB ? (
<Button
onClick={() => require("./Monaco").launchMonacoEditor()}
size={Button.Sizes.SMALL}
disabled={settingsDir === "Loading..."}>
Open QuickCSS File
</Button>
) : (
<React.Fragment>
<Button
onClick={() => window.DiscordNative.app.relaunch()}
size={Button.Sizes.SMALL}>
Restart Client
</Button>
<Button
onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_MONACO_EDITOR)}
size={Button.Sizes.SMALL}
disabled={settingsDir === "Loading..."}>
Open QuickCSS File
</Button>
<Button
onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)}
size={Button.Sizes.SMALL}
disabled={settingsDirPending}>
Open Settings Folder
</Button>
<Button
onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, "https://github.com/Vendicated/Vencord")}
size={Button.Sizes.SMALL}
disabled={settingsDirPending}>
Open in GitHub
</Button>
</React.Fragment>
)}
</Card>
</Forms.FormSection>
<Forms.FormDivider />
<Forms.FormSection title="Settings">
<Switch
value={settings.useQuickCss}
onChange={(v: boolean) => settings.useQuickCss = v}
note="Loads styles from your QuickCss file">
Use QuickCss
</Switch>
{!IS_WEB && (
<React.Fragment>
<Switch
value={settings.enableReactDevtools}
onChange={(v: boolean) => settings.enableReactDevtools = v}
note="Requires a full restart">
Enable React Developer Tools
</Switch>
<Switch
value={settings.notifyAboutUpdates}
onChange={(v: boolean) => settings.notifyAboutUpdates = v}
note="Shows a Toast on StartUp">
Get notified about new Updates
</Switch>
</React.Fragment>
)}
</Forms.FormSection>
</React.Fragment>
);
}
function DonateCard() {
return (
<Card style={{
padding: "1em",
display: "flex",
flexDirection: "row",
marginBottom: "1em",
marginTop: "1em"
}}>
<div>
<Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
<Forms.FormText>
Please consider supporting the Development of Vencord by donating!
</Forms.FormText>
<DonateButton style={{ transform: "translateX(-1em)" }} />
</div>
<img
role="presentation"
src="https://cdn.discordapp.com/emojis/1026533090627174460.png"
alt=""
style={{ marginLeft: "auto", transform: "rotate(10deg)" }}
/>
</Card>
);
}
export default ErrorBoundary.wrap(VencordSettings);

84
src/components/VencordSettings/index.tsx Normal file
View file

@ -0,0 +1,84 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2022 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import cssText from "~fileContent/settingsStyles.css";
import { lazyWebpack } from "../../utils/misc";
import { filters } from "../../webpack";
import { Forms, React, Router, Text } from "../../webpack/common";
import ErrorBoundary from "../ErrorBoundary";
import BackupRestoreTab from "./BackupRestoreTab";
import PluginsTab from "./PluginsTab";
import Updater from "./Updater";
import VencordSettings from "./VencordTab";
const style = document.createElement("style");
style.textContent = cssText;
document.head.appendChild(style);
const st = (style: string) => `vcSettings${style}`;
const TabBar = lazyWebpack(filters.byCode('[role="tab"][aria-disabled="false"]'));
interface SettingsProps {
tab: string;
}
const SettingsTabs = {
VencordSettings: { name: "Vencord", component: () => <VencordSettings /> },
VencordPlugins: { name: "Plugins", component: () => <PluginsTab /> },
VencordThemes: { name: "Themes", component: () => <Text variant="text-md/medium">Coming soon to a Vencord near you!</Text> },
VencordUpdater: { name: "Updater", component: () => Updater ? <Updater /> : null },
VencordSettingsSync: { name: "Backup & Restore", component: () => <BackupRestoreTab /> },
};
function Settings(props: SettingsProps) {
const { tab = "VencordSettings" } = props;
const CurrentTab = SettingsTabs[tab]?.component ?? null;
return <Forms.FormSection>
<Text variant="heading-md/normal" tag="h2">Vencord Settings</Text>
<TabBar
type={TabBar.Types.TOP}
look={TabBar.Looks.BRAND}
className={st("TabBar")}
selectedItem={tab}
onItemSelect={Router.open}
>
{Object.entries(SettingsTabs).map(([key, { name }]) => {
return <TabBar.Item
id={key}
className={st("TabBarItem")}
key={key}>
{name}
</TabBar.Item>;
})}
</TabBar>
<Forms.FormDivider />
<CurrentTab />
</Forms.FormSection >;
}
export default function (props: SettingsProps) {
return <ErrorBoundary>
<Settings tab={props.tab} />
</ErrorBoundary>;
}

23
src/components/VencordSettings/settingsStyles.css Normal file
View file

@ -0,0 +1,23 @@
.vcSettingsTabBar {
margin-top: 20px;
margin-bottom: -2px;
border-bottom: 2px solid var(--background-modifier-accent);
}
.vcSettingsTabBarItem {
margin-right: 32px;
padding-bottom: 16px;
margin-bottom: -2px;
}
.vcSettingsQuickActionCard {
padding: 1em;
display: flex;
gap: 1em;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
flex-grow: 1;
flex-direction: row;
margin-bottom: 1em;
}

3
src/components/index.ts
View file

@ -18,5 +18,4 @@
export { default as PatchHelper } from "./PatchHelper";
export { default as PluginSettings } from "./PluginSettings";
export { default as Settings } from "./Settings";
export { default as Updater } from "./Updater";
export { default as VencordSettings } from "./VencordSettings";

19
src/plugins/settings.tsx
View file

@ -19,8 +19,11 @@
import gitHash from "~git-hash";
import { Devs } from "../utils/constants";
import { LazyComponent } from "../utils/misc";
import definePlugin from "../utils/types";
const SettingsComponent = LazyComponent(() => require("../components/VencordSettings").default);
export default definePlugin({
name: "Settings",
description: "Adds Settings UI and debug info",
@ -42,13 +45,15 @@ export default definePlugin({
replacement: {
match: /\{section:(.{1,2})\.ID\.HEADER,\s*label:(.{1,2})\..{1,2}\.Messages\.ACTIVITY_SETTINGS\}/,
replace: (m, mod) => {
const updater = !IS_WEB ? '{section:"VencordUpdater",label:"Updater",element:Vencord.Components.Updater},' : "";
const updater = !IS_WEB ? '{section:"VencordUpdater",label:"Updater",element:Vencord.Plugins.plugins.Settings.tabs.updater},' : "";
const patchHelper = IS_DEV ? '{section:"VencordPatchHelper",label:"Patch Helper",element:Vencord.Components.PatchHelper},' : "";
return (
`{section:${mod}.ID.HEADER,label:"Vencord"},` +
'{section:"VencordSetting",label:"Vencord",element:Vencord.Components.Settings},' +
'{section:"VencordPlugins",label:"Plugins",element:Vencord.Components.PluginSettings},' +
'{section:"VencordSettings",label:"Vencord",element:Vencord.Plugins.plugins.Settings.tabs.vencord},' +
'{section:"VencordPlugins",label:"Plugins",element:Vencord.Plugins.plugins.Settings.tabs.plugins},' +
'{section:"VencordThemes",label:"Themes",element:Vencord.Plugins.plugins.Settings.tabs.themes},' +
updater +
'{section:"VencordSettingsSync",label:"Backup & Restore",element:Vencord.Plugins.plugins.Settings.tabs.sync},' +
patchHelper +
`{section:${mod}.ID.DIVIDER},${m}`
);
@ -56,6 +61,14 @@ export default definePlugin({
}
}],
tabs: {
vencord: () => <SettingsComponent tab="VencordSettings" />,
plugins: () => <SettingsComponent tab="VencordPlugins" />,
themes: () => <SettingsComponent tab="VencordThemes" />,
updater: () => <SettingsComponent tab="VencordUpdater" />,
sync: () => <SettingsComponent tab="VencordSettingsSync" />
},
get electronVersion() {
return VencordNative.getVersions().electron || window.armcord?.electron || null;
},

2
src/plugins/spotifyControls/SpotifyStore.ts
View file

@ -16,7 +16,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import cssText from "~fileContent/styles.css";
import cssText from "~fileContent/spotifyStyles.css";
import IpcEvents from "../../utils/IpcEvents";
import { lazyWebpack } from "../../utils/misc";

0
src/plugins/spotifyControls/styles.css → src/plugins/spotifyControls/spotifyStyles.css
View file

2
src/webpack/common.tsx
View file

@ -195,7 +195,7 @@ export type TextProps = React.PropsWithChildren & {
className?: string;
};
export type TextVariant = "heading-sm/normal" | "heading-sm/medium" | "heading-sm/bold" | "heading-md/normal" | "heading-md/medium" | "heading-md/bold" | "heading-lg/normal" | "heading-lg/medium" | "heading-lg/bold" | "heading-xl/normal" | "heading-xl/medium" | "heading-xl/bold" | "heading-xxl/normal" | "heading-xxl/medium" | "heading-xxl/bold" | "eyebrow" | "heading-deprecated-14/normal" | "heading-deprecated-14/medium" | "heading-deprecated-14/bold" | "text-xxs/normal" | "text-xxs/medium" | "text-xxs/semibold" | "text-xxs/bold" | "text-xs/normal" | "text-xs/medium" | "text-xs/semibold" | "text-xs/bold" | "text-sm/normal" | "text-sm/medium" | "text-sm/semibold" | "text-sm/bold" | "text-md/normal" | "text-md/medium" | "text-md/semibold" | "text-md/bold" | "text-lg/normal" | "text-lg/medium" | "text-lg/semibold" | "text-lg/bold" | "display-md" | "display-lg" | "code";
export type TextVariant = "heading-sm/normal" | "heading-sm/medium" | "heading-sm/bold" | "heading-md/normal" | "heading-md/medium" | "heading-md/bold" | "heading-lg/normal" | "heading-lg/medium" | "heading-lg/bold" | "heading-xl/normal" | "heading-xl/medium" | "heading-xl/bold" | "heading-xxl/normal" | "heading-xxl/medium" | "heading-xxl/bold" | "eyebrow" | "heading-deprecated-14/normal" | "heading-deprecated-14/medium" | "heading-deprecated-14/bold" | "text-xxs/normal" | "text-xxs/medium" | "text-xxs/semibold" | "text-xxs/bold" | "text-xs/normal" | "text-xs/medium" | "text-xs/semibold" | "text-xs/bold" | "text-sm/normal" | "text-sm/medium" | "text-sm/semibold" | "text-sm/bold" | "text-md/normal" | "text-md/medium" | "text-md/semibold" | "text-md/bold" | "text-lg/normal" | "text-lg/medium" | "text-lg/semibold" | "text-lg/bold" | "display-sm" | "display-md" | "display-lg" | "code";
type RC<C> = React.ComponentType<React.PropsWithChildren<C & Record<string, any>>>;
interface Menu {