Add unique paths and sorting to simple view settings

src/addons.ts

@@ -105,6 +105,7 @@ export default class AddonManager extends Module<'addons'> {
 			component: 'addon-list',
 			title: 'Add-Ons',
 			no_filter: true,
+			simple: true,
 
 			getExtraTerms: () => Object.values(this.addons).map(addon => addon.search_terms),
 

src/modules/chat/index.js

@@ -980,7 +980,8 @@ export default class Chat extends Module {
 				path: 'Chat > Filtering > General >> Appearance',
 				title: 'Highlight messages that mention you.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Appearance >> Highlighting'
 			}
 		});
 
@@ -1047,6 +1048,7 @@ export default class Chat extends Module {
 				title: 'Display rich tooltips for links.',
 				component: 'setting-check-box',
 				simple: true,
+				simple_path: 'Chat > Links >> Tooltips',
 				extra: {
 					component: 'chat-tooltip-example'
 				}
@@ -1095,6 +1097,7 @@ export default class Chat extends Module {
 				item: key,
 				override_setting: 'agreed-tos',
 				simple: true,
+				simple_path: 'Chat > Links >> Tooltips Terms of Service',
 				getChat: () => this,
 				data: deep_copy(info),
 				onUIChange: () => this.emit(':update-link-resolver')
@@ -1170,6 +1173,7 @@ export default class Chat extends Module {
 				description: 'Collect all the cheers in a message into a single cheer at the start of the message.',
 				component: 'setting-select-box',
 				simple: true,
+				simple_path: 'Chat > Appearance >> Bits and Cheering',
 				data: [
 					{value: 0, title: 'Disabled'},
 					{value: 1, title: 'Grouped by Type'},
@@ -1231,7 +1235,8 @@ export default class Chat extends Module {
 				path: 'Chat > Bits and Cheering >> Appearance',
 				title: 'Display animated cheers.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Appearance >> Bits and Cheering'
 			}
 		});
 

src/modules/link_card/index.jsx

@@ -32,7 +32,8 @@ export default class LinkCard extends Module {
 				title: 'Enable Link Cards.',
 				description: 'When this is enabled and you click a link in chat or whispers, a popup will open with information about the link. This provides the same data as rich link tooltips, but in a form that allows more interaction.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Links >> Link Cards'
 			}
 		});
 
@@ -43,7 +44,8 @@ export default class LinkCard extends Module {
 				title: 'Bypass Known Shorteners',
 				description: 'When clicking "Open Link" from a Link Card with this enabled, you will bypass known shorteners and tracking services and go directly to the destination URL.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Links >> Link Cards'
 			}
 		});
 

src/modules/main_menu/index.js

@@ -64,6 +64,7 @@ export default class MainMenu extends Module {
 			path: 'Data Management > Backup and Restore @{"profile_warning": false}',
 			component: 'backup-restore',
 			simple: true,
+			simple_path: 'FFZ > Backup and Restore @{"profile_warning": false}',
 			getExtraTerms: () => ['restore'],
 			getFFZ: () => this.resolve('core')
 		});
@@ -164,6 +165,7 @@ export default class MainMenu extends Module {
 			path: 'Home > FAQ @{"profile_warning": false}',
 			component: 'md-page',
 			simple: true,
+			simple_path: 'FFZ > FAQ @{"profile_warning": false}',
 			key: 'faq'
 		});
 
@@ -185,6 +187,7 @@ export default class MainMenu extends Module {
 			path: 'Home > Feedback @{"profile_warning": false}',
 			component: 'md-page',
 			simple: true,
+			simple_path: 'FFZ > Feedback @{"profile_warning": false}',
 			key: 'feedback'
 		});
 
@@ -192,6 +195,7 @@ export default class MainMenu extends Module {
 			path: 'Home > Feedback >> Log @{"sort": 1000}',
 			component: 'async-text',
 			simple: true,
+			simple_path: 'FFZ > Feedback >> Log @{"sort": 1000}',
 			watch: [
 				'reports.error.include-user',
 				'reports.error.include-settings'
@@ -203,6 +207,7 @@ export default class MainMenu extends Module {
 			path: 'Home > Changelog @{"profile_warning": false}',
 			component: 'changelog',
 			simple: true,
+			simple_path: 'FFZ > Changelog @{"profile_warning": false}',
 			getFFZ: () => this
 		});
 
@@ -211,6 +216,7 @@ export default class MainMenu extends Module {
 			component: 'changelog',
 			force_seen: true,
 			addons: true,
+			simple: true,
 			getFFZ: () => this
 		});
 
@@ -219,6 +225,7 @@ export default class MainMenu extends Module {
 			component: 'md-page',
 			key: 'legal',
 			simple: true,
+			simple_path: 'FFZ > Legal @{"sort": 1000}',
 			force_seen: true
 		});
 
@@ -228,11 +235,12 @@ export default class MainMenu extends Module {
 				path: 'Appearance > Control Center >> Simple View',
 				title: 'Show simple view.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Twitch Appearance >> Control Center'
 			},
 			changed: val => {
 				this.rebuildSettingsTree();
-				this.scheduleUpdate();
+				this.updateLiveMenu();
 			}
 		});
 
@@ -623,23 +631,32 @@ export default class MainMenu extends Module {
 	}
 
 	_addDefinitionToTree(key, def, simple) {
-		if ( ! def.ui || ! this._settings_tree )
+		if ( ! def.ui || ! def.ui.path || ! this._settings_tree )
 			return;
+
+		// Parse path tokens if they don't exist yet
+		if ( ! def.ui.path_tokens )
+			def.ui.path_tokens = parse_path(def.ui.path);
+
+		if ( ! def.ui.path_tokens )
+			return;
+
+		if ( def.ui.simple && ! def.ui.simple_path_tokens )
+			def.ui.simple_path_tokens = def.ui.simple_path
+				? parse_path(def.ui.simple_path)
+				: def.ui.path_tokens;
+
+		// Force add-on settings to appear in simple view
+		if ( ! def.ui.simple && def.ui.path_tokens[0].key === 'add_ons' ) {
+			def.ui.simple = true;
+			def.ui.simple_path_tokens = def.ui.path_tokens;
+		}
+
 		if ( simple && ! def.ui.simple )
 			return;
 
-		if ( simple && def.ui.simple_path )
-			def.ui.path_tokens = parse_path(def.ui.simple_path);
-		else if ( def.ui.path )
-			def.ui.path_tokens = parse_path(def.ui.path);
-		else
-			return;
-
-		if ( ! def.ui || ! def.ui.path_tokens || ! this._settings_tree )
-			return;
-
 		const tree = this._settings_tree,
-			tokens = def.ui.path_tokens,
+			tokens = simple ? def.ui.simple_path_tokens : def.ui.path_tokens,
 			len = tokens.length;
 
 		let prefix = null,
@@ -698,6 +715,16 @@ export default class MainMenu extends Module {
 		if ( new_seen )
 			this.new_seen = true;
 
+		// Force sorting root categories in this specific order
+		// if simple view is enabled
+		if ( this.settings.get('ffz.simple-view') ) {
+			tree['twitch_appearance'].sort = 2;
+			tree['channel'].sort = 3;
+			tree['player'].sort = 4;
+			tree['chat'].sort = 5;
+			tree['ffz'].sort = 6;
+		}
+
 		for(const key in tree) {
 			if ( ! has(tree, key) )
 				continue;

src/settings/types.ts

@@ -114,7 +114,7 @@ export type SettingDefinition<T> = Omit<
 	ui: SettingUiDefinition<T>;
 };
 
-export type OptionalSettingUiDefinitionKeys = 'key' | 'path_tokens' | 'i18n_key';
+export type OptionalSettingUiDefinitionKeys = 'key' | 'path_tokens' | 'simple_path_tokens' | 'i18n_key';
 export type ForbiddenSettingUiDefinitionKeys = never;
 
 export type SettingUiDefinition<T> = PartialPartial<FullSettingUiDefinition<T>, OptionalSettingUiDefinitionKeys>;
@@ -170,6 +170,7 @@ export type SettingUi_Basic = {
 	simple?: boolean;
 	// Optional alternate setting placement for simple view
 	simple_path?: string;
+	simple_path_tokens?: PathNode[];
 
 	/**
 	 * Optional. If present, this method will be used to retrieve an array of

src/sites/shared/player.jsx

@@ -91,7 +91,8 @@ export default class PlayerBase extends Module {
 				path: 'Player > General >> Embed and Popout',
 				title: 'Show metadata when mousing over the player.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Player >> Embed and Popout',
 			}
 		});
 
@@ -113,7 +114,8 @@ export default class PlayerBase extends Module {
 				title: 'Do not display content warnings.',
 				description: 'When this is enabled, FFZ will automatically skip content warnings. This feature is intended for use by adults only.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Player >> Content Warnings',
 			},
 
 			changed: () => {
@@ -531,6 +533,7 @@ export default class PlayerBase extends Module {
 				description: '**Note**: This feature does not prevent extensions from loading. Hidden extensions are merely invisible. Hiding extensions with this feature will not improve your security. To prevent extensions from loading entirely, we recommend using the [Disable Twitch Extensions browser extension](https://twitch-tools.rootonline.de/disable_twitch_extensions.php) by CommanderRoot.',
 				component: 'setting-select-box',
 				simple: true,
+				simple_path: 'Player >> Extensions',
 				data: [
 					{value: 2, title: 'Never'},
 					{value: 1, title: 'With Controls'},
@@ -566,7 +569,8 @@ export default class PlayerBase extends Module {
 				path: 'Player > General >> Playback',
 				title: 'Auto-play the next recommended video after a video finishes.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Player >> Playback',
 			}
 		});
 

src/sites/twitch-twilight/modules/channel.jsx

@@ -61,7 +61,8 @@ export default class Channel extends Module {
 				path: 'Channel > Behavior >> General',
 				title: 'Automatically skip channel trailers.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Channel >> General'
 			},
 
 			changed: val => {
@@ -76,7 +77,8 @@ export default class Channel extends Module {
 				path: 'Channel > Behavior >> General',
 				title: 'Automatically open chat when opening an offline channel page.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Channel >> General'
 			}
 		});
 

src/sites/twitch-twilight/modules/chat/index.js

@@ -422,7 +422,8 @@ export default class ChatHook extends Module {
 				title: 'Hide all Community Highlights from the top of chat.',
 				component: 'setting-check-box',
 				description: 'Community Highlights are polls, community gift subs, etc. that float over the top of chat temporarily with no way to close them.',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			}
 		});
 
@@ -432,7 +433,8 @@ export default class ChatHook extends Module {
 				path: 'Chat > Appearance >> Community',
 				title: 'Display a banner at the top of chat when a mass gift sub happens.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			}
 		});
 
@@ -460,7 +462,8 @@ export default class ChatHook extends Module {
 				path: 'Chat > Appearance >> Community',
 				title: 'Allow the Hype Train to be displayed in chat.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			}
 		});
 
@@ -489,7 +492,8 @@ export default class ChatHook extends Module {
 				path: 'Chat > Appearance >> Community',
 				title: 'Allow Polls to be displayed in chat.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			}
 		});
 
@@ -499,7 +503,8 @@ export default class ChatHook extends Module {
 				path: 'Chat > Appearance >> Community',
 				title: 'Allow Predictions to be displayed in chat.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			}
 		});
 
@@ -509,7 +514,8 @@ export default class ChatHook extends Module {
 				path: 'Chat > Appearance >> Community',
 				title: 'Display the Community Gift Chest banner.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			}
 		});
 
@@ -520,6 +526,7 @@ export default class ChatHook extends Module {
 				title: 'Highlight the message in chat when someone redeems Highlight My Message.',
 				component: 'setting-select-box',
 				simple: true,
+				simple_path: 'Chat > Appearance >> Highlighting',
 				data: [
 					{value: 0, title: 'Disabled'},
 					{value: 1, title: 'Twitch Style'},
@@ -533,8 +540,7 @@ export default class ChatHook extends Module {
 			ui: {
 				path: 'Chat > Channel Points >> General',
 				title: 'Display messages in chat about Channel Points rewards.',
-				component: 'setting-check-box',
-				simple: true
+				component: 'setting-check-box'
 			}
 		});
 
@@ -544,7 +550,8 @@ export default class ChatHook extends Module {
 				path: 'Chat > Channel Points >> General',
 				title: 'Display Channel Points button beneath chat.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			}
 		});
 
@@ -571,7 +578,8 @@ export default class ChatHook extends Module {
 				title: 'Automatically claim bonus rewards.',
 				component: 'setting-check-box',
 				force_seen: true,
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Behavior >> Channel Points'
 			}
 		});
 
@@ -581,7 +589,8 @@ export default class ChatHook extends Module {
 				path: 'Chat > Drops >> Behavior',
 				title: 'Automatically claim drops.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Behavior >> Drops'
 			}
 		});
 
@@ -644,7 +653,8 @@ export default class ChatHook extends Module {
 				title: 'Display Leaderboard',
 				description: 'The leaderboard shows the top cheerers and sub gifters in a channel.\n\nBy default due to a previous implementation, this inherits its value from [Chat > Bits and Cheering > Display Bits](~chat.bits_and_cheering).',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			}
 		});
 

src/sites/twitch-twilight/modules/chat/input.jsx

@@ -79,7 +79,8 @@ export default class Input extends Module {
 				path: 'Chat > Hype Chat >> Input',
 				title: 'Allow the Hype Chat button to appear in the chat input element.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			}
 		});
 
@@ -99,7 +100,8 @@ export default class Input extends Module {
 				path: 'Chat > Input >> Recent Messages',
 				title: 'Allow pressing up and down to recall previously sent chat messages.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Behavior >> Input'
 			}
 		});
 

src/sites/twitch-twilight/modules/chat/viewer_card.jsx

@@ -23,7 +23,8 @@ export default class ViewerCards extends Module {
 				path: 'Chat > Viewer Cards >> Appearance',
 				title: 'Highlight messages from users with open viewer cards.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Appearance >> Highlighting'
 			}
 		});
 

src/sites/twitch-twilight/modules/css_tweaks/index.js

@@ -196,6 +196,7 @@ export default class CSSTweaks extends Module {
 				title: 'Display Recommended / Popular Channels',
 				component: 'setting-select-box',
 				simple: true,
+				simple_path: 'Twitch Appearance >> Side Navigation',
 				data: [
 					{value: 0, title: 'Never'},
 					{value: 1, title: 'Always'},
@@ -215,6 +216,7 @@ export default class CSSTweaks extends Module {
 				title: 'Display Online Friends',
 				component: 'setting-select-box',
 				simple: true,
+				simple_path: 'Twitch Appearance >> Side Navigation',
 				data: [
 					{value: 0, title: 'Never'},
 					{value: 1, title: 'Always'},
@@ -243,7 +245,8 @@ export default class CSSTweaks extends Module {
 				path: 'Appearance > Layout >> Side Navigation',
 				title: 'Hide Offline Channels',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Twitch Appearance >> Side Navigation',
 			},
 			changed: val => this.toggleHide('side-offline-channels', val)
 		});
@@ -255,6 +258,7 @@ export default class CSSTweaks extends Module {
 				title: 'Display Reruns',
 				component: 'setting-select-box',
 				simple: true,
+				simple_path: 'Twitch Appearance >> Side Navigation',
 				data: [
 					{value: 0, title: 'Do Not Display'},
 					{value: 1, title: 'Normally'},
@@ -354,7 +358,8 @@ export default class CSSTweaks extends Module {
 				path: 'Appearance > Layout >> Top Navigation',
 				title: 'Allow the Twitch Turbo button to appear.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Twitch Appearance >> Top Navigation',
 			}
 		});
 
@@ -364,7 +369,8 @@ export default class CSSTweaks extends Module {
 				path: 'Appearance > Layout >> Top Navigation',
 				title: 'Show Prime Gaming Loot.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Twitch Appearance >> Top Navigation',
 			},
 			changed: val => this.toggleHide('prime-offers', !val)
 		});
@@ -387,7 +393,8 @@ export default class CSSTweaks extends Module {
 				path: 'Chat > Whispers >> General',
 				title: 'Display Whispers',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			},
 			changed: val => {
 				this.toggleHide('whispers', !val);
@@ -401,7 +408,8 @@ export default class CSSTweaks extends Module {
 				path: 'Chat > Hype Chat >> Appearance',
 				title: 'Allow Hype Chat messages to appear pinned at the top of chat.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			},
 			changed: val => this.toggleHide('pinned-hype-chat', ! val)
 		});
@@ -414,7 +422,8 @@ export default class CSSTweaks extends Module {
 				title: 'Display Bits',
 				description: 'Display UI associated with bits. Note: This will not hide cheering in chat messages.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Chat > Hide Features'
 			},
 			changed: val => this.toggle('hide-bits', !val)
 		});

src/sites/twitch-twilight/modules/directory/index.jsx

@@ -206,7 +206,8 @@ export default class Directory extends Module {
 				path: 'Directory > Following >> Categories',
 				title: 'Do not show `Recommended Live Channels` in the Following Directory.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Twitch Appearance >> Directory'
 			},
 
 			changed: () => this.DirectoryShelf.forceUpdate()

src/sites/twitch-twilight/modules/layout.js

@@ -66,7 +66,8 @@ export default class Layout extends Module {
 				title: 'Enable Portrait Mode',
 				description: 'In Portrait Mode, chat will be displayed beneath the player when the window is taller than it is wide.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Twitch Appearance >> Channel'
 			}
 		});
 
@@ -111,7 +112,8 @@ export default class Layout extends Module {
 				title: 'Use compact chat in Portrait Mode.',
 				description: 'When enabled, this minimizes the chat header and places the chat input box in line with the chat buttons in order to present a more compact chat able to display more lines with limited vertical space.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Twitch Appearance >> Channel'
 			},
 			//changed: val => this.css_tweaks.toggle('portrait-chat', val)
 		})

src/sites/twitch-twilight/modules/player.jsx

@@ -91,7 +91,8 @@ export default class Player extends PlayerBase {
 				path: 'Player > General >> Playback',
 				title: 'Auto-play featured broadcasters on the front page.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Player >> Playback',
 			},
 		});
 
@@ -125,7 +126,8 @@ export default class Player extends PlayerBase {
 				path: 'Player > General >> Theatre Mode',
 				title: 'Show metadata when mousing over the player.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Player >> Theatre Mode',
 			},
 
 			changed: val => this.css_tweaks.toggle('theatre-metadata', val)
@@ -137,7 +139,8 @@ export default class Player extends PlayerBase {
 				path: 'Player > General >> Theatre Mode',
 				title: 'Automatically open Theatre Mode when visiting a channel.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Player >> Theatre Mode',
 			}
 		});
 
@@ -147,7 +150,8 @@ export default class Player extends PlayerBase {
 				path: 'Player > General >> Fullscreen',
 				title: 'Automatically expand chat when entering fullscreen mode.',
 				component: 'setting-check-box',
-				simple: true
+				simple: true,
+				simple_path: 'Player >> Fullscreen',
 			}
 		});