fix: filter when switching websites, hooks to websiteId

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/filters/filters-section.tsx

@@ -74,7 +74,9 @@ export function FiltersSection() {
 
 	const handleSave = useCallback(
 		(name: string) => {
-			if (filters.length === 0) return;
+			if (filters.length === 0) {
+				return;
+			}
 			setIsSaving(true);
 
 			const result = editing
@@ -146,7 +148,9 @@ export function FiltersSection() {
 	}, [editing, setFilters]);
 
 	const handleSaveEdit = useCallback(() => {
-		if (!editing || filters.length === 0) return;
+		if (!editing || filters.length === 0) {
+			return;
+		}
 		setIsSaving(true);
 		const result = updateFilter(editing.id, editing.name, filters);
 		if (result.success) {
@@ -164,7 +168,9 @@ export function FiltersSection() {
 		setIsDeletingAll(false);
 	}, [deleteAllFilters]);
 
-	if (filters.length === 0) return null;
+	if (filters.length === 0) {
+		return null;
+	}
 
 	return (
 		<div className="angled-rectangle-gradient border-b bg-background">

apps/dashboard/app/(main)/websites/[id]/layout.tsx

@@ -1,13 +1,17 @@
 "use client";
 
 import { useQueryClient } from "@tanstack/react-query";
-import { useAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import { useParams, usePathname } from "next/navigation";
+import { useLayoutEffect } from "react";
 import { toast } from "sonner";
 import { WebsiteErrorState } from "@/components/website-error-state";
 import { useTrackingSetup } from "@/hooks/use-tracking-setup";
 import { useWebsite } from "@/hooks/use-websites";
-import { isAnalyticsRefreshingAtom } from "@/stores/jotai/filterAtoms";
+import {
+	currentFilterWebsiteIdAtom,
+	isAnalyticsRefreshingAtom,
+} from "@/stores/jotai/filterAtoms";
 import { AnalyticsToolbar } from "./_components/analytics-toolbar";
 import { WebsiteTrackingSetupTab } from "./_components/tabs/tracking-setup-tab";
 
@@ -32,6 +36,11 @@ export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
 	const pathname = usePathname();
 	const queryClient = useQueryClient();
 	const [isRefreshing, setIsRefreshing] = useAtom(isAnalyticsRefreshingAtom);
+	const setCurrentFilterWebsiteId = useSetAtom(currentFilterWebsiteIdAtom);
+
+	useLayoutEffect(() => {
+		setCurrentFilterWebsiteId(websiteId);
+	}, [websiteId, setCurrentFilterWebsiteId]);
 
 	const isDemoRoute = pathname?.startsWith("/demo/");
 	const hideToolbar = NO_TOOLBAR_ROUTES.some((route) =>

apps/dashboard/stores/jotai/filterAtoms.ts

@@ -3,13 +3,13 @@ import dayjs from "dayjs";
 export interface DynamicQueryFilter {
 	field: string;
 	operator:
-		| "eq"
-		| "ne"
-		| "contains"
-		| "not_contains"
-		| "starts_with"
-		| "in"
-		| "not_in";
+	| "eq"
+	| "ne"
+	| "contains"
+	| "not_contains"
+	| "starts_with"
+	| "in"
+	| "not_in";
 	value: string | number | (string | number)[];
 }
 
@@ -291,33 +291,57 @@ export const isAnalyticsRefreshingAtom = atom(false);
 
 // --- Dynamic Query Filters (for shared package compatibility) ---
 /**
- * Atom for storing DynamicQueryFilter[] from @databuddy/shared
- * This is used for the analytics toolbar and shared across all website pages
+ * Internal atom storing filters with their associated websiteId.
+ * Filters are automatically cleared when accessing from a different website.
+ */
+const dynamicQueryFiltersBaseAtom = atom<{
+	websiteId: string | null;
+	filters: DynamicQueryFilter[];
+}>({ websiteId: null, filters: [] });
+
+/** Atom to track current website context for filter scoping */
+export const currentFilterWebsiteIdAtom = atom<string | null>(null);
+
+/**
+ * Derived atom that returns filters only if they belong to the current website.
+ * Automatically clears stale filters from other websites.
  */
-export const dynamicQueryFiltersAtom = atom<DynamicQueryFilter[]>([]);
+export const dynamicQueryFiltersAtom = atom(
+	(get) => {
+		const { websiteId, filters } = get(dynamicQueryFiltersBaseAtom);
+		const currentWebsiteId = get(currentFilterWebsiteIdAtom);
+		if (currentWebsiteId && websiteId && currentWebsiteId !== websiteId) {
+			return [];
+		}
+		return filters;
+	},
+	(get, set, newFilters: DynamicQueryFilter[]) => {
+		const currentWebsiteId = get(currentFilterWebsiteIdAtom);
+		set(dynamicQueryFiltersBaseAtom, {
+			websiteId: currentWebsiteId,
+			filters: newFilters,
+		});
+	}
+);
 
 /**
  * Action atom for adding a new dynamic query filter.
  * Adds the filter if it doesn't already exist (based on field and value).
  */
 export const addDynamicFilterAtom = atom(
 	null,
-	(_get, set, filter: DynamicQueryFilter) => {
-		set(dynamicQueryFiltersAtom, (prev) => {
-			// Check if a filter with the same field and value already exists
-			const isDuplicate = prev.some(
-				(existing) =>
-					existing.field === filter.field &&
-					existing.value === filter.value &&
-					existing.operator === filter.operator
-			);
-
-			if (isDuplicate) {
-				return prev; // Don't add duplicate filters
-			}
+	(get, set, filter: DynamicQueryFilter) => {
+		const prev = get(dynamicQueryFiltersAtom);
+		const isDuplicate = prev.some(
+			(existing) =>
+				existing.field === filter.field &&
+				existing.value === filter.value &&
+				existing.operator === filter.operator
+		);
 
-			return [...prev, filter];
-		});
+		if (!isDuplicate) {
+			set(dynamicQueryFiltersAtom, [...prev, filter]);
+		}
 	}
 );
 
@@ -327,8 +351,10 @@ export const addDynamicFilterAtom = atom(
  */
 export const removeDynamicFilterAtom = atom(
 	null,
-	(_get, set, filter: Partial<DynamicQueryFilter>) => {
-		set(dynamicQueryFiltersAtom, (prev) =>
+	(get, set, filter: Partial<DynamicQueryFilter>) => {
+		const prev = get(dynamicQueryFiltersAtom);
+		set(
+			dynamicQueryFiltersAtom,
 			prev.filter(
 				(existing) =>
 					!(