refactor(settings): optimize descriptions and titles of settings

src/settings/ui/customIconPack.ts

@@ -70,7 +70,7 @@ export default class CustomIconPackSetting extends IconFolderSetting {
   public display(): void {
     new Setting(this.containerEl)
       .setName('Add custom icon pack')
-      .setDesc('Add a custom icon pack')
+      .setDesc('Add a custom icon pack.')
       .addText((text) => {
         text.setPlaceholder('Your icon pack name');
         this.textComponent = text;

src/settings/ui/customIconRule.ts

@@ -94,7 +94,9 @@ export default class CustomIconRuleSetting extends IconFolderSetting {
   public display(): void {
     new Setting(this.containerEl)
       .setName('Add icon rule')
-      .setDesc('Will add the icon based on the specific string.')
+      .setDesc(
+        'Will add the icon based on the defined rule (as a plain string or in regex format).',
+      )
       .addText((text) => {
         text.onChange((value) => {
           this.chooseIconBtn.setDisabled(value.length === 0);

src/settings/ui/emojiStyle.ts

@@ -10,7 +10,7 @@ import iconTabs from '../../lib/icon-tabs';
 export default class EmojiStyleSetting extends IconFolderSetting {
   public display(): void {
     const emojiStyle = new Setting(this.containerEl)
-      .setName('Emoji Style')
+      .setName('Emoji style')
       .setDesc('Change the style of your emojis.');
     emojiStyle.addDropdown((dropdown) => {
       dropdown.addOption('none', 'None');

src/settings/ui/iconPacksBackgroundChecker.ts

@@ -4,7 +4,7 @@ import IconFolderSetting from './iconFolderSetting';
 export default class IconPacksBackgroundChecker extends IconFolderSetting {
   public display(): void {
     new Setting(this.containerEl)
-      .setName('Icons Background Check')
+      .setName('Icons background check')
       .setDesc(
         'Check in the background on every load of Obsidian, if icons are missing and it will try to add them to the specific icon pack.',
       )

src/settings/ui/iconPacksPath.ts

@@ -11,8 +11,8 @@ export default class IconPacksPathSetting extends IconFolderSetting {
 
   public display(): void {
     const iconPacksPathSetting = new Setting(this.containerEl)
-      .setName('Icon Packs folder path')
-      .setDesc('Change the default icon packs folder path');
+      .setName('Icon packs folder path')
+      .setDesc('Change the default icon packs folder path.');
 
     iconPacksPathSetting.addText((text) => {
       this.iconPacksSettingTextComp = text;

src/settings/ui/index.ts

@@ -28,30 +28,33 @@ export default class IconFolderSettings extends PluginSettingTab {
     const { plugin, containerEl, app } = this;
     containerEl.empty();
 
-    containerEl.createEl('h2', { text: 'Icon Folder Settings' });
+    containerEl.createEl('h1', { text: 'General' });
     new RecentlyUsedIconsSetting(plugin, containerEl).display();
     new IconPacksPathSetting(plugin, containerEl).display();
     new IconPacksBackgroundChecker(plugin, containerEl).display();
     new EmojiStyleSetting(plugin, containerEl).display();
+    containerEl.createEl('h3', { text: 'Visibility of icons' });
     new ToggleIconInTabs(plugin, containerEl).display();
     new ToggleIconInTitle(plugin, containerEl).display();
     new ToggleFrontmatterIcon(plugin, containerEl).display();
     new ToggleIconsInNotes(plugin, containerEl).display();
 
-    containerEl.createEl('h3', { text: 'Icon Packs' });
+    containerEl.createEl('h1', {
+      text: 'Icon customization for files/folders',
+    });
+    new IconFontSizeSetting(plugin, containerEl).display();
+    new IconColorSetting(plugin, containerEl).display();
+    new ExtraMarginSetting(plugin, containerEl).display();
+
+    containerEl.createEl('h1', { text: 'Icon packs' });
     new PredefinedIconPacksSetting(plugin, containerEl, app, () =>
       this.display(),
     ).display();
     new CustomIconPackSetting(plugin, containerEl, () =>
       this.display(),
     ).display();
 
-    containerEl.createEl('h3', { text: 'Icon Customization' });
-    new IconFontSizeSetting(plugin, containerEl).display();
-    new IconColorSetting(plugin, containerEl).display();
-    new ExtraMarginSetting(plugin, containerEl).display();
-
-    containerEl.createEl('h3', { text: 'Custom Icon Rules' });
+    containerEl.createEl('h1', { text: 'Custom icon rules' });
     new CustomIconRuleSetting(plugin, containerEl, app, () =>
       this.display(),
     ).display();

src/settings/ui/predefinedIconPacks.ts

@@ -21,7 +21,7 @@ export default class PredefinedIconPacksSetting extends IconFolderSetting {
   public display(): void {
     new Setting(this.containerEl)
       .setName('Add predefined icon pack')
-      .setDesc('Add an icon pack like FontAwesome or Remixicons')
+      .setDesc('Add a predefined icon pack that is officially supported.')
       .addButton((btn) => {
         btn.setButtonText('Browse icon packs');
         btn.onClick(() => {

src/settings/ui/recentlyUsedIcons.ts

@@ -5,9 +5,9 @@ import { DEFAULT_SETTINGS } from '../data';
 export default class RecentlyUsedIconsSetting extends IconFolderSetting {
   public display(): void {
     new Setting(this.containerEl)
-      .setName('Recently used Icons limit')
+      .setName('Recently used icons limit')
       .setDesc(
-        'Change the limit for the recently used icons displayed in the icon modal.',
+        'Change the limit for the recently used icons displayed in the icon selection modal.',
       )
       .addSlider((slider) => {
         slider

src/settings/ui/toggleIconInTabs.ts

@@ -6,7 +6,7 @@ import { TabHeaderLeaf } from '../../@types/obsidian';
 export default class ToggleIconInTabs extends IconFolderSetting {
   public display(): void {
     new Setting(this.containerEl)
-      .setName('Toggle Icon in Tabs')
+      .setName('Toggle icon in tabs')
       .setDesc('Toggles the visibility of an icon for a file in the tab bar.')
       .addToggle((toggle) => {
         toggle

src/settings/ui/toggleIconInTitle.ts

@@ -8,8 +8,8 @@ import { InlineTitleView } from '../../@types/obsidian';
 export default class ToggleIconInTitle extends IconFolderSetting {
   public display(): void {
     new Setting(this.containerEl)
-      .setName('Toggle Icon in Title')
-      .setDesc('Toggles the visibility of an icon for a file above the title.')
+      .setName('Toggle icon in title')
+      .setDesc('Toggles the visibility of an icon above the title of a file.')
       .addToggle((toggle) => {
         toggle
           .setValue(this.plugin.getSettings().iconInTitleEnabled)

src/settings/ui/toggleIconsInNotes.ts

@@ -5,7 +5,7 @@ import config from '@app/config';
 export default class ToggleIconsInEditor extends IconFolderSetting {
   public display(): void {
     new Setting(this.containerEl)
-      .setName('Toggle Icons while editing notes')
+      .setName('Toggle icons while editing notes')
       .setDesc(
         'Toggles whether you are able to add and see icons in your notes and editor (e.g., ability to have :LiSofa: as an icon in your notes).',
       )