Merge remote-tracking branch 'upstream/dev' into feat/document-revamp

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -124,6 +124,9 @@ export function LayoutDataProvider({
 	// Documents sidebar state (shared atom so Composer can toggle it)
 	const [isDocumentsSidebarOpen, setIsDocumentsSidebarOpen] = useAtom(documentsSidebarOpenAtom);
 
+	// Announcements sidebar state
+	const [isAnnouncementsSidebarOpen, setIsAnnouncementsSidebarOpen] = useState(false);
+
 	// Search space dialog state
 	const [isCreateSearchSpaceDialogOpen, setIsCreateSearchSpaceDialogOpen] = useState(false);
 
@@ -267,7 +270,7 @@ export function LayoutDataProvider({
 		() => [
 			{
 				title: "Inbox",
-				url: "#inbox", // Special URL to indicate this is handled differently
+				url: "#inbox",
 				icon: Inbox,
 				isActive: isInboxSidebarOpen,
 				badge: totalUnreadCount > 0 ? formatInboxCount(totalUnreadCount) : undefined,
@@ -281,17 +284,17 @@ export function LayoutDataProvider({
 			},
 			{
 				title: "Announcements",
-				url: "/announcements",
+				url: "#announcements",
 				icon: Megaphone,
-				isActive: pathname?.includes("/announcements"),
+				isActive: isAnnouncementsSidebarOpen,
 				badge: announcementUnreadCount > 0 ? formatInboxCount(announcementUnreadCount) : undefined,
 			},
 		],
 		[
-			pathname,
 			isInboxSidebarOpen,
 			isDocumentsSidebarOpen,
 			totalUnreadCount,
+			isAnnouncementsSidebarOpen,
 			announcementUnreadCount,
 			isDocumentsProcessing,
 		]
@@ -386,25 +389,37 @@ export function LayoutDataProvider({
 
 	const handleNavItemClick = useCallback(
 		(item: NavItem) => {
-			// Handle inbox specially - toggle sidebar instead of navigating
 			if (item.url === "#inbox") {
 				setIsInboxSidebarOpen((prev) => {
 					if (!prev) {
 						setIsAllSharedChatsSidebarOpen(false);
 						setIsAllPrivateChatsSidebarOpen(false);
 						setIsDocumentsSidebarOpen(false);
+						setIsAnnouncementsSidebarOpen(false);
 					}
 					return !prev;
 				});
 				return;
 			}
-			// Handle documents specially - toggle sidebar instead of navigating
 			if (item.url === "#documents") {
 				setIsDocumentsSidebarOpen((prev) => {
 					if (!prev) {
 						setIsInboxSidebarOpen(false);
 						setIsAllSharedChatsSidebarOpen(false);
 						setIsAllPrivateChatsSidebarOpen(false);
+						setIsAnnouncementsSidebarOpen(false);
+					}
+					return !prev;
+				});
+				return;
+			}
+			if (item.url === "#announcements") {
+				setIsAnnouncementsSidebarOpen((prev) => {
+					if (!prev) {
+						setIsInboxSidebarOpen(false);
+						setIsAllSharedChatsSidebarOpen(false);
+						setIsAllPrivateChatsSidebarOpen(false);
+						setIsDocumentsSidebarOpen(false);
 					}
 					return !prev;
 				});
@@ -510,6 +525,7 @@ export function LayoutDataProvider({
 		setIsAllPrivateChatsSidebarOpen(false);
 		setIsInboxSidebarOpen(false);
 		setIsDocumentsSidebarOpen(false);
+		setIsAnnouncementsSidebarOpen(false);
 	}, [setIsDocumentsSidebarOpen]);
 
 	const handleViewAllPrivateChats = useCallback(() => {
@@ -517,6 +533,7 @@ export function LayoutDataProvider({
 		setIsAllSharedChatsSidebarOpen(false);
 		setIsInboxSidebarOpen(false);
 		setIsDocumentsSidebarOpen(false);
+		setIsAnnouncementsSidebarOpen(false);
 	}, [setIsDocumentsSidebarOpen]);
 
 	// Delete handlers
@@ -633,6 +650,10 @@ export function LayoutDataProvider({
 					isDocked: isInboxDocked,
 					onDockedChange: setIsInboxDocked,
 				}}
+				announcementsPanel={{
+					open: isAnnouncementsSidebarOpen,
+					onOpenChange: setIsAnnouncementsSidebarOpen,
+				}}
 				allSharedChatsPanel={{
 					open: isAllSharedChatsSidebarOpen,
 					onOpenChange: setIsAllSharedChatsSidebarOpen,

surfsense_web/components/layout/ui/shell/LayoutShell.tsx

@@ -13,6 +13,7 @@ import { IconRail } from "../icon-rail";
 import {
 	AllPrivateChatsSidebar,
 	AllSharedChatsSidebar,
+	AnnouncementsSidebar,
 	DocumentsSidebar,
 	InboxSidebar,
 	MobileSidebar,
@@ -77,6 +78,10 @@ interface LayoutShellProps {
 	className?: string;
 	// Inbox props
 	inbox?: InboxProps;
+	announcementsPanel?: {
+		open: boolean;
+		onOpenChange: (open: boolean) => void;
+	};
 	isLoadingChats?: boolean;
 	// All chats panel props
 	allSharedChatsPanel?: {
@@ -128,6 +133,7 @@ export function LayoutShell({
 	children,
 	className,
 	inbox,
+	announcementsPanel,
 	isLoadingChats = false,
 	allSharedChatsPanel,
 	allPrivateChatsPanel,
@@ -215,6 +221,15 @@ export function LayoutShell({
 							/>
 						)}
 
+						{/* Mobile Announcements Sidebar */}
+						{announcementsPanel?.open && (
+							<AnnouncementsSidebar
+								open={announcementsPanel.open}
+								onOpenChange={announcementsPanel.onOpenChange}
+								onCloseMobileSidebar={() => setMobileMenuOpen(false)}
+							/>
+						)}
+
 						{/* Mobile All Shared Chats - slide-out panel */}
 						{allSharedChatsPanel && (
 							<AllSharedChatsSidebar
@@ -333,6 +348,14 @@ export function LayoutShell({
 							/>
 						)}
 
+						{/* Announcements Sidebar */}
+						{announcementsPanel && (
+							<AnnouncementsSidebar
+								open={announcementsPanel.open}
+								onOpenChange={announcementsPanel.onOpenChange}
+							/>
+						)}
+
 						{/* All Shared Chats - slide-out panel */}
 						{allSharedChatsPanel && (
 							<AllSharedChatsSidebar

surfsense_web/components/layout/ui/sidebar/AnnouncementsSidebar.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { ChevronLeft } from "lucide-react";
+import { useEffect } from "react";
+import { AnnouncementsEmptyState } from "@/components/announcements/AnnouncementsEmptyState";
+import { AnnouncementCard } from "@/components/announcements/AnnouncementCard";
+import { Button } from "@/components/ui/button";
+import { useAnnouncements } from "@/hooks/use-announcements";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
+
+interface AnnouncementsSidebarProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onCloseMobileSidebar?: () => void;
+}
+
+export function AnnouncementsSidebar({
+	open,
+	onOpenChange,
+	onCloseMobileSidebar,
+}: AnnouncementsSidebarProps) {
+	const isMobile = !useMediaQuery("(min-width: 640px)");
+	const { announcements, markAllRead } = useAnnouncements();
+
+	useEffect(() => {
+		if (!open) return;
+		markAllRead();
+	}, [open, markAllRead]);
+
+	const body = (
+		<div className="h-full flex flex-col">
+			<div className="shrink-0 p-4 pb-2 space-y-3">
+				<div className="flex items-center justify-between">
+					<div className="flex items-center gap-2">
+						{isMobile && (
+							<Button
+								variant="ghost"
+								size="icon"
+								className="h-8 w-8 rounded-full"
+								onClick={() => {
+									onOpenChange(false);
+									onCloseMobileSidebar?.();
+								}}
+							>
+								<ChevronLeft className="h-4 w-4 text-muted-foreground" />
+								<span className="sr-only">Close</span>
+							</Button>
+						)}
+						<h2 className="text-lg font-semibold">Announcements</h2>
+					</div>
+				</div>
+			</div>
+
+			<div className="flex-1 overflow-y-auto p-4">
+				{announcements.length === 0 ? (
+					<AnnouncementsEmptyState />
+				) : (
+					<div className="flex flex-col gap-4">
+						{announcements.map((announcement) => (
+							<AnnouncementCard key={announcement.id} announcement={announcement} />
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+
+	return (
+		<SidebarSlideOutPanel open={open} onOpenChange={onOpenChange} ariaLabel="Announcements">
+			{body}
+		</SidebarSlideOutPanel>
+	);
+}
+

surfsense_web/components/layout/ui/sidebar/index.ts

@@ -1,5 +1,6 @@
 export { AllPrivateChatsSidebar } from "./AllPrivateChatsSidebar";
 export { AllSharedChatsSidebar } from "./AllSharedChatsSidebar";
+export { AnnouncementsSidebar } from "./AnnouncementsSidebar";
 export { ChatListItem } from "./ChatListItem";
 export { DocumentsSidebar } from "./DocumentsSidebar";
 export { InboxSidebar } from "./InboxSidebar";