Add Display Names for Settings

src/components/PluginSettings/components/SettingBooleanComponent.tsx

@@ -54,7 +54,7 @@ export function SettingBooleanComponent({ option, pluginSettings, definedSetting
                 hideBorder
                 style={{ marginBottom: "0.5em" }}
             >
-                {wordsToTitle(wordsFromCamel(id))}
+                <Forms.FormTitle>{option.displayName ?? wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
             </Switch>
             {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
         </Forms.FormSection>

src/components/PluginSettings/components/SettingNumericComponent.tsx

@@ -56,7 +56,7 @@ export function SettingNumericComponent({ option, pluginSettings, definedSetting
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormTitle>{option.displayName ?? wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
             <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
             <TextInput
                 type="number"

src/components/PluginSettings/components/SettingSelectComponent.tsx

@@ -46,7 +46,7 @@ export function SettingSelectComponent({ option, pluginSettings, definedSettings
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormTitle>{option.displayName ?? wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
             <Forms.FormText className={Margins.bottom16} type="description">{option.description}</Forms.FormText>
             <Select
                 isDisabled={option.disabled?.call(definedSettings) ?? false}

src/components/PluginSettings/components/SettingSliderComponent.tsx

@@ -52,7 +52,7 @@ export function SettingSliderComponent({ option, pluginSettings, definedSettings
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormTitle>{option.displayName ?? wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
             <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
             <Slider
                 disabled={option.disabled?.call(definedSettings) ?? false}

src/components/PluginSettings/components/SettingTextComponent.tsx

@@ -43,7 +43,7 @@ export function SettingTextComponent({ option, pluginSettings, definedSettings,
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormTitle>{option.displayName ?? wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
             <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
             <TextInput
                 type="text"

src/plugins/customRPC/index.tsx

@@ -83,7 +83,8 @@ const enum TimestampMode {
 const settings = definePluginSettings({
     appID: {
         type: OptionType.STRING,
-        description: "Application ID (required)",
+        displayName: "Application ID (required)",
+        description: "Application ID from the Discord Developer Portal",
         onChange: onChange,
         isValid: (value: string) => {
             if (!value) return "Application ID is required.";
@@ -230,7 +231,8 @@ const settings = definePluginSettings({
     },
     buttonOneText: {
         type: OptionType.STRING,
-        description: "Button 1 text",
+        displayName: "Button 1 Text",
+        description: "The text to display on button 1",
         onChange: onChange,
         isValid: (value: string) => {
             if (value && value.length > 31) return "Button 1 text must be not longer than 31 characters.";
@@ -239,12 +241,14 @@ const settings = definePluginSettings({
     },
     buttonOneURL: {
         type: OptionType.STRING,
-        description: "Button 1 URL",
+        displayName: "Button 1 URL",
+        description: "The URL to open when clicking button 1",
         onChange: onChange
     },
     buttonTwoText: {
         type: OptionType.STRING,
-        description: "Button 2 text",
+        displayName: "Button 2 Text",
+        description: "The text to display on button 2",
         onChange: onChange,
         isValid: (value: string) => {
             if (value && value.length > 31) return "Button 2 text must be not longer than 31 characters.";
@@ -253,7 +257,8 @@ const settings = definePluginSettings({
     },
     buttonTwoURL: {
         type: OptionType.STRING,
-        description: "Button 2 URL",
+        displayName: "Button 2 URL",
+        description: "The URL to open when clicking button 2",
         onChange: onChange
     }
 });

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,

src/plugins/lastfm/index.tsx

@@ -102,25 +102,26 @@ function setActivity(activity: Activity | null) {
 
 const settings = definePluginSettings({
     username: {
-        description: "last.fm username",
+        description: "Last.fm username",
         type: OptionType.STRING,
     },
     apiKey: {
-        description: "last.fm api key",
+        displayName: "API Key",
+        description: "Last.fm api key",
         type: OptionType.STRING,
     },
     shareUsername: {
-        description: "show link to last.fm profile",
+        description: "Show link to last.fm profile",
         type: OptionType.BOOLEAN,
         default: false,
     },
     shareSong: {
-        description: "show link to song on last.fm",
+        description: "Show link to song on last.fm",
         type: OptionType.BOOLEAN,
         default: true,
     },
     hideWithSpotify: {
-        description: "hide last.fm presence if spotify is running",
+        description: "Hide last.fm presence if spotify is running",
         type: OptionType.BOOLEAN,
         default: true,
     },
@@ -130,7 +131,7 @@ const settings = definePluginSettings({
         default: false,
     },
     statusName: {
-        description: "custom status text",
+        description: "Custom status text",
         type: OptionType.STRING,
         default: "some music",
     },
@@ -166,7 +167,7 @@ const settings = definePluginSettings({
         ],
     },
     useListeningStatus: {
-        description: 'show "Listening to" status instead of "Playing"',
+        description: 'Show "Listening to" status instead of "Playing"',
         type: OptionType.BOOLEAN,
         default: false,
     },
@@ -186,7 +187,8 @@ const settings = definePluginSettings({
         ],
     },
     showLastFmLogo: {
-        description: "show the Last.fm logo by the album cover",
+        displayName: "Show Last.fm Logo",
+        description: "Show the Last.fm logo by the album cover",
         type: OptionType.BOOLEAN,
         default: true,
     }

src/plugins/mentionAvatars/index.tsx

@@ -16,6 +16,7 @@ import { User } from "discord-types/general";
 const settings = definePluginSettings({
     showAtSymbol: {
         type: OptionType.BOOLEAN,
+        displayName: "Show @ Symbol",
         description: "Whether the the @ symbol should be displayed on user mentions",
         default: true
     }

src/plugins/messageLinkEmbeds/index.tsx

@@ -114,6 +114,7 @@ const settings = definePluginSettings({
         ]
     },
     idList: {
+        displayName: "ID List",
         description: "Guild/channel/user IDs to blacklist or whitelist (separate with comma)",
         type: OptionType.STRING,
         default: ""

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,
         };

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

src/plugins/replaceGoogleSearch/index.tsx

@@ -29,6 +29,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="

src/plugins/serverListIndicators/index.tsx

@@ -96,7 +96,7 @@ export default definePlugin({
 
     options: {
         mode: {
-            description: "mode",
+            description: "Mode",
             type: OptionType.SELECT,
             options: [
                 { label: "Only online friend count", value: IndicatorType.FRIEND, default: true },

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: [
             {

src/plugins/silentTyping/index.tsx

@@ -119,7 +119,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,
             },

src/plugins/translate/settings.ts

@@ -63,9 +63,10 @@ export const settings = definePluginSettings({
     },
     deeplApiKey: {
         type: OptionType.STRING,
-        description: "DeepL API key",
+        displayName: "DeepL API Key",
+        description: "Your API key from https://www.deepl.com/en/your-account/keys",
         default: "",
-        placeholder: "Get your API key from https://deepl.com/your-account",
+        placeholder: "API Key",
         disabled: () => IS_WEB
     },
     autoTranslate: {

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" }))
     }

src/plugins/xsOverlay/index.tsx

@@ -104,6 +104,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
@@ -120,11 +121,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
     },

src/utils/types.ts

@@ -232,6 +232,7 @@ export type PluginSettingDef =
 
 export interface PluginSettingCommon {
     description: string;
+    displayName?: string;
     placeholder?: string;
     onChange?(newValue: any): void;
     /**