refactor: consolidate inbox data handling in LayoutDataProvider and related components, streamlining state management and improving performance by using a single data source for inbox items

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -121,34 +121,19 @@ export function LayoutDataProvider({
 	// Search space dialog state
 	const [isCreateSearchSpaceDialogOpen, setIsCreateSearchSpaceDialogOpen] = useState(false);
 
-	// Inbox hooks - separate data sources for mentions and status tabs
+	// Single inbox hook - API-first with Electric real-time deltas
-	// This ensures each tab has independent pagination and data loading
 	const userId = user?.id ? String(user.id) : null;
 
 	const {
-		inboxItems: mentionItems,
+		inboxItems,
-		unreadCount: mentionUnreadCount,
+		unreadCount: totalUnreadCount,
-		loading: mentionLoading,
+		loading: inboxLoading,
-		loadingMore: mentionLoadingMore,
+		loadingMore: inboxLoadingMore,
-		hasMore: mentionHasMore,
+		hasMore: inboxHasMore,
-		loadMore: mentionLoadMore,
+		loadMore: inboxLoadMore,
-		markAsRead: markMentionAsRead,
+		markAsRead,
-		markAllAsRead: markAllMentionsAsRead,
+		markAllAsRead,
-	} = useInbox(userId, Number(searchSpaceId) || null, "new_mention");
+	} = useInbox(userId, Number(searchSpaceId) || null);
-
-	const {
-		inboxItems: statusItems,
-		unreadCount: allUnreadCount,
-		loading: statusLoading,
-		loadingMore: statusLoadingMore,
-		hasMore: statusHasMore,
-		loadMore: statusLoadMore,
-		markAsRead: markStatusAsRead,
-		markAllAsRead: markAllStatusAsRead,
-	} = useInbox(userId, Number(searchSpaceId) || null, null);
-
-	const totalUnreadCount = allUnreadCount;
-	const statusOnlyUnreadCount = Math.max(0, allUnreadCount - mentionUnreadCount);
 
 	// Track seen notification IDs to detect new page_limit_exceeded notifications
 	const seenPageLimitNotifications = useRef<Set<number>>(new Set());
@@ -156,14 +141,12 @@ export function LayoutDataProvider({
 
 	// Effect to show toast for new page_limit_exceeded notifications
 	useEffect(() => {
-		if (statusLoading) return;
+		if (inboxLoading) return;
 
-		// Get page_limit_exceeded notifications
+		const pageLimitNotifications = inboxItems.filter(
-		const pageLimitNotifications = statusItems.filter(
 			(item) => item.type === "page_limit_exceeded"
 		);
 
-		// On initial load, just mark all as seen without showing toasts
 		if (isInitialLoad.current) {
 			for (const notification of pageLimitNotifications) {
 				seenPageLimitNotifications.current.add(notification.id);
@@ -172,16 +155,13 @@ export function LayoutDataProvider({
 			return;
 		}
 
-		// Find new notifications (not yet seen)
 		const newNotifications = pageLimitNotifications.filter(
 			(notification) => !seenPageLimitNotifications.current.has(notification.id)
 		);
 
-		// Show toast for each new page_limit_exceeded notification
 		for (const notification of newNotifications) {
 			seenPageLimitNotifications.current.add(notification.id);
 
-			// Extract metadata for navigation
 			const actionUrl = isPageLimitExceededMetadata(notification.metadata)
 				? notification.metadata.action_url
 				: `/dashboard/${searchSpaceId}/more-pages`;
@@ -196,24 +176,8 @@ export function LayoutDataProvider({
 				},
 			});
 		}
-	}, [statusItems, statusLoading, searchSpaceId, router]);
+	}, [inboxItems, inboxLoading, searchSpaceId, router]);
 
-	// Unified mark as read that delegates to the correct hook
-	const markAsRead = useCallback(
-		async (id: number) => {
-			// Try both - one will succeed based on which list has the item
-			const mentionResult = await markMentionAsRead(id);
-			if (mentionResult) return true;
-			return markStatusAsRead(id);
-		},
-		[markMentionAsRead, markStatusAsRead]
-	);
-
-	// Mark all as read for both types
-	const markAllAsRead = useCallback(async () => {
-		await Promise.all([markAllMentionsAsRead(), markAllStatusAsRead()]);
-		return true;
-	}, [markAllMentionsAsRead, markAllStatusAsRead]);
 
 	// Delete dialogs state
 	const [showDeleteChatDialog, setShowDeleteChatDialog] = useState(false);
@@ -643,24 +607,12 @@ export function LayoutDataProvider({
 				inbox={{
 					isOpen: isInboxSidebarOpen,
 					onOpenChange: setIsInboxSidebarOpen,
-					// Separate data sources for each tab
+					items: inboxItems,
-					mentions: {
-						items: mentionItems,
-						unreadCount: mentionUnreadCount,
-						loading: mentionLoading,
-						loadingMore: mentionLoadingMore,
-						hasMore: mentionHasMore,
-						loadMore: mentionLoadMore,
-					},
-					status: {
-						items: statusItems,
-						unreadCount: statusOnlyUnreadCount,
-						loading: statusLoading,
-						loadingMore: statusLoadingMore,
-						hasMore: statusHasMore,
-						loadMore: statusLoadMore,
-					},
 					totalUnreadCount,
+					loading: inboxLoading,
+					loadingMore: inboxLoadingMore,
+					hasMore: inboxHasMore,
+					loadMore: inboxLoadMore,
 					markAsRead,
 					markAllAsRead,
 					isDocked: isInboxDocked,

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

@@ -20,26 +20,16 @@ import {
 	Sidebar,
 } from "../sidebar";
 
-// Tab-specific data source props
+// Inbox-related props — single data source, tab split done in InboxSidebar
-interface TabDataSource {
+interface InboxProps {
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
 	items: InboxItem[];
-	unreadCount: number;
+	totalUnreadCount: number;
 	loading: boolean;
 	loadingMore?: boolean;
 	hasMore?: boolean;
 	loadMore?: () => void;
-}
-
-// Inbox-related props with separate data sources per tab
-interface InboxProps {
-	isOpen: boolean;
-	onOpenChange: (open: boolean) => void;
-	/** Mentions tab data source with independent pagination */
-	mentions: TabDataSource;
-	/** Status tab data source with independent pagination */
-	status: TabDataSource;
-	/** Combined unread count for nav badge */
-	totalUnreadCount: number;
 	markAsRead: (id: number) => Promise<boolean>;
 	markAllAsRead: () => Promise<boolean>;
 	/** Whether the inbox is docked (permanent) */
@@ -306,9 +296,12 @@ export function LayoutShell({
 							<InboxSidebar
 								open={inbox.isOpen}
 								onOpenChange={inbox.onOpenChange}
-								mentions={inbox.mentions}
+								items={inbox.items}
-								status={inbox.status}
 								totalUnreadCount={inbox.totalUnreadCount}
+								loading={inbox.loading}
+								loadingMore={inbox.loadingMore}
+								hasMore={inbox.hasMore}
+								loadMore={inbox.loadMore}
 								markAsRead={inbox.markAsRead}
 								markAllAsRead={inbox.markAllAsRead}
 								isDocked={inbox.isDocked}
@@ -329,9 +322,12 @@ export function LayoutShell({
 							<InboxSidebar
 								open={inbox.isOpen}
 								onOpenChange={inbox.onOpenChange}
-								mentions={inbox.mentions}
+								items={inbox.items}
-								status={inbox.status}
 								totalUnreadCount={inbox.totalUnreadCount}
+								loading={inbox.loading}
+								loadingMore={inbox.loadingMore}
+								hasMore={inbox.hasMore}
+								loadMore={inbox.loadMore}
 								markAsRead={inbox.markAsRead}
 								markAllAsRead={inbox.markAllAsRead}
 								isDocked={false}

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

@@ -62,9 +62,6 @@ import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { cn } from "@/lib/utils";
 import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
 
-/**
- * Get initials from name or email for avatar fallback
- */
 function getInitials(name: string | null | undefined, email: string | null | undefined): string {
 	if (name) {
 		return name
@@ -81,9 +78,6 @@ function getInitials(name: string | null | undefined, email: string | null | und
 	return "U";
 }
 
-/**
- * Format count for display: shows numbers up to 999, then "1k+", "2k+", etc.
- */
 function formatInboxCount(count: number): string {
 	if (count <= 999) {
 		return count.toString();
@@ -92,9 +86,6 @@ function formatInboxCount(count: number): string {
 	return `${thousands}k+`;
 }
 
-/**
- * Get display name for connector type
- */
 function getConnectorTypeDisplayName(connectorType: string): string {
 	const displayNames: Record<string, string> = {
 		GITHUB_CONNECTOR: "GitHub",
@@ -139,40 +130,34 @@ function getConnectorTypeDisplayName(connectorType: string): string {
 type InboxTab = "comments" | "status";
 type InboxFilter = "all" | "unread" | "errors";
 
-// Tab-specific data source with independent pagination
+const COMMENT_TYPES = new Set(["new_mention", "comment_reply"]);
-interface TabDataSource {
+const STATUS_TYPES = new Set(["connector_indexing", "document_processing", "page_limit_exceeded", "connector_deletion"]);
-	items: InboxItem[];
-	unreadCount: number;
-	loading: boolean;
-	loadingMore?: boolean;
-	hasMore?: boolean;
-	loadMore?: () => void;
-}
 
 interface InboxSidebarProps {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
-	/** Mentions tab data source with independent pagination */
+	items: InboxItem[];
-	mentions: TabDataSource;
-	/** Status tab data source with independent pagination */
-	status: TabDataSource;
-	/** Combined unread count for mark all as read */
 	totalUnreadCount: number;
+	loading: boolean;
+	loadingMore?: boolean;
+	hasMore?: boolean;
+	loadMore?: () => void;
 	markAsRead: (id: number) => Promise<boolean>;
 	markAllAsRead: () => Promise<boolean>;
 	onCloseMobileSidebar?: () => void;
-	/** Whether the inbox is docked (permanent) or floating */
 	isDocked?: boolean;
-	/** Callback to toggle docked state */
 	onDockedChange?: (docked: boolean) => void;
 }
 
 export function InboxSidebar({
 	open,
 	onOpenChange,
-	mentions,
+	items,
-	status,
 	totalUnreadCount,
+	loading,
+	loadingMore: loadingMoreProp = false,
+	hasMore: hasMoreProp = false,
+	loadMore,
 	markAsRead,
 	markAllAsRead,
 	onCloseMobileSidebar,
@@ -185,9 +170,7 @@ export function InboxSidebar({
 	const isMobile = !useMediaQuery("(min-width: 640px)");
 	const searchSpaceId = params?.search_space_id ? Number(params.search_space_id) : null;
 
-	// Comments collapsed state (desktop only, when docked)
 	const [, setCommentsCollapsed] = useAtom(setCommentsCollapsedAtom);
-	// Target comment for navigation - also ensures comments panel is visible
 	const [, setTargetCommentId] = useAtom(setTargetCommentIdAtom);
 
 	const [searchQuery, setSearchQuery] = useState("");
@@ -197,9 +180,7 @@ export function InboxSidebar({
 	const [activeFilter, setActiveFilter] = useState<InboxFilter>("all");
 	const [selectedSource, setSelectedSource] = useState<string | null>(null);
 	const [mounted, setMounted] = useState(false);
-	// Dropdown state for filter menu (desktop only)
 	const [openDropdown, setOpenDropdown] = useState<"filter" | null>(null);
-	// Scroll shadow state for connector list
 	const [connectorScrollPos, setConnectorScrollPos] = useState<"top" | "middle" | "bottom">("top");
 	const handleConnectorScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
 		const el = e.currentTarget;
@@ -207,15 +188,12 @@ export function InboxSidebar({
 		const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
 		setConnectorScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
 	}, []);
-	// Drawer state for filter menu (mobile only)
 	const [filterDrawerOpen, setFilterDrawerOpen] = useState(false);
 	const [markingAsReadId, setMarkingAsReadId] = useState<number | null>(null);
 
-	// Prefetch trigger ref - placed on item near the end
 	const prefetchTriggerRef = useRef<HTMLDivElement>(null);
 
-	// Server-side search query (enabled only when user is typing a search)
+	// Server-side search query
-	// Determines which notification types to search based on active tab
 	const searchTypeFilter = activeTab === "comments" ? ("new_mention" as const) : undefined;
 	const { data: searchResponse, isLoading: isSearchLoading } = useQuery({
 		queryKey: cacheKeys.notifications.search(searchSpaceId, debouncedSearch.trim(), activeTab),
@@ -228,7 +206,7 @@ export function InboxSidebar({
 					limit: 50,
 				},
 			}),
-		staleTime: 30 * 1000, // 30 seconds (search results don't need to be super fresh)
+		staleTime: 30 * 1000,
 		enabled: isSearchMode && open,
 	});
 
@@ -246,53 +224,43 @@ export function InboxSidebar({
 		return () => document.removeEventListener("keydown", handleEscape);
 	}, [open, onOpenChange]);
 
-	// Only lock body scroll on mobile when inbox is open
 	useEffect(() => {
 		if (!open || !isMobile) return;
-
-		// Store original overflow to restore on cleanup
 		const originalOverflow = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
-
 		return () => {
 			document.body.style.overflow = originalOverflow;
 		};
 	}, [open, isMobile]);
 
-	// Reset source filter when switching away from status tab
 	useEffect(() => {
 		if (activeTab !== "status") {
 			setSelectedSource(null);
 		}
 	}, [activeTab]);
 
-	// Each tab uses its own data source for independent pagination
+	// Split items by tab type (client-side from single data source)
-	// Comments tab: uses mentions data source (fetches only mention/reply types from server)
+	const commentsItems = useMemo(
-	const commentsItems = mentions.items;
+		() => items.filter((item) => COMMENT_TYPES.has(item.type)),
-
+		[items]
-	// Status tab: filters status data source (fetches all types) to status-specific types
-	const statusItems = useMemo(
-		() =>
-			status.items.filter(
-				(item) =>
-					item.type === "connector_indexing" ||
-					item.type === "document_processing" ||
-					item.type === "page_limit_exceeded" ||
-					item.type === "connector_deletion"
-			),
-		[status.items]
 	);
 
-	// Pagination switches based on active tab
+	const statusItems = useMemo(
-	const loading = activeTab === "comments" ? mentions.loading : status.loading;
+		() => items.filter((item) => STATUS_TYPES.has(item.type)),
-	const loadingMore =
+		[items]
-		activeTab === "comments" ? (mentions.loadingMore ?? false) : (status.loadingMore ?? false);
+	);
-	const hasMore =
-		activeTab === "comments" ? (mentions.hasMore ?? false) : (status.hasMore ?? false);
-	const loadMore = activeTab === "comments" ? mentions.loadMore : status.loadMore;
 
-	// Fetch ALL source types from the backend so the filter shows every connector/document
+	// Derive unread counts per tab from the items array
-	// type the user has notifications for, regardless of how many items are loaded via pagination.
+	const unreadCommentsCount = useMemo(
+		() => commentsItems.filter((item) => !item.read).length,
+		[commentsItems]
+	);
+	const unreadStatusCount = useMemo(
+		() => statusItems.filter((item) => !item.read).length,
+		[statusItems]
+	);
+
+	// Fetch source types for the status tab filter
 	const { data: sourceTypesData } = useQuery({
 		queryKey: cacheKeys.notifications.sourceTypes(searchSpaceId),
 		queryFn: () => notificationsApiService.getSourceTypes(searchSpaceId ?? undefined),
@@ -314,45 +282,7 @@ export function InboxSidebar({
 		}));
 	}, [sourceTypesData]);
 
-	// Get items for current tab
+	// Client-side filter: source type
-	const displayItems = activeTab === "comments" ? commentsItems : statusItems;
-
-	// When a non-default filter (unread/errors) is active on the status tab,
-	// fetch matching items from the API so older items beyond the Electric
-	// sync window are included.
-	const isActiveFilterMode = activeTab === "status" && (activeFilter === "unread" || activeFilter === "errors");
-	const { data: activeFilterResponse, isLoading: isActiveFilterLoading } = useQuery({
-		queryKey: cacheKeys.notifications.byFilter(searchSpaceId, activeFilter),
-		queryFn: () =>
-			notificationsApiService.getNotifications({
-				queryParams: {
-					search_space_id: searchSpaceId ?? undefined,
-					filter: activeFilter as "unread" | "errors",
-					limit: 100,
-				},
-			}),
-		staleTime: 30 * 1000,
-		enabled: isActiveFilterMode && open && !isSearchMode,
-	});
-
-	// When a source filter is active, fetch matching items from the API so
-	// older items (outside the Electric sync window) are included.
-	const isSourceFilterMode = activeTab === "status" && !!selectedSource;
-	const { data: sourceFilterResponse, isLoading: isSourceFilterLoading } = useQuery({
-		queryKey: cacheKeys.notifications.bySourceType(searchSpaceId, selectedSource ?? ""),
-		queryFn: () =>
-			notificationsApiService.getNotifications({
-				queryParams: {
-					search_space_id: searchSpaceId ?? undefined,
-					source_type: selectedSource ?? undefined,
-					limit: 50,
-				},
-			}),
-		staleTime: 30 * 1000,
-		enabled: isSourceFilterMode && open && !isSearchMode,
-	});
-
-	// Client-side matcher: checks if an item matches the active source filter
 	const matchesSourceFilter = useCallback(
 		(item: InboxItem): boolean => {
 			if (!selectedSource) return true;
@@ -377,7 +307,7 @@ export function InboxSidebar({
 		[selectedSource]
 	);
 
-	// Client-side matcher: checks if an item matches the active filter (unread/errors)
+	// Client-side filter: unread / errors
 	const matchesActiveFilter = useCallback(
 		(item: InboxItem): boolean => {
 			if (activeFilter === "unread") return !item.read;
@@ -391,93 +321,56 @@ export function InboxSidebar({
 		[activeFilter]
 	);
 
-	// Filter items based on filter type, connector filter, and search mode
+	// Two data paths: search mode (API) or default (client-side filtered)
-	// Four data paths:
-	//   1. Search mode → server-side search results (client-side filter applied after)
-	//   2. Active filter mode (unread/errors) → API results merged with real-time Electric items
-	//   3. Source filter mode → API results merged with real-time Electric items
-	//   4. Default → Electric real-time items (fast, local)
 	const filteredItems = useMemo(() => {
-		let items: InboxItem[];
+		let tabItems: InboxItem[];
 
 		if (isSearchMode) {
-			items = searchResponse?.items ?? [];
+			tabItems = searchResponse?.items ?? [];
 			if (activeTab === "status") {
-				items = items.filter(
+				tabItems = tabItems.filter((item) => STATUS_TYPES.has(item.type));
-					(item) =>
+			} else {
-						item.type === "connector_indexing" ||
+				tabItems = tabItems.filter((item) => COMMENT_TYPES.has(item.type));
-						item.type === "document_processing" ||
-						item.type === "page_limit_exceeded" ||
-						item.type === "connector_deletion"
-				);
 			}
-			if (activeFilter === "unread") {
-				items = items.filter((item) => !item.read);
-			} else if (activeFilter === "errors") {
-				items = items.filter(matchesActiveFilter);
-			}
-		} else if (isActiveFilterMode) {
-			const apiItems = activeFilterResponse?.items ?? [];
-			const realtimeMatching = statusItems.filter(matchesActiveFilter);
-			const seen = new Set(apiItems.map((i) => i.id));
-			const merged = [...apiItems];
-			for (const item of realtimeMatching) {
-				if (!seen.has(item.id)) {
-					merged.push(item);
-				}
-			}
-			items = merged.sort(
-				(a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-			);
-		} else if (isSourceFilterMode) {
-			const apiItems = sourceFilterResponse?.items ?? [];
-			const realtimeMatching = statusItems.filter(matchesSourceFilter);
-			const seen = new Set(apiItems.map((i) => i.id));
-			const merged = [...apiItems];
-			for (const item of realtimeMatching) {
-				if (!seen.has(item.id)) {
-					merged.push(item);
-				}
-			}
-			items = merged.sort(
-				(a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-			);
 		} else {
-			items = displayItems;
+			tabItems = activeTab === "comments" ? commentsItems : statusItems;
 		}
 
-		return items;
+		// Apply filters
+		let result = tabItems;
+		if (activeFilter !== "all") {
+			result = result.filter(matchesActiveFilter);
+		}
+		if (activeTab === "status" && selectedSource) {
+			result = result.filter(matchesSourceFilter);
+		}
+
+		return result;
 	}, [
-		displayItems,
-		statusItems,
-		searchResponse,
-		sourceFilterResponse,
-		activeFilterResponse,
 		isSearchMode,
-		isActiveFilterMode,
+		searchResponse,
-		isSourceFilterMode,
-		matchesSourceFilter,
-		matchesActiveFilter,
-		activeFilter,
 		activeTab,
+		commentsItems,
+		statusItems,
+		activeFilter,
+		selectedSource,
+		matchesActiveFilter,
+		matchesSourceFilter,
 	]);
 
-	// Intersection Observer for infinite scroll with prefetching
+	// Infinite scroll
-	// Re-runs when active tab changes so each tab gets its own pagination
-	// Disabled during server-side search (search results are not paginated via infinite scroll)
 	useEffect(() => {
-		if (!loadMore || !hasMore || loadingMore || !open || isSearchMode) return;
+		if (!loadMore || !hasMoreProp || loadingMoreProp || !open || isSearchMode) return;
 
 		const observer = new IntersectionObserver(
 			(entries) => {
-				// When trigger element is visible, load more
 				if (entries[0]?.isIntersecting) {
 					loadMore();
 				}
 			},
 			{
-				root: null, // viewport
+				root: null,
-				rootMargin: "100px", // Start loading 100px before visible
+				rootMargin: "100px",
 				threshold: 0,
 			}
 		);
@@ -487,11 +380,7 @@ export function InboxSidebar({
 		}
 
 		return () => observer.disconnect();
-	}, [loadMore, hasMore, loadingMore, open, isSearchMode, activeTab]);
+	}, [loadMore, hasMoreProp, loadingMoreProp, open, isSearchMode]);
-
-	// Unread counts from server-side accurate totals (passed via props)
-	const unreadCommentsCount = mentions.unreadCount;
-	const unreadStatusCount = status.unreadCount;
 
 	const handleItemClick = useCallback(
 		async (item: InboxItem) => {
@@ -538,7 +427,6 @@ export function InboxSidebar({
 					}
 				}
 			} else if (item.type === "page_limit_exceeded") {
-				// Navigate to the upgrade/more-pages page
 				if (isPageLimitExceededMetadata(item.metadata)) {
 					const actionUrl = item.metadata.action_url;
 					if (actionUrl) {
@@ -580,7 +468,6 @@ export function InboxSidebar({
 	};
 
 	const getStatusIcon = (item: InboxItem) => {
-		// For mentions and comment replies, show the author's avatar
 		if (item.type === "new_mention" || item.type === "comment_reply") {
 			const metadata =
 				item.type === "new_mention"
@@ -612,7 +499,6 @@ export function InboxSidebar({
 			);
 		}
 
-		// For page limit exceeded, show a warning icon with amber/orange color
 		if (item.type === "page_limit_exceeded") {
 			return (
 				<div className="h-8 w-8 flex items-center justify-center rounded-full bg-amber-500/10">
@@ -621,8 +507,6 @@ export function InboxSidebar({
 			);
 		}
 
-		// For status items (connector/document), show status icons
-		// Safely access status from metadata
 		const metadata = item.metadata as Record<string, unknown>;
 		const status = typeof metadata?.status === "string" ? metadata.status : undefined;
 
@@ -669,13 +553,13 @@ export function InboxSidebar({
 
 	if (!mounted) return null;
 
-	// Shared content component for both docked and floating modes
+	const isLoading = isSearchMode ? isSearchLoading : loading;
+
 	const inboxContent = (
 		<>
 			<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">
-						{/* Back button - mobile only */}
 						{isMobile && (
 							<Button
 								variant="ghost"
@@ -690,7 +574,6 @@ export function InboxSidebar({
 						<h2 className="text-lg font-semibold">{t("inbox") || "Inbox"}</h2>
 					</div>
 					<div className="flex items-center gap-1">
-						{/* Mobile: Button that opens bottom drawer */}
 						{isMobile ? (
 							<>
 								<Button
@@ -716,7 +599,6 @@ export function InboxSidebar({
 											</DrawerTitle>
 										</DrawerHeader>
 										<div className="flex-1 overflow-y-auto p-4 space-y-4">
-											{/* Filter section */}
 											<div className="space-y-2">
 												<p className="text-xs text-muted-foreground/80 font-medium px-1">
 													{t("filter") || "Filter"}
@@ -783,7 +665,6 @@ export function InboxSidebar({
 													)}
 												</div>
 											</div>
-										{/* Sources section - only for status tab */}
 										{activeTab === "status" && statusSourceOptions.length > 0 && (
 											<div className="space-y-2">
 												<p className="text-xs text-muted-foreground/80 font-medium px-1">
@@ -841,7 +722,6 @@ export function InboxSidebar({
 								</Drawer>
 							</>
 						) : (
-							/* Desktop: Dropdown menu */
 							<DropdownMenu
 								open={openDropdown === "filter"}
 								onOpenChange={(isOpen) => setOpenDropdown(isOpen ? "filter" : null)}
@@ -968,7 +848,6 @@ export function InboxSidebar({
 								</TooltipContent>
 							</Tooltip>
 						)}
-						{/* Dock/Undock button - desktop only */}
 						{!isMobile && onDockedChange && (
 							<Tooltip>
 								<TooltipTrigger asChild>
@@ -978,12 +857,10 @@ export function InboxSidebar({
 										className="h-8 w-8 rounded-full"
 										onClick={() => {
 											if (isDocked) {
-												// Collapse: show comments immediately, then close inbox
 												setCommentsCollapsed(false);
 												onDockedChange(false);
 												onOpenChange(false);
 											} else {
-												// Expand: hide comments immediately
 												setCommentsCollapsed(true);
 												onDockedChange(true);
 											}
@@ -1068,11 +945,10 @@ export function InboxSidebar({
 			</Tabs>
 
 			<div className="flex-1 overflow-y-auto overflow-x-hidden p-2">
-				{(isSearchMode ? isSearchLoading : isActiveFilterMode ? isActiveFilterLoading : isSourceFilterMode ? isSourceFilterLoading : loading) ? (
+				{isLoading ? (
 					<div className="space-y-2">
 						{activeTab === "comments"
-							? /* Comments skeleton: avatar + two-line text + time */
+							? [85, 60, 90, 70, 50, 75].map((titleWidth, i) => (
-								[85, 60, 90, 70, 50, 75].map((titleWidth, i) => (
 									<div
 										key={`skeleton-comment-${i}`}
 										className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]"
@@ -1085,8 +961,7 @@ export function InboxSidebar({
 										<Skeleton className="h-3 w-6 shrink-0 rounded" />
 									</div>
 								))
-							: /* Status skeleton: status icon circle + two-line text + time */
+							: [75, 90, 55, 80, 65, 85].map((titleWidth, i) => (
-								[75, 90, 55, 80, 65, 85].map((titleWidth, i) => (
 									<div
 										key={`skeleton-status-${i}`}
 										className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]"
@@ -1107,9 +982,8 @@ export function InboxSidebar({
 					<div className="space-y-2">
 						{filteredItems.map((item, index) => {
 							const isMarkingAsRead = markingAsReadId === item.id;
-							// Place prefetch trigger on 5th item from end (only when not searching)
 							const isPrefetchTrigger =
-								!isSearchMode && hasMore && index === filteredItems.length - 5;
+								!isSearchMode && hasMoreProp && index === filteredItems.length - 5;
 
 							return (
 								<div
@@ -1178,7 +1052,6 @@ export function InboxSidebar({
 										</Tooltip>
 									)}
 
-									{/* Time and unread dot - fixed width to prevent content shift */}
 									<div className="flex items-center justify-end gap-1.5 shrink-0 w-10">
 										<span className="text-[10px] text-muted-foreground">
 											{formatTime(item.created_at)}
@@ -1188,12 +1061,10 @@ export function InboxSidebar({
 								</div>
 							);
 						})}
-						{/* Fallback trigger at the very end if less than 5 items and not searching */}
+						{!isSearchMode && filteredItems.length < 5 && hasMoreProp && (
-						{!isSearchMode && filteredItems.length < 5 && hasMore && (
 							<div ref={prefetchTriggerRef} className="h-1" />
 						)}
-						{/* Loading more skeletons at the bottom during infinite scroll */}
+						{loadingMoreProp &&
-						{loadingMore &&
 							(activeTab === "comments"
 								? [80, 60, 90].map((titleWidth, i) => (
 										<div
@@ -1250,7 +1121,6 @@ export function InboxSidebar({
 		</>
 	);
 
-	// DOCKED MODE: Render as a static flex child (no animation, no click-away)
 	if (isDocked && open && !isMobile) {
 		return (
 			<aside
@@ -1262,7 +1132,6 @@ export function InboxSidebar({
 		);
 	}
 
-	// FLOATING MODE: Render with animation and click-away layer
 	return (
 		<SidebarSlideOutPanel open={open} onOpenChange={onOpenChange} ariaLabel={t("inbox") || "Inbox"}>
 			{inboxContent}

surfsense_web/hooks/use-inbox.ts

@@ -1,497 +1,367 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import type { InboxItem, InboxItemTypeEnum } from "@/contracts/types/inbox.types";
+import type { InboxItem } from "@/contracts/types/inbox.types";
 import { notificationsApiService } from "@/lib/apis/notifications-api.service";
 import type { SyncHandle } from "@/lib/electric/client";
 import { useElectricClient } from "@/lib/electric/context";
 
 export type { InboxItem, InboxItemTypeEnum } from "@/contracts/types/inbox.types";
 
-const PAGE_SIZE = 50;
+const INITIAL_PAGE_SIZE = 50;
-const SYNC_WINDOW_DAYS = 14;
+const SCROLL_PAGE_SIZE = 30;
+const SYNC_WINDOW_DAYS = 4;
 
 /**
- * Check if an item is older than the sync window
+ * Calculate the cutoff date for sync window.
- */
+ * Rounds to the start of the day (midnight UTC) to ensure stable values
-function isOlderThanSyncWindow(createdAt: string): boolean {
+ * across re-renders.
-	const cutoffDate = new Date();
-	cutoffDate.setDate(cutoffDate.getDate() - SYNC_WINDOW_DAYS);
-	return new Date(createdAt) < cutoffDate;
-}
-
-/**
- * Deduplicate by ID and sort by created_at descending.
- * This is the SINGLE source of truth for deduplication - prevents race conditions.
- */
-function deduplicateAndSort(items: InboxItem[]): InboxItem[] {
-	const seen = new Map<number, InboxItem>();
-	for (const item of items) {
-		if (!seen.has(item.id)) {
-			seen.set(item.id, item);
-		}
-	}
-	return Array.from(seen.values()).sort(
-		(a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
-	);
-}
-
-/**
- * Calculate the cutoff date for sync window
- * IMPORTANT: Rounds to the start of the day (midnight UTC) to ensure stable values
- * across re-renders. Without this, millisecond differences cause multiple syncs!
  */
 function getSyncCutoffDate(): string {
 	const cutoff = new Date();
 	cutoff.setDate(cutoff.getDate() - SYNC_WINDOW_DAYS);
-	// Round to start of day to prevent millisecond differences causing duplicate syncs
 	cutoff.setUTCHours(0, 0, 0, 0);
 	return cutoff.toISOString();
 }
 
 /**
- * Convert a date value to ISO string format
+ * Hook for managing inbox items with API-first architecture + Electric real-time deltas.
- */
-function toISOString(date: string | Date | null | undefined): string | null {
-	if (!date) return null;
-	if (date instanceof Date) return date.toISOString();
-	if (typeof date === "string") {
-		if (date.includes("T")) return date;
-		try {
-			return new Date(date).toISOString();
-		} catch {
-			return date;
-		}
-	}
-	return null;
-}
-
-/**
- * Hook for managing inbox items with Electric SQL real-time sync + API fallback
  *
- * Architecture (Simplified & Race-Condition Free):
+ * Architecture (Documents pattern):
- * - Electric SQL: Syncs recent items (within SYNC_WINDOW_DAYS) for real-time updates
+ * 1. API is the PRIMARY data source — fetches first page on mount
- * - Live Query: Provides reactive first page from PGLite
+ * 2. Electric provides REAL-TIME updates (new items, status changes, read state)
- * - API: Handles all pagination (more reliable than mixing with Electric)
+ * 3. Baseline pattern prevents duplicates between API and Electric
+ * 4. Single instance serves both Comments and Status tabs
  *
- * Key Design Decisions:
+ * Unread count strategy:
- * 1. No mutable refs for cursor - cursor computed from current state
+ * - API provides the total on mount (ground truth across all time)
- * 2. Single deduplicateAndSort function - prevents inconsistencies
+ * - Electric live query counts unread within SYNC_WINDOW_DAYS
- * 3. Filter-based preservation in live query - prevents data loss
+ * - olderUnreadOffsetRef bridges the gap: total = offset + recent
- * 4. Auto-fetch from API when Electric returns 0 items
+ * - Optimistic updates adjust both the count and the offset (for old items)
  *
  * @param userId - The user ID to fetch inbox items for
  * @param searchSpaceId - The search space ID to filter inbox items
- * @param typeFilter - Optional inbox item type to filter by
  */
 export function useInbox(
 	userId: string | null,
 	searchSpaceId: number | null,
-	typeFilter: InboxItemTypeEnum | null = null
 ) {
 	const electricClient = useElectricClient();
 
 	const [inboxItems, setInboxItems] = useState<InboxItem[]>([]);
 	const [loading, setLoading] = useState(true);
 	const [loadingMore, setLoadingMore] = useState(false);
-	const [hasMore, setHasMore] = useState(true);
+	const [hasMore, setHasMore] = useState(false);
 	const [error, setError] = useState<Error | null>(null);
+	const [unreadCount, setUnreadCount] = useState(0);
 
-	// Split unread count tracking for accurate counts with 14-day sync window
+	const initialLoadDoneRef = useRef(false);
-	// olderUnreadCount = unread items OLDER than sync window (from server, static until reconciliation)
+	const electricBaselineIdsRef = useRef<Set<number> | null>(null);
-	// recentUnreadCount = unread items within sync window (from live query, real-time)
-	const [olderUnreadCount, setOlderUnreadCount] = useState(0);
-	const [recentUnreadCount, setRecentUnreadCount] = useState(0);
-
 	const syncHandleRef = useRef<SyncHandle | null>(null);
-	const liveQueryRef = useRef<{ unsubscribe: () => void } | null>(null);
+	const liveQueryRef = useRef<{ unsubscribe?: () => void } | null>(null);
-	const userSyncKeyRef = useRef<string | null>(null);
+	const unreadLiveQueryRef = useRef<{ unsubscribe?: () => void } | null>(null);
-	const unreadCountLiveQueryRef = useRef<{ unsubscribe: () => void } | null>(null);
 
-	// Total unread = older (static from server) + recent (live from Electric)
+	// Unread count offset: number of unread items OLDER than the sync window.
-	const totalUnreadCount = olderUnreadCount + recentUnreadCount;
+	// Computed once from (API total - first Electric recent count), then adjusted
+	// when the user marks old items as read.
+	const olderUnreadOffsetRef = useRef<number | null>(null);
+	const apiUnreadTotalRef = useRef(0);
 
-	// EFFECT 1: Electric SQL sync for real-time updates
+	// EFFECT 1: Fetch first page + unread count from API when params change
 	useEffect(() => {
-		if (!userId || !electricClient) {
+		if (!userId || !searchSpaceId) return;
-			setLoading(!electricClient);
-			return;
-		}
 
+		let cancelled = false;
+
+		setLoading(true);
+		setInboxItems([]);
+		setHasMore(false);
+		initialLoadDoneRef.current = false;
+		electricBaselineIdsRef.current = null;
+		olderUnreadOffsetRef.current = null;
+		apiUnreadTotalRef.current = 0;
+
+		const fetchInitialData = async () => {
+			try {
+				const [notificationsResponse, unreadResponse] = await Promise.all([
+					notificationsApiService.getNotifications({
+						queryParams: {
+							search_space_id: searchSpaceId,
+							limit: INITIAL_PAGE_SIZE,
+						},
+					}),
+					notificationsApiService.getUnreadCount(searchSpaceId),
+				]);
+
+				if (cancelled) return;
+
+				setInboxItems(notificationsResponse.items);
+				setHasMore(notificationsResponse.has_more);
+				setUnreadCount(unreadResponse.total_unread);
+				apiUnreadTotalRef.current = unreadResponse.total_unread;
+				setError(null);
+				initialLoadDoneRef.current = true;
+			} catch (err) {
+				if (cancelled) return;
+				console.error("[useInbox] Initial load failed:", err);
+				setError(err instanceof Error ? err : new Error("Failed to load notifications"));
+			} finally {
+				if (!cancelled) setLoading(false);
+			}
+		};
+
+		fetchInitialData();
+		return () => { cancelled = true; };
+	}, [userId, searchSpaceId]);
+
+	// EFFECT 2: Electric sync + live query for real-time updates
+	useEffect(() => {
+		if (!userId || !searchSpaceId || !electricClient) return;
+
+		const uid = userId;
+		const spaceId = searchSpaceId;
 		const client = electricClient;
 		let mounted = true;
 
-		async function startSync() {
+		async function setupElectricRealtime() {
+			if (syncHandleRef.current) {
+				try { syncHandleRef.current.unsubscribe(); } catch { /* PGlite may be closed */ }
+				syncHandleRef.current = null;
+			}
+			if (liveQueryRef.current) {
+				try { liveQueryRef.current.unsubscribe?.(); } catch { /* PGlite may be closed */ }
+				liveQueryRef.current = null;
+			}
+			if (unreadLiveQueryRef.current) {
+				try { unreadLiveQueryRef.current.unsubscribe?.(); } catch { /* PGlite may be closed */ }
+				unreadLiveQueryRef.current = null;
+			}
+
 			try {
 				const cutoffDate = getSyncCutoffDate();
-				const userSyncKey = `inbox_${userId}_${cutoffDate}`;
-
-				// Skip if already syncing with this key
-				if (userSyncKeyRef.current === userSyncKey) return;
-
-				// Clean up previous sync
-				if (syncHandleRef.current) {
-					try {
-						syncHandleRef.current.unsubscribe();
-					} catch {
-						// PGlite may already be closed during cleanup
-					}
-					syncHandleRef.current = null;
-				}
-
-				console.log("[useInbox] Starting sync for:", userId);
-				userSyncKeyRef.current = userSyncKey;
 
 				const handle = await client.syncShape({
 					table: "notifications",
-					where: `user_id = '${userId}' AND created_at > '${cutoffDate}'`,
+					where: `user_id = '${uid}' AND created_at > '${cutoffDate}'`,
 					primaryKey: ["id"],
 				});
 
-				// Wait for initial sync with timeout
-				if (!handle.isUpToDate && handle.initialSyncPromise) {
-					await Promise.race([
-						handle.initialSyncPromise,
-						new Promise((resolve) => setTimeout(resolve, 3000)),
-					]);
-				}
-
 				if (!mounted) {
 					handle.unsubscribe();
 					return;
 				}
 
 				syncHandleRef.current = handle;
-				setLoading(false);
+
-				setError(null);
+				if (!handle.isUpToDate && handle.initialSyncPromise) {
-			} catch (err) {
+					await Promise.race([
+						handle.initialSyncPromise,
+						new Promise((resolve) => setTimeout(resolve, 5000)),
+					]);
+				}
+
 				if (!mounted) return;
-				console.error("[useInbox] Sync failed:", err);
-				setError(err instanceof Error ? err : new Error("Sync failed"));
-				setLoading(false);
-			}
-		}
 
-		startSync();
+				const db = client.db as {
+					live?: {
+						query: <T>(
+							sql: string,
+							params?: (number | string)[]
+						) => Promise<{
+							subscribe: (cb: (result: { rows: T[] }) => void) => void;
+							unsubscribe?: () => void;
+						}>;
+					};
+				};
 
-		return () => {
+				if (!db.live?.query) return;
-			mounted = false;
-			userSyncKeyRef.current = null;
-			if (syncHandleRef.current) {
-				try {
-					syncHandleRef.current.unsubscribe();
-				} catch {
-					// PGlite may already be closed during cleanup
-				}
-				syncHandleRef.current = null;
-			}
-		};
-	}, [userId, electricClient]);
 
-	// Reset when filters change
+				const itemsQuery = `SELECT * FROM notifications 
-	useEffect(() => {
-		setHasMore(true);
-		setInboxItems([]);
-		// Reset count states - will be refetched by the unread count effect
-		setOlderUnreadCount(0);
-		setRecentUnreadCount(0);
-	}, [userId, searchSpaceId, typeFilter]);
-
-	// EFFECT 2: Live query for real-time updates + auto-fetch from API if empty
-	useEffect(() => {
-		if (!userId || !electricClient) return;
-
-		const client = electricClient;
-		let mounted = true;
-
-		async function setupLiveQuery() {
-			// Clean up previous live query
-			if (liveQueryRef.current) {
-				try {
-					liveQueryRef.current.unsubscribe();
-				} catch {
-					// PGlite may already be closed during cleanup
-				}
-				liveQueryRef.current = null;
-			}
-
-			try {
-				const cutoff = getSyncCutoffDate();
-
-				const query = `SELECT * FROM notifications 
 					WHERE user_id = $1 
 					AND (search_space_id = $2 OR search_space_id IS NULL)
-					AND created_at > '${cutoff}'
+					AND created_at > '${cutoffDate}'
-					${typeFilter ? "AND type = $3" : ""}
+					ORDER BY created_at DESC`;
-					ORDER BY created_at DESC
-					LIMIT ${PAGE_SIZE}`;
 
-				const params = typeFilter ? [userId, searchSpaceId, typeFilter] : [userId, searchSpaceId];
+				const liveQuery = await db.live.query<InboxItem>(itemsQuery, [uid, spaceId]);
 
-				const db = client.db as any;
+				if (!mounted) {
+					liveQuery.unsubscribe?.();
+					return;
+				}
 
-				// Initial fetch from PGLite - no validation needed, schema is enforced by Electric SQL sync
+				liveQuery.subscribe((result: { rows: InboxItem[] }) => {
-				const result = await client.db.query<InboxItem>(query, params);
+					if (!mounted || !result.rows || !initialLoadDoneRef.current) return;
 
-				if (mounted && result.rows) {
+					const validItems = result.rows.filter((item) => item.id != null && item.title != null);
-					const items = deduplicateAndSort(result.rows);
+					const isFullySynced = syncHandleRef.current?.isUpToDate ?? false;
-					setInboxItems(items);
+					const cutoff = new Date(getSyncCutoffDate());
 
-					// AUTO-FETCH: If Electric returned 0 items, check API for older items
+					// Build a Map for O(1) lookups instead of .find() inside .map()
-					// This handles the edge case where user has no recent notifications
+					const liveItemMap = new Map(validItems.map((d) => [d.id, d]));
-					// but has older ones outside the sync window
+					const liveIds = new Set(liveItemMap.keys());
-					if (items.length === 0) {
+
-						console.log(
+					setInboxItems((prev) => {
-							"[useInbox] Electric returned 0 items, checking API for older notifications"
+						const prevIds = new Set(prev.map((d) => d.id));
-						);
+
-						try {
+						if (electricBaselineIdsRef.current === null) {
-							// Use the API service with proper Zod validation for API responses
+							electricBaselineIdsRef.current = new Set(liveIds);
-							const data = await notificationsApiService.getNotifications({
+						}
-								queryParams: {
+
-									search_space_id: searchSpaceId ?? undefined,
+						const baseline = electricBaselineIdsRef.current;
-									type: typeFilter ?? undefined,
+						const newItems = validItems
-									limit: PAGE_SIZE,
+							.filter((item) => {
-								},
+								if (prevIds.has(item.id)) return false;
+								if (baseline.has(item.id)) return false;
+								return true;
 							});
 
-							if (mounted) {
+						for (const item of newItems) {
-								if (data.items.length > 0) {
+							baseline.add(item.id);
-									setInboxItems(data.items);
-								}
-								setHasMore(data.has_more);
-							}
-						} catch (err) {
-							console.error("[useInbox] API fallback failed:", err);
 						}
-					}
-				}
 
-				// Set up live query for real-time updates
+						let updated = prev.map((item) => {
-				if (db.live?.query) {
+							const liveItem = liveItemMap.get(item.id);
-					const liveQuery = await db.live.query(query, params);
+							if (liveItem) return liveItem;
-
+							return item;
-					if (!mounted) {
-						liveQuery.unsubscribe?.();
-						return;
-					}
-
-					if (liveQuery.subscribe) {
-						// Live query data comes from PGlite - no validation needed
-						liveQuery.subscribe((result: { rows: InboxItem[] }) => {
-							if (mounted && result.rows) {
-								const liveItems = result.rows;
-
-								setInboxItems((prev) => {
-									const liveItemIds = new Set(liveItems.map((item) => item.id));
-
-									// FIXED: Keep ALL items not in live result (not just slice)
-									// This prevents data loss when new notifications push items
-									// out of the LIMIT window
-									const itemsToKeep = prev.filter((item) => !liveItemIds.has(item.id));
-
-									return deduplicateAndSort([...liveItems, ...itemsToKeep]);
-								});
-							}
 						});
-					}
 
-					if (liveQuery.unsubscribe) {
+						if (isFullySynced) {
-						liveQueryRef.current = liveQuery;
+							updated = updated.filter((item) => {
-					}
+								if (new Date(item.created_at) < cutoff) return true;
-				}
+								return liveIds.has(item.id);
-			} catch (err) {
+							});
-				console.error("[useInbox] Live query error:", err);
+						}
-			}
-		}
 
-		setupLiveQuery();
+						if (newItems.length > 0) {
+							return [...newItems, ...updated];
+						}
 
-		return () => {
+						return updated;
-			mounted = false;
+					});
-			if (liveQueryRef.current) {
+				});
-				try {
-					liveQueryRef.current.unsubscribe();
-				} catch {
-					// PGlite may already be closed during cleanup
-				}
-				liveQueryRef.current = null;
-			}
-		};
-	}, [userId, searchSpaceId, typeFilter, electricClient]);
 
-	// EFFECT 3: Dedicated unread count sync with split tracking
+				liveQueryRef.current = liveQuery;
-	// - Fetches server count on mount (accurate total)
-	// - Sets up live query for recent count (real-time updates)
-	// - Handles items older than sync window separately
-	useEffect(() => {
-		if (!userId || !electricClient) return;
 
-		const client = electricClient;
+				// Unread count live query — only covers the sync window.
-		let mounted = true;
+				// Combined with olderUnreadOffsetRef to produce the full count.
-
+				const countQuery = `SELECT COUNT(*) as count FROM notifications 
-		async function setupUnreadCountSync() {
-			// Cleanup previous live query
-			if (unreadCountLiveQueryRef.current) {
-				unreadCountLiveQueryRef.current.unsubscribe();
-				unreadCountLiveQueryRef.current = null;
-			}
-
-			try {
-				// STEP 1: Fetch server counts (total and recent) - guaranteed accurate
-				console.log(
-					"[useInbox] Fetching unread count from server",
-					typeFilter ? `for type: ${typeFilter}` : "for all types"
-				);
-				const serverCounts = await notificationsApiService.getUnreadCount(
-					searchSpaceId ?? undefined,
-					typeFilter ?? undefined
-				);
-
-				if (mounted) {
-					// Calculate older count = total - recent
-					const olderCount = serverCounts.total_unread - serverCounts.recent_unread;
-					setOlderUnreadCount(olderCount);
-					setRecentUnreadCount(serverCounts.recent_unread);
-					console.log(
-						`[useInbox] Server counts: total=${serverCounts.total_unread}, recent=${serverCounts.recent_unread}, older=${olderCount}`
-					);
-				}
-
-				// STEP 2: Set up PGLite live query for RECENT unread count only
-				// This provides real-time updates for notifications within sync window
-				const db = client.db as any;
-				const cutoff = getSyncCutoffDate();
-
-				// Count query - NO LIMIT, counts all unread in synced window
-				const countQuery = `
-					SELECT COUNT(*) as count FROM notifications 
 					WHERE user_id = $1 
 					AND (search_space_id = $2 OR search_space_id IS NULL)
-					AND created_at > '${cutoff}'
+					AND created_at > '${cutoffDate}'
-					AND read = false
+					AND read = false`;
-					${typeFilter ? "AND type = $3" : ""}
-				`;
-				const params = typeFilter ? [userId, searchSpaceId, typeFilter] : [userId, searchSpaceId];
 
-				if (db.live?.query) {
+				const countLiveQuery = await db.live.query<{ count: number | string }>(countQuery, [uid, spaceId]);
-					const liveQuery = await db.live.query(countQuery, params);
 
-					if (!mounted) {
+				if (!mounted) {
-						liveQuery.unsubscribe?.();
+					countLiveQuery.unsubscribe?.();
-						return;
+					return;
-					}
-
-					if (liveQuery.subscribe) {
-						liveQuery.subscribe((result: { rows: Array<{ count: number | string }> }) => {
-							if (mounted && result.rows?.[0]) {
-								const liveCount = Number(result.rows[0].count) || 0;
-								// Update recent count from live query
-								// This fires in real-time when Electric syncs new/updated notifications
-								setRecentUnreadCount(liveCount);
-							}
-						});
-					}
-
-					if (liveQuery.unsubscribe) {
-						unreadCountLiveQueryRef.current = liveQuery;
-					}
 				}
+
+				countLiveQuery.subscribe((result: { rows: Array<{ count: number | string }> }) => {
+					if (!mounted || !result.rows?.[0] || !initialLoadDoneRef.current) return;
+					const liveRecentUnread = Number(result.rows[0].count) || 0;
+
+					// First callback: compute how many unread are outside the sync window
+					if (olderUnreadOffsetRef.current === null) {
+						olderUnreadOffsetRef.current = Math.max(
+							0,
+							apiUnreadTotalRef.current - liveRecentUnread
+						);
+					}
+
+					setUnreadCount(olderUnreadOffsetRef.current + liveRecentUnread);
+				});
+
+				unreadLiveQueryRef.current = countLiveQuery;
 			} catch (err) {
-				console.error("[useInbox] Unread count sync error:", err);
+				console.error("[useInbox] Electric setup failed:", err);
-				// On error, counts will remain at 0 or previous values
-				// The items-based count will be the fallback
 			}
 		}
 
-		setupUnreadCountSync();
+		setupElectricRealtime();
 
 		return () => {
 			mounted = false;
-			if (unreadCountLiveQueryRef.current) {
+			if (syncHandleRef.current) {
-				unreadCountLiveQueryRef.current.unsubscribe();
+				try { syncHandleRef.current.unsubscribe(); } catch { /* PGlite may be closed */ }
-				unreadCountLiveQueryRef.current = null;
+				syncHandleRef.current = null;
+			}
+			if (liveQueryRef.current) {
+				try { liveQueryRef.current.unsubscribe?.(); } catch { /* PGlite may be closed */ }
+				liveQueryRef.current = null;
+			}
+			if (unreadLiveQueryRef.current) {
+				try { unreadLiveQueryRef.current.unsubscribe?.(); } catch { /* PGlite may be closed */ }
+				unreadLiveQueryRef.current = null;
 			}
 		};
-	}, [userId, searchSpaceId, typeFilter, electricClient]);
+	}, [userId, searchSpaceId, electricClient]);
 
-	// loadMore - Pure cursor-based pagination, no race conditions
+	// Load more pages via API (cursor-based using before_date)
-	// Cursor is computed from current state, not stored in refs
 	const loadMore = useCallback(async () => {
-		// Removed inboxItems.length === 0 check to allow loading older items
+		if (loadingMore || !hasMore || !userId || !searchSpaceId) return;
-		// when Electric returns 0 items
-		if (!userId || loadingMore || !hasMore) return;
 
 		setLoadingMore(true);
-
 		try {
-			// Cursor is computed from current state - no stale refs possible
 			const oldestItem = inboxItems.length > 0 ? inboxItems[inboxItems.length - 1] : null;
-			const beforeDate = oldestItem ? toISOString(oldestItem.created_at) : null;
+			const beforeDate = oldestItem?.created_at ?? undefined;
 
-			console.log("[useInbox] Loading more, before:", beforeDate ?? "none (initial)");
+			const response = await notificationsApiService.getNotifications({
-
-			// Use the API service with proper Zod validation
-			const data = await notificationsApiService.getNotifications({
 				queryParams: {
-					search_space_id: searchSpaceId ?? undefined,
+					search_space_id: searchSpaceId,
-					type: typeFilter ?? undefined,
+					before_date: beforeDate,
-					before_date: beforeDate ?? undefined,
+					limit: SCROLL_PAGE_SIZE,
-					limit: PAGE_SIZE,
 				},
 			});
 
-			if (data.items.length > 0) {
+			const newItems = response.items;
-				// Functional update ensures we always merge with latest state
-				// Items are already validated by the API service
-				setInboxItems((prev) => deduplicateAndSort([...prev, ...data.items]));
-			}
 
-			// Use API's has_more flag
+			setInboxItems((prev) => {
-			setHasMore(data.has_more);
+				const existingIds = new Set(prev.map((d) => d.id));
+				const deduped = newItems.filter((d) => !existingIds.has(d.id));
+				return [...prev, ...deduped];
+			});
+			setHasMore(response.has_more);
 		} catch (err) {
 			console.error("[useInbox] Load more failed:", err);
 		} finally {
 			setLoadingMore(false);
 		}
-	}, [userId, searchSpaceId, typeFilter, loadingMore, hasMore, inboxItems]);
+	}, [loadingMore, hasMore, userId, searchSpaceId, inboxItems]);
 
-	// Mark inbox item as read with optimistic update
+	// Mark single item as read with optimistic update
-	// Handles both recent items (live query updates count) and older items (manual count decrement)
 	const markAsRead = useCallback(
 		async (itemId: number) => {
-			// Find the item to check if it's older than sync window
 			const item = inboxItems.find((i) => i.id === itemId);
-			const isOlderItem = item && !item.read && isOlderThanSyncWindow(item.created_at);
+			if (!item || item.read) return true;
+
+			const cutoff = new Date(getSyncCutoffDate());
+			const isOlderItem = new Date(item.created_at) < cutoff;
 
-			// Optimistic update: mark as read immediately for instant UI feedback
 			setInboxItems((prev) => prev.map((i) => (i.id === itemId ? { ...i, read: true } : i)));
+			setUnreadCount((prev) => Math.max(0, prev - 1));
 
-			// If older item, manually decrement older count
+			// Adjust older offset so the next live query callback stays consistent
-			// (live query won't see items outside sync window)
+			if (isOlderItem && olderUnreadOffsetRef.current !== null) {
-			if (isOlderItem) {
+				olderUnreadOffsetRef.current = Math.max(0, olderUnreadOffsetRef.current - 1);
-				setOlderUnreadCount((prev) => Math.max(0, prev - 1));
 			}
 
 			try {
-				// Use the API service with proper Zod validation
 				const result = await notificationsApiService.markAsRead({ notificationId: itemId });
-
 				if (!result.success) {
-					// Rollback on error
 					setInboxItems((prev) => prev.map((i) => (i.id === itemId ? { ...i, read: false } : i)));
-					if (isOlderItem) {
+					setUnreadCount((prev) => prev + 1);
-						setOlderUnreadCount((prev) => prev + 1);
+					if (isOlderItem && olderUnreadOffsetRef.current !== null) {
+						olderUnreadOffsetRef.current += 1;
 					}
 				}
-				// If successful, Electric SQL will sync the change and live query will update
-				// This ensures eventual consistency even if optimistic update was wrong
 				return result.success;
 			} catch (err) {
 				console.error("Failed to mark as read:", err);
-				// Rollback on error
 				setInboxItems((prev) => prev.map((i) => (i.id === itemId ? { ...i, read: false } : i)));
-				if (isOlderItem) {
+				setUnreadCount((prev) => prev + 1);
-					setOlderUnreadCount((prev) => prev + 1);
+				if (isOlderItem && olderUnreadOffsetRef.current !== null) {
+					olderUnreadOffsetRef.current += 1;
 				}
 				return false;
 			}
@@ -499,49 +369,39 @@ export function useInbox(
 		[inboxItems]
 	);
 
-	// Mark all inbox items as read with optimistic update
+	// Mark all as read with optimistic update
-	// Resets both older and recent counts to 0
 	const markAllAsRead = useCallback(async () => {
-		// Store previous counts for potential rollback
+		const prevCount = unreadCount;
-		const prevOlderCount = olderUnreadCount;
+		const prevOffset = olderUnreadOffsetRef.current;
-		const prevRecentCount = recentUnreadCount;
 
-		// Optimistic update: mark all as read immediately for instant UI feedback
 		setInboxItems((prev) => prev.map((item) => ({ ...item, read: true })));
-		setOlderUnreadCount(0);
+		setUnreadCount(0);
-		setRecentUnreadCount(0);
+		olderUnreadOffsetRef.current = 0;
 
 		try {
-			// Use the API service with proper Zod validation
 			const result = await notificationsApiService.markAllAsRead();
-
 			if (!result.success) {
-				console.error("Failed to mark all as read");
+				setUnreadCount(prevCount);
-				// Rollback counts on error
+				olderUnreadOffsetRef.current = prevOffset;
-				setOlderUnreadCount(prevOlderCount);
-				setRecentUnreadCount(prevRecentCount);
 			}
-			// Electric SQL will sync and live query will ensure consistency
 			return result.success;
 		} catch (err) {
 			console.error("Failed to mark all as read:", err);
-			// Rollback counts on error
+			setUnreadCount(prevCount);
-			setOlderUnreadCount(prevOlderCount);
+			olderUnreadOffsetRef.current = prevOffset;
-			setRecentUnreadCount(prevRecentCount);
 			return false;
 		}
-	}, [olderUnreadCount, recentUnreadCount]);
+	}, [unreadCount]);
 
 	return {
 		inboxItems,
-		unreadCount: totalUnreadCount,
+		unreadCount,
 		markAsRead,
 		markAllAsRead,
 		loading,
 		loadingMore,
 		hasMore,
 		loadMore,
-		isUsingApiFallback: true, // Always use API for pagination
 		error,
 	};
 }

surfsense_web/lib/query-client/cache-keys.ts

@@ -98,9 +98,5 @@ export const cacheKeys = {
 			["notifications", "search", searchSpaceId, search, tab] as const,
 		sourceTypes: (searchSpaceId: number | null) =>
 			["notifications", "source-types", searchSpaceId] as const,
-		bySourceType: (searchSpaceId: number | null, sourceType: string) =>
-			["notifications", "by-source-type", searchSpaceId, sourceType] as const,
-		byFilter: (searchSpaceId: number | null, filter: string) =>
-			["notifications", "by-filter", searchSpaceId, filter] as const,
 	},
 };