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>

surfsense_web/components/notifications/NotificationPopup.tsx

@@ -1,16 +1,25 @@
 "use client";
 
 import { formatDistanceToNow } from "date-fns";
-import { AlertCircle, Bell, CheckCheck, CheckCircle2, Loader2 } from "lucide-react";
+import { AlertCircle, AtSign, Bell, Cable, CheckCheck, CheckCircle2, FileText, Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { convertRenderedToDisplay } from "@/components/chat-comments/comment-item/comment-item";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Separator } from "@/components/ui/separator";
-import type { Notification } from "@/hooks/use-notifications";
+import type { Notification, NotificationTypeEnum } from "@/hooks/use-notifications";
 import { cn } from "@/lib/utils";
 
+/**
+ * Filter configuration for notification types
+ */
+const NOTIFICATION_FILTERS = {
+	new_mention: { label: "Mentions", icon: AtSign },
+	connector_indexing: { label: "Connectors", icon: Cable },
+	document_processing: { label: "Documents", icon: FileText },
+} as const;
+
 /**
  * Get initials from name or email for avatar fallback
  */
@@ -37,6 +46,8 @@ interface NotificationPopupProps {
 	markAsRead: (id: number) => Promise<boolean>;
 	markAllAsRead: () => Promise<boolean>;
 	onClose?: () => void;
+	activeFilter: NotificationTypeEnum | null;
+	onFilterChange: (filter: NotificationTypeEnum | null) => void;
 }
 
 export function NotificationPopup({
@@ -46,6 +57,8 @@ export function NotificationPopup({
 	markAsRead,
 	markAllAsRead,
 	onClose,
+	activeFilter,
+	onFilterChange,
 }: NotificationPopupProps) {
 	const router = useRouter();
 
@@ -125,7 +138,7 @@ export function NotificationPopup({
 	return (
 		<div className="flex flex-col w-80 max-w-[calc(100vw-2rem)]">
 			{/* Header */}
-			<div className="flex items-center justify-between px-4 py-3 border-b">
+			<div className="flex items-center justify-between px-4 py-3">
 				<div className="flex items-center gap-2">
 					<h3 className="font-semibold text-sm">Notifications</h3>
 				</div>
@@ -137,6 +150,32 @@ export function NotificationPopup({
 				)}
 			</div>
 
+			{/* Filter Pills */}
+			<div className="flex items-center gap-1.5 px-4 py-2 overflow-x-auto">
+				{(Object.entries(NOTIFICATION_FILTERS) as [NotificationTypeEnum, typeof NOTIFICATION_FILTERS[keyof typeof NOTIFICATION_FILTERS]][]).map(
+					([key, { label, icon: Icon }]) => {
+						const isActive = activeFilter === key;
+						return (
+							<button
+								key={key}
+								type="button"
+								onClick={() => onFilterChange(key)}
+								className={cn(
+									"inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-medium transition-colors whitespace-nowrap",
+									"border focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+									isActive
+										? "bg-primary text-primary-foreground border-primary"
+										: "bg-transparent text-muted-foreground border-border hover:bg-accent hover:text-accent-foreground"
+								)}
+							>
+								<Icon className="h-3 w-3" />
+								{label}
+							</button>
+						);
+					}
+				)}
+			</div>
+
 			{/* Notifications List */}
 			<ScrollArea className="h-[400px]">
 				{loading ? (
@@ -160,8 +199,8 @@ export function NotificationPopup({
 										!notification.read && "bg-accent/50"
 									)}
 								>
-									<div className="flex items-center gap-3 overflow-hidden">
-										<div className="flex-shrink-0">{getStatusIcon(notification)}</div>
+									<div className="flex items-start gap-3 overflow-hidden">
+										<div className="flex-shrink-0 mt-0.5">{getStatusIcon(notification)}</div>
 										<div className="flex-1 min-w-0 overflow-hidden">
 											<div className="flex items-start justify-between gap-2 mb-1">
 												<p