fix: grouping and alignment bug

Author: bajrangCoder

src/components/settingsPage.js

@@ -254,6 +254,8 @@ function listItems($list, items, callback, options = {}) {
 		const $setting = Ref();
 		const $settingName = Ref();
 		const $tail = Ref();
+		const isCheckboxItem =
+			item.checkbox !== undefined || typeof item.value === "boolean";
 		/**@type {HTMLDivElement} */
 		const $item = (
 			<div
@@ -277,9 +279,13 @@ function listItems($list, items, callback, options = {}) {
 
 		let $checkbox, $valueText;
 		let $trailingValueText;
-		const subtitle = getSubtitleText(item, useInfoAsDescription);
+		const subtitle = isCheckboxItem
+			? item.info
+			: getSubtitleText(item, useInfoAsDescription);
 		const showInfoAsSubtitle =
-			useInfoAsDescription || (item.value === undefined && item.info);
+			isCheckboxItem ||
+			useInfoAsDescription ||
+			(item.value === undefined && item.info);
 		const searchGroup =
 			item.searchGroup || item.category || options.defaultSearchGroup;
 		const hasSubtitle =
@@ -295,10 +301,12 @@ function listItems($list, items, callback, options = {}) {
 
 		let subtitleRendered = false;
 
-		if (item.checkbox !== undefined || typeof item.value === "boolean") {
+		if (isCheckboxItem) {
 			$checkbox = Checkbox("", item.checkbox || item.value);
 			$tail.el.appendChild($checkbox);
-		} else if (subtitle !== undefined) {
+		}
+
+		if (hasSubtitle) {
 			$valueText = <small className="value"></small>;
 			setValueText(
 				$valueText,

src/components/settingsPage.scss

@@ -21,25 +21,21 @@ wc-page.main-settings-page {
 	}
 
 	.settings-search-summary {
-		padding: 0.15rem 1rem;
-		font-size: 0.82rem;
-		font-weight: 700;
-		line-height: 1.25;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
+		padding: 0.2rem 1rem;
+		font-size: 0.84rem;
+		font-weight: 600;
+		line-height: 1.35;
 		color: var(--secondary-text-color);
-		color: color-mix(in srgb, var(--secondary-text-color), transparent 24%);
+		color: color-mix(in srgb, var(--secondary-text-color), transparent 18%);
 	}
 
 	.settings-section-label {
-		padding: 0.5rem 1rem 0.55rem;
-		font-size: 0.78rem;
-		font-weight: 700;
-		line-height: 1.25;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		color: var(--active-color);
-		color: color-mix(in srgb, var(--active-color), transparent 30%);
+		padding: 0.5rem 1rem 0.45rem;
+		font-size: 0.84rem;
+		font-weight: 600;
+		line-height: 1.3;
+		color: var(--popup-text-color);
+		color: color-mix(in srgb, var(--popup-text-color), transparent 22%);
 	}
 
 	.settings-section-card {
@@ -184,25 +180,21 @@ wc-page.detail-settings-page {
 	}
 
 	.settings-search-summary {
-		padding: 0.15rem 1rem;
-		font-size: 0.82rem;
-		font-weight: 700;
-		line-height: 1.25;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
+		padding: 0.2rem 1rem;
+		font-size: 0.84rem;
+		font-weight: 600;
+		line-height: 1.35;
 		color: var(--secondary-text-color);
-		color: color-mix(in srgb, var(--secondary-text-color), transparent 24%);
+		color: color-mix(in srgb, var(--secondary-text-color), transparent 18%);
 	}
 
 	.settings-section-label {
-		padding: 0.5rem 1rem 0.55rem;
-		font-size: 0.78rem;
-		font-weight: 700;
-		line-height: 1.25;
-		text-transform: uppercase;
-		letter-spacing: 0.06em;
-		color: var(--active-color);
-		color: color-mix(in srgb, var(--active-color), transparent 30%);
+		padding: 0.5rem 1rem 0.45rem;
+		font-size: 0.84rem;
+		font-weight: 600;
+		line-height: 1.3;
+		color: var(--popup-text-color);
+		color: color-mix(in srgb, var(--popup-text-color), transparent 22%);
 	}
 
 	.settings-section-card {
@@ -316,13 +308,13 @@ wc-page.detail-settings-page {
 		padding-right: 0.6rem;
 	}
 
-	.detail-settings-list > .list-item.has-subtitle.has-tail-value > .container,
-	.settings-section-card > .list-item.has-subtitle.has-tail-value > .container {
+	.detail-settings-list > .list-item.has-subtitle.has-tail-select > .container,
+	.settings-section-card > .list-item.has-subtitle.has-tail-select > .container {
 		padding-right: 0.95rem;
 	}
 
-	.detail-settings-list > .list-item.has-subtitle.has-tail-value > .setting-tail,
-	.settings-section-card > .list-item.has-subtitle.has-tail-value > .setting-tail {
+	.detail-settings-list > .list-item.has-subtitle.has-tail-select > .setting-tail,
+	.settings-section-card > .list-item.has-subtitle.has-tail-select > .setting-tail {
 		align-self: flex-start;
 		margin-top: 0.16rem;
 		margin-left: 1.3rem;
@@ -424,6 +416,7 @@ wc-page.detail-settings-page {
 		height: 1.2rem;
 		margin-left: 0.1rem;
 		font-size: 1.1rem;
+		line-height: 1;
 	}
 
 	.input-checkbox {

src/settings/appSettings.js

@@ -150,29 +150,29 @@ export default function otherSettings() {
 			key: "fontManager",
 			text: strings["fonts"],
 			info: "Install or remove app fonts",
-			category: "Personalization",
+			category: "Fonts",
 			chevron: true,
 		},
 		{
 			key: "rememberFiles",
 			text: strings["remember opened files"],
 			checkbox: values.rememberFiles,
 			info: "Restore the files you had open last time",
-			category: "Workspace",
+			category: "Files & sessions",
 		},
 		{
 			key: "rememberFolders",
 			text: strings["remember opened folders"],
 			checkbox: values.rememberFolders,
 			info: "Restore folders from the previous session",
-			category: "Workspace",
+			category: "Files & sessions",
 		},
 		{
 			key: "retryRemoteFsAfterFail",
 			text: strings["retry ftp/sftp when fail"],
 			checkbox: values.retryRemoteFsAfterFail,
 			info: "Retry remote file operations after a failed transfer",
-			category: "Workspace",
+			category: "Files & sessions",
 		},
 		{
 			key: "excludeFolders",
@@ -188,7 +188,7 @@ export default function otherSettings() {
 				},
 			},
 			info: "Folders and patterns to skip while searching or scanning",
-			category: "Workspace",
+			category: "Files & sessions",
 		},
 		{
 			key: "defaultFileEncoding",
@@ -204,7 +204,7 @@ export default function otherSettings() {
 				}),
 			],
 			info: "Default encoding when opening or creating files",
-			category: "Workspace",
+			category: "Files & sessions",
 		},
 		{
 			key: "keybindings",