From d8abc65d3c12f23b2d6c94d6fea2b4edec482ebf Mon Sep 17 00:00:00 2001
From: Suffocate <70031311+lolsuffocate@users.noreply.github.com>
Date: Sun, 14 Jun 2026 16:35:10 +0100
Subject: [PATCH] Add Display Names for Settings (#3212)

---
 .../settings/tabs/plugins/components/BooleanSetting.tsx    | 2 +-
 src/components/settings/tabs/plugins/components/Common.tsx | 7 ++++---
 .../settings/tabs/plugins/components/NumberSetting.tsx     | 2 +-
 .../settings/tabs/plugins/components/SelectSetting.tsx     | 2 +-
 .../settings/tabs/plugins/components/SliderSetting.tsx     | 2 +-
 .../settings/tabs/plugins/components/TextSetting.tsx       | 2 +-
 src/plugins/consoleJanitor/index.tsx                       | 2 +-
 src/plugins/ircColors/index.ts                             | 1 +
 src/plugins/lastfmRichPresence/index.tsx                   | 2 ++
 src/plugins/mentionAvatars/index.tsx                       | 1 +
 src/plugins/messageLinkEmbeds/index.tsx                    | 1 +
 src/plugins/openInApp/index.ts                             | 3 +++
 src/plugins/pinDms/index.tsx                               | 2 ++
 src/plugins/replaceGoogleSearch/index.tsx                  | 1 +
 src/plugins/serverListIndicators/index.tsx                 | 2 +-
 src/plugins/shikiCodeblocks.desktop/settings.ts            | 1 +
 src/plugins/silentTyping/index.tsx                         | 2 +-
 src/plugins/translate/settings.tsx                         | 1 +
 src/plugins/viewIcons/index.tsx                            | 1 +
 src/plugins/xsOverlay/index.tsx                            | 3 +++
 src/utils/types.ts                                         | 3 ++-
 21 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/settings/tabs/plugins/components/BooleanSetting.tsx b/src/components/settings/tabs/plugins/components/BooleanSetting.tsx
index 76a887ea1..f3e117e75 100644
--- a/src/components/settings/tabs/plugins/components/BooleanSetting.tsx
+++ b/src/components/settings/tabs/plugins/components/BooleanSetting.tsx
@@ -41,7 +41,7 @@ export function BooleanSetting({ setting, pluginSettings, definedSettings, id, o
     }
 
     return (
-        <SettingsSection tag="label" name={id} description={setting.description} error={error} inlineSetting>
+        <SettingsSection tag="label" name={setting.displayName} id={id} description={setting.description} error={error} inlineSetting>
             <Switch
                 checked={state}
                 onChange={handleChange}
diff --git a/src/components/settings/tabs/plugins/components/Common.tsx b/src/components/settings/tabs/plugins/components/Common.tsx
index de7486457..ed07f576e 100644
--- a/src/components/settings/tabs/plugins/components/Common.tsx
+++ b/src/components/settings/tabs/plugins/components/Common.tsx
@@ -35,19 +35,20 @@ export function resolveError(isValidResult: boolean | string) {
 }
 
 interface SettingsSectionProps extends PropsWithChildren {
-    name: string;
+    name?: string;
+    id: string;
     description: string;
     error?: string | null;
     inlineSetting?: boolean;
     tag?: "label" | "div";
 }
 
-export function SettingsSection({ tag: Tag = "div", name, description, error, inlineSetting, children }: SettingsSectionProps) {
+export function SettingsSection({ tag: Tag = "div", name, id, description, error, inlineSetting, children }: SettingsSectionProps) {
     return (
         <Tag className={cl("section")}>
             <div className={classes(cl("content"), inlineSetting && cl("inline"))}>
                 <div className={cl("label")}>
-                    {name && <Text className={cl("title")} variant="text-md/medium">{wordsToTitle(wordsFromCamel(name))}</Text>}
+                    <Text className={cl("title")} variant="text-md/medium">{name ?? wordsToTitle(wordsFromCamel(id))}</Text>
                     {description && <Text className={cl("description")} variant="text-sm/normal">{description}</Text>}
                 </div>
                 {children}
diff --git a/src/components/settings/tabs/plugins/components/NumberSetting.tsx b/src/components/settings/tabs/plugins/components/NumberSetting.tsx
index fa348a108..36837abc9 100644
--- a/src/components/settings/tabs/plugins/components/NumberSetting.tsx
+++ b/src/components/settings/tabs/plugins/components/NumberSetting.tsx
@@ -50,7 +50,7 @@ export function NumberSetting({ setting, pluginSettings, definedSettings, id, on
     }
 
     return (
-        <SettingsSection name={id} description={setting.description} error={error}>
+        <SettingsSection name={setting.displayName} id={id} description={setting.description} error={error}>
             <TextInput
                 type="number"
                 pattern="-?[0-9]+"
diff --git a/src/components/settings/tabs/plugins/components/SelectSetting.tsx b/src/components/settings/tabs/plugins/components/SelectSetting.tsx
index 89f652e7a..425f56d8b 100644
--- a/src/components/settings/tabs/plugins/components/SelectSetting.tsx
+++ b/src/components/settings/tabs/plugins/components/SelectSetting.tsx
@@ -40,7 +40,7 @@ export function SelectSetting({ setting, pluginSettings, definedSettings, onChan
     }
 
     return (
-        <SettingsSection name={id} description={setting.description} error={error}>
+        <SettingsSection name={setting.displayName} id={id} description={setting.description} error={error}>
             <Select
                 placeholder={setting.placeholder ?? "Select an option"}
                 options={setting.options}
diff --git a/src/components/settings/tabs/plugins/components/SliderSetting.tsx b/src/components/settings/tabs/plugins/components/SliderSetting.tsx
index 55828ae21..74c1f57ba 100644
--- a/src/components/settings/tabs/plugins/components/SliderSetting.tsx
+++ b/src/components/settings/tabs/plugins/components/SliderSetting.tsx
@@ -38,7 +38,7 @@ export function SliderSetting({ setting, pluginSettings, definedSettings, id, on
     }
 
     return (
-        <SettingsSection name={id} description={setting.description} error={error}>
+        <SettingsSection name={setting.displayName} id={id} description={setting.description} error={error}>
             <Slider
                 markers={setting.markers}
                 minValue={setting.markers[0]}
diff --git a/src/components/settings/tabs/plugins/components/TextSetting.tsx b/src/components/settings/tabs/plugins/components/TextSetting.tsx
index cd61a3b8e..a43a1b4ca 100644
--- a/src/components/settings/tabs/plugins/components/TextSetting.tsx
+++ b/src/components/settings/tabs/plugins/components/TextSetting.tsx
@@ -38,7 +38,7 @@ export function TextSetting({ setting, pluginSettings, definedSettings, id, onCh
     }
 
     return (
-        <SettingsSection name={id} description={setting.description} error={error}>
+        <SettingsSection name={setting.displayName} id={id} description={setting.description} error={error}>
             {setting.multiline
                 ? <TextArea
                     placeholder={setting.placeholder ?? "Enter a value"}
diff --git a/src/plugins/consoleJanitor/index.tsx b/src/plugins/consoleJanitor/index.tsx
index 8e811e807..1e55c0e64 100644
--- a/src/plugins/consoleJanitor/index.tsx
+++ b/src/plugins/consoleJanitor/index.tsx
@@ -57,7 +57,7 @@ function AllowLevelSetting({ settingKey }: AllowLevelSettingProps) {
 
 const AllowLevelSettings = ErrorBoundary.wrap(() => {
     return (
-        <SettingsSection name="Filter List" description="Always allow loggers of these types">
+        <SettingsSection name="Filter List" id="filterList" description="Always allow loggers of these types">
             <div style={{ display: "flex", flexDirection: "row" }}>
                 {Object.keys(settings.store.allowLevel).map(key => (
                     <AllowLevelSetting key={key} settingKey={key as keyof AllowLevels} />
diff --git a/src/plugins/ircColors/index.ts b/src/plugins/ircColors/index.ts
index 950c1a87c..910a23b28 100644
--- a/src/plugins/ircColors/index.ts
+++ b/src/plugins/ircColors/index.ts
@@ -49,6 +49,7 @@ const settings = definePluginSettings({
         default: false
     },
     applyColorOnlyInDms: {
+        displayName: "Apply Color Only In DMs",
         description: "Apply colors only in direct messages; do not apply colors in servers.",
         restartNeeded: false,
         type: OptionType.BOOLEAN,
diff --git a/src/plugins/lastfmRichPresence/index.tsx b/src/plugins/lastfmRichPresence/index.tsx
index 1b755ac24..916243485 100644
--- a/src/plugins/lastfmRichPresence/index.tsx
+++ b/src/plugins/lastfmRichPresence/index.tsx
@@ -67,6 +67,7 @@ function setActivity(activity: Activity | null) {
 
 const settings = definePluginSettings({
     apiKey: {
+        displayName: "API Key",
         description: "Custom Last.fm API key. Not required but highly recommended to avoid rate limiting with our shared key",
         type: OptionType.STRING,
     },
@@ -170,6 +171,7 @@ const settings = definePluginSettings({
         ],
     },
     showLastFmLogo: {
+        displayName: "Show Last.fm Logo",
         description: "Show the Last.fm logo by the album cover",
         type: OptionType.BOOLEAN,
         default: true,
diff --git a/src/plugins/mentionAvatars/index.tsx b/src/plugins/mentionAvatars/index.tsx
index 185582daf..2a6fa51a9 100644
--- a/src/plugins/mentionAvatars/index.tsx
+++ b/src/plugins/mentionAvatars/index.tsx
@@ -16,6 +16,7 @@ import { GuildRoleStore, SelectedGuildStore, useState } from "@webpack/common";
 const settings = definePluginSettings({
     showAtSymbol: {
         type: OptionType.BOOLEAN,
+        displayName: "Show @ Symbol",
         description: "Whether the the @ symbol should be displayed on user mentions",
         default: true
     }
diff --git a/src/plugins/messageLinkEmbeds/index.tsx b/src/plugins/messageLinkEmbeds/index.tsx
index 6ce6c0a2a..b2e5e85ba 100644
--- a/src/plugins/messageLinkEmbeds/index.tsx
+++ b/src/plugins/messageLinkEmbeds/index.tsx
@@ -113,6 +113,7 @@ const settings = definePluginSettings({
         ]
     },
     idList: {
+        displayName: "ID List",
         description: "Guild/channel/user IDs to blacklist or whitelist (separate with comma)",
         type: OptionType.STRING,
         default: "",
diff --git a/src/plugins/openInApp/index.ts b/src/plugins/openInApp/index.ts
index 2abd9f724..08184eed1 100644
--- a/src/plugins/openInApp/index.ts
+++ b/src/plugins/openInApp/index.ts
@@ -25,6 +25,7 @@ import type { MouseEvent } from "react";
 interface URLReplacementRule {
     match: RegExp;
     replace: (...matches: string[]) => string;
+    displayName?: string;
     description: string;
     shortlinkMatch?: RegExp;
     accountViewReplace?: (userId: string) => string;
@@ -59,6 +60,7 @@ const UrlReplacementRules: Record<string, URLReplacementRule> = {
     itunes: {
         match: /^https:\/\/(?:geo\.)?music\.apple\.com\/([a-z]{2}\/)?(album|artist|playlist|song|curator)\/([^/?#]+)\/?([^/?#]+)?(?:\?.*)?(?:#.*)?$/,
         replace: (_, lang, type, name, id) => id ? `itunes://music.apple.com/us/${type}/${name}/${id}` : `itunes://music.apple.com/us/${type}/${name}`,
+        displayName: "iTunes",
         description: "Open Apple Music links in the iTunes app"
     },
 };
@@ -67,6 +69,7 @@ const pluginSettings = definePluginSettings(
     Object.entries(UrlReplacementRules).reduce((acc, [key, rule]) => {
         acc[key] = {
             type: OptionType.BOOLEAN,
+            displayName: rule.displayName,
             description: rule.description,
             default: true,
         };
diff --git a/src/plugins/pinDms/index.tsx b/src/plugins/pinDms/index.tsx
index 3099a841b..ebdd8eaee 100644
--- a/src/plugins/pinDms/index.tsx
+++ b/src/plugins/pinDms/index.tsx
@@ -48,11 +48,13 @@ export const settings = definePluginSettings({
     },
     canCollapseDmSection: {
         type: OptionType.BOOLEAN,
+        displayName: "Can Collapse DM Section",
         description: "Allow uncategorised DMs section to be collapsable",
         default: false
     },
     dmSectionCollapsed: {
         type: OptionType.BOOLEAN,
+        displayName: "DM Section Collapsed",
         description: "Collapse DM section",
         default: false,
         hidden: true
diff --git a/src/plugins/replaceGoogleSearch/index.tsx b/src/plugins/replaceGoogleSearch/index.tsx
index 907d1bc1b..b8ccfa705 100644
--- a/src/plugins/replaceGoogleSearch/index.tsx
+++ b/src/plugins/replaceGoogleSearch/index.tsx
@@ -36,6 +36,7 @@ const settings = definePluginSettings({
         placeholder: "Google"
     },
     customEngineURL: {
+        displayName: "Custom Engine URL",
         description: "The URL of your Engine",
         type: OptionType.STRING,
         placeholder: "https://google.com/search?q="
diff --git a/src/plugins/serverListIndicators/index.tsx b/src/plugins/serverListIndicators/index.tsx
index 199a581b1..6dddce19f 100644
--- a/src/plugins/serverListIndicators/index.tsx
+++ b/src/plugins/serverListIndicators/index.tsx
@@ -34,7 +34,7 @@ const UserGuildJoinRequestStore = findStoreLazy("UserGuildJoinRequestStore");
 
 const settings = definePluginSettings({
     mode: {
-        description: "mode",
+        description: "Mode",
         type: OptionType.SELECT,
         options: [
             { label: "Only online friend count", value: IndicatorType.FRIEND, default: true },
diff --git a/src/plugins/shikiCodeblocks.desktop/settings.ts b/src/plugins/shikiCodeblocks.desktop/settings.ts
index b4a0dc464..80cda6dd9 100644
--- a/src/plugins/shikiCodeblocks.desktop/settings.ts
+++ b/src/plugins/shikiCodeblocks.desktop/settings.ts
@@ -51,6 +51,7 @@ export const settings = definePluginSettings({
     },
     tryHljs: {
         type: OptionType.SELECT,
+        displayName: "Try Highlight.js",
         description: "Use the more lightweight default Discord highlighter and theme.",
         options: [
             {
diff --git a/src/plugins/silentTyping/index.tsx b/src/plugins/silentTyping/index.tsx
index fae0c2a74..103341ed9 100644
--- a/src/plugins/silentTyping/index.tsx
+++ b/src/plugins/silentTyping/index.tsx
@@ -136,7 +136,7 @@ export default definePlugin({
         options: [
             {
                 name: "value",
-                description: "whether to hide or not that you're typing (default is toggle)",
+                description: "Whether to hide or not that you're typing (default is toggle)",
                 required: false,
                 type: ApplicationCommandOptionType.BOOLEAN,
             },
diff --git a/src/plugins/translate/settings.tsx b/src/plugins/translate/settings.tsx
index 426788f3e..5c65c8d02 100644
--- a/src/plugins/translate/settings.tsx
+++ b/src/plugins/translate/settings.tsx
@@ -61,6 +61,7 @@ export const settings = definePluginSettings({
     },
     deeplApiKey: {
         type: OptionType.STRING,
+        displayName: "DeepL API Key",
         description: "Your DeepL API key (from deepl.com/your-account)",
         default: ""
     },
diff --git a/src/plugins/viewIcons/index.tsx b/src/plugins/viewIcons/index.tsx
index 51c6885ce..ebff5fbde 100644
--- a/src/plugins/viewIcons/index.tsx
+++ b/src/plugins/viewIcons/index.tsx
@@ -62,6 +62,7 @@ const settings = definePluginSettings({
     },
     imgSize: {
         type: OptionType.SELECT,
+        displayName: "Image Size",
         description: "The image size to use",
         options: ["128", "256", "512", "1024", "2048", "4096"].map(n => ({ label: n, value: n, default: n === "1024" }))
     }
diff --git a/src/plugins/xsOverlay/index.tsx b/src/plugins/xsOverlay/index.tsx
index 434236746..7146a80ce 100644
--- a/src/plugins/xsOverlay/index.tsx
+++ b/src/plugins/xsOverlay/index.tsx
@@ -103,6 +103,7 @@ const settings = definePluginSettings({
     },
     preferUDP: {
         type: OptionType.BOOLEAN,
+        displayName: "Prefer UDP",
         description: "Enable if you use an older build of XSOverlay unable to connect through websockets. This setting is ignored on web.",
         default: false,
         disabled: () => IS_WEB
@@ -119,11 +120,13 @@ const settings = definePluginSettings({
     },
     dmNotifications: {
         type: OptionType.BOOLEAN,
+        displayName: "DM Notifications",
         description: "Allow Direct Message notifications",
         default: true
     },
     groupDmNotifications: {
         type: OptionType.BOOLEAN,
+        displayName: "Group DM Notifications",
         description: "Allow Group DM notifications",
         default: true
     },
diff --git a/src/utils/types.ts b/src/utils/types.ts
index e984072aa..3dadd40ad 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -269,6 +269,7 @@ export type PluginSettingDef =
 
 export interface PluginSettingDefCommon extends IsDisabledOrHidden, IsValid<unknown> {
     description: string;
+    displayName?: string;
     placeholder?: string;
     onChange?(newValue: any): void;
     /**
@@ -352,7 +353,7 @@ export interface PluginSettingSliderDef extends PluginSettingDefCommon {
     stickToMarkers?: boolean;
 }
 
-export interface PluginSettingComponentDef extends Omit<PluginSettingDefCommon, "description" | "placeholder"> {
+export interface PluginSettingComponentDef extends Omit<PluginSettingDefCommon, "description" | "placeholder" | "displayName"> {
     type: OptionType.COMPONENT;
     component: (props: PluginSettingComponentProps) => ReactNode | Promise<ReactNode>;
     default?: any;