From 862c43e60da2478cdb70054d412eeb1537607e55 Mon Sep 17 00:00:00 2001 From: thororen1234 <78185467+thororen1234@users.noreply.github.com> Date: Sat, 6 Dec 2025 00:01:38 -0500 Subject: [PATCH] Support For New Settings UI --- src/components/Icons.tsx | 50 +++++++++++ src/components/ThemeSettings/ThemesTab.tsx | 4 +- .../tabs/sync/BackupAndRestoreTab.tsx | 1 + .../iRememberYou/components/ui.tsx | 30 +++---- src/equicordplugins/iRememberYou/index.tsx | 37 +++----- src/equicordplugins/iRememberYou/styles.css | 2 +- src/equicordplugins/iconViewer/IconsTab.tsx | 2 +- src/equicordplugins/iconViewer/index.tsx | 33 +++---- .../themeLibrary/components/ThemeTab.tsx | 15 +++- src/equicordplugins/themeLibrary/index.tsx | 35 +++----- src/plugins/_core/settings.tsx | 85 ++++++++++--------- 11 files changed, 161 insertions(+), 133 deletions(-) diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx index 041960c92..b3925d1f8 100644 --- a/src/components/Icons.tsx +++ b/src/components/Icons.tsx @@ -636,3 +636,53 @@ export function VesktopSettingsIcon(props: IconProps) { ); } + +export function EyeIcon(props: IconProps) { + return ( + + + + + ); +} + +export function ColorPaletteIcon(props: IconProps) { + return ( + + + + ); +} + +export function MagnifyingGlassIcon(props: IconProps) { + return ( + + + + ); +} diff --git a/src/components/ThemeSettings/ThemesTab.tsx b/src/components/ThemeSettings/ThemesTab.tsx index f283e48e3..57315dfb4 100644 --- a/src/components/ThemeSettings/ThemesTab.tsx +++ b/src/components/ThemeSettings/ThemesTab.tsx @@ -520,7 +520,7 @@ function ThemesTab() { } return ( - + + Themes are not supported on the Userscript! diff --git a/src/components/settings/tabs/sync/BackupAndRestoreTab.tsx b/src/components/settings/tabs/sync/BackupAndRestoreTab.tsx index 312dc204b..141442246 100644 --- a/src/components/settings/tabs/sync/BackupAndRestoreTab.tsx +++ b/src/components/settings/tabs/sync/BackupAndRestoreTab.tsx @@ -45,6 +45,7 @@ function BackupAndRestoreTab() {
  • — Custom QuickCSS
  • — Theme Links
  • — Plugin Settings
    • +
  • — DataStore Data
    • diff --git a/src/equicordplugins/iRememberYou/components/ui.tsx b/src/equicordplugins/iRememberYou/components/ui.tsx index 0e3cb03d4..41dabc345 100644 --- a/src/equicordplugins/iRememberYou/components/ui.tsx +++ b/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 ( - - {"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"} - - ); -} - function UsersCollectionRows({ usersCollection }: { usersCollection: Data["usersCollection"]; }) { if (Object.keys(usersCollection).length === 0) return ( @@ -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 ( -
    - - IRememberYou - - - - + + + + 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 + + +
    -
    +     ); } + +export default wrapTab(DataUI, "IRememberYouTab"); diff --git a/src/equicordplugins/iRememberYou/index.tsx b/src/equicordplugins/iRememberYou/index.tsx index ed8c24cc9..92f26f485 100644 --- a/src/equicordplugins/iRememberYou/index.tsx +++ b/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: () => , + 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) => any)[]; - } - ).customSections; - - customSettingsSections.push(_ => ({ - section: "iremeberyou.display-data", - label: "IRememberYou", - id: "IRememberYou", - element: () => - })); }, stop() { const dataManager = this.dataManager as Data; - const customSettingsSections = ( - Vencord.Plugins.plugins.Settings as any as { - customSections: ((ID: Record) => 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); diff --git a/src/equicordplugins/iRememberYou/styles.css b/src/equicordplugins/iRememberYou/styles.css index 9eb1a6297..cf29f97fb 100644 --- a/src/equicordplugins/iRememberYou/styles.css +++ b/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 { diff --git a/src/equicordplugins/iconViewer/IconsTab.tsx b/src/equicordplugins/iconViewer/IconsTab.tsx index 61aa7dc70..d2691293a 100644 --- a/src/equicordplugins/iconViewer/IconsTab.tsx +++ b/src/equicordplugins/iconViewer/IconsTab.tsx @@ -68,7 +68,7 @@ function IconsTab() { const MemoRenderIcons = React.memo(RenderIcons); return ( - +
    diff --git a/src/equicordplugins/iconViewer/index.tsx b/src/equicordplugins/iconViewer/index.tsx index 0efb452bf..30d295d4c 100644 --- a/src/equicordplugins/iconViewer/index.tsx +++ b/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) => 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) => 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); }, }); diff --git a/src/equicordplugins/themeLibrary/components/ThemeTab.tsx b/src/equicordplugins/themeLibrary/components/ThemeTab.tsx index 0dec07f65..468e49f23 100644 --- a/src/equicordplugins/themeLibrary/components/ThemeTab.tsx +++ b/src/equicordplugins/themeLibrary/components/ThemeTab.tsx @@ -275,12 +275,19 @@ function SubmitThemes() { fontSize: "1.5em", color: "var(--text-default)" }}> -

    This tab was replaced in favour of the new website:

    -

    discord-themes.com

    +

    + This tab was replaced in favour of the new website: + {" "} + + discord-themes.com + +

    Thank you for your understanding!

    + }}> + Thank you for your understanding! +

    ); } @@ -290,7 +297,7 @@ function ThemeLibrary() { const [currentTab, setCurrentTab] = useState(TabItem.THEMES); return ( - + ) => 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) => 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); }, }); diff --git a/src/plugins/_core/settings.tsx b/src/plugins/_core/settings.tsx index 557645038..d32853ffd 100644 --- a/src/plugins/_core/settings.tsx +++ b/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: () => , - buildLayout: () => [ - { - key: key + "_panel", - type: LayoutTypes.PANEL, - useTitle: () => panelTitle, - buildLayout: () => [ - { - key: key + "_pane", - type: LayoutTypes.PANE, - buildLayout: () => [], - render: () => , - 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: () => , + buildLayout: () => [ + { + key: key + "_panel", + type: LayoutTypes.PANEL, + useTitle: () => panelTitle, + buildLayout: () => [ + { + key: key + "_pane", + type: LayoutTypes.PANE, + buildLayout: () => [], + render: () => , + 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 };