feat: add accounts setting to reorganize sections (#32744)

Co-authored-by: Júlia Jaeger Foresti <60678893+juliajforesti@users.noreply.github.com>

.changeset/selfish-emus-sing.md

@@ -0,0 +1,6 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/i18n": minor
+---
+
+Added account setting `Accounts_Default_User_Preferences_sidebarSectionsOrder`  to allow users to reorganize sidebar sections

apps/meteor/client/sidebar/hooks/useRoomList.ts

@@ -12,12 +12,39 @@ const query = { open: { $ne: false } };
 
 const emptyQueue: ILivechatInquiryRecord[] = [];
 
+const order: (
+	| 'Incoming_Calls'
+	| 'Incoming_Livechats'
+	| 'Open_Livechats'
+	| 'On_Hold_Chats'
+	| 'Unread'
+	| 'Favorites'
+	| 'Teams'
+	| 'Discussions'
+	| 'Channels'
+	| 'Direct_Messages'
+	| 'Conversations'
+)[] = [
+	'Incoming_Calls',
+	'Incoming_Livechats',
+	'Open_Livechats',
+	'On_Hold_Chats',
+	'Unread',
+	'Favorites',
+	'Teams',
+	'Discussions',
+	'Channels',
+	'Direct_Messages',
+	'Conversations',
+];
+
 export const useRoomList = (): Array<ISubscription & IRoom> => {
 	const [roomList, setRoomList] = useDebouncedState<(ISubscription & IRoom)[]>([], 150);
 
 	const showOmnichannel = useOmnichannelEnabled();
 	const sidebarGroupByType = useUserPreference('sidebarGroupByType');
 	const favoritesEnabled = useUserPreference('sidebarShowFavorites');
+	const sidebarOrder = useUserPreference<typeof order>('sidebarSectionsOrder') ?? order;
 	const isDiscussionEnabled = useSetting('Discussion_enabled');
 	const sidebarShowUnread = useUserPreference('sidebarShowUnread');
 
@@ -92,7 +119,7 @@ export const useRoomList = (): Array<ISubscription & IRoom> => {
 			});
 
 			const groups = new Map();
-			incomingCall.size && groups.set('Incoming Calls', incomingCall);
+			incomingCall.size && groups.set('Incoming_Calls', incomingCall);
 			showOmnichannel && inquiries.enabled && queue.length && groups.set('Incoming_Livechats', queue);
 			showOmnichannel && omnichannel.size && groups.set('Open_Livechats', omnichannel);
 			showOmnichannel && onHold.size && groups.set('On_Hold_Chats', onHold);
@@ -103,7 +130,16 @@ export const useRoomList = (): Array<ISubscription & IRoom> => {
 			sidebarGroupByType && channels.size && groups.set('Channels', channels);
 			sidebarGroupByType && direct.size && groups.set('Direct_Messages', direct);
 			!sidebarGroupByType && groups.set('Conversations', conversation);
-			return [...groups.entries()].flatMap(([key, group]) => [key, ...group]);
+			return sidebarOrder
+				.map((key) => {
+					const group = groups.get(key);
+					if (!group) {
+						return [];
+					}
+
+					return [key, ...group];
+				})
+				.flat();
 		});
 	}, [
 		rooms,
@@ -116,6 +152,7 @@ export const useRoomList = (): Array<ISubscription & IRoom> => {
 		sidebarGroupByType,
 		setRoomList,
 		isDiscussionEnabled,
+		sidebarOrder,
 	]);
 
 	return roomList;

apps/meteor/server/settings/accounts.ts

@@ -709,6 +709,28 @@ export const createAccountSettings = () =>
 				public: true,
 				i18nLabel: 'VideoConf_Mobile_Ringing',
 			});
+
+			const defaultUserPreferencesSidebarSectionsOrder = [
+				'Incoming_Calls',
+				'Incoming_Livechats',
+				'Open_Livechats',
+				'On_Hold_Chats',
+				'Unread',
+				'Favorites',
+				'Teams',
+				'Discussions',
+				'Channels',
+				'Direct_Messages',
+				'Conversations',
+			];
+
+			await this.add('Accounts_Default_User_Preferences_sidebarSectionsOrder', defaultUserPreferencesSidebarSectionsOrder, {
+				type: 'multiSelect',
+				public: true,
+				values: defaultUserPreferencesSidebarSectionsOrder.map((key) => ({ key, i18nLabel: key })),
+				i18nLabel: 'Sidebar_Sections_Order',
+				i18nDescription: 'Sidebar_Sections_Order_Description',
+			});
 		});
 
 		await this.section('Avatar', async function () {

apps/meteor/tests/end-to-end/api/miscellaneous.ts

@@ -182,6 +182,7 @@ describe('miscellaneous', () => {
 					'sidebarViewMode',
 					'sidebarDisplayAvatar',
 					'sidebarGroupByType',
+					'sidebarSectionsOrder',
 					'muteFocusedConversations',
 					'notifyCalendarEvents',
 					'enableMobileRinging',

packages/i18n/src/locales/en.i18n.json

@@ -2699,7 +2699,7 @@
   "Inclusive": "Inclusive",
   "Incoming": "Incoming",
   "Incoming_call_from": "Incoming call from",
-  "Incoming_Livechats": "Queued Chats",
+  "Incoming_Livechats": "Queued chats",
   "Incoming_WebHook": "Incoming WebHook",
   "Industry": "Industry",
   "Info": "Info",
@@ -4016,7 +4016,7 @@
   "on-hold-others-livechat-room": "On Hold Others Omnichannel Room",
   "on-hold-others-livechat-room_description": "Permission to on hold others omnichannel room",
   "On_Hold": "On hold",
-  "On_Hold_Chats": "On Hold",
+  "On_Hold_Chats": "On hold",
   "On_Hold_conversations": "On hold conversations",
   "online": "online",
   "Online": "Online",
@@ -4040,7 +4040,7 @@
   "Open_days_of_the_week": "Open Days of the Week",
   "Open_Dialpad": "Open Dialpad",
   "Open_directory": "Open directory",
-  "Open_Livechats": "Chats in Progress",
+  "Open_Livechats": "Chats in progress",
   "Open_Outlook": "Open Outlook",
   "Open_settings": "Open settings",
   "Open_sidebar": "Open sidebar",
@@ -6480,5 +6480,8 @@
   "You_cant_take_chats_offline": "You cannot take new conversations because you're offline",
   "New_navigation": "Enhanced navigation experience",
   "New_navigation_description": "Explore our improved navigation, designed with clear scopes for easy access to what you need. This change serves as the foundation for future advancements in navigation management.",
-  "Workspace_and_user_settings": "Workspace and user settings"
+  "Workspace_and_user_settings": "Workspace and user settings",
+  "Sidebar_Sections_Order": "Sidebar sections order",
+  "Sidebar_Sections_Order_Description": "Select the categories in your preferred order",
+  "Incoming_Calls": "Incoming calls"
 }