feat: refactor announcements page and layout to support sidebar slide-out functionality

- Replaced the existing announcement card and empty state components with imports from the new announcements directory.
- Introduced state management for the announcements sidebar in the LayoutDataProvider.
- Updated navigation items to handle announcements sidebar toggling.
- Integrated AnnouncementsSidebar into the LayoutShell for both mobile and desktop views.
- Enhanced sidebar handling to improve user experience when navigating announcements.

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -114,6 +114,9 @@ export function LayoutDataProvider({
 	const [isInboxSidebarOpen, setIsInboxSidebarOpen] = useState(false);
 	const [isInboxDocked, setIsInboxDocked] = useState(false);
 
+	// Announcements sidebar state
+	const [isAnnouncementsSidebarOpen, setIsAnnouncementsSidebarOpen] = useState(false);
+
 	// Search space dialog state
 	const [isCreateSearchSpaceDialogOpen, setIsCreateSearchSpaceDialogOpen] = useState(false);
 
@@ -292,6 +295,12 @@ export function LayoutDataProvider({
 	// Navigation items
 	const navItems: NavItem[] = useMemo(
 		() => [
+			{
+				title: "Documents",
+				url: `/dashboard/${searchSpaceId}/documents`,
+				icon: SquareLibrary,
+				isActive: pathname?.includes("/documents"),
+			},
 			{
 				title: "Inbox",
 				url: "#inbox", // Special URL to indicate this is handled differently
@@ -299,21 +308,22 @@ export function LayoutDataProvider({
 				isActive: isInboxSidebarOpen,
 				badge: totalUnreadCount > 0 ? formatInboxCount(totalUnreadCount) : undefined,
 			},
-			{
-				title: "Documents",
-				url: `/dashboard/${searchSpaceId}/documents`,
-				icon: SquareLibrary,
-				isActive: pathname?.includes("/documents"),
-			},
 			{
 				title: "Announcements",
-				url: "/announcements",
+				url: "#announcements", // Special URL to indicate this is handled differently
 				icon: Megaphone,
-				isActive: pathname?.includes("/announcements"),
+				isActive: isAnnouncementsSidebarOpen,
 				badge: announcementUnreadCount > 0 ? formatInboxCount(announcementUnreadCount) : undefined,
 			},
 		],
-		[searchSpaceId, pathname, isInboxSidebarOpen, totalUnreadCount, announcementUnreadCount]
+		[
+			searchSpaceId,
+			pathname,
+			isInboxSidebarOpen,
+			totalUnreadCount,
+			isAnnouncementsSidebarOpen,
+			announcementUnreadCount,
+		]
 	);
 
 	// Handlers
@@ -411,6 +421,19 @@ export function LayoutDataProvider({
 					if (!prev) {
 						setIsAllSharedChatsSidebarOpen(false);
 						setIsAllPrivateChatsSidebarOpen(false);
+						setIsAnnouncementsSidebarOpen(false);
+					}
+					return !prev;
+				});
+				return;
+			}
+			// Handle announcements specially - toggle sidebar instead of navigating
+			if (item.url === "#announcements") {
+				setIsAnnouncementsSidebarOpen((prev) => {
+					if (!prev) {
+						setIsInboxSidebarOpen(false);
+						setIsAllSharedChatsSidebarOpen(false);
+						setIsAllPrivateChatsSidebarOpen(false);
 					}
 					return !prev;
 				});
@@ -418,7 +441,13 @@ export function LayoutDataProvider({
 			}
 			router.push(item.url);
 		},
-		[router]
+		[
+			router,
+			setIsAllPrivateChatsSidebarOpen,
+			setIsAllSharedChatsSidebarOpen,
+			setIsAnnouncementsSidebarOpen,
+			setIsInboxSidebarOpen,
+		]
 	);
 
 	const handleNewChat = useCallback(() => {
@@ -515,12 +544,14 @@ export function LayoutDataProvider({
 		setIsAllSharedChatsSidebarOpen(true);
 		setIsAllPrivateChatsSidebarOpen(false);
 		setIsInboxSidebarOpen(false);
+		setIsAnnouncementsSidebarOpen(false);
 	}, []);
 
 	const handleViewAllPrivateChats = useCallback(() => {
 		setIsAllPrivateChatsSidebarOpen(true);
 		setIsAllSharedChatsSidebarOpen(false);
 		setIsInboxSidebarOpen(false);
+		setIsAnnouncementsSidebarOpen(false);
 	}, []);
 
 	// Delete handlers
@@ -641,6 +672,10 @@ export function LayoutDataProvider({
 					isDocked: isInboxDocked,
 					onDockedChange: setIsInboxDocked,
 				}}
+				announcementsPanel={{
+					open: isAnnouncementsSidebarOpen,
+					onOpenChange: setIsAnnouncementsSidebarOpen,
+				}}
 				allSharedChatsPanel={{
 					open: isAllSharedChatsSidebarOpen,
 					onOpenChange: setIsAllSharedChatsSidebarOpen,