feat: implement drafts sidebar group

Author: dougfabris

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

@@ -0,0 +1,82 @@
+import { useSyncExternalStore, useCallback, useRef } from 'react';
+
+const MESSAGEBOX_PREFIX = 'messagebox_';
+
+const areSetsEqual = (a: Set<string>, b: Set<string>): boolean => {
+	if (a.size !== b.size) return false;
+	for (const item of a) {
+		if (!b.has(item)) return false;
+	}
+	return true;
+};
+
+const emptySet = new Set<string>();
+
+export const useDraftRoomIds = (enabled = true): Set<string> => {
+	const cacheRef = useRef<Set<string>>(new Set());
+
+	const getSnapshot = useCallback(() => {
+		if (!enabled) {
+			return emptySet;
+		}
+
+		if (typeof window === 'undefined' || !window.localStorage) {
+			return cacheRef.current;
+		}
+
+		const draftRoomIds = new Set<string>();
+
+		try {
+			const keys = Object.keys(localStorage);
+			for (const key of keys) {
+				if (!key.startsWith(MESSAGEBOX_PREFIX)) {
+					continue;
+				}
+
+				const content = localStorage.getItem(key);
+				if (!content?.trim()) {
+					continue;
+				}
+
+				const roomId = key.substring(MESSAGEBOX_PREFIX.length);
+				draftRoomIds.add(roomId);
+			}
+		} catch (error) {
+			console.error('Error reading drafts from localStorage:', error);
+		}
+
+		if (!areSetsEqual(cacheRef.current, draftRoomIds)) {
+			cacheRef.current = draftRoomIds;
+		}
+
+		return cacheRef.current;
+	}, [enabled]);
+
+	const subscribe = useCallback((callback: () => void) => {
+		if (!enabled) {
+			return () => {};
+		}
+
+		const handleStorageChange = (e: StorageEvent) => {
+			if (e.key?.startsWith(MESSAGEBOX_PREFIX) || e.key === null) {
+				callback();
+			}
+		};
+
+		window.addEventListener('storage', handleStorageChange);
+
+		const handleLocalUpdate = (e: Event) => {
+			if (e instanceof CustomEvent && e.detail?.key?.startsWith(MESSAGEBOX_PREFIX)) {
+				callback();
+			}
+		};
+		window.addEventListener('localStorageUpdated', handleLocalUpdate);
+
+		return () => {
+			window.removeEventListener('storage', handleStorageChange);
+			window.removeEventListener('localStorageUpdated', handleLocalUpdate);
+		};
+	}, [enabled]);
+
+	return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+};

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

@@ -3,8 +3,10 @@ import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import type { SubscriptionWithRoom, TranslationKey } from '@rocket.chat/ui-contexts';
 import { useUserPreference, useUserSubscriptions, useSetting } from '@rocket.chat/ui-contexts';
 import { useVideoConfIncomingCalls } from '@rocket.chat/ui-video-conf';
+import { useFeaturePreview } from '@rocket.chat/ui-client';
 import { useMemo } from 'react';
 
+import { useDraftRoomIds } from './useDraftRoomIds';
 import { useSortQueryOptions } from '../../hooks/useSortQueryOptions';
 import { useOmnichannelEnabled } from '../../views/omnichannel/hooks/useOmnichannelEnabled';
 import { useQueuedInquiries } from '../../views/omnichannel/hooks/useQueuedInquiries';
@@ -19,6 +21,7 @@ const order = [
 	'Open_Livechats',
 	'On_Hold_Chats',
 	'Unread',
+	'Drafts',
 	'Favorites',
 	'Teams',
 	'Discussions',
@@ -40,7 +43,8 @@ export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] })
 	const showOmnichannel = useOmnichannelEnabled();
 	const sidebarGroupByType = useUserPreference('sidebarGroupByType');
 	const favoritesEnabled = useUserPreference('sidebarShowFavorites');
-	const sidebarOrder = useUserPreference<typeof order>('sidebarSectionsOrder') ?? order;
+	const sidebarDrafts = useFeaturePreview('sidebarDrafts');
+	const sidebarOrder =  useUserPreference<typeof order>('sidebarSectionsOrder') ?? order;
 	const isDiscussionEnabled = useSetting('Discussion_enabled');
 	const sidebarShowUnread = useUserPreference('sidebarShowUnread');
 
@@ -52,12 +56,15 @@ export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] })
 
 	const incomingCalls = useVideoConfIncomingCalls();
 
+	const draftRoomIds = useDraftRoomIds(sidebarDrafts);
+
 	const queue = inquiries.enabled ? inquiries.queue : emptyQueue;
 
 	const { groupsCount, groupsList, roomList, groupedUnreadInfo } = useDebouncedValue(
 		useMemo(() => {
 			const isCollapsed = (groupTitle: string) => collapsedGroups?.includes(groupTitle);
 
+			const drafts = new Set();
 			const incomingCall = new Set();
 			const favorite = new Set();
 			const team = new Set();
@@ -82,6 +89,10 @@ export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] })
 					return unread.add(room);
 				}
 
+				if (sidebarDrafts && draftRoomIds.has(room.rid)) {
+					return drafts.add(room);
+				}
+
 				if (favoritesEnabled && room.f) {
 					return favorite.add(room);
 				}
@@ -122,6 +133,8 @@ export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] })
 
 			sidebarShowUnread && unread.size && groups.set('Unread', unread);
 
+			sidebarDrafts && drafts.size && groups.set('Drafts', drafts);
+
 			favoritesEnabled && favorite.size && groups.set('Favorites', favorite);
 
 			sidebarGroupByType && team.size && groups.set('Teams', team);
@@ -193,6 +206,7 @@ export const useRoomList = ({ collapsedGroups }: { collapsedGroups?: string[] })
 			rooms,
 			showOmnichannel,
 			inquiries.enabled,
+			draftRoomIds,
 			queue,
 			sidebarShowUnread,
 			favoritesEnabled,

apps/meteor/server/settings/accounts.ts

@@ -749,6 +749,7 @@ export const createAccountSettings = () =>
 				'Open_Livechats',
 				'On_Hold_Chats',
 				'Unread',
+				'Drafts',
 				'Favorites',
 				'Teams',
 				'Discussions',