Support For New Settings UI

src/components/Icons.tsx

@@ -636,3 +636,53 @@ export function VesktopSettingsIcon(props: IconProps) {
         </Icon>
     );
 }
+
+export function EyeIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill={props.fill || "currentColor"}
+                d="M15.56 11.77c.2-.1.44.02.44.23a4 4 0 1 1-4-4c.21 0 .33.25.23.44a2.5 2.5 0 0 0 3.32 3.32Z"
+            />
+            <path
+                clipRule="evenodd"
+                fillRule="evenodd"
+                fill={props.fill || "currentColor"}
+                d="M22.89 11.7c.07.2.07.4 0 .6C22.27 13.9 19.1 21 12 21c-7.11 0-10.27-7.11-10.89-8.7a.83.83 0 0 1 0-.6C1.73 10.1 4.9 3 12 3c7.11 0 10.27 7.11 10.89 8.7Zm-4.5-3.62A15.11 15.11 0 0 1 20.85 12c-.38.88-1.18 2.47-2.46 3.92C16.87 17.62 14.8 19 12 19c-2.8 0-4.87-1.38-6.39-3.08A15.11 15.11 0 0 1 3.15 12c.38-.88 1.18-2.47 2.46-3.92C7.13 6.38 9.2 5 12 5c2.8 0 4.87 1.38 6.39 3.08Z"
+            />
+        </Icon>
+    );
+}
+
+export function ColorPaletteIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill={props.fill || "currentColor"}
+                d="M12.37 9.04c.25-.26.73-.2 1.06.13L15 10.7c.33.33.39.8.13 1.06L4.92 21.84c-.27.26-.74.2-1.07-.13l-1.56-1.54c-.33-.32-.39-.8-.13-1.05l10.2-10.08ZM16.09 5.16c.25-.26.73-.2 1.06.13l1.56 1.54c.33.32.39.8.13 1.05l-2.1 2.08c-.26.25-.74.2-1.07-.13l-1.56-1.54c-.33-.33-.38-.8-.13-1.05l2.1-2.08ZM17.48 14.36a.56.56 0 0 1 1.04 0l.85 2.27 2.27.85c.48.18.48.86 0 1.04l-2.27.85-.85 2.27a.56.56 0 0 1-1.04 0l-.85-2.27-2.27-.85a.56.56 0 0 1 0-1.04l2.27-.85.85-2.27ZM7.6 2.32a.5.5 0 0 1 .94 0L9.17 4l1.66.62a.5.5 0 0 1 0 .93l-1.66.63-.63 1.66a.5.5 0 0 1-.93 0l-.63-1.66-1.66-.63a.5.5 0 0 1 0-.93l1.66-.62.63-1.67Z"
+            />
+        </Icon>
+    );
+}
+
+export function MagnifyingGlassIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path
+                clipRule="evenodd"
+                fillRule="evenodd"
+                fill={props.fill || "currentColor"}
+                d="M15.62 17.03a9 9 0 1 1 1.41-1.41l4.68 4.67a1 1 0 0 1-1.42 1.42l-4.67-4.68ZM17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"
+            />
+        </Icon>
+    );
+}

src/components/ThemeSettings/ThemesTab.tsx

@@ -520,7 +520,7 @@ function ThemesTab() {
     }
 
     return (
-        <SettingsTab title="Themes">
+        <SettingsTab>
             <TabBar
                 type="top"
                 look="brand"
@@ -623,7 +623,7 @@ export function CspErrorCard() {
 
 function UserscriptThemesTab() {
     return (
-        <SettingsTab title="Themes">
+        <SettingsTab>
             <Card className="vc-settings-card">
                 <Heading>Themes are not supported on the Userscript!</Heading>
 

src/components/settings/tabs/sync/BackupAndRestoreTab.tsx

@@ -45,6 +45,7 @@ function BackupAndRestoreTab() {
                         <li>&mdash; Custom QuickCSS</li>
                         <li>&mdash; Theme Links</li>
                         <li>&mdash; Plugin Settings</li>
+                        <li>&mdash; DataStore Data</li>
                     </ul>
                 </Paragraph>
 

src/equicordplugins/iRememberYou/components/ui.tsx

@@ -6,8 +6,10 @@
 
 import { classNameFactory } from "@api/Styles";
 import { BaseText } from "@components/BaseText";
+import { Card } from "@components/Card";
 import { HeadingPrimary } from "@components/Heading";
 import { Paragraph } from "@components/Paragraph";
+import { SettingsTab, wrapTab } from "@components/settings";
 import { openUserProfile } from "@utils/discord";
 import { Avatar, Clickable, React, TextInput, Tooltip, } from "@webpack/common";
 
@@ -21,14 +23,6 @@ function tooltipText(user: IStorageUser) {
     return `${user.username ?? user.tag}, updated at ${updatedAtContent}`;
 }
 
-function SectionDescription() {
-    return (
-        <BaseText>
-            {"Provides a list of users you have mentioned or replied to, or those who own the servers you belong to (owner*), or are members of your guild"}
-        </BaseText>
-    );
-}
-
 function UsersCollectionRows({ usersCollection }: { usersCollection: Data["usersCollection"]; }) {
     if (Object.keys(usersCollection).length === 0) return (
         <BaseText>
@@ -100,18 +94,20 @@ function SearchElement({ usersCollection }: { usersCollection: Data["usersCollec
     );
 }
 
-export function DataUI({ plugin, usersCollection }: { plugin: any; usersCollection: Data["usersCollection"]; }) {
+export function DataUI({ usersCollection }: { usersCollection: Data["usersCollection"]; }) {
     return (
-        <main className={cl("header")}>
-            <BaseText size="lg" weight="bold" tag="h1">
-                IRememberYou
-            </BaseText>
-
-            <SectionDescription />
-            <SearchElement usersCollection={usersCollection} />
+        <SettingsTab>
+            <Card>
+                <Paragraph>
+                    Provides a list of users you have mentioned or replied to, or those who own the servers you belong to (owner*), or are members of your guild
+                </Paragraph>
+                <SearchElement usersCollection={usersCollection} />
+            </Card>
             <div className={cl("rows")}>
                 <UsersCollectionRows usersCollection={usersCollection} />
             </div>
-        </main>
+        </SettingsTab>
     );
 }
+
+export default wrapTab(DataUI, "IRememberYouTab");

src/equicordplugins/iRememberYou/index.tsx

@@ -7,13 +7,13 @@
 import "./styles.css";
 
 import { addMessagePreSendListener, removeMessagePreSendListener } from "@api/MessageEvents";
-import settings from "@plugins/_core/settings";
+import { EyeIcon } from "@components/Icons";
+import SettingsPlugin from "@plugins/_core/settings";
 import { EquicordDevs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { React, } from "@webpack/common";
 
 import { Data } from "./components/data";
-import { DataUI } from "./components/ui";
+import DataUI from "./components/ui";
 
 export default definePlugin({
     name: "IRememberYou",
@@ -24,6 +24,14 @@ export default definePlugin({
     patches: [],
 
     async start() {
+        const customEntriesSections = SettingsPlugin.customEntries;
+        customEntriesSections.push({
+            key: "i_remember_you",
+            title: "I Remember You",
+            Component: () => <DataUI usersCollection={data.usersCollection} />,
+            Icon: EyeIcon
+        });
+
         const data = (this.dataManager = await new Data().withStart());
 
         await data.initializeUsersCollection();
@@ -33,30 +41,13 @@ export default definePlugin({
             data.onMessagePreSend.bind(data)
         );
         data.storageAutoSaveProtocol();
-
-        const customSettingsSections = (
-            settings as any as {
-                customSections: ((ID: Record<string, unknown>) => any)[];
-            }
-        ).customSections;
-
-        customSettingsSections.push(_ => ({
-            section: "iremeberyou.display-data",
-            label: "IRememberYou",
-            id: "IRememberYou",
-            element: () => <DataUI plugin={this} usersCollection={data.usersCollection} />
-        }));
     },
 
     stop() {
         const dataManager = this.dataManager as Data;
-        const customSettingsSections = (
-            Vencord.Plugins.plugins.Settings as any as {
-                customSections: ((ID: Record<string, unknown>) => any)[];
-            }
-        ).customSections;
-        const i = customSettingsSections.findIndex(s => s({}).id === "IRememberYou");
-        if (i !== -1) customSettingsSections.splice(i, 1);
+        const customEntriesSections = SettingsPlugin.customEntries;
+        const i = customEntriesSections.findIndex(entry => entry.key === "i_remember_you");
+        if (i !== -1) customEntriesSections.splice(i, 1);
 
         removeMessagePreSendListener(dataManager._onMessagePreSend_preSend);
         clearInterval(dataManager._storageAutoSaveProtocol_interval);

src/equicordplugins/iRememberYou/styles.css

@@ -26,7 +26,7 @@
 }
 
 .vc-i-remember-you-search {
-    padding-block: 10px;
+    margin-top: 10px;
 }
 
 .vc-i-remember-you-search-user {

src/equicordplugins/iconViewer/IconsTab.tsx

@@ -68,7 +68,7 @@ function IconsTab() {
     const MemoRenderIcons = React.memo(RenderIcons);
 
     return (
-        <SettingsTab title="Icons">
+        <SettingsTab>
             <div className={classes(Margins.top16, "vc-icon-tab-search-bar-grid")}>
                 <TextInput autoFocus value={search} placeholder="Search for an icon..." onChange={setSearch} />
                 <TooltipContainer text="Search by function context">

src/equicordplugins/iconViewer/index.tsx

@@ -4,7 +4,8 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import settings from "@plugins/_core/settings";
+import { MagnifyingGlassIcon } from "@components/Icons";
+import SettingsPlugin from "@plugins/_core/settings";
 import { EquicordDevs } from "@utils/constants";
 import definePlugin, { StartAt } from "@utils/types";
 import { SettingsRouter } from "@webpack/common";
@@ -26,30 +27,18 @@ export default definePlugin({
     },
     settingsAboutComponent: SettingsAbout,
     start() {
-        const customSettingsSections = (
-            settings as any as {
-                customSections: ((ID: Record<string, unknown>) => any)[];
-            }
-        ).customSections;
+        const customEntriesSections = SettingsPlugin.customEntries;
 
-        const IconViewerSection = () => ({
-            section: "VencordDiscordIcons",
-            label: "Icons",
-            element: IconsTab,
-            className: "vc-discord-icons",
-            id: "IconViewer"
+        customEntriesSections.push({
+            key: "icon_viewer",
+            title: "Icon Finder",
+            Component: IconsTab,
+            Icon: MagnifyingGlassIcon
         });
-
-        customSettingsSections.push(IconViewerSection);
     },
     stop() {
-        const customSettingsSections = (
-            settings as any as {
-                customSections: ((ID: Record<string, unknown>) => any)[];
-            }
-        ).customSections;
-
-        const i = customSettingsSections.findIndex(section => section({}).id === "IconViewer");
-        if (i !== -1) customSettingsSections.splice(i, 1);
+        const customEntriesSections = SettingsPlugin.customEntries;
+        const i = customEntriesSections.findIndex(entry => entry.key === "icon_viewer");
+        if (i !== -1) customEntriesSections.splice(i, 1);
     },
 });

src/equicordplugins/themeLibrary/components/ThemeTab.tsx

@@ -275,12 +275,19 @@ function SubmitThemes() {
                 fontSize: "1.5em",
                 color: "var(--text-default)"
             }}>
-            <p> This tab was replaced in favour of the new website: </p>
-            <p><a href="https://discord-themes.com" target="_blank" rel="noreferrer">discord-themes.com</a></p>
+            <p>
+                This tab was replaced in favour of the new website:
+                {" "}
+                <a href="https://discord-themes.com" target="_blank" rel="noreferrer">
+                    discord-themes.com
+                </a>
+            </p>
             <p style={{
                 fontSize: ".75em",
                 color: "var(--text-muted)"
-            }}> Thank you for your understanding!</p>
+            }}>
+                Thank you for your understanding!
+            </p>
         </div>
     );
 }
@@ -290,7 +297,7 @@ function ThemeLibrary() {
     const [currentTab, setCurrentTab] = useState(TabItem.THEMES);
 
     return (
-        <SettingsTab title="Theme Library">
+        <SettingsTab>
             <TabBar
                 type="top"
                 look="brand"

src/equicordplugins/themeLibrary/index.tsx

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { ColorPaletteIcon } from "@components/Icons";
+import SettingsPlugin from "@plugins/_core/settings";
 import { EquicordDevs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { SettingsRouter } from "@webpack/common";
@@ -22,34 +24,19 @@ export default definePlugin({
     },
 
     start() {
-        const customSettingsSections = (
-            Vencord.Plugins.plugins.Settings as any as {
-                customSections: ((ID: Record<string, unknown>) => any)[];
-            }
-        ).customSections;
+        const customEntriesSections = SettingsPlugin.customEntries;
 
-        const ThemeSection = () => ({
-            section: "ThemeLibrary",
-            label: "Theme Library",
-            searchableTitles: ["Theme Library"],
-            element: require("./components/ThemeTab").default,
-            id: "ThemeSection",
+        customEntriesSections.push({
+            key: "theme_library",
+            title: "Theme Library",
+            Component: require("./components/ThemeTab").default,
+            Icon: ColorPaletteIcon
         });
-
-        customSettingsSections.push(ThemeSection);
     },
 
     stop() {
-        const customSettingsSections = (
-            Vencord.Plugins.plugins.Settings as any as {
-                customSections: ((ID: Record<string, unknown>) => any)[];
-            }
-        ).customSections;
-
-        const i = customSettingsSections.findIndex(
-            section => section({}).id === "ThemeSection"
-        );
-
-        if (i !== -1) customSettingsSections.splice(i, 1);
+        const customEntriesSections = SettingsPlugin.customEntries;
+        const i = customEntriesSections.findIndex(entry => entry.key === "theme_library");
+        if (i !== -1) customEntriesSections.splice(i, 1);
     },
 });

src/plugins/_core/settings.tsx

@@ -86,34 +86,6 @@ const settings = definePluginSettings({
     }
 });
 
-export function buildEntry(options: EntryOptions): SettingsLayoutNode {
-    const { key, title, panelTitle = title, Component, Icon } = options;
-
-    return ({
-        key,
-        type: LayoutTypes.SIDEBAR_ITEM,
-        legacySearchKey: title.toUpperCase(),
-        useTitle: () => title,
-        icon: () => <Icon width={20} height={20} />,
-        buildLayout: () => [
-            {
-                key: key + "_panel",
-                type: LayoutTypes.PANEL,
-                useTitle: () => panelTitle,
-                buildLayout: () => [
-                    {
-                        key: key + "_pane",
-                        type: LayoutTypes.PANE,
-                        buildLayout: () => [],
-                        render: () => <Component />,
-                        useTitle: () => panelTitle
-                    }
-                ]
-            }
-        ]
-    });
-}
-
 export default definePlugin({
     name: "Settings",
     description: "Adds Settings UI and debug info",
@@ -126,6 +98,11 @@ export default definePlugin({
         {
             find: ".versionHash",
             replacement: [
+                // for whatever reason the first letter of RELEASE_CHANNEL is now lowercase, so we fix that here because it looks better imo
+                {
+                    match: /\.RELEASE_CHANNEL/,
+                    replace: "$&.replace(/^./, c => c.toUpperCase())"
+                },
                 {
                     match: /\.compactInfo.+?(?=null!=(\i)&&(.{0,20}\i\.Text.{0,200}?,children:).{0,15}?("span"),({className:\i\.versionHash,children:\["Build Override: ",\1\.id\]\})\)\}\))/,
                     replace: (m, _buildOverride, makeRow, component, props) => {
@@ -185,55 +162,85 @@ export default definePlugin({
         }
     ],
 
+    buildEntry(options: EntryOptions): SettingsLayoutNode {
+        const { key, title, panelTitle = title, Component, Icon } = options;
+
+        return ({
+            key,
+            type: LayoutTypes.SIDEBAR_ITEM,
+            legacySearchKey: title.toUpperCase(),
+            useTitle: () => title,
+            icon: () => <Icon width={20} height={20} />,
+            buildLayout: () => [
+                {
+                    key: key + "_panel",
+                    type: LayoutTypes.PANEL,
+                    useTitle: () => panelTitle,
+                    buildLayout: () => [
+                        {
+                            key: key + "_pane",
+                            type: LayoutTypes.PANE,
+                            buildLayout: () => [],
+                            render: () => <Component />,
+                            useTitle: () => panelTitle
+                        }
+                    ]
+                }
+            ]
+        });
+    },
+
     buildLayout(originalLayoutBuilder: SettingsLayoutBuilder) {
         const layout = originalLayoutBuilder.buildLayout();
         if (originalLayoutBuilder.key !== "$Root") return layout;
         if (!Array.isArray(layout)) return layout;
 
-        if (layout.some(s => s?.key === "vencord_section")) return layout;
+        if (layout.some(s => s?.key === "equicord_section")) return layout;
+
+        const { buildEntry } = this;
 
         const vencordEntries: SettingsLayoutNode[] = [
             buildEntry({
-                key: "vencord_main",
+                key: "equicord_main",
                 title: "Equicord",
                 panelTitle: "Equicord Settings",
                 Component: VencordTab,
                 Icon: MainSettingsIcon
             }),
             buildEntry({
-                key: "vencord_plugins",
+                key: "equicord_plugins",
                 title: "Plugins",
                 Component: PluginsTab,
                 Icon: PluginsIcon
             }),
             buildEntry({
-                key: "vencord_themes",
+                key: "equicord_themes",
                 title: "Themes",
                 Component: ThemesTab,
                 Icon: PaintbrushIcon
             }),
             !IS_UPDATER_DISABLED && UpdaterTab && buildEntry({
-                key: "vencord_updater",
+                key: "equicord_updater",
                 title: "Updater",
                 panelTitle: "Equicord Updater",
                 Component: UpdaterTab,
                 Icon: UpdaterIcon
             }),
             buildEntry({
-                key: "vencord_cloud",
+                key: "equicord_cloud",
                 title: "Cloud",
                 panelTitle: "Equicord Cloud",
                 Component: CloudTab,
                 Icon: CloudIcon
             }),
             buildEntry({
-                key: "vencord_backup_restore",
+                key: "equicord_backup_restore",
                 title: "Backup & Restore",
                 Component: BackupAndRestoreTab,
                 Icon: BackupRestoreIcon
             }),
             IS_DEV && PatchHelperTab && buildEntry({
-                key: "vencord_patch_helper",
+                key: "equicord_patch_helper",
                 title: "Patch Helper",
                 Component: PatchHelperTab,
                 Icon: PatchHelperIcon
@@ -245,7 +252,7 @@ export default definePlugin({
                 if (Object.values(FallbackSectionTypes).includes(section)) return null;
 
                 return buildEntry({
-                    key: `vencord_deprecated_custom_${section}`,
+                    key: `equicord_deprecated_custom_${section}`,
                     title: label,
                     Component: element,
                     Icon: section === "Vesktop" ? VesktopSettingsIcon : PlaceholderIcon
@@ -254,9 +261,9 @@ export default definePlugin({
         ].filter(isTruthy);
 
         const vencordSection: SettingsLayoutNode = {
-            key: "vencord_section",
+            key: "equicord_section",
             type: LayoutTypes.SECTION,
-            useLabel: () => "Vencord",
+            useLabel: () => "Equicord",
             buildLayout: () => vencordEntries
         };