Feature: Customize sidebar section visibility in the user settings screen.

Author: jhuckaby

docs/config.md

@@ -520,6 +520,8 @@ See [Privileges](privileges.md) for more details on privileges.
 
 This object sets default UI preferences for new users (locale, theme, motion/contrast, volume, saved searches, etc.), merged into profiles at creation/login.
 
+See [User](data.md#user) for details on what properties can be specified here.
+
 
 
 ## db_maint

docs/data.md

@@ -1692,6 +1692,7 @@ A user account is a representation of an individual user within the system.  The
 			"loc": "Search?result=critical"
 		}
 	],
+	"sidebar": ["main", "job_searches", "ticket_searches", "shortcuts", "scheduler", "monitoring", "settings", "admin", "help"],
 	"timezone": "",
 	"username": "bluetiger469",
 	"volume": 7
@@ -1794,6 +1795,14 @@ A list of roles assigned to the user.  See [Role](#role).
 
 A list of search presets for the user.
 
+### User.sidebar
+
+An array of all the sidebar sections to show in the UI for the user.  The default full set is:
+
+```json
+["main", "job_searches", "ticket_searches", "shortcuts", "scheduler", "monitoring", "settings", "admin", "help"]
+```
+
 ## WebHook
 
 A web hook is a user-defined HTTP callback that is triggered by specific actions in xyOps. When the specified action occurs, the web hook sends a HTTP request to the specified URL with an optional payload containing information about the event. Web hooks are commonly used for real-time notifications, integrations with other services, and automating workflows.  Here is an example Web Hook in JSON format:

htdocs/index-dev.html

@@ -39,52 +39,52 @@
 	<div class="sidebar">
 		<div class="title"></div>
 
-		<div class="section_title"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-home">&nbsp;</i>Main</div>
-		<div class="section">
+		<div class="section_title sbs_main"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-home">&nbsp;</i>Main</div>
+		<div class="section sbs_main">
 			<a href="#Dashboard" id="tab_Dashboard" class="section_item"><i class="icon mdi mdi-monitor-dashboard">&nbsp;</i>Dashboard</a>
 		</div>
 
-		<div class="section_title"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-account-search-outline">&nbsp;</i>Job Searches</div>
-		<div id="d_section_my_job_searches" class="section"></div>
+		<div class="section_title sbs_job_searches"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-account-search-outline">&nbsp;</i>Job Searches</div>
+		<div id="d_section_my_job_searches" class="section sbs_job_searches"></div>
 
-		<div class="section_title"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-text-box-search-outline">&nbsp;</i>Ticket Searches</div>
-		<div id="d_section_my_ticket_searches" class="section"></div>
+		<div class="section_title sbs_ticket_searches"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-text-box-search-outline">&nbsp;</i>Ticket Searches</div>
+		<div id="d_section_my_ticket_searches" class="section sbs_ticket_searches"></div>
 
-		<div class="section_title"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-hand-pointing-right">&nbsp;</i>Shortcuts</div>
-		<div class="section">
-			<a href="#Tickets?sub=new" id="tab_NewTicket" class="section_item"><i class="icon mdi mdi-text-box-plus-outline">&nbsp;</i>New Ticket...</a>
-			<a href="#Events?sub=new" id="tab_NewEvent" class="section_item"><i class="icon mdi mdi-calendar-edit-outline">&nbsp;</i>New Event...</a>
-			<a href="#Workflows?sub=new" id="tab_NewWorkflow" class="section_item"><i class="icon mdi mdi-clipboard-edit-outline">&nbsp;</i>New Workflow...</a>
-			<a href="#Servers?add=1" id="tab_NewServer" class="section_item"><i class="icon mdi mdi-server-plus-outline">&nbsp;</i>New Server...</a>
+		<div class="section_title sbs_shortcuts"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-hand-pointing-right">&nbsp;</i>Shortcuts</div>
+		<div class="section sbs_shortcuts">
+			<a href="#Tickets?sub=new" id="tab_NewTicket" class="section_item sbs_ticket_searches"><i class="icon mdi mdi-text-box-plus-outline">&nbsp;</i>New Ticket...</a>
+			<a href="#Events?sub=new" id="tab_NewEvent" class="section_item sbs_scheduler"><i class="icon mdi mdi-calendar-edit-outline">&nbsp;</i>New Event...</a>
+			<a href="#Workflows?sub=new" id="tab_NewWorkflow" class="section_item sbs_scheduler"><i class="icon mdi mdi-clipboard-edit-outline">&nbsp;</i>New Workflow...</a>
+			<a href="#Servers?add=1" id="tab_NewServer" class="section_item sbs_monitoring"><i class="icon mdi mdi-server-plus-outline">&nbsp;</i>New Server...</a>
 		</div>
 
-		<div class="section_title"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-calendar-multiple">&nbsp;</i>Scheduler</div>
-		<div class="section">
+		<div class="section_title sbs_scheduler"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-calendar-multiple">&nbsp;</i>Scheduler</div>
+		<div class="section sbs_scheduler">
 			<a href="#Events" id="tab_Events" class="section_item"><i class="icon mdi mdi-calendar-clock">&nbsp;</i>Events</a>
 			<a href="#Events?plugin=_workflow" id="tab_Workflows" class="section_item"><i class="icon mdi mdi-clipboard-flow-outline">&nbsp;</i>Workflows</a>
 			<a href="#Categories" id="tab_Categories" class="section_item"><i class="icon mdi mdi-folder-multiple-outline">&nbsp;</i>Categories</a>
 			<a href="#Buckets" id="tab_Buckets" class="section_item"><i class="icon mdi mdi-pail-outline">&nbsp;</i>Buckets</a>
 			<a href="#Tags" id="tab_Tags" class="section_item"><i class="icon mdi mdi-tag-multiple-outline">&nbsp;</i>Tags</a>
 		</div>
 
-		<div class="section_title"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-camera-outline">&nbsp;</i>Monitoring</div>
-		<div class="section">
+		<div class="section_title sbs_monitoring"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-camera-outline">&nbsp;</i>Monitoring</div>
+		<div class="section sbs_monitoring">
 			<a href="#Alerts" id="tab_Alerts" class="section_item"><i class="icon mdi mdi-car-brake-alert">&nbsp;</i>Alerts</a>
 			<a href="#Servers" id="tab_Servers" class="section_item"><i class="icon mdi mdi-server">&nbsp;</i>Servers</a>
 			<a href="#Groups" id="tab_Groups" class="section_item"><i class="icon mdi mdi-lan">&nbsp;</i>Groups</a>
 			<a href="#Snapshots" id="tab_Snapshots" class="section_item"><i class="icon mdi mdi-monitor-multiple">&nbsp;</i>Snapshots</a>
 		</div>
 
-		<div class="section_title"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-cogs">&nbsp;</i>Settings</div>
-		<div class="section">
+		<div class="section_title sbs_settings"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-cogs">&nbsp;</i>Settings</div>
+		<div class="section sbs_settings">
 			<a href="#MyAccount" id="tab_MyAccount" class="section_item"><i class="icon mdi mdi-account">&nbsp;</i>My Account</a>
 			<a href="#MySettings" id="tab_MySettings" class="section_item"><i class="icon mdi mdi-tune-vertical-variant">&nbsp;</i>Preferences</a>
 			<a href="#MySecurity" id="tab_MySecurity" class="section_item"><i class="icon mdi mdi-shield-account">&nbsp;</i>Security Log</a>
 		</div>
 
 		<div id="d_sidebar_admin_group" style="margin-top:10px">
-			<div class="section_title"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-lock">&nbsp;</i>Admin</div>
-			<div class="section">
+			<div class="section_title sbs_admin"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-lock">&nbsp;</i>Admin</div>
+			<div class="section sbs_admin">
 				<a href="#ActivityLog" id="tab_ActivityLog" class="section_item"><i class="icon mdi mdi-script-text-outline">&nbsp;</i>Activity Log</a>
 				<a href="#AlertSetup" id="tab_AlertSetup" class="section_item"><i class="icon mdi mdi-bell-ring-outline">&nbsp;</i>Alert Setup</a>
 				<a href="#APIKeys" id="tab_APIKeys" class="section_item"><i class="icon mdi mdi-key-chain-variant">&nbsp;</i>API Keys</a>
@@ -103,8 +103,8 @@
 			</div>
 		</div>
 
-		<div class="section_title"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-help-network-outline">&nbsp;</i>Help</div>
-		<div class="section">
+		<div class="section_title sbs_help"><i class="ctrl mdi mdi-chevron-down"></i><i class="icon mdi mdi-help-network-outline">&nbsp;</i>Help</div>
+		<div class="section sbs_help">
 			<a href="#Docs" id="tab_Docs" class="section_item"><i class="icon mdi mdi-file-document-multiple-outline">&nbsp;</i>Documentation</a>
 			<a href="#Docs/support" id="tab_Support" class="section_item"><i class="icon mdi mdi-lifebuoy">&nbsp;</i>Support</a>
 		</div>

htdocs/js/app.js

@@ -510,10 +510,22 @@ app.extend({
 			$('#tab_LogViewer').removeClass('enabled').hide();
 		}
 
+		// apply user preferences for sidebar sections
+		var user_sections = app.user.sidebar || config.ui.sidebar_sections.map( section => section.id );
+		config.ui.sidebar_sections.forEach( function(section) {
+			var $sect = $('.sidebar .sbs_' + section.id);
+			if (user_sections.includes(section.id)) $sect.show();
+			else $sect.removeClass('enabled').hide();
+		} );
+		
 		// possibly hide entire admin section
 		if ($('#d_sidebar_admin_group > .section > .section_item.enabled').length) $('#d_sidebar_admin_group').show();
 		else $('#d_sidebar_admin_group').hide();
 
+		// possibly hide entire shortcuts section if all items are hidden
+		if ($('.sidebar > section.sbs_shortcuts > .section_item.enabled').length) $('.sidebar > section_title.sbs_shortcuts, .sidebar > section.sbs_shortcuts').show();
+		else $('.sidebar > section_title.sbs_shortcuts, .sidebar > section.sbs_shortcuts').hide();
+		
 		// add hint to body tag for admin UI hints
 		if (this.isAdmin()) $('body').addClass('admin');
 		else $('body').removeClass('admin');

htdocs/js/pages/user/MySettings.class.js

@@ -157,6 +157,22 @@ Page.MySettings = class MySettings extends Page.Base {
 		html += '</div>';
 		html += '<div class="box_content" style="margin-bottom:30px">';
 
+		// sidebar sections
+		html += this.getFormRow({
+			label: 'Sidebar:',
+			content: this.getFormMenuMulti({
+				id: 'fe_ms_sidebar',
+				title: 'Show sidebar sections',
+				placeholder: 'Select sidebar sections to show...',
+				options: config.ui.sidebar_sections,
+				values: user.sidebar || config.ui.sidebar_sections.map( section => section.id ),
+				onChange: '$P().saveChanges()',
+				'data-hold': 1,
+				'data-select-all': 1
+			}),
+			caption: 'Select which sidebar sections you would like to be visible.'
+		});
+		
 		// motion preference
 		html += this.getFormRow({
 			label: 'Motion:',
@@ -428,6 +444,7 @@ Page.MySettings = class MySettings extends Page.Base {
 
 		this.div.html( html ).buttonize();
 		SingleSelect.init( this.div.find('#fe_ms_language, #fe_ms_region, #fe_ms_tz, #fe_ms_numformat, #fe_ms_hrcycle, #fe_ms_motionacc, #fe_ms_contrastacc') );
+		MultiSelect.init( this.div.find('#fe_ms_sidebar') );
 		this.update_date_time_preview();
 	}
 
@@ -571,7 +588,7 @@ Page.MySettings = class MySettings extends Page.Base {
 			var tds = [
 				'<span><i class="mdi mdi-' + ((item.page_id == 'Global') ? 'earth' : 'folder-open-outline') + '">&nbsp;</i>' + item.page_id + '</span>',
 				`<button class="link icon_pad" onClick="$P().doEditHotKey(this)" data-keyid="${item.id}"><i class="mdi mdi-keyboard-outline"></i><b>${item.title}</b></button>`,
-				self.getNiceHotKeyList(item.keys) || '&nbsp;',
+				self.getNiceHotKeyList(item.keys, ' , ') || '&nbsp;',
 				item.edited ? '<i class="mdi mdi-checkbox-marked-outline"></i>' : '-',
 				`<button class="link" onClick="$P().doEditHotKey(this)" data-keyid="${item.id}"><b>Edit Keys</b></button>`
 			];
@@ -736,6 +753,7 @@ Page.MySettings = class MySettings extends Page.Base {
 			page_info: this.div.find('#fe_ms_pageinfo').is(':checked'),
 			notifications: this.div.find('#fe_ms_notify').is(':checked'),
 			effects: this.div.find('#fe_ms_effects').is(':checked'),
+			sidebar: this.div.find('#fe_ms_sidebar').val(),
 			filters: {}
 		};
 

internal/ui.json

@@ -1335,6 +1335,18 @@
 		"data": "Data"
 	},
 
+	"sidebar_sections": [
+		{ "id": "main", "title": "Main", "icon": "home" },
+		{ "id": "job_searches", "title": "Job Searches", "icon": "account-search-outline" },
+		{ "id": "ticket_searches", "title": "Ticket Searches", "icon": "text-box-search-outline" },
+		{ "id": "shortcuts", "title": "Shortcuts", "icon": "hand-pointing-right" },
+		{ "id": "scheduler", "title": "Scheduler", "icon": "calendar-multiple" },
+		{ "id": "monitoring", "title": "Monitoring", "icon": "camera-outline" },
+		{ "id": "settings", "title": "Settings", "icon": "cogs" },
+		{ "id": "admin", "title": "Admin", "icon": "lock" },
+		{ "id": "help", "title": "Help", "icon": "help-network-outline" }
+	],
+	
 	"satellite_install_menu": [
 		{ "id": "standard", "title": "Linux", "icon": "penguin" },
 		{ "id": "macos", "title": "macOS", "icon": "apple" },