Desktop: Indent sub-sections in config screen

packages/app-desktop/gui/ConfigScreen/Sidebar.tsx

@@ -30,6 +30,7 @@ export const StyledListItem = styled.a`
 	text-decoration: none;
 	cursor: default;
 	opacity: ${(props: any) => props.selected ? 1 : 0.8};
+	padding-left: ${(props: any) => props.isSubSection ? '35' : props.theme.mainPadding}px;
 
 	&:hover {
 		background-color: ${(props: any) => props.theme.backgroundColorHover2};
@@ -91,7 +92,7 @@ export default function Sidebar(props: Props) {
 	function renderButton(section: any) {
 		const selected = props.selection === section.name;
 		return (
-			<StyledListItem key={section.name} selected={selected} onClick={() => { props.onSelectionChange({ section: section }); }}>
+			<StyledListItem key={section.name} isSubSection={Setting.isSubSection(section.name)} selected={selected} onClick={() => { props.onSelectionChange({ section: section }); }}>
 				<StyledListItemIcon className={Setting.sectionNameToIcon(section.name)} />
 				<StyledListItemLabel>
 					{Setting.sectionNameToLabel(section.name)}

packages/lib/components/shared/config/config-shared.js

@@ -197,6 +197,14 @@ shared.settingsSections = createSelector(
 			});
 		}
 
+		const order = Setting.sectionOrder();
+
+		output.sort((a, b) => {
+			const o1 = order.indexOf(a.name);
+			const o2 = order.indexOf(b.name);
+			return o1 < o2 ? -1 : +1;
+		});
+
 		return output;
 	},
 );

packages/lib/models/Setting.ts

@@ -2502,11 +2502,32 @@ class Setting extends BaseModel {
 		throw new Error(`Invalid type ID: ${typeId}`);
 	}
 
+	public static sectionOrder() {
+		return [
+			'general',
+			'application',
+			'appearance',
+			'sync',
+			'encryption',
+			'joplinCloud',
+			'plugins',
+			'markdownPlugins',
+			'note',
+			'revisionService',
+			'server',
+			'keymap',
+		];
+	}
+
 	private static sectionSource(sectionName: string): SettingSectionSource {
 		if (this.customSections_[sectionName]) return this.customSections_[sectionName].source || SettingSectionSource.Default;
 		return SettingSectionSource.Default;
 	}
 
+	public static isSubSection(sectionName: string) {
+		return ['encryption', 'application', 'appearance', 'joplinCloud'].includes(sectionName);
+	}
+
 	public static groupMetadatasBySections(metadatas: SettingItem[]) {
 		const sections = [];
 		const generalSection: any = { name: 'general', metadatas: [] };