feat: implement notification filtering and enhance notification UI

- Added notification type filtering functionality to the NotificationButton and NotificationPopup components.
- Integrated localStorage to persist the selected notification filter across sessions.
- Updated useNotifications hook to support fetching notifications based on the selected filter.
- Enhanced NotificationPopup to display filter pills for better user interaction and notification management.

surfsense_web/components/notifications/NotificationButton.tsx

@@ -3,27 +3,61 @@
 import { useAtomValue } from "jotai";
 import { Bell } from "lucide-react";
 import { useParams } from "next/navigation";
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { useNotifications } from "@/hooks/use-notifications";
+import { useNotifications, type NotificationTypeEnum } from "@/hooks/use-notifications";
 import { cn } from "@/lib/utils";
 import { NotificationPopup } from "./NotificationPopup";
 
+const NOTIFICATION_FILTER_STORAGE_KEY = "surfsense_notification_filter";
+
 export function NotificationButton() {
 	const [open, setOpen] = useState(false);
 	const { data: user } = useAtomValue(currentUserAtom);
 	const params = useParams();
 
+	// Filter state - null means show all, otherwise filter by type
+	const [activeFilter, setActiveFilter] = useState<NotificationTypeEnum | null>(null);
+
+	// Load filter from localStorage on mount
+	useEffect(() => {
+		try {
+			const stored = localStorage.getItem(NOTIFICATION_FILTER_STORAGE_KEY);
+			if (stored) {
+				const parsed = JSON.parse(stored);
+				if (parsed === null || ["new_mention", "connector_indexing", "document_processing"].includes(parsed)) {
+					setActiveFilter(parsed);
+				}
+			}
+		} catch {
+			// Ignore localStorage errors
+		}
+	}, []);
+
+	// Handle filter toggle - clicking same pill again shows all
+	const handleFilterChange = useCallback((filter: NotificationTypeEnum | null) => {
+		setActiveFilter((current) => {
+			const newFilter = current === filter ? null : filter;
+			try {
+				localStorage.setItem(NOTIFICATION_FILTER_STORAGE_KEY, JSON.stringify(newFilter));
+			} catch {
+				// Ignore localStorage errors
+			}
+			return newFilter;
+		});
+	}, []);
+
 	const userId = user?.id ? String(user.id) : null;
 	// Get searchSpaceId from URL params - the component is rendered within /dashboard/[search_space_id]/
 	const searchSpaceId = params?.search_space_id ? Number(params.search_space_id) : null;
 
 	const { notifications, unreadCount, loading, markAsRead, markAllAsRead } = useNotifications(
 		userId,
-		searchSpaceId
+		searchSpaceId,
+		activeFilter
 	);
 
 	return (
@@ -57,6 +91,8 @@ export function NotificationButton() {
 					markAsRead={markAsRead}
 					markAllAsRead={markAllAsRead}
 					onClose={() => setOpen(false)}
+					activeFilter={activeFilter}
+					onFilterChange={handleFilterChange}
 				/>
 			</PopoverContent>
 		</Popover>